@hashicorp/design-system-components 0.0.20 → 0.1.2

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# @hashicorp/design-system-components
+
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies [[`04db4d9e`](https://github.com/hashicorp/design-system/commit/04db4d9ece6aba358acfa0721a78dfe84c561b5e)]:
+  - @hashicorp/design-system-tokens@0.6.0

package/README.md

@@ -21,7 +21,27 @@ Installation
 yarn add @hashicorp/design-system-components
 ```
 
-Then add this line to the top of your app's style file (`app.scss` or similar):
+You will need to do three things before importing the styles into your app:
+
+1. Install `ember-cli-sass`
+
+```bash
+ember install ember-cli-sass
+```
+
+2. Change `app/styles/app.css` to `app/styles/app.scss`
+3. Add the following to the `app` definition (starts on/around line 6 in new Ember apps) in `ember-cli-build.js`
+
+```js
+sassOptions: {
+  precision: 4,
+  includePaths: [
+    './node_modules/@hashicorp/design-system-tokens/dist/products/css',
+  ],
+},
+```
+
+Finally, add this line to the top of your app's style file (`app.scss` or similar):
 
 ```
 @import '@hashicorp/design-system-components';

package/RELEASE.md

@@ -1,41 +1,12 @@
-# How To Release
+# 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
+## Bump and release
 
-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 🎉.
+Follow the instructions for Changesets in the root [README](../../README.md).
 
 🚨 **DON'T FORGET**:
 

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

@@ -6,7 +6,7 @@ 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 COLORS = ['primary', 'secondary', 'critical'];
 export const TYPES = ['button', 'submit', 'reset'];
 export const ICONPOSITIONS = ['leading', 'trailing'];
 
@@ -50,7 +50,7 @@ export default class HdsButtonIndexComponent extends Component {
    * @param color
    * @type {string}
    * @default primary
-   * @description Determines the color of button to be used; acceptable values are `primary`, `secondary`, and `destructive`
+   * @description Determines the color of button to be used; acceptable values are `primary`, `secondary`, and `critical`
    */
   get color() {
     let { color = DEFAULT_COLOR } = this.args;

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

@@ -0,0 +1,17 @@
+<div class="hds-disclosure" ...attributes>
+  <div class="hds-disclosure__toggle">
+    {{yield (hash onClickToggle=this.onClickToggle) to="toggle"}}
+  </div>
+  {{#if this.isActive}}
+    <div
+      class="hds-disclosure__content"
+      {{focus-trap
+        isActive=this.isActive
+        shouldSelfFocus=false
+        focusTrapOptions=(hash clickOutsideDeactivates=this.clickOutsideDeactivates onDeactivate=this.onDeactivate)
+      }}
+    >
+      {{yield to="content"}}
+    </div>
+  {{/if}}
+</div>

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

@@ -0,0 +1,41 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class HdsDisclosureComponent extends Component {
+  @tracked isActive; // notice: if in the future we need to add a "@isActive" prop to control the status from outside (eg to have the Disclosure opened on render) just add  "this.args.isActive" here to initalize the variable
+  @tracked toggleRef;
+  @tracked isToggleClicked;
+
+  @action
+  onClickToggle(event) {
+    // we store a reference to the DOM node that has the "onClickToggle" event associated with it
+    if (!this.toggleRef) {
+      this.toggleRef = event.currentTarget;
+    }
+    this.isActive = !this.isActive;
+  }
+
+  @action
+  clickOutsideDeactivates(event) {
+    // we check if the toggle reference belongs to the tree of parent DOM nodes
+    // of the element that was clicked and triggered the "click outside" event handling
+    this.isToggleClicked = event.path.includes(this.toggleRef);
+    // here we need to return `true` to make sure that the focus trap will be deactivated (and allow the click event to do its thing (i.e. to pass-through to the element that was clicked).
+    // see: https://github.com/focus-trap/focus-trap#createoptions
+    return true;
+  }
+
+  @action
+  onDeactivate() {
+    // on deactivate we hide the content, except for the case when the button has been clicked
+    // the reason is that the "onClickToggle" is called in any case (there's no way to block the event)
+    // so when the user clicks the toggle to close the panel, we let the "onClickToggle" handle the closure
+    // otherwise we would have two changes of status, this and the toggle, and the panel would remain open
+    if (!this.isToggleClicked) {
+      this.isActive = false;
+      // we need to reset this check
+      this.isToggleClicked = false;
+    }
+  }
+}

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

@@ -2,7 +2,7 @@
   class={{this.classNames}}
   @current-when={{@current-when}}
   @models={{hds-link-to-models @model @models}}
-  @query={{this.queryParams}}
+  @query={{hds-link-to-query @query}}
   @replace={{@replace}}
   @route={{this.route}}
   ...attributes

package/addon/components/hds/link-to/standalone.js

@@ -128,16 +128,6 @@ export default class HdsLinkToStandaloneComponent extends Component {
     }
   }
 
-  // this is a workaround for https://github.com/emberjs/ember.js/issues/19693
-  // don't remove until we drop support for ember 3.27 and 3.28
-  get queryParams() {
-    if (this.args.query) {
-      return this.args.query;
-    } else {
-      return {};
-    }
-  }
-
   /**
    * Get the class names to apply to the component.
    * @method LinkToStandalone#classNames

package/addon/helpers/hds-link-to-query.js

@@ -0,0 +1,21 @@
+import { helper } from '@ember/component/helper';
+
+/*
+ * This helper can be used to safely pass a @query argument to the `<LinkTo>` component
+ * without the risk of triggering an assertion if the argument is undefined
+ *
+ * The result of this helper should be passed into the `@query` argument of the `<LinkTo>` component:
+ *
+ * ```hbs
+ * <LinkTo @query={{hds-link-to-query @query}} />
+ * ```
+ */
+
+// this is a workaround for https://github.com/emberjs/ember.js/issues/19693
+// don't remove until we drop support for ember 3.27 and 3.28
+
+export function hdsLinkToQuery([query]) {
+  return query ?? {};
+}
+
+export default helper(hdsLinkToQuery);

package/app/components/hds/disclosure/index.js

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

package/app/helpers/hds-link-to-query.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/helpers/hds-link-to-query';

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

@@ -3,12 +3,11 @@
 @use "helpers/elevation";
 @use "helpers/focus-ring";
 
-@use "../mixins/generic-focus-state";
-
 @use "../components/badge";
 @use "../components/badge-count";
 @use "../components/button";
 @use "../components/card";
+@use "../components/disclosure";
 @use "../components/icon-tile";
 @use "../components/link/standalone";
 

package/app/styles/components/badge-count.scss

@@ -63,36 +63,36 @@ $size-props: (
 
 .hds-badge-count--color-neutral {
   &.hds-badge-count--type-filled {
-    background-color: var(--token-color-palette-neutral-100);
-    color: var(--token-color-palette-neutral-600);
+    background-color: var(--token-color-surface-strong);
+    color: var(--token-color-foreground-primary);
   }
 
   &.hds-badge-count--type-inverted {
-    background-color: var(--token-color-palette-neutral-500);
-    color: var(--token-color-palette-neutral-0);
+    background-color: var(--token-color-foreground-faint);
+    color: var(--token-color-foreground-high-contrast);
   }
 
   &.hds-badge-count--type-outlined {
     background-color: transparent;
-    border-color: var(--token-color-palette-neutral-500);
-    color: var(--token-color-palette-neutral-600);
+    border-color: var(--token-color-foreground-faint);
+    color: var(--token-color-foreground-primary);
   }
 }
 
 .hds-badge-count--color-neutral-dark-mode {
   &.hds-badge-count--type-filled {
-    background-color: var(--token-color-palette-neutral-500);
-    color: var(--token-color-palette-neutral-0);
+    background-color: var(--token-color-foreground-faint);
+    color: var(--token-color-foreground-high-contrast);
   }
 
   &.hds-badge-count--type-inverted {
-    background-color: var(--token-color-palette-neutral-50);
-    color: var(--token-color-palette-neutral-600);
+    background-color: var(--token-color-surface-faint);
+    color: var(--token-color-foreground-primary);
   }
 
   &.hds-badge-count--type-outlined {
     background-color: transparent;
     border-color: var(--token-color-palette-neutral-100);
-    color: var(--token-color-palette-neutral-0);
+    color: var(--token-color-foreground-high-contrast);
   }
 }

package/app/styles/components/badge.scss

@@ -91,56 +91,56 @@ $size-props: (
 
 .hds-badge--color-neutral {
   &.hds-badge--type-filled {
-    background-color: var(--token-color-palette-neutral-100);
-    color: var(--token-color-palette-neutral-600);
+    background-color: var(--token-color-surface-strong);
+    color: var(--token-color-foreground-primary);
   }
 
   &.hds-badge--type-inverted {
-    background-color: var(--token-color-palette-neutral-500);
-    color: var(--token-color-palette-neutral-0);
+    background-color: var(--token-color-foreground-faint);
+    color: var(--token-color-foreground-high-contrast);
   }
 
   &.hds-badge--type-outlined {
     background-color: transparent;
-    border-color: var(--token-color-palette-neutral-500);
-    color: var(--token-color-palette-neutral-600);
+    border-color: var(--token-color-foreground-faint);
+    color: var(--token-color-foreground-primary);
   }
 }
 
 .hds-badge--color-neutral-dark-mode {
   &.hds-badge--type-filled {
-    background-color: var(--token-color-palette-neutral-500);
-    color: var(--token-color-palette-neutral-0);
+    background-color: var(--token-color-foreground-faint);
+    color: var(--token-color-foreground-high-contrast);
   }
 
   &.hds-badge--type-inverted {
-    background-color: var(--token-color-palette-neutral-50);
-    color: var(--token-color-palette-neutral-600);
+    background-color: var(--token-color-surface-faint);
+    color: var(--token-color-foreground-primary);
   }
 
   &.hds-badge--type-outlined {
     background-color: transparent;
     border-color: var(--token-color-palette-neutral-100);
-    color: var(--token-color-palette-neutral-0);
+    color: var(--token-color-foreground-high-contrast);
   }
 }
 
 @each $color in $hds-badge-colors-accents {
   .hds-badge--color-#{$color} {
     &.hds-badge--type-filled {
-      background-color: var(--token-color-#{$color}-background-faint);
-      color: var(--token-color-#{$color}-foreground-on-faint);
+      background-color: var(--token-color-surface-#{$color});
+      color: var(--token-color-foreground-#{$color}-on-surface);
     }
 
     &.hds-badge--type-inverted {
-      background-color: var(--token-color-#{$color}-background-primary);
-      color: var(--token-color-palette-neutral-0);
+      background-color: var(--token-color-foreground-#{$color});
+      color: var(--token-color-foreground-high-contrast);
     }
 
     &.hds-badge--type-outlined {
       background-color: transparent;
       border-color: currentColor;
-      color: var(--token-color-#{$color}-background-primary);
+      color: var(--token-color-foreground-#{$color});
     }
   }
 }

package/app/styles/components/button.scss

@@ -24,7 +24,6 @@ $hds-button-focus-border-width: 3px;
   justify-content: center;
   outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
   outline-color: transparent; // We need this to be transparent for a11y
-  max-width: fit-content;
   position: relative;
   width: auto;
 
@@ -38,10 +37,10 @@ $hds-button-focus-border-width: 3px;
   &:disabled:hover,
   &[disabled]:hover,
   &.is-disabled:hover {
-    background-color: var(--token-color-palette-neutral-50);
-    border-color: var(--token-color-palette-alpha-200);
+    background-color: var(--token-color-surface-faint);
+    border-color: var(--token-color-border-primary);
     box-shadow: none;
-    color: var(--token-color-palette-neutral-400);
+    color: var(--token-color-foreground-disabled);
     cursor: not-allowed;
 
     &::before {
@@ -140,22 +139,22 @@ $size-props: (
 // 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.
 
 .hds-button--color-primary {
-  background-color: var(--token-color-action-background-primary);
-  border-color: var(--token-color-action-border-on-primary);
-  color: var(--token-color-palette-neutral-0);
+  background-color: var(--token-color-palette-blue-200);
+  border-color: var(--token-color-palette-blue-300);
+  color: var(--token-color-foreground-high-contrast);
 
   &:focus,
   &.is-focus {
-    background-color: var(--token-color-action-background-primary);
-    border-color: var(--token-color-action-border-on-primary);
-    color: var(--token-color-palette-neutral-0);
+    background-color: var(--token-color-palette-blue-200);
+    border-color: var(--token-color-focus-action-internal);
+    color: var(--token-color-foreground-high-contrast);
     &::before {
       // the position absolute of an element is computed from the inside of the border of the container
       // so we have to take in account the border width of the pseudo-element container itself
       // 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);
+      border-color: var(--token-color-focus-action-external);
       bottom: -$shift;
       left: -$shift;
       right: -$shift;
@@ -164,17 +163,17 @@ $size-props: (
   }
   &:hover,
   &.is-hover {
-    background-color: var(--token-color-action-background-hover);
-    border-color: var(--token-color-action-border-on-hover);
-    color: var(--token-color-palette-neutral-0);
+    background-color: var(--token-color-palette-blue-300);
+    border-color: var(--token-color-palette-blue-400);
+    color: var(--token-color-foreground-high-contrast);
     cursor: pointer;
   }
   &:active,
   &.is-active {
-    background-color: var(--token-color-action-background-active);
-    border-color: var(--token-color-action-background-active);
+    background-color: var(--token-color-palette-blue-400);
+    border-color: var(--token-color-palette-blue-400);
     box-shadow: none;
-    color: var(--token-color-palette-neutral-0);
+    color: var(--token-color-foreground-high-contrast);
     &::before {
       border-color: transparent;
     }
@@ -182,66 +181,66 @@ $size-props: (
 }
 
 .hds-button--color-secondary {
-  background-color: var(--token-color-palette-neutral-50);
-  border-color: var(--token-color-palette-alpha-300);
-  color: var(--token-color-palette-neutral-600);
+  background-color: var(--token-color-surface-faint);
+  border-color: var(--token-color-border-strong);
+  color: var(--token-color-foreground-primary);
 
   &:focus,
   &.is-focus {
-    background-color: var(--token-color-palette-neutral-50);
-    border-color: var(--token-color-action-border-on-primary);
-    color: var(--token-color-palette-neutral-600);
+    background-color: var(--token-color-surface-faint);
+    border-color: var(--token-color-focus-action-internal);
+    color: var(--token-color-foreground-primary);
     &::before {
-      border-color: #5990FF;
+      border-color: var(--token-color-focus-action-external);
     }
   }
   &:hover,
   &.is-hover {
-    background-color: var(--token-color-palette-neutral-0);
-    border-color: var(--token-color-palette-alpha-300);
-    color: var(--token-color-palette-neutral-600);
+    background-color: var(--token-color-surface-primary);
+    border-color: var(--token-color-border-strong);
+    color: var(--token-color-foreground-primary);
     cursor: pointer;
   }
   &:active,
   &.is-active {
-    background-color: var(--token-color-palette-neutral-200);
-    border-color: var(--token-color-palette-alpha-300);
+    background-color: var(--token-color-surface-interactive-active);
+    border-color: var(--token-color-border-strong);
     box-shadow: none;
-    color: var(--token-color-palette-neutral-600);
+    color: var(--token-color-foreground-primary);
     &::before {
       border-color: transparent;
     }
   }
 }
 
-.hds-button--color-destructive {
-  background-color: var(--token-color-palette-neutral-50);
-  border-color: var(--token-color-palette-alpha-300);
-  color: var(--token-color-critical-foreground-on-faint);
+.hds-button--color-critical {
+  background-color: var(--token-color-surface-critical);
+  border-color: var(--token-color-foreground-critical-on-surface);
+  color: var(--token-color-foreground-critical-on-surface);
 
   &:focus,
   &.is-focus {
-    background-color: var(--token-color-palette-neutral-50);
-    border-color: var(--token-color-critical-border-on-primary);
-    color: var(--token-color-critical-foreground-on-faint);
+    background-color: var(--token-color-surface-critical);
+    border-color: var(--token-color-focus-critical-internal);
+    color: var(--token-color-foreground-critical-on-surface);
     &::before {
-      border-color: #DD7578;
+      border-color: var(--token-color-focus-critical-external);
     }
   }
   &:hover,
   &.is-hover {
-    background-color: var(--token-color-critical-background-hover);
-    border-color: var(--token-color-critical-border-on-hover);
-    color: var(--token-color-palette-neutral-0);
+    background-color: var(--token-color-palette-red-300);
+    border-color: var(--token-color-palette-red-400);
+    color: var(--token-color-foreground-high-contrast);
     cursor: pointer;
   }
 
   &:active,
   &.is-active {
-    background-color: var(--token-color-critical-background-active);
-    border-color: var(--token-color-critical-background-active);
+    background-color: var(--token-color-palette-red-400);
+    border-color: var(--token-color-palette-red-400);
     box-shadow: none;
-    color: var(--token-color-palette-neutral-0);
+    color: var(--token-color-foreground-high-contrast);
     &::before {
       border-color: transparent;
     }

package/app/styles/components/card/container.scss

@@ -20,11 +20,11 @@ $hds-card-container-border-radius: 6px;
 // BACKGROUND
 
 .hds-card__container--background-neutral-primary {
-  background-color: var(--token-color-neutral-background-primary);
+  background-color: var(--token-color-surface-primary);
 }
 
 .hds-card__container--background-neutral-secondary {
-  background-color: var(--token-color-neutral-background-secondary);
+  background-color: var(--token-color-surface-faint);
 }
 
 

package/app/styles/components/disclosure.scss

@@ -0,0 +1,10 @@
+//
+// DISCLOSURE COMPONENT
+//
+// properties within each class are sorted alphabetically
+//
+
+.hds-disclosure {
+  position: relative;
+  width: fit-content;
+}

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

@@ -29,8 +29,8 @@
 }
 
 .hds-icon-tile__extra {
-  background-color: var(--token-color-neutral-background-primary);
-  border: 1px solid var(--token-color-palette-alpha-200);
+  background-color: var(--token-color-surface-primary);
+  border: 1px solid var(--token-color-border-primary);
   bottom: -6px;
   box-shadow: $hds-icon-tile-box-shadow;
   box-sizing: content-box; // the border is outside
@@ -42,7 +42,7 @@
 .hds-icon-tile__extra-icon {
   display: flex;
   margin: auto;
-  color: var(--token-color-neutral-foreground-primary);
+  color: var(--token-color-foreground-strong);
 }
 
 // SIZE
@@ -112,8 +112,8 @@ $size-props: (
 
 .hds-icon-tile--logo {
   // notice: we are using colored icons so we don't need to set the "color" property here
-  background-color: var(--token-color-neutral-background-primary);
-  border-color: var(--token-color-neutral-border-primary);
+  background-color: var(--token-color-surface-primary);
+  border-color: var(--token-color-border-primary);
 }
 
 // ICON - COLOR
@@ -121,18 +121,17 @@ $size-props: (
 .hds-icon-tile--icon {
 
   &.hds-icon-tile--color-neutral {
-    background-color: var(--token-color-neutral-background-secondary);
-    border-color: var(--token-color-neutral-border-primary);
-    color: var(--token-color-neutral-foreground-faint);
+    background-color: var(--token-color-surface-faint);
+    border-color: var(--token-color-border-primary);
+    color: var(--token-color-foreground-faint);
   }
 
   @each $product in $hds-icon-tile-colors-products {
     @if ($product == 'hcp') {
       // exception for HCP (we use neutral colors, we don't have specific product colors for foreground/background)
-      // notice: at the moment we don't have a token for that, that's why we're using an hex value
       &.hds-icon-tile--color-hcp {
-        background-color: var(--token-color-neutral-background-secondary);
-        border-color: var(--token-color-neutral-border-primary);
+        background-color: var(--token-color-surface-faint);
+        border-color: var(--token-color-border-primary);
         color: var(--token-color-palette-#{$product}-brand);
       }
     } @else {

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

@@ -7,7 +7,7 @@
 //
 //
 
-@use '../../mixins/generic-focus-state.scss' as *;
+@use "../../mixins/focus-ring" as *;
 
 $hds-link-standalone-sizes: ( 'small', 'medium', 'large' );
 
@@ -20,44 +20,10 @@ $hds-link-standalone-border-width: 1px;
   border: $hds-link-standalone-border-width solid transparent; // needs to exist AND be transparent for a11y
   display: flex;
   font-family: var(--token-typography-font-stack-text);
-  isolation: isolate; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container)
   justify-content: center;
-  outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
-  outline-color: transparent;
-  position: relative;
   // notice: the text decoration is applied directly to the "text" container because of a bug in Safari (see https://github.com/hashicorp/design-system-components/issues/159)
   text-decoration-color: transparent;
   width: fit-content;
-
-  // this is how much the focus is visually "shifted" from the bounding box of the
-  // notice: you have to take in account also the inset shadow of the focus (see Figma file and also "generic-focus-state" mixin)
-  $hds-link-standalone-focus-shift: 4px;
-  // the position absolute of an element is computed from the inside of the border of the container
-  // so we have to take in account the border width of the pseudo-element container itself
-  $shift: $hds-link-standalone-focus-shift + $hds-link-standalone-border-width;
-  // for visual/optical balance we add an extra 2px to the "shift" near the text (opposite the icon)
-  $shift-extra: $shift + 2px;
-
-  // this is used not only for the focus, but also to increase the clickable area
-  &::before {
-    border-radius: $hds-link-standalone-focus-border-radius;
-    bottom: -$shift;
-    box-sizing: border-box;
-    content: '';
-    left: -$shift;
-    position: absolute;
-    right: -$shift;
-    top: -$shift;
-    z-index: -1;
-  }
-
-  &.hds-link-standalone--icon-position-leading::before {
-    right: -$shift-extra;
-  }
-
-  &.hds-link-standalone--icon-position-trailing::before {
-    left: -$shift-extra;
-  }
 }
 
 .hds-link-standalone__text {
@@ -75,7 +41,6 @@ $hds-link-standalone-border-width: 1px;
   }
 }
 
-
 // SIZE
 
 // these values later may come from the design tokens
@@ -115,46 +80,13 @@ $size-props: (
 // COLORS & STATES
 // The "primary" and "secondary" variants share a lot of styles for the interactive states
 // Note: the order of the pseuo-selectors need to stay the way they are
-//
-// For an explanation of the ":focus/:focus-visible" states see:
-// - https://github.com/hashicorp/design-system-components/issues/161
-// - https://www.tpgi.com/focus-visible-and-backwards-compatibility/
-
-.hds-link-standalone {
-  // default focus for browsers that still rely on ":focus"
-  &:focus,
-  &.is-focus {
-    &::before {
-      @include hds-generic-focus-state();
-    }
-  }
-  // undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles
-  &:focus:not(:focus-visible) {
-    &::before {
-      @include hds-remove-focus-state();
-    }
-  }
-  // set focus for browsers that support ":focus-visible"
-  &:focus-visible {
-    &::before {
-      @include hds-generic-focus-state();
-    }
-  }
-  // remove the focus ring on "active + focused" state (by design)
-  &:focus:active,
-  &.is-focus.is-active {
-    &::before {
-      @include hds-remove-focus-state();
-    }
-  }
-}
 
 .hds-link-standalone--color-primary {
-  color: var(--token-color-action-foreground-primary);
+  color: var(--token-color-foreground-action);
 
   &:hover,
   &.is-hover {
-    color: var(--token-color-action-background-hover);
+    color: var(--token-color-foreground-action-hover);
 
     .hds-link-standalone__text {
       text-decoration-color: #4E81E8; // custom color by design
@@ -163,20 +95,20 @@ $size-props: (
 
   &:active,
   &.is-active {
-    color: var(--token-color-action-background-active);
+    color: var(--token-color-foreground-action-active);
 
     .hds-link-standalone__text {
       text-decoration-color: #396ED6; // custom color by design
     }
 
     &::before {
-      background-color: var(--token-color-action-background-faint);
+      background-color: var(--token-color-surface-action);
     }
   }
 }
 
 .hds-link-standalone--color-secondary {
-  color: var(--token-color-neutral-foreground-primary);
+  color: var(--token-color-foreground-strong);
 
   &:hover,
   &.is-hover {
@@ -187,14 +119,38 @@ $size-props: (
 
   &:active,
   &.is-active {
-    color: var(--token-color-neutral-foreground-secondary);
+    color: var(--token-color-foreground-primary);
 
     .hds-link-standalone__text {
       text-decoration-color: #6E7075; // custom color by design
     }
 
     &::before {
-      background-color: var(--token-color-palette-neutral-200);
+      background-color: var(--token-color-surface-interactive-active);
     }
   }
+}
+
+// this is how much the focus is visually "shifted" from the bounding box of the
+// notice: you have to take in account also the inset shadow of the focus (see Figma file and also "focus-ring" mixin)
+$hds-link-standalone-focus-shift: 4px;
+
+.hds-link-standalone {
+  // the position absolute of an element is computed from the inside of the border of the container
+  // so we have to take in account the border width of the pseudo-element container itself
+  $shift: $hds-link-standalone-focus-shift + $hds-link-standalone-border-width;
+  // for visual/optical balance we add an extra 2px to the "shift" near the text (opposite the icon)
+  $shift-extra: $shift + 2px;
+
+  // notice: this is used not only for the focus, but also to increase the clickable area
+  @include hds-focus-ring-with-pseudo-element($top: -$shift, $right: -$shift, $bottom: -$shift, $left: -$shift, $radius: $hds-link-standalone-focus-border-radius);
+
+  // we need to override a couple of values for better visual alignment
+  &.hds-link-standalone--icon-position-leading::before {
+    right: -$shift-extra;
+  }
+
+  &.hds-link-standalone--icon-position-trailing::before {
+    left: -$shift-extra;
+  }
 }

package/app/styles/mixins/_focus-ring.scss

@@ -0,0 +1,73 @@
+// For an explanation of the ":focus/:focus-visible" states see:
+// - https://github.com/hashicorp/design-system-components/issues/161
+// - https://www.tpgi.com/focus-visible-and-backwards-compatibility/
+
+@mixin hds-focus-ring-basic() {
+  outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
+  outline-color: transparent;
+
+  // default focus for browsers that still rely on ":focus"
+  &:focus,
+  &.is-focus {
+    box-shadow: var(--token-focus-ring-box-shadow);
+  }
+  // undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles
+  &:focus:not(:focus-visible) {
+    box-shadow: none;
+  }
+  // set focus for browsers that support ":focus-visible"
+  &:focus-visible {
+    box-shadow: var(--token-focus-ring-box-shadow);
+  }
+  // remove the focus ring on "active + focused" state (by design)
+  &:focus:active,
+  &.is-focus.is-active {
+    box-shadow: none;
+  }
+}
+
+@mixin hds-focus-ring-with-pseudo-element($top: 0, $right: 0, $bottom: 0, $left: 0, $radius: 5px) {
+  isolation: isolate; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container)
+  outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
+  outline-color: transparent;
+  position: relative;
+
+  &::before {
+    border-radius: $radius;
+    bottom: $bottom;
+    box-sizing: border-box;
+    content: '';
+    left: $left;
+    position: absolute;
+    right: $right;
+    top: $top;
+    z-index: -1;
+  }
+
+  // default focus for browsers that still rely on ":focus"
+  &:focus,
+  &.is-focus {
+    &::before {
+      box-shadow: var(--token-focus-ring-box-shadow);
+    }
+  }
+  // undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles
+  &:focus:not(:focus-visible) {
+    &::before {
+      box-shadow: none;
+    }
+  }
+  // set focus for browsers that support ":focus-visible"
+  &:focus-visible {
+    &::before {
+      box-shadow: var(--token-focus-ring-box-shadow);
+    }
+  }
+  // remove the focus ring on "active + focused" state (by design)
+  &:focus:active,
+  &.is-focus.is-active {
+    &::before {
+      box-shadow: none;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.0.20",
+  "version": "0.1.2",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -8,35 +8,13 @@
     "components",
     "ember-addon"
   ],
-  "repository": "https://github.com/hashicorp/design-system-components",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hashicorp/design-system.git",
+    "directory": "packages/components"
+  },
   "license": "MPL-2.0",
   "author": "HashiCorp Design Systems <design-systems@hashicorp.com>",
-  "contributors": [
-    {
-      "name": "Melanie Sumner",
-      "email": "melanie@hashicorp.com"
-    },
-    {
-      "name": "Brian Runnells",
-      "email": "brunnells@hashicorp.com"
-    },
-    {
-      "name": "Hector Simpson",
-      "email": "hector@hashicorp.com"
-    },
-    {
-      "name": "Heather Larsen",
-      "email": "hlarsen@hashicorp.com"
-    },
-    {
-      "name": "Amy Lam",
-      "email": "alam@hashicorp.com"
-    },
-    {
-      "name": "Cristiano Rastelli",
-      "email": "cristiano.rastelli@hashicorp.com"
-    }
-  ],
   "directories": {
     "doc": "doc",
     "test": "tests"
@@ -53,19 +31,17 @@
     "test": "npm-run-all lint test:*",
     "test:ember": "ember test",
     "test:ember-compatibility": "ember try:each",
-    "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",
-    "prepare": "husky install"
+    "test:ember:percy": "percy exec ember test"
   },
   "dependencies": {
-    "@hashicorp/design-system-tokens": "^0.4.7",
+    "@hashicorp/design-system-tokens": "^0.6.0",
     "@hashicorp/ember-flight-icons": "^2.0.1",
+    "ember-auto-import": "^2.2.3",
     "ember-cli-babel": "^7.26.6",
     "ember-cli-htmlbars": "^5.7.1",
     "ember-cli-sass": "^10.0.1",
+    "ember-focus-trap": "^1.0.1",
+    "ember-named-blocks-polyfill": "^0.2.5",
     "sass": "^1.43.4"
   },
   "devDependencies": {
@@ -79,7 +55,6 @@
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
     "ember-a11y-refocus": "^2.1.0",
-    "ember-auto-import": "^2.2.3",
     "ember-cli": "~3.28.4",
     "ember-cli-clipboard": "^0.15.0",
     "ember-cli-dependency-checker": "^3.2.0",
@@ -109,8 +84,6 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-qunit": "^6.2.0",
-    "husky": "^7.0.4",
-    "lint-staged": "^12.1.2",
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.3.2",
@@ -127,9 +100,5 @@
   },
   "ember-addon": {
     "configPath": "tests/dummy/config"
-  },
-  "lint-staged": {
-    "*.js": "eslint --cache --fix",
-    "*.{js,hbs}": "prettier --write"
   }
 }

package/.github/ISSUE_TEMPLATE/new-component-quest-issue-engineering-checklist.md

@@ -1,78 +0,0 @@
----
-name: New Component Quest Issue/Engineering Checklist
-about: 'DS Team: Engineering Checklist for New Components'
-title: "[Quest] New Component: Component Name"
-labels: ''
-assignees: ''
-
----
-
-This is the quest issue/engineering checklist for the COMPONENT_NAME Component. All new components will have their own feature branch, and any PR that adds an item from the checklist should target the feature branch, and not `main`. 
-
-## Pre-Flight Checklist
-Update this list and these links as appropriate.
-
-- [Component Doc](url_here): This file should exist before any code is written.
-- [FIGMA Design](url_here): Since we are trying to align the component API naming with the same terms used in the Figma file, it is likely useful to have a fairly stable Figma design before we create a component; it should definitely be finalized before the component ships, however. 
-- [Design System Website](https://design-system-website.vercel.app/?path=/story/example-introduction--page) (storybook of storybooks): use for reference, to consider existing features that we might need to replicate in the component.
-
-## Engineering Checklist 
-The engineering checklist has six parts: creating the feature branch, component template, component backing class, component style, tests, and documentation.
-
-### Component Creation
-
-- [ ] create new branch from main for the component.
-- [ ] create new component
-  - `ember generate component hds/COMPONENT_NAME/index --gc` (the component won't need to be invoked with index, it's just to put all the files in the correct place)
-  - if it's a variation on a component, then `hds/COMPONENT_NAME/VARIATION` instead of `index`
-- [ ] **component template**
-  - use semantic HTML
-  - the component should have a css class that is the same as the component (e.g. `hds/button` should have a class name of `hds-button` on the component, and additional CSS classes should start with this same class name.
-  - add `...attributes` unless doing so would be detrimental (e.g., a parent component and child component that both have ...attributes) 
-- [ ] **component class**
-  - use getters (vs template conditionals or constructors, if possible)
-  - write API comments in the JS doc way (copy from an existing DS component)
-  - use the same naming as the Figma file for the components API unless it conflicts with a pre-existing HTML attribute. If that is the case, document the difference in the comment.
-  - ensure that all existing functionality (from a Structure component) is accounted for in some way. If we are not providing existing functionality at all, it should be documented (along with the reason why). If we are providing temporary functionality, explain that it's temporary and why.
-  - check the [design system website](https://design-system-website.vercel.app/?path=/story/example-introduction--page) to see what kind of component functionality is being used across all products
-  - booleans should start with a verb (is/has/etc)
-  - assertion text should match the content style of the other components.
-  - goal is a terse invocation
-- [ ] **component style**
-  - create `component/COMPONENT_NAME.scss` in `app/styles` 
-  - add `@use` to `app/styles/@hashicorp/design-system-components.scss` (see existing code for precise syntax)
-  - use design tokens wherever possible, comment where they are not
-  - sizes should be in relative units
-  - line heights should be unitless
-- [ ] **testing**
-  - [ ] test basic functionality
-  - [ ] test defaults
-  - [ ] try not to repeat tests (i.e., don't have to test all sizes, all colors, etc.)
-  - [ ] test all accessibility attributes
-- [ ] **documentation**
-  - create component page `ember generate route components/COMPONENT_NAME --dummy`
-  - add link to `templates/index.hbs` page
-  - [ ] API docs
-  - [ ] Usage 
-  - [ ] Showcase 
-
-### Component Review
-
-Pre-review request checks:
-
-- [ ] make sure all tests pass (`ember s` then visit /tests; or `ember t -s`)
-- [ ] check for basic a11y on docs page: 
-  - keyboard navigation
-  - logical DOM order
-  - zoom up to 400% 
-  - color contrast
-  - (the axe-core browser plugin can run some basic tests and give immediate feedback) 
-- [ ] check page on browsers
-  - Chrome
-  - Firefox
-  - Safari
-  - Edge (once available) 
-
-When ready for review: 
-- [ ] add situationally appropriate reviewers
-- [ ] added instructions for reviewers in your PR, letting them know what kind of review you need

package/.github/pull_request_template.md.

@@ -1,26 +0,0 @@
-## :pushpin: Summary
-
-<!-- TLDR that includes the purpose of the PR e.g. "If merged, this PR..." -->
-
-## :busts_in_silhouette: How to review this PR
-
-<!-- Check one box -->
-
-- [ ] Review commit-by-commit (please copy commit info to "Summary" for clarity)
-- [ ] Review by "Files changed"
-
-## :camera_flash: Screenshots
-
-<!-- A picture is a thousand words -->
-
-## :link: External links
-
-<!-- Asana issues, RFCs, etc. -->
-
-## :memo: Is it documented? 
-
-- [ ] Please confirm that this change is documented on the website!
-
-***
-
-:speech_balloon: Please consider using [conventional comments](https://conventionalcomments.org/) when reviewing this PR.

package/.github/workflows/ci.yml

@@ -1,196 +0,0 @@
-name: CI 
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-
-env:
-  NODE_VERSION: '16.x'
-
-jobs:
-  lint:
-    name: Lint
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v2
-      with:
-        fetch-depth: 1
-
-    - uses: actions/setup-node@v2-beta
-      with:
-        node-version: '${{ env.NODE_VERSION }}'
-
-    - name: Get package manager's global cache path
-      id: global-cache-dir-path
-      run: echo "::set-output name=dir::$(yarn cache dir)"
-
-    - name: Cache package manager's global cache and node_modules
-      id: cache-dependencies
-      uses: actions/cache@v2
-      with:
-        path: |
-          ${{ steps.global-cache-dir-path.outputs.dir }}
-          node_modules
-        key: ${{ runner.os }}-${{ matrix.node-version }}-${{
-          hashFiles('**/yarn.lock'
-          ) }}
-        restore-keys: |
-          ${{ runner.os }}-${{ matrix.node-version }}-
-
-    - name: Install Dependencies
-      run: yarn install --frozen-lockfile
-      if: |
-        steps.cache-dependencies.outputs.cache-hit != 'true'
-
-    - name: Lint
-      run: yarn lint
-
-
-  test:
-    name: Tests
-    runs-on: ${{ matrix.os }}
-    needs: lint
-
-    strategy:
-      matrix:
-        os: [ubuntu-latest]
-        browser: [chrome]
-
-    steps:
-    - uses: actions/checkout@v2
-      with:
-        fetch-depth: 1
-
-    - uses: actions/setup-node@v2-beta
-      with:
-        node-version: '${{ env.NODE_VERSION }}'
-
-    - name: Get package manager's global cache path
-      id: global-cache-dir-path
-      run: echo "::set-output name=dir::$(yarn cache dir)"
-
-    - name: Cache package manager's global cache and node_modules
-      id: cache-dependencies
-      uses: actions/cache@v2
-      with:
-        path: |
-          ${{ steps.global-cache-dir-path.outputs.dir }}
-          node_modules
-        key: ${{ runner.os }}-${{ matrix.node-version }}-${{
-          hashFiles('**/yarn.lock'
-          ) }}
-        restore-keys: |
-          ${{ runner.os }}-${{ matrix.node-version }}-
-
-    - name: Install Dependencies
-      run: yarn install --frozen-lockfile
-      if: |
-        steps.cache-dependencies.outputs.cache-hit != 'true'
-
-    - name: Test
-      run: yarn test:ember:percy --launch ${{ matrix.browser }}
-      env:
-        PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
-
-  floating-dependencies:
-    name: Floating Dependencies
-    runs-on: ${{ matrix.os }}
-    needs: lint
-
-    strategy:
-      matrix:
-        os: [ubuntu-latest]
-        browser: [chrome]
-
-    steps:
-    - uses: actions/checkout@v2
-      with:
-        fetch-depth: 1
-
-    - uses: actions/setup-node@v2-beta
-      with:
-        node-version: '${{ env.NODE_VERSION }}'
-
-    - name: Get package manager's global cache path
-      id: global-cache-dir-path
-      run: echo "::set-output name=dir::$(yarn cache dir)"
-
-    - name: Cache package manager's global cache and node_modules
-      id: cache-dependencies
-      uses: actions/cache@v2
-      with:
-        path: |
-          ${{ steps.global-cache-dir-path.outputs.dir }}
-          node_modules
-        key: ${{ runner.os }}-${{ matrix.node-version }}-${{
-          hashFiles('**/yarn.lock'
-          ) }}
-        restore-keys: |
-          ${{ runner.os }}-${{ matrix.node-version }}-
-
-    - name: Install Dependencies
-      run: yarn install --no-lockfile --non-interactive
-
-    - name: Test
-      run: yarn test:ember:percy --launch ${{ matrix.browser }}
-      env:
-        PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
-
-  try-scenarios:
-    name: Tests - ${{ matrix.ember-try-scenario }}
-    runs-on: ubuntu-latest
-    continue-on-error: true
-    needs: test
-
-    strategy:
-      fail-fast: true
-      matrix:
-        ember-try-scenario: [
-          ember-lts-3.20,
-          ember-lts-3.24,
-          ember-release,
-          ember-beta,
-          # ember-canary,
-          ember-default-with-jquery,
-          ember-classic,
-          # embroider-safe,
-          # embroider-optimized
-        ]
-
-    steps:
-    - uses: actions/checkout@v2
-      with:
-        fetch-depth: 1
-
-    - uses: actions/setup-node@v2-beta
-      with:
-        node-version: '${{ env.NODE_VERSION }}'
-
-    - name: Get package manager's global cache path
-      id: global-cache-dir-path
-      run: echo "::set-output name=dir::$(yarn cache dir)"
-
-    - name: Cache package manager's global cache and node_modules
-      id: cache-dependencies
-      uses: actions/cache@v2
-      with:
-        path: |
-          ${{ steps.global-cache-dir-path.outputs.dir }}
-          node_modules
-        key: ${{ runner.os }}-${{ matrix.node-version }}-${{
-          hashFiles('**/yarn.lock'
-          ) }}
-        restore-keys: |
-          ${{ runner.os }}-${{ matrix.node-version }}-
-
-    - name: Install Dependencies
-      run: yarn install --frozen-lockfile
-      if: |
-        steps.cache-dependencies.outputs.cache-hit != 'true'
-
-    - name: Test
-      env:
-        EMBER_TRY_SCENARIO: ${{ matrix.ember-try-scenario }}
-      run: node_modules/.bin/ember try:one $EMBER_TRY_SCENARIO

package/.husky/pre-commit

@@ -1,14 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-export NVM_DIR="$HOME/.nvm/nvm.sh"
-. "$(dirname $NVM_DIR)/nvm.sh"
-
-export NVM_DIR="$HOME/.nvm"
-a=$(nvm ls | grep 'node')
-b=${a#*(-> }
-v=${b%%[)| ]*}
-
-export PATH="$NVM_DIR/versions/node/$v/bin:$PATH"
-
-npx lint-staged

package/app/styles/mixins/_generic-focus-state.scss

@@ -1,7 +0,0 @@
-@mixin hds-generic-focus-state() {
-  box-shadow: var(--token-focus-ring-box-shadow);
-}
-
-@mixin hds-remove-focus-state() {
-  box-shadow: none;
-}