@hashicorp/design-system-components 0.0.3 → 0.0.8

package/.github/workflows/ci.yml

@@ -90,7 +90,9 @@ jobs:
         steps.cache-dependencies.outputs.cache-hit != 'true'
 
     - name: Test
-      run: yarn test:ember --launch ${{ matrix.browser }}
+      run: yarn test:ember:percy --launch ${{ matrix.browser }}
+      env:
+        PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
 
   floating-dependencies:
     name: Floating Dependencies
@@ -132,7 +134,9 @@ jobs:
       run: yarn install --no-lockfile --non-interactive
 
     - name: Test
-      run: yarn test:ember --launch ${{ matrix.browser }}
+      run: yarn test:ember:percy --launch ${{ matrix.browser }}
+      env:
+        PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
 
   try-scenarios:
     name: Tests - ${{ matrix.ember-try-scenario }}

package/.node_modules.ember-try/source-map-url/.jshintrc

@@ -0,0 +1,43 @@
+{
+  "bitwise": true,
+  "camelcase": true,
+  "curly": false,
+  "eqeqeq": true,
+  "es3": true,
+  "forin": true,
+  "immed": false,
+  "indent": false,
+  "latedef": "nofunc",
+  "newcap": false,
+  "noarg": true,
+  "noempty": true,
+  "nonew": false,
+  "plusplus": false,
+  "quotmark": false,
+  "undef": true,
+  "unused": "vars",
+  "strict": false,
+  "trailing": true,
+  "maxparams": 5,
+  "maxdepth": false,
+  "maxstatements": false,
+  "maxcomplexity": false,
+  "maxlen": 100,
+
+  "asi": true,
+  "expr": true,
+  "globalstrict": true,
+  "smarttabs": true,
+  "sub": true,
+
+  "node": true,
+  "globals": {
+    "describe": false,
+    "it": false,
+    "before": false,
+    "beforeEach": false,
+    "after": false,
+    "afterEach": false,
+    "define": false
+  }
+}

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

@@ -1,4 +1,4 @@
-<div class="hds-badge {{this.colorClass}} {{this.typeClass}} {{this.sizeClass}}" ...attributes >
+<div class="hds-badge {{this.sizeClass}} {{this.typeClass}} {{this.colorClass}}" ...attributes>
   {{#if @icon}}
     <div class="hds-badge__icon">
       <FlightIcon @name={{this.icon}} @size="16" @stretched="true" />

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

@@ -1,12 +1,12 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 
-const DEFAULT_SIZE = 'medium';
-const DEFAULT_COLOR = 'neutral';
-const DEFAULT_TYPE = 'filled';
-const SIZES = ['small', 'medium', 'large'];
-const TYPES = ['filled', 'inverted', 'outlined'];
-const COLORS = [
+export const DEFAULT_SIZE = 'medium';
+export const DEFAULT_TYPE = 'filled';
+export const DEFAULT_COLOR = 'neutral';
+export const SIZES = ['small', 'medium', 'large'];
+export const TYPES = ['filled', 'inverted', 'outlined'];
+export const COLORS = [
   'neutral',
   'neutral-dark-mode',
   'highlight',
@@ -17,8 +17,8 @@ const COLORS = [
 
 export default class HdsBadgeIndexComponent extends Component {
   /**
-   * Sets the size for the badge
-   * Accepted sizes: small, medium, large
+   * Sets the size for the component
+   * Accepted values: small, medium, large
    *
    * @param size
    * @type {string}
@@ -27,29 +27,27 @@ export default class HdsBadgeIndexComponent extends Component {
   get size() {
     let { size = DEFAULT_SIZE } = this.args;
 
-    if (size) {
-      assert(
-        `@size for ${this.toString()} must be one of the following: ${SIZES.join(
-          ', '
-        )}, received: ${size}`,
-        SIZES.includes(size)
-      );
-    }
+    assert(
+      `@size for "Hds::Badge" must be one of the following: ${SIZES.join(
+        ', '
+      )}, received: ${size}`,
+      SIZES.includes(size)
+    );
 
     return size;
   }
 
   /**
-   * Get a class to apply to the badge based on the size argument.
+   * Get a class to apply to the component based on the size argument.
    * @method Badge#sizeClass
-   * @return {string} The css class to apply to the Badge.
+   * @return {string} The css class to apply to the component.
    */
   get sizeClass() {
     return `hds-badge--size-${this.size}`;
   }
 
   /**
-   * Sets the type of badge
+   * Sets the type of the component
    * Accepted values: filled, inverted, outlined
    *
    * @param type
@@ -59,30 +57,28 @@ export default class HdsBadgeIndexComponent extends Component {
   get type() {
     let { type = DEFAULT_TYPE } = this.args;
 
-    if (type) {
-      assert(
-        `@type for ${this.toString()} must be one of the following: ${TYPES.join(
-          ', '
-        )}, received: ${type}`,
-        TYPES.includes(type)
-      );
-    }
+    assert(
+      `@type for "Hds::Badge" must be one of the following: ${TYPES.join(
+        ', '
+      )}, received: ${type}`,
+      TYPES.includes(type)
+    );
 
     return type;
   }
 
   /**
-   * Get a class to apply to the badge based on the type argument.
+   * Get a class to apply to the component based on the type argument.
    * @method Badge#typeClass
-   * @return {string} The css class to apply to the Badge.
+   * @return {string} The css class to apply to the component.
    */
   get typeClass() {
     return `hds-badge--type-${this.type}`;
   }
 
   /**
-   * Sets the color scheme for the badge
-   * Accepted colors: neutral, neutral-dark-mode, highlight, success, warning, critical
+   * Sets the color scheme for the component
+   * Accepted values: neutral, neutral-dark-mode, highlight, success, warning, critical
    *
    * @param color
    * @type {string}
@@ -91,22 +87,20 @@ export default class HdsBadgeIndexComponent extends Component {
   get color() {
     let { color = DEFAULT_COLOR } = this.args;
 
-    if (color) {
-      assert(
-        `@color for ${this.toString()} must be one of the following: ${COLORS.join(
-          ', '
-        )}, received: ${color}`,
-        COLORS.includes(color)
-      );
-    }
+    assert(
+      `@color for "Hds::Badge" must be one of the following: ${COLORS.join(
+        ', '
+      )}, received: ${color}`,
+      COLORS.includes(color)
+    );
 
     return color;
   }
 
   /**
-   * Get a class to apply to the badge based on the color argument.
+   * Get a class to apply to the component based on the color argument.
    * @method Badge#colorClass
-   * @return {string} The css class to apply to the Badge.
+   * @return {string} The css class to apply to the component.
    */
   get colorClass() {
     return `hds-badge--color-${this.color}`;

package/addon/components/hds/badge-count/index.hbs

@@ -0,0 +1,3 @@
+<div class="hds-badge-count {{this.sizeClass}} {{this.typeClass}} {{this.colorClass}}" ...attributes >
+  {{@text}}
+</div>

package/addon/components/hds/badge-count/index.js

@@ -0,0 +1,101 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const DEFAULT_SIZE = 'medium';
+export const DEFAULT_TYPE = 'filled';
+export const DEFAULT_COLOR = 'neutral';
+export const SIZES = ['small', 'medium', 'large'];
+export const TYPES = ['filled', 'inverted', 'outlined'];
+export const COLORS = ['neutral', 'neutral-dark-mode'];
+
+export default class HdsBadgeCountIndexComponent extends Component {
+  /**
+   * Sets the size for the component
+   * Accepted sizes: small, medium, large
+   *
+   * @param size
+   * @type {string}
+   * @default 'medium'
+   */
+  get size() {
+    let { size = DEFAULT_SIZE } = this.args;
+
+    assert(
+      `@size for "Hds::BadgeCount" must be one of the following: ${SIZES.join(
+        ', '
+      )}, received: ${size}`,
+      SIZES.includes(size)
+    );
+
+    return size;
+  }
+
+  /**
+   * Get a class to apply to the component based on the size argument.
+   * @method BadgeCount#sizeClass
+   * @return {string} The css class to apply to the component.
+   */
+  get sizeClass() {
+    return `hds-badge-count--size-${this.size}`;
+  }
+
+  /**
+   * Sets the type of the component
+   * Accepted values: filled, inverted, outlined
+   *
+   * @param type
+   * @type {string}
+   * @default 'filled'
+   */
+  get type() {
+    let { type = DEFAULT_TYPE } = this.args;
+
+    assert(
+      `@type for "Hds::BadgeCount" must be one of the following: ${TYPES.join(
+        ', '
+      )}, received: ${type}`,
+      TYPES.includes(type)
+    );
+
+    return type;
+  }
+
+  /**
+   * Get a class to apply to the component based on the type argument.
+   * @method BadgeCount#typeClass
+   * @return {string} The css class to apply to the component.
+   */
+  get typeClass() {
+    return `hds-badge-count--type-${this.type}`;
+  }
+
+  /**
+   * Sets the color scheme for the component
+   * Accepted colors: neutral, neutral-dark-mode
+   *
+   * @param color
+   * @type {string}
+   * @default 'neutral'
+   */
+  get color() {
+    let { color = DEFAULT_COLOR } = this.args;
+
+    assert(
+      `@color for "Hds::BadgeCount" must be one of the following: ${COLORS.join(
+        ', '
+      )}, received: ${color}`,
+      COLORS.includes(color)
+    );
+
+    return color;
+  }
+
+  /**
+   * Get a class to apply to the component based on the color argument.
+   * @method BadgeCount#colorClass
+   * @return {string} The css class to apply to the component.
+   */
+  get colorClass() {
+    return `hds-badge-count--color-${this.color}`;
+  }
+}

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

@@ -0,0 +1,35 @@
+<button 
+  class="hds-button {{this.sizeClass}} {{this.colorClass}} {{this.widthClass}}"
+  ...attributes
+  aria-label={{if this.isIconOnly this.text null}} 
+  type={{this.type}}
+  disabled={{if this.isDisabled "disabled" null}}
+>
+  {{#if this.isIconOnly}}
+    <div class="hds-button__icon">
+      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
+    </div>
+  {{else}}
+    {{#if this.icon}}
+      {{#if (eq this.iconPos "leading")}}
+        <div class="hds-button__icon">
+          <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
+        </div>
+        <div class="hds-button__text">
+          {{this.text}}
+        </div> 
+      {{else}}
+        <div class="hds-button__text">
+          {{this.text}}
+        </div>
+        <div class="hds-button__icon">
+          <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
+        </div>
+      {{/if}}
+    {{else}}
+      <div class="hds-button__text">
+          {{this.text}}
+      </div>
+    {{/if}}
+  {{/if}}
+</button>

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

@@ -0,0 +1,185 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const DEFAULT_SIZE = 'medium';
+export const DEFAULT_COLOR = 'primary';
+export const DEFAULT_TYPE = 'button';
+export const SIZES = ['small', 'medium', 'large'];
+export const COLORS = ['primary', 'secondary', 'destructive'];
+export const TYPES = ['button', 'submit', 'reset'];
+
+export default class HdsButtonIndexComponent extends Component {
+  /**
+   * @param text
+   * @type {string}
+   * @description The text of the button or value of `aria-label` if `isIconOnly` is set to `true`. If no text value is defined an error will be thrown.
+   */
+  get text() {
+    let { text } = this.args;
+
+    assert(
+      '@text for "Hds::Button" must have a valid value',
+      text !== undefined
+    );
+
+    return text;
+  }
+
+  /**
+   * @param size
+   * @type {string}
+   * @default medium
+   * @description The size of the button; acceptable values are `small`, `medium`, and `large`
+   */
+  get size() {
+    let { size = DEFAULT_SIZE } = this.args;
+
+    assert(
+      `@size for "Hds::Button" must be one of the following: ${SIZES.join(
+        ', '
+      )}; received: ${size}`,
+      SIZES.includes(size)
+    );
+
+    return size;
+  }
+
+  /**
+   * @param sizeClass
+   * @type {string}
+   * @default hds-button--size-medium
+   * @description Determines the CSS class that the button should have, based on the size value; automatically set.
+   */
+  get sizeClass() {
+    return `hds-button--size-${this.size}`;
+  }
+
+  /**
+   * @param color
+   * @type {string}
+   * @default primary
+   * @description Determines the color of button to be used; acceptable values are `primary`, `secondary`, and `destructive`
+   */
+  get color() {
+    let { color = DEFAULT_COLOR } = this.args;
+
+    assert(
+      `@color for "Hds::Button" must be one of the following: ${COLORS.join(
+        ', '
+      )}; received: ${color}`,
+      COLORS.includes(color)
+    );
+
+    return color;
+  }
+
+  /**
+   * @param colorClass
+   * @type {string}
+   * @default hds-button--color-primary
+   * @description Determines the CSS class that the button should have, based on the color value; automatically set
+   */
+  get colorClass() {
+    return `hds-button--color-${this.color}`;
+  }
+
+  /**
+   * @param icon
+   * @type {string}
+   * @default null
+   * @description The name of the icon to be used.
+   */
+  get icon() {
+    return this.args.icon ?? null;
+  }
+
+  /**
+   * @param isIconOnly
+   * @type {boolean}
+   * @default false
+   * @description Indicates if the button will only contain an icon; component will also ensure that accessible text is still applied to the component.
+   */
+  get isIconOnly() {
+    if (this.icon) {
+      return this.args.isIconOnly ?? false;
+    }
+    return false;
+  }
+
+  /**
+   * @param iconPos
+   * @type {string}
+   * @default leading
+   * @description Positions the icon before or after the text; allowed values are `leading` or `trailing`
+   */
+  get iconPos() {
+    return this.args.iconPos ?? 'leading';
+  }
+
+  /**
+   * @param iconSize
+   * @type {string}
+   * @default 16
+   * @description ensures that the correct icon size is used. Automatically calculated.
+   */
+  get iconSize() {
+    if (this.args.size === 'large') {
+      return '24';
+    } else {
+      return '16';
+    }
+  }
+
+  /**
+   * @param type
+   * @type {string}
+   * @default button
+   * @description The value for the button's `type` attribute. Acceptable values are `button`, `submit`, and `reset`
+   */
+  get type() {
+    let { type = DEFAULT_TYPE } = this.args;
+
+    assert(
+      `@type for "Hds::Button" must be one of the following: ${TYPES.join(
+        ', '
+      )}; received: ${type}`,
+      TYPES.includes(type)
+    );
+
+    return type;
+  }
+
+  /**
+   * @param isFullWidth
+   * @type {boolean}
+   * @default false
+   * @description Indicates that a button should take up the full width of the parent container. The default is false.
+   */
+  get isFullWidth() {
+    return this.args.isFullWidth ?? false;
+  }
+
+  /**
+   * @param widthClass
+   * @type {string|null}
+   * @default null
+   * @description Determines if the full-width class should be applied to the component. This is set automatically based on the value of `isFullWidth`.
+   */
+  get widthClass() {
+    if (this.isFullWidth === true) {
+      return 'hds-button--width-full';
+    } else {
+      return null;
+    }
+  }
+
+  /**
+   * @param isDisabled
+   * @type {boolean}
+   * @default null
+   * @description Sets the native HTML attribute `disabled` on the button element. Default is null (doesn't render the attribute).
+   */
+  get isDisabled() {
+    return this.args.isDisabled ?? null;
+  }
+}

package/addon/components/hds/card/container.hbs

@@ -0,0 +1,3 @@
+<div class="hds-card__container {{this.levelClass}} {{this.borderClass}} {{this.backgroundClass}} {{this.overflowClass}}" ...attributes>
+  {{yield}}
+</div>

package/addon/components/hds/card/container.js

@@ -0,0 +1,110 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const DEFAULT_LEVEL = 'base';
+export const DEFAULT_BACKGROUND = 'neutral-primary';
+export const DEFAULT_OVERFLOW = 'hidden';
+export const LEVELS = ['base', 'mid', 'high'];
+export const BACKGROUNDS = ['neutral-primary', 'neutral-secondary'];
+export const OVERFLOWS = ['hidden', 'visible'];
+
+export default class HdsCardContainerComponent extends Component {
+  /**
+   * Sets the "elevation" level for the component
+   * Accepted values: base, mid, high
+   *
+   * @param level
+   * @type {string}
+   * @default 'base'
+   */
+  get level() {
+    let { level = DEFAULT_LEVEL } = this.args;
+
+    assert(
+      `@level for "Hds::CardContainer" must be one of the following: ${LEVELS.join(
+        ', '
+      )}, received: ${level}`,
+      LEVELS.includes(level)
+    );
+
+    return level;
+  }
+
+  /**
+   * Get a class to apply to the component based on the level argument.
+   * @method Card#levelClass
+   * @return {string} The css class to apply to the component.
+   */
+  get levelClass() {
+    return `hds-card__container--level-${this.level}`;
+  }
+
+  /**
+   * Sets the background for the component
+   * Accepted values: neutral-primary, neutral-secondary
+   *
+   * @param background
+   * @type {string}
+   * @default 'base'
+   */
+  get background() {
+    let { background = DEFAULT_BACKGROUND } = this.args;
+
+    assert(
+      `@background for "Hds::CardContainer" must be one of the following: ${BACKGROUNDS.join(
+        ', '
+      )}, received: ${background}`,
+      BACKGROUNDS.includes(background)
+    );
+
+    return background;
+  }
+
+  /**
+   * Get a class to apply to the component based on the background argument.
+   * @method Card#backgroundClass
+   * @return {string} The css class to apply to the component.
+   */
+  get backgroundClass() {
+    return `hds-card__container--background-${this.background}`;
+  }
+
+  /**
+   * Get a class to apply to the component based on the hasBorder argument.
+   * @method Card#hasBorderClass
+   * @return {string} The css class to apply to the component.
+   */
+  get borderClass() {
+    return this.args.hasBorder ? `hds-card__container--has-border` : undefined;
+  }
+
+  /**
+   * Sets the level for the card
+   * Accepted values: visible, hidden
+   *
+   * @param overflow
+   * @type {string}
+   * @default 'hidden'
+   */
+  get overflow() {
+    let { overflow = DEFAULT_OVERFLOW } = this.args;
+
+    assert(
+      `@overflow for "Hds::CardContainer" must be one of the following: ${OVERFLOWS.join(
+        ', '
+      )}, received: ${overflow}`,
+      OVERFLOWS.includes(overflow)
+    );
+
+    return overflow;
+  }
+
+  /**
+   * Get a class to apply to the component based on the overflow argument.
+   * @method Card#overflowClass
+   * @return {string} The css class to apply to the component.
+   */
+  get overflowClass() {
+    return `hds-card__container--overflow-${this.overflow}`;
+  }
+}