@hashicorp/design-system-components 0.0.15 → 0.0.19

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/README.md

@@ -27,6 +27,12 @@ Then add this line to the top of your app's style file (`app.scss` or similar):
 @import '@hashicorp/design-system-components';
 ```
 
+Usage
+------------------------------------------------------------------------------
+
+See the dedicated components website: https://design-system-components-hashicorp.vercel.app/
+
+
 Contributing
 ------------------------------------------------------------------------------
 

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

@@ -20,7 +20,7 @@ $hds-button-focus-border-width: 3px;
   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;

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

@@ -20,7 +20,8 @@ $hds-link-standalone-border-width: 1px;
   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-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;
   position: relative;
@@ -124,31 +125,38 @@ $size-props: (
   &.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)
+  }
+  // remove the focus ring on "active + focused" state (by design)
+  &:focus:active,
+  &:focus-visible:active,
+  &.is-focus.is-active {
     &::before {
       content: none;
     }
   }
+
 }
 
 .hds-link-standalone--color-primary {
-  color: var(--token-color-action-foreground-on-faint);
+  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-foreground-high-contrast);
-    text-decoration-color: #596987; // custom color by design
+    color: var(--token-color-action-background-active);
+    text-decoration-color: #396ED6; // custom color by design
+    &::before {
+      background-color: var(--token-color-action-background-faint);
+    }
   }
 }
 
@@ -163,5 +171,8 @@ $size-props: (
   &.is-active {
     color: var(--token-color-neutral-foreground-secondary);
     text-decoration-color: #6E7075; // custom color by design
+    &::before {
+      background-color: var(--token-color-palette-neutral-200);
+    }
   }
 }

package/app/styles/mixins/_generic-focus-state.scss

@@ -1,4 +1,3 @@
 @mixin hds-generic-focus-state() {
-  box-shadow: inset 0px 0px 0px 1px var(--token-color-action-border-on-primary),
-    0px 0px 0px 3px #5990ff; // this is a special color used only for the focus style, to pass color contrast for a11y purpose
+  box-shadow: var(--token-focus-ring-box-shadow);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.0.15",
+  "version": "0.0.19",
   "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.7",
     "@hashicorp/ember-flight-icons": "^2.0.0",
     "ember-cli-babel": "^7.26.6",
     "ember-cli-htmlbars": "^5.7.1",
@@ -81,12 +81,14 @@
     "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",

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