@hashicorp/design-system-components 2.1.0 → 2.3.0

package/app/styles/components/tooltip.scss

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// TOOLTIP & TOOLTIP-BUTTON
+//
+
+@use "../mixins/focus-ring" as *;
+
+.hds-tooltip-button {
+  @include hds-focus-ring-with-pseudo-element(
+    $top: var(--token-tooltip-focus-offset),
+    $right: var(--token-tooltip-focus-offset),
+    $bottom: var(--token-tooltip-focus-offset),
+    $left: var(--token-tooltip-focus-offset),
+  );
+}
+
+// The special declarations below are used to allow the button to inherit styles from the parent element
+// without preventing the consumers from applying these styles via HDS or custom classes if they want
+//
+// Since the `:where()` selector has a specificity of `0` (see https://developer.mozilla.org/en-US/docs/Web/CSS/:where)
+// the styles declared below are applied to the `<button>` element, but are overwritten by any other style applied via classname
+//
+// If you want to see the effect of this selector, try to comment it and look at the "Inheritance" demo in the showcase:
+// https://hds-showcase.vercel.app/components/tooltip
+
+:where(.hds-tooltip-button) {
+  margin: 0;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  background-color: inherit;
+  border: none;
+}
+
+:where(.hds-tooltip-button--is-inline) {
+  display: inline-flex;
+}
+
+:where(.hds-tooltip-button--is-block) {
+  display: flex;
+}
+
+
+// Tippy.js styling
+// https://atomiks.github.io/tippyjs/
+
+.tippy-box[data-theme~="hds"] {
+  padding: var(--token-tooltip-padding-vertical) var(--token-tooltip-padding-horizontal);
+  color: var(--token-tooltip-color-foreground-primary);
+  font-weight: var(--token-typography-font-weight-regular);
+  font-size: var(--token-typography-body-200-font-size);
+  font-family: var(--token-typography-body-200-font-family);
+  line-height: var(--token-typography-body-200-line-height);
+  overflow-wrap: break-word;
+  background-color: var(--token-tooltip-color-surface-primary);
+  border-radius: var(--token-tooltip-border-radius);
+  box-shadow: var(--token-elevation-higher-box-shadow);
+  transition-property: transform, visibility, opacity;
+
+  &[data-animation="fade"][data-state="hidden"] {
+    opacity: 0;
+  }
+
+  &[data-inertia][data-state="visible"] {
+    transition-timing-function: var(--token-tooltip-transition-function);
+  }
+
+  .tippy-content {
+    position: relative;
+    z-index: 1;
+    // This needs to go here because Tippy generates a javascript
+    // max-width on .tippy-box.
+    max-width: var(--token-tooltip-max-width);
+  }
+
+  // works with Tippy's custom SVG arrow variation:
+  .tippy-svg-arrow {
+    fill: var(--token-tooltip-color-surface-primary);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -38,9 +38,10 @@
   },
   "dependencies": {
     "@ember/render-modifiers": "^2.0.5",
-    "@hashicorp/design-system-tokens": "^1.4.1",
+    "@hashicorp/design-system-tokens": "^1.5.0",
     "@hashicorp/ember-flight-icons": "^3.0.2",
     "dialog-polyfill": "^0.5.6",
+    "ember-a11y-refocus": "^3.0.2",
     "ember-auto-import": "^2.6.0",
     "ember-cached-decorator-polyfill": "^0.1.4",
     "ember-cli-babel": "^7.26.11",
@@ -50,9 +51,11 @@
     "ember-focus-trap": "^1.0.1",
     "ember-keyboard": "^8.1.0",
     "ember-named-blocks-polyfill": "^0.2.5",
+    "ember-stargate": "^0.4.3",
     "ember-style-modifier": "^0.8.0",
     "ember-truth-helpers": "^3.0.0",
-    "sass": "^1.58.3"
+    "sass": "^1.58.3",
+    "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
@@ -61,7 +64,7 @@
     "@embroider/test-setup": "^2.0.2",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@percy/cli": "^1.21.0",
+    "@percy/cli": "^1.24.0",
     "@percy/ember": "^4.2.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",

package/addon/components/hds/form/toggle/base.js

@@ -1,27 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-
-export default class HdsFormToggleBaseComponent extends Component {
-  /**
-   * Get the class names to apply to the component.
-   * @method classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  get classNames() {
-    let classes = ['hds-form-toggle'];
-
-    // add a class based on the @_wrapperClass argument
-    // we need to use this special argument to pass a class to the wrapping element, because the ...attributes is applied to the control
-    // notice: this will *not* be documented for public use
-    // the reason for this is that the spread (...) of attributes is applied to the <input> element, but the component has a wrapping container and we need to pass a class to it
-    if (this.args._wrapperClass) {
-      classes.push(this.args._wrapperClass);
-    }
-
-    return classes.join(' ');
-  }
-}

package/addon/components/hds/side-nav/wrapper.hbs

@@ -1,18 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<div class="hds-side-nav__wrapper" ...attributes>
-  <div class="hds-side-nav__wrapper-header">
-    {{yield to="header"}}
-  </div>
-
-  <div class="hds-side-nav__wrapper-body" aria-label="contents">
-    {{yield to="body"}}
-  </div>
-
-  <div class="hds-side-nav__wrapper-footer">
-    {{yield to="footer"}}
-  </div>
-</div>

package/app/styles/components/side-nav.scss

@@ -1,275 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-//
-// SIDE-NAV
-//
-
-@use "../mixins/focus-ring" as *;
-
-// WIP, naming, etc. will be refined... TODO: Add JSON for color tokens, etc.
-:root {
-  // Sizes:
-
-  // header, body, footer "wrappers":
-  --token-side-nav-wrapper-padding-horizontal: 16px;
-  --token-side-nav-wrapper-padding-vertical: 16px;
-  --token-side-nav-wrapper-header-padding-bottom: 8px;
-
-  // header content:
-  --token-side-nav-header-home-link-padding: 4px;
-  --token-side-nav-header-home-link-logo-size: 48px;
-  --token-side-nav-header-actions-spacing: 8px;
-
-  // body content:
-  --token-side-nav-body-list-margin-vertical: 16px;
-  --token-side-nav-body-list-item-padding-horizontal: 8px;
-  --token-side-nav-body-list-item-padding-vertical: 4px;
-  --token-side-nav-body-list-item-spacing-vertical: 2px;
-  --token-side-nav-body-list-item-content-spacing-horizontal: 8px;
-  --token-side-nav-body-list-item-border-radius: 5px;
-
-  // Colors:
-
-  // SideNav container:
-  --token-side-nav-foreground-primary: #dedfe3;
-  --token-side-nav-foreground-primary-strong: #fff;
-  --token-side-nav-foreground-faint: #8c909c;
-  --token-side-nav-surface-primary: #0c0c0e;
-
-  // Interactive elements:
-  // base:
-  --token-side-nav-interactive-surface-hover: #3b3d45;
-  --token-side-nav-interactive-surface-active: #656a76;
-}
-
-@mixin hds-side-nav-icon-button($add-visible-border: false) {
-  color: var(--token-side-nav-foreground-primary-strong);
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: var(--token-side-nav-body-list-item-border-radius);
-  cursor: pointer;
-
-  @if ($add-visible-border) {
-    border-color: var(--token-color-palette-neutral-500);
-  }
-
-  &:focus,
-  &.mock-focus {
-    @include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px);
-  }
-
-  &:hover,
-  &.mock-hover {
-    color: var(--token-side-nav-foreground-primary-strong); // to avoid overrides by specificity (eg. `a:hover`)
-    background: var(--token-side-nav-interactive-surface-hover);
-  }
-
-  &:active,
-  &.mock-active {
-    color: var(--token-side-nav-foreground-primary-strong); // to avoid overrides by specificity (eg. `a:hover`)
-    background: var(--token-side-nav-interactive-surface-active);
-
-    @if ($add-visible-border) {
-      border-color: var(--token-color-palette-neutral-400);
-    }
-  }
-}
-
-
-// * SideNav Parent (wrapper) component
-// -------------------------------------------------------------------
-
-.hds-side-nav__wrapper {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  color: var(--token-side-nav-foreground-primary); // Default color
-  background: var(--token-side-nav-surface-primary);
-}
-
-.hds-side-nav__wrapper-header {
-  padding-top: var(--token-side-nav-wrapper-padding-vertical);
-  padding-right: var(--token-side-nav-wrapper-padding-horizontal);
-  padding-bottom: var(--token-side-nav-wrapper-header-padding-bottom); // by design
-  padding-left: var(--token-side-nav-wrapper-padding-horizontal);
-}
-
-.hds-side-nav__wrapper-body {
-  flex: 1;
-  padding: var(--token-side-nav-wrapper-padding-vertical) var(--token-side-nav-wrapper-padding-horizontal);
-  overflow-y: auto;
-}
-
-.hds-side-nav__wrapper-footer {
-  padding: var(--token-side-nav-wrapper-padding-vertical) var(--token-side-nav-wrapper-padding-horizontal);
-}
-
-// * Header child elements
-// ---------------------------------------
-
-.hds-side-nav-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.hds-side-nav-header__logo {
-  display: block;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  width: var(--token-side-nav-header-home-link-logo-size);
-  height: var(--token-side-nav-header-home-link-logo-size);
-}
-
-.hds-side-nav-header__actions {
-  display: flex;
-
-  > * + * { margin-left: var(--token-side-nav-header-actions-spacing); }
-}
-
-.hds-side-nav__home-link {
-  @include hds-side-nav-icon-button();
-  display: block;
-  width: 100%;
-  height: 100%;
-  padding: calc(var(--token-side-nav-header-home-link-padding) - 1px); // by design -  we take in account the transparent border
-}
-
-// Apply class name to Hds::Dropdown component
-.hds-side-nav__dropdown {
-  .hds-dropdown-toggle-icon {
-    @include hds-side-nav-icon-button($add-visible-border: true);
-  }
-}
-
-.hds-side-nav__icon-button {
-  @include hds-side-nav-icon-button($add-visible-border: true);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  padding: 5px; // we take in account the transparent border
-}
-
-// * Body child elements
-// ---------------------------------------
-
-.hds-side-nav__list-title {
-  display: flex;
-  align-items: center;
-  min-height: 34px;
-  margin-top: var(--token-side-nav-body-list-margin-vertical);
-  padding: 0 var(--token-side-nav-body-list-item-padding-horizontal);
-  color: var(--token-side-nav-foreground-faint);
-
-  // Remove margin from title at top of all list-items & lists
-  .hds-side-nav__list-wrapper:first-child .hds-side-nav__list-item:first-child > & {
-    margin-top: 0;
-  }
-}
-
-.hds-side-nav__list {
-  margin: 0;
-  padding: 0;
-}
-
-.hds-side-nav__list-item {
-  list-style-type: none; // Q: Should ul have role="list" added for accessibility?
-
-  & + & {
-    margin-top: var(--token-side-nav-body-list-item-spacing-vertical);
-  }
-}
-
-.hds-side-nav__list-item-link {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  min-height: 36px;
-  padding: var(--token-side-nav-body-list-item-padding-vertical) var(--token-side-nav-body-list-item-padding-horizontal);
-  color: var(--token-side-nav-foreground-primary);
-  text-decoration: none;
-  background: var(--token-side-nav-surface-primary);
-  // "Link" could render as an HTML button element so this overrides the default border style in that case:
-  border-color: transparent;
-  border-radius: var(--token-side-nav-body-list-item-border-radius);
-
-  &:focus,
-  &.mock-focus {
-    @include hds-focus-ring-with-pseudo-element();
-  }
-
-  &:hover,
-  &.mock-hover {
-    background: var(--token-side-nav-interactive-surface-hover);
-    border-color: transparent;
-
-    .hds-side-nav__list-item-text,
-    .hds-side-nav__list-item-icon-leading,
-    .hds-side-nav__list-item-icon-trailing {
-      color: var(--token-side-nav-foreground-primary-strong);
-    }
-  }
-
-  // notice: this ".active" extra class is used to match the corresponding `active` class assigned automatically
-  // by the `<LinkTo>` Ember component (when the link is "current), so that consumers get it for free if they want
-  // otherwise they can use the `@isActive` argument to set this visual state directly
-  &.active,
-  &:active,
-  &.mock-active {
-    background: var(--token-side-nav-interactive-surface-active);
-
-    .hds-side-nav__list-item-text,
-    .hds-side-nav__list-item-icon-leading,
-    .hds-side-nav__list-item-icon-trailing {
-      color: var(--token-side-nav-foreground-primary-strong);
-    }
-
-    .hds-badge,
-    .hds-badge-count {
-      color: var(--token-color-foreground-primary);
-      background: var(--token-color-surface-strong);
-    }
-  }
-
-  .hds-badge,
-  .hds-badge-count {
-    margin-left: var(--token-side-nav-body-list-item-content-spacing-horizontal);
-  }
-}
-
-// special override for the "back-link" element (no visible active state, by design)
-.hds-side-nav__list-item-link--back-link {
-  &:active,
-  &.mock-active {
-    background: var(--token-side-nav-surface-primary);
-
-    .hds-side-nav__list-item-text,
-    .hds-side-nav__list-item-icon-leading,
-    .hds-side-nav__list-item-icon-trailing {
-      color: var(--token-side-nav-foreground-primary);
-    }
-  }
-}
-
-.hds-side-nav__list-item-text {
-  color: var(--token-side-nav-foreground-primary);
-  text-align: left;
-}
-
-.hds-side-nav__list-item-icon-leading {
-  flex: none;
-  margin-right: var(--token-side-nav-body-list-item-content-spacing-horizontal);
-}
-
-.hds-side-nav__list-item-icon-trailing {
-  flex: none;
-  margin-left: auto;
-  padding-left: var(--token-side-nav-body-list-item-content-spacing-horizontal);
-}