@culturehacklabs/chl-common-ui v0.7.27

chl-common-ui

note: unstable

This is the UI kit for Genki. It includes:

• The definitive Genki UI theme, as:
  • a tailwind theme + postCSS
  • compiled css and ejs for loading in JS or CSS
  • a <genki-theme /> web component that can be loaded at the top of any HTML page to provide the CSS, fonts and assets
• Raw assets including fonts and icons
• A fully modular tailwind based styling system that works across frameworks

• A library of components (in the atomic design style). These are custom elements and have accompanying react wrappers.

Development

To open a fast live reloading server where you can iterate on design and functionality of the components:

npm run start

To build the component library and update the gallery and docs, run:

npm run build

To run the unit tests for the components, run:

npm test

To generate a new component template, run:

# npm run generate scope/genki-componentname
# e.g.
npm run generate atoms/genki-avatar

Components

• <account-drop-down> code | readme
• <add-new-element-button> code | readme
• <chl-accordion> code | readme
• <chl-button> code | readme
• <chl-document-card> code | readme
• <confirmation-dialog> code | readme
• <content-finder> code | readme
• <content-results> code | readme
• <content-searchfield> code | readme
• <genki-block-figure> code | readme
• <genki-block-quote> code | readme
• <genki-block-settings> code | readme
• <genki-block-summary> code | readme
• <genki-block-tagged-title> code | readme
• <genki-component-card> code | readme
• <genki-heading> code | readme
• <genki-icon> code | readme
• <genki-navigator> code | readme
• <genki-prose> code | readme
• <genki-result-article> code | readme
• <genki-result-card> code | readme
• <genki-result-citation> code | readme
• <genki-result-figure> code | readme
• <genki-result-insert-btn> code | readme
• <genki-result-summary> code | readme
• <genki-result-tag> code | readme
• <genki-tag> code | readme
• <genki-theme> code | readme
• <publish-tag> code | readme
• <tag-picker> code | readme
• <tag-picker-display> code | readme
• <tag-picker-editor> code | readme