@hashicorp/design-system-components 0.9.2 → 0.11.1

package/app/styles/components/dropdown.scss

@@ -20,29 +20,33 @@
 
 @use '../mixins/focus-ring' as *;
 
+$hds-dropdown-toggle-base-height: 36px;
+$hds-dropdown-toggle-border-radius: 5px;
+
+
 // TOGGLE/ICON
+
 .hds-dropdown-toggle-icon {
   align-items: center;
   background-color: transparent;
   border: 1px solid transparent; // We need this to be transparent for a11y
-  border-radius: 5px;
+  border-radius: $hds-dropdown-toggle-border-radius;
   display: flex;
-  height: 36px;
+  height: $hds-dropdown-toggle-base-height;
   justify-content: center;
+  min-width: $hds-dropdown-toggle-base-height;
   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
   padding: 1px;
-  min-width: 36px;
 
-  &:hover,  
+  &:hover,
   &.is-hover {
     background-color: var(--token-color-surface-interactive);
     border-color: var(--token-color-border-strong);
     cursor: pointer;
   }
 
-  // this is the :focus
-  @include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px, $radius: 5px);
+  @include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px, $radius: $hds-dropdown-toggle-border-radius);
 
   &:active,
   &.is-active {
@@ -53,7 +57,7 @@
 
 .hds-dropdown-toggle-icon__wrapper {
   align-items: center;
-  border-radius: 3px; // 5px- 1px padding - 1px border
+  border-radius: 3px; // $hds-dropdown-toggle-border-radius - 1px padding - 1px border
   display: flex;
   justify-content: center;
   height: 32px;
@@ -62,21 +66,43 @@
 
   img {
     border-radius: inherit;
+    height: 100%;
     object-fit: cover; // this will make sure it's correct even if the item isn't square
+    width: 100%;
   }
 }
 
 .hds-dropdown-toggle-icon__chevron {
-  margin-left: 0.25rem;
+  margin-left: 4px;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform .3s;
+  }
+
+  .hds-dropdown-toggle-icon--is-open & {
+    transform: rotate(-180deg);
+  }
 }
 
 // TOGGLE/BUTTON
-.hds-dropdown-toggle--with-button-component {
+
+.hds-dropdown-toggle-button {
   box-shadow: none; // we override this to remove the elevation style
 
   .hds-button__icon {
+    margin-left: 8px; // this overrides the rule `.hds-button__text + .hds-button__icon`
     margin-right: -6px; // we apply a negative margin to counter the padding-right of the button and reduce the visual space between the icon and the right border
-    margin-left: 0.5rem; // this overrides the rule `.hds-button__text + .hds-button__icon`
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: transform .3s;
+    }
+  }
+}
+
+
+.hds-dropdown-toggle-button--is-open {
+  .hds-button__icon {
+    transform: rotate(-180deg);
   }
 }
 
@@ -91,71 +117,37 @@
   box-shadow: var(--token-surface-high-box-shadow);
   list-style: none;
   margin: 0;
-  max-width: 25rem;
-  min-width: 12.5rem;
+  max-width: 400px;
+  min-width: 200px;
   padding: 4px 0;
-  &.hds-dropdown-list--position-right {
-    position: absolute;
-    right: 0;
-    top: calc(100% + 0.25rem);
-    z-index: 2; // https://github.com/hashicorp/design-system/issues/114
-  }
-
-  &.hds-dropdown-list--position-left {
-    position: absolute;
-    left: 0;
-    top: calc(100% + 0.25rem);
-    z-index: 2; // https://github.com/hashicorp/design-system/issues/114
-  }
+  width: max-content; // notice: this is important because being in a position absolute means the layout algorithm assigns a width of 0 and this impacts on the flex algorithm of the children (in some cases they don't use the full width)
 }
 
-// LIST > LIST-ITEM
-// HDS::DROPDOWN::LIST-ITEM
-
-.hds-dropdown-list-item--title {
-  color: var(--token-color-foreground-strong);
-  font-family: var(--token-typography-body-100-font-family);
-  font-size: var(--token-typography-body-100-font-size);
-  font-weight: var(--token-typography-font-weight-semibold);
-  line-height: var(--token-typography-body-100-line-height);
-  padding: 10px 16px 4px;
+.hds-dropdown-list--fixed-width {
+  max-width: initial;
+  min-width: initial;
 }
 
-.hds-dropdown-list-item--generic {
-  padding-left: 16px;
-  padding-right: 16px;
+.hds-dropdown-list--position-right {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 4px);
+  z-index: 2; // https://github.com/hashicorp/design-system/issues/114
 }
 
-.hds-dropdown-list-item--description {
-  color: var(--token-color-foreground-faint);
-  font-family: var(--token-typography-body-100-font-family);
-  font-size: var(--token-typography-body-100-font-size);
-  font-weight: var(--token-typography-font-weight-regular);
-  line-height: var(--token-typography-body-100-line-height);
-  padding: 2px 16px 4px;
+.hds-dropdown-list--position-left {
+  left: 0;
+  position: absolute;
+  top: calc(100% + 4px);
+  z-index: 2; // https://github.com/hashicorp/design-system/issues/114
 }
 
-.hds-dropdown-list-item--separator {
-  position: relative;
-  height: 4px;
-  width: 100%;
 
-  &::before {
-    position: absolute;
-    right: 6px;
-    left: 6px;
-    bottom: 0;
-    border-bottom: 1px solid var(--token-color-border-primary);
-    content: '';
-  }
-}
+// LIST > LIST-ITEM
+// HDS::DROPDOWN::LIST-ITEM
 
 .hds-dropdown-list-item__copy-item-title {
   color: var(--token-color-foreground-faint);
-  font-family: var(--token-typography-body-100-font-family);
-  font-size: var(--token-typography-body-100-font-size); // 13
-  font-weight: var(--token-typography-font-weight-semibold);
-  line-height: var(--token-typography-body-100-line-height); // 18
   padding: 2px 0 4px;
 }
 
@@ -163,17 +155,16 @@
   padding: 10px 16px 12px;
   width: 100%;
 
-  button { 
+  button {
     background-color: transparent;
     border-radius: 5px;
     border: 1px solid var(--token-color-border-primary);
-    color: var(--token-color-foreground-primary);  
+    color: var(--token-color-foreground-primary);
     display: flex;
-    font-family: var(--token-typography-font-stack-code);
     justify-content: space-between;
     padding: 12px 8px;
     width: 100%;
-    
+
     &:hover,
     &.is-hover {
       background-color: var(--token-color-surface-interactive-hover);
@@ -181,55 +172,61 @@
     }
 
     @include hds-focus-ring-basic();
-    
+
     &:focus,
     &.is-focus {
-      //TODO this focus is just way too complex 
+      //TODO this focus is just way too complex
       background-color:  var(--token-color-surface-action);
       border-color: var(--token-color-focus-action-internal);
     }
-    
-    &:active, 
+
+    &:active,
     &.is-active {
       background-color: var(--token-color-surface-interactive-active);
     }
 
     &.is-success {
-      border-color: var(--token-color-border-success);
       background-color: var(--token-color-surface-success);
-      
+      border-color: var(--token-color-border-success);
+
       .hds-dropdown-list-item__copy-item-icon {
         color: var(--token-color-foreground-success);
       }
-    } 
-
-    .hds-dropdown-list-item__copy-item-text {
-      font-size: var(--token-typography-code-100-font-size);
-      font-weight: var(--token-typography-font-weight-regular);
-      line-height: var(--token-typography-code-100-line-height);
-      // max-width: 250px; // TODO we should be able to figure out the proportions here
-      overflow: hidden;
-      text-align: left;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .hds-dropdown-list-item__copy-item-icon {
-      color: var(--token-color-foreground-action);
-      margin-left: 0.5rem;
     }
   }
 }
 
+.hds-dropdown-list-item__copy-item-text {
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hds-dropdown-list-item__copy-item-icon {
+  color: var(--token-color-foreground-action);
+  flex: none;
+  margin-left: 8px;
+}
+
+.hds-dropdown-list-item--description {
+  color: var(--token-color-foreground-faint);
+  padding: 2px 16px 4px;
+}
+
+.hds-dropdown-list-item--generic {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+
 .hds-dropdown-list-item--interactive {
-  position: relative;
   isolation: isolate; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container)
   min-height: 36px;
+  position: relative;
 
-  // need to reset a few extra things to make the button visually appear the same as the links
-  // TODO this is 0.125rem taller than the link...
+  // need to reset a few extra things to make the button visually appear the same as the link
   button {
-    border: 1px inset transparent; // cause of the extra height
     background-color: transparent;
     width: 100%;
 
@@ -242,10 +239,11 @@
   // shared styles for links and buttons
   a, button {
     align-items: center;
+    border: 1px solid transparent; // because a border for the button is needed for a11y, we apply it to both the button and the link so they have the same height
     display: flex;
     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;
-    padding: 8px 10px 8px 16px;
+    padding: 7px 9px 7px 15px; // notice: we're subtracting 1px because of the transparent border
     text-decoration: none;
 
     // this is used for the left "hover" indicator
@@ -253,7 +251,7 @@
       border-radius: 1px;
       bottom: 6px;
       content: '';
-      left: 0.25rem;
+      left: 4px;
       position: absolute;
       top: 6px;
       width: 2px;
@@ -266,59 +264,81 @@
       border-radius: 5px;
       bottom: 0px;
       content: '';
-      left: 0.625rem;
+      left: 10px;
       position: absolute;
-      right: 0.25rem;
-      z-index: -1;
+      right: 4px;
       top: 0;
+      z-index: -1;
     }
 
     // Notice: to avoid too much duplication we define two local CSS variables
     // and define their values in the color variants below
 
+    &:hover,
+    &.is-hover {
+      color: var(--current-color-hover);
+      &::before {
+        background-color: currentColor;
+      }
+    }
+
     // default focus for browsers that still rely on ":focus"
     &:focus,
     &.is-focus {
+      color: var(--current-color-focus);
       &::after {
         background-color: var(--current-background-color);
         box-shadow: var(--current-focus-ring-box-shadow);
-        left: 0.25rem;
+        left: 4px;
       }
     }
     // undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles
     &:focus:not(:focus-visible) {
       &::after {
+        background-color: transparent;
         box-shadow: none;
       }
     }
     // set focus for browsers that support ":focus-visible"
     &:focus-visible {
+      color: var(--current-color-focus);
       &::after {
         background-color: var(--current-background-color);
         box-shadow: var(--current-focus-ring-box-shadow);
-        left: 0.25rem;
+        left: 4px;
       }
     }
+
     // remove the focus ring on "active + focused" state (by design)
     &:focus:active,
+    &:focus-visible:active,
     &.is-focus.is-active {
       &::after {
+        background-color: var(--current-background-color);
         box-shadow: none;
+        left: 10px;
+      }
+    }
+
+    &:active,
+    &.is-active {
+      color: var(--current-color-active);
+      &::before {
+        background-color: currentColor;
+      }
+      &::after {
+        background-color: var(--current-background-color);
       }
     }
   }
 }
 
 .hds-dropdown-list-item__interactive-text {
-  font-family: var(--token-typography-body-200-font-family);
-  font-size: var(--token-typography-body-200-font-size);
-  font-weight: var(--token-typography-font-weight-medium);
-  line-height: var(--token-typography-body-200-line-height);
   text-align: left; // the button element was centering text
 }
 
 .hds-dropdown-list-item__interactive-icon {
-  margin-right: 0.5rem;
+  margin-right: 8px;
 }
 
 .hds-dropdown-list-item--color-action {
@@ -326,30 +346,12 @@
     color: var(--token-color-foreground-primary);
 
     // assign the values to the local CSS variables used above
+    --current-color-hover: var(--token-color-foreground-action-hover);
+    --current-color-focus: var(--token-color-foreground-action-active);
+    --current-color-active: var(--token-color-foreground-action-active);
     &::after {
       --current-background-color: var(--token-color-surface-action);
-      --current-focus-ring-box-shadow: var(
-        --token-focus-ring-action-box-shadow
-      );
-    }
-
-    &:hover,
-    &.is-hover {
-      color: var(--token-color-foreground-action-hover);
-      &::before {
-        background-color: currentColor;
-      }
-    }
-
-    &:active,
-    &.is-active {
-      color: var(--token-color-foreground-action-active);
-      &::before {
-        background-color: currentColor;
-      }
-      &::after {
-        background-color: var(--token-color-surface-action);
-      }
+      --current-focus-ring-box-shadow: var(--token-focus-ring-action-box-shadow);
     }
   }
 }
@@ -359,33 +361,33 @@
     color: var(--token-color-foreground-critical);
 
     // assign the values to the local CSS variables used above
+    --current-color-hover: var(--token-color-palette-red-300);
+    --current-color-focus: var(--token-color-palette-red-400);
+    --current-color-active: var(--token-color-palette-red-400);
     &::after {
       --current-background-color: var(--token-color-surface-critical);
-      --current-focus-ring-box-shadow: var(
-        --token-focus-ring-critical-box-shadow
-      );
+      --current-focus-ring-box-shadow: var(--token-focus-ring-critical-box-shadow);
     }
+  }
+}
 
-    &:hover,
-    &.is-hover {
-      color: var(
-        --token-color-palette-red-300
-      ); // TODO we need to add this token to the design system
-      &::before {
-        background-color: currentColor;
-      }
-    }
-    &:active,
-    &.is-active {
-      color: var(
-        --token-color-palette-red-400
-      ); // TODO we need to add this token to the design system
-      &::before {
-        background-color: currentColor;
-      }
-      &::after {
-        background-color: var(--token-color-surface-critical);
-      }
-    }
+.hds-dropdown-list-item--separator {
+  height: 4px;
+  position: relative;
+  width: 100%;
+
+  &::before {
+    border-bottom: 1px solid var(--token-color-border-primary);
+    bottom: 0;
+    content: '';
+    left: 6px;
+    position: absolute;
+    right: 6px;
   }
 }
+
+.hds-dropdown-list-item--title {
+  color: var(--token-color-foreground-strong);
+  padding: 10px 16px 4px;
+}
+

package/app/styles/components/toast.scss

@@ -0,0 +1,16 @@
+//
+// TOAST
+//
+// properties within each class are sorted alphabetically
+//
+//
+
+.hds-toast {
+  // we apply an elevation to the "alert/inline" element
+  box-shadow: var(--token-elevation-higher-box-shadow);
+
+  // per design specs
+  min-width: min(360px, 80vw);
+  max-width: min(500px, 80vw);
+  width: fit-content;
+}

package/blueprints/hds-component/files/addon/components/hds/__name__/index.hbs

@@ -0,0 +1,4 @@
+{{! ADD YOUR TEMPLATE CONTENT HERE }}
+<div className={{this.classNames}} ...attributes>
+  {{yield}}
+</div>

package/blueprints/hds-component/files/addon/components/hds/__name__/index.js

@@ -0,0 +1,23 @@
+import Component from '@glimmer/component';
+
+export default class Hds<%= classifiedModuleName %>IndexComponent extends Component {
+  // UNCOMMENT THIS IF YOU NEED A CONSTRUCTOR
+  // constructor() {
+  //   super(...arguments);
+  //   // ADD YOUR ASSERTIONS HERE
+  // }
+
+  /**
+   * 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-<%= kebabizedModuleName %>'];
+
+    // add a class based on the @xxx argument
+    // classes.push(`hds-<%= kebabizedModuleName %>--[variant]-${this.xxx}`);
+
+    return classes.join(' ');
+  }
+}

package/blueprints/hds-component/files/app/components/hds/__name__/index.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/<%= dasherizedModuleName %>/index';

package/blueprints/hds-component/files/app/styles/components/__name__.scss

@@ -0,0 +1,6 @@
+//
+// <%= folderizedModuleName %>
+//
+// properties within each class are sorted alphabetically
+//
+

package/blueprints/hds-component/index.js

@@ -0,0 +1,26 @@
+/* eslint-disable ember/no-string-prototype-extensions */
+/* eslint-disable node/no-extraneous-require */
+'use strict';
+
+const stringUtil = require('ember-cli-string-utils');
+
+module.exports = {
+  description: 'Generates all files for an HDS component',
+
+  locals(options) {
+    return {
+      columnizedModuleName: options.entity.name
+        .split('/')
+        .map((part) => stringUtil.classify(part))
+        .join('::'),
+      kebabizedModuleName: options.entity.name
+        .split('/')
+        .map((part) => stringUtil.dasherize(part))
+        .join('-'),
+      folderizedModuleName: options.entity.name
+        .split('/')
+        .map((part) => stringUtil.dasherize(part).toUpperCase())
+        .join(' > '),
+    };
+  },
+};

package/blueprints/hds-component-test/files/tests/dummy/app/routes/components/__name__.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class Components<%= classifiedModuleName %>Route extends Route {}

package/blueprints/hds-component-test/files/tests/dummy/app/styles/pages/__dummyCSSFileName__.scss

@@ -0,0 +1 @@
+// <%= folderizedModuleName %>

package/blueprints/hds-component-test/files/tests/dummy/app/templates/components/__name__.hbs

@@ -0,0 +1,65 @@
+{{page-title "<%= columnizedModuleName %> Component"}}
+
+<h2 class="dummy-h2"><%= columnizedModuleName %></h2>
+
+{{! ADD YOUR CONTENT BELOW }}
+{{! Please follow as much as possible what it's already done in other components. }}
+{{! You can start by copy&pasting it, if you want, and then adapt it according to your needs. }}
+{{! Once done, please remove these comments (they're created by the generator). }}
+
+<section>
+  <h3 class="dummy-h3" id="overview"><a href="#overview">§</a> Overview</h3>
+
+  {{! ADD YOUR CONTENT HERE }}
+
+</section>
+
+<section>
+  <h3 class="dummy-h3" id="component-api"><a href="#component-api">§</a> Component API</h3>
+  <p class="dummy-paragraph" id="component-api-<%= kebabizedModuleName %>">
+    Here is the API for the component:
+  </p>
+  <dl class="dummy-component-props" aria-labelledby="component-api-<%= kebabizedModuleName %>">
+
+    {{! ADD YOUR CONTENT HERE }}
+
+  </dl>
+</section>
+
+<section>
+  <h3 class="dummy-h3" id="how-to-use"><a href="#how-to-use" class="dummy-link-section">§</a> How to use</h3>
+
+  {{! ADD YOUR CONTENT HERE }}
+
+</section>
+
+<section>
+  <h3 class="dummy-h3" id="design-guidelines"><a href="#design-guidelines" class="dummy-link-section">§</a>Design guidelines</h3>
+  {{! UNCOMMENT THIS BLOCK (once the link and/or the image are available) }}
+  {{!
+  <div class="dummy-design-guidelines">
+    <p class="dummy-paragraph">
+      <a href="[ADD THE LINK TO THE FIGMA FILE/PAGE HERE!]" target="_blank" rel="noopener noreferrer">Figma UI Kit</a>
+    </p>
+    <br />
+    <img class="dummy-figma-docs" src="/assets/images/<%= kebabizedModuleName %>-design-usage.png" alt="" role="none" />
+  </div>
+  }}
+</section>
+
+<section>
+  <h3 class="dummy-h3" id="accessibility"><a href="#accessibility" class="dummy-link-section">§</a> Accessibility</h3>
+
+  {{! ADD YOUR CONTENT HERE }}
+
+</section>
+
+<section data-test-percy>
+  <h3 class="dummy-h3" id="showcase"><a href="#showcase" class="dummy-link-section">§</a> Showcase</h3>
+
+  {{! ADD YOUR CONTENT HERE }}
+
+  {{! This below is just an example of invocation, to get started }}
+  <Hds::<%= columnizedModuleName %>>This is the Hds::<%= columnizedModuleName %> component </Hds::<%= columnizedModuleName %>>
+
+</section>

package/blueprints/hds-component-test/files/tests/integration/components/hds/__name__/index-test.js

@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | hds/<%= dasherizedModuleName %>/index', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders the component', async function (assert) {
+    await render(hbs`<Hds::<%= columnizedModuleName %> />`);
+    assert.dom(this.element).exists();
+  });
+  test('it should render with a CSS class that matches the component name', async function (assert) {
+    await render(hbs`<Hds::<%= columnizedModuleName %> id="test-<%= kebabizedModuleName %>" />`);
+    assert.dom('#test-<%= kebabizedModuleName %>').hasClass('hds-<%= kebabizedModuleName %>');
+  });
+});