@jack-henry/jh-elements 2.0.0-beta.8

package/components/checkbox-group/checkbox-group.js

@@ -0,0 +1,241 @@
+// SPDX-FileCopyrightText: 2025 Jack Henry
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import { LitElement, css, html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+let id = 0;
+/**
+ *
+ * @cssprop --jh-checkbox-group-label-color-text - The label text color. Defaults to `--jh-color-content-primary-enabled`.
+ * @cssprop --jh-checkbox-group-required-color-text - The required indicator color.
+ * Defaults to `--jh-color-content-negative-enabled`.
+ * @cssprop --jh-checkbox-group-required-color-text-optional - The optional indicator text color.
+ * Defaults to `--jh-color-content-primary-enabled`.
+ * @cssprop --jh-checkbox-group-helper-color-text - The helper-text text color.
+ * Defaults to `--jh-color-content-secondary-enabled`.
+ * @cssprop --jh-checkbox-group-error-color-text - The error-text text color.
+ * Defaults to `--jh-color-content-negative-enabled`.
+ *
+ * @slot default - Use to insert `<jh-checkbox>` component(s).
+ *
+ * @customElement jh-checkbox-group
+ */
+export class JhCheckboxGroup extends LitElement {
+  /** @type {?Number} */
+  #id;
+
+  static get styles() {
+    return css`
+      :host {
+        font-family: var(--jh-font-helper-regular-font-family);
+        font-weight: var(--jh-font-helper-regular-font-weight);
+        font-size: var(--jh-font-helper-regular-font-size);
+        line-height: var(--jh-font-helper-regular-line-height);
+        display: block;
+      }
+      /* reset fieldset and legend for styling */
+      :host fieldset {
+        border: none;
+        padding: 0;
+        margin: 0;
+      }
+      :host legend {
+        padding: 0;
+      }
+      :host([label]) .controls {
+        margin-top: var(--jh-dimension-200);
+      }
+      :host([orientation='vertical'])  .controls {
+        display: flex;
+        flex-direction: column;
+      }
+      :host([orientation='vertical'])  ::slotted(*) {
+        margin-bottom: var(--jh-dimension-200);
+        flex: 1;
+      }
+      :host([orientation='vertical'])  ::slotted(:last-of-type) {
+        margin-bottom: 0;
+      }
+      :host([orientation='horizontal']) .controls {
+        display: flex;
+        flex-direction: row;
+      }
+      :host([orientation='horizontal']) ::slotted(*) {
+        margin-right: var(--jh-dimension-400);
+        margin-bottom: 0;
+        flex: 1;
+      }
+      :host([orientation='horizontal']) ::slotted(:last-of-type) {
+        margin-right: 0;
+      }
+      .label {
+        color: var(
+          --jh-checkbox-group-label-color-text,
+          var(--jh-color-content-primary-enabled)
+        );
+      }
+      .helper-text {
+        color: var(
+          --jh-checkbox-group-helper-color-text,
+          var(--jh-color-content-secondary-enabled)
+        );
+        margin: 0;
+      }
+      .label-text,
+      .helper-text,
+      :host([invalid]) .error-text {
+        word-break: break-word;
+      }
+      :host([invalid]) .error-text {
+        color: var(
+          --jh-checkbox-group-error-color-text,
+          var(--jh-color-content-negative-enabled)
+        );
+        margin: var(--jh-dimension-200) 0 0 0;
+      }
+      :host([show-indicator]) .indicator {
+        color: var(
+          --jh-checkbox-group-required-color-text-optional,
+          var(--jh-color-content-primary-enabled)
+        );
+      }
+      :host([show-indicator][required]) .indicator {
+        color: var(
+          --jh-checkbox-group-required-color-text,
+          var(--jh-color-content-negative-enabled)
+        );
+      }
+    `;
+  }
+  static get properties() {
+    return {
+      /** Sets an `aria-label` to assist screen reader users when no visible label is present. */
+      accessibleLabel: {
+        type: String,
+        attribute: 'accessible-label',
+      },
+      /** Text to be displayed when checkbox group has failed validation and `invalid` is true. */
+      errorText: {
+        type: String,
+        attribute: 'error-text',
+      },
+      /**
+       * Provides additional context or guidance for using the checkbox group. For `helper-text` to be displayed, the `label` property must also be set.
+       */
+      helperText: {
+        attribute: 'helper-text',
+      },
+      /** Sets an `aria-invalid` on the checkbox group to indicate the value supplied was invalid and displays `error-text` when set. */
+      invalid: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Describes the type of data to be collected.
+       */
+      label: {
+        type: String,
+      },
+      /** Indicates a value is required. */
+      required: {
+        type: Boolean,
+        reflect: true,
+      },
+      /** Determines the orientation of the checkbox group. */
+      orientation: {
+        type: String,
+        reflect: true,
+      },
+      /** 
+       * Adds a visual indicator next to the label. Indicates that a value is optional (by default) or required if the `required` property is also set. For the indicator to be displayed, the `label` property must also be set. */
+      showIndicator: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'show-indicator',
+      },
+    };
+  }
+  constructor() {
+    super();
+    /** @type {?string} */
+    this.accessibleLabel = null;
+    /** @type {?string} */
+    this.errorText = null;
+    /** @type {?string} */
+    this.helperText = null;
+    /** @type {?Boolean} */
+    this.invalid = false;
+    /** @type {?string} */
+    this.label = null;
+    /** @type {?Boolean} */
+    this.required = false;
+    /** @type {'vertical'|'horizontal'} */
+    this.orientation = 'vertical';
+    /** @type {?boolean} */
+    this.showIndicator = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.#id = id++;
+  }
+
+  #getAriaDescribedBy() {
+    if (this.errorText && this.invalid && this.helperText && this.label) {
+      return `checkbox-group-error-${this.#id} checkbox-group-helper-${
+        this.#id
+      }`;
+    } else if (this.errorText && this.invalid) {
+      return `checkbox-group-error-${this.#id}`;
+    } else if (this.helperText && this.label) {
+      return `checkbox-group-helper-${this.#id}`;
+    }
+  }
+
+  render() {
+    let indicator;
+    let helperText;
+    let label;
+    let errorText;
+
+    if (this.showIndicator) {
+      if (this.required) {
+        indicator = html`<span class="indicator" aria-hidden="true"> *</span>`;
+      } else {
+        indicator = html`<span class="indicator"> (optional)</span>`;
+      }
+    }
+
+    if (this.helperText) {
+      helperText = html`<p class="helper-text" id="checkbox-group-helper-${this.#id}">${this.helperText}</p>`;
+    }
+
+    if (this.label) {
+      label = html`
+        <legend class="label" for="checkbox-group-label-${this.#id}">
+          ${this.label}${indicator}
+        </legend>
+        ${helperText}`;
+    }
+
+    if (this.invalid && this.errorText) {
+      errorText = html`<p class="error-text" id="checkbox-group-error-${this.#id}">${this.errorText}</p>`;
+    }
+
+    return html`
+      <fieldset
+        id=${ifDefined(this.label ? `checkbox-group-label-${this.#id}` : null)}
+        aria-describedby=${ifDefined(this.#getAriaDescribedBy())}
+        ?required=${this.required}
+        aria-invalid=${ifDefined(this.invalid ? 'true' : null)}
+        aria-label=${ifDefined(this.accessibleLabel)}>
+        ${label}
+        <div class="controls"><slot></slot></div>
+        ${errorText}
+      </fieldset>
+    `;
+  }
+}
+customElements.define('jh-checkbox-group', JhCheckboxGroup);

package/components/divider/divider.js

@@ -0,0 +1,91 @@
+// SPDX-FileCopyrightText: 2025 Jack Henry
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import { LitElement, css } from 'lit';
+
+/**
+ * @cssprop --jh-divider-border-width - The divider width. Defaults to `--jh-border-decorative-width`.
+ * @cssprop --jh-divider-border-style - The divider style. Defaults to `--jh-border-decorative-style`.
+ * @cssprop --jh-divider-color-border - The divider color. Defaults to `--jh-border-decorative-color`.
+ * @cssprop --jh-divider-space-inset - The divider margin-left. Defaults to `0`.
+ * @customElement jh-divider
+ */
+export class JhDivider extends LitElement {
+  static get styles() {
+    return css`
+        :host {
+          border-bottom-width: var(--jh-divider-border-width, var(--jh-border-decorative-width));
+          border-bottom-style: var(--jh-divider-border-style, var(--jh-border-decorative-style));
+          border-bottom-color: var(--jh-divider-color-border, var(--jh-border-decorative-color));
+          display: block;
+          margin-top: 16px;
+          margin-bottom: 16px;
+          box-sizing: content-box;
+        }
+        :host([inset='0']) {
+          --inset: 0;
+        }
+        :host([inset='8']) {
+          --inset: var(--jh-dimension-200);
+        }
+        :host([inset='16']) {
+          --inset: var(--jh-dimension-400);
+        }
+        :host([inset='24']) {
+          --inset: var(--jh-dimension-600);
+        }
+        :host([inset='32']) {
+          --inset: var(--jh-dimension-800);
+        }
+        :host([inset='40']) {
+          --inset: var(--jh-dimension-1000);
+        }
+        :host([inset='48']) {
+          --inset: var(--jh-dimension-1200);
+        }
+        :host([inset='56']) {
+          --inset: var(--jh-dimension-1400);
+        }
+        :host([inset='64']) {
+          --inset: var(--jh-dimension-1600);
+        }
+        :host([inset='72']) {
+          --inset: var(--jh-dimension-1800);
+        }
+        :host([inset='80']) {
+          --inset: var(--jh-dimension-2000);
+        }
+        :host([inset='88']) {
+          --inset: var(--jh-dimension-2200);
+        }
+        :host([inset='96']) {
+          --inset: var(--jh-dimension-2400);
+        }
+        :host,
+        :host[inset] {
+          margin-left: var(--inset, var(--jh-divider-space-inset));
+        }
+      `
+        }
+
+  static get properties() {
+    return {
+      /**
+       * The alignment of the left edge of the divider.
+       */
+      inset: {
+        type: Number,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    /** @type {0|8|16|24|32|40|48|56|64|72|80|88|96} */
+    this.inset = null;
+  }
+}
+
+customElements.define('jh-divider', JhDivider);

package/components/icon/icon.js

@@ -0,0 +1,96 @@
+// SPDX-FileCopyrightText: 2025 Jack Henry
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import { LitElement, css, html } from 'lit';
+
+/**
+ * @cssprop --jh-icon-color-fill - The icon color. Defaults to `--jh-color-content-secondary-enabled`.
+ * @cssprop --jh-icon-size-extra-small - The icon size when `size="extra-small"`. Defaults to `--jh-dimension-400`.
+ * @cssprop --jh-icon-size-small - The icon size when `size="small"`. Defaults to `--jh-dimension-500`.
+ * @cssprop --jh-icon-size-medium - The icon size when `size="medium"`. Defaults to `--jh-dimension-600`.
+ * @cssprop --jh-icon-size-large - The icon size when `size="large"`. Defaults to `--jh-dimension-900`.
+ * @cssprop --jh-icon-size-extra-large - The icon size when `size="extra-large"`. Defaults to `--jh-dimension-1400`.
+ * @slot default - Use to insert the icon SVG content.
+ * @customElement jh-icon
+ */
+export class JhIcon extends LitElement {
+
+  /** @type {ElementInternals} */
+  #internals;
+
+  static get styles() {
+    return css`
+      :host {
+        fill: var(
+          --jh-icon-color-fill,
+          var(--jh-color-content-secondary-enabled)
+        );
+        width: var(--icon-size);
+        height: var(--icon-size);
+        display: inline-block;
+      }
+      :host([size='x-small']) {
+        --icon-size: var(
+          --jh-icon-size-extra-small,
+          var(--jh-dimension-400)
+        );
+      }
+      :host([size='small']) {
+        --icon-size: var(
+          --jh-icon-size-small,
+          var(--jh-dimension-500)
+        );
+      }
+      :host([size='medium']) {
+        --icon-size: var(
+          --jh-icon-size-medium,
+          var(--jh-dimension-600)
+        );
+      }
+      :host([size='large']) {
+        --icon-size: var(
+          --jh-icon-size-large,
+          var(--jh-dimension-900)
+        );
+      }
+      :host([size='x-large']) {
+        --icon-size: var(
+          --jh-icon-size-extra-large,
+          var(--jh-dimension-1400)
+        );
+      }
+      svg,
+      ::slotted(*) {
+        width: 100%;
+        height: 100%;
+      }
+    `;
+  }
+  static get properties() {
+    return {
+      /**
+       * Sets the size of the icon.
+      */
+      size: {
+        type: String, reflect: true
+      }
+    };
+  }
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+    this.#internals.role = 'graphics-symbol';
+    this.#internals.ariaHidden = 'true';
+
+    /** @type {'x-small'|'small'|'medium'|'large'|'x-large'} */
+    this.size = 'medium';
+  }
+
+  render() {
+    return html`
+      <slot></slot>
+    `;
+  }
+}
+customElements.define('jh-icon', JhIcon);