@hashicorp/design-system-components 0.12.6 → 0.12.7

package/addon/components/hds/form/toggle/base.js

@@ -0,0 +1,27 @@
+import Component from '@glimmer/component';
+
+export default class HdsFormToggleBaseComponent extends Component {
+  /**
+   * Get the class names to apply to the component.
+   * @method classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-form-toggle'];
+
+    // add a class based on the @isInvalid argument
+    if (this.args.isInvalid) {
+      classes.push(`hds-form-toggle--is-invalid`);
+    }
+
+    // add a class based on the @_wrapperClass argument
+    // we need to use this special argument to pass a class to the wrapping element, because the ...attributes is applied to the control
+    // notice: this will *not* be documented for public use
+    // the reason for this is that the spread (...) of attributes is applied to the <input> element, but the component has a wrapping container and we need to pass a class to it
+    if (this.args._wrapperClass) {
+      classes.push(this.args._wrapperClass);
+    }
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/form/toggle/field.hbs

@@ -0,0 +1,20 @@
+<Hds::Form::Field
+  @layout="flag"
+  @contextualClass={{@contextualClass}}
+  @extraAriaDescribedBy={{@extraAriaDescribedBy}}
+  as |F|
+>
+  {{! Notice: the order of the elements is not relevant here, because is controlled at "Hds::Form::Field" component level }}
+  {{yield (hash Label=F.Label HelperText=F.HelperText Error=F.Error)}}
+  <F.Control>
+    <Hds::Form::Toggle::Base
+      {{! template-lint-disable no-capital-arguments }}
+      @_wrapperClass="hds-form-field__control"
+      @value={{@value}}
+      @isInvalid={{@isInvalid}}
+      ...attributes
+      id={{F.id}}
+      aria-describedby={{F.ariaDescribedBy}}
+    />
+  </F.Control>
+</Hds::Form::Field>

package/addon/components/hds/form/utils/getAriaDescribedBy.js

@@ -0,0 +1,21 @@
+export function getAriaDescribedBy(element) {
+  let ariaDescribedBy = [];
+
+  // append descriptor's IDs, if provided
+  if (element.descriptors) {
+    element.descriptors.forEach((descriptor) =>
+      ariaDescribedBy.push(descriptor)
+    );
+  }
+
+  // append @extraAriaDescribedBy arg, if provided
+  if (element.args.extraAriaDescribedBy) {
+    ariaDescribedBy.push(element.args.extraAriaDescribedBy);
+  }
+
+  if (ariaDescribedBy.length) {
+    return ariaDescribedBy.join(' ');
+  } else {
+    return null;
+  }
+}

package/addon/components/hds/form/utils/getElementId.js

@@ -0,0 +1,14 @@
+import { guidFor } from '@ember/object/internals';
+
+export function getElementId(element) {
+  // use @id arg, if provided
+  if (element.args.id) {
+    return element.args.id;
+  }
+
+  // otherwise, generate and memoize a guid
+  if (!element._id) {
+    element._id = guidFor(element);
+  }
+  return element._id;
+}

package/app/components/hds/form/checkbox/base.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/checkbox/base';

package/app/components/hds/form/checkbox/field.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/checkbox/field';

package/app/components/hds/form/checkbox/group.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/checkbox/group';

package/app/components/hds/form/error/index.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/error/index';

package/app/components/hds/form/error/message.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/error/message';

package/app/components/hds/form/field/index.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/field/index';

package/app/components/hds/form/fieldset/index.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/fieldset/index';

package/app/components/hds/form/helper-text/index.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/helper-text/index';

package/app/components/hds/form/label/index.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/label/index';

package/app/components/hds/form/legend/index.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/legend/index';

package/app/components/hds/form/radio/base.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/radio/base';

package/app/components/hds/form/radio/field.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/radio/field';

package/app/components/hds/form/radio/group.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/radio/group';

package/app/components/hds/form/select/base.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/select/base';

package/app/components/hds/form/select/field.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/select/field';

package/app/components/hds/form/text-input/base.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/text-input/base';

package/app/components/hds/form/text-input/field.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/text-input/field';

package/app/components/hds/form/textarea/base.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/textarea/base';

package/app/components/hds/form/textarea/field.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/textarea/field';

package/app/components/hds/form/toggle/base.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/toggle/base';

package/app/components/hds/form/toggle/field.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/toggle/field';

package/app/styles/@hashicorp/design-system-components.scss

@@ -15,6 +15,7 @@
 @use "../components/card";
 @use "../components/disclosure";
 @use "../components/dropdown";
+@use "../components/form"; // multiple components
 @use "../components/icon-tile";
 @use "../components/link/inline";
 @use "../components/link/standalone";

package/app/styles/components/badge.scss

@@ -18,6 +18,7 @@
   border: $hds-badge-border-width solid transparent;
   display: inline-flex;
   max-width: 100%;
+  vertical-align: middle;
 }
 
 .hds-badge__icon {

package/app/styles/components/form/checkbox.scss

@@ -0,0 +1,113 @@
+//
+// FORM > CHECKBOX
+//
+// properties within each class are sorted alphabetically
+//
+
+$hds-form-checkbox-control-size: 16px;
+$hds-form-checkbox-control-border-radius: 3px;
+
+// "BASE" CONTROL
+
+.hds-form-checkbox {
+  appearance: none;
+  background-position: center center;
+  background-size: 12px 12px;
+  border-radius: $hds-form-checkbox-control-border-radius;
+  border-style: solid;
+  border-width: 1px;
+  cursor: pointer;
+  height: $hds-form-checkbox-control-size;
+  margin: 0;
+  padding: 0;
+  width: $hds-form-checkbox-control-size;
+
+  // STATUS
+
+  // base (default)
+
+  &:not(:checked) {
+    background-color: var(--token-color-surface-primary);
+    border-color: var(--token-color-palette-neutral-400);
+    box-shadow: var(--hds-elevation-inset-box-shadow);
+  }
+  &:checked {
+    background-color: var(--token-color-palette-blue-200);
+    border-color: var(--token-color-palette-blue-300);
+    // notice: the "tick" color is hardcoded here!
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e");
+  }
+
+  // hover
+
+  &:hover:not(:checked),
+  &.mock-hover:not(:checked) {
+    border-color: var(--token-color-palette-neutral-500);
+  }
+  &:hover:checked,
+  &.mock-hover:checked {
+    background-color: var(--token-color-palette-blue-300);
+    border-color: var(--token-color-palette-blue-400);
+  }
+
+  // focus (same for all the states)
+  &:focus:not(:checked),
+  &:focus:checked,
+  &.mock-focus:checked,
+  &.mock-focus:not(:checked) {
+    border-color: var(--token-color-palette-blue-400);
+    outline: 2px solid var(--token-color-focus-action-external);
+    outline-offset: 0px;
+  }
+
+  // active
+
+  &:active:not(:checked),
+  &.mock-active:not(:checked),
+  &:active:checked,
+  &.mock-active:checked {
+    background-color: var(--token-color-palette-blue-400);
+    border-color: var(--token-color-palette-blue-400);
+  }
+
+  // INVALID
+
+  &.hds-form-checkbox--is-invalid:not(:checked) {
+    border-color: var(--token-color-palette-red-300);
+  }
+  &.hds-form-checkbox--is-invalid:checked {
+    background-color: var(--token-color-palette-red-200);
+    border-color: var(--token-color-palette-red-300);
+  }
+
+  &.hds-form-checkbox--is-invalid:hover:not(:checked),
+  &.hds-form-checkbox--is-invalid.mock-hover:not(:checked) {
+    border-color: var(--token-color-palette-red-400);
+  }
+  &.hds-form-checkbox--is-invalid:hover:checked,
+  &.hds-form-checkbox--is-invalid.mock-hover:checked {
+    background-color: var(--token-color-palette-red-300);
+    border-color: var(--token-color-palette-red-400);
+  }
+
+  &.hds-form-checkbox--is-invalid:active:not(:checked),
+  &.hds-form-checkbox--is-invalid.mock-active:not(:checked),
+  &.hds-form-checkbox--is-invalid:active:checked,
+  &.hds-form-checkbox--is-invalid.mock-active:checked {
+    background-color: var(--token-color-palette-red-400);
+    border-color: var(--token-color-palette-red-400);
+  }
+
+  // DISABLED
+
+  &:disabled:not(:checked),
+  &:disabled:checked,
+  &.hds-form-checkbox--is-invalid:disabled:not(:checked),
+  &.hds-form-checkbox--is-invalid:disabled:checked {
+    background-color: var(--token-color-surface-strong);
+    border-color: var(--token-color-border-primary);
+    box-shadow: none;
+    // notice: the "tick" color is hardcoded here!
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e");
+  }
+}

package/app/styles/components/form/error.scss

@@ -0,0 +1,27 @@
+//
+// FORM > ERROR
+//
+// properties within each class are sorted alphabetically
+//
+
+.hds-form-error {
+  align-items: flex-start;
+  color: var(--token-color-foreground-critical-on-surface);
+  display: flex;
+}
+
+.hds-form-error__icon {
+  color: var(--token-color-foreground-critical-on-surface);
+  flex: none;
+  height: 14px;
+  margin: 2px 8px 2px 0;
+  width: 14px;
+}
+
+.hds-form-error__content {
+  flex: 1 1 auto;
+}
+
+.hds-form-error__message {
+  margin: 0;
+}

package/app/styles/components/form/field.scss

@@ -0,0 +1,90 @@
+//
+// FORM > FIELD
+//
+// properties within each class are sorted alphabetically
+//
+
+
+// "VERTICAL" LAYOUT
+// used for text-input, textarea, select
+
+.hds-form-field--layout-vertical {
+  display: grid;
+  justify-items: start;
+  width: 100%; // we want the input element to fill the parent container
+
+  .hds-form-field__label {
+    width: fit-content; // needed to avoid extra invisible space since the <label> is interactive
+  }
+
+  .hds-form-field__helper-text {
+    &:not(:first-child) {
+      margin-top: 4px;
+    }
+
+    // special case: if there are multiple helper text lines, we want to reduce the spacing between them
+    & + .hds-form-helper-text {
+      margin-top: 2px;
+    }
+  }
+
+  .hds-form-field__control {
+    &:not(:first-child) {
+      margin-top: 8px;
+    }
+    &:not(:last-child) {
+      margin-bottom: 8px;
+    }
+  }
+}
+
+
+// "FLAG" LAYOUT
+// used for checkbox, radio, toggle
+// see https://codepen.io/didoo/pen/xxYPNeY
+
+.hds-form-field--layout-flag {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto auto auto;
+  grid-auto-flow: row;
+  grid-template-areas:
+    "control label"
+    "control helper-text"
+    "control error";
+  justify-items: start;
+
+  .hds-form-field__label {
+    grid-area: label;
+    width: fit-content; // needed to avoid extra invisible space since the <label> is interactive
+  }
+
+  .hds-form-field__helper-text {
+    grid-area: helper-text;
+    margin-top: 4px;
+  }
+
+  .hds-form-field__control {
+    grid-area: control;
+
+    &:not(:only-child) {
+      margin-top: 2px; // the line height of the label is bigger than the control size
+      margin-right: 8px;
+    }
+  }
+
+  .hds-form-field__error {
+    margin-top: 4px;
+    grid-area: error;
+  }
+}
+
+
+
+// Debug (please don't remove)
+//
+// .hds-form-field--layout-vertical,
+// .hds-form-field--layout-flag { outline: 2px dashed pink; }
+// .hds-form-field__label { background-color: #00ff00; }
+// .hds-form-field__helper-text { background-color: #0000ff; }
+// .hds-form-field__error { background-color: #ff0000; }

package/app/styles/components/form/group.scss

@@ -0,0 +1,52 @@
+//
+// FORM > GROUP
+//
+// properties within each class are sorted alphabetically
+//
+
+.hds-form-group { // notice: this is a <fieldset> element
+  border: none;
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+
+.hds-form-group__legend { // notice: this is a <legend> element
+  margin: 0 0 4px 0;
+  padding: 0;
+}
+
+.hds-form-group__control-fields-wrapper {
+  // when the group contains a "legend", we reduce the visual weight of the "label"
+  .hds-form-group__legend + & {
+    .hds-form-label {
+      font-weight: var(--token-typography-font-weight-regular);
+    }
+  }
+}
+
+.hds-form-group--layout-vertical {
+  .hds-form-group__control-field + .hds-form-group__control-field {
+    margin-top: 16px;
+  }
+}
+
+.hds-form-group--layout-horizontal {
+  .hds-form-group__control-fields-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: -4px;
+  }
+  .hds-form-group__control-field {
+    margin-right: 16px;
+    margin-bottom: 4px;
+  }
+}
+
+.hds-form-group__helper-text {
+  margin-bottom: 8px;
+}
+
+.hds-form-group__error {
+  margin-top: 8px;
+}

package/app/styles/components/form/helper-text.scss

@@ -0,0 +1,10 @@
+//
+// FORM > HELPER-TEXT
+//
+// properties within each class are sorted alphabetically
+//
+
+.hds-form-helper-text {
+  color: var(--token-color-foreground-faint);
+  display: block;
+}

package/app/styles/components/form/index.scss

@@ -0,0 +1,18 @@
+//
+// FORM > INDEX
+//
+
+
+@use "./label";
+@use "./helper-text";
+@use "./error";
+@use "./field";
+@use "./legend";
+@use "./group";
+
+@use "./checkbox";
+@use "./radio";
+@use "./select";
+@use "./text-input";
+@use "./textarea";
+@use "./toggle";

package/app/styles/components/form/label.scss

@@ -0,0 +1,12 @@
+//
+// FORM > LABEL
+//
+// properties within each class are sorted alphabetically
+//
+
+.hds-form-label {
+  color: var(--token-color-foreground-strong);
+  display: block;
+  max-width: 100%;
+  width: max-content; // to avoid it extends the full width of the parent container, leading to invisible interactive area
+}

package/app/styles/components/form/legend.scss

@@ -0,0 +1,10 @@
+//
+// FORM > LEGEND
+//
+// properties within each class are sorted alphabetically
+//
+
+.hds-form-legend {
+  color: var(--token-color-foreground-strong);
+  display: block;
+}

package/app/styles/components/form/radio.scss

@@ -0,0 +1,115 @@
+//
+// FORM > RADIO
+//
+// properties within each class are sorted alphabetically
+//
+
+$hds-form-radio-control-size: 16px;
+
+// "BASE" CONTROL
+
+.hds-form-radio {
+  appearance: none;
+  background-position: center center;
+  background-size: 12px 12px;
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 1px;
+  cursor: pointer;
+  height: $hds-form-radio-control-size;
+  margin: 0;
+  padding: 0;
+  width: $hds-form-radio-control-size;
+
+  // STATUS
+
+  // base (default)
+
+  &:not(:checked) {
+    background-color: var(--token-color-surface-primary);
+    border-color: var(--token-color-palette-neutral-400);
+    box-shadow: var(--hds-elevation-inset-box-shadow);
+  }
+  &:checked {
+    background-color: var(--token-color-palette-blue-200);
+    border-color: var(--token-color-palette-blue-300);
+    // notice: the "dot" color is hardcoded here!
+    background-image: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e");
+  }
+
+  // hover
+
+  &:hover:not(:checked),
+  &.mock-hover:not(:checked) {
+    border-color: var(--token-color-palette-neutral-500);
+  }
+  &:hover:checked,
+  &.mock-hover:checked {
+    background-color: var(--token-color-palette-blue-300);
+    border-color: var(--token-color-palette-blue-400);
+  }
+
+  // focus (same for all the states)
+  &:focus:not(:checked),
+  &:focus:checked,
+  &.mock-focus:checked,
+  &.mock-focus:not(:checked) {
+    border-color: var(--token-color-palette-blue-400);
+    outline: 2px solid var(--token-color-focus-action-external);
+    outline-offset: 0px;
+  }
+
+  // active
+
+  &:active:not(:checked),
+  &.mock-active:not(:checked),
+  &:active:checked,
+  &.mock-active:checked {
+    background-color: var(--token-color-palette-blue-400);
+    border-color: var(--token-color-palette-blue-400);
+  }
+
+  // INVALID
+
+  &.hds-form-radio--is-invalid:not(:checked) {
+    border-color: var(--token-color-palette-red-300);
+  }
+  &.hds-form-radio--is-invalid:checked {
+    background-color: var(--token-color-palette-red-200);
+    border-color: var(--token-color-palette-red-300);
+  }
+
+  &.hds-form-radio--is-invalid:hover:not(:checked),
+  &.hds-form-radio--is-invalid.mock-hover:not(:checked) {
+    border-color: var(--token-color-palette-red-400);
+  }
+  &.hds-form-radio--is-invalid:hover:checked,
+  &.hds-form-radio--is-invalid.mock-hover:checked {
+    background-color: var(--token-color-palette-red-300);
+    border-color: var(--token-color-palette-red-400);
+  }
+
+  &.hds-form-radio--is-invalid:active:not(:checked),
+  &.hds-form-radio--is-invalid.mock-active:not(:checked),
+  &.hds-form-radio--is-invalid:active:checked,
+  &.hds-form-radio--is-invalid.mock-active:checked {
+    background-color: var(--token-color-palette-red-400);
+    border-color: var(--token-color-palette-red-400);
+  }
+
+  // DISABLED
+
+  &:disabled:not(:checked),
+  &.hds-form-checkbox--is-invalid:disabled:not(:checked) {
+    background-color: var(--token-color-surface-strong);
+    border-color: var(--token-color-border-primary);
+  }
+  &:disabled:checked,
+  &.hds-form-checkbox--is-invalid:disabled:checked {
+    background-color: var(--token-color-surface-strong);
+    border-color: var(--token-color-border-primary);
+    box-shadow: none;
+    // notice: the "dot" color is hardcoded here!
+    background-image: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23656a76'/%3e%3c/svg%3e");
+  }
+}