@hashicorp/design-system-components 0.12.13 → 1.0.0

package/app/styles/components/form/toggle.scss

@@ -4,11 +4,6 @@
 // properties within each class are sorted alphabetically
 //
 
-@use "sass:math";
-
-$hds-form-toggle-control-width: 32px;
-$hds-form-toggle-control-height: 16px; // for the other controls we use "--token-form-checkbox-size" but in this case we need a Sass variable to do math operations on it
-$hds-form-toggle-border-radius: math.div($hds-form-toggle-control-height, 2);
 
 // "BASE" CONTROL
 
@@ -47,41 +42,54 @@ $hds-form-toggle-border-radius: math.div($hds-form-toggle-control-height, 2);
 // facade (visible)
 
 .hds-form-toggle__facade {
+  background-image: var(--token-form-toggle-background-image-data-url);
   background-repeat: no-repeat;
-  background-position: 2px 50%;
-  background-size: 12px 12px;
-  border-radius: $hds-form-toggle-border-radius;
+  background-position: var(--token-form-toggle-background-image-position-x) 50%;
+  background-size: var(--token-form-toggle-background-image-size) var(--token-form-toggle-background-image-size);
+  border-radius: calc(var(--token-form-toggle-height) / 2);
   // notice: we want to share the border color between the "thumb" and the "track" so we use a local CSS prop for this
-  border: 1px solid var(--border-color);
+  border: var(--token-form-radio-border-width) solid var(--border-color);
   display: block;
-  height: $hds-form-toggle-control-height;
+  height: var(--token-form-toggle-height);
   position: relative;
-  width: $hds-form-toggle-control-width;
-  transition: background 0.2s;
+  width: var(--token-form-toggle-width);
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition-property: all;
+    transition-duration: var(--token-form-toggle-transition-duration);
+    transition-timing-function: var(--token-form-toggle-transition-timing-function);
+  }
 
   // used for the "thumb"
 
   &::after {
-    background-color: #fff;
+    background-color: var(--token-form-control-base-surface-color-default);
     border-radius: 50%;
-    border: 1px solid var(--border-color);
-    width: $hds-form-toggle-control-height;
-    height: $hds-form-toggle-control-height;
+    border: var(--token-form-radio-border-width) solid var(--border-color);
+    width: var(--token-form-toggle-thumb-size);
+    height: var(--token-form-toggle-thumb-size);
     content: '';
-    left: -1px;
+    left: calc(var(--token-form-radio-border-width) * -1);
     position: absolute;
     transform: translate3d(0, 0, 0);
-    transition: transform 0.2s cubic-bezier(0.68, -0.2, 0.265, 1.15), border-color 0.2s ease-in;
-    top: -1px;
+    top: calc(var(--token-form-radio-border-width) * -1);;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition-property: all;
+      transition-duration: var(--token-form-toggle-transition-duration);
+      transition-timing-function: var(--token-form-toggle-transition-timing-function);
+    }
   }
 
   // used for the focus
 
   &::before {
-    $border-width: 3px;
-    $shift: $border-width + 2px; // we need to take in account also the border width of the parent
-    border-radius: $hds-form-toggle-border-radius + $border-width;
-    border-width: $border-width;
+    // notice: to avoid too many nested calc() operation, we have decided to compute directly the values in Sass
+    $outline-width: 3px;
+    $outline-offset: 1px;
+    $shift: $outline-width + $outline-offset + 1px; // here 1px refers to "--token-form-radio-border-width"
+    border-radius: calc(var(--token-form-toggle-height) / 2 + $outline-width + $outline-offset);
+    border-width: $outline-width;
     bottom: -$shift;
     content: "";
     left: -$shift;
@@ -96,18 +104,16 @@ $hds-form-toggle-border-radius: math.div($hds-form-toggle-control-height, 2);
   // base (default)
 
   :not(:checked) + & {
-    --border-color: var(--token-form-control-border-color-default);
-    background-color: var(--token-color-surface-strong); // not like the other controls!
+    --border-color: var(--token-form-control-base-border-color-default);
+    background-color: var(--token-form-toggle-base-surface-color-default); // this is specific for "toggle", is not like the other controls!
   }
   :checked + & {
-    --border-color: var(--token-form-control-border-color-checked);
-    background-color: var(--token-form-control-background-color-checked);
-    // notice: the "tick" color is hardcoded here!
-    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e");
+    --border-color: var(--token-form-control-checked-border-color-default);
+    background-color: var(--token-form-control-checked-surface-color-default);
 
     &::after {
-      $shift: $hds-form-toggle-control-width - $hds-form-toggle-control-height;
-      transform: translate3d($shift, 0, 0);
+      $translation: calc(var(--token-form-toggle-width) - var(--token-form-toggle-thumb-size));
+      transform: translate3d($translation, 0, 0);
     }
   }
 
@@ -115,32 +121,21 @@ $hds-form-toggle-border-radius: math.div($hds-form-toggle-control-height, 2);
 
   :hover:not(:checked) + &,
   .mock-hover:not(:checked) + & {
-    --border-color: var(--token-form-control-border-color-default-hover);
+    --border-color: var(--token-form-control-base-border-color-hover);
   }
   :hover:checked + &,
   .mock-hover:checked + & {
-    --border-color: var(--token-form-control-border-color-checked-hover);
-    background-color: var(--token-form-control-background-color-checked-hover);
+    --border-color: var(--token-form-control-checked-border-color-hover);
+    background-color: var(--token-form-control-checked-border-color-default);
   }
 
   // focus (same for all the states)
 
-  :focus:not(:checked) + &,
-  .mock-focus:not(:checked) + & {
-    --border-color: var(--token-form-control-border-color-default);
-
-    &::before {
-      border-style: solid;
-      border-color: var( --token-color-focus-action-external);
-    }
-  }
-  :focus:checked + &,
-  .mock-focus:checked + & {
-    --border-color: var(--token-form-control-border-color-checked);
-
+  :focus + &,
+  .mock-focus + & {
     &::before {
       border-style: solid;
-      border-color: var( --token-color-focus-action-external);
+      border-color: var(--token-color-focus-action-external);
     }
   }
 
@@ -148,9 +143,8 @@ $hds-form-toggle-border-radius: math.div($hds-form-toggle-control-height, 2);
 
   :disabled:not(:checked) + &,
   :disabled:checked + & {
-    background-color: var(--token-form-control-background-color-disabled);
-    --border-color: var(--token-form-control-border-color-disabled);
-    // notice: the "tick" color is hardcoded here!
-    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e");
+    --border-color: var(--token-form-control-disabled-border-color);
+    background-color: var(--token-form-control-disabled-surface-color);
+    background-image: var(--token-form-toggle-background-image-data-url-disabled);
   }
 }

package/app/styles/components/stepper/index.scss

@@ -0,0 +1,2 @@
+@use './step-indicator.scss';
+@use './task-indicator.scss';

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

@@ -0,0 +1,180 @@
+//
+// STEPPER > INDICATOR > STEP
+//
+// properties within each class are sorted alphabetically
+//
+
+$hds-stepper-indicator-step-statuses: ( "incomplete", "progress", "processing", "complete" );
+$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;
+}
+
+.hds-stepper-indicator-step__svg-hexagon {
+  filter: drop-shadow(0 1px 1px rgba(101, 106, 118, 0.05));
+  height: 100%;
+  width: 100%;
+  path {
+    fill: --status-fill-color;
+    stroke: --status-stroke-color;
+  }
+}
+
+.hds-stepper-indicator-step__status {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.hds-stepper-indicator-step__icon {
+  color: --status-text-color;
+  width: 12px;
+  height: 12px;
+}
+
+.hds-stepper-indicator-step__text {
+  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;
+  text-align: center;
+  user-select: none;
+  white-space: nowrap;
+  width: 20px;
+}
+
+// STATUS
+
+// Non-interactive (default)
+
+// Non-interactive props that correspond with status
+$non-interactive-props: (
+  "incomplete": (
+    "text-color": var(--token-color-foreground-strong),
+    "fill-color": var(--token-color-surface-faint),
+    "stroke-color": var(--token-color-foreground-strong),
+  ),
+  "progress": (
+    "text-color": var(--token-color-foreground-high-contrast),
+    "fill-color": var(--token-color-foreground-strong),
+    "stroke-color": var(--token-color-foreground-strong),
+  ),
+  "processing": (
+    "text-color": var(--token-color-foreground-high-contrast),
+    "fill-color": var(--token-color-foreground-strong),
+    "stroke-color": var(--token-color-foreground-strong),
+  ),
+  "complete": (
+    "text-color": var(--token-color-foreground-high-contrast),
+    "fill-color": var(--token-color-foreground-strong),
+    "stroke-color": var(--token-color-foreground-strong),
+  )
+);
+
+@each $status in $hds-stepper-indicator-step-statuses {
+  // For each status of the non-interactive variant, set the text color, svg fill, and svg stroke colors based on $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");
+    }
+  }
+}
+
+// Interactive
+
+// Determine states/status and corresponding styles
+$status-props: (
+  "incomplete": (
+    "text-color-default": var(--token-color-foreground-primary),
+    "fill-color-default": var(--token-color-surface-interactive),
+    "stroke-color-default": var(--token-color-border-strong),
+    "fill-color-hover": var(--token-color-surface-interactive-hover),
+    "fill-color-active": var(--token-color-surface-interactive-active),
+  ),
+  "progress": (
+    "text-color-default": var(--token-color-foreground-high-contrast),
+    "fill-color-default": var(--token-color-palette-blue-200),
+    "stroke-color-default": var(--token-color-palette-blue-300),
+    "fill-color-hover": var(--token-color-palette-blue-300),
+    "stroke-color-hover": var(--token-color-palette-blue-400),
+    "fill-color-active": var(--token-color-palette-blue-400),
+    "stroke-color-active": var(--token-color-palette-blue-400),
+  ),
+  "processing": (
+    "text-color-default": var(--token-color-foreground-high-contrast),
+    "fill-color-default": var(--token-color-palette-blue-200),
+    "stroke-color-default": var(--token-color-palette-blue-300),
+    "fill-color-hover": var(--token-color-palette-blue-300),
+    "stroke-color-hover": var(--token-color-palette-blue-400),
+    "fill-color-active": var(--token-color-palette-blue-400),
+    "stroke-color-active": var(--token-color-palette-blue-400),
+  ),
+  "complete": (
+    "text-color-default": var(--token-color-palette-blue-200),
+    "fill-color-default": var(--token-color-palette-blue-50),
+    "stroke-color-default": var(--token-color-palette-blue-300),
+    "text-color-hover": var(--token-color-palette-blue-300),
+    "fill-color-hover": var(--token-color-palette-blue-100),
+    "stroke-color-hover": var(--token-color-palette-blue-400),
+    "text-color-active": var(--token-color-palette-blue-400),
+    "fill-color-active": var(--token-color-palette-blue-100),
+    "stroke-color-active": var(--token-color-palette-blue-400),
+  )
+);
+
+.hds-stepper-indicator-step--is-interactive {
+  cursor: pointer;
+  
+  @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

@@ -0,0 +1,70 @@
+//
+// STEPPER > INDICATOR > TASK
+//
+// properties within each class are sorted alphabetically
+//
+
+$hds-stepper-indicator-task-statuses: ( "incomplete", "progress", "processing", "complete" );
+$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),
+    )
+);
+
+// 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;
+}
+
+.hds-stepper-indicator-task__icon {
+    height: 12px;
+    width: 12px;
+}
+
+.hds-stepper-indicator-task--is-interactive {
+    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");
+            };
+        }
+    }
+}
+
+
+

package/app/styles/components/tag.scss

@@ -0,0 +1,103 @@
+//
+// TAG COMPONENT
+//
+// properties within each class are sorted alphabetically
+//
+//
+
+@use "../mixins/focus-ring" as *;
+
+// we set a higher value than the line-height (~13px) to accommodate cases where the text wraps
+$hds-tag-border-radius: 50px;
+
+.hds-tag {
+  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);
+  line-height: 1rem; // 16px
+  vertical-align: middle;
+}
+
+.hds-tag__dismiss {
+  flex: 0 0 auto;
+  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;
+}
+
+.hds-tag__text,
+.hds-tag__link {
+  border-radius: inherit;
+  flex: 1 0 0;
+  padding: 3px 10px 5px 10px;
+}
+
+.hds-tag__dismiss ~ .hds-tag__text,
+.hds-tag__dismiss ~ .hds-tag__link {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  padding: 3px 8px 5px 6px;
+}
+
+// INTERACTIVE ELEMENTS
+
+.hds-tag__dismiss,
+.hds-tag__link {
+  background-color: var(--token-color-surface-interactive);
+  cursor: pointer;
+
+  &:hover,
+  &.mock-hover {
+    background-color: var(--token-color-surface-interactive-hover);
+  }
+
+  &:active,
+  &.mock-active{
+    background-color: var(--token-color-surface-interactive-active);
+  }
+
+  &:focus,
+  &.mock-focus {
+    @include hds-focus-ring-basic();
+    z-index: 1; // ensures focus is not obscured by adjacent elements
+  }
+}
+
+// COLORS (FOR LINK)
+
+.hds-tag--color-primary {
+  .hds-tag__link {
+    color: var(--token-color-foreground-action);
+
+    &:hover,
+    &.mock-hover {
+      color: var(--token-color-foreground-action-hover);
+    }
+
+    &:active,
+    &.mock-active{
+      color: var(--token-color-foreground-action-active);
+    }
+  }
+}
+
+.hds-tag--color-secondary {
+  .hds-tag__link {
+    color: var(--token-color-foreground-strong);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.12.13",
+  "version": "1.0.0",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -34,8 +34,8 @@
     "test:ember:percy": "percy exec ember test"
   },
   "dependencies": {
-    "@hashicorp/design-system-tokens": "^0.8.1",
-    "@hashicorp/ember-flight-icons": "^2.0.8",
+    "@hashicorp/design-system-tokens": "^1.0.0",
+    "@hashicorp/ember-flight-icons": "^2.0.10",
     "ember-auto-import": "^2.4.1",
     "ember-cli-babel": "^7.26.11",
     "ember-cli-htmlbars": "^6.0.1",
@@ -50,7 +50,7 @@
     "@embroider/test-setup": "^1.5.0",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
-    "@percy/cli": "^1.6.1",
+    "@percy/cli": "^1.6.3",
     "@percy/ember": "^3.0.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",

package/addon/components/hds/form/utils/getAriaDescribedBy.js

@@ -1,21 +0,0 @@
-export function getAriaDescribedBy(element) {
-  let ariaDescribedBy = [];
-
-  // append descriptor's IDs, if provided
-  if (element.descriptors) {
-    element.descriptors.forEach((descriptor) =>
-      ariaDescribedBy.push(descriptor)
-    );
-  }
-
-  // append @extraAriaDescribedBy arg, if provided
-  if (element.args.extraAriaDescribedBy) {
-    ariaDescribedBy.push(element.args.extraAriaDescribedBy);
-  }
-
-  if (ariaDescribedBy.length) {
-    return ariaDescribedBy.join(' ');
-  } else {
-    return null;
-  }
-}

package/app/styles/components/form/_tokens.scss

@@ -1,41 +0,0 @@
-//
-// FORM > TOKENS
-//
-// TODO: this will be removed once we define the correct component-level tokens for the "form controls" component
-//
-
-:root {
-  // INPUT / DEFAULT
-  --token-form-control-foreground-color-default: var(--token-color-foreground-strong);
-  --token-form-control-background-color-default: var(--token-color-surface-interactive);
-  --token-form-control-background-color-default-hover: var(--token-color-surface-interactive-hover);
-  --token-form-control-border-color-default: #8c909c;
-  --token-form-control-border-color-default-hover: #656a76;
-  // INPUT / CHECKED
-  --token-form-control-background-color-checked: #1060FF;
-  --token-form-control-background-color-checked-hover: #0C56E9;
-  --token-form-control-border-color-checked: #0C56E9;
-  --token-form-control-border-color-checked-hover: #0046D1;
-  // INPUT / READONLY
-  --token-form-control-foreground-color-readonly: var(--token-color-foreground-primary);
-  --token-form-control-background-color-readonly: var(--token-color-surface-strong);
-  --token-form-control-border-color-readonly: var(--token-color-border-faint);
-  // INPUT / DISABLED
-  --token-form-control-foreground-color-disabled: var(--token-color-foreground-disabled);
-  --token-form-control-background-color-disabled: var(--token-color-surface-interactive-disabled);
-  --token-form-control-border-color-disabled: var(--token-color-border-primary);
-  // INPUT / INVALID
-  --token-form-control-foreground-color-critical: var(--token-color-foreground-critical-on-surface);
-  --token-form-control-border-color-critical: #c00005;
-  --token-form-control-border-color-critical-hover: #940004;
-  // INPUT / PLACEHOLDER
-  --token-form-control-placeholder-color: var(--token-color-foreground-faint);
-  // INPUT / BORDER SIZING
-  --token-form-control-border-radius: 5px;
-  // LABEL/HELPER-TEXT
-  --token-form-label-foreground-color: var(--token-color-foreground-strong);
-  --token-form-helper-text-foreground-color: var(--token-color-foreground-faint);
-  // CHECKBOX
-  --token-form-checkbox-size: 16px;
-  --token-form-checkbox-border-radius: 3px;
-}