@hashicorp/design-system-components 3.6.0 → 4.0.0

package/addon/components/hds/alert/title.hbs

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

package/addon/components/hds/app-footer/copyright.hbs

@@ -1,9 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<div class="hds-app-footer__copyright" ...attributes>
-  <FlightIcon @name="hashicorp" />
-  <Hds::Text::Body @tag="span" @size="100">© {{this.year}} HashiCorp</Hds::Text::Body>
-</div>

package/addon/components/hds/app-footer/copyright.js

@@ -1,18 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-
-export default class HdsAppFooterCopyrightComponent extends Component {
-  /**
-   * @param year
-   * @type {string}
-   * @description The copyright year
-   * @default The current year (calculated via `Date()`)
-   */
-  get year() {
-    return this.args.year ?? new Date().getFullYear();
-  }
-}

package/addon/components/hds/app-footer/index.hbs

@@ -1,20 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<div class={{this.classNames}} ...attributes>
-  {{yield (hash ExtraBefore=(component "hds/yield"))}}
-  <ul class="hds-app-footer__list" aria-label={{this.ariaLabel}}>
-    {{yield (hash StatusLink=(component "hds/app-footer/status-link"))}}
-    {{yield
-      (hash
-        Link=(component "hds/app-footer/link")
-        LegalLinks=(component "hds/app-footer/legal-links")
-        Item=(component "hds/app-footer/item")
-      )
-    }}
-  </ul>
-  {{yield (hash ExtraAfter=(component "hds/yield"))}}
-  <Hds::AppFooter::Copyright @year={{@copyrightYear}} />
-</div>

package/addon/components/hds/app-footer/index.js

@@ -1,41 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-
-export default class HdsAppFooterIndexComponent extends Component {
-  /**
-   * @param ariaLabel
-   * @type {string}
-   * @default 'Footer items'
-   */
-  get ariaLabel() {
-    return this.args.ariaLabel ?? 'Footer items';
-  }
-
-  /**
-   * @param theme
-   * @type {string}
-   * @description The component theme
-   * @default 'light'
-   */
-  get theme() {
-    return this.args.theme ?? 'light';
-  }
-
-  /**
-   * 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-app-footer'];
-
-    // add a class based on the @theme argument
-    classes.push(`hds-app-footer--theme-${this.theme}`);
-
-    return classes.join(' ');
-  }
-}

package/addon/components/hds/app-footer/item.hbs

@@ -1,8 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<li class="hds-app-footer__list-item" ...attributes>
-  {{yield}}
-</li>

package/addon/components/hds/app-footer/legal-links.hbs

@@ -1,14 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<Hds::AppFooter::Item>
-  <ul class="hds-app-footer__legal-links" aria-label={{this.ariaLabel}} ...attributes>
-    <Hds::AppFooter::Link @href={{this.hrefForSupport}}>Support</Hds::AppFooter::Link>
-    <Hds::AppFooter::Link @href={{this.hrefForTerms}}>Terms</Hds::AppFooter::Link>
-    <Hds::AppFooter::Link @href={{this.hrefForPrivacy}}>Privacy</Hds::AppFooter::Link>
-    <Hds::AppFooter::Link @href={{this.hrefForSecurity}}>Security</Hds::AppFooter::Link>
-    <Hds::AppFooter::Link @href={{this.hrefForAccessibility}}>Accessibility</Hds::AppFooter::Link>
-  </ul>
-</Hds::AppFooter::Item>

package/addon/components/hds/app-footer/legal-links.js

@@ -1,67 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-
-export default class HdsAppFooterLegalLinksComponent extends Component {
-  /**
-   * @param ariaLabel
-   * @type {string}
-   * @default 'Legal links'
-   */
-  get ariaLabel() {
-    return this.args.ariaLabel ?? 'Legal links';
-  }
-
-  /**
-   * @param hrefForSupport
-   * @type {string}
-   * @description The href value of the "Support" link
-   */
-  get hrefForSupport() {
-    return this.args.hrefForSupport ?? 'https://www.hashicorp.com/support';
-  }
-
-  /**
-   * @param hrefForTerms
-   * @type {string}
-   * @description The href value of the "Terms" link
-   */
-  get hrefForTerms() {
-    return (
-      this.args.hrefForTerms ?? 'https://www.hashicorp.com/terms-of-service'
-    );
-  }
-
-  /**
-   * @param hrefForPrivacy
-   * @type {string}
-   * @description The href value of the "Privacy" link
-   */
-  get hrefForPrivacy() {
-    return this.args.hrefForPrivacy ?? 'https://www.hashicorp.com/privacy';
-  }
-
-  /**
-   * @param hrefForSecurity
-   * @type {string}
-   * @description The href value of the "Security" link
-   */
-  get hrefForSecurity() {
-    return this.args.hrefForSecurity ?? 'https://www.hashicorp.com/security';
-  }
-
-  /**
-   * @param hrefForAccessibility
-   * @type {string}
-   * @description The href value of the "Accessibility" link
-   */
-  get hrefForAccessibility() {
-    return (
-      this.args.hrefForAccessibility ??
-      'https://www.hashicorp.com/accessibility'
-    );
-  }
-}

package/addon/components/hds/app-footer/link.hbs

@@ -1,22 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<Hds::AppFooter::Item>
-  <Hds::Link::Inline
-    class="hds-app-footer__link"
-    @color="secondary"
-    @current-when={{@current-when}}
-    @models={{hds-link-to-models @model @models}}
-    @query={{hds-link-to-query @query}}
-    @replace={{@replace}}
-    @route={{@route}}
-    @isRouteExternal={{@isRouteExternal}}
-    @href={{@href}}
-    @isHrefExternal={{@isHrefExternal}}
-    @icon={{@icon}}
-    @iconPosition={{@iconPosition}}
-    ...attributes
-  ><Hds::Text::Body @tag="span" @size="100">{{yield}}</Hds::Text::Body></Hds::Link::Inline>
-</Hds::AppFooter::Item>

package/addon/components/hds/app-footer/status-link.hbs

@@ -1,20 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<Hds::AppFooter::Link
-  class={{this.classNames}}
-  style={{this.itemStyle}}
-  @current-when={{@current-when}}
-  @models={{hds-link-to-models @model @models}}
-  @query={{hds-link-to-query @query}}
-  @replace={{@replace}}
-  @route={{@route}}
-  @isRouteExternal={{@isRouteExternal}}
-  @href={{this.href}}
-  @isHrefExternal={{@isHrefExternal}}
-  @icon={{this.statusIcon}}
-  @iconPosition="leading"
-  ...attributes
->{{this.text}}</Hds::AppFooter::Link>

package/addon/components/hds/app-footer/status-link.js

@@ -1,121 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { htmlSafe } from '@ember/template';
-import { assert } from '@ember/debug';
-
-export const STATUSES = {
-  operational: {
-    text: 'System operational',
-    iconName: 'check-circle',
-  },
-  degraded: {
-    text: 'System degraded',
-    iconName: 'alert-triangle',
-  },
-  maintenance: {
-    text: 'System maintenance',
-    iconName: 'alert-triangle',
-  },
-  outage: {
-    text: 'System outage',
-    iconName: 'x-circle',
-  },
-};
-
-export default class HdsAppFooterStatusLinkComponent extends Component {
-  constructor() {
-    super(...arguments);
-
-    assert(
-      'Either @status or @text for "Hds::AppFooter::StatusLink" must have a valid value',
-      this.args.text !== undefined || this.args.status
-    );
-  }
-
-  /**
-   * @param status
-   * @type {string}
-   * @description The name of the status which the StatusLink is being set to
-   */
-  get status() {
-    let status;
-    if (this.args.status) {
-      status = this.args.status.toLowerCase();
-      assert(
-        `@status for "Hds::AppFooter" must be one of the following: ${Object.keys(
-          STATUSES
-        ).join(', ')} received: ${this.args.status}`,
-        Object.keys(STATUSES).includes(status)
-      );
-    }
-    return status;
-  }
-
-  /**
-   * @param statusIcon
-   * @type {string}
-   * @description The name for the StatusLink icon
-   */
-  get statusIcon() {
-    if (this.status && !this.args.statusIcon) {
-      return STATUSES[this.status].iconName;
-    }
-    return this.args.statusIcon;
-  }
-
-  /**
-   * Get the inline style to apply to the item.
-   * @method StatusLink#itemStyle
-   * @return {string} The "style" attribute to apply to the item.
-   */
-  get itemStyle() {
-    if (this.args.statusIconColor) {
-      return htmlSafe(
-        `--hds-app-footer-status-icon-color: ${this.args.statusIconColor}`
-      );
-    } else {
-      return undefined;
-    }
-  }
-
-  /**
-   * @param text
-   * @type {string}
-   * @description The text content of the StatusLink
-   */
-  get text() {
-    if (!this.args.text) {
-      return STATUSES[this.status].text;
-    }
-    return this.args.text;
-  }
-
-  /**
-   * @param href
-   * @type {string}
-   * @description The href value of the StatusLink
-   */
-  get href() {
-    return this.args.href ?? 'https://status.hashicorp.com';
-  }
-
-  /**
-   * 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-app-footer__status-link'];
-
-    // add a class based on status if no statusIconColor is explicitly specified
-    if (this.status && !this.args.statusIconColor) {
-      classes.push(`hds-app-footer__status-link--${this.status}`);
-    }
-
-    return classes.join(' ');
-  }
-}

package/addon/components/hds/app-frame/index.hbs

@@ -1,24 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<div class="hds-app-frame" ...attributes>
-  {{#if this.hasHeader}}
-    {{yield (hash Header=(component "hds/app-frame/parts/header"))}}
-  {{/if}}
-  {{#if this.hasSidebar}}
-    {{yield (hash Sidebar=(component "hds/app-frame/parts/sidebar"))}}
-  {{/if}}
-  {{!
-    IMPORTANT: since the modals may be injected via portal or `in-element` with code that lives in the "main" container,
-    the "modal" container needs to be present in the DOM _before_ the "main" block, otherwise it may cause errors
-    where the target DOM element is not found (for example in tests where the modal may be immediately opened on first render).
-  }}
-  {{#if this.hasModals}}
-    {{yield (hash Modals=(component "hds/app-frame/parts/modals"))}}
-  {{/if}}
-  {{yield (hash Main=(component "hds/app-frame/parts/main"))}}
-  {{#if this.hasFooter}}
-    {{yield (hash Footer=(component "hds/app-frame/parts/footer"))}}
-  {{/if}}
-</div>

package/addon/components/hds/app-frame/index.js

@@ -1,52 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-
-export default class HdsAppFrameIndexComponent extends Component {
-  /**
-   * Indicates if the "header" container should be displayed
-   *
-   * @param hasHeader
-   * @type {boolean}
-   * @default true
-   */
-  get hasHeader() {
-    return this.args.hasHeader ?? true;
-  }
-
-  /**
-   * Indicates if the "sidebar" container should be displayed
-   *
-   * @param hasSidebar
-   * @type {boolean}
-   * @default true
-   */
-  get hasSidebar() {
-    return this.args.hasSidebar ?? true;
-  }
-
-  /**
-   * Indicates if the "footer" container should be displayed
-   *
-   * @param hasFooter
-   * @type {boolean}
-   * @default true
-   */
-  get hasFooter() {
-    return this.args.hasFooter ?? true;
-  }
-
-  /**
-   * Indicates if the "modals" container should be displayed
-   *
-   * @param hasModals
-   * @type {boolean}
-   * @default true
-   */
-  get hasModals() {
-    return this.args.hasModals ?? true;
-  }
-}

package/addon/components/hds/app-frame/parts/footer.hbs

@@ -1,7 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<footer class="hds-app-frame__footer" ...attributes>
-  {{yield}}
-</footer>

package/addon/components/hds/app-frame/parts/header.hbs

@@ -1,7 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<header class="hds-app-frame__header" ...attributes>
-  {{yield}}
-</header>

package/addon/components/hds/app-frame/parts/main.hbs

@@ -1,7 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<main class="hds-app-frame__main" ...attributes>
-  {{yield}}
-</main>

package/addon/components/hds/app-frame/parts/modals.hbs

@@ -1,6 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-{{! we use `:empty` in CSS so we have to avoid whitespaces }}
-<div class="hds-app-frame__modals" ...attributes>{{~yield~}}</div>

package/addon/components/hds/app-frame/parts/sidebar.hbs

@@ -1,7 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<aside class="hds-app-frame__sidebar" ...attributes>
-  {{yield}}
-</aside>

package/addon/components/hds/application-state/body.hbs

@@ -1,13 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<div class="hds-application-state__body" ...attributes>
-  {{#if (has-block)}}
-    {{yield}}
-  {{else}}
-    <Hds::Text::Body class="hds-application-state__body-text" @tag="p" @size="300">
-      {{@text}}
-    </Hds::Text::Body>
-  {{/if}}
-</div>

package/addon/components/hds/application-state/footer.hbs

@@ -1,7 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<div class={{this.classNames}} ...attributes>
-  {{yield (hash Link::Standalone=(component "hds/link/standalone"))}}
-</div>

package/addon/components/hds/application-state/footer.js

@@ -1,35 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-
-export default class HdsApplicationStateFooterComponent extends Component {
-  /**
-   * Indicate if the footer should have a top border or not.
-   *
-   * @param hasDivider
-   * @type {boolean}
-   * @default false
-   */
-  get hasDivider() {
-    return this.args.hasDivider || false;
-  }
-
-  /**
-   * 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-application-state__footer'];
-
-    // add a class based on the existence of @hasDivider argument
-    if (this.hasDivider) {
-      classes.push(`hds-application-state__footer--has-divider`);
-    }
-
-    return classes.join(' ');
-  }
-}

package/addon/components/hds/application-state/header.hbs

@@ -1,20 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<div class="hds-application-state__header" ...attributes>
-  {{#if @icon}}
-    <div class="hds-application-state__icon">
-      <FlightIcon @name={{@icon}} @size="24" />
-    </div>
-  {{/if}}
-  <Hds::Text::Display class="hds-application-state__title" @tag="div" @size="400" @weight="semibold">
-    {{@title}}
-  </Hds::Text::Display>
-  {{#if @errorCode}}
-    <Hds::Text::Body class="hds-application-state__error-code" @tag="div" @size="100" @weight="medium">
-      Error
-      {{@errorCode}}
-    </Hds::Text::Body>
-  {{/if}}
-</div>

package/addon/components/hds/application-state/index.hbs

@@ -1,13 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<div class="hds-application-state" ...attributes>
-  {{yield
-    (hash
-      Header=(component "hds/application-state/header")
-      Body=(component "hds/application-state/body")
-      Footer=(component "hds/application-state/footer")
-    )
-  }}
-</div>

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

@@ -1,18 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<div class={{this.classNames}} ...attributes>
-  {{#if @icon}}
-    <div class="hds-badge__icon">
-      <FlightIcon @name={{this.icon}} @size="16" @stretched={{true}} />
-    </div>
-  {{/if}}
-  {{#if this.isIconOnly}}
-    <span class="sr-only">{{this.text}}</span>
-  {{else}}
-    <div class="hds-badge__text">
-      {{this.text}}
-    </div>
-  {{/if}}
-</div>