@hashicorp/design-system-components 0.0.6 → 0.0.10

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 }}
@@ -151,8 +155,8 @@ jobs:
           # ember-canary,
           ember-default-with-jquery,
           ember-classic,
-          embroider-safe,
-          embroider-optimized
+          # embroider-safe,
+          # embroider-optimized
         ]
 
     steps:

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/RELEASE.md

@@ -0,0 +1,69 @@
+# How To Release
+
+Whenever there is an update to the components, and these changes have been approved, we need to release them as package to the npm registry.
+
+Please see the instructions in the [CONTRIBUTING](CONTRIBUTING.md) file for more details about how to setup the project and make changes to the code for these packages.
+
+## Bump
+
+The "bump" step increases the _SemVer_ version number in the `package.json` file.
+
+* Make sure your local `main` branch is up to date.
+* Create new custom branch from `main`.
+* `cd /design-system-components`
+* Run `yarn bump` and choose the _SemVer_ version as agreed upon on the previous PR.
+  * _The `bump` command is interactive, you can move up and down with the keyboard, choose one option, and then hit "enter": the tool will automatically update the version in the `package.json` file for you._
+* Check the `git diff` for the project, you should see only the `package.json` file changed (with the new version).
+* Commit, push, open a pull request, and wait for approval.
+
+Once the PR has been approved and merged, you can finally move to the next step, the actual release.
+
+## Release
+
+The "release" step publishes the package on the npm registry, using the version declared in the `package.json` file, and [tags](https://www.atlassian.com/git/tutorials/inspecting-a-repository/git-tag) that specific release on git.
+
+_**IMPORTANT**: Once released a package on the public registry, you can't revert the changes: the only solution is to deprecate the package (this will hide it from the public, but remains there). If you need to do some tests, use a **local** package registry (see below), don't test directly in production!_
+
+* Make sure your local `main` branch is up to date.
+* You will need a company-approved 2FA-enabled account on npm to publish (see [npm 2FA docs](https://docs.npmjs.com/configuring-two-factor-authentication) for more info).
+* `cd /design-system-components`
+* `yarn release`
+* Check the git diff, you should not see any change.
+
+**Notice**: this action will automatically:
+
+* publish the new version of the package on the [NPM registry](https://www.npmjs.com/) using the current _SemVer_ version declared in the `package.json` file (the one previously chosen in the `bump` step).
+* tag the current last commit in the `main` branch and push the tag to the git origin
+
+At this point check on npm that the package ([@hashicorp/design-system-components](https://www.npmjs.com/package/@hashicorp/design-system-components) has been successfully published, and if it's so... well done! You just published your new package 🎉.
+
+🚨 **DON'T FORGET**:
+
+You need to communicate to the product teams that are consuming the components!
+
+## Using a local NPM registry for testing
+
+To test the release of packages without actually polluting the real/production npm registry, you can setup a local private registry using [Verdaccio](https://verdaccio.org/docs/what-is-verdaccio), an open source solution, very easy to setup and use.
+
+You can follow [the instructions here](https://verdaccio.org/docs/installation), but essentially here is what you have to:
+
+* install the package: `npm install -g verdaccio` - this will install it globally
+* launch the service: `verdaccio` - this will serve a web frontend to the registry at the URL [http://localhost:4873/](http://localhost:4873/)
+* add a user to the registry: `npm adduser --registry http://localhost:4873` - this will ask you for a username/password/email, I suggest you use test/test/test@test.com because is only a local instance. This will also authenticate you with the registry so you don't need to login when you publish.
+
+Now you need to add this entry in the `package.json` file of the bundle you want to publish on your local registry:
+
+```json
+"publishConfig": {
+    "registry": "http://localhost:4873"
+},
+```
+
+This will make sure the package is published on Verdaccio. Once the package is published, the web page will be available at at [http://localhost:4873/](http://localhost:4873/). It will show you all the packages' details, and if needed you can download the tarballs to check their content.
+
+Once you've completed testing the package locally:
+
+1. remove verdaccio via `npm uninstall -g verdaccio`
+2. remove the files it created with `rm -fr ~/.local/share/verdaccio && rm -fr .config/verdaccio`
+
+This same command can be used to cleanup the entire data storage of Verdaccio and start from scratch (no need to reinstall, only cleanup the data).

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

@@ -1,14 +1,16 @@
-<div class="hds-badge {{this.sizeClass}} {{this.typeClass}} {{this.colorClass}}" ...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" />
     </div>
   {{/if}}
-  {{#if @text}}
-    <div class="hds-badge__text">
-      {{@text}}
-    </div>
+  {{#if this.isIconOnly}}
+    <span class="sr-only">{{this.text}}</span>
   {{else}}
-    <span class="sr-only">{{@srOnlyText}}</span>
+    <div class="hds-badge__text">
+      {{this.text}}
+    </div>  
   {{/if}}
 </div>

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

@@ -27,14 +27,12 @@ export default class HdsBadgeIndexComponent extends Component {
   get size() {
     let { size = DEFAULT_SIZE } = this.args;
 
-    if (size) {
-      assert(
-        `@size for "Hds::Badge" 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;
   }
@@ -59,14 +57,12 @@ export default class HdsBadgeIndexComponent extends Component {
   get type() {
     let { type = DEFAULT_TYPE } = this.args;
 
-    if (type) {
-      assert(
-        `@type for "Hds::Badge" 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;
   }
@@ -91,14 +87,12 @@ export default class HdsBadgeIndexComponent extends Component {
   get color() {
     let { color = DEFAULT_COLOR } = this.args;
 
-    if (color) {
-      assert(
-        `@color for "Hds::Badge" 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;
   }
@@ -112,6 +106,22 @@ export default class HdsBadgeIndexComponent extends Component {
     return `hds-badge--color-${this.color}`;
   }
 
+  /**
+   * @param text
+   * @type {string}
+   * @description The text of the badge. If `isIconOnly` is set to `true`, the text will be visually hidden but still available to assistive technology. If no text value is defined, an error will be thrown.
+   */
+  get text() {
+    let { text } = this.args;
+
+    assert(
+      '@text for "Hds::Badge" must have a valid value',
+      text !== undefined
+    );
+
+    return text;
+  }
+
   /**
    * Sets the icon name if there is one
    *
@@ -122,4 +132,17 @@ export default class HdsBadgeIndexComponent extends Component {
   get icon() {
     return this.args.icon ?? null;
   }
+
+  /**
+   * @param isIconOnly
+   * @type {boolean}
+   * @default false
+   * @description Indicates if the badge 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;
+  }
 }

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

@@ -20,14 +20,12 @@ export default class HdsBadgeCountIndexComponent extends Component {
   get size() {
     let { size = DEFAULT_SIZE } = this.args;
 
-    if (size) {
-      assert(
-        `@size for "Hds::BadgeCount" must be one of the following: ${SIZES.join(
-          ', '
-        )}, received: ${size}`,
-        SIZES.includes(size)
-      );
-    }
+    assert(
+      `@size for "Hds::BadgeCount" must be one of the following: ${SIZES.join(
+        ', '
+      )}, received: ${size}`,
+      SIZES.includes(size)
+    );
 
     return size;
   }
@@ -52,14 +50,12 @@ export default class HdsBadgeCountIndexComponent extends Component {
   get type() {
     let { type = DEFAULT_TYPE } = this.args;
 
-    if (type) {
-      assert(
-        `@type for "Hds::BadgeCount" must be one of the following: ${TYPES.join(
-          ', '
-        )}, received: ${type}`,
-        TYPES.includes(type)
-      );
-    }
+    assert(
+      `@type for "Hds::BadgeCount" must be one of the following: ${TYPES.join(
+        ', '
+      )}, received: ${type}`,
+      TYPES.includes(type)
+    );
 
     return type;
   }
@@ -84,14 +80,12 @@ export default class HdsBadgeCountIndexComponent extends Component {
   get color() {
     let { color = DEFAULT_COLOR } = this.args;
 
-    if (color) {
-      assert(
-        `@color for "Hds::BadgeCount" must be one of the following: ${COLORS.join(
-          ', '
-        )}, received: ${color}`,
-        COLORS.includes(color)
-      );
-    }
+    assert(
+      `@color for "Hds::BadgeCount" must be one of the following: ${COLORS.join(
+        ', '
+      )}, received: ${color}`,
+      COLORS.includes(color)
+    );
 
     return 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.iconPosition "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,196 @@
+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 DEFAULT_ICONPOSITION = 'leading';
+export const SIZES = ['small', 'medium', 'large'];
+export const COLORS = ['primary', 'secondary', 'destructive'];
+export const TYPES = ['button', 'submit', 'reset'];
+export const ICONPOSITIONS = ['leading', 'trailing'];
+
+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 iconPosition
+   * @type {string}
+   * @default leading
+   * @description Positions the icon before or after the text; allowed values are `leading` or `trailing`
+   */
+  get iconPosition() {
+    let { iconPosition = DEFAULT_ICONPOSITION } = this.args;
+
+    assert(
+      `@iconPosition for "Hds::Button" must be one of the following: ${ICONPOSITIONS.join(
+        ', '
+      )}; received: ${iconPosition}`,
+      ICONPOSITIONS.includes(iconPosition)
+    );
+
+    return iconPosition;
+  }
+
+  /**
+   * @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.js

@@ -20,14 +20,12 @@ export default class HdsCardContainerComponent extends Component {
   get level() {
     let { level = DEFAULT_LEVEL } = this.args;
 
-    if (level) {
-      assert(
-        `@level for "Hds::CardContainer" must be one of the following: ${LEVELS.join(
-          ', '
-        )}, received: ${level}`,
-        LEVELS.includes(level)
-      );
-    }
+    assert(
+      `@level for "Hds::CardContainer" must be one of the following: ${LEVELS.join(
+        ', '
+      )}, received: ${level}`,
+      LEVELS.includes(level)
+    );
 
     return level;
   }
@@ -52,14 +50,12 @@ export default class HdsCardContainerComponent extends Component {
   get background() {
     let { background = DEFAULT_BACKGROUND } = this.args;
 
-    if (background) {
-      assert(
-        `@background for "Hds::CardContainer" must be one of the following: ${BACKGROUNDS.join(
-          ', '
-        )}, received: ${background}`,
-        BACKGROUNDS.includes(background)
-      );
-    }
+    assert(
+      `@background for "Hds::CardContainer" must be one of the following: ${BACKGROUNDS.join(
+        ', '
+      )}, received: ${background}`,
+      BACKGROUNDS.includes(background)
+    );
 
     return background;
   }
@@ -93,14 +89,12 @@ export default class HdsCardContainerComponent extends Component {
   get overflow() {
     let { overflow = DEFAULT_OVERFLOW } = this.args;
 
-    if (overflow) {
-      assert(
-        `@overflow for "Hds::CardContainer" must be one of the following: ${OVERFLOWS.join(
-          ', '
-        )}, received: ${overflow}`,
-        OVERFLOWS.includes(overflow)
-      );
-    }
+    assert(
+      `@overflow for "Hds::CardContainer" must be one of the following: ${OVERFLOWS.join(
+        ', '
+      )}, received: ${overflow}`,
+      OVERFLOWS.includes(overflow)
+    );
 
     return overflow;
   }