Purchase Flow Components
Creating components
Follow these steps to create a new component
- Find or create a folder that is named like the
ItemType
you are using (e.g.Form
) - Create a new folder within the folder of step 1 that is named like the component itself
- Create a
Name.ts
file with a default export of the full name, e.g.export default `${ItemTypes.FORM}/CalculatedText`;
- Create a
Definition.ts
file with theComponentDefinition
inside, please note all used language labels - Create an
index.tsx
with the component as a default export, use the export fromName.ts
as thedisplayName
- Add the component from
index.tsx
to/src/components/Components.ts
- 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.