@hashicorp/design-system-components 0.11.0 → 0.12.0

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.12.0",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -40,10 +40,10 @@
     "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"
+    "sass": "^1.43.4",
+    "sinon": "^14.0.0"
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
@@ -51,7 +51,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",

package/addon/components/hds/link/cta.hbs

@@ -1,50 +0,0 @@
-{{!
-//  ██     ██  █████  ██████  ███    ██ ██ ███    ██  ██████
-//  ██     ██ ██   ██ ██   ██ ████   ██ ██ ████   ██ ██
-//  ██  █  ██ ███████ ██████  ██ ██  ██ ██ ██ ██  ██ ██   ███
-//  ██ ███ ██ ██   ██ ██   ██ ██  ██ ██ ██ ██  ██ ██ ██    ██
-//   ███ ███  ██   ██ ██   ██ ██   ████ ██ ██   ████  ██████
-//
-// Notice: in this component we're using directly the styles from the `Hds::Button` component
-// using the `hds-button` class names (and adding a specialized class for the "cta", see below)
-// If you need to change the styling of the `Button` component, remember that this will impact also
-// this component too.
-// If instead you need to change only the styling of the `CTA` component, you can do it
-// in the CSS file using the specialized class declared there.
-// This is NOT a standard approach that we use in the HDS design system implementation, but it's been
-// the least worst option we could find to solve the problem of sharing the exact same style of the
-// `Button (primary)` with other components.
-}}
-
-{{! template-lint-disable link-href-attributes }}
-{{! we can disable this linting rule because the developer will add the html attribute themselves }}
-<a
-  class={{this.classNames}}
-  target="_blank"
-  rel="noopener noreferrer"
-  ...attributes
-  {{did-insert this.didInsert}}
-  {{on-key "Space" this.onKeySpace}}
->
-  {{#if this.icon}}
-    {{#if (eq this.iconPosition "leading")}}
-      <div class="hds-button__icon">
-        <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-      </div>
-      <div class="hds-button__text">
-        {{this.text}}
-      </div>
-    {{else}}
-      <div class="hds-button__text">
-        {{this.text}}
-      </div>
-      <div class="hds-button__icon">
-        <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-      </div>
-    {{/if}}
-  {{else}}
-    <div class="hds-button__text">
-      {{this.text}}
-    </div>
-  {{/if}}
-</a>

package/addon/components/hds/link/cta.js

@@ -1,150 +0,0 @@
-//  ██     ██  █████  ██████  ███    ██ ██ ███    ██  ██████
-//  ██     ██ ██   ██ ██   ██ ████   ██ ██ ████   ██ ██
-//  ██  █  ██ ███████ ██████  ██ ██  ██ ██ ██ ██  ██ ██   ███
-//  ██ ███ ██ ██   ██ ██   ██ ██  ██ ██ ██ ██  ██ ██ ██    ██
-//   ███ ███  ██   ██ ██   ██ ██   ████ ██ ██   ████  ██████
-//
-// Notice: in this component we're using directly the styles from the `Hds::Button` component
-// using the `hds-button` class names (and adding a specialized class for the "cta", see below)
-// If you need to change the styling of the `Button` component, remember that this will impact also
-// this component too.
-// If instead you need to change only the styling of the `CTA` component, you can do it
-// in the CSS file using the specialized class declared there.
-// This is NOT a standard approach that we use in the HDS design system implementation, but it's been
-// the least worst option we could find to solve the problem of sharing the exact same style of the
-// `Button (primary)` with other components.
-
-import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
-import { action } from '@ember/object';
-
-export const DEFAULT_SIZE = 'medium';
-export const DEFAULT_ICONPOSITION = 'leading';
-export const SIZES = ['small', 'medium', 'large'];
-export const ICONPOSITIONS = ['leading', 'trailing'];
-
-export default class HdsLinkCtaComponent extends Component {
-  /**
-   * @param text
-   * @type {string}
-   * @description The text of the component. If no text value is defined an error will be thrown.
-   */
-  get text() {
-    let { text } = this.args;
-
-    assert(
-      '@text for "Hds::Link::Cta" must have a valid value',
-      text !== undefined
-    );
-
-    return text;
-  }
-
-  /**
-   * @param size
-   * @type {string}
-   * @default medium
-   * @description The size of the component; acceptable values are `small`, `medium`, and `large`
-   */
-  get size() {
-    let { size = DEFAULT_SIZE } = this.args;
-
-    assert(
-      `@size for "Hds::Link::Cta" must be one of the following: ${SIZES.join(
-        ', '
-      )}; received: ${size}`,
-      SIZES.includes(size)
-    );
-
-    return size;
-  }
-
-  /**
-   * @param icon
-   * @type {string}
-   * @default null
-   * @description The name of the icon to be used.
-   */
-  get icon() {
-    return this.args.icon ?? null;
-  }
-
-  /**
-   * @param iconPosition
-   * @type {string}
-   * @default leading
-   * @description Positions the icon before or after the text; allowed values are `leading` or `trailing`
-   */
-  get iconPosition() {
-    let { iconPosition = DEFAULT_ICONPOSITION } = this.args;
-
-    assert(
-      `@iconPosition for "Hds::Link::Cta" must be one of the following: ${ICONPOSITIONS.join(
-        ', '
-      )}; received: ${iconPosition}`,
-      ICONPOSITIONS.includes(iconPosition)
-    );
-
-    return iconPosition;
-  }
-
-  /**
-   * @param iconSize
-   * @type {string}
-   * @default 16
-   * @description ensures that the correct icon size is used. Automatically calculated.
-   */
-  get iconSize() {
-    if (this.args.size === 'large') {
-      return '24';
-    } else {
-      return '16';
-    }
-  }
-
-  /**
-   * @param isFullWidth
-   * @type {boolean}
-   * @default false
-   * @description Indicates that the component should take up the full width of the parent container. The default is false.
-   */
-  get isFullWidth() {
-    return this.args.isFullWidth ?? false;
-  }
-
-  /**
-   * 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-button',
-      'hds-button--color-primary',
-      'hds-link-cta--inherit-button-styles',
-    ];
-
-    // add a class based on the @size argument
-    classes.push(`hds-button--size-${this.size}`);
-
-    // add a class based on the @isFullWidth argument
-    if (this.isFullWidth) {
-      classes.push('hds-button--width-full');
-    }
-
-    return classes.join(' ');
-  }
-
-  @action
-  didInsert(el) {
-    // we need to register the element to compare it with the one that triggered the "key/space" event
-    this.el = el;
-  }
-
-  @action
-  onKeySpace(event) {
-    if (event.target === this.el) {
-      event.target.click();
-    }
-  }
-}

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

@@ -1,51 +0,0 @@
-{{!
-//  ██     ██  █████  ██████  ███    ██ ██ ███    ██  ██████
-//  ██     ██ ██   ██ ██   ██ ████   ██ ██ ████   ██ ██
-//  ██  █  ██ ███████ ██████  ██ ██  ██ ██ ██ ██  ██ ██   ███
-//  ██ ███ ██ ██   ██ ██   ██ ██  ██ ██ ██ ██  ██ ██ ██    ██
-//   ███ ███  ██   ██ ██   ██ ██   ████ ██ ██   ████  ██████
-//
-// Notice: in this component we're using directly the styles from the `Hds::Button` component
-// using the `hds-button` class names (and adding a specialized class for the "cta", see below)
-// If you need to change the styling of the `Button` component, remember that this will impact also
-// this component too.
-// If instead you need to change only the styling of the `CTA` component, you can do it
-// in the CSS file using the specialized class declared there.
-// This is NOT a standard approach that we use in the HDS design system implementation, but it's been
-// the least worst option we could find to solve the problem of sharing the exact same style of the
-// `Button (primary)` with other components.
-}}
-
-<LinkTo
-  class={{this.classNames}}
-  @current-when={{@current-when}}
-  @models={{hds-link-to-models @model @models}}
-  @query={{hds-link-to-query @query}}
-  @replace={{@replace}}
-  @route={{this.route}}
-  ...attributes
-  {{did-insert this.didInsert}}
-  {{on-key "Space" this.onKeySpace}}
->
-  {{#if this.icon}}
-    {{#if (eq this.iconPosition "leading")}}
-      <div class="hds-button__icon">
-        <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-      </div>
-      <div class="hds-button__text">
-        {{this.text}}
-      </div>
-    {{else}}
-      <div class="hds-button__text">
-        {{this.text}}
-      </div>
-      <div class="hds-button__icon">
-        <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-      </div>
-    {{/if}}
-  {{else}}
-    <div class="hds-button__text">
-      {{this.text}}
-    </div>
-  {{/if}}
-</LinkTo>

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

@@ -1,165 +0,0 @@
-//  ██     ██  █████  ██████  ███    ██ ██ ███    ██  ██████
-//  ██     ██ ██   ██ ██   ██ ████   ██ ██ ████   ██ ██
-//  ██  █  ██ ███████ ██████  ██ ██  ██ ██ ██ ██  ██ ██   ███
-//  ██ ███ ██ ██   ██ ██   ██ ██  ██ ██ ██ ██  ██ ██ ██    ██
-//   ███ ███  ██   ██ ██   ██ ██   ████ ██ ██   ████  ██████
-//
-// Notice: in this component we're using directly the styles from the `Hds::Button` component
-// using the `hds-button` class names (and adding a specialized class for the "cta", see below)
-// If you need to change the styling of the `Button` component, remember that this will impact also
-// this component too.
-// If instead you need to change only the styling of the `CTA` component, you can do it
-// in the CSS file using the specialized class declared there.
-// This is NOT a standard approach that we use in the HDS design system implementation, but it's been
-// the least worst option we could find to solve the problem of sharing the exact same style of the
-// `Button (primary)` with other components.
-
-import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
-import { action } from '@ember/object';
-
-export const DEFAULT_SIZE = 'medium';
-export const DEFAULT_ICONPOSITION = 'leading';
-export const SIZES = ['small', 'medium', 'large'];
-export const ICONPOSITIONS = ['leading', 'trailing'];
-
-export default class HdsLinkToCtaComponent extends Component {
-  /**
-   * @param text
-   * @type {string}
-   * @description The text of the component. If no text value is defined an error will be thrown.
-   */
-  get text() {
-    let { text } = this.args;
-
-    assert(
-      '@text for "Hds::LinkTo::Cta" must have a valid value',
-      text !== undefined
-    );
-
-    return text;
-  }
-
-  /**
-   * @param size
-   * @type {string}
-   * @default medium
-   * @description The size of the component; acceptable values are `small`, `medium`, and `large`
-   */
-  get size() {
-    let { size = DEFAULT_SIZE } = this.args;
-
-    assert(
-      `@size for "Hds::LinkTo::Cta" must be one of the following: ${SIZES.join(
-        ', '
-      )}; received: ${size}`,
-      SIZES.includes(size)
-    );
-
-    return size;
-  }
-
-  /**
-   * @param icon
-   * @type {string}
-   * @default null
-   * @description The name of the icon to be used.
-   */
-  get icon() {
-    return this.args.icon ?? null;
-  }
-
-  /**
-   * @param iconPosition
-   * @type {string}
-   * @default leading
-   * @description Positions the icon before or after the text; allowed values are `leading` or `trailing`
-   */
-  get iconPosition() {
-    let { iconPosition = DEFAULT_ICONPOSITION } = this.args;
-
-    assert(
-      `@iconPosition for "Hds::LinkTo::Cta" must be one of the following: ${ICONPOSITIONS.join(
-        ', '
-      )}; received: ${iconPosition}`,
-      ICONPOSITIONS.includes(iconPosition)
-    );
-
-    return iconPosition;
-  }
-
-  /**
-   * @param iconSize
-   * @type {string}
-   * @default 16
-   * @description ensures that the correct icon size is used. Automatically calculated.
-   */
-  get iconSize() {
-    if (this.args.size === 'large') {
-      return '24';
-    } else {
-      return '16';
-    }
-  }
-
-  /**
-   * @param isFullWidth
-   * @type {boolean}
-   * @default false
-   * @description Indicates that the component should take up the full width of the parent container. The default is false.
-   */
-  get isFullWidth() {
-    return this.args.isFullWidth ?? false;
-  }
-
-  /**
-   * @param route
-   * @type {string|null}
-   * @description Checks to make sure route is defined.
-   */
-  get route() {
-    let { route } = this.args;
-    assert(
-      '@route must be defined for "Hds::LinkTo::Cta"',
-      route !== undefined
-    );
-
-    return route;
-  }
-
-  /**
-   * 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-button',
-      'hds-button--color-primary',
-      'hds-link-cta--inherit-button-styles',
-    ];
-
-    // add a class based on the @size argument
-    classes.push(`hds-button--size-${this.size}`);
-
-    // add a class based on the @isFullWidth argument
-    if (this.isFullWidth) {
-      classes.push('hds-button--width-full');
-    }
-
-    return classes.join(' ');
-  }
-
-  @action
-  didInsert(el) {
-    // we need to register the element to compare it with the one that triggered the "key/space" event
-    this.el = el;
-  }
-
-  @action
-  onKeySpace(event) {
-    if (event.target === this.el) {
-      event.target.click();
-    }
-  }
-}

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

@@ -1,25 +0,0 @@
-<LinkTo
-  class={{this.classNames}}
-  @current-when={{@current-when}}
-  @models={{hds-link-to-models @model @models}}
-  @query={{hds-link-to-query @query}}
-  @replace={{@replace}}
-  @route={{this.route}}
-  ...attributes
->
-  {{#if (eq this.iconPosition "leading")}}
-    <div class="hds-link-standalone__icon">
-      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-    </div>
-    <div class="hds-link-standalone__text">
-      {{this.text}}
-    </div>
-  {{else}}
-    <div class="hds-link-standalone__text">
-      {{this.text}}
-    </div>
-    <div class="hds-link-standalone__icon">
-      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-    </div>
-  {{/if}}
-</LinkTo>