Components to build purchase flows connecting to ELEMENT


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for @elementinsurance/purchase-flow-components in KB


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


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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.