@hashicorp/design-system-components 0.0.10 → 0.0.14

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

@@ -0,0 +1,132 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const DEFAULT_ICONPOSITION = 'leading';
+export const DEFAULT_COLOR = 'primary';
+export const DEFAULT_SIZE = 'medium';
+export const ICONPOSITIONS = ['leading', 'trailing'];
+export const COLORS = ['primary', 'secondary'];
+export const SIZES = ['small', 'medium', 'large'];
+
+export default class HdsLinkStandaloneComponent extends Component {
+  /**
+   * @param text
+   * @type {string}
+   * @description The text of the link. If no text value is defined an error will be thrown.
+   */
+  get text() {
+    let { text } = this.args;
+
+    assert(
+      '@text for "Hds::Link::Standalone" must have a valid value',
+      text !== undefined
+    );
+
+    return text;
+  }
+
+  /**
+   * @param color
+   * @type {string}
+   * @default primary
+   * @description Determines the color of link to be used; acceptable values are `primary` and `secondary`
+   */
+  get color() {
+    let { color = DEFAULT_COLOR } = this.args;
+
+    assert(
+      `@color for "Hds::Link::Standalone" must be one of the following: ${COLORS.join(
+        ', '
+      )}; received: ${color}`,
+      COLORS.includes(color)
+    );
+
+    return color;
+  }
+
+  /**
+   * @param icon
+   * @type {string|null}
+   * @default null
+   * @description The name of the icon to be used. An icon name must be defined.
+   */
+  get icon() {
+    let { icon } = this.args;
+
+    assert(
+      '@icon for "Hds::Link::Standalone" must have a valid value',
+      icon !== undefined
+    );
+
+    return icon;
+  }
+
+  /**
+   * @param iconPosition
+   * @type {string}
+   * @default leading
+   * @description Positions the icon before or after the text; allowed values are `leading` or `trailing`
+   */
+  get iconPosition() {
+    let { iconPosition = DEFAULT_ICONPOSITION } = this.args;
+
+    assert(
+      `@iconPosition for "Hds::Link::Standalone" must be one of the following: ${ICONPOSITIONS.join(
+        ', '
+      )}; received: ${iconPosition}`,
+      ICONPOSITIONS.includes(iconPosition)
+    );
+
+    return iconPosition;
+  }
+
+  /**
+   * @param size
+   * @type {string}
+   * @default medium
+   * @description The size of the standalone link; acceptable values are `small`, `medium`, and `large`
+   */
+  get size() {
+    let { size = DEFAULT_SIZE } = this.args;
+
+    assert(
+      `@size for "Hds::Link::Standalone" must be one of the following: ${SIZES.join(
+        ', '
+      )}; received: ${size}`,
+      SIZES.includes(size)
+    );
+
+    return size;
+  }
+
+  /**
+   * @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';
+    }
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method LinkStandalone#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-link-standalone'];
+
+    // add a class based on the @size argument
+    classes.push(`hds-link-standalone--size-${this.size}`);
+
+    // add a class based on the @color argument
+    classes.push(`hds-link-standalone--color-${this.color}`);
+
+    return classes.join(' ');
+  }
+}

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

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

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

@@ -0,0 +1,158 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const DEFAULT_ICONPOSITION = 'leading';
+export const DEFAULT_COLOR = 'primary';
+export const DEFAULT_SIZE = 'medium';
+export const ICONPOSITIONS = ['leading', 'trailing'];
+export const COLORS = ['primary', 'secondary'];
+export const SIZES = ['small', 'medium', 'large'];
+
+export default class HdsLinkToStandaloneComponent extends Component {
+  /**
+   * @param text
+   * @type {string}
+   * @description The text of the link. If no text value is defined an error will be thrown.
+   */
+  get text() {
+    let { text } = this.args;
+
+    assert(
+      '@text for "Hds::LinkTo::Standalone" must have a valid value',
+      text !== undefined
+    );
+
+    return text;
+  }
+
+  /**
+   * @param route
+   * @type {string|null}
+   * @description Checks to make sure route is defined.
+   */
+  get route() {
+    let { route } = this.args;
+    assert(
+      '@route must be defined for "Hds::LinkTo::Standalone"',
+      route !== undefined
+    );
+
+    return route;
+  }
+
+  /**
+   * @param color
+   * @type {string}
+   * @default primary
+   * @description Determines the color of link to be used; acceptable values are `primary` and `secondary`
+   */
+  get color() {
+    let { color = DEFAULT_COLOR } = this.args;
+
+    assert(
+      `@color for "Hds::LinkTo::Standalone" must be one of the following: ${COLORS.join(
+        ', '
+      )}; received: ${color}`,
+      COLORS.includes(color)
+    );
+
+    return color;
+  }
+
+  /**
+   * @param icon
+   * @type {string|null}
+   * @default null
+   * @description The name of the icon to be used. An icon name must be defined.
+   */
+  get icon() {
+    let { icon } = this.args;
+
+    assert(
+      '@icon for "Hds::LinkTo::Standalone" must have a valid value',
+      icon !== undefined
+    );
+
+    return icon;
+  }
+
+  /**
+   * @param iconPosition
+   * @type {string}
+   * @default leading
+   * @description Positions the icon before or after the text; allowed values are `leading` or `trailing`
+   */
+  get iconPosition() {
+    let { iconPosition = DEFAULT_ICONPOSITION } = this.args;
+
+    assert(
+      `@iconPosition for "Hds::LinkTo::Standalone" must be one of the following: ${ICONPOSITIONS.join(
+        ', '
+      )}; received: ${iconPosition}`,
+      ICONPOSITIONS.includes(iconPosition)
+    );
+
+    return iconPosition;
+  }
+
+  /**
+   * @param size
+   * @type {string}
+   * @default medium
+   * @description The size of the standalone link; acceptable values are `small`, `medium`, and `large`
+   */
+  get size() {
+    let { size = DEFAULT_SIZE } = this.args;
+
+    assert(
+      `@size for "Hds::LinkTo::Standalone" must be one of the following: ${SIZES.join(
+        ', '
+      )}; received: ${size}`,
+      SIZES.includes(size)
+    );
+
+    return size;
+  }
+
+  /**
+   * @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';
+    }
+  }
+
+  // this is a workaround for https://github.com/emberjs/ember.js/issues/19693
+  // don't remove until we drop support for ember 3.27 and 3.28
+  get queryParams() {
+    if (this.args.query) {
+      return this.args.query;
+    } else {
+      return {};
+    }
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method LinkToStandalone#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    // Notice: we've left this class name the same as the hds::link::standalone (we didn't add the "-to") so we didn't have to replicate the CSS
+    let classes = ['hds-link-standalone'];
+
+    // add a class based on the @size argument
+    classes.push(`hds-link-standalone--size-${this.size}`);
+
+    // add a class based on the @color argument
+    classes.push(`hds-link-standalone--color-${this.color}`);
+
+    return classes.join(' ');
+  }
+}

package/addon/helpers/hds-link-to-models.js

@@ -0,0 +1,30 @@
+import { helper } from '@ember/component/helper';
+import { assert } from '@ember/debug';
+
+/*
+ * This helper can be used to support both @model and @models arguments when wrapping
+ * the `<LinkTo>` component without it triggering assertions or having to use the component helper.
+ *
+ * The result of this helper should be passed into the `@models` argument of the `<LinkTo>` component:
+ *
+ * ```hbs
+ * <LinkTo @models={{hds-link-to-models @model @models}} />
+ * ```
+ */
+
+export function hdsLinkToModels([model, models]) {
+  assert(
+    'You cannot provide both the `@model` and `@models` arguments to the component.',
+    !model || !models
+  );
+
+  if (model) {
+    return [model];
+  } else if (models) {
+    return models;
+  } else {
+    return [];
+  }
+}
+
+export default helper(hdsLinkToModels);

package/app/components/hds/link/standalone.js

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

package/app/components/hds/link-to/standalone.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/link-to/standalone';

package/app/helpers/hds-link-to-models.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/helpers/hds-link-to-models';

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

@@ -1,10 +1,15 @@
+// these are files coming from the 'design-system-tokens' package
 @use "tokens";
+@use "helpers/elevation";
+
+@use "../mixins/generic-focus-state";
 
 @use "../components/badge";
 @use "../components/badge-count";
 @use "../components/button";
 @use "../components/card";
 @use "../components/icon-tile";
+@use "../components/link/standalone";
 
 .sr-only {
 	border: 0 !important;

package/app/styles/components/button.scss

@@ -4,25 +4,9 @@ $hds-button-border-radius: 5px;
 $hds-button-border-width: 1px;
 $hds-button-focus-border-width: 3px;
 
-// 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-sizes: ( 'small', 'medium', 'large' );
 
 .hds-button {
-  @include tempElevation();
-
   align-items: center;
   border: $hds-button-border-width solid transparent; // We need this to be transparent for a11y
   border-radius: $hds-button-border-radius;
@@ -101,41 +85,45 @@ $hds-button-focus-border-width: 3px;
 
 // 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;
+// these values later may come from the design tokens
+$size-props: (
+  "small": (
+    "font-size": 0.8125rem, // 13px;
+    "line-height": 1,
+    "min-height": 1.75rem,  // 28px
+    "padding": 0 1rem, // 0 16px
+    "icon-size": 0.75rem, // 12px
+  ),
+  "medium": (
+      "font-size": 0.875rem, // 14px
+      "line-height": 1rem,// 16px
+      "min-height": 2.25rem, // 36px
+      "padding": 0.625rem 1rem, // 10px 16px
+      "icon-size": 1rem, // 16px
+  ),
+  "large": (
+      "font-size": 1rem, //16px
+      "line-height": 1.5rem, // 24px
+      "min-height": 3rem, // 48px
+      "padding": 0.75rem 1.25rem, // 12px 20px
+      "icon-size": 1.5rem, // 24px
+  )
+);
+
+@each $size in $hds-button-sizes {
+  .hds-button--size-#{$size} {
+    font-size: map-get($size-props, $size, "font-size");
+    min-height: map-get($size-props, $size, "min-height");
+    line-height: map-get($size-props, $size, "line-height");
+    padding: map-get($size-props, $size, "padding");
+
+    .hds-button__icon {
+      height: map-get($size-props, $size, "icon-size");
+      width: map-get($size-props, $size, "icon-size");
+    }
   }
 }
 
-.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.

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

@@ -5,56 +5,6 @@
 //
 //
 
-// this mixin is used to apply the "elevation" styles to the card container
-// depending on the "elevation level" and if it has a border applied to it.
-// we are mimicking the way this effect is defined in Figma, through a set of
-// multiple drop shadows (also the border is a 1px shadow); we tried using an
-// outline but Safari still doesn't support rounded edges for outlines.
-// for details see: https://www.figma.com/file/oQsMzMMnynfPWpMEt91OpH/?node-id=1988%3A2
-
-@mixin getElevationStyle($level, $has-border: false) {
-  $drop-shadow: false;
-  $border-shadow: false;
-
-  // here we define the "drop-shadow" values (there are two shadows applied)
-  // notice: the "base" level doesn't have a "drop shadow" effect applied (no elevation)
-  @if ($level != 'base') {
-    $drop-shadow:
-      var(--token-elevation-#{$level}-shadow-01-x)
-      var(--token-elevation-#{$level}-shadow-01-y)
-      var(--token-elevation-#{$level}-shadow-01-blur)
-      var(--token-elevation-#{$level}-shadow-01-spread)
-      var(--token-elevation-#{$level}-shadow-01-color),
-      var(--token-elevation-#{$level}-shadow-02-x)
-      var(--token-elevation-#{$level}-shadow-02-y)
-      var(--token-elevation-#{$level}-shadow-02-blur)
-      var(--token-elevation-#{$level}-shadow-02-spread)
-      var(--token-elevation-#{$level}-shadow-02-color)
-    ;
-  }
-
-  // here we define the "border-shadow" values
-  // notice: we create a border via a shadow, so we have zero values for x/y/blur
-  @if ($has-border) {
-    $border-shadow:
-      0
-      0
-      0
-      var(--token-elevation-#{$level}-border-width)
-      var(--token-elevation-#{$level}-border-color);
-  }
-
-  // here we join the two effects in a single box-shadow (depending on the different cases)
-  @if ($drop-shadow and not $border-shadow) {
-    box-shadow: $drop-shadow;
-  } @else if($border-shadow and not $drop-shadow) {
-    box-shadow: $border-shadow;
-  } @else {
-    // notice: we put the "border-shadow" first because the final rendering in the browser looks better
-    // see: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow - "The z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top)."
-    box-shadow: $border-shadow, $drop-shadow;
-  }
-}
 
 $hds-card-container-levels: ( 'base', 'mid', 'high' );
 
@@ -66,18 +16,6 @@ $hds-card-container-border-radius: 6px;
   position: relative;
 }
 
-// LEVEL (elevation style as "drop" + "border" shadow effects)
-
-@each $level in $hds-card-container-levels {
-  .hds-card__container--level-#{$level} {
-    @include getElevationStyle($level);
-
-    &.hds-card__container--has-border {
-      @include getElevationStyle($level, true);
-    }
-  }
-}
-
 
 // BACKGROUND
 

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

@@ -7,7 +7,7 @@
 
  $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-colors-products: ( 'boundary', 'consul', 'hcp', 'nomad', 'packer', 'terraform', 'vagrant', 'vault', 'waypoint' );
 
  $hds-icon-tile-border-width: 1px;
  $hds-icon-tile-box-shadow: 0px 1px 1px rgba(#656A76, 0.05);
@@ -52,27 +52,27 @@ $size-props: (
   "small": (
     "size": 1.75rem, // 28px
     "border-radius": 5px,
-    "icon-size": 1rem,
-    "logo-size": 1.25rem,
-    'extra-size': 1.125rem,
+    "icon-size": 1rem, // 16px
+    "logo-size": 1.125rem, // 18px
+    'extra-size': 1.125rem, // 18px
     '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,
+      "icon-size": 1.5rem, // 24px
+      "logo-size": 1.75rem, // 28px
+      'extra-size': 1.5rem, // 24px
       '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,
+    "icon-size": 1.5rem, // 24px
+    "logo-size": 2rem, // 32px
+    'extra-size': 1.5rem, // 24px
     'extra-border-radius': 5px,
     'extra-icon-size': 1rem,
   )
@@ -111,19 +111,9 @@ $size-props: (
 // LOGO - COLOR
 
 .hds-icon-tile--logo {
+  // notice: we are using colored icons so we don't need to set the "color" property here
   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
@@ -137,10 +127,20 @@ $size-props: (
   }
 
   @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}-foreground);
+    @if ($product == 'hcp') {
+      // exception for HCP (we use neutral colors, we don't have specific product colors for foreground/background)
+      // notice: at the moment we don't have a token for that, that's why we're using an hex value
+      &.hds-icon-tile--color-hcp {
+        background-color: var(--token-color-neutral-background-secondary);
+        border-color: var(--token-color-neutral-border-primary);
+        color: var(--token-color-palette-#{$product}-brand);
+      }
+    } @else {
+      &.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}-foreground);
+      }
     }
   }
 }