"Dropdown" component - Add support for "LinkToExternal" engine component (08)

packages/components/addon/components/hds/dropdown/index.hbs

@@ -2,8 +2,8 @@
   <:toggle as |t|>
     {{yield
       (hash
-        ToggleButton=(component "hds/dropdown/toggle-button" isOpen=t.isActive onClick=t.onClickToggle)
-        ToggleIcon=(component "hds/dropdown/toggle-icon" isOpen=t.isActive onClick=t.onClickToggle)
+        ToggleButton=(component "hds/dropdown/toggle/button" isOpen=t.isActive onClick=t.onClickToggle)
+        ToggleIcon=(component "hds/dropdown/toggle/icon" isOpen=t.isActive onClick=t.onClickToggle)
       )
     }}
   </:toggle>

packages/components/addon/components/hds/dropdown/list-item/interactive.hbs

@@ -1,23 +1,44 @@
 <li class={{this.classNames}}>
   {{#if @route}}
-    <LinkTo
-      class="{{if @state (concat 'is-' @state)}}"
-      @current-when={{@current-when}}
-      @models={{hds-link-to-models @model @models}}
-      @query={{hds-link-to-query @query}}
-      @replace={{@replace}}
-      @route={{@route}}
-      ...attributes
-    >
-      {{#if @icon}}
-        <div class="hds-dropdown-list-item__interactive-icon">
-          <FlightIcon @name={{this.icon}} @isInlineBlock={{false}} />
+    {{#if @isRouteExternal}}
+      <LinkToExternal
+        class="{{if @state (concat 'is-' @state)}}"
+        @current-when={{@current-when}}
+        @models={{hds-link-to-models @model @models}}
+        @query={{hds-link-to-query @query}}
+        @replace={{@replace}}
+        @route={{@route}}
+        ...attributes
+      >
+        {{#if @icon}}
+          <div class="hds-dropdown-list-item__interactive-icon">
+            <FlightIcon @name={{this.icon}} @isInlineBlock={{false}} />
+          </div>
+        {{/if}}
+        <div class="hds-dropdown-list-item__interactive-text hds-typography-body-200 hds-font-weight-medium">
+          {{this.text}}
         </div>
-      {{/if}}
-      <div class="hds-dropdown-list-item__interactive-text hds-typography-body-200 hds-font-weight-medium">
-        {{this.text}}
-      </div>
-    </LinkTo>
+      </LinkToExternal>
+    {{else}}
+      <LinkTo
+        class="{{if @state (concat 'is-' @state)}}"
+        @current-when={{@current-when}}
+        @models={{hds-link-to-models @model @models}}
+        @query={{hds-link-to-query @query}}
+        @replace={{@replace}}
+        @route={{@route}}
+        ...attributes
+      >
+        {{#if @icon}}
+          <div class="hds-dropdown-list-item__interactive-icon">
+            <FlightIcon @name={{this.icon}} @isInlineBlock={{false}} />
+          </div>
+        {{/if}}
+        <div class="hds-dropdown-list-item__interactive-text hds-typography-body-200 hds-font-weight-medium">
+          {{this.text}}
+        </div>
+      </LinkTo>
+    {{/if}}
   {{else if @href}}
     <a target="_blank" rel="noopener noreferrer" href={{@href}} class="{{if @state (concat 'is-' @state)}}">
       {{#if this.icon}}

packages/components/addon/components/hds/dropdown/toggle-button.js → packages/components/addon/components/hds/dropdown/toggle/button.js

@@ -4,6 +4,8 @@ import { assert } from '@ember/debug';
 export const DEFAULT_COLOR = 'primary';
 export const COLORS = ['primary', 'secondary'];
 
+const NOOP = () => {};
+
 export default class HdsDropdownToggleButtonComponent extends Component {
   /**
    * @param text
@@ -14,7 +16,7 @@ export default class HdsDropdownToggleButtonComponent extends Component {
     let { text } = this.args;
 
     assert(
-      '@text for "Hds::Dropdown::ToggleButton" must have a valid value',
+      '@text for "Hds::Dropdown::Toggle::Button" must have a valid value',
       text !== undefined
     );
 
@@ -31,7 +33,7 @@ export default class HdsDropdownToggleButtonComponent extends Component {
     let { color = DEFAULT_COLOR } = this.args;
 
     assert(
-      `@color for "Hds::Dropdown::ToggleButton" must be one of the following: ${COLORS.join(
+      `@color for "Hds::Dropdown::Toggle::Button" must be one of the following: ${COLORS.join(
         ', '
       )}; received: ${color}`,
       COLORS.includes(color)
@@ -53,7 +55,7 @@ export default class HdsDropdownToggleButtonComponent extends Component {
     if (typeof onClick === 'function') {
       return onClick;
     } else {
-      return () => {};
+      return NOOP;
     }
   }
 

packages/components/addon/components/hds/dropdown/toggle-icon.js → packages/components/addon/components/hds/dropdown/toggle/icon.js

@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 
+const NOOP = () => {};
 export default class HdsDropdownToggleIconComponent extends Component {
   /**
    * @param text
@@ -11,7 +12,7 @@ export default class HdsDropdownToggleIconComponent extends Component {
     let { text } = this.args;
 
     assert(
-      '@text for "Hds::Dropdown::ToggleIcon" must have a valid value',
+      '@text for "Hds::Dropdown::Toggle::Icon" must have a valid value',
       text !== undefined
     );
 
@@ -53,7 +54,7 @@ export default class HdsDropdownToggleIconComponent extends Component {
     if (typeof onClick === 'function') {
       return onClick;
     } else {
-      return () => {};
+      return NOOP;
     }
   }
 

packages/components/app/components/hds/dropdown/toggle-button.js → packages/components/app/components/hds/dropdown/toggle/button.js

@@ -1 +1 @@
-export { default } from '@hashicorp/design-system-components/components/hds/dropdown/toggle-button';
+export { default } from '@hashicorp/design-system-components/components/hds/dropdown/toggle/button';

packages/components/app/components/hds/dropdown/toggle-icon.js → packages/components/app/components/hds/dropdown/toggle/icon.js

@@ -1 +1 @@
-export { default } from '@hashicorp/design-system-components/components/hds/dropdown/toggle-icon';
+export { default } from '@hashicorp/design-system-components/components/hds/dropdown/toggle/icon';

packages/components/package.json

@@ -66,6 +66,7 @@
     "ember-cli-terser": "^4.0.2",
     "ember-concurrency": "^2.2.0",
     "ember-disable-prototype-extensions": "^1.1.3",
+    "ember-engines": "^0.8.20",
     "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.2",
     "ember-maybe-import-regenerator": "^0.1.6",
@@ -93,6 +94,9 @@
     "version-bump-prompt": "^6.1.0",
     "webpack": "^5.61.0"
   },
+  "peerDependencies": {
+    "ember-engines": "^0.8.20"
+  },
   "engines": {
     "node": "12.* || 14.* || >= 16"
   },

packages/components/tests/dummy/app/routes/components/dropdown.js

@@ -1,6 +1,6 @@
 import Route from '@ember/routing/route';
 
-import { COLORS as TOGGLE_BUTTON_COLORS } from '@hashicorp/design-system-components/components/hds/dropdown/toggle-button';
+import { COLORS as TOGGLE_BUTTON_COLORS } from '@hashicorp/design-system-components/components/hds/dropdown/toggle/button';
 import { COLORS as ITEM_INTERACTIVE_COLORS } from '@hashicorp/design-system-components/components/hds/dropdown/list-item/interactive';
 
 export default class ComponentsDropdownRoute extends Route {

packages/components/tests/dummy/app/templates/components/dropdown.hbs

@@ -28,7 +28,7 @@
   <hr />
   <p class="dummy-paragraph" id="toggle-button-api">
     This is the API for the
-    <span class="dummy-code">Dropdown::ToggleButton</span>
+    <span class="dummy-code">Dropdown::Toggle::Button</span>
     component:
   </p>
   <dl class="dummy-component-props" aria-labelledby="toggle-button-api">
@@ -64,7 +64,7 @@
   <hr />
   <p class="dummy-paragraph" id="toggle-icon-api">
     This is the API for the
-    <span class="dummy-code">Dropdown::ToggleIcon</span>
+    <span class="dummy-code">Dropdown::Toggle::Icon</span>
     component:
   </p>
   <dl class="dummy-component-props" aria-labelledby="toggle-icon-api">
@@ -634,49 +634,49 @@
     <div class="hds-dropdown">
       <p class="dummy-paragraph">Color: primary (default)</p>
       <span class="dummy-text-small">State: closed (default)</span>
-      <Hds::Dropdown::ToggleButton @text="Manage sources" />
+      <Hds::Dropdown::Toggle::Button @text="Manage sources" />
       <span class="dummy-text-small">State: opened</span>
-      <Hds::Dropdown::ToggleButton @text="Manage sources" @isOpen={{true}} />
+      <Hds::Dropdown::Toggle::Button @text="Manage sources" @isOpen={{true}} />
     </div>
     <div class="hds-dropdown">
       <p class="dummy-paragraph">Color: secondary</p>
       <span class="dummy-text-small">State: closed (default)</span>
-      <Hds::Dropdown::ToggleButton @text="Manage sources" @color="secondary" />
+      <Hds::Dropdown::Toggle::Button @text="Manage sources" @color="secondary" />
       <span class="dummy-text-small">State: opened</span>
-      <Hds::Dropdown::ToggleButton @text="Manage sources" @isOpen={{true}} @color="secondary" />
+      <Hds::Dropdown::Toggle::Button @text="Manage sources" @isOpen={{true}} @color="secondary" />
     </div>
   </div>
   <h4 class="dummy-h4">ToggleIcon (Default)</h4>
   <div class="dummy-dropdown-toggle-states-grid">
     <div class="hds-dropdown">
       <span class="dummy-text-small">State: closed (default)</span>
-      <Hds::Dropdown::ToggleIcon @text="user menu" />
+      <Hds::Dropdown::Toggle::Icon @text="user menu" />
       <span class="dummy-text-small">State: opened</span>
-      <Hds::Dropdown::ToggleIcon @isOpen={{true}} @text="user menu" />
+      <Hds::Dropdown::Toggle::Icon @isOpen={{true}} @text="user menu" />
     </div>
   </div>
   <h4 class="dummy-h4">ToggleIcon (Overflow)</h4>
   <div class="dummy-dropdown-toggle-states-grid">
     <div class="hds-dropdown">
-      <Hds::Dropdown::ToggleIcon @icon="more-horizontal" @hasChevron={{false}} @text="overflow menu" />
+      <Hds::Dropdown::Toggle::Icon @icon="more-horizontal" @hasChevron={{false}} @text="overflow menu" />
     </div>
   </div>
   <h4 class="dummy-h4">ToggleIcon (Image/Avatar)</h4>
   <div class="dummy-dropdown-toggle-states-grid">
     <div class="hds-dropdown">
       <span class="dummy-text-small">State: closed (default)</span>
-      <Hds::Dropdown::ToggleIcon @imageSrc="/assets/images/avatar.png" @text="user menu" />
+      <Hds::Dropdown::Toggle::Icon @imageSrc="/assets/images/avatar.png" @text="user menu" />
       <span class="dummy-text-small">State: opened</span>
-      <Hds::Dropdown::ToggleIcon @imageSrc="/assets/images/avatar.png" @isOpen={{true}} @text="user menu" />
+      <Hds::Dropdown::Toggle::Icon @imageSrc="/assets/images/avatar.png" @isOpen={{true}} @text="user menu" />
     </div>
   </div>
   <h4 class="dummy-h4">ToggleIcon (Any other icon)</h4>
   <div class="dummy-dropdown-toggle-states-grid">
     <div class="hds-dropdown">
       <span class="dummy-text-small">State: closed (default)</span>
-      <Hds::Dropdown::ToggleIcon @icon="settings" @text="settings menu" />
+      <Hds::Dropdown::Toggle::Icon @icon="settings" @text="settings menu" />
       <span class="dummy-text-small">State: opened</span>
-      <Hds::Dropdown::ToggleIcon @icon="settings" @isOpen={{true}} @text="settings menu" />
+      <Hds::Dropdown::Toggle::Icon @icon="settings" @isOpen={{true}} @text="settings menu" />
     </div>
   </div>
 
@@ -687,7 +687,7 @@
         <div class="hds-dropdown">
           <span class="dummy-text-small">{{color}}/{{state}}:</span>
           <br />
-          <Hds::Dropdown::ToggleButton @text={{capitalize state}} @color={{color}} class="is-{{state}}" />
+          <Hds::Dropdown::Toggle::Button @text={{capitalize state}} @color={{color}} class="is-{{state}}" />
         </div>
       {{/each}}
     {{/each}}
@@ -696,7 +696,7 @@
       <div class="hds-dropdown">
         <span class="dummy-text-small">{{state}}:</span>
         <br />
-        <Hds::Dropdown::ToggleIcon
+        <Hds::Dropdown::Toggle::Icon
           @text="overflow menu"
           @icon="more-horizontal"
           @hasChevron={{false}}
@@ -708,14 +708,14 @@
       <div class="hds-dropdown">
         <span class="dummy-text-small">{{state}}:</span>
         <br />
-        <Hds::Dropdown::ToggleIcon @text={{state}} class="is-{{state}}" />
+        <Hds::Dropdown::Toggle::Icon @text={{state}} class="is-{{state}}" />
       </div>
     {{/each}}
     {{#each @model.TOGGLE_STATES as |state|}}
       <div class="hds-dropdown">
         <span class="dummy-text-small">{{state}}:</span>
         <br />
-        <Hds::Dropdown::ToggleIcon @text={{state}} @imageSrc="/assets/images/avatar.png" class="is-{{state}}" />
+        <Hds::Dropdown::Toggle::Icon @text={{state}} @imageSrc="/assets/images/avatar.png" class="is-{{state}}" />
       </div>
     {{/each}}
   </div>
@@ -738,7 +738,7 @@
         @text="A longer description that could span on multiple lines if the number of characters require more width than the dropdown provides by default."
       />
       <Hds::Dropdown::ListItem::Separator />
-      <Hds::Dropdown::ListItem::Interactive @route="index" @text="Item" />
+      <Hds::Dropdown::ListItem::Interactive @route="index" @isRouteExternal={{true}} @text="Item" />
     </ul>
   </div>
 

packages/components/tests/integration/components/hds/dropdown/toggle-button-test.js → packages/components/tests/integration/components/hds/dropdown/toggle/button-test.js

@@ -4,7 +4,7 @@ import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
 module(
-  'Integration | Component | hds/dropdown/toggle-button',
+  'Integration | Component | hds/dropdown/toggle/button',
   function (hooks) {
     setupRenderingTest(hooks);
 
@@ -15,15 +15,15 @@ module(
     // notice: "toggle-button" is a wrapper around the "hds::button" so we test only very specific things
 
     test('it renders the "toggle-button"', async function (assert) {
-      await render(hbs`<Hds::Dropdown::ToggleButton @text="toggle text" />`);
+      await render(hbs`<Hds::Dropdown::Toggle::Button @text="toggle text" />`);
       assert.dom(this.element).exists();
     });
 
     // TEXT
 
     test('it should render the text passed as @text prop', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ToggleButton @text="toggle text" id="test-toggle-button" />`
+        hbs`<Hds::Dropdown::Toggle::Button @text="toggle text" id="test-toggle-button" />`
       );
       assert.dom('#test-toggle-button').hasText('toggle text');
     });
@@ -32,7 +32,7 @@ module(
 
     test('it should render the chevron "down" by default', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ToggleButton @text="text toggle" id="test-toggle-button" />`
+        hbs`<Hds::Dropdown::Toggle::Button @text="text toggle" id="test-toggle-button" />`
       );
       assert.dom('.flight-icon.flight-icon-chevron-down').exists();
     });
@@ -41,41 +41,41 @@ module(
 
     test('it should render the primary color as the default if no color is declared', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ToggleButton @text="text toggle" id="test-toggle-button" />`
+        hbs`<Hds::Dropdown::Toggle::Button @text="text toggle" id="test-toggle-button" />`
       );
       assert.dom('#test-toggle-button').hasClass('hds-button--color-primary');
     });
     test('it should render the correct CSS color class if the @color prop is declared', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ToggleButton @text="text toggle" @color="secondary" id="test-toggle-button" />`
+        hbs`<Hds::Dropdown::Toggle::Button @text="text toggle" @color="secondary" id="test-toggle-button" />`
       );
       assert.dom('#test-toggle-button').hasClass('hds-button--color-secondary');
     });
 
     // ASSERTIONS
 
     test('it should throw an assertion if @text is not defined', async function (assert) {
-      const errorMessage = `@text for "Hds::Dropdown::ToggleButton" must have a valid value`;
+      const errorMessage = `@text for "Hds::Dropdown::Toggle::Button" must have a valid value`;
       assert.expect(2);
       setupOnerror(function (error) {
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
       await render(
-        hbs`<Hds::Dropdown::ToggleButton id="test-toggle-button" />`
+        hbs`<Hds::Dropdown::Toggle::Button id="test-toggle-button" />`
       );
       assert.throws(function () {
         throw new Error(errorMessage);
       });
     });
     test('it should throw an assertion if an incorrect value for @color is provided', async function (assert) {
       const errorMessage =
-        '@color for "Hds::Dropdown::ToggleButton" must be one of the following: primary, secondary; received: foo';
+        '@color for "Hds::Dropdown::Toggle::Button" must be one of the following: primary, secondary; received: foo';
       assert.expect(2);
       setupOnerror(function (error) {
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
       await render(
-        hbs`<Hds::Dropdown::ToggleButton @text="text toggle" @color="foo" id="test-toggle-button" />`
+        hbs`<Hds::Dropdown::Toggle::Button @text="text toggle" @color="foo" id="test-toggle-button" />`
       );
       assert.throws(function () {
         throw new Error(errorMessage);