Creating a New Component

Contributing components

Each component requires several files.

The files

Assuming "foo" is the component, the following are created:

• src/styles/foo.scss is a SASS template with an example BEM structure, includes sample elements and states
• src/styles/components.scss is appended with @import "components/foo.scss"
• test/templates/foo/data.json defines properties, modifiers, states and aria options (i.e., a primitive schema) for the component
• test/templates/foo/component.njk is Nunjucks macro with a basic constructor
• test/templates/foo/index.njk imports above macro and data file to output the base component

Read more about the test framework and Visual Testing

Run npm run start:playground. Navigate to localhost:3030/foo to see the page.

Note: The server must be restarted if data.json changes.