@hashicorp/design-system-components 1.8.0 → 2.0.0

package/app/styles/mixins/_button.scss

@@ -0,0 +1,280 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+$hds-button-sizes: ( "small", "medium", "large" );
+$hds-button-border-radius: 5px;
+$hds-button-border-width: 1px;
+$hds-button-focus-border-width: 3px;
+
+// these values later may come from the design tokens
+$size-props: (
+  "small": (
+    "font-size": 0.8125rem, // 13px;
+    "line-height": 0.875rem, // 14px - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)
+    "min-height": 1.75rem,  // 28px
+    "padding": 0.375rem 0.6875rem, // 6px 11px - here we're taking into account the 1px border
+    "icon-size": 0.75rem, // 12px
+  ),
+  "medium": (
+    "font-size": 0.875rem, // 14px
+    "line-height": 1rem,// 16px
+    "min-height": 2.25rem, // 36px
+    "padding": 0.5625rem 0.9375rem, // 9px 15px - here we're taking into account the 1px border
+    "icon-size": 1rem, // 16px
+  ),
+  "large": (
+    "font-size": 1rem, // 16px
+    "line-height": 1.5rem, // 24px
+    "min-height": 3rem, // 48px
+    "padding": 0.6875rem 1.1875rem, // 11px 19px - here we're taking into account the 1px border
+    "icon-size": 1.5rem, // 24px
+  )
+);
+
+@mixin hds-button() {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  font-family: var(--token-typography-font-stack-text);
+  text-decoration: none;
+  border: $hds-button-border-width solid transparent; // We need this to be transparent for a11y
+  border-radius: $hds-button-border-radius;
+  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; // We need this to be transparent for a11y
+  isolation: isolate;
+}
+
+@mixin hds-button-state-disabled() {
+  color: var(--token-color-foreground-disabled);
+  background-color: var(--token-color-surface-faint);
+  border-color: var(--token-color-border-primary);
+  box-shadow: none;
+  cursor: not-allowed;
+
+  &::before {
+    border-color: transparent;
+  }
+}
+
+@mixin hds-button-state-focus() {
+  box-shadow: none;
+
+  &::before {
+    // 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;
+    position: absolute;
+    top: -$shift;
+    right: -$shift;
+    bottom: -$shift;
+    left: -$shift;
+    z-index: -1;
+    border: $hds-button-focus-border-width solid transparent;
+    border-radius: $hds-button-border-radius + $hds-button-focus-border-width;
+    content: "";
+  }
+}
+
+@mixin hds-button-color-primary() {
+  color: var(--token-color-foreground-high-contrast);
+  background-color: var(--token-color-palette-blue-200);
+  border-color: var(--token-color-palette-blue-300);
+  box-shadow: var(--token-elevation-low-box-shadow);
+
+  &:hover,
+  &.mock-hover {
+    color: var(--token-color-foreground-high-contrast);
+    background-color: var(--token-color-palette-blue-300);
+    border-color: var(--token-color-palette-blue-400);
+    cursor: pointer;
+  }
+
+  &:focus,
+  &.mock-focus {
+    color: var(--token-color-foreground-high-contrast);
+    background-color: var(--token-color-palette-blue-200);
+    border-color: var(--token-color-focus-action-internal);
+
+    &::before {
+      // 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;
+      top: -$shift;
+      right: -$shift;
+      bottom: -$shift;
+      left: -$shift;
+      border-color: var(--token-color-focus-action-external);
+      border-radius: $hds-button-border-radius + $hds-button-focus-border-width + 2px;
+    }
+  }
+
+  &:active,
+  &.mock-active {
+    color: var(--token-color-foreground-high-contrast);
+    background-color: var(--token-color-palette-blue-400);
+    border-color: var(--token-color-palette-blue-400);
+    box-shadow: none;
+
+    &::before {
+      border-color: transparent;
+    }
+  }
+}
+
+@mixin hds-button-color-secondary() {
+  color: var(--token-color-foreground-primary);
+  background-color: var(--token-color-surface-faint);
+  border-color: var(--token-color-border-strong);
+  box-shadow: var(--token-elevation-low-box-shadow);
+
+  &:hover,
+  &.mock-hover {
+    color: var(--token-color-foreground-primary);
+    background-color: var(--token-color-surface-primary);
+    border-color: var(--token-color-border-strong);
+    cursor: pointer;
+  }
+
+  &:focus,
+  &.mock-focus {
+    color: var(--token-color-foreground-primary);
+    background-color: var(--token-color-surface-faint);
+    border-color: var(--token-color-focus-action-internal);
+
+    &::before {
+      border-color: var(--token-color-focus-action-external);
+    }
+  }
+
+  &:active,
+  &.mock-active {
+    color: var(--token-color-foreground-primary);
+    background-color: var(--token-color-surface-interactive-active);
+    border-color: var(--token-color-border-strong);
+    box-shadow: none;
+
+    &::before {
+      border-color: transparent;
+    }
+  }
+}
+
+@mixin hds-button-color-tertiary() {
+  color: var(--token-color-foreground-action);
+  background-color: transparent;
+  border-color: transparent;
+
+  &:hover,
+  &.mock-hover {
+    color: var(--token-color-foreground-action-hover);
+    background-color: var(--token-color-surface-primary);
+    border-color: var(--token-color-border-strong);
+    cursor: pointer;
+  }
+
+  &:focus,
+  &.mock-focus {
+    color: var(--token-color-foreground-action);
+    border-color: var(--token-color-focus-action-internal);
+
+    &::before {
+      border-color: var(--token-color-focus-action-external);
+    }
+  }
+
+  &:active,
+  &.mock-active {
+    color: var(--token-color-foreground-action-active);
+    background-color: var(--token-color-surface-interactive-active);
+    border-color: var(--token-color-border-strong);
+    box-shadow: none;
+
+    &::before {
+      border-color: transparent;
+    }
+  }
+
+  //
+  // IMPORTANT: we need to use also the [disabled] selector because if the "disabled" attribute is applied to a "Button as link",
+  // the ":disabled" pseudo-selector is not applied to the element in the browser (rightly) because a link can't be disabled
+  // but from the product perspective there may be use cases where they need to have a "Button as link" that looks disabled anyway
+  //
+  &:disabled,
+  &[disabled],
+  &.mock-disabled,
+  &:disabled:focus,
+  &[disabled]:focus,
+  &.mock-disabled:focus,
+  &:disabled:hover,
+  &[disabled]:hover,
+  &.mock-disabled:hover {
+    background-color: transparent;
+    border-color: transparent;
+
+    &::before {
+      border-color: transparent;
+    }
+  }
+}
+
+@mixin hds-button-color-critical() {
+  color: var(--token-color-foreground-critical-on-surface);
+  background-color: var(--token-color-surface-critical);
+  border-color: var(--token-color-foreground-critical-on-surface);
+  box-shadow: var(--token-elevation-low-box-shadow);
+
+  &:hover,
+  &.mock-hover {
+    color: var(--token-color-foreground-high-contrast);
+    background-color: var(--token-color-palette-red-300);
+    border-color: var(--token-color-palette-red-400);
+    cursor: pointer;
+  }
+
+  &:focus,
+  &.mock-focus {
+    color: var(--token-color-foreground-critical-on-surface);
+    background-color: var(--token-color-surface-critical);
+    border-color: var(--token-color-focus-critical-internal);
+
+    &::before {
+      border-color: var(--token-color-focus-critical-external);
+    }
+  }
+
+  &:active,
+  &.mock-active {
+    color: var(--token-color-foreground-high-contrast);
+    background-color: var(--token-color-palette-red-400);
+    border-color: var(--token-color-palette-red-400);
+    box-shadow: none;
+
+    &::before {
+      border-color: transparent;
+    }
+  }
+}
+
+@mixin hds-button-size-classes($blockName) {
+  @each $size in $hds-button-sizes {
+    .#{$blockName}--size-#{$size} {
+      min-height: map-get($size-props, $size, "min-height");
+      padding: map-get($size-props, $size, "padding");
+
+      .#{$blockName}__icon {
+        width: map-get($size-props, $size, "icon-size");
+        height: map-get($size-props, $size, "icon-size");
+      }
+
+      .#{$blockName}__text {
+        font-size: map-get($size-props, $size, "font-size");
+        line-height: map-get($size-props, $size, "line-height");
+      }
+    }
+  }
+}

package/blueprints/hds-component-test/index.js

@@ -64,7 +64,9 @@ const updateDummyAppCSS = (options) => {
     firstComponentImportIndex,
     lastComponentImportIndex + 1
   );
-  importLinesArray.push(`@import "./pages/${getDummyCSSFileName(name)}";`);
+  importLinesArray.push(
+    `@import "./showcase-pages/${getDummyCSSFileName(name)}";`
+  );
   const newImportLinesArray = importLinesArray
     .filter((line, index, self) => self.indexOf(line) === index)
     .sort();
@@ -126,6 +128,6 @@ const getRoutedModuleName = (name) => {
 
 const getDummyCSSFileName = (name) => {
   const parts = name.split('/');
-  const fileName = `db-${parts.pop()}`;
+  const fileName = `${parts.pop()}`;
   return `${parts.concat([fileName]).join('/')}`;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "1.8.0",
+  "version": "2.0.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -37,6 +37,7 @@
     "test:ember:percy": "percy exec ember test"
   },
   "dependencies": {
+    "@ember/render-modifiers": "^2.0.5",
     "@hashicorp/design-system-tokens": "^1.4.1",
     "@hashicorp/ember-flight-icons": "^3.0.2",
     "dialog-polyfill": "^0.5.6",
@@ -60,7 +61,7 @@
     "@embroider/test-setup": "^2.0.2",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@percy/cli": "^1.20.1",
+    "@percy/cli": "^1.21.0",
     "@percy/ember": "^4.2.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
@@ -99,7 +100,7 @@
     "stylelint": "^14.16.1",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard-scss": "^5.0.0",
-    "webpack": "^5.75.0"
+    "webpack": "^5.76.0"
   },
   "engines": {
     "node": "12.* || 14.* || >= 16"