# How to create/edit Storefront UI component
At this point we assume you're already familiar with our coding guidelines and know how to work with our Figma designs. The below section will guide you through how to create your first component for the library!
# Generate the component's template
create-component script at the respository's root level to generate all the files needed.
$storefront-ui yarn run create-component
You will need to select the correct configurations for your component, such as:
- Framework (at the moment we only have Vue.js)
- Which group directory this component belongs to - according to Atomic Design and from the component's requirements.
- Name of the component (WITHOUT the prefix
Once done, it will generate boilerplates and help you create a component in standardized way without a lot of effort.
- All the files except
.scsswill be located in
scssfile will automatically reside in
# Create proper markup
Start with creating a proper CSS/HTML markup without worrying about the slots and SCSS variables. Once you have semantical-correct and good-looking component, it's time to make it customizable.
# Make the content customizable with slots
Now it's time to figure out which content should be customizable.
By design try not to pass any content into
props - instead use
Every text field should be a
slot. Take a look at
component for inspiration.
# Edit styles
You should read and follow our CSS Coding guidelines.
For color modifiers (if it's applied to your component)
you should use common classes, by the following convention:
We already have these color helpers declared globally, and it may
work by default for your component. In this case you should just add
these classes as
CSS Modifier on your component documentation,
without adding new styles for that.
# Add unit tests
Please follow our Unit tests guidelines
Some of the most common cases can be found in an example template.
# Documentation and stories
Document the components according to
# Running tests
You should test your component by importing it inside
yarn run serve.
yarn test:unit to run all the unit tests.
# Export components
Add your components code in: