@elementinsurance/purchase-flow-components

Components to build purchase flows connecting to ELEMENT

Usage no npm install needed!

<script type="module">
  import elementinsurancePurchaseFlowComponents from 'https://cdn.skypack.dev/@elementinsurance/purchase-flow-components';
</script>

README

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.