Hermes UI Core Web Components

Hermes UI Core is a suite of Web Components (fork of Clarity Design System).

Quick Start Install

1. First, install the Hermes UI Core package from npm.

   npm install @hermes-ui/core --save

2. Import desired Web Component into your JavaScript or TypeScript

   import '@hermes-ui/core/modal/register.js';

Usage

No Framework

<hermes-modal size="lg">
  <p>slot content</p>
</hermes-modal>
<script>
  const modal = document.querySelector('hermes-modal');
  modal.addEventListener('closeChange', event => console.log(event));
  modal.closable = true;
</script>

Angular

<!--
  - `size` is set as an HTML attribute so no binding syntax is used
  - [closable] is setting a property on the element
  - (closeChange) is listening for the `closeChange` custom event
-->

<hermes-modal size="lg" [closable]="booleanValue" (closeChange)="log($event.detail)">
  <p>slot content</p>
</hermes-modal>

Vue

<!--
  - `size` is set as an HTML attribute so no binding syntax is used
  - :closable is setting a property on the element
  - @closeChange is listening for the `closeChange` custom event
-->

<hermes-modal size="lg" :closable="booleanValue" @closeChange="log($event.detail)">
  <p>slot content</p>
</hermes-modal>

React via @hermes-ui/react package

/*
  - `size` unlike the examples above `size` is set as a property
  - closable is setting a property on the element
  - onCloseChange is listening for the `closeChange` custom event
*/
<HermesModal size="lg" closable={this.state.booleanValue} onCloseChange={this.log}>
  <p>slot content</p>
</HermesModal>