ILR/CU Design System

readme.md

ILR/CU Design System

• 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,
} %}

The installation location in node_modules/ isn't great, and there isn't anything like https://github.com/composer/installers for node that I know of.

The installation location in node_modules/ isn't great, and there isn't anything like https://github.com/composer/installers for node that I know of.

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

If you define a library in a node_modules package using a libraries.yml file, would Drupal know of it? Or do we need the namespacing module for our design system to somehow handle that?