@hashicorp/design-system-components 0.0.7 → 0.0.8

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;
   }

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.iconPos "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,185 @@
+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 SIZES = ['small', 'medium', 'large'];
+export const COLORS = ['primary', 'secondary', 'destructive'];
+export const TYPES = ['button', 'submit', 'reset'];
+
+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 iconPos
+   * @type {string}
+   * @default leading
+   * @description Positions the icon before or after the text; allowed values are `leading` or `trailing`
+   */
+  get iconPos() {
+    return this.args.iconPos ?? 'leading';
+  }
+
+  /**
+   * @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}}" ...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>

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

@@ -0,0 +1,181 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const DEFAULT_SIZE = 'medium';
+export const DEFAULT_COLOR = 'neutral';
+export const SIZES = ['small', 'medium', 'large'];
+export const PRODUCTS = [
+  'boundary',
+  'consul',
+  'nomad',
+  'packer',
+  'terraform',
+  'vagrant',
+  'vault',
+  'waypoint',
+];
+export const COLORS = ['neutral', ...PRODUCTS];
+
+export default class HdsIconTileIndexComponent extends Component {
+  /**
+   * Sets the size for the component
+   * Accepted values: small, medium, large
+   *
+   * @param size
+   * @type {string}
+   * @default 'medium'
+   */
+  get size() {
+    let { size = DEFAULT_SIZE } = this.args;
+
+    assert(
+      `@size for "Hds::IconTile" must be one of the following: ${SIZES.join(
+        ', '
+      )}, received: ${size}`,
+      SIZES.includes(size)
+    );
+
+    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
+   *
+   * @param color
+   * @type {string}
+   * @default 'neutral'
+   */
+  get color() {
+    let { color = DEFAULT_COLOR } = this.args;
+
+    // if it's a "logo" then we overwrite any @color parameter passed
+    // and just use the product "brand" color
+    if (this.logo) {
+      color = this.logo;
+    }
+
+    assert(
+      `@color for "Hds::IconTile" must be one of the following: ${COLORS.join(
+        ', '
+      )}, received: ${color}`,
+      COLORS.includes(color)
+    );
+
+    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)
+   *
+   * @param icon
+   * @type {string|null}
+   * @default null
+   */
+  get icon() {
+    return this.args.icon ?? null;
+  }
+
+  /**
+   * @param iconSize
+   * @type {string}
+   * @default 16
+   * @description ensures that the correct icon size is used. Automatically calculated.
+   */
+  get iconSize() {
+    if (this.args.size === 'small') {
+      return '16';
+    } else {
+      return '24';
+    }
+  }
+
+  /**
+   * Sets the logo name if there is one
+   *
+   * @param logo
+   * @type {string|null}
+   * @default null
+   */
+  get logo() {
+    let { logo } = this.args;
+
+    if (logo) {
+      assert(
+        `@logo for "Hds::IconTile" must be one of the following: ${PRODUCTS.join(
+          ', '
+        )}, received: ${logo}`,
+        PRODUCTS.includes(logo)
+      );
+    }
+
+    return logo ?? null;
+  }
+
+  /**
+   * We need to differentiate between a logo and an icon
+   * @method IconTile#entity
+   * @return {string} The kind of entity we're dealing with ("logo" or "icon")
+   */
+  get entity() {
+    let entity;
+
+    // TODO: discuss if we want these kind of tests
+    assert(
+      `you can't pass both @logo and @icon properties to the "Hds::IconTile" component`,
+      !(this.args.logo && this.args.icon)
+    );
+
+    assert(
+      `you need to pass @logo or @icon to the "Hds::IconTile" component`,
+      !(this.args.logo === undefined && this.args.icon === undefined)
+    );
+
+    if (this.args.logo) {
+      entity = 'logo';
+    }
+    if (this.args.icon) {
+      entity = 'icon';
+    }
+
+    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)
+   *
+   * @param iconSecondary
+   * @type {string|null}
+   * @default null
+   */
+  get iconSecondary() {
+    return this.args.iconSecondary ?? null;
+  }
+}

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

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

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

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/icon-tile/index';

package/app/styles/@hashicorp/design-system-components.scss

@@ -2,7 +2,9 @@
 
 @use "../components/badge";
 @use "../components/badge-count";
+@use "../components/button";
 @use "../components/card";
+@use "../components/icon-tile";
 
 .sr-only {
 	border: 0 !important;

package/app/styles/components/badge-count.scss

@@ -1,3 +1,4 @@
+//
 // BADGE-COUNT
 //
 // properties within each class are sorted alphabetically

package/app/styles/components/badge.scss

@@ -1,9 +1,9 @@
-/* Badge Component
- *
- * classes are sorted the same way as the Figma properties
- * properties within each class are sorted alphabetically
- *
- */
+//
+// BADGE
+//
+// properties within each class are sorted alphabetically
+//
+//
 
  $hds-badge-types: ( 'flat','inverted','outlined' );
  $hds-badge-colors-accents: ( 'highlight', 'success', 'warning', 'critical' );

package/app/styles/components/button.scss

@@ -0,0 +1,246 @@
+// Button Component Styles
+
+$border-radius: 5px;
+
+// TODO! generalize with the existing mixin in Card component
+@mixin tempElevation() {
+  box-shadow:
+    var(--token-elevation-low-shadow-01-x)
+    var(--token-elevation-low-shadow-01-y)
+    var(--token-elevation-low-shadow-01-blur)
+    var(--token-elevation-low-shadow-01-spread)
+    var(--token-elevation-low-shadow-01-color),
+    var(--token-elevation-low-shadow-02-x)
+    var(--token-elevation-low-shadow-02-y)
+    var(--token-elevation-low-shadow-02-blur)
+    var(--token-elevation-low-shadow-02-spread)
+    var(--token-elevation-low-shadow-02-color)
+  ;
+}
+
+.hds-button {
+  @include tempElevation();
+
+  align-items: center;
+  border: 1px solid transparent; // We need this to be transparent for a11y
+  border-radius: $border-radius;
+  box-sizing: border-box; // TODO https://github.com/hashicorp/design-system-components/issues/46
+  display: flex;
+  font-family: var(--token-typography-body-base-font-family);
+  justify-content: center;
+  outline-color: transparent; // We need this to be transparent for a11y
+  max-width: fit-content;
+  position: relative;
+  width: auto;
+
+  // This covers all of the browsers and focus scenarios (due to the custom focus design).
+  &:disabled,
+  &[disabled],
+  &.is-disabled,
+  &:disabled:hover,
+  &[disabled]:hover,
+  &.is-disabled:hover,
+  &:disabled:focus,
+  &[disabled]:focus,
+  &.is-disabled:focus,
+  &:disabled:focus-visible,
+  &[disabled]:focus-visible,
+  &.is-disabled:focus-visible {
+    background-color: var(--token-color-palette-neutral-50);
+    border-color: var(--token-color-palette-alpha-200);
+    box-shadow: none;
+    color: var(--token-color-palette-neutral-400);
+    cursor: not-allowed;
+    outline-color: var(--token-color-palette-alpha-200);
+
+    &::before {
+      border-color: transparent;
+    }
+  }
+
+  &.hds-button--width-full {
+    width: 100%;
+    max-width: 100%;
+
+    .hds-button__text {
+      flex: 0 0 auto;
+    }
+  }
+
+  &.is-focus,
+  &:focus,
+  &:focus-visible {
+    &::before {
+      border-radius: $border-radius + 3px;
+      border: 3px solid transparent;
+      bottom: -4px;
+      box-sizing: border-box;
+      content: '';
+      left: -4px;
+      position: absolute;
+      right: -4px;
+      top: -4px;
+    }
+  }
+}
+
+.hds-button__text {
+  flex: 1 0 0;
+  .hds-button__icon + & {
+    margin-left: 0.375rem;
+  }
+  & +.hds-button__icon {
+    margin-left: 0.375rem;
+  }
+}
+
+
+// SIZE
+
+.hds-button--size-small {
+  font-size: 0.8125rem; // 13px;
+  min-height: 1.75rem;  //28px
+  line-height: 1;
+  padding: 0 1rem;
+  
+  .hds-button__icon {
+    height: 0.75rem; // 12px
+    width: 0.75rem; // 12px
+  }
+}
+
+.hds-button--size-medium {
+  font-size: 0.875rem; // 14px
+  line-height: 1rem; // 16px
+  min-height: 2.25rem; //36px
+  padding: 0.625rem 1rem;
+
+  .hds-button__icon {
+    height: 1rem;
+    width: 1rem;
+  }
+}
+
+.hds-button--size-large {
+  font-size: 1rem; //16px
+  line-height: 1.5rem; // 24px
+  min-height: 3rem; //48px
+  padding: 0.75rem 1.25rem; // 12px 20px
+
+  .hds-button__icon {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+}
+
+// COLORS & STATES
+// Note: the order of the pseuo-selectors need to stay the way they are; it doesn't match the Figma file but it's the correct order for browsers to render the styles correctly.
+
+.hds-button--color-primary {
+  background-color: var(--token-color-action-background-primary);
+  border-color: var(--token-color-action-border-on-primary);
+  color: var(--token-color-palette-neutral-0);
+
+  &:focus,
+  &:focus-visible,
+  &.is-focus {
+    background-color: var(--token-color-action-background-primary);
+    border-color: var(--token-color-action-border-on-primary);
+    color: var(--token-color-palette-neutral-0);
+    &::before {
+      border-color: var(--token-color-action-background-primary);
+      bottom: -6px;
+      left: -6px;
+      right: -6px;
+      top: -6px;
+    }
+  }
+  &:hover,
+  &.is-hover {
+    background-color: var(--token-color-action-background-hover);
+    border-color: var(--token-color-action-border-on-hover);
+    color: var(--token-color-palette-neutral-0);
+    cursor: pointer;
+  }
+  &:active,
+  &.is-active {
+    background-color: var(--token-color-action-background-active);
+    border-color: var(--token-color-action-background-active);
+    box-shadow: none;
+    color: var(--token-color-palette-neutral-0);
+    &::before {
+      border-color: transparent;
+    }
+  }
+}
+
+.hds-button--color-secondary {
+  background-color: var(--token-color-palette-neutral-50);
+  border-color: var(--token-color-palette-alpha-300);
+  color: var(--token-color-palette-neutral-600);
+
+  &:focus,
+  &:focus-visible,
+  &.is-focus {
+    background-color: var(--token-color-palette-neutral-50);
+    border-color: var(--token-color-action-border-on-primary);
+    color: var(--token-color-palette-neutral-600);
+    outline-color: var(--token-color-action-border-on-primary);
+    &::before {
+      border-color: #5990FF;
+    }
+  }
+  &:hover,
+  &.is-hover {
+    background-color: var(--token-color-palette-neutral-0);
+    border-color: var(--token-color-palette-alpha-300);
+    color: var(--token-color-palette-neutral-600);
+    cursor: pointer;
+  }
+  &:active, 
+  &.is-active {
+    background-color: var(--token-color-palette-neutral-200);
+    border-color: var(--token-color-palette-alpha-300);
+    box-shadow: none;
+    color: var(--token-color-palette-neutral-600);
+    &::before {
+      border-color: transparent;
+    }
+  }
+}
+
+.hds-button--color-destructive {
+  background-color: var(--token-color-palette-neutral-50);
+  border-color: var(--token-color-palette-alpha-300);
+  color: var(--token-color-critical-foreground-on-faint);
+
+  &:focus,
+  &:focus-visible,
+  &.is-focus {
+    background-color: var(--token-color-palette-neutral-50);
+    border-color: var(--token-color-critical-border-on-primary);
+    color: var(--token-color-critical-foreground-on-faint);
+    outline-color: var(--token-color-critical-border-on-primary);
+    &::before {
+      border-color: #DD7578;
+    }
+  }
+  &:hover,
+  &.is-hover {
+    background-color: var(--token-color-critical-background-hover);
+    border-color: var(--token-color-critical-border-on-hover);
+    color: var(--token-color-palette-neutral-0);
+    cursor: pointer;
+  }
+  
+  &:active,
+  &.is-active {
+    background-color: var(--token-color-critical-background-active);
+    border-color: var(--token-color-critical-background-active);
+    box-shadow: none;
+    color: var(--token-color-palette-neutral-0);
+    &::before {
+      border-color: transparent;
+    }
+  }
+}

package/app/styles/components/card/container.scss

@@ -1,3 +1,4 @@
+//
 // CARD COMPONENT > CONTAINER
 //
 // properties within each class are sorted alphabetically

package/app/styles/components/card/index.scss

@@ -1,3 +1,4 @@
+//
 // CARD COMPONENT
 //
 

package/app/styles/components/icon-tile.scss

@@ -0,0 +1,147 @@
+//
+// ICON-TILE
+//
+// properties within each class are sorted alphabetically
+//
+//
+
+ $hds-icon-tile-sizes: ( 'small', 'medium', 'large' );
+ $hds-icon-tile-types: ( 'object','resource','logo' );
+ $hds-icon-tile-colors-products: ( 'boundary', 'consul', 'nomad', 'packer', 'terraform', 'vagrant', 'vault', 'waypoint' );
+
+ $hds-icon-tile-border-width: 1px;
+ $hds-icon-tile-box-shadow: 0px 1px 1px rgba(#656A76, 0.05);
+
+
+.hds-icon-tile {
+  border-radius: 4px;
+  border: $hds-icon-tile-border-width solid transparent;
+  box-shadow: $hds-icon-tile-box-shadow;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+}
+
+.hds-icon-tile__icon,
+.hds-icon-tile__logo {
+  display: flex;
+  margin: auto;
+}
+
+.hds-icon-tile__extra {
+  background-color: var(--token-color-neutral-background-primary);
+  border: 1px solid var(--token-color-palette-alpha-200);
+  bottom: -6px;
+  box-shadow: $hds-icon-tile-box-shadow;
+  box-sizing: content-box; // the border is outside
+  right: -6px;
+  display: flex;
+  position: absolute;
+}
+
+.hds-icon-tile__extra-icon {
+  display: flex;
+  margin: auto;
+  color: var(--token-color-neutral-foreground-primary);
+}
+
+// SIZE
+
+// these values later may come from the design tokens
+$size-props: (
+  "small": (
+    "size": 1.75rem, // 28px
+    "border-radius": 5px,
+    "icon-size": 1rem,
+    "logo-size": 1.25rem,
+    'extra-size': 1.125rem,
+    'extra-border-radius': 4px,
+    'extra-icon-size': 0.75rem,
+  ),
+  "medium": (
+      "size": 2.5rem, // 40px
+      "border-radius": 6px,
+      "icon-size": 1.5rem,
+      "logo-size": 2.25rem,
+      'extra-size': 1.5rem,
+      'extra-border-radius': 5px,
+      'extra-icon-size': 1rem,
+  ),
+  "large": (
+    "size": 3rem, // 48px
+    "border-radius": 6px,
+    "icon-size": 1.5rem,
+    "logo-size": 2.25rem,
+    'extra-size': 1.5rem,
+    'extra-border-radius': 5px,
+    'extra-icon-size': 1rem,
+  )
+);
+
+@each $size in $hds-icon-tile-sizes {
+  .hds-icon-tile--size-#{$size} {
+    width: map-get($size-props, $size, "size");
+    height: map-get($size-props, $size, "size");
+    border-radius: map-get($size-props, $size, "border-radius");
+
+    .hds-icon-tile__icon {
+      height: map-get($size-props, $size, "icon-size");
+      width: map-get($size-props, $size, "icon-size");
+    }
+
+    .hds-icon-tile__logo {
+      height: map-get($size-props, $size, "logo-size");
+      width: map-get($size-props, $size, "logo-size");
+    }
+
+    .hds-icon-tile__extra {
+      border-radius: map-get($size-props, $size, "extra-border-radius");
+      height: map-get($size-props, $size, "extra-size");
+      width: map-get($size-props, $size, "extra-size");
+    }
+
+    .hds-icon-tile__extra-icon {
+      height: map-get($size-props, $size, "extra-icon-size");
+      width: map-get($size-props, $size, "extra-icon-size");
+    }
+  }
+}
+
+
+// LOGO - COLOR
+
+.hds-icon-tile--logo {
+  background-color: var(--token-color-neutral-background-primary);
+  border-color: var(--token-color-neutral-border-primary);
+
+  @each $product in $hds-icon-tile-colors-products {
+    &.hds-icon-tile--color-#{$product} {
+      color: var(--token-color-#{$product}-brand);
+    }
+  }
+
+  // exception for Vault, where the color of the logo needs to be the "alt" one
+  &.hds-icon-tile--color-vault {
+    color: var(--token-color-vault-brand-alt);
+  }
+}
+
+// ICON - COLOR
+
+.hds-icon-tile--icon {
+
+  &.hds-icon-tile--color-neutral {
+    background-color: var(--token-color-neutral-background-secondary);
+    border-color: var(--token-color-neutral-border-primary);
+    color: var(--token-color-neutral-foreground-faint);
+  }
+
+  @each $product in $hds-icon-tile-colors-products {
+    &.hds-icon-tile--color-#{$product} {
+      background: linear-gradient(135deg, var(--token-color-#{$product}-gradient-faint-start) 0%, var(--token-color-#{$product}-gradient-faint-stop) 100%);
+      border-color: var(--token-color-#{$product}-border);
+      color: var(--token-color-#{$product}-brand);
+    }
+  }
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -56,7 +56,7 @@
     "test:ember:percy": "percy exec ember test"
   },
   "dependencies": {
-    "@hashicorp/design-system-tokens": "^0.0.12",
+    "@hashicorp/design-system-tokens": "^0.0.13",
     "@hashicorp/ember-flight-icons": "^1.2.0",
     "ember-cli-babel": "^7.26.6",
     "ember-cli-htmlbars": "^5.7.1",
@@ -90,6 +90,7 @@
     "ember-source": "~3.27.2",
     "ember-source-channel-url": "^3.0.0",
     "ember-template-lint": "^3.4.2",
+    "ember-truth-helpers": "^3.0.0",
     "ember-try": "^1.4.0",
     "eslint": "^7.27.0",
     "eslint-config-prettier": "^8.3.0",