flos-types

• Structure
• Preload global CSS
• Publishing Type Package
• Contributing to the library
  • Bootstrap a component
• Icons
  • Testing with Icons

Structure

• We keep stories inside the component folders
• File and foldernames all lowercase with dashes

Preload global CSS

<link rel="preload" href="https://flos.webplatform-dev-01.topdanmark.cloud/_next/static/css/f2afbcc0d6116825.css" as="style" />`} />

Make sure to update the chunk-id for the correct version of flos.

Latest version can be found in source code of https://flos.webplatform-dev-01.topdanmark.cloud

Publishing Type Package

• To build the project, execute the command npm run build. The @types package includes all the required type definitions.
• To update the versioning of your project, you can modify the package.json file. Once you have made the necessary changes, you can proceed to publish your project to the npm registry by running the npm publish command.

Contributing to the library

Bootstrap a component

Run npm run prepare:component and finish the setup, and use those boilerplate as starting ground for the component.

Icons

We are using Font Awesome icons

You must update Type icon-shapes and include the file name of the SVG each time you add an additional SVG to Icon folder as an icon to be used. The file name will correspond to the options provided in the shape prop of the <Icon /> component.

If, for instance, you inserted an SVG with the filename "cart.svg". you must include the "cart" string as an option in Type icon-shapes.

Tips: To automate this process, you can execute the command npm run prepare:icons whenever you have added a new icon.

Testing with Icons

Since the Icon component dynamically loads SVG, you must specify 'act()' to flush out the async import; see example.