- Monorepo for components. Templates are twig, CSS preprocessor is Sass.
- Each component is a package. Probably npm. Each package has its dependencies, compiled CSS, optional js, documentation, and twig template.
- Projects can install components a-la-carte. e.g.
npm install @cu-design/component-button
.
An installed component might look like this:
node_modules/@cu-design/component-button/
├── README.md
├── button.scss
├── button.css
├── button.js
├── button.twig
├── button.ui_patterns.yml
└── package.json
Drupal integration example:
- Contrib or custom module (
cu-design
?) that:- provides namespaces for the design system. Based on https://www.drupal.org/project/components
- provides a library for the css and/or js included in the component. E.g.
cu-design/component-button
.
npm install @cu-design/component-button
A twig template could then use the following:
{{ attach_library('cu-design/component-button') }}
{% include "@cu-design/component-button/button.twig" with {
"text": content.field_paragraph_button_text,
} %}
Possible solution, use Asset Packagist and install via composer to a custom location like
web/libraries/
. See https://lightning.acquia.com/blog/round-your-front-end-javascript-libraries-composer