Generic Drupal Web Components

Inspired by @generic-components/components this project aims to create a library of generic web components that are accessible, framework agnostic, possible to style, and easy to use with data provided by Drupal.

A demo of the current components can be found at: https://project.pages.drupalcode.org/gdwc and you can also watch a brief project overview video.

Usage

Via NPM

Components can be installed via NPM (View example on Codesandbox):

npm i @gdwc/components

And imported in your code via ES imports:

import '@gdwc/components/menu';

Via CDN

Alternatively you can load the components from a CDN and drop them in your HTML file as a script tag. (View example on Codepen)

<script type="module">
import gdwcComponents from 'https://cdn.skypack.dev/@gdwc/components';
</script>

<gdwc-menu branding="Menu Heading" baseUrl="https://decoupled-menus.jsonapi.dev" menuId="main"></gdwc-menu>

Note: using the baseUrl and menuId attributes with the gdwc-custom element requires a Drupal site with the Decoupled Menus module enabled.

Guiding Principles

• It should be easy to use these web components in decoupled Drupal projects with API data provided by Drupal Core.
• It should also be possible to use these same components within Drupal's traditional Twig based templating engine.
• While additional components may be contributed, this project will primarily focus on creating components following along with related strategic Drupal initiatives. Our first component will be a menu component for example.

Contributing

Please consult our documentation for contributors.