@hashicorp/design-system-components 3.2.0 → 3.4.0

package/addon/components/hds/app-footer/legal-links.js

@@ -60,7 +60,8 @@ export default class HdsAppFooterLegalLinksComponent extends Component {
    */
   get hrefForAccessibility() {
     return (
-      this.args.hrefForAccessibility ?? 'mailto:accessibility@hashicorp.com'
+      this.args.hrefForAccessibility ??
+      'https://www.hashicorp.com/accessibility'
     );
   }
 }

package/addon/components/hds/button/index.hbs

@@ -16,30 +16,30 @@
   aria-label={{if this.isIconOnly this.text null}}
 >
   {{#if this.isIconOnly}}
-    <div class="hds-button__icon">
+    <span class="hds-button__icon">
       <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-    </div>
+    </span>
   {{else}}
     {{#if this.icon}}
       {{#if (eq this.iconPosition "leading")}}
-        <div class="hds-button__icon">
+        <span class="hds-button__icon">
           <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-        </div>
-        <div class="hds-button__text">
+        </span>
+        <span class="hds-button__text">
           {{this.text}}
-        </div>
+        </span>
       {{else}}
-        <div class="hds-button__text">
+        <span class="hds-button__text">
           {{this.text}}
-        </div>
-        <div class="hds-button__icon">
+        </span>
+        <span class="hds-button__icon">
           <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-        </div>
+        </span>
       {{/if}}
     {{else}}
-      <div class="hds-button__text">
+      <span class="hds-button__text">
         {{this.text}}
-      </div>
+      </span>
     {{/if}}
   {{/if}}
 </Hds::Interactive>

package/addon/components/hds/button/index.ts

@@ -26,6 +26,7 @@ export interface HdsButtonSignature {
     icon?: string;
     iconPosition?: HdsButtonIconPosition;
     isIconOnly?: boolean;
+    isInline?: boolean;
     isFullWidth?: boolean;
   };
   Element: HdsInteractiveSignature['Element'];
@@ -165,9 +166,6 @@ export default class HdsButtonIndexComponent extends Component<HdsButtonSignatur
   get classNames() {
     let classes = ['hds-button'];
 
-    // add a class based on the @size argument
-    classes.push(`hds-button--size-${this.size}`);
-
     // add a class based on the @color argument
     classes.push(`hds-button--color-${this.color}`);
 
@@ -176,11 +174,19 @@ export default class HdsButtonIndexComponent extends Component<HdsButtonSignatur
       classes.push('hds-button--width-full');
     }
 
-    // add a class if it's icon-only
+    // add a class based on isIconOnly argument
     if (this.isIconOnly) {
       classes.push('hds-button--is-icon-only');
     }
 
+    // add a class based on the @isInline argument
+    if (this.args.isInline) {
+      classes.push('hds-button--is-inline');
+    }
+
+    // add a class based on the @size argument
+    classes.push(`hds-button--size-${this.size}`);
+
     return classes.join(' ');
   }
 }

package/addon/components/hds/dropdown/list-item/checkmark.hbs

@@ -20,11 +20,11 @@
     aria-selected={{if @selected "true" "false"}}
   >
     {{#if @icon}}
-      <div class="hds-dropdown-list-item__interactive-icon">
+      <span class="hds-dropdown-list-item__interactive-icon">
         <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
-      </div>
+      </span>
     {{/if}}
-    <Hds::Text::Body @tag="div" @size="200" @weight="medium" class="hds-dropdown-list-item__interactive-text">
+    <Hds::Text::Body @tag="span" @size="200" @weight="medium" class="hds-dropdown-list-item__interactive-text">
       {{yield}}
     </Hds::Text::Body>
     {{#if @count}}

package/addon/components/hds/dropdown/list-item/interactive.hbs

@@ -25,11 +25,11 @@
       ...attributes
     >
       {{#if @icon}}
-        <div class="hds-dropdown-list-item__interactive-icon">
+        <span class="hds-dropdown-list-item__interactive-icon">
           <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
-        </div>
+        </span>
       {{/if}}
-      <Hds::Text::Body class="hds-dropdown-list-item__interactive-text" @tag="div" @size="200" @weight="medium">
+      <Hds::Text::Body class="hds-dropdown-list-item__interactive-text" @tag="span" @size="200" @weight="medium">
         {{this.text}}
       </Hds::Text::Body>
     </Hds::Interactive>

package/addon/components/hds/form/character-count/index.hbs

@@ -0,0 +1,28 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<Hds::Text::Body
+  @tag="div"
+  @size="100"
+  class={{this.classNames}}
+  id={{this.id}}
+  {{did-insert this.onInsert}}
+  {{will-destroy this.willDestroyNode}}
+  ...attributes
+  aria-live="polite"
+>
+  {{#if (has-block)}}
+    {{yield
+      (hash
+        minLength=this.minLength
+        maxLength=this.maxLength
+        currentLength=this.currentLength
+        remaining=this.remaining
+        shortfall=this.shortfall
+      )
+    }}
+  {{else}}
+    {{this.message}}
+  {{/if}}
+</Hds::Text::Body>

package/addon/components/hds/form/character-count/index.js

@@ -0,0 +1,178 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+const ID_PREFIX = 'character-count-';
+const NOOP = () => {};
+
+export default class HdsFormCharacterCountIndexComponent extends Component {
+  // The current number of characters in the associated input
+  @tracked currentLength;
+  inputControl = document.getElementById(this.args.controlId);
+
+  // Inflector utility function to determine plural or singular for 'character' noun
+  pluralize(count, prefix = '', noun = 'character', suffix = 's') {
+    return `${count}${prefix ? ' ' + prefix : ''} ${noun}${
+      count !== 1 ? suffix : ''
+    }`;
+  }
+
+  /**
+   * @param maxLength
+   * @type {number}
+   * @default null
+   * @description The maximum number of characters allowed.
+   */
+  get maxLength() {
+    let { maxLength } = this.args;
+    return parseInt(maxLength);
+  }
+
+  /**
+   * @param minLength
+   * @type {number}
+   * @default null
+   * @description The minimum number of characters allowed.
+   */
+  get minLength() {
+    let { minLength } = this.args;
+    return parseInt(minLength);
+  }
+
+  /**
+   * @param remaining
+   * @type {number}
+   * @default null
+   * @description The remaining number of characters.
+   */
+  get remaining() {
+    return this.maxLength - this.currentLength;
+  }
+
+  /**
+   * @param shortfall
+   * @type {number}
+   * @default null
+   * @description The number of characters the content is falling short of.
+   */
+  get shortfall() {
+    return this.minLength - this.currentLength;
+  }
+
+  /**
+   * @param message
+   * @type {string}
+   * @default null
+   * @description The character count message presented to users
+   */
+  get message() {
+    let messageText = '';
+    if (this.minLength && this.currentLength === 0) {
+      messageText = `${this.pluralize(this.minLength)} required`;
+    } else if (this.minLength && this.currentLength < this.minLength) {
+      messageText = `${this.pluralize(this.shortfall, 'more')} required`;
+    } else if (this.maxLength && this.currentLength === 0) {
+      messageText = `${this.pluralize(this.maxLength)} allowed`;
+    } else if (this.maxLength && this.currentLength <= this.maxLength) {
+      messageText = `${this.pluralize(this.remaining)} remaining`;
+    } else if (this.currentLength > this.maxLength) {
+      messageText = `Exceeded by ${this.pluralize(-this.remaining)}`;
+    } else {
+      messageText = `${this.pluralize(this.currentLength)} entered`;
+    }
+    return messageText;
+  }
+
+  /**
+   * Determines the unique ID to assign to the element
+   * @method id
+   * @return {(string|null)} The "id" attribute to apply to the element or null, if no controlId is provided
+   */
+  get id() {
+    let { controlId } = this.args;
+    if (controlId) {
+      return `${ID_PREFIX}${controlId}`;
+    }
+    return null;
+  }
+
+  /**
+   * @param onInsert
+   * @type {function}
+   * @default () => {}
+   */
+  get onInsert() {
+    let { onInsert } = this.args;
+
+    if (!this.inputControl || this.inputControl.value === undefined) {
+      console.error(
+        '`Hds::Form::CharacterCount` component - `@controlId` selector provided does not point to a valid input element, check the id',
+        this.args.controlId
+      );
+    } else {
+      this.updateCurrentLength();
+      this.inputControl.addEventListener(
+        'input',
+        this.updateCurrentLength,
+        true
+      );
+    }
+
+    // notice: this is a guard used to prevent triggering an error when the component is used as standalone element
+    if (typeof onInsert === 'function') {
+      return onInsert;
+    } else {
+      return NOOP;
+    }
+  }
+
+  @action
+  willDestroyNode() {
+    if (this.inputControl) {
+      this.inputControl.removeEventListener(
+        'input',
+        this.updateCurrentLength,
+        true
+      );
+    }
+  }
+
+  @action
+  updateCurrentLength() {
+    this.currentLength = this.inputControl?.value?.length;
+
+    if (typeof this.args.onInput === 'function') {
+      this.args.onInput({
+        inputControl: this.inputControl,
+        currentLength: this.currentLength,
+        maxLength: this.maxLength,
+        minLength: this.minLength,
+        remaining: this.remaining,
+        shortfall: this.shortfall,
+      });
+    }
+  }
+
+  /**
+   * 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-character-count'];
+
+    // add a class based on the @contextualClass argument
+    // notice: this will *not* be documented for public use
+    // the reason for this is that the contextual component declarations don't pass attributes to the component
+    if (this.args.contextualClass) {
+      classes.push(this.args.contextualClass);
+    }
+
+    return classes.join(' ');
+  }
+}

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

@@ -27,6 +27,16 @@
   <div class="hds-form-field__control">
     {{yield (hash Control=(component "hds/yield") id=this.id ariaDescribedBy=this.ariaDescribedBy)}}
   </div>
+  {{yield
+    (hash
+      CharacterCount=(component
+        "hds/form/character-count"
+        controlId=this.id
+        onInsert=this.appendDescriptor
+        contextualClass="hds-form-field__character-count"
+      )
+    )
+  }}
   {{yield
     (hash
       Error=(component

package/addon/components/hds/form/masked-input/field.hbs

@@ -12,7 +12,7 @@
 >
   {{! Notice: the order of the elements is not relevant here, because is controlled at "Hds::Form::Field" component level }}
   {{yield (hash Label=F.Label isRequired=F.isRequired isOptional=F.isOptional)}}
-  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
+  {{yield (hash HelperText=F.HelperText Error=F.Error CharacterCount=F.CharacterCount)}}
   <F.Control>
     <Hds::Form::MaskedInput::Base
       @hasCopyButton={{@hasCopyButton}}

package/addon/components/hds/form/text-input/field.hbs

@@ -12,7 +12,7 @@
 >
   {{! Notice: the order of the elements is not relevant here, because is controlled at "Hds::Form::Field" component level }}
   {{yield (hash Label=F.Label isRequired=F.isRequired isOptional=F.isOptional)}}
-  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
+  {{yield (hash HelperText=F.HelperText Error=F.Error CharacterCount=F.CharacterCount)}}
   <F.Control>
     <div class="hds-form-text-input__wrapper" {{style width=@width}}>
       <Hds::Form::TextInput::Base

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

@@ -12,7 +12,7 @@
 >
   {{! Notice: the order of the elements is not relevant here, because is controlled at "Hds::Form::Field" component level }}
   {{yield (hash Label=F.Label isRequired=F.isRequired isOptional=F.isOptional)}}
-  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
+  {{yield (hash HelperText=F.HelperText Error=F.Error CharacterCount=F.CharacterCount)}}
   <F.Control>
     <Hds::Form::Textarea::Base
       @value={{@value}}

package/addon/components/hds/link/standalone.hbs

@@ -11,18 +11,18 @@
   ...attributes
 >
   {{#if (eq this.iconPosition "leading")}}
-    <div class="hds-link-standalone__icon">
+    <span class="hds-link-standalone__icon">
       <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-    </div>
-    <div class="hds-link-standalone__text">
+    </span>
+    <span class="hds-link-standalone__text">
       {{this.text}}
-    </div>
+    </span>
   {{else}}
-    <div class="hds-link-standalone__text">
+    <span class="hds-link-standalone__text">
       {{this.text}}
-    </div>
-    <div class="hds-link-standalone__icon">
+    </span>
+    <span class="hds-link-standalone__icon">
       <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-    </div>
+    </span>
   {{/if}}
 </Hds::Interactive>

package/addon/components/hds/table/index.js

@@ -10,7 +10,7 @@ import { assert } from '@ember/debug';
 
 const DENSITIES = ['short', 'medium', 'tall'];
 const DEFAULT_DENSITY = 'medium';
-const VALIGNMENTS = ['top', 'middle'];
+const VALIGNMENTS = ['top', 'middle', 'baseline'];
 const DEFAULT_VALIGN = 'top';
 
 export default class HdsTableIndexComponent extends Component {
@@ -116,7 +116,7 @@ export default class HdsTableIndexComponent extends Component {
    * @param valign
    * @type {string}
    * @default 'top'
-   * @description Determines the vertical alignment of the table cells; options are: "top", "middle". If no valign is defined, "top" is used.
+   * @description Determines the vertical alignment of the table cells; options are: "top", "middle", "baseline". If no valign is defined, "top" is used.
    */
   get valign() {
     let { valign = DEFAULT_VALIGN } = this.args;

package/addon/components/hds/tabs/panel.js

@@ -8,7 +8,7 @@ import { cached } from '@glimmer/tracking';
 import { guidFor } from '@ember/object/internals';
 import { action } from '@ember/object';
 
-export default class HdsTabsIndexComponent extends Component {
+export default class HdsTabsPanelComponent extends Component {
   /**
    * Generate a unique ID for the Panel
    * @return {string}

package/addon/components/hds/tabs/tab.js

@@ -8,7 +8,7 @@ import { cached } from '@glimmer/tracking';
 import { guidFor } from '@ember/object/internals';
 import { action } from '@ember/object';
 
-export default class HdsTabsIndexComponent extends Component {
+export default class HdsTabsTabComponent extends Component {
   /**
    * Generate a unique ID for the Tab
    * @return {string}

package/app/components/hds/form/character-count/index.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/form/character-count/index';

package/app/styles/components/app-footer.scss

@@ -14,7 +14,7 @@ $app-footer-icon-text-gap: 6px;
   display: flex;
   flex-wrap: wrap;
   gap: $app-footer-gap;
-  justify-content: flex-end;
+  justify-content: center;
   padding: 24px;
   color: var(--app-footer-foreground-color);
   border-top: 1px solid var(--app-footer-border-top-color);
@@ -31,7 +31,7 @@ $app-footer-icon-text-gap: 6px;
   flex-wrap: wrap;
   gap: $app-footer-gap;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: center;
   width: fit-content;
   min-width: 0;
   margin: 0;

package/app/styles/components/button.scss

@@ -62,16 +62,17 @@
   }
 }
 
+.hds-button__icon {
+  display: block;
+}
+
 .hds-button__text {
+  display: block;
   flex: 1 0 0;
   // <button> and <a> elements have different intrinsic text alignments, so we need to normalize it
   text-align: center;
 }
 
-
-// SIZE
-@include hds-button-size-classes("hds-button");
-
 // COLORS & STATES
 // Note: the order of the pseuo-selectors need to stay the way they are; it doesn't match the Figma file but it's the correct order for browsers to render the styles correctly.
 
@@ -91,6 +92,14 @@
   @include hds-button-color-critical();
 }
 
+// SIZE
+@include hds-button-size-classes("hds-button");
+
+// ISINLINE
+.hds-button--is-inline {
+  display: inline-flex;
+}
+
 
 // SPECIAL
 

package/app/styles/components/dropdown.scss

@@ -409,11 +409,13 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
 }
 
 .hds-dropdown-list-item__interactive-icon {
+  display: block;
   margin-top: 2px;
   margin-right: 8px;
 }
 
 .hds-dropdown-list-item__interactive-text {
+  display: block;
   flex: 1;
   text-align: left; // the button element was centering text
 }

package/app/styles/components/form/character-count.scss

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// FORM > CHARACTER-COUNT
+//
+
+.hds-form-character-count {
+  color: var(--token-form-helper-text-color);
+}

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

@@ -43,6 +43,10 @@
       margin-bottom: 8px;
     }
   }
+
+  .hds-form-field__character-count {
+    margin-bottom: 8px;
+  }
 }
 
 

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

@@ -15,7 +15,7 @@
 }
 
 .hds-form-group__legend { // notice: this is a <legend> element
-  margin: 0 0 4px 0;
+  margin: 0 0 8px 0;
   padding: 0;
 }
 

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

@@ -9,6 +9,7 @@
 
 @use "./label";
 @use "./helper-text";
+@use "./character-count";
 @use "./error";
 @use "./field";
 @use "./file-input";

package/app/styles/components/link/standalone.scss

@@ -31,7 +31,12 @@ $hds-link-standalone-border-width: 1px;
   text-decoration-color: transparent;
 }
 
+.hds-link-standalone__icon {
+  display: block;
+}
+
 .hds-link-standalone__text {
+  display: block;
   flex: 1 0 0;
   text-decoration: underline;
   text-decoration-color: transparent;

package/app/styles/components/table.scss

@@ -150,6 +150,10 @@ $hds-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px difference is to a
   .hds-table--valign-middle & {
     vertical-align: middle;
   }
+
+  .hds-table--valign-baseline & {
+    vertical-align: baseline;
+  }
 }
 
 // TABLE CELL TEXT ALIGNMENT (LEFT IS DEFAULT)

package/app/styles/components/tooltip.scss

@@ -79,6 +79,8 @@
     // prevent this container from potentially inheriting other values
     // such as `white-space: nowrap` that would cause content overflow
     white-space: normal;
+    // we want to have the text always aligned to the left (by design
+    text-align: left;
   }
 
   // works with Tippy's custom SVG arrow variation:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -44,7 +44,7 @@
     "@ember/string": "^3.1.1",
     "@ember/test-waiters": "^3.1.0",
     "@hashicorp/design-system-tokens": "^1.9.0",
-    "@hashicorp/ember-flight-icons": "^4.0.4",
+    "@hashicorp/ember-flight-icons": "^4.0.5",
     "dialog-polyfill": "^0.5.6",
     "ember-a11y-refocus": "^3.0.2",
     "ember-auto-import": "^2.6.3",