@hashicorp/design-system-components 1.0.4 → 1.2.0

package/.stylelintignore

@@ -0,0 +1,26 @@
+# unconventional js
+/blueprints/*/files/
+/vendor/
+
+# compiled output
+/dist/
+/tmp/
+
+# dependencies
+/bower_components/
+/node_modules/
+
+# misc
+/coverage/
+!.*
+.*/
+.eslintcache
+.lint-todo/
+
+# ember-try
+/.node_modules.ember-try/
+/bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
+/package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @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
+
+- [#539](https://github.com/hashicorp/design-system/pull/539) [`5b548865`](https://github.com/hashicorp/design-system/commit/5b548865ed1000e5f51c22365a81c858576bd2bd) Thanks [@alex-ju](https://github.com/alex-ju)! - Add custom styles for `ember-power-select` add-on
+
+* [#577](https://github.com/hashicorp/design-system/pull/577) [`2f5a2c21`](https://github.com/hashicorp/design-system/commit/2f5a2c214c25be7fd91c2e73c88fb436f72dbd6f) Thanks [@alex-ju](https://github.com/alex-ju)! - Add small variant to `Hds::Dropdown::ToggleButton`
+
+### Patch Changes
+
+- [#545](https://github.com/hashicorp/design-system/pull/545) [`6d2a6298`](https://github.com/hashicorp/design-system/commit/6d2a6298c407a74a14a11b3426fd60d673d10954) Thanks [@didoo](https://github.com/didoo)! - Small cleanup (reformatting, linting) of the Sass files. Should have zero visual impact on the components.
+
+* [#565](https://github.com/hashicorp/design-system/pull/565) [`0f5247f0`](https://github.com/hashicorp/design-system/commit/0f5247f0f088ad35f877294089d0c69caaffdb37) Thanks [@didoo](https://github.com/didoo)! - added stylelint to the codebase and re-organized CSS declarations
+
+* Updated dependencies [[`0b245333`](https://github.com/hashicorp/design-system/commit/0b24533369ccc2d02aa5c6c8b8ba4f722e07d236)]:
+  - @hashicorp/design-system-tokens@1.0.1
+
 ## 1.0.4
 
 ### Patch Changes

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

@@ -1,7 +1,7 @@
 <div class={{this.classNames}} ...attributes>
   {{#if @icon}}
     <div class="hds-badge__icon">
-      <FlightIcon @name={{this.icon}} @size="16" @stretched="true" />
+      <FlightIcon @name={{this.icon}} @size="16" @stretched={{true}} />
     </div>
   {{/if}}
   {{#if this.isIconOnly}}

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

@@ -30,7 +30,7 @@ export default class HdsBadgeIndexComponent extends Component {
     assert(
       `@size for "Hds::Badge" must be one of the following: ${SIZES.join(
         ', '
-      )}, received: ${size}`,
+      )}; received: ${size}`,
       SIZES.includes(size)
     );
 
@@ -51,7 +51,7 @@ export default class HdsBadgeIndexComponent extends Component {
     assert(
       `@type for "Hds::Badge" must be one of the following: ${TYPES.join(
         ', '
-      )}, received: ${type}`,
+      )}; received: ${type}`,
       TYPES.includes(type)
     );
 
@@ -72,7 +72,7 @@ export default class HdsBadgeIndexComponent extends Component {
     assert(
       `@color for "Hds::Badge" must be one of the following: ${COLORS.join(
         ', '
-      )}, received: ${color}`,
+      )}; received: ${color}`,
       COLORS.includes(color)
     );
 

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

@@ -23,7 +23,7 @@ export default class HdsBadgeCountIndexComponent extends Component {
     assert(
       `@size for "Hds::BadgeCount" must be one of the following: ${SIZES.join(
         ', '
-      )}, received: ${size}`,
+      )}; received: ${size}`,
       SIZES.includes(size)
     );
 
@@ -44,7 +44,7 @@ export default class HdsBadgeCountIndexComponent extends Component {
     assert(
       `@type for "Hds::BadgeCount" must be one of the following: ${TYPES.join(
         ', '
-      )}, received: ${type}`,
+      )}; received: ${type}`,
       TYPES.includes(type)
     );
 
@@ -65,7 +65,7 @@ export default class HdsBadgeCountIndexComponent extends Component {
     assert(
       `@color for "Hds::BadgeCount" must be one of the following: ${COLORS.join(
         ', '
-      )}, received: ${color}`,
+      )}; received: ${color}`,
       COLORS.includes(color)
     );
 

package/addon/components/hds/breadcrumb/item.js

@@ -14,7 +14,7 @@ export default class HdsBreadcrumbItemComponent extends Component {
 
     if (maxWidth) {
       assert(
-        `@maxWidth for "Hds::Breadcrumb::Item" must be a size as number in 'px' or in 'em' (eg. '200px' or '24em'), received: ${maxWidth}`,
+        `@maxWidth for "Hds::Breadcrumb::Item" must be a size as number in 'px' or in 'em' (eg. '200px' or '24em'); received: ${maxWidth}`,
         maxWidth.match(/^\d+(px|em)$/)
       );
 

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

@@ -23,7 +23,7 @@ export default class HdsCardContainerComponent extends Component {
     assert(
       `@level for "Hds::Card::Container" must be one of the following: ${LEVELS.join(
         ', '
-      )}, received: ${level}`,
+      )}; received: ${level}`,
       LEVELS.includes(level)
     );
 
@@ -44,7 +44,7 @@ export default class HdsCardContainerComponent extends Component {
       assert(
         `@levelHover for "Hds::Card::Container" must be one of the following: ${LEVELS.join(
           ', '
-        )}, received: ${levelHover}`,
+        )}; received: ${levelHover}`,
         LEVELS.includes(levelHover)
       );
     }
@@ -66,7 +66,7 @@ export default class HdsCardContainerComponent extends Component {
       assert(
         `@levelActive for "Hds::Card::Container" must be one of the following: ${LEVELS.join(
           ', '
-        )}, received: ${levelActive}`,
+        )}; received: ${levelActive}`,
         LEVELS.includes(levelActive)
       );
     }
@@ -88,7 +88,7 @@ export default class HdsCardContainerComponent extends Component {
     assert(
       `@background for "Hds::Card::Container" must be one of the following: ${BACKGROUNDS.join(
         ', '
-      )}, received: ${background}`,
+      )}; received: ${background}`,
       BACKGROUNDS.includes(background)
     );
 
@@ -109,7 +109,7 @@ export default class HdsCardContainerComponent extends Component {
     assert(
       `@overflow for "Hds::Card::Container" must be one of the following: ${OVERFLOWS.join(
         ', '
-      )}, received: ${overflow}`,
+      )}; received: ${overflow}`,
       OVERFLOWS.includes(overflow)
     );
 

package/addon/components/hds/dropdown/toggle/button.hbs

@@ -18,6 +18,7 @@
   @icon="chevron-down"
   @iconPosition="trailing"
   @color={{this.color}}
+  @size={{@size}}
   ...attributes
   aria-expanded={{if @isOpen "true" "false"}}
   {{on "click" this.onClick}}

package/addon/components/hds/form/field/index.js

@@ -37,7 +37,7 @@ export default class HdsFormFieldIndexComponent extends Component {
     assert(
       `@type for "Hds::Form::Field" must be one of the following: ${LAYOUT_TYPES.join(
         ', '
-      )}, received: ${layout}`,
+      )}; received: ${layout}`,
       LAYOUT_TYPES.includes(layout)
     );
 

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/addon/components/hds/form/text-input/base.js

@@ -28,7 +28,7 @@ export default class HdsFormTextInputBaseComponent extends Component {
     assert(
       `@type for "Hds::Form::TextInput" must be one of the following: ${TYPES.join(
         ', '
-      )}, received: ${type}`,
+      )}; received: ${type}`,
       TYPES.includes(type)
     );
 

package/addon/components/hds/icon-tile/index.hbs

@@ -1,18 +1,18 @@
 <div class={{this.classNames}} aria-hidden="true" ...attributes>
   {{#if @icon}}
     <div class="hds-icon-tile__icon">
-      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched="true" />
+      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
     </div>
   {{/if}}
   {{#if @logo}}
     <div class="hds-icon-tile__logo">
-      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched="true" />
+      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
     </div>
   {{/if}}
   {{#if this.iconSecondary}}
     <div class="hds-icon-tile__extra">
       <div class="hds-icon-tile__extra-icon">
-        <FlightIcon @name={{this.iconSecondary}} @size="16" @stretched="true" />
+        <FlightIcon @name={{this.iconSecondary}} @size="16" @stretched={{true}} />
       </div>
     </div>
   {{/if}}

package/addon/components/hds/icon-tile/index.js

@@ -32,7 +32,7 @@ export default class HdsIconTileIndexComponent extends Component {
     assert(
       `@size for "Hds::IconTile" must be one of the following: ${SIZES.join(
         ', '
-      )}, received: ${size}`,
+      )}; received: ${size}`,
       SIZES.includes(size)
     );
 
@@ -59,7 +59,7 @@ export default class HdsIconTileIndexComponent extends Component {
     assert(
       `@color for "Hds::IconTile" must be one of the following: ${COLORS.join(
         ', '
-      )}, received: ${color}`,
+      )}; received: ${color}`,
       COLORS.includes(color)
     );
 
@@ -112,7 +112,7 @@ export default class HdsIconTileIndexComponent extends Component {
       assert(
         `@logo for "Hds::IconTile" must be one of the following: ${PRODUCTS.join(
           ', '
-        )}, received: ${logo}`,
+        )}; received: ${logo}`,
         PRODUCTS.includes(logo)
       );
     }

package/addon/components/hds/stepper/step/indicator.js

@@ -17,7 +17,7 @@ export default class HdsStepperIndicatorStepIndexComponent extends Component {
     assert(
       `@status for "Hds::Stepper::Step::Indicator" must be one of the following: ${STATUSES.join(
         ', '
-      )}, received: ${status}`,
+      )}; received: ${status}`,
       STATUSES.includes(status)
     );
 

package/addon/components/hds/stepper/task/indicator.js

@@ -23,7 +23,7 @@ export default class HdsStepperIndicatorTaskIndexComponent extends Component {
     assert(
       `@status for "Hds::Stepper::Task::Indicator" must be one of the following: ${STATUSES.join(
         ', '
-      )}, received: ${status}`,
+      )}; received: ${status}`,
       STATUSES.includes(status)
     );
 

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/@hashicorp/design-system-components.scss

@@ -27,16 +27,16 @@
 @use "../components/toast";
 // END COMPONENT CSS FILES IMPORTS
 
+// stylelint-disable-next-line selector-class-pattern
 .sr-only {
-	border: 0 !important;
-	clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
-	-webkit-clip-path: inset(50%) !important;
-		clip-path: inset(50%) !important;  /* 2 */
-	height: 1px !important;
-	margin: -1px !important;
-	overflow: hidden !important;
-	padding: 0 !important;
-	position: absolute !important;
-	width: 1px !important;
-	white-space: nowrap !important;            /* 3 */
-}
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  margin: -1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;            /* 3 */
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
+  clip-path: inset(50%) !important;  /* 2 */
+}