@hashicorp/design-system-components 0.0.13 → 0.0.17

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

@@ -0,0 +1,161 @@
+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}`);
+
+    // add a class based on the @iconPosition argument
+    classes.push(`hds-link-standalone--icon-position-${this.iconPosition}`);
+
+    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,4 +1,6 @@
+// these are files coming from the 'design-system-tokens' package
 @use "tokens";
+@use "helpers/elevation";
 
 @use "../mixins/generic-focus-state";
 
@@ -7,6 +9,7 @@
 @use "../components/button";
 @use "../components/card";
 @use "../components/icon-tile";
+@use "../components/link/standalone";
 
 .sr-only {
 	border: 0 !important;

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

@@ -17,7 +17,7 @@ $hds-badge-count-border-width: 1px;
   border: $hds-badge-count-border-width solid transparent;
   box-sizing: border-box;
   display: inline-flex;
-  font-family: var(--token-typography-body-base-font-family);
+  font-family: var(--token-typography-font-stack-text);
   max-width: 100%;
 }
 

package/app/styles/components/badge.scss

@@ -28,7 +28,7 @@
 
 .hds-badge__text {
   flex: 1 0 0;
-  font-family: var(--token-typography-body-base-font-family);
+  font-family: var(--token-typography-font-stack-text);
 }
 
 

package/app/styles/components/button.scss

@@ -1,34 +1,26 @@
-// Button Component Styles
+//
+// BUTTON COMPONENT
+//
+// properties within each class are sorted alphabetically
+// notice: pseudo-classes for the states *must* follow the order link > visited > focus > hover > active
+// see https://github.com/hashicorp/design-system-components/issues/132
+//
+//
+
+$hds-button-sizes: ( 'small', 'medium', 'large' );
 
 $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 {
-  @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;
   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);
+  font-family: var(--token-typography-font-stack-text);
   justify-content: center;
   outline-color: transparent; // We need this to be transparent for a11y
   max-width: fit-content;
@@ -39,15 +31,15 @@ $hds-button-focus-border-width: 3px;
   &: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 {
+  &.is-disabled:focus-visible,
+  &:disabled:hover,
+  &[disabled]:hover,
+  &.is-disabled:hover {
     background-color: var(--token-color-palette-neutral-50);
     border-color: var(--token-color-palette-alpha-200);
     box-shadow: none;
@@ -69,11 +61,12 @@ $hds-button-focus-border-width: 3px;
     }
   }
 
-  &.is-focus,
   &:focus,
-  &:focus-visible {
+  &:focus-visible,
+  &.is-focus {
     &::before {
-      // the position absolute is computed from the inside of the border, so we have to take in account the border width
+      // the position absolute of an element is computed from the inside of the border of the container
+      // so we have to take in account the border width of the pseudo-element container itself
       $shift: $hds-button-border-width + $hds-button-focus-border-width;
       border-radius: $hds-button-border-radius + $hds-button-focus-border-width;
       border: $hds-button-focus-border-width solid transparent;
@@ -84,15 +77,18 @@ $hds-button-focus-border-width: 3px;
       position: absolute;
       right: -$shift;
       top: -$shift;
+      z-index: -1;
     }
   }
 }
 
 .hds-button__text {
   flex: 1 0 0;
+
   .hds-button__icon + & {
     margin-left: 0.375rem;
   }
+
   & +.hds-button__icon {
     margin-left: 0.375rem;
   }
@@ -101,42 +97,49 @@ $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;
+// 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
+  )
+);
 
-  .hds-button__icon {
-    height: 1rem;
-    width: 1rem;
-  }
-}
+@each $size in $hds-button-sizes {
+  .hds-button--size-#{$size} {
+    min-height: map-get($size-props, $size, "min-height");
+    padding: map-get($size-props, $size, "padding");
 
-.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: map-get($size-props, $size, "icon-size");
+      width: map-get($size-props, $size, "icon-size");
+    }
 
-  .hds-button__icon {
-    height: 1.5rem;
-    width: 1.5rem;
+    .hds-button__text {
+      font-size: map-get($size-props, $size, "font-size");
+      line-height: map-get($size-props, $size, "line-height");
+    }
   }
 }
 
+
 // 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.
 
@@ -152,7 +155,8 @@ $hds-button-focus-border-width: 3px;
     border-color: var(--token-color-action-border-on-primary);
     color: var(--token-color-palette-neutral-0);
     &::before {
-      // the position absolute is computed from the inside of the border, so we have to take in account the border width
+      // the position absolute of an element is computed from the inside of the border of the container
+      // so we have to take in account the border width of the pseudo-element container itself
       // plus for the primary button we want to have a 2px gap between the button and the focus
       $shift: $hds-button-border-width + $hds-button-focus-border-width + 2px;
       border-radius: $hds-button-border-radius + $hds-button-focus-border-width + 2px;
@@ -205,7 +209,7 @@ $hds-button-focus-border-width: 3px;
     color: var(--token-color-palette-neutral-600);
     cursor: pointer;
   }
-  &:active, 
+  &:active,
   &.is-active {
     background-color: var(--token-color-palette-neutral-200);
     border-color: var(--token-color-palette-alpha-300);
@@ -240,7 +244,7 @@ $hds-button-focus-border-width: 3px;
     color: var(--token-color-palette-neutral-0);
     cursor: pointer;
   }
-  
+
   &:active,
   &.is-active {
     background-color: var(--token-color-critical-background-active);

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/link/standalone.scss

@@ -0,0 +1,166 @@
+//
+// LINK > STANDALONE COMPONENT
+//
+// properties within each class are sorted alphabetically
+// notice: pseudo-classes for the states *must* follow the order link > visited > focus > hover > active
+// see https://github.com/hashicorp/design-system-components/issues/132
+//
+//
+
+@use '../../mixins/generic-focus-state.scss' as *;
+
+$hds-link-standalone-sizes: ( 'small', 'medium', 'large' );
+
+$hds-link-standalone-focus-border-radius: 5px;
+$hds-link-standalone-border-width: 1px;
+
+.hds-link-standalone {
+  align-items: center;
+  background-color: transparent; // needs to exist for a11y
+  border: $hds-link-standalone-border-width solid transparent; // needs to exist AND be transparent for a11y
+  color: var(--token-color-action-foreground-on-faint);
+  display: flex;
+  font-family: var(--token-typography-font-stack-text);
+  justify-content: center;
+  outline-color: transparent;
+  position: relative;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  width: fit-content;
+
+  // this is how much the focus is visually "shifted" from the bounding box of the
+  // notice: you have to take in account also the inset shadow of the focus (see Figma file and also "generic-focus-state" mixin)
+  $hds-link-standalone-focus-shift: 4px;
+  // the position absolute of an element is computed from the inside of the border of the container
+  // so we have to take in account the border width of the pseudo-element container itself
+  $shift: $hds-link-standalone-focus-shift + $hds-link-standalone-border-width;
+  // for visual/optical balance we add an extra 2px to the "shift" near the text (opposite the icon)
+  $shift-extra: $shift + 2px;
+
+  // this is used not only for the focus, but also to increase the clickable area
+  &::before {
+    border-radius: $hds-link-standalone-focus-border-radius;
+    bottom: -$shift;
+    box-sizing: border-box;
+    content: '';
+    left: -$shift;
+    position: absolute;
+    right: -$shift;
+    top: -$shift;
+  }
+
+  &.hds-link-standalone--icon-position-leading::before {
+    right: -$shift-extra;
+  }
+
+  &.hds-link-standalone--icon-position-trailing::before {
+    left: -$shift-extra;
+  }
+}
+
+.hds-link-standalone__text {
+  flex: 1 0 0;
+
+  .hds-link-standalone__icon + & {
+    margin-left: 0.375rem;
+  }
+
+  & +.hds-link-standalone__icon {
+    margin-left: 0.375rem;
+  }
+}
+
+
+// SIZE
+
+// these values later may come from the design tokens
+$size-props: (
+  "small": (
+    "font-size": 0.8125rem, // 13px;
+    "icon-size": 1rem, // 16px
+    "line-height": 1.231, // ~16px
+  ),
+  "medium": (
+    "font-size": 0.875rem, // 14px
+    "icon-size": 1rem, // 16px
+    "line-height": 1.143, // ~16px
+  ),
+  "large": (
+    "font-size": 1rem, // 16px
+    "icon-size": 1.5rem, // 24px
+    "line-height": 1.5, // 24px
+  )
+);
+
+@each $size in $hds-link-standalone-sizes {
+  .hds-link-standalone--size-#{$size} {
+
+    .hds-link-standalone__icon {
+      height: map-get($size-props, $size, "icon-size");
+      width: map-get($size-props, $size, "icon-size");
+    }
+
+    .hds-link-standalone__text {
+      font-size: map-get($size-props, $size, "font-size");
+      line-height: map-get($size-props, $size, "line-height");
+    }
+  }
+}
+
+// COLORS & STATES
+// The "primary" and "secondary" variants share a lot of styles for the interactive states
+// Note: the order of the pseuo-selectors need to stay the way they are
+
+.hds-link-standalone {
+  &:focus,
+  &:focus-visible,
+  &.is-focus {
+    &::before {
+      @include hds-generic-focus-state();
+    }
+  }
+  &:hover,
+  &.is-hover {
+    text-decoration: underline;
+    transition: text-decoration-color 0.25s ease-in;
+    // TODO!
+    // discuss with Heather if she wants that we add calculation for text-decoration offset
+  }
+  &:active,
+  &.is-active {
+    text-decoration: underline;
+
+    // remove the focus ring on "active + focused" state (by design)
+    &::before {
+      content: none;
+    }
+  }
+}
+
+.hds-link-standalone--color-primary {
+  color: var(--token-color-action-foreground-on-faint);
+
+  &:hover,
+  &.is-hover {
+    text-decoration-color: #4E81E8; // custom color by design
+  }
+  &:active,
+  &.is-active {
+    color: var(--token-color-action-foreground-high-contrast);
+    text-decoration-color: #596987; // custom color by design
+  }
+}
+
+.hds-link-standalone--color-secondary {
+  color: var(--token-color-neutral-foreground-primary);
+
+  &:hover,
+  &.is-hover {
+    text-decoration-color: #4D4D4F; // custom color by design
+  }
+  &:active,
+  &.is-active {
+    color: var(--token-color-neutral-foreground-secondary);
+    text-decoration-color: #6E7075; // custom color by design
+  }
+}