@hashicorp/design-system-components 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @hashicorp/design-system-components
 
+## 1.2.0
+
+### Minor Changes
+
+- [#576](https://github.com/hashicorp/design-system/pull/576) [`ab821911`](https://github.com/hashicorp/design-system/commit/ab821911e8d7f99b2b70e41e06f3fe8f681f9c8f) Thanks [@alex-ju](https://github.com/alex-ju)! - Add `RadioCard` component
+
+### Patch Changes
+
+- [#586](https://github.com/hashicorp/design-system/pull/586) [`55ec4246`](https://github.com/hashicorp/design-system/commit/55ec424615505733159ac420284c47758f0667a3) Thanks [@Dhaulagiri](https://github.com/Dhaulagiri)! - make ember-truth-helpers a dependency
+
+- Updated dependencies [[`55f38cb3`](https://github.com/hashicorp/design-system/commit/55f38cb3a30a6edf8854e53ce3642270fe00efdc), [`258c06d9`](https://github.com/hashicorp/design-system/commit/258c06d952d41696bb8c5b4bab19eb46e4612cdc)]:
+  - @hashicorp/ember-flight-icons@3.0.0
+  - @hashicorp/design-system-tokens@1.1.0
+
 ## 1.1.0
 
 ### Minor Changes

package/addon/components/hds/form/radio-card/description.hbs

@@ -0,0 +1 @@
+<span class="hds-form-radio-card__description hds-typography-body-100" ...attributes>{{yield}}</span>

package/addon/components/hds/form/radio-card/group.hbs

@@ -0,0 +1,26 @@
+<Hds::Form::Fieldset
+  class="hds-form-group--radio-cards"
+  @layout="horizontal"
+  @name={{@name}}
+  @isRequired={{@isRequired}}
+  @isOptional={{@isOptional}}
+  ...attributes
+  as |F|
+>
+  {{! Notice: the order of the elements is not relevant here, because it's controlled at "Hds::Form::Fieldset" component level }}
+  {{yield (hash Legend=F.Legend isRequired=F.isRequired isOptional=F.isOptional)}}
+  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
+  <F.Control>
+    {{yield
+      (hash
+        RadioCard=(component
+          "hds/form/radio-card"
+          name=@name
+          alignment=@alignment
+          controlPosition=@controlPosition
+          extraAriaDescribedBy=F.ariaDescribedBy
+        )
+      )
+    }}
+  </F.Control>
+</Hds::Form::Fieldset>

package/addon/components/hds/form/radio-card/index.hbs

@@ -0,0 +1,20 @@
+<label class={{this.classNames}} {{did-insert this.setAriaDescribedBy}} {{style maxWidth=@maxWidth}}>
+  <span class="hds-form-radio-card__content">
+    {{yield (hash Icon=(component "flight-icon" size="24" isInlineBlock=false))}}
+    {{yield (hash Label=(component "hds/form/radio-card/label"))}}
+    {{yield (hash Badge=(component "hds/badge"))}}
+    {{yield (hash Description=(component "hds/form/radio-card/description"))}}
+    {{yield (hash Generic=(component "hds/yield"))}}
+  </span>
+  <span class="hds-form-radio-card__control-wrapper">
+    <Hds::Form::Radio::Base
+      class="hds-form-radio-card__control"
+      @value={{@value}}
+      name={{@name}}
+      checked={{@checked}}
+      disabled={{@disabled}}
+      aria-describedby={{this.ariaDescribedBy}}
+      ...attributes
+    />
+  </span>
+</label>

package/addon/components/hds/form/radio-card/index.js

@@ -0,0 +1,90 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { assert } from '@ember/debug';
+import { setAriaDescribedBy } from '../utils/setAriaDescribedBy';
+import { schedule } from '@ember/runloop';
+
+export const DEFAULT_CONTROL_POSITION = 'bottom';
+export const DEFAULT_ALIGNMENT = 'left';
+export const CONTROL_POSITIONS = ['bottom', 'left'];
+export const ALIGNMENTS = ['left', 'center'];
+
+export default class HdsFormRadioCardIndexComponent extends Component {
+  @tracked ariaDescribedBy = this.args.extraAriaDescribedBy;
+  @tracked descriptors = [];
+
+  @action
+  setAriaDescribedBy() {
+    // we schedule this afterRender to capture all descriptors registered onInsert
+    schedule('afterRender', () => {
+      setAriaDescribedBy(this);
+    });
+  }
+
+  /**
+   * Sets the position of the control
+   * Accepted values: buttom, left
+   *
+   * @param type
+   * @type {string}
+   * @default 'bottom'
+   */
+  get controlPosition() {
+    let { controlPosition = DEFAULT_CONTROL_POSITION } = this.args;
+
+    assert(
+      `@controlPosition for "Hds::Form::RadioCard" must be one of the following: ${CONTROL_POSITIONS.join(
+        ', '
+      )}; received: ${controlPosition}`,
+      CONTROL_POSITIONS.includes(controlPosition)
+    );
+
+    return controlPosition;
+  }
+
+  /**
+   * Sets the alignment of the content
+   * Accepted values: left, center
+   *
+   * @param alignnment
+   * @type {string}
+   * @default 'left'
+   */
+  get alignment() {
+    let { alignment = DEFAULT_ALIGNMENT } = this.args;
+
+    assert(
+      `@alignment for "Hds::Form::RadioCard" must be one of the following: ${ALIGNMENTS.join(
+        ', '
+      )}; received: ${alignment}`,
+      ALIGNMENTS.includes(alignment)
+    );
+
+    return alignment;
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-form-radio-card'];
+
+    if (this.args.checked) {
+      classes.push('hds-form-radio-card--checked');
+    }
+    if (this.args.disabled) {
+      classes.push('hds-form-radio-card--disabled');
+    }
+
+    // add a class based on the @controlPosition argument
+    classes.push(`hds-form-radio-card--control-${this.controlPosition}`);
+
+    // add a class based on the @alignment argument
+    classes.push(`hds-form-radio-card--align-${this.alignment}`);
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/form/radio-card/label.hbs

@@ -0,0 +1 @@
+<span class="hds-form-radio-card__label hds-typography-display-300 hds-font-weight-bold" ...attributes>{{yield}}</span>

package/app/components/hds/form/radio-card/description.js

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

package/app/components/hds/form/radio-card/group.js

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

package/app/components/hds/form/radio-card/index.js

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

package/app/components/hds/form/radio-card/label.js

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

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

@@ -11,6 +11,7 @@
 @use "./indicator";
 @use "./checkbox";
 @use "./radio";
+@use "./radio-card";
 @use "./select";
 @use "./text-input";
 @use "./textarea";

package/app/styles/components/form/radio-card.scss

@@ -0,0 +1,146 @@
+// FORM > RADIO-CARD
+
+// RadioCard Group
+
+.hds-form-group--radio-cards {
+  .hds-form-group__control-fields-wrapper {
+    margin: calc(-1 * var(--token-form-radiocard-group-gap) / 2);
+  }
+
+  .hds-form-group__legend {
+    margin-bottom: 12px;
+  }
+
+  .hds-form-radio-card {
+    flex: 1;
+    margin: calc(var(--token-form-radiocard-group-gap) / 2);
+  }
+}
+
+// RadioCard
+
+.hds-form-radio-card {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--token-color-surface-primary);
+  border: var(--token-form-radiocard-border-width) solid var(--token-color-border-primary);
+  border-radius: var(--token-form-radiocard-border-radius);
+  box-shadow: var(--token-elevation-mid-box-shadow);
+  cursor: pointer;
+
+  // prevent focus on the form control as it is handled at the card level
+  .hds-form-radio-card__control {
+    outline-color: transparent;
+  }
+
+  // STATES
+
+  &:hover,
+  &.mock-hover {
+    box-shadow: var(--token-elevation-high-box-shadow);
+    transition: var(--token-form-radiocard-transition-duration);
+  }
+
+  &:focus-within,
+  &.mock-focus {
+    border-color: var(--token-color-focus-action-internal);
+    box-shadow: 0 0 0 3px var(--token-color-focus-action-external);
+  }
+
+  &--checked,
+  &.mock-checked {
+    border-color: var(--token-color-focus-action-internal);
+
+    .hds-form-radio-card__control-wrapper {
+      background-color: var(--token-color-surface-action);
+      border-color: var(--token-color-border-action);
+    }
+  }
+
+  &--disabled,
+  &.mock-disabled {
+    background-color: var(--token-color-surface-interactive-disabled);
+    border-color: var(--token-color-border-primary);
+    box-shadow: none;
+    cursor: not-allowed;
+
+    .hds-form-radio-card__control-wrapper {
+      background-color: var(--token-color-surface-interactive-disabled);
+      border-color: var(--token-color-border-primary);
+    }
+  }
+}
+
+// ALIGNMENT
+
+.hds-form-radio-card--align-left {
+  text-align: left;
+}
+
+.hds-form-radio-card--align-center {
+  text-align: center;
+
+  // stylelint-disable-next-line selector-class-pattern
+  .flight-icon {
+    margin: auto;
+  }
+}
+
+// CONTROL POSITION
+
+.hds-form-radio-card--control-bottom {
+  .hds-form-radio-card__control-wrapper {
+    border-top-width: var(--token-form-radiocard-border-width);
+    border-top-style: solid;
+    border-bottom-right-radius: inherit;
+    border-bottom-left-radius: inherit;
+  }
+}
+
+.hds-form-radio-card--control-left {
+  flex-direction: row-reverse;
+
+  .hds-form-radio-card__control-wrapper {
+    display: flex;
+    align-items: center;
+    border-right-width: var(--token-form-radiocard-border-width);
+    border-right-style: solid;
+    border-top-left-radius: inherit;
+    border-bottom-left-radius: inherit;
+  }
+}
+
+.hds-form-radio-card__content {
+  flex: 1;
+  padding: var(--token-form-radiocard-content-padding);
+
+  .hds-badge {
+    margin-bottom: 12px;
+  }
+}
+
+.hds-form-radio-card__label {
+  display: block;
+  margin: 8px 0;
+  color: var(--token-form-label-color);
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+.hds-form-radio-card__description {
+  display: block;
+  color: var(--token-color-foreground-primary);
+}
+
+.hds-form-radio-card__control-wrapper {
+  padding: var(--token-form-radiocard-control-padding);
+  background-color: var(--token-color-surface-faint);
+  border-color: var(--token-color-border-primary);
+}
+
+.hds-form-radio-card__control {
+  display: block;
+  margin: auto;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -36,14 +36,15 @@
     "test:ember:percy": "percy exec ember test"
   },
   "dependencies": {
-    "@hashicorp/design-system-tokens": "^1.0.1",
-    "@hashicorp/ember-flight-icons": "^2.0.12",
+    "@hashicorp/design-system-tokens": "^1.1.0",
+    "@hashicorp/ember-flight-icons": "^3.0.0",
     "ember-auto-import": "^2.4.1",
     "ember-cli-babel": "^7.26.11",
     "ember-cli-htmlbars": "^6.0.1",
     "ember-cli-sass": "^10.0.1",
     "ember-keyboard": "^8.1.0",
     "ember-named-blocks-polyfill": "^0.2.5",
+    "ember-truth-helpers": "^3.0.0",
     "sass": "^1.43.4"
   },
   "devDependencies": {
@@ -52,7 +53,7 @@
     "@embroider/test-setup": "^1.5.0",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
-    "@percy/cli": "^1.10.3",
+    "@percy/cli": "^1.10.4",
     "@percy/ember": "^4.0.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
@@ -63,7 +64,6 @@
     "ember-cli-dependency-checker": "^3.3.0",
     "ember-cli-deprecation-workflow": "^2.1.0",
     "ember-cli-inject-live-reload": "^2.1.0",
-    "ember-cli-markdown-it-templates": "^0.0.3",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-string-helpers": "^6.1.0",
     "ember-cli-terser": "^4.0.2",
@@ -81,7 +81,6 @@
     "ember-style-modifier": "^0.8.0",
     "ember-template-lint": "^4.3.0",
     "ember-template-lint-plugin-prettier": "^4.0.0",
-    "ember-truth-helpers": "^3.0.0",
     "ember-try": "^2.0.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.5.0",
@@ -99,7 +98,6 @@
     "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"
   },
   "engines": {