@hashicorp/design-system-components 0.11.0 → 0.11.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @hashicorp/design-system-components
 
+## 0.11.1
+
+### Patch Changes
+
+- [#284](https://github.com/hashicorp/design-system/pull/284) [`ba409885`](https://github.com/hashicorp/design-system/commit/ba409885468f91d659d10971fa1f34f64f57ddbc) Thanks [@alex-ju](https://github.com/alex-ju)! - Change focus management in disclosure utility component
+
+* [#289](https://github.com/hashicorp/design-system/pull/289) [`bf3a00e5`](https://github.com/hashicorp/design-system/commit/bf3a00e56989bbef92bfa355a42e5775785847a3) Thanks [@didoo](https://github.com/didoo)! - "Alert" and "Toast" components - converted "title" and "description" arguments to be contextual components
+
 ## 0.11.0
 
 ### Minor Changes

package/addon/components/hds/alert/description.hbs

@@ -0,0 +1 @@
+<div class="hds-alert__description" ...attributes>{{yield}}</div>

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

@@ -7,12 +7,8 @@
 
   <div class="hds-alert__content">
     <div class="hds-alert__text">
-      {{#if @title}}
-        <div class="hds-alert__title">{{@title}}</div>
-      {{/if}}
-      {{#if @description}}
-        <div class="hds-alert__description">{{html-safe @description}}</div>
-      {{/if}}
+      {{yield (hash Title=(component "hds/alert/title"))}}
+      {{yield (hash Description=(component "hds/alert/description"))}}
     </div>
 
     <div class="hds-alert__actions">

package/addon/components/hds/alert/title.hbs

@@ -0,0 +1 @@
+<div class="hds-alert__title" ...attributes>{{yield}}</div>

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

@@ -1,16 +1,16 @@
-<div class="hds-disclosure" ...attributes>
-  <div class="hds-disclosure__toggle">
+{{! template-lint-disable no-invalid-interactive }}
+<div
+  class="hds-disclosure"
+  ...attributes
+  {{did-insert this.didInsert}}
+  {{on "focusout" this.onFocusOut}}
+  {{on "keyup" this.onKeyUp}}
+>
+  <div class="hds-disclosure__toggle" tabindex="-1">
     {{yield (hash onClickToggle=this.onClickToggle isActive=this.isActive) to="toggle"}}
   </div>
   {{#if this.isActive}}
-    <div
-      class="hds-disclosure__content"
-      {{focus-trap
-        isActive=this.isActive
-        shouldSelfFocus=true
-        focusTrapOptions=(hash clickOutsideDeactivates=this.clickOutsideDeactivates onDeactivate=this.onDeactivate)
-      }}
-    >
+    <div class="hds-disclosure__content" tabindex="-1">
       {{yield to="content"}}
     </div>
   {{/if}}

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

@@ -7,6 +7,11 @@ export default class HdsDisclosureComponent extends Component {
   @tracked toggleRef;
   @tracked isToggleClicked;
 
+  @action
+  didInsert(element) {
+    this.element = element;
+  }
+
   @action
   onClickToggle(event) {
     // we store a reference to the DOM node that has the "onClickToggle" event associated with it
@@ -14,34 +19,36 @@ export default class HdsDisclosureComponent extends Component {
       this.toggleRef = event.currentTarget;
     }
     this.isActive = !this.isActive;
+    // we explicitly apply a focus state to the toggle element to overcome a bug in WebKit (see b8abfcf)
+    this.toggleRef.focus();
   }
 
   @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
-    // notice: we use "event.composedPath" here because is now fully supported (see https://caniuse.com/?search=event%20path)
-    const path = event.composedPath();
-    this.isToggleClicked = 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;
+  onFocusOut(event) {
+    if (
+      !event.relatedTarget || // click or tap a non-related target (e.g. outside the element)
+      !this.element.contains(event.relatedTarget) // move focus to a target outside the element
+    ) {
+      this.deactivate();
+    }
   }
 
   @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) {
+  onKeyUp(event) {
+    if (event.key === 'Escape') {
+      this.deactivate();
+      this.toggleRef.focus();
+    }
+  }
+
+  @action
+  deactivate() {
+    if (this.isActive) {
       this.isActive = false;
-      // we need to reset this check
-      this.isToggleClicked = false;
-      // we call the "onClose" callback if it exists (and is a function)
-      if (this.args.onClose && typeof this.args.onClose === 'function') {
-        this.args.onClose();
-      }
+    }
+    // we call the "onClose" callback if it exists (and is a function)
+    if (this.args.onClose && typeof this.args.onClose === 'function') {
+      this.args.onClose();
     }
   }
 }

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

@@ -3,13 +3,18 @@
   @type="inline"
   @color={{@color}}
   @icon={{@icon}}
-  @title={{@title}}
-  @description={{@description}}
   @onDismiss={{@onDismiss}}
   ...attributes
   as |A|
 >
   {{yield
-    (hash Button=A.Button Link::Standalone=A.Link::Standalone LinkTo::Standalone=A.LinkTo::Standalone Generic=A.Generic)
+    (hash
+      Title=A.Title
+      Description=A.Description
+      Button=A.Button
+      Link::Standalone=A.Link::Standalone
+      LinkTo::Standalone=A.LinkTo::Standalone
+      Generic=A.Generic
+    )
   }}
 </Hds::Alert>

package/app/components/hds/alert/description.js

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

package/app/components/hds/alert/title.js

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

package/app/styles/components/alert.scss

@@ -69,14 +69,27 @@
   }
 
   code, pre {
-    font-family: var(--token-typography-font-stack-code);
+    background-color: var(--token-color-surface-primary);
+    border: 1px solid var(--token-color-palette-neutral-200);
+    border-radius: 5px;
+    display: inline;
+    font-family: var(--token-typography-code-100-font-family);
+    font-size: 0.9em; // as discussed with designers, we reduce the size for optical/visual balance
+    line-height: 1em;
+    padding: 1px 5px;
   }
 
-  // Notice: in the future this may become a "Link::Inline" component (for now we declare the styles directly here)
+  // Notice: in the future this may become a "Link::Inline" component (for now we declare directly the same styles here)
   a {
     color: var(--token-color-foreground-action);
-    // At the moment the "focus" state is not well defined in design (the one that is in Figma does not work) so we just apply a simple color to the default outline
-    outline-color: var(--token-color-focus-action-external);
+
+    &:focus,
+    &.is-focus,
+    &:focus-visible {
+      outline: 2px solid var(--token-color-focus-action-internal);
+      outline-offset: 1px;
+      text-decoration: none;
+    }
 
     &:hover {
       color: var(--token-color-foreground-action-hover);

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 %>');
+  });
+});

package/blueprints/hds-component-test/index.js

@@ -0,0 +1,126 @@
+/* eslint-disable ember/no-string-prototype-extensions */
+/* eslint-disable node/no-extraneous-require */
+'use strict';
+
+const stringUtil = require('ember-cli-string-utils');
+const EmberRouterGenerator = require('ember-router-generator');
+const fs = require('fs');
+
+module.exports = {
+  description: 'Generates tests for an HDS component',
+
+  locals(options) {
+    return {
+      columnizedModuleName: getColumnizedModuleName(options.entity.name),
+      kebabizedModuleName: getKebabizedModuleName(options.entity.name),
+      folderizedModuleName: getFolderizedModuleName(options.entity.name),
+    };
+  },
+
+  fileMapTokens() {
+    return {
+      // prepend `db-` to the file name
+      __dummyCSSFileName__(options) {
+        return getDummyCSSFileName(options.dasherizedModuleName);
+      },
+    };
+  },
+
+  afterInstall(options) {
+    updateDummyAppRouter.call(this, options);
+    updateDummyAppCSS.call(this, options);
+    updateDummyAppIndexHBS.call(this, options);
+  },
+};
+
+const updateDummyAppRouter = (options) => {
+  const newRouteToAdd = `components/${options.entity.name}`; // we prefix all the component routes with "components"
+  const routerFilePath = `${options.project.root}/tests/dummy/app/router.js`;
+  const source = fs.readFileSync(routerFilePath, 'utf-8');
+  let oldRoutes = new EmberRouterGenerator(source);
+  let newRoutes = oldRoutes['add'](newRouteToAdd, options);
+  fs.writeFileSync(routerFilePath, newRoutes.code());
+};
+
+const updateDummyAppCSS = (options) => {
+  const name = options.entity.name;
+  const cssFilePath = `${options.project.root}/tests/dummy/app/styles/app.scss`;
+  const source = fs.readFileSync(cssFilePath, 'utf-8');
+  const oldLinesArray = source.split(/\r?\n/);
+  const firstComponentImportIndex =
+    oldLinesArray.findIndex((line) =>
+      line.match(/^\/\/ START COMPONENT PAGES IMPORTS/)
+    ) + 1;
+  const lastComponentImportIndex =
+    oldLinesArray.findIndex((line) =>
+      line.match(/^\/\/ END COMPONENT PAGES IMPORTS/)
+    ) - 1;
+  const importLinesArray = oldLinesArray.slice(
+    firstComponentImportIndex,
+    lastComponentImportIndex + 1
+  );
+  importLinesArray.push(`@import "./pages/${getDummyCSSFileName(name)}";`);
+  const newImportLinesArray = importLinesArray
+    .filter((line, index, self) => self.indexOf(line) === index)
+    .sort();
+  const newLinesArray = [].concat(
+    oldLinesArray.slice(0, firstComponentImportIndex),
+    newImportLinesArray,
+    oldLinesArray.slice(lastComponentImportIndex + 1)
+  );
+  fs.writeFileSync(cssFilePath, newLinesArray.join('\n'));
+};
+
+const updateDummyAppIndexHBS = (options) => {
+  const name = options.entity.name;
+  const hbsFilePath = `${options.project.root}/tests/dummy/app/templates/index.hbs`;
+  let newListItemHTML = '';
+  newListItemHTML += '<!-- MOVE THIS HTML BLOCK IN THE RIGHT POSITION -->\n';
+  newListItemHTML += '<!-- (adjust component name & route if necessary) -->\n';
+  newListItemHTML += '<li class="dummy-paragraph">\n';
+  newListItemHTML += `  <LinkTo @route="components.${getRoutedModuleName(
+    name
+  )}">\n`;
+  newListItemHTML += `    ${getColumnizedModuleName(name)}\n`;
+  newListItemHTML += '  </LinkTo>\n';
+  newListItemHTML += '</li>\n';
+  fs.appendFileSync(hbsFilePath, `\n\n${newListItemHTML}\n`);
+};
+
+const getColumnizedModuleName = (name) => {
+  const columnizedModuleName = name
+    .split('/')
+    .map((part) => stringUtil.classify(part))
+    .join('::');
+  return columnizedModuleName;
+};
+
+const getKebabizedModuleName = (name) => {
+  const kebabizedModuleName = name
+    .split('/')
+    .map((part) => stringUtil.dasherize(part))
+    .join('-');
+  return kebabizedModuleName;
+};
+
+const getFolderizedModuleName = (name) => {
+  const folderizedModuleName = name
+    .split('/')
+    .map((part) => stringUtil.dasherize(part).toUpperCase())
+    .join(' > ');
+  return folderizedModuleName;
+};
+
+const getRoutedModuleName = (name) => {
+  const routedModuleName = name
+    .split('/')
+    .map((part) => stringUtil.dasherize(part))
+    .join('.');
+  return routedModuleName;
+};
+
+const getDummyCSSFileName = (name) => {
+  const parts = name.split('/');
+  const fileName = `db-${parts.pop()}`;
+  return `${parts.concat([fileName]).join('/')}`;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -40,7 +40,6 @@
     "ember-cli-babel": "^7.26.11",
     "ember-cli-htmlbars": "^6.0.1",
     "ember-cli-sass": "^10.0.1",
-    "ember-focus-trap": "^1.0.1",
     "ember-keyboard": "^8.1.0",
     "ember-named-blocks-polyfill": "^0.2.5",
     "sass": "^1.43.4"
@@ -51,7 +50,7 @@
     "@embroider/test-setup": "^1.5.0",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
-    "@percy/cli": "^1.0.1",
+    "@percy/cli": "^1.2.1",
     "@percy/ember": "^3.0.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",