@hashicorp/design-system-components 0.0.12 → 0.0.16

package/.github/ISSUE_TEMPLATE/new-component-quest-issue-engineering-checklist.md

@@ -0,0 +1,78 @@
+---
+name: New Component Quest Issue/Engineering Checklist
+about: 'DS Team: Engineering Checklist for New Components'
+title: "[Quest] New Component: Component Name"
+labels: ''
+assignees: ''
+
+---
+
+This is the quest issue/engineering checklist for the COMPONENT_NAME Component. All new components will have their own feature branch, and any PR that adds an item from the checklist should target the feature branch, and not `main`. 
+
+## Pre-Flight Checklist
+Update this list and these links as appropriate.
+
+- [Component Doc](url_here): This file should exist before any code is written.
+- [FIGMA Design](url_here): Since we are trying to align the component API naming with the same terms used in the Figma file, it is likely useful to have a fairly stable Figma design before we create a component; it should definitely be finalized before the component ships, however. 
+- [Design System Website](https://design-system-website.vercel.app/?path=/story/example-introduction--page) (storybook of storybooks): use for reference, to consider existing features that we might need to replicate in the component.
+
+## Engineering Checklist 
+The engineering checklist has six parts: creating the feature branch, component template, component backing class, component style, tests, and documentation.
+
+### Component Creation
+
+- [ ] create new branch from main for the component.
+- [ ] create new component
+  - `ember generate component hds/COMPONENT_NAME/index --gc` (the component won't need to be invoked with index, it's just to put all the files in the correct place)
+  - if it's a variation on a component, then `hds/COMPONENT_NAME/VARIATION` instead of `index`
+- [ ] **component template**
+  - use semantic HTML
+  - the component should have a css class that is the same as the component (e.g. `hds/button` should have a class name of `hds-button` on the component, and additional CSS classes should start with this same class name.
+  - add `...attributes` unless doing so would be detrimental (e.g., a parent component and child component that both have ...attributes) 
+- [ ] **component class**
+  - use getters (vs template conditionals or constructors, if possible)
+  - write API comments in the JS doc way (copy from an existing DS component)
+  - use the same naming as the Figma file for the components API unless it conflicts with a pre-existing HTML attribute. If that is the case, document the difference in the comment.
+  - ensure that all existing functionality (from a Structure component) is accounted for in some way. If we are not providing existing functionality at all, it should be documented (along with the reason why). If we are providing temporary functionality, explain that it's temporary and why.
+  - check the [design system website](https://design-system-website.vercel.app/?path=/story/example-introduction--page) to see what kind of component functionality is being used across all products
+  - booleans should start with a verb (is/has/etc)
+  - assertion text should match the content style of the other components.
+  - goal is a terse invocation
+- [ ] **component style**
+  - create `component/COMPONENT_NAME.scss` in `app/styles` 
+  - add `@use` to `app/styles/@hashicorp/design-system-components.scss` (see existing code for precise syntax)
+  - use design tokens wherever possible, comment where they are not
+  - sizes should be in relative units
+  - line heights should be unitless
+- [ ] **testing**
+  - [ ] test basic functionality
+  - [ ] test defaults
+  - [ ] try not to repeat tests (i.e., don't have to test all sizes, all colors, etc.)
+  - [ ] test all accessibility attributes
+- [ ] **documentation**
+  - create component page `ember generate route components/COMPONENT_NAME --dummy`
+  - add link to `templates/index.hbs` page
+  - [ ] API docs
+  - [ ] Usage 
+  - [ ] Showcase 
+
+### Component Review
+
+Pre-review request checks:
+
+- [ ] make sure all tests pass (`ember s` then visit /tests; or `ember t -s`)
+- [ ] check for basic a11y on docs page: 
+  - keyboard navigation
+  - logical DOM order
+  - zoom up to 400% 
+  - color contrast
+  - (the axe-core browser plugin can run some basic tests and give immediate feedback) 
+- [ ] check page on browsers
+  - Chrome
+  - Firefox
+  - Safari
+  - Edge (once available) 
+
+When ready for review: 
+- [ ] add situationally appropriate reviewers
+- [ ] added instructions for reviewers in your PR, letting them know what kind of review you need

package/.husky/pre-commit

@@ -0,0 +1,14 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+export NVM_DIR="$HOME/.nvm/nvm.sh"
+. "$(dirname $NVM_DIR)/nvm.sh"
+
+export NVM_DIR="$HOME/.nvm"
+a=$(nvm ls | grep 'node')
+b=${a#*(-> }
+v=${b%%[)| ]*}
+
+export PATH="$NVM_DIR/versions/node/$v/bin:$PATH"
+
+npx lint-staged

package/README.md

@@ -11,7 +11,7 @@ Compatibility
 
 * Ember.js v3.20 or above
 * Ember CLI v3.20 or above
-* Node.js v10 or above
+* Node.js v12 or above
 
 
 Installation

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

@@ -1,6 +1,4 @@
-<div 
-  class="hds-badge {{this.sizeClass}} {{this.typeClass}} {{this.colorClass}}"
-  ...attributes>
+<div class={{this.classNames}} ...attributes>
   {{#if @icon}}
     <div class="hds-badge__icon">
       <FlightIcon @name={{this.icon}} @size="16" @stretched="true" />
@@ -11,6 +9,6 @@
   {{else}}
     <div class="hds-badge__text">
       {{this.text}}
-    </div>  
+    </div>
   {{/if}}
 </div>

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

@@ -37,15 +37,6 @@ export default class HdsBadgeIndexComponent extends Component {
     return size;
   }
 
-  /**
-   * Get a class to apply to the component based on the size argument.
-   * @method Badge#sizeClass
-   * @return {string} The css class to apply to the component.
-   */
-  get sizeClass() {
-    return `hds-badge--size-${this.size}`;
-  }
-
   /**
    * Sets the type of the component
    * Accepted values: filled, inverted, outlined
@@ -67,15 +58,6 @@ export default class HdsBadgeIndexComponent extends Component {
     return type;
   }
 
-  /**
-   * Get a class to apply to the component based on the type argument.
-   * @method Badge#typeClass
-   * @return {string} The css class to apply to the component.
-   */
-  get typeClass() {
-    return `hds-badge--type-${this.type}`;
-  }
-
   /**
    * Sets the color scheme for the component
    * Accepted values: neutral, neutral-dark-mode, highlight, success, warning, critical
@@ -97,15 +79,6 @@ export default class HdsBadgeIndexComponent extends Component {
     return color;
   }
 
-  /**
-   * Get a class to apply to the component based on the color argument.
-   * @method Badge#colorClass
-   * @return {string} The css class to apply to the component.
-   */
-  get colorClass() {
-    return `hds-badge--color-${this.color}`;
-  }
-
   /**
    * @param text
    * @type {string}
@@ -145,4 +118,24 @@ export default class HdsBadgeIndexComponent extends Component {
     }
     return false;
   }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method Badge#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-badge'];
+
+    // add a class based on the @size argument
+    classes.push(`hds-badge--size-${this.size}`);
+
+    // add a class based on the @type argument
+    classes.push(`hds-badge--type-${this.type}`);
+
+    // add a class based on the @color argument
+    classes.push(`hds-badge--color-${this.color}`);
+
+    return classes.join(' ');
+  }
 }

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

@@ -1,3 +1,3 @@
-<div class="hds-badge-count {{this.sizeClass}} {{this.typeClass}} {{this.colorClass}}" ...attributes >
+<div class={{this.classNames}} ...attributes>
   {{@text}}
 </div>

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

@@ -30,15 +30,6 @@ export default class HdsBadgeCountIndexComponent extends Component {
     return size;
   }
 
-  /**
-   * Get a class to apply to the component based on the size argument.
-   * @method BadgeCount#sizeClass
-   * @return {string} The css class to apply to the component.
-   */
-  get sizeClass() {
-    return `hds-badge-count--size-${this.size}`;
-  }
-
   /**
    * Sets the type of the component
    * Accepted values: filled, inverted, outlined
@@ -60,15 +51,6 @@ export default class HdsBadgeCountIndexComponent extends Component {
     return type;
   }
 
-  /**
-   * Get a class to apply to the component based on the type argument.
-   * @method BadgeCount#typeClass
-   * @return {string} The css class to apply to the component.
-   */
-  get typeClass() {
-    return `hds-badge-count--type-${this.type}`;
-  }
-
   /**
    * Sets the color scheme for the component
    * Accepted colors: neutral, neutral-dark-mode
@@ -91,11 +73,22 @@ export default class HdsBadgeCountIndexComponent extends Component {
   }
 
   /**
-   * Get a class to apply to the component based on the color argument.
-   * @method BadgeCount#colorClass
-   * @return {string} The css class to apply to the component.
+   * Get the class names to apply to the component.
+   * @method BadgeCount#classNames
+   * @return {string} The "class" attribute to apply to the component.
    */
-  get colorClass() {
-    return `hds-badge-count--color-${this.color}`;
+  get classNames() {
+    let classes = ['hds-badge-count'];
+
+    // add a class based on the @size argument
+    classes.push(`hds-badge-count--size-${this.size}`);
+
+    // add a class based on the @type argument
+    classes.push(`hds-badge-count--type-${this.type}`);
+
+    // add a class based on the @color argument
+    classes.push(`hds-badge-count--color-${this.color}`);
+
+    return classes.join(' ');
   }
 }

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

@@ -1,7 +1,7 @@
-<button 
-  class="hds-button {{this.sizeClass}} {{this.colorClass}} {{this.widthClass}}"
+<button
+  class={{this.classNames}}
   ...attributes
-  aria-label={{if this.isIconOnly this.text null}} 
+  aria-label={{if this.isIconOnly this.text null}}
   type={{this.type}}
   disabled={{if this.isDisabled "disabled" null}}
 >
@@ -17,7 +17,7 @@
         </div>
         <div class="hds-button__text">
           {{this.text}}
-        </div> 
+        </div>
       {{else}}
         <div class="hds-button__text">
           {{this.text}}
@@ -28,8 +28,8 @@
       {{/if}}
     {{else}}
       <div class="hds-button__text">
-          {{this.text}}
+        {{this.text}}
       </div>
     {{/if}}
   {{/if}}
-</button>
+</button>

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

@@ -46,16 +46,6 @@ export default class HdsButtonIndexComponent extends Component {
     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}
@@ -75,16 +65,6 @@ export default class HdsButtonIndexComponent extends Component {
     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}
@@ -170,20 +150,6 @@ export default class HdsButtonIndexComponent extends Component {
     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}
@@ -193,4 +159,30 @@ export default class HdsButtonIndexComponent extends Component {
   get isDisabled() {
     return this.args.isDisabled ?? null;
   }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method Badge#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  // "hds-button {{this.sizeClass}} {{this.colorClass}} {{this.widthClass}}"
+  get classNames() {
+    let classes = ['hds-button'];
+
+    // add a class based on the @size argument
+    classes.push(`hds-button--size-${this.size}`);
+
+    // add a class based on the @color argument
+    classes.push(`hds-button--color-${this.color}`);
+
+    // add a class based on the @isFullWidth argument
+    if (this.isFullWidth) {
+      classes.push('hds-button--width-full');
+    }
+
+    // the button has a "low" elevation effect applied to it
+    classes.push('hds-elevation-low');
+
+    return classes.join(' ');
+  }
 }

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

@@ -1,3 +1,3 @@
-<div class="hds-card__container {{this.levelClass}} {{this.borderClass}} {{this.backgroundClass}} {{this.overflowClass}}" ...attributes>
+<div class={{this.classNames}} ...attributes>
   {{yield}}
 </div>

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

@@ -30,15 +30,6 @@ export default class HdsCardContainerComponent extends Component {
     return level;
   }
 
-  /**
-   * Get a class to apply to the component based on the level argument.
-   * @method Card#levelClass
-   * @return {string} The css class to apply to the component.
-   */
-  get levelClass() {
-    return `hds-card__container--level-${this.level}`;
-  }
-
   /**
    * Sets the background for the component
    * Accepted values: neutral-primary, neutral-secondary
@@ -60,24 +51,6 @@ export default class HdsCardContainerComponent extends Component {
     return background;
   }
 
-  /**
-   * Get a class to apply to the component based on the background argument.
-   * @method Card#backgroundClass
-   * @return {string} The css class to apply to the component.
-   */
-  get backgroundClass() {
-    return `hds-card__container--background-${this.background}`;
-  }
-
-  /**
-   * Get a class to apply to the component based on the hasBorder argument.
-   * @method Card#hasBorderClass
-   * @return {string} The css class to apply to the component.
-   */
-  get borderClass() {
-    return this.args.hasBorder ? `hds-card__container--has-border` : undefined;
-  }
-
   /**
    * Sets the level for the card
    * Accepted values: visible, hidden
@@ -100,11 +73,24 @@ export default class HdsCardContainerComponent extends Component {
   }
 
   /**
-   * Get a class to apply to the component based on the overflow argument.
-   * @method Card#overflowClass
-   * @return {string} The css class to apply to the component.
+   * Get the class names to apply to the component.
+   * @method Card#classNames
+   * @return {string} The "class" attribute to apply to the component.
    */
-  get overflowClass() {
-    return `hds-card__container--overflow-${this.overflow}`;
+  get classNames() {
+    let classes = ['hds-card__container'];
+
+    // add an "elevation" class helper based on the @level and @hasBorder arguments
+    classes.push(
+      `hds-${this.args.hasBorder ? 'surface' : 'elevation'}-${this.level}`
+    );
+
+    // add a class based on the @background argument
+    classes.push(`hds-card__container--background-${this.background}`);
+
+    // add a class based on the @overflow argument
+    classes.push(`hds-card__container--overflow-${this.overflow}`);
+
+    return classes.join(' ');
   }
 }

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

@@ -1,56 +1,13 @@
-<div class="hds-icon-tile {{this.entityClass}} {{this.sizeClass}} {{this.colorClass}}" aria-hidden="true" ...attributes>
+<div class={{this.classNames}} 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>
+    <div class="hds-icon-tile__logo">
+      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched="true" />
+    </div>
   {{/if}}
   {{#if this.iconSecondary}}
     <div class="hds-icon-tile__extra">

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

@@ -7,6 +7,7 @@ export const SIZES = ['small', 'medium', 'large'];
 export const PRODUCTS = [
   'boundary',
   'consul',
+  'hcp',
   'nomad',
   'packer',
   'terraform',
@@ -38,15 +39,6 @@ export default class HdsIconTileIndexComponent extends Component {
     return size;
   }
 
-  /**
-   * Get a class to apply to the component based on the size argument.
-   * @method IconTile#sizeClass
-   * @return {string} The css class to apply to the component.
-   */
-  get sizeClass() {
-    return `hds-icon-tile--size-${this.size}`;
-  }
-
   /**
    * Sets the color scheme for the component
    * Accepted values: see THE COLORS LIST
@@ -74,15 +66,6 @@ export default class HdsIconTileIndexComponent extends Component {
     return color;
   }
 
-  /**
-   * Get a class to apply to the component based on the color argument.
-   * @method IconTile#colorClass
-   * @return {string} The css class to apply to the component.
-   */
-  get colorClass() {
-    return `hds-icon-tile--color-${this.color}`;
-  }
-
   /**
    * Sets the icon name (one of the FlightIcons)
    *
@@ -91,7 +74,14 @@ export default class HdsIconTileIndexComponent extends Component {
    * @default null
    */
   get icon() {
-    return this.args.icon ?? null;
+    if (this.args.logo) {
+      // for the logo version we use the colored versions directly
+      return `${this.args.logo}-color`;
+    } else if (this.args.icon) {
+      return this.args.icon;
+    } else {
+      return null;
+    }
   }
 
   /**
@@ -159,15 +149,6 @@ export default class HdsIconTileIndexComponent extends Component {
     return entity;
   }
 
-  /**
-   * Get a class to apply to the component based on the its entity.
-   * @method IconTile#entityClass
-   * @return {string} The css class to apply to the component.
-   */
-  get entityClass() {
-    return `hds-icon-tile--${this.entity}`;
-  }
-
   /**
    * Sets the "secondary" icon name (one of the FlightIcons)
    *
@@ -178,4 +159,25 @@ export default class HdsIconTileIndexComponent extends Component {
   get iconSecondary() {
     return this.args.iconSecondary ?? null;
   }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method IconTile#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  // hds-icon-tile {{this.entityClass}} {{this.sizeClass}} {{this.colorClass}}"
+  get classNames() {
+    let classes = ['hds-icon-tile'];
+
+    // add a class based on its entity argument
+    classes.push(`hds-icon-tile--${this.entity}`);
+
+    // add a class based on the @size argument
+    classes.push(`hds-icon-tile--size-${this.size}`);
+
+    // add a class based on the @color argument
+    classes.push(`hds-icon-tile--color-${this.color}`);
+
+    return classes.join(' ');
+  }
 }

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

@@ -0,0 +1,20 @@
+{{! 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>
+  {{#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}}
+</a>
+{{! template-lint-enable link-href-attributes }}