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://gdwc.netlify.app/ 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.

Contributing

Please consult our documentation for contributors or the file contributing.mdx within this codebase.