@hashicorp/design-system-components 1.5.2 → 1.6.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @hashicorp/design-system-components
 
+## 1.6.1
+
+### Patch Changes
+
+- [#1193](https://github.com/hashicorp/design-system/pull/1191) [`0f76e60`](https://github.com/hashicorp/design-system/commit/0f76e60f6eb4293dc5ba1ffb75f72d7f981a8e88) Thanks [@fivetanley](https://github.com/alex-ju)! - Fix `Hds::Table` compile error for Ember 3.28 or lower
+
+## 1.6.0
+
+### Minor Changes
+
+- [#661](https://github.com/hashicorp/design-system/pull/661) [`2c6024a38`](https://github.com/hashicorp/design-system/commit/2c6024a38f5f457231f7301d219478a4f746de37) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - Add new **`Pagination`** component (`Numbered`, `Compact`)
+
+* [#1070](https://github.com/hashicorp/design-system/pull/1070) [`91b004f93`](https://github.com/hashicorp/design-system/commit/91b004f9329034064890f3e7a18e35912312fb5d) Thanks [@alex-ju](https://github.com/alex-ju)! - Add `Flyout` component
+
+### Patch Changes
+
+- Updated dependencies [[`2c6024a38`](https://github.com/hashicorp/design-system/commit/2c6024a38f5f457231f7301d219478a4f746de37)]:
+  - @hashicorp/design-system-tokens@1.4.0
+
 ## 1.5.2
 
 ### Patch Changes

package/NEW-COMPONENT-CHECKLIST.md

@@ -77,8 +77,11 @@ The engineering checklist has six parts: creating the feature branch, component
 
 - [ ] create new branch from main for the component (`git checkout -b USER/COMPONENT-NAME`)
 - [ ] create new component using a blueprint
-  - `ember generate hds-component COMPONENT-NAME`
-  - if it's a child component, then `hds/COMPONENT_NAME/CHILD_NAME`
+  - if it's a component, you have to run two commands, one for the component code (and its tests) and one for the documentation pages:
+    - `cd packages/component` and then `ember generate hds-component COMPONENT-NAME`
+    - `cd website` and then `ember generate hds-component-docs COMPONENT-NAME`
+  - if it's a child component, then you have to run only one command:
+    - `cd packages/component` and then `ember generate hds-component COMPONENT_NAME/CHILD_NAME`
   - (Note: Many of the below mentioned files will be automatically generated.)
 - [ ] **component template**
   - use semantic HTML

package/addon/components/hds/flyout/body.hbs

@@ -0,0 +1,3 @@
+<div class="hds-flyout__body" ...attributes>
+  {{yield}}
+</div>

package/addon/components/hds/flyout/description.hbs

@@ -0,0 +1,3 @@
+<div class="hds-flyout__description hds-typography-body-200" ...attributes>
+  {{yield}}
+</div>

package/addon/components/hds/flyout/header.hbs

@@ -0,0 +1,14 @@
+<div class="hds-flyout__header" ...attributes>
+  {{#if @icon}}
+    <FlightIcon class="hds-flyout__icon" @name={{@icon}} @size="24" @isInlineBlock={{false}} />
+  {{/if}}
+  <div class="hds-flyout__title hds-typography-display-300 hds-font-weight-semibold" id={{@id}}>
+    {{#if @tagline}}
+      <div class="hds-flyout__tagline hds-typography-body-100 hds-font-weight-regular">
+        {{@tagline}}
+      </div>
+    {{/if}}
+    {{yield}}
+  </div>
+  <Hds::DismissButton class="hds-flyout__dismiss" {{on "click" @onDismiss}} />
+</div>

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

@@ -0,0 +1,14 @@
+<dialog
+  class={{this.classNames}}
+  ...attributes
+  aria-labelledby={{this.id}}
+  {{did-insert this.didInsert}}
+  {{focus-trap isActive=this.isOpen focusTrapOptions=(hash onDeactivate=this.onDismiss clickOutsideDeactivates=true)}}
+>
+  {{yield (hash Header=(component "hds/flyout/header" id=this.id onDismiss=this.onDismiss))}}
+  {{yield (hash Description=(component "hds/flyout/description"))}}
+  {{yield (hash Body=(component "hds/flyout/body"))}}
+</dialog>
+{{#if this.isOpen}}
+  <div class="hds-flyout__overlay"></div>
+{{/if}}

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

@@ -0,0 +1,107 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { assert } from '@ember/debug';
+import { getElementId } from '../form/utils/getElementId';
+import { tracked } from '@glimmer/tracking';
+
+export const DEFAULT_SIZE = 'medium';
+export const DEFAULT_HAS_OVERLAY = true;
+export const SIZES = ['medium', 'large'];
+
+export default class HdsFlyoutIndexComponent extends Component {
+  @tracked isOpen = false;
+
+  /**
+   * Sets the size of the flyout
+   * Accepted values: medium, large
+   *
+   * @param size
+   * @type {string}
+   * @default 'medium'
+   */
+  get size() {
+    let { size = DEFAULT_SIZE } = this.args;
+
+    assert(
+      `@size for "Hds::Flyout" must be one of the following: ${SIZES.join(
+        ', '
+      )}; received: ${size}`,
+      SIZES.includes(size)
+    );
+
+    return size;
+  }
+
+  /**
+   * Calculates the unique ID to assign to the title
+   */
+  get id() {
+    return getElementId(this);
+  }
+
+  /**
+   * 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-flyout'];
+
+    // add a class based on the @size argument
+    classes.push(`hds-flyout--size-${this.size}`);
+
+    return classes.join(' ');
+  }
+
+  @action
+  didInsert(element) {
+    // Store a reference of the `<dialog>` element
+    this.element = element;
+
+    // Register `<dialog>` element for polyfilling if no native support is available
+    if (!element.showModal) {
+      Promise.all([import('dialog-polyfill'), import('dialog-polyfill-css')])
+        .then(([dialogPolyfill]) => {
+          const dialog = dialogPolyfill.default;
+          if (dialog.registerDialog) {
+            dialog.registerDialog(element);
+            // This unscoped class is defined in the dialog polyfill: https://github.com/GoogleChrome/dialog-polyfill/blob/master/dist/dialog-polyfill.css#L33
+            element.classList.add('fixed');
+          }
+        })
+        .catch({});
+    }
+
+    // Register "onClose" callback function to be called when a native 'close' event is dispatched
+    this.element.addEventListener('close', () => {
+      if (this.args.onClose && typeof this.args.onClose === 'function') {
+        this.args.onClose();
+      }
+
+      this.isOpen = false;
+    });
+
+    // If the flyout dialog is not already open
+    if (!this.element.open) {
+      this.open();
+    }
+  }
+
+  @action
+  open() {
+    // Make flyout dialog visible using the native `showModal` method
+    this.element.showModal();
+    this.isOpen = true;
+
+    // Call "onOpen" callback function
+    if (this.args.onOpen && typeof this.args.onOpen === 'function') {
+      this.args.onOpen();
+    }
+  }
+
+  @action
+  onDismiss() {
+    // Make flyout dialog invisible using the native `close` method
+    this.element.close();
+  }
+}

package/addon/components/hds/pagination/compact/index.hbs

@@ -0,0 +1,26 @@
+<div class="hds-pagination" ...attributes>
+  <nav class="hds-pagination-nav" aria-label="Pagination navigation">
+    <Hds::Pagination::Nav::Arrow
+      @direction="prev"
+      @showLabel={{this.showLabels}}
+      @route={{this.routing.route}}
+      @query={{this.routing.queryPrev}}
+      @model={{this.routing.model}}
+      @models={{this.routing.models}}
+      @replace={{this.routing.replace}}
+      @onClick={{this.onPageChange}}
+      @disabled={{@isDisabledPrev}}
+    />
+    <Hds::Pagination::Nav::Arrow
+      @direction="next"
+      @showLabel={{this.showLabels}}
+      @route={{this.routing.route}}
+      @query={{this.routing.queryNext}}
+      @model={{this.routing.model}}
+      @models={{this.routing.models}}
+      @replace={{this.routing.replace}}
+      @onClick={{this.onPageChange}}
+      @disabled={{@isDisabledNext}}
+    />
+  </nav>
+</div>

package/addon/components/hds/pagination/compact/index.js

@@ -0,0 +1,87 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { assert } from '@ember/debug';
+import { inject as service } from '@ember/service';
+
+export default class HdsPaginationCompactIndexComponent extends Component {
+  @service router;
+
+  constructor() {
+    super(...arguments);
+
+    let { queryFunction } = this.args;
+
+    // This component works in two different ways, depending if we need to support
+    // routing through links (`LinkTo`) for the "navigation controls", or not.
+    // If there's no routing then the component behaves as "uncontrolled"
+    // (the state updates are handled by its internal logic).
+    // If instead the component needs to update the routing (and we infer this via the "query" arguments)
+    // then the component behaves as "controlled", where the state is
+    // initialized and updated using the arguments passed to it.
+
+    if (queryFunction === undefined) {
+      this.hasRouting = false;
+    } else {
+      assert(
+        '@queryFunction for "Hds::Pagination::Numbered" must be a function',
+        typeof queryFunction === 'function'
+      );
+      this.hasRouting = true;
+    }
+  }
+
+  /**
+   * @param showLabels
+   * @type {boolean}
+   * @default true
+   * @description Show the labels for the "prev/next" controls
+   */
+  get showLabels() {
+    let { showLabels = true } = this.args;
+
+    return showLabels;
+  }
+
+  get routeQueryParams() {
+    return this.router.currentRoute?.queryParams || {};
+  }
+
+  buildQueryParamsObject(page) {
+    if (this.hasRouting) {
+      return this.args.queryFunction(page, this.currentPage);
+    } else {
+      return {};
+    }
+  }
+
+  get routing() {
+    let routing = {
+      route: this.args.route ?? undefined,
+      model: this.args.model ?? undefined,
+      models: this.args.models ?? undefined,
+      replace: this.args.replace ?? undefined,
+    };
+
+    // the "query" is dynamic and needs to be calculated
+    if (this.hasRouting) {
+      routing.queryPrev = this.buildQueryParamsObject('prev');
+      routing.queryNext = this.buildQueryParamsObject('next');
+    } else {
+      routing.queryPrev = undefined;
+      routing.queryNext = undefined;
+    }
+
+    return routing;
+  }
+
+  @action
+  onPageChange(newPage) {
+    this.currentPage = newPage;
+
+    let { onPageChange } = this.args;
+
+    if (typeof onPageChange === 'function') {
+      onPageChange(newPage);
+    }
+  }
+}

package/addon/components/hds/pagination/info/index.hbs

@@ -0,0 +1,7 @@
+<div class="hds-pagination-info hds-typography-body-100 hds-font-weight-medium" ...attributes>
+  {{@itemsRangeStart}}–{{@itemsRangeEnd}}
+  {{#if this.showTotalItems}}
+    of
+    {{@totalItems}}
+  {{/if}}
+</div>

package/addon/components/hds/pagination/info/index.js

@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+
+export default class HdsPaginationInfoComponent extends Component {
+  /**
+   * @param showTotalItems
+   * @type {boolean}
+   * @description Controls the visibility of the total items
+   */
+  get showTotalItems() {
+    return this.args.showTotalItems ?? true;
+  }
+}

package/addon/components/hds/pagination/nav/arrow.hbs

@@ -0,0 +1,28 @@
+{{#if @disabled}}
+  <Hds::Interactive class={{this.classNames}} aria-label={{this.content.ariaLabel}} disabled={{true}} ...attributes>
+    <FlightIcon @name={{this.content.icon}} />
+    {{#if this.showLabel}}
+      <span class="hds-pagination-nav__arrow-label" aria-hidden="true">
+        {{this.content.label}}
+      </span>
+    {{/if}}
+  </Hds::Interactive>
+{{else}}
+  <Hds::Interactive
+    class={{this.classNames}}
+    @route={{@route}}
+    @query={{hds-link-to-query @query}}
+    @models={{hds-link-to-models @model @models}}
+    @replace={{@replace}}
+    {{on "click" this.onClick}}
+    aria-label={{this.content.ariaLabel}}
+    ...attributes
+  >
+    <FlightIcon @name={{this.content.icon}} />
+    {{#if this.showLabel}}
+      <span class="hds-pagination-nav__arrow-label" aria-hidden="true">
+        {{this.content.label}}
+      </span>
+    {{/if}}
+  </Hds::Interactive>
+{{/if}}

package/addon/components/hds/pagination/nav/arrow.js

@@ -0,0 +1,74 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { assert } from '@ember/debug';
+
+export const DIRECTIONS = ['prev', 'next'];
+
+export default class HdsPaginationControlArrowComponent extends Component {
+  get content() {
+    let { direction } = this.args;
+
+    assert(
+      `@direction for "Pagination::Nav::Arrow" must be one of the following: ${DIRECTIONS.join(
+        ', '
+      )}; received: ${direction}`,
+      DIRECTIONS.includes(direction)
+    );
+
+    let content;
+    if (direction === 'prev') {
+      content = {
+        label: 'Previous',
+        icon: 'chevron-left',
+        ariaLabel: 'Previous page',
+      };
+    }
+    if (direction === 'next') {
+      content = {
+        label: 'Next',
+        icon: 'chevron-right',
+        ariaLabel: 'Next page',
+      };
+    }
+
+    return content;
+  }
+
+  /**
+   * @param showLabel
+   * @type {boolean}
+   * @default true
+   * @description Show the labels for the control
+   */
+  get showLabel() {
+    let { showLabel = true } = this.args;
+
+    return showLabel;
+  }
+
+  /**
+   * 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-pagination-nav__control',
+      'hds-pagination-nav__arrow',
+      `hds-pagination-nav__arrow--direction-${this.args.direction}`,
+      'hds-typography-body-100',
+      'hds-font-weight-medium',
+    ];
+
+    return classes.join(' ');
+  }
+
+  @action
+  onClick() {
+    let { onClick } = this.args;
+
+    if (typeof onClick === 'function') {
+      onClick(this.args.direction);
+    }
+  }
+}

package/addon/components/hds/pagination/nav/ellipsis.hbs

@@ -0,0 +1 @@
+<div class="hds-pagination-nav__ellipsis" ...attributes>...</div>

package/addon/components/hds/pagination/nav/number.hbs

@@ -0,0 +1,12 @@
+<Hds::Interactive
+  class={{this.classNames}}
+  @route={{@route}}
+  @query={{hds-link-to-query @query}}
+  @models={{hds-link-to-models @model @models}}
+  @replace={{@replace}}
+  {{on "click" this.onClick}}
+  ...attributes
+  aria-current={{if @isSelected "page" null}}
+>
+  <span class="sr-only">page </span>{{this.page}}
+</Hds::Interactive>

package/addon/components/hds/pagination/nav/number.js

@@ -0,0 +1,45 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { assert } from '@ember/debug';
+
+export default class HdsPaginationControlNumberComponent extends Component {
+  get page() {
+    let { page } = this.args;
+
+    assert(
+      '@page for "Pagination::Nav::Number" must have a valid value',
+      page !== undefined
+    );
+
+    return page;
+  }
+
+  /**
+   * 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-pagination-nav__control',
+      'hds-pagination-nav__number',
+      'hds-typography-body-100',
+      'hds-font-weight-medium"',
+    ];
+
+    if (this.args.isSelected) {
+      classes.push(`hds-pagination-nav__number--is-selected`);
+    }
+
+    return classes.join(' ');
+  }
+
+  @action
+  onClick() {
+    let { onClick } = this.args;
+
+    if (typeof onClick === 'function') {
+      onClick(this.args.page);
+    }
+  }
+}

package/addon/components/hds/pagination/numbered/index.hbs

@@ -0,0 +1,65 @@
+<div class="hds-pagination" ...attributes>
+  {{#if this.showInfo}}
+    <Hds::Pagination::Info
+      @itemsRangeStart={{this.itemsRangeStart}}
+      @itemsRangeEnd={{this.itemsRangeEnd}}
+      @totalItems={{@totalItems}}
+      @showTotalItems={{@showTotalItems}}
+    />
+  {{/if}}
+
+  <nav class="hds-pagination-nav" aria-label="Pagination navigation">
+    <Hds::Pagination::Nav::Arrow
+      @direction="prev"
+      @showLabel={{this.showLabels}}
+      @route={{this.routing.route}}
+      @query={{this.routing.queryPrev}}
+      @model={{this.routing.model}}
+      @models={{this.routing.models}}
+      @replace={{this.routing.replace}}
+      @onClick={{this.onPageChange}}
+      @disabled={{this.isDisabledPrev}}
+    />
+    {{#if this.showPageNumbers}}
+      <ul class="hds-pagination-nav__page-list">
+        {{#each this.pages as |page|}}
+          <li class="hds-pagination-nav__page-item">
+            {{#if (eq page "…")}}
+              <Hds::Pagination::Nav::Ellipsis />
+            {{else}}
+              <Hds::Pagination::Nav::Number
+                @page={{page}}
+                @route={{this.routing.route}}
+                @query={{get this.routing.queryPages page}}
+                @model={{this.routing.model}}
+                @models={{this.routing.models}}
+                @replace={{this.routing.replace}}
+                @onClick={{this.onPageChange}}
+                @isSelected={{if (eq page this.currentPage) true false}}
+              />
+            {{/if}}
+          </li>
+        {{/each}}
+      </ul>
+    {{/if}}
+    <Hds::Pagination::Nav::Arrow
+      @direction="next"
+      @showLabel={{this.showLabels}}
+      @route={{this.routing.route}}
+      @query={{this.routing.queryNext}}
+      @model={{this.routing.model}}
+      @models={{this.routing.models}}
+      @replace={{this.routing.replace}}
+      @onClick={{this.onPageChange}}
+      @disabled={{this.isDisabledNext}}
+    />
+  </nav>
+
+  {{#if this.showSizeSelector}}
+    <Hds::Pagination::SizeSelector
+      @pageSizes={{this.pageSizes}}
+      @selectedSize={{this.currentPageSize}}
+      @onChange={{this.onPageSizeChange}}
+    />
+  {{/if}}
+</div>