@hashicorp/design-system-components 0.0.3 → 0.0.8

package/app/styles/components/button.scss

@@ -0,0 +1,246 @@
+// Button Component Styles
+
+$border-radius: 5px;
+
+// TODO! generalize with the existing mixin in Card component
+@mixin tempElevation() {
+  box-shadow:
+    var(--token-elevation-low-shadow-01-x)
+    var(--token-elevation-low-shadow-01-y)
+    var(--token-elevation-low-shadow-01-blur)
+    var(--token-elevation-low-shadow-01-spread)
+    var(--token-elevation-low-shadow-01-color),
+    var(--token-elevation-low-shadow-02-x)
+    var(--token-elevation-low-shadow-02-y)
+    var(--token-elevation-low-shadow-02-blur)
+    var(--token-elevation-low-shadow-02-spread)
+    var(--token-elevation-low-shadow-02-color)
+  ;
+}
+
+.hds-button {
+  @include tempElevation();
+
+  align-items: center;
+  border: 1px solid transparent; // We need this to be transparent for a11y
+  border-radius: $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);
+  justify-content: center;
+  outline-color: transparent; // We need this to be transparent for a11y
+  max-width: fit-content;
+  position: relative;
+  width: auto;
+
+  // This covers all of the browsers and focus scenarios (due to the custom focus design).
+  &: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 {
+    background-color: var(--token-color-palette-neutral-50);
+    border-color: var(--token-color-palette-alpha-200);
+    box-shadow: none;
+    color: var(--token-color-palette-neutral-400);
+    cursor: not-allowed;
+    outline-color: var(--token-color-palette-alpha-200);
+
+    &::before {
+      border-color: transparent;
+    }
+  }
+
+  &.hds-button--width-full {
+    width: 100%;
+    max-width: 100%;
+
+    .hds-button__text {
+      flex: 0 0 auto;
+    }
+  }
+
+  &.is-focus,
+  &:focus,
+  &:focus-visible {
+    &::before {
+      border-radius: $border-radius + 3px;
+      border: 3px solid transparent;
+      bottom: -4px;
+      box-sizing: border-box;
+      content: '';
+      left: -4px;
+      position: absolute;
+      right: -4px;
+      top: -4px;
+    }
+  }
+}
+
+.hds-button__text {
+  flex: 1 0 0;
+  .hds-button__icon + & {
+    margin-left: 0.375rem;
+  }
+  & +.hds-button__icon {
+    margin-left: 0.375rem;
+  }
+}
+
+
+// SIZE
+
+.hds-button--size-small {
+  font-size: 0.8125rem; // 13px;
+  min-height: 1.75rem;  //28px
+  line-height: 1;
+  padding: 0 1rem;
+  
+  .hds-button__icon {
+    height: 0.75rem; // 12px
+    width: 0.75rem; // 12px
+  }
+}
+
+.hds-button--size-medium {
+  font-size: 0.875rem; // 14px
+  line-height: 1rem; // 16px
+  min-height: 2.25rem; //36px
+  padding: 0.625rem 1rem;
+
+  .hds-button__icon {
+    height: 1rem;
+    width: 1rem;
+  }
+}
+
+.hds-button--size-large {
+  font-size: 1rem; //16px
+  line-height: 1.5rem; // 24px
+  min-height: 3rem; //48px
+  padding: 0.75rem 1.25rem; // 12px 20px
+
+  .hds-button__icon {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+}
+
+// COLORS & STATES
+// Note: the order of the pseuo-selectors need to stay the way they are; it doesn't match the Figma file but it's the correct order for browsers to render the styles correctly.
+
+.hds-button--color-primary {
+  background-color: var(--token-color-action-background-primary);
+  border-color: var(--token-color-action-border-on-primary);
+  color: var(--token-color-palette-neutral-0);
+
+  &:focus,
+  &:focus-visible,
+  &.is-focus {
+    background-color: var(--token-color-action-background-primary);
+    border-color: var(--token-color-action-border-on-primary);
+    color: var(--token-color-palette-neutral-0);
+    &::before {
+      border-color: var(--token-color-action-background-primary);
+      bottom: -6px;
+      left: -6px;
+      right: -6px;
+      top: -6px;
+    }
+  }
+  &:hover,
+  &.is-hover {
+    background-color: var(--token-color-action-background-hover);
+    border-color: var(--token-color-action-border-on-hover);
+    color: var(--token-color-palette-neutral-0);
+    cursor: pointer;
+  }
+  &:active,
+  &.is-active {
+    background-color: var(--token-color-action-background-active);
+    border-color: var(--token-color-action-background-active);
+    box-shadow: none;
+    color: var(--token-color-palette-neutral-0);
+    &::before {
+      border-color: transparent;
+    }
+  }
+}
+
+.hds-button--color-secondary {
+  background-color: var(--token-color-palette-neutral-50);
+  border-color: var(--token-color-palette-alpha-300);
+  color: var(--token-color-palette-neutral-600);
+
+  &:focus,
+  &:focus-visible,
+  &.is-focus {
+    background-color: var(--token-color-palette-neutral-50);
+    border-color: var(--token-color-action-border-on-primary);
+    color: var(--token-color-palette-neutral-600);
+    outline-color: var(--token-color-action-border-on-primary);
+    &::before {
+      border-color: #5990FF;
+    }
+  }
+  &:hover,
+  &.is-hover {
+    background-color: var(--token-color-palette-neutral-0);
+    border-color: var(--token-color-palette-alpha-300);
+    color: var(--token-color-palette-neutral-600);
+    cursor: pointer;
+  }
+  &:active, 
+  &.is-active {
+    background-color: var(--token-color-palette-neutral-200);
+    border-color: var(--token-color-palette-alpha-300);
+    box-shadow: none;
+    color: var(--token-color-palette-neutral-600);
+    &::before {
+      border-color: transparent;
+    }
+  }
+}
+
+.hds-button--color-destructive {
+  background-color: var(--token-color-palette-neutral-50);
+  border-color: var(--token-color-palette-alpha-300);
+  color: var(--token-color-critical-foreground-on-faint);
+
+  &:focus,
+  &:focus-visible,
+  &.is-focus {
+    background-color: var(--token-color-palette-neutral-50);
+    border-color: var(--token-color-critical-border-on-primary);
+    color: var(--token-color-critical-foreground-on-faint);
+    outline-color: var(--token-color-critical-border-on-primary);
+    &::before {
+      border-color: #DD7578;
+    }
+  }
+  &:hover,
+  &.is-hover {
+    background-color: var(--token-color-critical-background-hover);
+    border-color: var(--token-color-critical-border-on-hover);
+    color: var(--token-color-palette-neutral-0);
+    cursor: pointer;
+  }
+  
+  &:active,
+  &.is-active {
+    background-color: var(--token-color-critical-background-active);
+    border-color: var(--token-color-critical-background-active);
+    box-shadow: none;
+    color: var(--token-color-palette-neutral-0);
+    &::before {
+      border-color: transparent;
+    }
+  }
+}

package/app/styles/components/card/container.scss

@@ -0,0 +1,101 @@
+//
+// CARD COMPONENT > CONTAINER
+//
+// properties within each class are sorted alphabetically
+//
+//
+
+// this mixin is used to apply the "elevation" styles to the card container
+// depending on the "elevation level" and if it has a border applied to it.
+// we are mimicking the way this effect is defined in Figma, through a set of
+// multiple drop shadows (also the border is a 1px shadow); we tried using an
+// outline but Safari still doesn't support rounded edges for outlines.
+// for details see: https://www.figma.com/file/oQsMzMMnynfPWpMEt91OpH/?node-id=1988%3A2
+
+@mixin getElevationStyle($level, $has-border: false) {
+  $drop-shadow: false;
+  $border-shadow: false;
+
+  // here we define the "drop-shadow" values (there are two shadows applied)
+  // notice: the "base" level doesn't have a "drop shadow" effect applied (no elevation)
+  @if ($level != 'base') {
+    $drop-shadow:
+      var(--token-elevation-#{$level}-shadow-01-x)
+      var(--token-elevation-#{$level}-shadow-01-y)
+      var(--token-elevation-#{$level}-shadow-01-blur)
+      var(--token-elevation-#{$level}-shadow-01-spread)
+      var(--token-elevation-#{$level}-shadow-01-color),
+      var(--token-elevation-#{$level}-shadow-02-x)
+      var(--token-elevation-#{$level}-shadow-02-y)
+      var(--token-elevation-#{$level}-shadow-02-blur)
+      var(--token-elevation-#{$level}-shadow-02-spread)
+      var(--token-elevation-#{$level}-shadow-02-color)
+    ;
+  }
+
+  // here we define the "border-shadow" values
+  // notice: we create a border via a shadow, so we have zero values for x/y/blur
+  @if ($has-border) {
+    $border-shadow:
+      0
+      0
+      0
+      var(--token-elevation-#{$level}-border-width)
+      var(--token-elevation-#{$level}-border-color);
+  }
+
+  // here we join the two effects in a single box-shadow (depending on the different cases)
+  @if ($drop-shadow and not $border-shadow) {
+    box-shadow: $drop-shadow;
+  } @else if($border-shadow and not $drop-shadow) {
+    box-shadow: $border-shadow;
+  } @else {
+    // notice: we put the "border-shadow" first because the final rendering in the browser looks better
+    // see: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow - "The z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top)."
+    box-shadow: $border-shadow, $drop-shadow;
+  }
+}
+
+$hds-card-container-levels: ( 'base', 'mid', 'high' );
+
+$hds-card-container-border-radius: 6px;
+
+.hds-card__container {
+  background-color: #fff;
+  border-radius: $hds-card-container-border-radius;
+  position: relative;
+}
+
+// LEVEL (elevation style as "drop" + "border" shadow effects)
+
+@each $level in $hds-card-container-levels {
+  .hds-card__container--level-#{$level} {
+    @include getElevationStyle($level);
+
+    &.hds-card__container--has-border {
+      @include getElevationStyle($level, true);
+    }
+  }
+}
+
+
+// BACKGROUND
+
+.hds-card__container--background-neutral-primary {
+  background-color: var(--token-color-neutral-background-primary);
+}
+
+.hds-card__container--background-neutral-secondary {
+  background-color: var(--token-color-neutral-background-secondary);
+}
+
+
+// OVERFLOW
+
+.hds-card__container--overflow-hidden {
+  overflow: hidden;
+}
+
+.hds-card__container--overflow-visible {
+  overflow: visible;
+}

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

@@ -0,0 +1,5 @@
+//
+// CARD COMPONENT
+//
+
+@use "./container";

package/app/styles/components/icon-tile.scss

@@ -0,0 +1,147 @@
+//
+// ICON-TILE
+//
+// properties within each class are sorted alphabetically
+//
+//
+
+ $hds-icon-tile-sizes: ( 'small', 'medium', 'large' );
+ $hds-icon-tile-types: ( 'object','resource','logo' );
+ $hds-icon-tile-colors-products: ( 'boundary', 'consul', 'nomad', 'packer', 'terraform', 'vagrant', 'vault', 'waypoint' );
+
+ $hds-icon-tile-border-width: 1px;
+ $hds-icon-tile-box-shadow: 0px 1px 1px rgba(#656A76, 0.05);
+
+
+.hds-icon-tile {
+  border-radius: 4px;
+  border: $hds-icon-tile-border-width solid transparent;
+  box-shadow: $hds-icon-tile-box-shadow;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+}
+
+.hds-icon-tile__icon,
+.hds-icon-tile__logo {
+  display: flex;
+  margin: auto;
+}
+
+.hds-icon-tile__extra {
+  background-color: var(--token-color-neutral-background-primary);
+  border: 1px solid var(--token-color-palette-alpha-200);
+  bottom: -6px;
+  box-shadow: $hds-icon-tile-box-shadow;
+  box-sizing: content-box; // the border is outside
+  right: -6px;
+  display: flex;
+  position: absolute;
+}
+
+.hds-icon-tile__extra-icon {
+  display: flex;
+  margin: auto;
+  color: var(--token-color-neutral-foreground-primary);
+}
+
+// SIZE
+
+// these values later may come from the design tokens
+$size-props: (
+  "small": (
+    "size": 1.75rem, // 28px
+    "border-radius": 5px,
+    "icon-size": 1rem,
+    "logo-size": 1.25rem,
+    'extra-size': 1.125rem,
+    'extra-border-radius': 4px,
+    'extra-icon-size': 0.75rem,
+  ),
+  "medium": (
+      "size": 2.5rem, // 40px
+      "border-radius": 6px,
+      "icon-size": 1.5rem,
+      "logo-size": 2.25rem,
+      'extra-size': 1.5rem,
+      'extra-border-radius': 5px,
+      'extra-icon-size': 1rem,
+  ),
+  "large": (
+    "size": 3rem, // 48px
+    "border-radius": 6px,
+    "icon-size": 1.5rem,
+    "logo-size": 2.25rem,
+    'extra-size': 1.5rem,
+    'extra-border-radius': 5px,
+    'extra-icon-size': 1rem,
+  )
+);
+
+@each $size in $hds-icon-tile-sizes {
+  .hds-icon-tile--size-#{$size} {
+    width: map-get($size-props, $size, "size");
+    height: map-get($size-props, $size, "size");
+    border-radius: map-get($size-props, $size, "border-radius");
+
+    .hds-icon-tile__icon {
+      height: map-get($size-props, $size, "icon-size");
+      width: map-get($size-props, $size, "icon-size");
+    }
+
+    .hds-icon-tile__logo {
+      height: map-get($size-props, $size, "logo-size");
+      width: map-get($size-props, $size, "logo-size");
+    }
+
+    .hds-icon-tile__extra {
+      border-radius: map-get($size-props, $size, "extra-border-radius");
+      height: map-get($size-props, $size, "extra-size");
+      width: map-get($size-props, $size, "extra-size");
+    }
+
+    .hds-icon-tile__extra-icon {
+      height: map-get($size-props, $size, "extra-icon-size");
+      width: map-get($size-props, $size, "extra-icon-size");
+    }
+  }
+}
+
+
+// LOGO - COLOR
+
+.hds-icon-tile--logo {
+  background-color: var(--token-color-neutral-background-primary);
+  border-color: var(--token-color-neutral-border-primary);
+
+  @each $product in $hds-icon-tile-colors-products {
+    &.hds-icon-tile--color-#{$product} {
+      color: var(--token-color-#{$product}-brand);
+    }
+  }
+
+  // exception for Vault, where the color of the logo needs to be the "alt" one
+  &.hds-icon-tile--color-vault {
+    color: var(--token-color-vault-brand-alt);
+  }
+}
+
+// ICON - COLOR
+
+.hds-icon-tile--icon {
+
+  &.hds-icon-tile--color-neutral {
+    background-color: var(--token-color-neutral-background-secondary);
+    border-color: var(--token-color-neutral-border-primary);
+    color: var(--token-color-neutral-foreground-faint);
+  }
+
+  @each $product in $hds-icon-tile-colors-products {
+    &.hds-icon-tile--color-#{$product} {
+      background: linear-gradient(135deg, var(--token-color-#{$product}-gradient-faint-start) 0%, var(--token-color-#{$product}-gradient-faint-stop) 100%);
+      border-color: var(--token-color-#{$product}-border);
+      color: var(--token-color-#{$product}-brand);
+    }
+  }
+}
+

package/index.js

@@ -1,9 +1,5 @@
 'use strict';
 
-// let Funnel = require('broccoli-funnel');
-// let mergeTrees = require('broccoli-merge-trees');
-// let path = require('path');
-
 module.exports = {
   name: require('./package').name,
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.0.3",
+  "version": "0.0.8",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -52,10 +52,11 @@
     "start": "ember serve",
     "test": "npm-run-all lint test:*",
     "test:ember": "ember test",
-    "test:ember-compatibility": "ember try:each"
+    "test:ember-compatibility": "ember try:each",
+    "test:ember:percy": "percy exec ember test"
   },
   "dependencies": {
-    "@hashicorp/design-system-tokens": "^0.0.3",
+    "@hashicorp/design-system-tokens": "^0.0.13",
     "@hashicorp/ember-flight-icons": "^1.2.0",
     "ember-cli-babel": "^7.26.6",
     "ember-cli-htmlbars": "^5.7.1",
@@ -68,6 +69,8 @@
     "@embroider/test-setup": "^0.41.0",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
+    "@percy/cli": "^1.0.0-beta.70",
+    "@percy/ember": "^3.0.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
     "ember-auto-import": "^2.2.3",
@@ -87,6 +90,7 @@
     "ember-source": "~3.27.2",
     "ember-source-channel-url": "^3.0.0",
     "ember-template-lint": "^3.4.2",
+    "ember-truth-helpers": "^3.0.0",
     "ember-try": "^1.4.0",
     "eslint": "^7.27.0",
     "eslint-config-prettier": "^8.3.0",