A Storybook implementation for Drupal.
This toolkit provides assets for use within a Drupal theme, and a Storybook instance to preview the components.
The following instructions are for contributors to this repository. Drupal integration and usage instructions can be found within the published Storybook.
Prerequisites: Node 22 and npm
npm install— Installs dependenciesnpm run develop— Compiles styles, watches for changes, and starts the Storybook development server.
Notable directories and files unique to this project.
Includes stylesheets and components for native HTML elements or other global styles.
To create a new foundation run npm run generate:foundation from the root of the project.
Includes utility components such as breakpoints, grid, spacing, etc.
To create a new utility run npm run generate:utility from the root of the project.
Includes stylesheets and components for reusable UI elements. Atomic-level components such as buttons, form elements, icons, etc.
To create a new element run npm run generate:element from the root of the project.
Includes stylesheets and components for more complex UI components such as cards, modals, navigation, etc.
To create a new component run npm run generate:component from the root of the project.
Includes stylesheets and components for layout-level components such as containers and page templates.
To create a new layout run npm run generate:layout from the root of the project.
This project includes a light-weight design tokens system using JSON files. Tokens are compiled to CSS custom properties and included in the final CSS output.
Any doc pages that do not belong to a specific component.
Contains assets for the NPM package. Includes the following asset types:
- compiled css
- component twig files
Static files for the Storybook instance.
Never commit directly to main branch. All contributions should be added via pull requests.
Add any changes that will affect the consumer of the toolkit to the Unreleased section of CHANGELOG.md.
All components should be written with accessibility in mind at the core. Here are some good resources to get started:
Resources for writing Twig templates:
BEM (Block. Element. Modifier) is a CSS naming and organization methodology which will help us standardize our class names and prevent unintended style bleed between components.
- Add Drupal behaviors support for components.
- Add support for Drupal attributes in twig templates.
- Add additional components of each type (element, component, layout, utility).
- Add automated VRT and a11y testing.
- Add NPM package publishing workflow.
- Shift build process to GitHub Actions.
- Namespaced Twig files and instructions for importing into Drupal themes.
- Add implementation instructions for Drupal themes.