@hashicorp/design-system-components 3.5.0 → 4.0.0

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

@@ -1,19 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<dialog
-  class={{this.classNames}}
-  ...attributes
-  aria-labelledby={{this.id}}
-  {{did-insert this.didInsert}}
-  {{will-destroy this.willDestroyNode}}
-  {{focus-trap isActive=this.isOpen focusTrapOptions=(hash onDeactivate=this.onDismiss clickOutsideDeactivates=true)}}
->
-  {{yield (hash Header=(component "hds/modal/header" id=this.id onDismiss=this.onDismiss))}}
-  {{yield (hash Body=(component "hds/modal/body"))}}
-  {{yield (hash Footer=(component "hds/modal/footer" onDismiss=this.onDismiss))}}
-</dialog>
-{{#if this.isOpen}}
-  <div class="hds-modal__overlay"></div>
-{{/if}}

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

@@ -1,209 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-import { assert } from '@ember/debug';
-import { getElementId } from '@hashicorp/design-system-components/utils/hds-get-element-id';
-import { buildWaiter } from '@ember/test-waiters';
-import { DEBUG } from '@glimmer/env';
-
-let waiter;
-
-// Notice: this code will get stripped out in production builds (DEBUG evaluates to `true` in dev/test builds, but `false` in prod builds)
-if (DEBUG) {
-  waiter = buildWaiter('@hashicorp/design-system-components:modal');
-}
-
-export const DEFAULT_SIZE = 'medium';
-export const DEFAULT_COLOR = 'neutral';
-export const SIZES = ['small', 'medium', 'large'];
-export const COLORS = ['neutral', 'warning', 'critical'];
-
-export default class HdsModalIndexComponent extends Component {
-  @tracked isOpen = false;
-  @tracked isDismissDisabled = this.args.isDismissDisabled ?? false;
-
-  /**
-   * Sets the size of the modal dialog
-   * Accepted values: small, medium, large
-   *
-   * @param size
-   * @type {string}
-   * @default 'medium'
-   */
-  get size() {
-    let { size = DEFAULT_SIZE } = this.args;
-
-    assert(
-      `@size for "Hds::Modal" must be one of the following: ${SIZES.join(
-        ', '
-      )}; received: ${size}`,
-      SIZES.includes(size)
-    );
-
-    return size;
-  }
-
-  /**
-   * Sets the color of the modal dialog
-   * Accepted values: neutral, warning, critical
-   *
-   * @param color
-   * @type {string}
-   * @default 'neutral'
-   */
-  get color() {
-    let { color = DEFAULT_COLOR } = this.args;
-
-    assert(
-      `@color for "Hds::Modal" must be one of the following: ${COLORS.join(
-        ', '
-      )}; received: ${color}`,
-      COLORS.includes(color)
-    );
-
-    return color;
-  }
-
-  /**
-   * 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-modal'];
-
-    // add a class based on the @size argument
-    classes.push(`hds-modal--size-${this.size}`);
-
-    // add a class based on the @color argument
-    classes.push(`hds-modal--color-${this.color}`);
-
-    return classes.join(' ');
-  }
-
-  @action registerOnCloseCallback() {
-    if (
-      !this.isDismissDisabled &&
-      this.args.onClose &&
-      typeof this.args.onClose === 'function'
-    ) {
-      this.args.onClose();
-    }
-
-    // If the dismissal of the modal is disabled, we keep the modal open/visible otherwise we mark it as closed
-    if (this.isDismissDisabled) {
-      // If, in a chain of events, the element is not attached to the DOM, the `showModal` would fail
-      // so we add this safeguard condition that checks for the `<dialog>` to have a parent
-      if (this.element.parentElement) {
-        // As there is no way to `preventDefault` on `close` events, we call the `showModal` function
-        // preserving the state of the modal dialog
-        this.element.showModal();
-      }
-    } else {
-      this.isOpen = false;
-    }
-  }
-
-  @action
-  didInsert(element) {
-    // Store references of `<dialog>` and `<body>` elements
-    this.element = element;
-    this.body = document.body;
-
-    if (this.body) {
-      // Store the initial `overflow` value of `<body>` so we can reset to it
-      this.bodyInitialOverflowValue =
-        this.body.style.getPropertyValue('overflow');
-    }
-
-    // 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', this.registerOnCloseCallback, true);
-
-    // If the modal dialog is not already open
-    if (!this.element.open) {
-      this.open();
-    }
-  }
-
-  @action
-  willDestroyNode() {
-    if (this.element) {
-      this.element.removeEventListener(
-        'close',
-        this.registerOnCloseCallback,
-        true
-      );
-    }
-  }
-
-  @action
-  open() {
-    // Make modal dialog visible using the native `showModal` method
-    this.element.showModal();
-    this.isOpen = true;
-
-    // Prevent page from scrolling when the dialog is open
-    if (this.body) this.body.style.setProperty('overflow', 'hidden');
-
-    // Call "onOpen" callback function
-    if (this.args.onOpen && typeof this.args.onOpen === 'function') {
-      this.args.onOpen();
-    }
-  }
-
-  @action
-  async onDismiss() {
-    // allow ember test helpers to be aware of when the `close` event fires
-    // when using `click` or other helpers from '@ember/test-helpers'
-    // Notice: this code will get stripped out in production builds (DEBUG evaluates to `true` in dev/test builds, but `false` in prod builds)
-    if (DEBUG && this.element.open) {
-      let token = waiter.beginAsync();
-      let listener = () => {
-        waiter.endAsync(token);
-        this.element.removeEventListener('close', listener);
-      };
-      this.element.addEventListener('close', listener);
-    }
-
-    // Make modal dialog invisible using the native `close` method
-    this.element.close();
-
-    // Reset page `overflow` property
-    if (this.body) {
-      this.body.style.removeProperty('overflow');
-      if (this.bodyInitialOverflowValue === '') {
-        if (this.body.style.length === 0) {
-          this.body.removeAttribute('style');
-        }
-      } else {
-        this.body.style.setProperty('overflow', this.bodyInitialOverflowValue);
-      }
-    }
-  }
-}

package/addon/components/hds/page-header/actions.hbs

@@ -1,5 +0,0 @@
-{{!
-Copyright (c) HashiCorp, Inc.
-SPDX-License-Identifier: MPL-2.0
-}}
-<div class="hds-page-header__actions" ...attributes>{{yield}}</div>

package/addon/components/hds/page-header/badges.hbs

@@ -1,5 +0,0 @@
-{{!
-Copyright (c) HashiCorp, Inc.
-SPDX-License-Identifier: MPL-2.0
-}}
-<div class="hds-page-header__badges-wrapper" ...attributes>{{yield}}</div>

package/addon/components/hds/page-header/description.hbs

@@ -1,11 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<Hds::Text::Body
-  class="hds-page-header__description"
-  @tag="p"
-  @size="200"
-  @color="primary"
-  ...attributes
->{{yield}}</Hds::Text::Body>

package/addon/components/hds/page-header/index.hbs

@@ -1,28 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<header class="hds-page-header" ...attributes>
-  {{yield (hash Breadcrumb=(component "hds/yield"))}}
-  <div class="hds-page-header__body">
-    {{yield (hash IconTile=(component "hds/icon-tile" size="medium"))}}
-    <div class="hds-page-header__main">
-      <div class="hds-page-header__content">
-        <div class="hds-page-header__title-wrapper">
-          {{yield (hash Title=(component "hds/page-header/title"))}}
-          {{yield (hash Badges=(component "hds/page-header/badges"))}}
-        </div>
-        <div class="hds-page-header__metadata">
-          {{yield
-            (hash
-              Subtitle=(component "hds/page-header/subtitle")
-              Description=(component "hds/page-header/description")
-              Generic=(component "hds/yield")
-            )
-          }}
-        </div>
-      </div>
-      {{yield (hash Actions=(component "hds/page-header/actions"))}}
-    </div>
-  </div>
-</header>

package/addon/components/hds/page-header/subtitle.hbs

@@ -1,11 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<Hds::Text::Body
-  class="hds-page-header__subtitle"
-  @tag="p"
-  @size="200"
-  @color="faint"
-  ...attributes
->{{yield}}</Hds::Text::Body>

package/addon/components/hds/page-header/title.hbs

@@ -1,11 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<Hds::Text::Display
-  class="hds-page-header__title"
-  @tag="h1"
-  @size="500"
-  @color="strong"
-  ...attributes
->{{yield}}</Hds::Text::Display>

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

@@ -1,39 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<div class="hds-pagination" ...attributes>
-  <nav class="hds-pagination-nav" aria-label={{this.ariaLabel}}>
-    <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>
-
-  {{#if this.showSizeSelector}}
-    <Hds::Pagination::SizeSelector
-      @pageSizes={{this.pageSizes}}
-      @label={{@sizeSelectorLabel}}
-      @selectedSize={{this.currentPageSize}}
-      @onChange={{this.onPageSizeChange}}
-    />
-  {{/if}}
-</div>

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

@@ -1,163 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-import { assert } from '@ember/debug';
-
-// for context about the decision to use these values, see:
-// https://hashicorp.slack.com/archives/C03A0N1QK8S/p1673546329082759
-export const DEFAULT_PAGE_SIZES = [10, 30, 50];
-
-export default class HdsPaginationCompactIndexComponent extends Component {
-  // This private variable is used to differentiate between
-  // "uncontrolled" component (where the state is handled internally) and
-  // "controlled" component (where the state is handled externally, by the consumer's code).
-  // In the first case, the variable stores the internal state of the component at any moment,
-  // and its value is updated internally according to the user's interaction with the component.
-  // In the second case, the variable stores *only* the initial state of the component (coming from the arguments)
-  // at rendering time, but from that moment on it's not updated anymore, no matter what interaction the user
-  // has with the component (the state is controlled externally, eg. via query parameters)
-  @tracked _currentPageSize = this.args.currentPageSize ?? this.pageSizes[0];
-  @tracked isControlled;
-
-  showLabels = this.args.showLabels ?? true; // if the labels for the "prev/next" controls are visible
-  showSizeSelector = this.args.showSizeSelector ?? false; // if the "size selector" block is visible
-
-  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.isControlled = false;
-    } else {
-      assert(
-        '@queryFunction for "Hds::Pagination::Numbered" must be a function',
-        typeof queryFunction === 'function'
-      );
-      this.isControlled = true;
-    }
-  }
-
-  /**
-   * @param ariaLabel
-   * @type {string}
-   * @default 'Pagination'
-   */
-  get ariaLabel() {
-    return this.args.ariaLabel ?? 'Pagination';
-  }
-
-  // This very specific `get/set` pattern is used to handle the two different use cases of the component
-  // being "controlled" (when it has routing, meaning it needs to support pagination controls as links/`LinkTo`)
-  // vs being "uncontrolled" (see comments above for details).
-  //
-  // If it has routing (and so it's "controlled"), than the value ("state") of the `currentPageSize` variable
-  // is *always* determined by the controller via arguments (most of the times, connected to query parameters in the URL).
-  // For this reason the "get" method always returns the value from the `args`,
-  // while the "set" method never updates the private internal state (_variable).
-  //
-  // If instead it doesn't have routing (and so it's "uncontrolled") than the value ("state") of the `currentPageSize` variables
-  // is *always* determined by the component's internal logic (and updated according to the user interaction with it).
-  // For this reason the "get" and "set" methods always read from or write to the private internal state (_variable).
-
-  get currentPageSize() {
-    if (this.isControlled) {
-      return this.args.currentPageSize;
-    } else {
-      return this._currentPageSize;
-    }
-  }
-
-  set currentPageSize(value) {
-    if (this.isControlled) {
-      // noop
-    } else {
-      this._currentPageSize = value;
-    }
-  }
-
-  /**
-   * @param pageSizes
-   * @type {array of numbers}
-   * @description Set the page sizes users can select from.
-   * @default [10, 30, 50]
-   */
-  get pageSizes() {
-    let { pageSizes = DEFAULT_PAGE_SIZES } = this.args;
-
-    assert(
-      `pageSizes argument must be an array. Received: ${pageSizes}`,
-      Array.isArray(pageSizes) === true
-    );
-
-    return pageSizes;
-  }
-
-  buildQueryParamsObject(page, pageSize) {
-    if (this.isControlled) {
-      return this.args.queryFunction(page, pageSize);
-    } 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.isControlled) {
-      routing.queryPrev = this.buildQueryParamsObject(
-        'prev',
-        this.currentPageSize
-      );
-      routing.queryNext = this.buildQueryParamsObject(
-        'next',
-        this.currentPageSize
-      );
-    } 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);
-    }
-  }
-
-  @action
-  onPageSizeChange(newPageSize) {
-    let { onPageSizeChange } = this.args;
-
-    // invoke the callback function
-    if (typeof onPageSizeChange === 'function') {
-      onPageSizeChange(newPageSize);
-    }
-  }
-}

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

@@ -1,11 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<Hds::Text::Body class="hds-pagination-info" @tag="div" @size="100" @weight="medium" ...attributes>
-  {{@itemsRangeStart}}–{{@itemsRangeEnd}}
-  {{#if this.showTotalItems}}
-    of
-    {{@totalItems}}
-  {{/if}}
-</Hds::Text::Body>

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

@@ -1,17 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-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

@@ -1,44 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-{{#if @disabled}}
-  <Hds::Interactive class={{this.classNames}} aria-label={{this.content.ariaLabel}} disabled={{true}} ...attributes>
-    <FlightIcon @name={{this.content.icon}} />
-    {{#if this.showLabel}}
-      <Hds::Text::Body
-        class="hds-pagination-nav__arrow-label"
-        @tag="span"
-        @size="100"
-        @weight="medium"
-        aria-hidden="true"
-      >
-        {{this.content.label}}
-      </Hds::Text::Body>
-    {{/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}}
-      <Hds::Text::Body
-        class="hds-pagination-nav__arrow-label"
-        @tag="span"
-        @size="100"
-        @weight="medium"
-        aria-hidden="true"
-      >
-        {{this.content.label}}
-      </Hds::Text::Body>
-    {{/if}}
-  </Hds::Interactive>
-{{/if}}

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

@@ -1,77 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-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}`,
-    ];
-
-    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

@@ -1,5 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<div class="hds-pagination-nav__ellipsis" ...attributes>...</div>

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

@@ -1,17 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<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}}
->
-  <Hds::Text::Body @tag="span" @size="100" @weight="medium"><span class="sr-only">page
-    </span>{{this.page}}</Hds::Text::Body>
-</Hds::Interactive>