@hashicorp/design-system-components 1.0.3 → 1.1.0

package/app/styles/components/stepper/step-indicator.scss

@@ -9,15 +9,16 @@ $hds-stepper-indicator-step-size: 24px;
 
 // Base stepper indicator styling
 .hds-stepper-indicator-step {
-  height: $hds-stepper-indicator-step-size;
   position: relative;
   width: $hds-stepper-indicator-step-size;
+  height: $hds-stepper-indicator-step-size;
 }
 
 .hds-stepper-indicator-step__svg-hexagon {
-  filter: drop-shadow(0 1px 1px rgba(101, 106, 118, 0.05));
-  height: 100%;
   width: 100%;
+  height: 100%;
+  filter: drop-shadow(0 1px 1px rgba(101, 106, 118, 5%));
+
   path {
     fill: --status-fill-color;
     stroke: --status-stroke-color;
@@ -25,32 +26,32 @@ $hds-stepper-indicator-step-size: 24px;
 }
 
 .hds-stepper-indicator-step__status {
-  align-items: center;
-  display: flex;
-  justify-content: center;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .hds-stepper-indicator-step__icon {
-  color: --status-text-color;
   width: 12px;
   height: 12px;
+  color: --status-text-color;
 }
 
 .hds-stepper-indicator-step__text {
+  width: 20px;
+  overflow: hidden;
   color: --status-text-color;
-  font-family: var(--token-typography-font-stack-text);
   font-weight: var(--token-typography-font-weight-medium);
   font-size: 0.8125rem;
-  overflow: hidden;
+  font-family: var(--token-typography-font-stack-text);
+  white-space: nowrap;
   text-align: center;
   user-select: none;
-  white-space: nowrap;
-  width: 20px;
 }
 
 // STATUS
@@ -86,7 +87,8 @@ $non-interactive-props: (
   .hds-stepper-indicator-step--status-#{$status} {
     .hds-stepper-indicator-step__status {
       color: map-get($non-interactive-props, $status, "text-color");
-    };
+    }
+
     .hds-stepper-indicator-step__svg-hexagon path {
       fill: map-get($non-interactive-props, $status, "fill-color");
       stroke: map-get($non-interactive-props, $status, "stroke-color");
@@ -138,41 +140,44 @@ $status-props: (
 
 .hds-stepper-indicator-step--is-interactive {
   cursor: pointer;
-  
-  @each $status in $hds-stepper-indicator-step-statuses {    
+
+  @each $status in $hds-stepper-indicator-step-statuses {
     // For each status set the text, svg fill, and svg stroke color based on $status-props
     &.hds-stepper-indicator-step--status-#{$status} {
       .hds-stepper-indicator-step__status {
         color: map-get($status-props, $status, "text-color-default");
       }
+
       .hds-stepper-indicator-step__svg-hexagon path {
         fill: map-get($status-props, $status, "fill-color-default");
         stroke: map-get($status-props, $status, "stroke-color-default");
       }
-      
+
       &:hover,
       &.mock-hover {
         .hds-stepper-indicator-step__status {
           color: map-get($status-props, $status, "text-color-hover");
         }
+
         .hds-stepper-indicator-step__svg-hexagon {
           path {
             fill: map-get($status-props, $status, "fill-color-hover");
             stroke: map-get($status-props, $status, "stroke-color-hover");
-          };
+          }
         }
       }
-      
+
       &:active,
       &.mock-active {
         .hds-stepper-indicator-step__status {
           color: map-get($status-props, $status, "text-color-active");
         }
+
         .hds-stepper-indicator-step__svg-hexagon {
           path {
             fill: map-get($status-props, $status, "fill-color-active");
             stroke: map-get($status-props, $status, "stroke-color-active");
-          };
+          }
         }
       }
     }

package/app/styles/components/stepper/task-indicator.scss

@@ -9,62 +9,62 @@ $hds-stepper-indicator-task-size: 16px;
 
 // Determine states and corresponding styles
 $status-props: (
-    "incomplete": (
-        "color-default": var(--token-color-palette-neutral-300),
-        "color-hover": var(--token-color-palette-blue-300),
-        "color-active": var(--token-color-palette-blue-400),
-    ),
-    "progress": (
-        "color-default": var(--token-color-palette-blue-200),
-        "color-hover": var(--token-color-palette-blue-300),
-        "color-active": var(--token-color-palette-blue-400),
-    ),
-    "processing": (
-        "color-default": var(--token-color-palette-blue-200),
-        "color-hover": var(--token-color-palette-blue-300),
-        "color-active": var(--token-color-palette-blue-400),
-    ),
-    "complete": (
-        "color-default": var(--token-color-palette-green-200),
-        "color-hover": var(--token-color-palette-green-300),
-        "color-active": var(--token-color-palette-green-400),
-    )
+  "incomplete": (
+    "color-default": var(--token-color-palette-neutral-300),
+    "color-hover": var(--token-color-palette-blue-300),
+    "color-active": var(--token-color-palette-blue-400),
+  ),
+  "progress": (
+    "color-default": var(--token-color-palette-blue-200),
+    "color-hover": var(--token-color-palette-blue-300),
+    "color-active": var(--token-color-palette-blue-400),
+  ),
+  "processing": (
+    "color-default": var(--token-color-palette-blue-200),
+    "color-hover": var(--token-color-palette-blue-300),
+    "color-active": var(--token-color-palette-blue-400),
+  ),
+  "complete": (
+    "color-default": var(--token-color-palette-green-200),
+    "color-hover": var(--token-color-palette-green-300),
+    "color-active": var(--token-color-palette-green-400),
+  )
 );
 
 // Base styling for indicator::task
 .hds-stepper-indicator-task {
-    align-items: center;
-    color: var(--token-color-foreground-strong);
-    display: flex;
-    height: $hds-stepper-indicator-task-size;
-    justify-content: center;
-    position: relative;
-    width: $hds-stepper-indicator-task-size;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $hds-stepper-indicator-task-size;
+  height: $hds-stepper-indicator-task-size;
+  color: var(--token-color-foreground-strong);
 }
 
 .hds-stepper-indicator-task__icon {
-    height: 12px;
-    width: 12px;
+  width: 12px;
+  height: 12px;
 }
 
 .hds-stepper-indicator-task--is-interactive {
-    cursor: pointer;
+  cursor: pointer;
 
-    @each $status in $hds-stepper-indicator-task-statuses {
-        // For each status set the icon color based on the $status-props
-        &.hds-stepper-indicator-task--status-#{$status} {
-            color: map-get($status-props, $status, "color-default");
-            &:hover, 
-            &.mock-hover { 
-                color: map-get($status-props, $status, "color-hover");
-            };
-            &:active,
-            &.mock-active {
-                color: map-get($status-props, $status, "color-active");
-            };
-        }
-    }
-}
+  @each $status in $hds-stepper-indicator-task-statuses {
+    // For each status set the icon color based on the $status-props
+    &.hds-stepper-indicator-task--status-#{$status} {
+      color: map-get($status-props, $status, "color-default");
 
+      &:hover,
+      &.mock-hover {
+        color: map-get($status-props, $status, "color-hover");
+      }
 
+      &:active,
+      &.mock-active {
+        color: map-get($status-props, $status, "color-active");
+      }
+    }
+  }
+}
 

package/app/styles/components/tag.scss

@@ -11,47 +11,47 @@
 $hds-tag-border-radius: 50px;
 
 .hds-tag {
+  display: inline-flex;
   align-items: stretch;
-  background-color: var(--token-color-surface-interactive);
-  border: 1px solid var(--token-color-border-strong);
-  border-radius: $hds-tag-border-radius;
   color: var(--token-color-foreground-primary);
-  display: inline-flex;
-  font-family: var(--token-typography-font-stack-text);
-  font-size: 0.8125rem; // 13px
   font-weight: var(--token-typography-font-weight-medium);
+  font-size: 0.8125rem; // 13px
+  font-family: var(--token-typography-font-stack-text);
   line-height: 1rem; // 16px
   vertical-align: middle;
+  background-color: var(--token-color-surface-interactive);
+  border: 1px solid var(--token-color-border-strong);
+  border-radius: $hds-tag-border-radius;
 }
 
 .hds-tag__dismiss {
   flex: 0 0 auto;
+  margin: 0; // reset default button margin
+  padding: 6px 2px 6px 8px;
+  border: none; // reset default button border
   border-radius: inherit;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  border: none; // reset default button border
-  margin: 0; // reset default button margin
-  padding: 6px 2px 6px 8px;
 }
 
 .hds-tag__dismiss-icon {
-  color: var(--token-color-foreground-primary);
-  height: 12px;
   width: 12px;
+  height: 12px;
+  color: var(--token-color-foreground-primary);
 }
 
 .hds-tag__text,
 .hds-tag__link {
-  border-radius: inherit;
   flex: 1 0 0;
   padding: 3px 10px 5px 10px;
+  border-radius: inherit;
 }
 
 .hds-tag__dismiss ~ .hds-tag__text,
 .hds-tag__dismiss ~ .hds-tag__link {
+  padding: 3px 8px 5px 6px;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  padding: 3px 8px 5px 6px;
 }
 
 // INTERACTIVE ELEMENTS
@@ -67,7 +67,7 @@ $hds-tag-border-radius: 50px;
   }
 
   &:active,
-  &.mock-active{
+  &.mock-active {
     background-color: var(--token-color-surface-interactive-active);
   }
 
@@ -90,7 +90,7 @@ $hds-tag-border-radius: 50px;
     }
 
     &:active,
-    &.mock-active{
+    &.mock-active {
       color: var(--token-color-foreground-action-active);
     }
   }

package/app/styles/components/toast.scss

@@ -6,11 +6,11 @@
 //
 
 .hds-toast {
-  // we apply an elevation to the "alert/inline" element
-  box-shadow: var(--token-elevation-higher-box-shadow);
+  width: fit-content;
 
   // per design specs
   min-width: min(360px, 80vw);
   max-width: min(500px, 80vw);
-  width: fit-content;
+  // we apply an elevation to the "alert/inline" element
+  box-shadow: var(--token-elevation-higher-box-shadow);
 }

package/app/styles/mixins/_focus-ring.scss

@@ -27,20 +27,20 @@
 }
 
 @mixin hds-focus-ring-with-pseudo-element($top: 0, $right: 0, $bottom: 0, $left: 0, $radius: 5px, $color: action) {
-  isolation: isolate; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container)
+  position: relative;
   outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
   outline-color: transparent;
-  position: relative;
+  isolation: isolate; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container)
 
   &::before {
-    border-radius: $radius;
-    bottom: $bottom;
-    content: '';
-    left: $left;
     position: absolute;
-    right: $right;
     top: $top;
+    right: $right;
+    bottom: $bottom;
+    left: $left;
     z-index: -1;
+    border-radius: $radius;
+    content: "";
   }
 
   // default focus for browsers that still rely on ":focus"
@@ -69,4 +69,4 @@
       box-shadow: none;
     }
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -23,6 +23,8 @@
     "build": "ember build --environment=production",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
     "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
+    "lint:css": "stylelint \"app/styles/**/*.scss\"",
+    "lint:css:fix": "npm-run-all \"lint:css --fix\"",
     "lint:hbs": "ember-template-lint .",
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
@@ -34,8 +36,8 @@
     "test:ember:percy": "percy exec ember test"
   },
   "dependencies": {
-    "@hashicorp/design-system-tokens": "^1.0.0",
-    "@hashicorp/ember-flight-icons": "^2.0.11",
+    "@hashicorp/design-system-tokens": "^1.0.1",
+    "@hashicorp/ember-flight-icons": "^2.0.12",
     "ember-auto-import": "^2.4.1",
     "ember-cli-babel": "^7.26.11",
     "ember-cli-htmlbars": "^6.0.1",
@@ -50,8 +52,8 @@
     "@embroider/test-setup": "^1.5.0",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
-    "@percy/cli": "^1.9.0",
-    "@percy/ember": "^3.0.1",
+    "@percy/cli": "^1.10.3",
+    "@percy/ember": "^4.0.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
     "ember-a11y-refocus": "^2.1.0",
@@ -70,6 +72,7 @@
     "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.2",
     "ember-page-title": "^7.0.0",
+    "ember-power-select": "^6.0.0",
     "ember-prism": "^0.12.0",
     "ember-qunit": "^5.1.5",
     "ember-resolver": "^8.0.3",
@@ -91,6 +94,11 @@
     "prettier": "^2.6.1",
     "qunit": "^2.18.0",
     "qunit-dom": "^2.0.0",
+    "stylelint": "^14.11.0",
+    "stylelint-config-prettier-scss": "0.0.1",
+    "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-config-standard-scss": "^5.0.0",
+    "stylelint-prettier": "^2.0.0",
     "version-bump-prompt": "^6.1.0",
     "webpack": "^5.70.0"
   },