@hashicorp/design-system-components 0.0.8 → 0.0.9

package/.github/workflows/ci.yml

@@ -155,8 +155,8 @@ jobs:
           # ember-canary,
           ember-default-with-jquery,
           ember-classic,
-          embroider-safe,
-          embroider-optimized
+          # embroider-safe,
+          # embroider-optimized
         ]
 
     steps:

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

@@ -106,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
    *
@@ -116,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/button/index.hbs

@@ -11,7 +11,7 @@
     </div>
   {{else}}
     {{#if this.icon}}
-      {{#if (eq this.iconPos "leading")}}
+      {{#if (eq this.iconPosition "leading")}}
         <div class="hds-button__icon">
           <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
         </div>

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

@@ -4,9 +4,11 @@ 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 {
   /**
@@ -107,13 +109,22 @@ export default class HdsButtonIndexComponent extends Component {
   }
 
   /**
-   * @param iconPos
+   * @param iconPosition
    * @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';
+  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;
   }
 
   /**

package/addon/components/hds/icon-tile/index.hbs

@@ -1,4 +1,4 @@
-<div class="hds-icon-tile {{this.entityClass}} {{this.sizeClass}} {{this.colorClass}}" ...attributes>
+<div class="hds-icon-tile {{this.entityClass}} {{this.sizeClass}} {{this.colorClass}}" aria-hidden="true" ...attributes>
   {{#if @icon}}
     <div class="hds-icon-tile__icon">
       <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched="true" />

package/app/styles/components/button.scss

@@ -1,6 +1,8 @@
 // Button Component Styles
 
-$border-radius: 5px;
+$hds-button-border-radius: 5px;
+$hds-button-border-width: 1px;
+$hds-button-focus-border-width: 3px;
 
 // TODO! generalize with the existing mixin in Card component
 @mixin tempElevation() {
@@ -22,8 +24,8 @@ $border-radius: 5px;
   @include tempElevation();
 
   align-items: center;
-  border: 1px solid transparent; // We need this to be transparent for a11y
-  border-radius: $border-radius;
+  border: $hds-button-border-width solid transparent; // We need this to be transparent for a11y
+  border-radius: $hds-button-border-radius;
   box-sizing: border-box; // TODO https://github.com/hashicorp/design-system-components/issues/46
   display: flex;
   font-family: var(--token-typography-body-base-font-family);
@@ -71,15 +73,17 @@ $border-radius: 5px;
   &:focus,
   &:focus-visible {
     &::before {
-      border-radius: $border-radius + 3px;
-      border: 3px solid transparent;
-      bottom: -4px;
+      // the position absolute is computed from the inside of the border, so we have to take in account the border width
+      $shift: $hds-button-border-width + $hds-button-focus-border-width;
+      border-radius: $hds-button-border-radius + $hds-button-focus-border-width;
+      border: $hds-button-focus-border-width solid transparent;
+      bottom: -$shift;
       box-sizing: border-box;
       content: '';
-      left: -4px;
+      left: -$shift;
       position: absolute;
-      right: -4px;
-      top: -4px;
+      right: -$shift;
+      top: -$shift;
     }
   }
 }
@@ -148,11 +152,15 @@ $border-radius: 5px;
     border-color: var(--token-color-action-border-on-primary);
     color: var(--token-color-palette-neutral-0);
     &::before {
+      // the position absolute is computed from the inside of the border, so we have to take in account the border width
+      // plus for the primary button we want to have a 2px gap between the button and the focus
+      $shift: $hds-button-border-width + $hds-button-focus-border-width + 2px;
+      border-radius: $hds-button-border-radius + $hds-button-focus-border-width + 2px;
       border-color: var(--token-color-action-background-primary);
-      bottom: -6px;
-      left: -6px;
-      right: -6px;
-      top: -6px;
+      bottom: -$shift;
+      left: -$shift;
+      right: -$shift;
+      top: -$shift;
     }
   }
   &:hover,

package/app/styles/components/icon-tile.scss

@@ -140,7 +140,7 @@ $size-props: (
     &.hds-icon-tile--color-#{$product} {
       background: linear-gradient(135deg, var(--token-color-#{$product}-gradient-faint-start) 0%, var(--token-color-#{$product}-gradient-faint-stop) 100%);
       border-color: var(--token-color-#{$product}-border);
-      color: var(--token-color-#{$product}-brand);
+      color: var(--token-color-#{$product}-foreground);
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -53,11 +53,16 @@
     "test": "npm-run-all lint test:*",
     "test:ember": "ember test",
     "test:ember-compatibility": "ember try:each",
-    "test:ember:percy": "percy exec ember test"
+    "test:ember:percy": "percy exec ember test",
+    "bump": "./node_modules/.bin/bump package.json",
+    "release": "yarn publish --new-version $npm_package_version",
+    "postrelease:git-tag": "TAG_VERSION=\"${npm_package_name}/${npm_package_version}\" && git tag $TAG_VERSION && git push origin $TAG_VERSION",
+    "postrelease": "yarn postrelease:git-tag"
   },
   "dependencies": {
     "@hashicorp/design-system-tokens": "^0.0.13",
-    "@hashicorp/ember-flight-icons": "^1.2.0",
+    "@hashicorp/ember-flight-icons": "^1.2.1",
+    "@hashicorp/flight-icons": "^1.3.0",
     "ember-cli-babel": "^7.26.6",
     "ember-cli-htmlbars": "^5.7.1",
     "ember-cli-sass": "^10.0.1",
@@ -103,6 +108,7 @@
     "prettier": "^2.3.0",
     "qunit": "^2.15.0",
     "qunit-dom": "^1.6.0",
+    "version-bump-prompt": "^6.1.0",
     "webpack": "^5.61.0"
   },
   "engines": {