@hashicorp/design-system-components 0.0.1 → 0.0.6

package/README.md

@@ -1,7 +1,10 @@
 design-system-components
 ==============================================================================
 
-Components for the HashiCorp Design System.
+A package containing the components for the HashiCorp Design System.
+
+[![npm version](https://badge.fury.io/js/%40hashicorp%2Fdesign-system-components.svg)](https://badge.fury.io/js/%40hashicorp%2Fdesign-system-components)
+
 
 Compatibility
 ------------------------------------------------------------------------------
@@ -15,7 +18,13 @@ Installation
 ------------------------------------------------------------------------------
 
 ```
-ember install design-system-components
+yarn add @hashicorp/design-system-components
+```
+
+Then add this line to the top of your app's style file (`app.scss` or similar):
+
+```
+@import '@hashicorp/design-system-components';
 ```
 
 Contributing
@@ -27,4 +36,4 @@ See the [Contributing](CONTRIBUTING.md) guide for details.
 License
 ------------------------------------------------------------------------------
 
-This project is licensed under the [MIT License](LICENSE.md).
+This project is licensed under the [Mozilla Public License 2.0](LICENSE.md).

package/addon/components/hds/badge/index.hbs

@@ -1,4 +1,4 @@
-<div class="hds-badge {{this.colorClass}} {{this.typeClass}} {{this.sizeClass}}" ...attributes >
+<div class="hds-badge {{this.sizeClass}} {{this.typeClass}} {{this.colorClass}}" ...attributes>
   {{#if @icon}}
     <div class="hds-badge__icon">
       <FlightIcon @name={{this.icon}} @size="16" @stretched="true" />

package/addon/components/hds/badge/index.js

@@ -1,12 +1,12 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 
-const DEFAULT_SIZE = 'medium';
-const DEFAULT_COLOR = 'neutral';
-const DEFAULT_TYPE = 'filled';
-const SIZES = ['small', 'medium', 'large'];
-const TYPES = ['filled', 'inverted', 'outlined'];
-const COLORS = [
+export const DEFAULT_SIZE = 'medium';
+export const DEFAULT_TYPE = 'filled';
+export const DEFAULT_COLOR = 'neutral';
+export const SIZES = ['small', 'medium', 'large'];
+export const TYPES = ['filled', 'inverted', 'outlined'];
+export const COLORS = [
   'neutral',
   'neutral-dark-mode',
   'highlight',
@@ -17,8 +17,8 @@ const COLORS = [
 
 export default class HdsBadgeIndexComponent extends Component {
   /**
-   * Sets the size for the badge
-   * Accepted sizes: small, medium, large
+   * Sets the size for the component
+   * Accepted values: small, medium, large
    *
    * @param size
    * @type {string}
@@ -29,7 +29,7 @@ export default class HdsBadgeIndexComponent extends Component {
 
     if (size) {
       assert(
-        `@size for ${this.toString()} must be one of the following: ${SIZES.join(
+        `@size for "Hds::Badge" must be one of the following: ${SIZES.join(
           ', '
         )}, received: ${size}`,
         SIZES.includes(size)
@@ -40,16 +40,16 @@ export default class HdsBadgeIndexComponent extends Component {
   }
 
   /**
-   * Get a class to apply to the badge based on the size argument.
+   * Get a class to apply to the component based on the size argument.
    * @method Badge#sizeClass
-   * @return {string} The css class to apply to the Badge.
+   * @return {string} The css class to apply to the component.
    */
   get sizeClass() {
     return `hds-badge--size-${this.size}`;
   }
 
   /**
-   * Sets the type of badge
+   * Sets the type of the component
    * Accepted values: filled, inverted, outlined
    *
    * @param type
@@ -61,7 +61,7 @@ export default class HdsBadgeIndexComponent extends Component {
 
     if (type) {
       assert(
-        `@type for ${this.toString()} must be one of the following: ${TYPES.join(
+        `@type for "Hds::Badge" must be one of the following: ${TYPES.join(
           ', '
         )}, received: ${type}`,
         TYPES.includes(type)
@@ -72,17 +72,17 @@ export default class HdsBadgeIndexComponent extends Component {
   }
 
   /**
-   * Get a class to apply to the badge based on the type argument.
+   * Get a class to apply to the component based on the type argument.
    * @method Badge#typeClass
-   * @return {string} The css class to apply to the Badge.
+   * @return {string} The css class to apply to the component.
    */
   get typeClass() {
     return `hds-badge--type-${this.type}`;
   }
 
   /**
-   * Sets the color scheme for the badge
-   * Accepted colors: neutral, neutral-dark-mode, highlight, success, warning, critical
+   * Sets the color scheme for the component
+   * Accepted values: neutral, neutral-dark-mode, highlight, success, warning, critical
    *
    * @param color
    * @type {string}
@@ -93,7 +93,7 @@ export default class HdsBadgeIndexComponent extends Component {
 
     if (color) {
       assert(
-        `@color for ${this.toString()} must be one of the following: ${COLORS.join(
+        `@color for "Hds::Badge" must be one of the following: ${COLORS.join(
           ', '
         )}, received: ${color}`,
         COLORS.includes(color)
@@ -104,9 +104,9 @@ export default class HdsBadgeIndexComponent extends Component {
   }
 
   /**
-   * Get a class to apply to the badge based on the color argument.
+   * Get a class to apply to the component based on the color argument.
    * @method Badge#colorClass
-   * @return {string} The css class to apply to the Badge.
+   * @return {string} The css class to apply to the component.
    */
   get colorClass() {
     return `hds-badge--color-${this.color}`;

package/addon/components/hds/badge-count/index.hbs

@@ -0,0 +1,3 @@
+<div class="hds-badge-count {{this.sizeClass}} {{this.typeClass}} {{this.colorClass}}" ...attributes >
+  {{@text}}
+</div>

package/addon/components/hds/badge-count/index.js

@@ -0,0 +1,107 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const DEFAULT_SIZE = 'medium';
+export const DEFAULT_TYPE = 'filled';
+export const DEFAULT_COLOR = 'neutral';
+export const SIZES = ['small', 'medium', 'large'];
+export const TYPES = ['filled', 'inverted', 'outlined'];
+export const COLORS = ['neutral', 'neutral-dark-mode'];
+
+export default class HdsBadgeCountIndexComponent extends Component {
+  /**
+   * Sets the size for the component
+   * Accepted sizes: small, medium, large
+   *
+   * @param size
+   * @type {string}
+   * @default 'medium'
+   */
+  get size() {
+    let { size = DEFAULT_SIZE } = this.args;
+
+    if (size) {
+      assert(
+        `@size for "Hds::BadgeCount" must be one of the following: ${SIZES.join(
+          ', '
+        )}, received: ${size}`,
+        SIZES.includes(size)
+      );
+    }
+
+    return size;
+  }
+
+  /**
+   * Get a class to apply to the component based on the size argument.
+   * @method BadgeCount#sizeClass
+   * @return {string} The css class to apply to the component.
+   */
+  get sizeClass() {
+    return `hds-badge-count--size-${this.size}`;
+  }
+
+  /**
+   * Sets the type of the component
+   * Accepted values: filled, inverted, outlined
+   *
+   * @param type
+   * @type {string}
+   * @default 'filled'
+   */
+  get type() {
+    let { type = DEFAULT_TYPE } = this.args;
+
+    if (type) {
+      assert(
+        `@type for "Hds::BadgeCount" must be one of the following: ${TYPES.join(
+          ', '
+        )}, received: ${type}`,
+        TYPES.includes(type)
+      );
+    }
+
+    return type;
+  }
+
+  /**
+   * Get a class to apply to the component based on the type argument.
+   * @method BadgeCount#typeClass
+   * @return {string} The css class to apply to the component.
+   */
+  get typeClass() {
+    return `hds-badge-count--type-${this.type}`;
+  }
+
+  /**
+   * Sets the color scheme for the component
+   * Accepted colors: neutral, neutral-dark-mode
+   *
+   * @param color
+   * @type {string}
+   * @default 'neutral'
+   */
+  get color() {
+    let { color = DEFAULT_COLOR } = this.args;
+
+    if (color) {
+      assert(
+        `@color for "Hds::BadgeCount" must be one of the following: ${COLORS.join(
+          ', '
+        )}, received: ${color}`,
+        COLORS.includes(color)
+      );
+    }
+
+    return color;
+  }
+
+  /**
+   * Get a class to apply to the component based on the color argument.
+   * @method BadgeCount#colorClass
+   * @return {string} The css class to apply to the component.
+   */
+  get colorClass() {
+    return `hds-badge-count--color-${this.color}`;
+  }
+}

package/addon/components/hds/card/container.hbs

@@ -0,0 +1,3 @@
+<div class="hds-card__container {{this.levelClass}} {{this.borderClass}} {{this.backgroundClass}} {{this.overflowClass}}" ...attributes>
+  {{yield}}
+</div>

package/addon/components/hds/card/container.js

@@ -0,0 +1,116 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const DEFAULT_LEVEL = 'base';
+export const DEFAULT_BACKGROUND = 'neutral-primary';
+export const DEFAULT_OVERFLOW = 'hidden';
+export const LEVELS = ['base', 'mid', 'high'];
+export const BACKGROUNDS = ['neutral-primary', 'neutral-secondary'];
+export const OVERFLOWS = ['hidden', 'visible'];
+
+export default class HdsCardContainerComponent extends Component {
+  /**
+   * Sets the "elevation" level for the component
+   * Accepted values: base, mid, high
+   *
+   * @param level
+   * @type {string}
+   * @default 'base'
+   */
+  get level() {
+    let { level = DEFAULT_LEVEL } = this.args;
+
+    if (level) {
+      assert(
+        `@level for "Hds::CardContainer" must be one of the following: ${LEVELS.join(
+          ', '
+        )}, received: ${level}`,
+        LEVELS.includes(level)
+      );
+    }
+
+    return level;
+  }
+
+  /**
+   * Get a class to apply to the component based on the level argument.
+   * @method Card#levelClass
+   * @return {string} The css class to apply to the component.
+   */
+  get levelClass() {
+    return `hds-card__container--level-${this.level}`;
+  }
+
+  /**
+   * Sets the background for the component
+   * Accepted values: neutral-primary, neutral-secondary
+   *
+   * @param background
+   * @type {string}
+   * @default 'base'
+   */
+  get background() {
+    let { background = DEFAULT_BACKGROUND } = this.args;
+
+    if (background) {
+      assert(
+        `@background for "Hds::CardContainer" must be one of the following: ${BACKGROUNDS.join(
+          ', '
+        )}, received: ${background}`,
+        BACKGROUNDS.includes(background)
+      );
+    }
+
+    return background;
+  }
+
+  /**
+   * Get a class to apply to the component based on the background argument.
+   * @method Card#backgroundClass
+   * @return {string} The css class to apply to the component.
+   */
+  get backgroundClass() {
+    return `hds-card__container--background-${this.background}`;
+  }
+
+  /**
+   * Get a class to apply to the component based on the hasBorder argument.
+   * @method Card#hasBorderClass
+   * @return {string} The css class to apply to the component.
+   */
+  get borderClass() {
+    return this.args.hasBorder ? `hds-card__container--has-border` : undefined;
+  }
+
+  /**
+   * Sets the level for the card
+   * Accepted values: visible, hidden
+   *
+   * @param overflow
+   * @type {string}
+   * @default 'hidden'
+   */
+  get overflow() {
+    let { overflow = DEFAULT_OVERFLOW } = this.args;
+
+    if (overflow) {
+      assert(
+        `@overflow for "Hds::CardContainer" must be one of the following: ${OVERFLOWS.join(
+          ', '
+        )}, received: ${overflow}`,
+        OVERFLOWS.includes(overflow)
+      );
+    }
+
+    return overflow;
+  }
+
+  /**
+   * Get a class to apply to the component based on the overflow argument.
+   * @method Card#overflowClass
+   * @return {string} The css class to apply to the component.
+   */
+  get overflowClass() {
+    return `hds-card__container--overflow-${this.overflow}`;
+  }
+}

package/app/components/hds/badge-count/index.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/badge-count/index';

package/app/components/hds/card/container.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/card/container';

package/{addon/styles/addon.scss → app/styles/@hashicorp/design-system-components.scss}

@@ -1,6 +1,8 @@
 @use "tokens";
 
-@use "./components/badge";
+@use "../components/badge";
+@use "../components/badge-count";
+@use "../components/card";
 
 .sr-only {
 	border: 0 !important;

package/app/styles/components/badge-count.scss

@@ -0,0 +1,97 @@
+// BADGE-COUNT
+//
+// properties within each class are sorted alphabetically
+//
+
+@use 'sass:math';
+
+$hds-badge-count-types: ( 'flat','inverted','outlined' );
+$hds-badge-count-sizes: ( 'small', 'medium', 'large' );
+
+$hds-badge-count-border-width: 1px;
+
+
+.hds-badge-count {
+  align-items: center;
+  border: $hds-badge-count-border-width solid transparent;
+  box-sizing: border-box;
+  display: inline-flex;
+  font-family: var(--token-typography-tag-font-family);
+  max-width: 100%;
+}
+
+// SIZE
+
+// these values later may come from the design tokens
+$size-props: (
+  "small": (
+    "font-size": 0.8125rem, // 13px
+    "height": 1.25rem,
+    "line-height": 1.23077, // 16px
+    "padding-vertical": 0.125rem,
+    "padding-horizontal": 0.5rem,
+  ),
+  "medium": (
+    "font-size": 0.8125rem, // 13px
+    "height": 1.5rem,
+    "line-height": 1.23077, // 16px
+    "padding-vertical": 0.25rem,
+    "padding-horizontal": 0.75rem,
+  ),
+  "large": (
+    "font-size": 1rem, // 16px
+    "height": 2rem,
+    "line-height": 1.5, // 24px
+    "padding-vertical": 0.25rem,
+    "padding-horizontal": 0.875rem,
+  )
+);
+
+@each $size in $hds-badge-count-sizes {
+  .hds-badge-count--size-#{$size} {
+    border-radius: math.div(map-get($size-props, $size, "height"), 2);
+    font-size: map-get($size-props, $size, "font-size");
+    line-height: map-get($size-props, $size, "line-height");
+    min-height: map-get($size-props, $size, "height");
+    padding: calc(#{map-get($size-props, $size, "padding-vertical")} - #{$hds-badge-count-border-width}) calc(#{map-get($size-props, $size, "padding-horizontal")} - #{$hds-badge-count-border-width});
+  }
+}
+
+
+// COLOR + TYPE COMBINATIONS
+
+.hds-badge-count--color-neutral {
+  &.hds-badge-count--type-filled {
+    background-color: var(--token-color-palette-neutral-100);
+    color: var(--token-color-palette-neutral-600);
+  }
+
+  &.hds-badge-count--type-inverted {
+    background-color: var(--token-color-palette-neutral-500);
+    color: var(--token-color-palette-neutral-0);
+  }
+
+  &.hds-badge-count--type-outlined {
+    background-color: transparent;
+    border-color: currentColor;
+    color: var(--token-color-palette-neutral-500);;
+  }
+}
+
+.hds-badge-count--color-neutral-dark-mode {
+  &.hds-badge-count--type-filled {
+    background-color: var(--token-color-palette-neutral-500);
+    color: var(--token-color-palette-neutral-0);
+  }
+
+  &.hds-badge-count--type-inverted {
+    background-color: var(--token-color-palette-neutral-50);
+    color: var(--token-color-palette-neutral-600);
+  }
+
+  &.hds-badge-count--type-outlined {
+    background-color: transparent;
+    border-color: currentColor;
+    color: var(--token-color-palette-neutral-0);;
+  }
+}

package/{addon → app}/styles/components/badge.scss

@@ -68,7 +68,7 @@ $size-props: (
 @each $size in $hds-badge-sizes {
   .hds-badge--size-#{$size} {
     min-height: map-get($size-props, $size, "height");
-    padding: calc(map-get($size-props, $size, "padding-vertical") - $hds-badge-border-width) calc(map-get($size-props, $size, "padding-horizontal") - $hds-badge-border-width);
+    padding: calc(#{map-get($size-props, $size, "padding-vertical")} - #{$hds-badge-border-width}) calc(#{map-get($size-props, $size, "padding-horizontal")} - #{$hds-badge-border-width});
 
     .hds-badge__icon {
       height: map-get($size-props, $size, "icon-size");
@@ -91,37 +91,37 @@ $size-props: (
 
 .hds-badge--color-neutral {
   &.hds-badge--type-filled {
-    background-color: var(--token-color-neutral-neutral-100);
-    color: var(--token-color-neutral-neutral-600);
+    background-color: var(--token-color-palette-neutral-100);
+    color: var(--token-color-palette-neutral-600);
   }
 
   &.hds-badge--type-inverted {
-    background-color: var(--token-color-neutral-neutral-500);
-    color: var(--token-color-neutral-neutral-0);
+    background-color: var(--token-color-palette-neutral-500);
+    color: var(--token-color-palette-neutral-0);
   }
 
   &.hds-badge--type-outlined {
     background-color: transparent;
     border-color: currentColor;
-    color: var(--token-color-neutral-neutral-500);;
+    color: var(--token-color-palette-neutral-500);;
   }
 }
 
 .hds-badge--color-neutral-dark-mode {
   &.hds-badge--type-filled {
-    background-color: var(--token-color-neutral-neutral-500);
-    color: var(--token-color-neutral-neutral-0);
+    background-color: var(--token-color-palette-neutral-500);
+    color: var(--token-color-palette-neutral-0);
   }
 
   &.hds-badge--type-inverted {
-    background-color: var(--token-color-neutral-neutral-600);
-    color: var(--token-color-neutral-neutral-50);
+    background-color: var(--token-color-palette-neutral-50);
+    color: var(--token-color-palette-neutral-600);
   }
 
   &.hds-badge--type-outlined {
     background-color: transparent;
     border-color: currentColor;
-    color: var(--token-color-neutral-neutral-0);;
+    color: var(--token-color-palette-neutral-0);;
   }
 }
 
@@ -134,7 +134,7 @@ $size-props: (
 
     &.hds-badge--type-inverted {
       background-color: var(--token-color-#{$color}-background-primary);
-      color: var(--token-color-neutral-neutral-0);
+      color: var(--token-color-palette-neutral-0);
     }
 
     &.hds-badge--type-outlined {

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

@@ -0,0 +1,100 @@
+// 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,4 @@
+// CARD COMPONENT
+//
+
+@use "./container";

package/index.js

@@ -2,4 +2,12 @@
 
 module.exports = {
   name: require('./package').name,
+
+  isDevelopingAddon() {
+    return true;
+  },
+
+  included: function (/* app */) {
+    this._super.included.apply(this, arguments);
+  },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.0.1",
+  "version": "0.0.6",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -55,11 +55,12 @@
     "test:ember-compatibility": "ember try:each"
   },
   "dependencies": {
-    "@hashicorp/design-system-tokens": "^0.0.3",
+    "@hashicorp/design-system-tokens": "^0.0.10",
     "@hashicorp/ember-flight-icons": "^1.2.0",
     "ember-cli-babel": "^7.26.6",
     "ember-cli-htmlbars": "^5.7.1",
-    "ember-cli-sass": "^10.0.1"
+    "ember-cli-sass": "^10.0.1",
+    "sass": "^1.43.4"
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
@@ -98,11 +99,10 @@
     "prettier": "^2.3.0",
     "qunit": "^2.15.0",
     "qunit-dom": "^1.6.0",
-    "sass": "^1.43.4",
     "webpack": "^5.61.0"
   },
   "engines": {
-    "node": "10.* || >= 12"
+    "node": "10.* || >= 12 || >= 14"
   },
   "ember": {
     "edition": "octane"