@hashicorp/design-system-components 3.6.0 → 4.0.0

package/dist/styles/@hashicorp/design-system-components.scss

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+// these files come from the 'design-system-tokens' package
+@use "tokens";
+@use "helpers/color";
+@use "helpers/elevation";
+@use "helpers/focus-ring";
+@use "helpers/typography";
+
+// this file comes from the 'ember-flight-icons' package
+@use "icons";
+
+// Notice: this list can be automatically edited by the Ember blueprint, please don't remove the start/end comments
+// START COMPONENTS CSS FILES IMPORTS
+@use "../components/accordion";
+@use "../components/alert";
+@use "../components/app-footer";
+@use "../components/app-frame";
+@use "../components/application-state";
+@use "../components/badge";
+@use "../components/badge-count";
+@use "../components/breadcrumb";
+@use "../components/button";
+@use "../components/button-set";
+@use "../components/card";
+@use "../components/code-block";
+@use "../components/copy";
+@use "../components/disclosure-primitive";
+@use "../components/dismiss-button";
+@use "../components/dropdown";
+@use "../components/flyout";
+@use "../components/form"; // multiple components
+@use "../components/icon-tile";
+@use "../components/link"; // multiple components
+@use "../components/menu-primitive";
+@use "../components/modal";
+@use "../components/page-header";
+@use "../components/pagination";
+@use "../components/reveal";
+@use "../components/segmented-group";
+@use "../components/separator";
+@use "../components/side-nav";
+@use "../components/stepper";
+@use "../components/table";
+@use "../components/tabs";
+@use "../components/tag";
+@use "../components/text";
+@use "../components/toast";
+@use "../components/tooltip";
+// END COMPONENT CSS FILES IMPORTS
+
+// stylelint-disable-next-line selector-class-pattern
+.sr-only {
+  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 */
+}

package/dist/styles/@hashicorp/design-system-components.scss.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system-components.scss","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/styles/components/flyout.scss

@@ -0,0 +1,113 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// FLYOUT
+//
+
+$hds-flyout-max-width: calc(100vw - var(--hds-app-sidenav-width-minimized) / 2 );
+
+@mixin hds-flyout-position($size) {
+  width: min($size, #{$hds-flyout-max-width});
+  max-width: $hds-flyout-max-width;
+
+  &[open] {
+    margin-left: calc(100% - min($size, #{$hds-flyout-max-width}));
+  }
+}
+
+.hds-flyout {
+  z-index: 49; // modal component is 50; we want to make sure the flyout always stays below the modal, regardless the DOM order
+  flex-direction: column;
+  height: 100vh;
+  max-height: 100vh;
+  margin: 0;
+  padding: 0;
+  background: var(--token-color-surface-primary);
+  border: none;
+  box-shadow: 0 2px 3px 0 #3b3d4540, 0 12px 24px 0 #3b3d4559; // TODO: convert to token
+
+  &[open] {
+    position: fixed;
+    display: flex;
+  }
+
+  // we hide the native `::backdrop` pseudo-element in favor of using
+  // an `hds-flyout__overlay` element to detect click events with more ease
+  &::backdrop {
+    display: none;
+  }
+}
+
+.hds-flyout__overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 49;
+  background: var(--token-color-palette-neutral-700);
+  opacity: 0.5;
+}
+
+.hds-flyout__header {
+  display: flex;
+  flex: none;
+  gap: 16px;
+  align-items: flex-start;
+  padding: 16px 24px;
+  color: var(--token-color-foreground-strong);
+}
+
+.hds-flyout__icon {
+  flex: none;
+  align-self: center;
+}
+
+.hds-flyout__title {
+  flex-grow: 1;
+}
+
+.hds-flyout__tagline {
+  margin-bottom: 4px;
+}
+
+.hds-flyout__dismiss {
+  align-self: center;
+}
+
+.hds-flyout__description {
+  padding: 0 24px 16px;
+}
+
+.hds-flyout__body {
+  flex: 1 1 auto;
+  padding: 24px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  border-top: 1px solid var(--token-color-border-primary);
+}
+
+.hds-flyout__footer {
+  flex: none;
+  padding: 16px 24px;
+  background: var(--token-color-surface-faint);
+  border-top: 1px solid var(--token-color-border-primary);
+
+  // Tertiary buttons must always be placed/aligned at the end of the row
+  .hds-button-set {
+    .hds-button--color-tertiary {
+      margin-left: auto;
+    }
+  }
+}
+
+.hds-flyout--size-medium {
+  @include hds-flyout-position(480px);
+}
+
+.hds-flyout--size-large {
+  @include hds-flyout-position(720px);
+}

package/dist/styles/components/table.scss

@@ -0,0 +1,277 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// TABLE
+//
+//
+
+@use "../mixins/focus-ring" as *;
+
+$hds-table-border-radius: 6px;
+$hds-table-border-width: 1px;
+$hds-table-inner-border-radius: $hds-table-border-radius - $hds-table-border-width;
+$hds-table-border-color: var(--token-color-border-primary);
+$hds-table-header-height: 48px;
+$hds-table-cell-padding-medium: 14px 16px 13px 16px; // the 1px difference is to account for the bottom border
+$hds-table-cell-padding-short: 6px 16px 5px 16px; // the 1px difference is to account for the bottom border
+$hds-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px difference is to account for the bottom border
+
+
+// TABLE
+
+.hds-table {
+  width: 100%;
+  border: $hds-table-border-width solid $hds-table-border-color;
+  border-radius: $hds-table-border-radius;
+  border-spacing: 0;
+}
+
+
+// table display
+
+.hds-table--layout-fixed {
+  table-layout: fixed;
+}
+
+
+// ----------------------------------------------------------------
+
+// TABLE HEADER
+
+.hds-table__thead {
+  .hds-table__tr {
+    color: var(--token-color-foreground-strong);
+    background-color: var(--token-color-surface-strong);
+
+    .hds-table__th {
+      position: relative;
+      padding: $hds-table-cell-padding-medium;
+      text-align: left;
+      border-top: none;
+      border-right: none;
+      border-bottom: $hds-table-border-width solid $hds-table-border-color;
+      border-left: none;
+
+      // border between two cells (we emulate a cell border slightly detached from the top/bottom borders)
+
+      + .hds-table__th::before {
+        position: absolute;
+        top: 6px;
+        bottom: 6px;
+        left: -1px; // we need to offset the border by 1px to render a right border of the previous cell
+        width: 1px;
+        background-color: $hds-table-border-color;
+        content: "";
+        pointer-events: none;
+      }
+    }
+
+    // horizontal alignment
+
+    .hds-table__th--align-center,
+    .hds-table__td--align-center {
+      text-align: center;
+
+      .hds-table__th-content {
+        justify-content: center;
+      }
+    }
+
+    .hds-table__th--align-right,
+    .hds-table__td--align-right {
+      text-align: right;
+
+      .hds-table__th-content {
+        justify-content: flex-end;
+      }
+    }
+
+    // border radius: target first and last th elements in the row
+
+    &:first-of-type {
+      .hds-table__th:first-child {
+        border-top-left-radius: $hds-table-inner-border-radius;
+      }
+
+      .hds-table__th:last-child {
+        border-top-right-radius: $hds-table-inner-border-radius;
+      }
+    }
+  }
+}
+
+// multi-select (isSelectable=true)
+
+.hds-table__th--is-selectable {
+  width: 48px;
+}
+
+.hds-table__th-content {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.hds-table__th-button {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin: -2px 0; // this is necessary to compensate for the height of the button being 24px while the line height of the text is 20px (the overall height of the cell shoud be 48px and we want to keep the cell's padding as is for consistency with Figma)
+  padding: 0;
+  color: var(--token-color-foreground-faint);
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 3px;
+
+  &:hover,
+  &.mock-hover {
+    color: var(--token-color-foreground-primary);
+    background-color: var(--token-color-surface-interactive);
+    border-color: var(--token-color-border-strong);
+    box-shadow: var(--token-elevation-low-box-shadow);
+    cursor: pointer;
+  }
+
+  @include hds-focus-ring-with-pseudo-element($radius: inherit);
+
+  &:active,
+  &.mock-active {
+    color: var(--token-color-foreground-primary);
+    background-color: var(--token-color-surface-interactive-active);
+    border-color: var(--token-color-border-strong);
+    box-shadow: none;
+  }
+}
+
+.hds-table__th-button--is-sorted {
+  color: var(--token-color-foreground-action);
+
+  &:hover,
+  &.mock-hover {
+    color: var(--token-color-foreground-action-hover);
+  }
+
+  &:active,
+  &.mock-active {
+    color: var(--token-color-foreground-action-active);
+  }
+}
+
+.hds-table__th-button-aria-label-hidden-segment {
+  display: none;
+}
+
+
+// ----------------------------------------------------------------
+
+// TABLE BODY
+
+.hds-table__tbody {
+  .hds-table__tr {
+    color: var(--token-color-foreground-primary);
+    background-color: var(--token-color-surface-primary);
+
+    // striped rows
+
+    .hds-table--striped &:nth-child(even) {
+      background-color: var(--token-color-surface-faint);
+    }
+
+    // border radius: target first th (scope of row) and td, and last td elements in the last row
+
+    &:last-of-type {
+      .hds-table__th,
+      .hds-table__td {
+        border-bottom: none;
+      }
+
+      .hds-table__th:first-child,
+      .hds-table__td:first-child {
+        border-bottom-left-radius: $hds-table-inner-border-radius;
+      }
+
+      // a <th> will never be last child, only first child
+      .hds-table__td:last-child {
+        border-bottom-right-radius: $hds-table-inner-border-radius;
+      }
+    }
+  }
+
+  .hds-table__th,
+  .hds-table__td {
+    text-align: left;
+    border-top: none;
+    border-right: none;
+    border-bottom: $hds-table-border-width solid $hds-table-border-color;
+    border-left: none;
+
+    // density
+
+    .hds-table--density-short & {
+      padding: $hds-table-cell-padding-short;
+    }
+
+    .hds-table--density-medium & {
+      padding: $hds-table-cell-padding-medium;
+    }
+
+    .hds-table--density-tall & {
+      padding: $hds-table-cell-padding-tall;
+    }
+
+  }
+
+  // horizontal alignment
+
+  .hds-table__th--align-center,
+  .hds-table__td--align-center {
+    text-align: center;
+
+    .hds-table__th-content {
+      justify-content: center;
+    }
+  }
+
+  .hds-table__th--align-right,
+  .hds-table__td--align-right {
+    text-align: right;
+
+    .hds-table__th-content {
+      justify-content: flex-end;
+    }
+  }
+
+  // vertical alignment (applied at table level)
+
+  .hds-table__th,
+  .hds-table__td {
+    .hds-table--valign-top & {
+      vertical-align: top;
+    }
+
+    .hds-table--valign-middle & {
+      vertical-align: middle;
+    }
+
+    .hds-table--valign-baseline & {
+      vertical-align: baseline;
+    }
+  }
+}
+
+
+// ----------------------------------------------------------------
+
+// TABLE CONTENT
+
+.hds-table__checkbox {
+  display: block;
+  margin: 2px 0;
+}

package/dist/styles/components/tabs.scss

@@ -0,0 +1,152 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// TABS
+//
+
+$hds-tabs-sizes: ( "medium", "large" );
+
+@use "../mixins/focus-ring" as *;
+
+
+// Sub-components:
+.hds-tabs__tablist-wrapper {
+  position: relative;
+
+  // bottom gray border:
+  &::before {
+    position: absolute;
+    right: 0;
+    bottom: calc((var(--token-tabs-indicator-height) - var(--token-tabs-divider-height)) / 2);
+    left: 0;
+    display: block;
+    border-top: var(--token-tabs-divider-height) solid var(--token-color-border-primary);
+    content: "";
+  }
+}
+
+.hds-tabs__tablist {
+  position: relative;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.hds-tabs__tab {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin: 0;
+  color: var(--token-color-foreground-primary);
+  white-space: nowrap;
+  text-decoration: none;
+  list-style: none;
+
+  &:hover,
+  &.mock-hover {
+    color: var(--token-color-foreground-action);
+  }
+
+  &.hds-tabs__tab--is-selected {
+    color: var(--token-color-foreground-action);
+
+    &:hover {
+      color: var(--token-color-foreground-action-hover);
+
+      & ~ .hds-tabs__tab-indicator {
+        background: var(--token-color-foreground-action-hover);
+      }
+    }
+  }
+}
+
+.hds-tabs__tab-button {
+  @include hds-focus-ring-with-pseudo-element(
+    $top: var(--token-tabs-tab-focus-inset),
+    $right: var(--token-tabs-tab-focus-inset),
+    $bottom: var(--token-tabs-tab-focus-inset),
+    $left: var(--token-tabs-tab-focus-inset),
+  );
+  position: static;
+  display: flex;
+  gap: var(--token-tabs-tab-gutter);
+  align-items: center;
+  padding: 0;
+  color: inherit;
+  font-weight: var(--token-typography-font-weight-medium);
+  font-family: var(--token-typography-body-200-font-family);
+  background-color: transparent;
+  border: none;
+  border-radius: var(--token-tabs-tab-border-radius);
+  cursor: pointer;
+
+  // Expand click target area
+  &::after {
+    position: absolute;
+    content: "";
+    inset: 0;
+  }
+}
+
+.hds-tabs__tab-indicator {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  // notice: this custom prop is set dynamically via JavaScript
+  left: var(--indicator-left-pos, 0);
+  z-index: 10;
+  display: block;
+  // notice: this custom prop is set dynamically via JavaScript
+  width: var(--indicator-width, 0);
+  height: var(--token-tabs-indicator-height);
+  background-color: var(--token-color-foreground-action);
+  border-radius: var(--token-tabs-indicator-height);
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    transition-timing-function: var(--token-tabs-indicator-transition-function);
+    transition-duration: var(--token-tabs-indicator-transition-duration);
+    transition-property: left, width;
+  }
+}
+
+// Prevent consumers from accidentally overriding default styling of HTML “hidden” attribute
+.hds-tabs__panel[hidden] {
+  display: none;
+}
+
+
+// Variants:
+
+// Size
+// medium = default
+
+$hds-tabs-size-props: (
+  "medium": (
+    "tab-height": var(--token-tabs-tab-height-medium),
+    "tab-padding-horizontal": var(--token-tabs-tab-padding-horizontal-medium),
+    "tab-font-size": var(--token-typography-body-200-font-size)
+  ),
+  "large": (
+    "tab-height": var(--token-tabs-tab-height-large),
+    "tab-padding-horizontal": var(--token-tabs-tab-padding-horizontal-large),
+    "tab-font-size": var(--token-typography-body-300-font-size)
+  )
+);
+
+@each $size in $hds-tabs-sizes {
+  .hds-tabs--size-#{$size} {
+    .hds-tabs__tab {
+      height: map-get($hds-tabs-size-props, $size, "tab-height");
+      padding: var(--token-tabs-tab-padding-vertical) map-get($hds-tabs-size-props, $size, "tab-padding-horizontal");
+    }
+  
+    .hds-tabs__tab-button {
+      font-size: map-get($hds-tabs-size-props, $size, "tab-font-size");
+    }
+  }
+}

package/dist/template-registry.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=template-registry.js.map

package/dist/template-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template-registry.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/utils/hds-get-element-id.js

@@ -0,0 +1,22 @@
+import { guidFor } from '@ember/object/internals';
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+function getElementId(element) {
+  // use @id arg, if provided
+  if (element.args.id) {
+    return element.args.id;
+  }
+
+  // otherwise, generate and memoize a guid
+  if (!element._id) {
+    element._id = guidFor(element);
+  }
+  return element._id;
+}
+
+export { getElementId };
+//# sourceMappingURL=hds-get-element-id.js.map

package/dist/utils/hds-get-element-id.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hds-get-element-id.js","sources":["../../src/utils/hds-get-element-id.js"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport { guidFor } from '@ember/object/internals';\n\nexport function getElementId(element) {\n  // use @id arg, if provided\n  if (element.args.id) {\n    return element.args.id;\n  }\n\n  // otherwise, generate and memoize a guid\n  if (!element._id) {\n    element._id = guidFor(element);\n  }\n  return element._id;\n}\n"],"names":["getElementId","element","args","id","_id","guidFor"],"mappings":";;AAAA;AACA;AACA;AACA;;AAIO,SAASA,YAAYA,CAACC,OAAO,EAAE;AACpC;AACA,EAAA,IAAIA,OAAO,CAACC,IAAI,CAACC,EAAE,EAAE;AACnB,IAAA,OAAOF,OAAO,CAACC,IAAI,CAACC,EAAE,CAAA;AACxB,GAAA;;AAEA;AACA,EAAA,IAAI,CAACF,OAAO,CAACG,GAAG,EAAE;AAChBH,IAAAA,OAAO,CAACG,GAAG,GAAGC,OAAO,CAACJ,OAAO,CAAC,CAAA;AAChC,GAAA;EACA,OAAOA,OAAO,CAACG,GAAG,CAAA;AACpB;;;;"}

package/dist/utils/hds-set-aria-described-by.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+function setAriaDescribedBy(element) {
+  // append @extraAriaDescribedBy arg, if provided
+  if (element.args.extraAriaDescribedBy) {
+    element.descriptors.push(element.args.extraAriaDescribedBy);
+  }
+  if (element.descriptors.length) {
+    element.ariaDescribedBy = element.descriptors.join(' ');
+  }
+}
+
+export { setAriaDescribedBy };
+//# sourceMappingURL=hds-set-aria-described-by.js.map

package/dist/utils/hds-set-aria-described-by.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hds-set-aria-described-by.js","sources":["../../src/utils/hds-set-aria-described-by.js"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nexport function setAriaDescribedBy(element) {\n  // append @extraAriaDescribedBy arg, if provided\n  if (element.args.extraAriaDescribedBy) {\n    element.descriptors.push(element.args.extraAriaDescribedBy);\n  }\n\n  if (element.descriptors.length) {\n    element.ariaDescribedBy = element.descriptors.join(' ');\n  }\n}\n"],"names":["setAriaDescribedBy","element","args","extraAriaDescribedBy","descriptors","push","length","ariaDescribedBy","join"],"mappings":"AAAA;AACA;AACA;AACA;;AAEO,SAASA,kBAAkBA,CAACC,OAAO,EAAE;AAC1C;AACA,EAAA,IAAIA,OAAO,CAACC,IAAI,CAACC,oBAAoB,EAAE;IACrCF,OAAO,CAACG,WAAW,CAACC,IAAI,CAACJ,OAAO,CAACC,IAAI,CAACC,oBAAoB,CAAC,CAAA;AAC7D,GAAA;AAEA,EAAA,IAAIF,OAAO,CAACG,WAAW,CAACE,MAAM,EAAE;IAC9BL,OAAO,CAACM,eAAe,GAAGN,OAAO,CAACG,WAAW,CAACI,IAAI,CAAC,GAAG,CAAC,CAAA;AACzD,GAAA;AACF;;;;"}