@elementinsurance/purchase-flow-components

Purchase Flow Components

Creating components

Follow these steps to create a new component

1. Find or create a folder that is named like the ItemType you are using (e.g. Form)
2. Create a new folder within the folder of step 1 that is named like the component itself
3. Create a Name.ts file with a default export of the full name, e.g. export default `${ItemTypes.FORM}/CalculatedText`;
4. Create a Definition.ts file with the ComponentDefinition inside, please note all used language labels
5. Create an index.tsx with the component as a default export, use the export from Name.ts as the displayName
6. Add the component from index.tsx to /src/components/Components.ts
7. Add the component definition from Definition.ts to /src/components/Definitions.ts

Icons

Place SVG files into /icons and run yarn convert-icons. The script will automatically convert all icons within this folder into React Components and place them in /src/icons and create a index.ts. There is a story that will automatically pick up all icons. If you wish that your icon reacts to the text color, you need to add fill="currentColor" to your svg elements.

Additional styles

You need to include import 'react-day-picker/lib/style.css'; in you application.