@hashicorp/design-system-components 0.0.7 → 0.0.11

package/.github/workflows/ci.yml

@@ -155,8 +155,8 @@ jobs:
           # ember-canary,
           ember-default-with-jquery,
           ember-classic,
-          embroider-safe,
-          embroider-optimized
+          # embroider-safe,
+          # embroider-optimized
         ]
 
     steps:

package/RELEASE.md

@@ -0,0 +1,69 @@
+# How To Release
+
+Whenever there is an update to the components, and these changes have been approved, we need to release them as package to the npm registry.
+
+Please see the instructions in the [CONTRIBUTING](CONTRIBUTING.md) file for more details about how to setup the project and make changes to the code for these packages.
+
+## Bump
+
+The "bump" step increases the _SemVer_ version number in the `package.json` file.
+
+* Make sure your local `main` branch is up to date.
+* Create new custom branch from `main`.
+* `cd /design-system-components`
+* Run `yarn bump` and choose the _SemVer_ version as agreed upon on the previous PR.
+  * _The `bump` command is interactive, you can move up and down with the keyboard, choose one option, and then hit "enter": the tool will automatically update the version in the `package.json` file for you._
+* Check the `git diff` for the project, you should see only the `package.json` file changed (with the new version).
+* Commit, push, open a pull request, and wait for approval.
+
+Once the PR has been approved and merged, you can finally move to the next step, the actual release.
+
+## Release
+
+The "release" step publishes the package on the npm registry, using the version declared in the `package.json` file, and [tags](https://www.atlassian.com/git/tutorials/inspecting-a-repository/git-tag) that specific release on git.
+
+_**IMPORTANT**: Once released a package on the public registry, you can't revert the changes: the only solution is to deprecate the package (this will hide it from the public, but remains there). If you need to do some tests, use a **local** package registry (see below), don't test directly in production!_
+
+* Make sure your local `main` branch is up to date.
+* You will need a company-approved 2FA-enabled account on npm to publish (see [npm 2FA docs](https://docs.npmjs.com/configuring-two-factor-authentication) for more info).
+* `cd /design-system-components`
+* `yarn release`
+* Check the git diff, you should not see any change.
+
+**Notice**: this action will automatically:
+
+* publish the new version of the package on the [NPM registry](https://www.npmjs.com/) using the current _SemVer_ version declared in the `package.json` file (the one previously chosen in the `bump` step).
+* tag the current last commit in the `main` branch and push the tag to the git origin
+
+At this point check on npm that the package ([@hashicorp/design-system-components](https://www.npmjs.com/package/@hashicorp/design-system-components) has been successfully published, and if it's so... well done! You just published your new package 🎉.
+
+🚨 **DON'T FORGET**:
+
+You need to communicate to the product teams that are consuming the components!
+
+## Using a local NPM registry for testing
+
+To test the release of packages without actually polluting the real/production npm registry, you can setup a local private registry using [Verdaccio](https://verdaccio.org/docs/what-is-verdaccio), an open source solution, very easy to setup and use.
+
+You can follow [the instructions here](https://verdaccio.org/docs/installation), but essentially here is what you have to:
+
+* install the package: `npm install -g verdaccio` - this will install it globally
+* launch the service: `verdaccio` - this will serve a web frontend to the registry at the URL [http://localhost:4873/](http://localhost:4873/)
+* add a user to the registry: `npm adduser --registry http://localhost:4873` - this will ask you for a username/password/email, I suggest you use test/test/test@test.com because is only a local instance. This will also authenticate you with the registry so you don't need to login when you publish.
+
+Now you need to add this entry in the `package.json` file of the bundle you want to publish on your local registry:
+
+```json
+"publishConfig": {
+    "registry": "http://localhost:4873"
+},
+```
+
+This will make sure the package is published on Verdaccio. Once the package is published, the web page will be available at at [http://localhost:4873/](http://localhost:4873/). It will show you all the packages' details, and if needed you can download the tarballs to check their content.
+
+Once you've completed testing the package locally:
+
+1. remove verdaccio via `npm uninstall -g verdaccio`
+2. remove the files it created with `rm -fr ~/.local/share/verdaccio && rm -fr .config/verdaccio`
+
+This same command can be used to cleanup the entire data storage of Verdaccio and start from scratch (no need to reinstall, only cleanup the data).

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

@@ -1,14 +1,16 @@
-<div class="hds-badge {{this.sizeClass}} {{this.typeClass}} {{this.colorClass}}" ...attributes>
+<div 
+  class="hds-badge {{this.sizeClass}} {{this.typeClass}} {{this.colorClass}}"
+  ...attributes>
   {{#if @icon}}
     <div class="hds-badge__icon">
       <FlightIcon @name={{this.icon}} @size="16" @stretched="true" />
     </div>
   {{/if}}
-  {{#if @text}}
-    <div class="hds-badge__text">
-      {{@text}}
-    </div>
+  {{#if this.isIconOnly}}
+    <span class="sr-only">{{this.text}}</span>
   {{else}}
-    <span class="sr-only">{{@srOnlyText}}</span>
+    <div class="hds-badge__text">
+      {{this.text}}
+    </div>  
   {{/if}}
 </div>

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

@@ -27,14 +27,12 @@ export default class HdsBadgeIndexComponent extends Component {
   get size() {
     let { size = DEFAULT_SIZE } = this.args;
 
-    if (size) {
-      assert(
-        `@size for "Hds::Badge" must be one of the following: ${SIZES.join(
-          ', '
-        )}, received: ${size}`,
-        SIZES.includes(size)
-      );
-    }
+    assert(
+      `@size for "Hds::Badge" must be one of the following: ${SIZES.join(
+        ', '
+      )}, received: ${size}`,
+      SIZES.includes(size)
+    );
 
     return size;
   }
@@ -59,14 +57,12 @@ export default class HdsBadgeIndexComponent extends Component {
   get type() {
     let { type = DEFAULT_TYPE } = this.args;
 
-    if (type) {
-      assert(
-        `@type for "Hds::Badge" must be one of the following: ${TYPES.join(
-          ', '
-        )}, received: ${type}`,
-        TYPES.includes(type)
-      );
-    }
+    assert(
+      `@type for "Hds::Badge" must be one of the following: ${TYPES.join(
+        ', '
+      )}, received: ${type}`,
+      TYPES.includes(type)
+    );
 
     return type;
   }
@@ -91,14 +87,12 @@ export default class HdsBadgeIndexComponent extends Component {
   get color() {
     let { color = DEFAULT_COLOR } = this.args;
 
-    if (color) {
-      assert(
-        `@color for "Hds::Badge" must be one of the following: ${COLORS.join(
-          ', '
-        )}, received: ${color}`,
-        COLORS.includes(color)
-      );
-    }
+    assert(
+      `@color for "Hds::Badge" must be one of the following: ${COLORS.join(
+        ', '
+      )}, received: ${color}`,
+      COLORS.includes(color)
+    );
 
     return color;
   }
@@ -112,6 +106,22 @@ export default class HdsBadgeIndexComponent extends Component {
     return `hds-badge--color-${this.color}`;
   }
 
+  /**
+   * @param text
+   * @type {string}
+   * @description The text of the badge. If `isIconOnly` is set to `true`, the text will be visually hidden but still available to assistive technology. If no text value is defined, an error will be thrown.
+   */
+  get text() {
+    let { text } = this.args;
+
+    assert(
+      '@text for "Hds::Badge" must have a valid value',
+      text !== undefined
+    );
+
+    return text;
+  }
+
   /**
    * Sets the icon name if there is one
    *
@@ -122,4 +132,17 @@ export default class HdsBadgeIndexComponent extends Component {
   get icon() {
     return this.args.icon ?? null;
   }
+
+  /**
+   * @param isIconOnly
+   * @type {boolean}
+   * @default false
+   * @description Indicates if the badge will only contain an icon; component will also ensure that accessible text is still applied to the component.
+   */
+  get isIconOnly() {
+    if (this.icon) {
+      return this.args.isIconOnly ?? false;
+    }
+    return false;
+  }
 }

package/addon/components/hds/badge-count/index.js

@@ -20,14 +20,12 @@ export default class HdsBadgeCountIndexComponent extends Component {
   get size() {
     let { size = DEFAULT_SIZE } = this.args;
 
-    if (size) {
-      assert(
-        `@size for "Hds::BadgeCount" must be one of the following: ${SIZES.join(
-          ', '
-        )}, received: ${size}`,
-        SIZES.includes(size)
-      );
-    }
+    assert(
+      `@size for "Hds::BadgeCount" must be one of the following: ${SIZES.join(
+        ', '
+      )}, received: ${size}`,
+      SIZES.includes(size)
+    );
 
     return size;
   }
@@ -52,14 +50,12 @@ export default class HdsBadgeCountIndexComponent extends Component {
   get type() {
     let { type = DEFAULT_TYPE } = this.args;
 
-    if (type) {
-      assert(
-        `@type for "Hds::BadgeCount" must be one of the following: ${TYPES.join(
-          ', '
-        )}, received: ${type}`,
-        TYPES.includes(type)
-      );
-    }
+    assert(
+      `@type for "Hds::BadgeCount" must be one of the following: ${TYPES.join(
+        ', '
+      )}, received: ${type}`,
+      TYPES.includes(type)
+    );
 
     return type;
   }
@@ -84,14 +80,12 @@ export default class HdsBadgeCountIndexComponent extends Component {
   get color() {
     let { color = DEFAULT_COLOR } = this.args;
 
-    if (color) {
-      assert(
-        `@color for "Hds::BadgeCount" must be one of the following: ${COLORS.join(
-          ', '
-        )}, received: ${color}`,
-        COLORS.includes(color)
-      );
-    }
+    assert(
+      `@color for "Hds::BadgeCount" must be one of the following: ${COLORS.join(
+        ', '
+      )}, received: ${color}`,
+      COLORS.includes(color)
+    );
 
     return color;
   }

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

@@ -0,0 +1,35 @@
+<button 
+  class="hds-button {{this.sizeClass}} {{this.colorClass}} {{this.widthClass}}"
+  ...attributes
+  aria-label={{if this.isIconOnly this.text null}} 
+  type={{this.type}}
+  disabled={{if this.isDisabled "disabled" null}}
+>
+  {{#if this.isIconOnly}}
+    <div class="hds-button__icon">
+      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
+    </div>
+  {{else}}
+    {{#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}}
+  {{/if}}
+</button>

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

@@ -0,0 +1,196 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const DEFAULT_SIZE = 'medium';
+export const DEFAULT_COLOR = 'primary';
+export const DEFAULT_TYPE = 'button';
+export const DEFAULT_ICONPOSITION = 'leading';
+export const SIZES = ['small', 'medium', 'large'];
+export const COLORS = ['primary', 'secondary', 'destructive'];
+export const TYPES = ['button', 'submit', 'reset'];
+export const ICONPOSITIONS = ['leading', 'trailing'];
+
+export default class HdsButtonIndexComponent extends Component {
+  /**
+   * @param text
+   * @type {string}
+   * @description The text of the button or value of `aria-label` if `isIconOnly` is set to `true`. If no text value is defined an error will be thrown.
+   */
+  get text() {
+    let { text } = this.args;
+
+    assert(
+      '@text for "Hds::Button" must have a valid value',
+      text !== undefined
+    );
+
+    return text;
+  }
+
+  /**
+   * @param size
+   * @type {string}
+   * @default medium
+   * @description The size of the button; acceptable values are `small`, `medium`, and `large`
+   */
+  get size() {
+    let { size = DEFAULT_SIZE } = this.args;
+
+    assert(
+      `@size for "Hds::Button" must be one of the following: ${SIZES.join(
+        ', '
+      )}; received: ${size}`,
+      SIZES.includes(size)
+    );
+
+    return size;
+  }
+
+  /**
+   * @param sizeClass
+   * @type {string}
+   * @default hds-button--size-medium
+   * @description Determines the CSS class that the button should have, based on the size value; automatically set.
+   */
+  get sizeClass() {
+    return `hds-button--size-${this.size}`;
+  }
+
+  /**
+   * @param color
+   * @type {string}
+   * @default primary
+   * @description Determines the color of button to be used; acceptable values are `primary`, `secondary`, and `destructive`
+   */
+  get color() {
+    let { color = DEFAULT_COLOR } = this.args;
+
+    assert(
+      `@color for "Hds::Button" must be one of the following: ${COLORS.join(
+        ', '
+      )}; received: ${color}`,
+      COLORS.includes(color)
+    );
+
+    return color;
+  }
+
+  /**
+   * @param colorClass
+   * @type {string}
+   * @default hds-button--color-primary
+   * @description Determines the CSS class that the button should have, based on the color value; automatically set
+   */
+  get colorClass() {
+    return `hds-button--color-${this.color}`;
+  }
+
+  /**
+   * @param icon
+   * @type {string}
+   * @default null
+   * @description The name of the icon to be used.
+   */
+  get icon() {
+    return this.args.icon ?? null;
+  }
+
+  /**
+   * @param isIconOnly
+   * @type {boolean}
+   * @default false
+   * @description Indicates if the button will only contain an icon; component will also ensure that accessible text is still applied to the component.
+   */
+  get isIconOnly() {
+    if (this.icon) {
+      return this.args.isIconOnly ?? false;
+    }
+    return false;
+  }
+
+  /**
+   * @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::Button" 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 type
+   * @type {string}
+   * @default button
+   * @description The value for the button's `type` attribute. Acceptable values are `button`, `submit`, and `reset`
+   */
+  get type() {
+    let { type = DEFAULT_TYPE } = this.args;
+
+    assert(
+      `@type for "Hds::Button" must be one of the following: ${TYPES.join(
+        ', '
+      )}; received: ${type}`,
+      TYPES.includes(type)
+    );
+
+    return type;
+  }
+
+  /**
+   * @param isFullWidth
+   * @type {boolean}
+   * @default false
+   * @description Indicates that a button should take up the full width of the parent container. The default is false.
+   */
+  get isFullWidth() {
+    return this.args.isFullWidth ?? false;
+  }
+
+  /**
+   * @param widthClass
+   * @type {string|null}
+   * @default null
+   * @description Determines if the full-width class should be applied to the component. This is set automatically based on the value of `isFullWidth`.
+   */
+  get widthClass() {
+    if (this.isFullWidth === true) {
+      return 'hds-button--width-full';
+    } else {
+      return null;
+    }
+  }
+
+  /**
+   * @param isDisabled
+   * @type {boolean}
+   * @default null
+   * @description Sets the native HTML attribute `disabled` on the button element. Default is null (doesn't render the attribute).
+   */
+  get isDisabled() {
+    return this.args.isDisabled ?? null;
+  }
+}

package/addon/components/hds/card/container.js

@@ -20,14 +20,12 @@ export default class HdsCardContainerComponent extends Component {
   get level() {
     let { level = DEFAULT_LEVEL } = this.args;
 
-    if (level) {
-      assert(
-        `@level for "Hds::CardContainer" must be one of the following: ${LEVELS.join(
-          ', '
-        )}, received: ${level}`,
-        LEVELS.includes(level)
-      );
-    }
+    assert(
+      `@level for "Hds::CardContainer" must be one of the following: ${LEVELS.join(
+        ', '
+      )}, received: ${level}`,
+      LEVELS.includes(level)
+    );
 
     return level;
   }
@@ -52,14 +50,12 @@ export default class HdsCardContainerComponent extends Component {
   get background() {
     let { background = DEFAULT_BACKGROUND } = this.args;
 
-    if (background) {
-      assert(
-        `@background for "Hds::CardContainer" must be one of the following: ${BACKGROUNDS.join(
-          ', '
-        )}, received: ${background}`,
-        BACKGROUNDS.includes(background)
-      );
-    }
+    assert(
+      `@background for "Hds::CardContainer" must be one of the following: ${BACKGROUNDS.join(
+        ', '
+      )}, received: ${background}`,
+      BACKGROUNDS.includes(background)
+    );
 
     return background;
   }
@@ -93,14 +89,12 @@ export default class HdsCardContainerComponent extends Component {
   get overflow() {
     let { overflow = DEFAULT_OVERFLOW } = this.args;
 
-    if (overflow) {
-      assert(
-        `@overflow for "Hds::CardContainer" must be one of the following: ${OVERFLOWS.join(
-          ', '
-        )}, received: ${overflow}`,
-        OVERFLOWS.includes(overflow)
-      );
-    }
+    assert(
+      `@overflow for "Hds::CardContainer" must be one of the following: ${OVERFLOWS.join(
+        ', '
+      )}, received: ${overflow}`,
+      OVERFLOWS.includes(overflow)
+    );
 
     return overflow;
   }

package/addon/components/hds/icon-tile/index.hbs

@@ -0,0 +1,62 @@
+<div class="hds-icon-tile {{this.entityClass}} {{this.sizeClass}} {{this.colorClass}}" aria-hidden="true" ...attributes>
+  {{#if @icon}}
+    <div class="hds-icon-tile__icon">
+      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched="true" />
+    </div>
+  {{/if}}
+  {{#if @logo}}
+      <div class="hds-icon-tile__logo">
+          {{!-- TODO! this will be replaced later with something else (TBD how we deliver these logos as design system) --}}
+        <svg width="100%" height="100%" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+          {{#if (eq this.logo 'boundary')}}
+            <path d="M44.83 125.83V117.56H62.01V112.45H53.68V104.13H93.01L74.74 72.49L93.01 40.84H52.7V84.73H31V19.15H105.67L118.13 40.73L99.8 72.49L118.5 104.89L106.41 125.83H44.83Z" fill="currentColor"/>
+            <path d="M48.1696 104.13H39.8496V112.45H48.1696V104.13Z" fill="currentColor"/>
+            <path d="M39.32 117.5H31V125.82H39.32V117.5Z" fill="currentColor"/>
+          {{/if}}
+          {{#if (eq this.logo 'consul')}}
+            <path d="M72.5298 126.56C63.6148 126.568 54.8328 124.399 46.946 120.243C39.0592 116.087 32.306 110.068 27.2724 102.71C22.2389 95.3524 19.0771 86.8772 18.0616 78.0203C17.0462 69.1634 18.2076 60.1924 21.4452 51.8862C24.6828 43.5799 29.8987 36.1893 36.6401 30.3559C43.3815 24.5225 51.4448 20.4225 60.13 18.4118C68.8153 16.4012 77.86 16.5406 86.4791 18.818C95.0982 21.0954 103.031 25.4419 109.59 31.4803V31.4803L96.5898 45.0804C91.4215 40.412 85.0101 37.343 78.1326 36.2453C71.2551 35.1476 64.2069 36.0684 57.8422 38.8961C51.4776 41.7238 46.0698 46.3369 42.2743 52.1764C38.4789 58.0158 36.4587 64.8308 36.4587 71.7953C36.4587 78.7599 38.4789 85.5749 42.2743 91.4143C46.0698 97.2538 51.4776 101.867 57.8422 104.695C64.2069 107.522 71.2551 108.443 78.1326 107.345C85.0101 106.248 91.4215 103.179 96.5898 98.5104L109.59 112.11C99.4912 121.413 86.26 126.572 72.5298 126.56V126.56Z" fill="currentColor"/>
+            <path d="M116.61 99.1604C115.722 99.1604 114.854 98.897 114.116 98.4037C113.377 97.9103 112.802 97.2091 112.462 96.3886C112.122 95.5682 112.033 94.6654 112.206 93.7944C112.38 92.9234 112.807 92.1234 113.435 91.4955C114.063 90.8675 114.863 90.4399 115.734 90.2666C116.605 90.0934 117.508 90.1823 118.328 90.5221C119.149 90.862 119.85 91.4375 120.343 92.1759C120.837 92.9142 121.1 93.7823 121.1 94.6704C121.097 95.8604 120.624 97.0009 119.782 97.8424C118.941 98.6838 117.8 99.1577 116.61 99.1604Z" fill="currentColor"/>
+            <path d="M72.1798 83.6504C69.8296 83.6603 67.5293 82.9723 65.5705 81.6736C63.6117 80.3749 62.0826 78.5239 61.1768 76.3553C60.271 74.1866 60.0294 71.7979 60.4825 69.4918C60.9357 67.1857 62.0632 65.066 63.7222 63.4013C65.3813 61.7366 67.4972 60.6019 69.8017 60.141C72.1063 59.6801 74.4958 59.9136 76.6675 60.8121C78.8392 61.7105 80.6953 63.2335 82.0007 65.1879C83.306 67.1423 84.0017 69.4401 83.9998 71.7904C83.9945 74.9273 82.7488 77.9348 80.5344 80.1567C78.32 82.3786 75.3167 83.6345 72.1798 83.6504Z" fill="currentColor"/>
+            <path d="M121.76 83.8604C120.871 83.8604 120.003 83.597 119.265 83.1037C118.527 82.6103 117.951 81.9091 117.611 81.0886C117.271 80.2682 117.183 79.3654 117.356 78.4944C117.529 77.6234 117.957 76.8234 118.585 76.1955C119.213 75.5675 120.013 75.1399 120.884 74.9666C121.755 74.7934 122.657 74.8823 123.478 75.2221C124.298 75.562 124.999 76.1375 125.493 76.8759C125.986 77.6142 126.25 78.4823 126.25 79.3704C126.247 80.5604 125.773 81.7009 124.932 82.5424C124.09 83.3838 122.95 83.8577 121.76 83.8604Z" fill="currentColor"/>
+            <path d="M108.41 83.3004C107.519 83.3003 106.649 83.0357 105.91 82.5401C105.171 82.0444 104.595 81.3402 104.257 80.5169C103.919 79.6935 103.833 78.7882 104.01 77.9159C104.187 77.0435 104.62 76.2436 105.253 75.6177C105.886 74.9918 106.69 74.5682 107.565 74.4006C108.439 74.2331 109.343 74.3292 110.163 74.6767C110.982 75.0242 111.68 75.6075 112.167 76.3524C112.655 77.0973 112.91 77.9703 112.9 78.8604C112.886 80.0425 112.408 81.1718 111.567 82.003C110.726 82.8343 109.592 83.3004 108.41 83.3004Z" fill="currentColor"/>
+            <path d="M121.76 68.7304C120.871 68.7304 120.003 68.467 119.265 67.9737C118.527 67.4803 117.951 66.7791 117.611 65.9586C117.271 65.1382 117.183 64.2354 117.356 63.3644C117.529 62.4934 117.957 61.6934 118.585 61.0655C119.213 60.4375 120.013 60.0099 120.884 59.8366C121.755 59.6634 122.657 59.7523 123.478 60.0922C124.298 60.432 124.999 61.0075 125.493 61.7459C125.986 62.4842 126.25 63.3523 126.25 64.2404C126.247 65.4304 125.773 66.5709 124.932 67.4124C124.09 68.2538 122.95 68.7277 121.76 68.7304Z" fill="currentColor"/>
+            <path d="M108.41 69.2404C107.522 69.2404 106.654 68.977 105.915 68.4837C105.177 67.9903 104.602 67.2891 104.262 66.4686C103.922 65.6482 103.833 64.7454 104.006 63.8744C104.179 63.0034 104.607 62.2034 105.235 61.5755C105.863 60.9475 106.663 60.5199 107.534 60.3467C108.405 60.1734 109.308 60.2623 110.128 60.6022C110.949 60.942 111.65 61.5175 112.143 62.2559C112.637 62.9942 112.9 63.8623 112.9 64.7504C112.9 65.9412 112.427 67.0832 111.585 67.9253C110.743 68.7673 109.601 69.2404 108.41 69.2404Z" fill="currentColor"/>
+            <path d="M116.87 53.6304C115.982 53.6324 115.113 53.3707 114.373 52.8785C113.633 52.3864 113.056 51.6858 112.715 50.8656C112.373 50.0453 112.283 49.1422 112.455 48.2706C112.627 47.3989 113.054 46.598 113.682 45.969C114.309 45.3401 115.109 44.9115 115.98 44.7374C116.852 44.5633 117.755 44.6517 118.576 44.9912C119.397 45.3308 120.099 45.9062 120.593 46.6448C121.087 47.3834 121.35 48.2519 121.35 49.1404C121.35 50.3295 120.878 51.47 120.039 52.3118C119.199 53.1535 118.059 53.6277 116.87 53.6304Z" fill="currentColor"/>
+          {{/if}}
+          {{#if (eq this.logo 'nomad')}}
+            <path d="M71.9995 14L21.7695 43V101L71.9995 130L122.23 101V43L71.9995 14ZM94.3795 77.78L80.9995 85.51L64.8295 76.71V95.19L49.6295 104.83V66.19L61.6895 58.81L78.4195 67.63V48.76L94.4195 39.17L94.3795 77.78Z" fill="currentColor"/>
+          {{/if}}
+          {{#if (eq this.logo 'packer')}}
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M35.0898 26.38L74.2198 49V132.38L35.0898 109.76V26.38Z" fill="currentColor"/>
+            <path d="M93.5996 36.13L51.0596 11.62V28.62L79.9996 45.34V96.39L93.6096 104.21C102.03 109.07 108.92 106.21 108.92 97.74V60.28C108.91 51.86 102 41 93.5996 36.13Z" fill="currentColor"/>
+          {{/if}}
+          {{#if (eq this.logo 'terraform')}}
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M55.52 32.97L88.48 51.99V90.05L55.52 71.02V32.97Z" fill="currentColor"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M92.0898 51.99V90.05L125.04 71.02V32.97L92.0898 51.99Z" fill="currentColor"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M18.96 11.73V49.78L51.91 68.81V30.76L18.96 11.73Z" fill="currentColor"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M55.52 113.24L88.47 132.27V94.47V94.22L55.52 75.19V113.24Z" fill="currentColor"/>
+          {{/if}}
+          {{#if (eq this.logo 'vagrant')}}
+            {{!-- notice: this is the only one that has specific/fixed fill colors; at the moment we have to treat it as an exception --}}
+            <path d="M110.77 17.5498L86.6801 31.4598V39.9998L72.0001 74.5198L57.3201 39.9998V31.4598L33.2301 17.5498L18.5801 26.0198V35.8498L51.2101 115.77L72.0001 127.77L92.7901 115.77L125.42 35.8498V26.0198L110.77 17.5498Z" fill="#1868F2"/>
+            <path d="M125.42 26.0195L101.33 39.9195V48.4695L81.77 92.1895L72 97.8295V127.77L92.79 115.77L125.42 35.8495V26.0195Z" fill="#0850C5"/>
+            <path d="M57.3202 40V31.46L42.6602 39.92V48.47L62.2302 92.19L72.0002 86.55V74.52L57.3202 40Z" fill="#0850C5"/>
+          {{/if}}
+          {{#if (eq this.logo 'vault')}}
+            <path d="M16.8809 21.15L71.8009 131.4L127.121 21.15H16.8809ZM78.3409 43.27H84.7309V49.67H78.3409V43.27ZM65.6109 68.84H59.2209V62.45H65.6109V68.84ZM65.6109 59.25H59.2209V52.86H65.6109V59.25ZM65.6109 49.67H59.2209V43.27H65.6109V49.67ZM75.2009 78.43H68.8009V72H75.2009V78.43ZM75.2009 68.84H68.8009V62.45H75.2009V68.84ZM75.2009 59.25H68.8009V52.86H75.2009V59.25ZM75.2009 49.67H68.8009V43.27H75.2009V49.67ZM78.3409 52.86H84.7309V59.25H78.3409V52.86ZM78.3409 68.86V62.45H84.7309V68.84L78.3409 68.86Z" fill="currentColor"/>
+          {{/if}}
+          {{#if (eq this.logo 'waypoint')}}
+            <path d="M143.23 27.66L125.44 58.47L107.65 27.66H143.23Z" fill="currentColor"/>
+            <path d="M48.2595 48.23H36.3895L66.0595 99.63L54.1895 120.19L0.769531 27.66H60.1295L89.8095 79.07L95.7395 68.79L71.9995 27.66H95.7395L107.62 48.23L119.49 68.79L89.8095 120.19L48.2595 48.23Z" fill="currentColor"/>
+          {{/if}}
+        </svg>
+      </div>
+  {{/if}}
+  {{#if this.iconSecondary}}
+    <div class="hds-icon-tile__extra">
+      <div class="hds-icon-tile__extra-icon">
+        <FlightIcon @name={{this.iconSecondary}} @size="16" @stretched="true" />
+      </div>
+    </div>
+  {{/if}}
+</div>