@hashicorp/design-system-components 0.0.14 → 0.0.18

package/.github/pull_request_template.md.

@@ -0,0 +1,26 @@
+## :pushpin: Summary
+
+<!-- TLDR that includes the purpose of the PR e.g. "If merged, this PR..." -->
+
+## :busts_in_silhouette: How to review this PR
+
+<!-- Check one box -->
+
+- [ ] Review commit-by-commit (please copy commit info to "Summary" for clarity)
+- [ ] Review by "Files changed"
+
+## :camera_flash: Screenshots
+
+<!-- A picture is a thousand words -->
+
+## :link: External links
+
+<!-- Asana issues, RFCs, etc. -->
+
+## :memo: Is it documented? 
+
+- [ ] Please confirm that this change is documented on the website!
+
+***
+
+:speech_balloon: Please consider using [conventional comments](https://conventionalcomments.org/) when reviewing this PR.

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

@@ -127,6 +127,9 @@ export default class HdsLinkStandaloneComponent extends Component {
     // 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/components/hds/link-to/standalone.js

@@ -153,6 +153,9 @@ export default class HdsLinkToStandaloneComponent extends Component {
     // 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/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,10 +1,18 @@
-// 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;
 
-$hds-button-sizes: ( 'small', 'medium', 'large' );
 
 .hds-button {
   align-items: center;
@@ -12,7 +20,7 @@ $hds-button-sizes: ( 'small', 'medium', 'large' );
   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;
@@ -23,15 +31,15 @@ $hds-button-sizes: ( 'small', 'medium', 'large' );
   &: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;
@@ -53,11 +61,12 @@ $hds-button-sizes: ( 'small', 'medium', 'large' );
     }
   }
 
-  &.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;
@@ -68,15 +77,18 @@ $hds-button-sizes: ( 'small', 'medium', 'large' );
       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;
   }
@@ -112,15 +124,18 @@ $size-props: (
 
 @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__text {
+      font-size: map-get($size-props, $size, "font-size");
+      line-height: map-get($size-props, $size, "line-height");
+    }
   }
 }
 
@@ -140,7 +155,8 @@ $size-props: (
     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;
@@ -193,7 +209,7 @@ $size-props: (
     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);
@@ -228,7 +244,7 @@ $size-props: (
     color: var(--token-color-palette-neutral-0);
     cursor: pointer;
   }
-  
+
   &:active,
   &.is-active {
     background-color: var(--token-color-critical-background-active);

package/app/styles/components/link/standalone.scss

@@ -1,36 +1,91 @@
-$hds-link-standalone-border-radius: 5px;
+//
+// 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-border-width: 1px;
-$hds-link-standalone-focus-border-width: 3px + $hds-link-standalone-border-width;
 
+$hds-link-standalone-focus-border-radius: 5px;
+$hds-link-standalone-border-width: 1px;
 
 .hds-link-standalone {
   align-items: center;
-  background-color: transparent;
+  background-color: transparent; // needs to exist for a11y
   border: $hds-link-standalone-border-width solid transparent; // needs to exist AND be transparent for a11y
-  border-radius: $hds-link-standalone-border-radius;
   color: var(--token-color-action-foreground-on-faint);
   display: flex;
-  font-family: var(--token-typography-body-base-font-family);
+  font-family: var(--token-typography-font-stack-text);
+  isolation: isolate; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container)
   justify-content: center;
   outline-color: transparent;
-  padding: 0.25rem; // should be 4px; iconPosition will override it on one side
   position: relative;
-  text-decoration: none;
+  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;
+    z-index: -1;
+  }
+
+  &.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": 0.75rem, // 12px
-    "line-height": 0.75,
+    "icon-size": 1rem, // 16px
+    "line-height": 1.231, // ~16px
   ),
   "medium": (
     "font-size": 0.875rem, // 14px
     "icon-size": 1rem, // 16px
-    "line-height": 1, // 16px
+    "line-height": 1.143, // ~16px
   ),
   "large": (
     "font-size": 1rem, // 16px
@@ -51,76 +106,73 @@ $size-props: (
       font-size: map-get($size-props, $size, "font-size");
       line-height: map-get($size-props, $size, "line-height");
     }
-
-  }
-}
-
-.hds-link-standalone__text {
-  flex: 1 0 0;
-  .hds-link-standalone__icon + & {
-    margin-left: 0.375rem;
-  }
-  & +.hds-link-standalone__icon {
-    margin-left: 0.375rem;
   }
 }
 
 // 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--color-primary {
-  color: var(--token-color-action-foreground-on-faint);
-
-  &:visited {
-    color: var(--token-color-action-foreground-on-faint);
+.hds-link-standalone {
+  &:focus,
+  &:focus-visible,
+  &.is-focus {
+    &::before {
+      @include hds-generic-focus-state();
+    }
   }
   &:hover,
   &.is-hover {
-    text-decoration-color: #4E81E8;
     text-decoration: underline;
     transition: text-decoration-color 0.25s ease-in;
   }
-  &:focus,
-  &:focus-visible,
-  &.is-focus {
-    outline: 2px solid transparent;
-    box-shadow: 
-    0 0 0 $hds-link-standalone-border-width var(--token-color-action-border-on-primary), 
-    0 0 0 $hds-link-standalone-focus-border-width #5990FF;
-  }
   &:active,
   &.is-active {
-    color: var(--token-color-action-foreground-high-contrast);
     text-decoration: underline;
-    text-decoration-color: #596987;
+
+  }
+  // remove the focus ring on "active + focused" state (by design)
+  &:focus:active,
+  &:focus-visible:active,
+  &.is-focus.is-active {
     &::before {
-      border-color: transparent;
+      content: none;
+    }
+  }
+
+}
+
+.hds-link-standalone--color-primary {
+  color: var(--token-color-action-foreground-primary);
+
+  &:hover,
+  &.is-hover {
+    color: var(--token-color-action-background-hover);
+    text-decoration-color: #4E81E8; // custom color by design
+  }
+  &:active,
+  &.is-active {
+    color: var(--token-color-action-background-active);
+    text-decoration-color: #396ED6; // custom color by design
+    &::before {
+      background-color: var(--token-color-action-background-faint);
     }
   }
 }
 
 .hds-link-standalone--color-secondary {
-  background-color: transparent;
   color: var(--token-color-neutral-foreground-primary);
 
-  &:focus,
-  &:focus-visible,  
-  &.is-focus {
-    outline: 2px solid transparent;
-    box-shadow: 
-    0 0 0 $hds-link-standalone-border-width var(--token-color-action-border-on-primary), 
-    0 0 0 $hds-link-standalone-focus-border-width #5990FF;
-  }
   &:hover,
   &.is-hover {
-    text-decoration: underline;
-    text-decoration-color: var(--token-color-neutral-foreground-primary);
+    text-decoration-color: #4D4D4F; // custom color by design
   }
-  &:active, 
+  &:active,
   &.is-active {
     color: var(--token-color-neutral-foreground-secondary);
-    text-decoration: underline;
-    text-decoration-color: var(--token-color-neutral-foreground-primary);
-
+    text-decoration-color: #6E7075; // custom color by design
+    &::before {
+      background-color: var(--token-color-palette-neutral-200);
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.0.14",
+  "version": "0.0.18",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -61,7 +61,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@hashicorp/design-system-tokens": "^0.1.0",
+    "@hashicorp/design-system-tokens": "^0.4.3",
     "@hashicorp/ember-flight-icons": "^2.0.0",
     "ember-cli-babel": "^7.26.6",
     "ember-cli-htmlbars": "^5.7.1",
@@ -81,17 +81,20 @@
     "ember-a11y-refocus": "^2.1.0",
     "ember-auto-import": "^2.2.3",
     "ember-cli": "~3.28.4",
+    "ember-cli-clipboard": "^0.15.0",
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-markdown-it-templates": "^0.0.3",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-string-helpers": "^6.1.0",
     "ember-cli-terser": "^4.0.2",
+    "ember-concurrency": "^2.2.0",
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.2",
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-page-title": "^6.2.2",
+    "ember-prism": "^0.12.0",
     "ember-qunit": "^5.1.4",
     "ember-resolver": "^8.0.2",
     "ember-source": "~3.28.0",

package/.node_modules.ember-try/source-map-url/.jshintrc

@@ -1,43 +0,0 @@
-{
-  "bitwise": true,
-  "camelcase": true,
-  "curly": false,
-  "eqeqeq": true,
-  "es3": true,
-  "forin": true,
-  "immed": false,
-  "indent": false,
-  "latedef": "nofunc",
-  "newcap": false,
-  "noarg": true,
-  "noempty": true,
-  "nonew": false,
-  "plusplus": false,
-  "quotmark": false,
-  "undef": true,
-  "unused": "vars",
-  "strict": false,
-  "trailing": true,
-  "maxparams": 5,
-  "maxdepth": false,
-  "maxstatements": false,
-  "maxcomplexity": false,
-  "maxlen": 100,
-
-  "asi": true,
-  "expr": true,
-  "globalstrict": true,
-  "smarttabs": true,
-  "sub": true,
-
-  "node": true,
-  "globals": {
-    "describe": false,
-    "it": false,
-    "before": false,
-    "beforeEach": false,
-    "after": false,
-    "afterEach": false,
-    "define": false
-  }
-}