@hashicorp/design-system-components 2.0.0 → 2.2.0

package/app/styles/components/application-state.scss

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// APPLICATION-STATE COMPONENT
+//
+
+$hds-application-state-padding: 12px 0;
+
+.hds-application-state {
+  width: 19.5rem;
+  max-width: 100%;
+  margin: 0 auto; // this will center the component in the parent container
+}
+
+.hds-application-state__header {
+  display: grid;
+  grid-template-columns: min-content 1fr;
+  align-items: start;
+  color: var(--token-color-foreground-faint);
+}
+
+.hds-application-state__icon {
+  margin-right: 8px; // instead of column gap
+  padding-top: 4px; // this seems to align the icon along with line 21
+}
+
+.hds-application-state__title,
+.hds-application-state__error-code {
+  grid-column-start: 2;
+}
+
+.hds-application-state__body {
+  display: flex;
+  padding: $hds-application-state-padding;
+  color: var(--token-color-foreground-faint);
+}
+
+.hds-application-state__footer {
+  display: flex;
+  justify-content: space-between;
+
+  &.hds-application-state__footer--has-divider {
+    padding: $hds-application-state-padding;
+    border-top: 1px solid var(--token-color-border-strong);
+  }
+
+  // in case users do something outside design guidelines
+  .hds-link-standalone + .hds-link-standalone {
+    margin-left: 8px;
+  }
+}
+

package/app/styles/components/dropdown.scss

@@ -14,6 +14,17 @@
 
 $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
 
+// DROPDOWN
+
+.hds-dropdown--is-inline {
+  display: inline-block;
+
+  .hds-dropdown-toggle-icon,
+  .hds-dropdown-toggle-button {
+    display: inline-flex;
+  }
+}
+
 // TOGGLE/ICON
 
 .hds-dropdown-toggle-icon {

package/app/styles/components/flyout.scss

@@ -45,7 +45,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 50;
+  z-index: 49;
   background: var(--token-color-palette-neutral-700);
   opacity: 0.5;
 }
@@ -91,6 +91,20 @@
   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);
 }

package/app/styles/components/form/checkbox.scss

@@ -30,7 +30,7 @@
   &:not(:checked, :indeterminate) {
     background-color: var(--token-form-control-base-surface-color-default);
     border-color: var(--token-form-control-base-border-color-default);
-    box-shadow: var(--hds-elevation-inset-box-shadow);
+    box-shadow: var(--token-elevation-inset-box-shadow);
   }
 
   &:checked {

package/app/styles/components/form/radio.scss

@@ -30,7 +30,7 @@
   &:not(:checked) {
     background-color: var(--token-form-control-base-surface-color-default);
     border-color: var(--token-form-control-base-border-color-default);
-    box-shadow: var(--hds-elevation-inset-box-shadow);
+    box-shadow: var(--token-elevation-inset-box-shadow);
   }
 
   &:checked {

package/app/styles/components/form/text-input.scss

@@ -18,7 +18,7 @@
   background-color: var(--token-form-control-base-surface-color-default);
   border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
   border-radius: var(--token-form-control-border-radius);
-  box-shadow: var(--hds-elevation-inset-box-shadow);
+  box-shadow: var(--token-elevation-inset-box-shadow);
 
   // PLACEHOLDER
 

package/app/styles/components/form/textarea.scss

@@ -13,12 +13,13 @@
 .hds-form-textarea {
   width: 100%;
   max-width: 100%;
+  min-height: 36px;
   padding: var(--token-form-control-padding);
   color: var(--token-form-control-base-foreground-value-color);
   background-color: var(--token-form-control-base-surface-color-default);
   border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
   border-radius: var(--token-form-control-border-radius);
-  box-shadow: var(--hds-elevation-inset-box-shadow);
+  box-shadow: var(--token-elevation-inset-box-shadow);
   resize: vertical;
 
   // PLACEHOLDER

package/app/styles/components/side-nav/a11y-refocus.scss

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// SIDE-NAV > A11Y-REFOCUS "SKIP LINK"
+//
+
+.hds-side-nav { // this extra qualifier is needed to increase specificity of the selector, please don't remove it
+  .ember-a11y-refocus-skip-link {
+    top: 10px;
+    left: 10px;
+    z-index: 20;
+    width: max-content;
+    padding: 2px 10px 4px;
+    color: var(--token-color-foreground-action);
+    font-size: var(--token-typography-display-200-font-size);
+    font-family: var(--token-typography-display-200-font-family);
+    line-height: var(--token-typography-display-200-line-height);
+    background-color: var(--token-color-surface-faint);
+    border-radius: 3px;
+    transform: translateY(-200%);
+    transition: 0.6s ease-in-out;
+
+    &:focus {
+      transform: translateY(0);
+    }
+  }
+}

package/app/styles/components/side-nav/content.scss

@@ -0,0 +1,156 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// SIDE-NAV > CONTENT (PORTALS + LISTS OF ITEMS/LINKS)
+//
+
+@use "../../mixins/focus-ring" as *;
+
+
+// PANELS (wrappers used in conjunction with the portal elements)
+
+.hds-side-nav__content {
+  // we use this trick (increasing the container size here, and reducing it at single panel level)
+  // to have the panels width match the sidebar extended width (it's used in the animated sliding of the panels)
+  margin: 0 calc(var(--token-side-nav-wrapper-padding-horizontal) * -1);
+}
+
+.hds-side-nav__content-panels {
+  // see https://codepen.io/didoo/pen/YzOeRPr
+  display: grid;
+  grid-template-columns: repeat(5, 100%);
+  width: 100%;
+}
+
+.hds-side-nav__content-panel {
+  padding: 0 var(--token-side-nav-wrapper-padding-horizontal);
+}
+
+// (LIST) TITLE
+
+.hds-side-nav__list-title {
+  display: flex;
+  align-items: center;
+  min-height: 34px;
+  margin-top: var(--token-side-nav-body-list-margin-vertical);
+  padding: 0 var(--token-side-nav-body-list-item-padding-horizontal);
+  color: var(--token-side-nav-color-foreground-faint);
+
+  // Remove margin from title at top of all list-items & lists
+  .hds-side-nav__list-wrapper:first-child .hds-side-nav__list-item:first-child > & {
+    margin-top: 0;
+  }
+}
+
+
+// LIST (root elements)
+
+.hds-side-nav__list-wrapper, // <nav> element
+.hds-side-nav__list {        // <ul> element
+  margin: 0;
+  padding: 0;
+}
+
+
+// ITEM (generic container)
+
+.hds-side-nav__list-item { // <li> element
+  list-style-type: none;
+
+  & + & {
+    margin-top: var(--token-side-nav-body-list-item-spacing-vertical);
+  }
+}
+
+.hds-side-nav__list-item-link { // <a>/<button> element (via Hds::Interactive)
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: var(--token-side-nav-body-list-item-height);
+  padding: var(--token-side-nav-body-list-item-padding-vertical) var(--token-side-nav-body-list-item-padding-horizontal);
+  color: var(--token-side-nav-color-foreground-primary);
+  text-decoration: none;
+  background: var(--token-side-nav-color-surface-primary);
+  // "Link" could render as an HTML button element so this overrides the default border style in that case:
+  border-color: transparent;
+  border-radius: var(--token-side-nav-body-list-item-border-radius);
+
+  &:focus,
+  &.mock-focus {
+    @include hds-focus-ring-with-pseudo-element();
+  }
+
+  &:hover,
+  &.mock-hover {
+    background: var(--token-side-nav-color-surface-interactive-hover);
+    border-color: transparent;
+
+    .hds-side-nav__list-item-text,
+    .hds-side-nav__list-item-icon-leading,
+    .hds-side-nav__list-item-icon-trailing {
+      color: var(--token-side-nav-color-foreground-strong);
+    }
+  }
+
+  // notice: this ".active" extra class is used to match the corresponding `active` class assigned automatically
+  // by the `<LinkTo>` Ember component (when the link is "current), so that consumers get it for free if they want
+  // otherwise they can use the `@isActive` argument to set this visual state directly
+  &.active,
+  &:active,
+  &.mock-active {
+    background: var(--token-side-nav-color-surface-interactive-active);
+
+    .hds-side-nav__list-item-text,
+    .hds-side-nav__list-item-icon-leading,
+    .hds-side-nav__list-item-icon-trailing {
+      color: var(--token-side-nav-color-foreground-strong);
+    }
+
+    .hds-badge,
+    .hds-badge-count {
+      color: var(--token-color-foreground-primary);
+      background: var(--token-color-surface-strong);
+    }
+  }
+
+  .hds-badge,
+  .hds-badge-count {
+    margin-left: var(--token-side-nav-body-list-item-content-spacing-horizontal);
+  }
+}
+
+// special override for the "back-link" element (no visible active state, by design)
+.hds-side-nav__list-item-link--back-link {
+  &:active,
+  &.mock-active {
+    background: var(--token-side-nav-color-surface-primary);
+
+    .hds-side-nav__list-item-text,
+    .hds-side-nav__list-item-icon-leading,
+    .hds-side-nav__list-item-icon-trailing {
+      color: var(--token-side-nav-color-foreground-primary);
+    }
+  }
+}
+
+
+// LIST ITEM > INNER ELEMENTS
+
+.hds-side-nav__list-item-text {
+  color: var(--token-side-nav-color-foreground-primary);
+  text-align: left;
+}
+
+.hds-side-nav__list-item-icon-leading {
+  flex: none;
+  margin-right: var(--token-side-nav-body-list-item-content-spacing-horizontal);
+}
+
+.hds-side-nav__list-item-icon-trailing {
+  flex: none;
+  margin-left: auto;
+  padding-left: var(--token-side-nav-body-list-item-content-spacing-horizontal);
+}

package/app/styles/components/side-nav/header.scss

@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// SIDE-NAV > HEADER
+//
+
+@use "../../mixins/focus-ring" as *;
+
+@mixin hds-side-nav-icon-button($add-visible-border: false) {
+  color: var(--token-side-nav-color-foreground-strong);
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--token-side-nav-body-list-item-border-radius);
+  cursor: pointer;
+
+  @if ($add-visible-border) {
+    border-color: var(--token-color-palette-neutral-500);
+  }
+
+  &:focus,
+  &.mock-focus {
+    @include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px);
+  }
+
+  &:hover,
+  &.mock-hover {
+    color: var(--token-side-nav-color-foreground-strong); // to avoid overrides by specificity (eg. `a:hover`)
+    background: var(--token-side-nav-color-surface-interactive-hover);
+  }
+
+  &:active,
+  &.mock-active {
+    color: var(--token-side-nav-color-foreground-strong); // to avoid overrides by specificity (eg. `a:hover`)
+    background: var(--token-side-nav-color-surface-interactive-active);
+
+    @if ($add-visible-border) {
+      border-color: var(--token-color-palette-neutral-400);
+    }
+  }
+}
+
+// HEADER (LAYOUT WRAPPER)
+
+.hds-side-nav-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+
+// LOGO
+
+.hds-side-nav-header__logo-container {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--token-side-nav-header-home-link-logo-size);
+  height: var(--token-side-nav-header-home-link-logo-size);
+}
+
+// "home-link"
+
+.hds-side-nav__home-link {
+  @include hds-side-nav-icon-button();
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: calc(var(--token-side-nav-header-home-link-padding) - 1px); // by design -  we take in account the transparent border
+}
+
+
+// ACTIONS
+
+.hds-side-nav-header__actions-container {
+  display: flex;
+
+  > * + * { margin-left: var(--token-side-nav-header-actions-spacing); }
+}
+
+// dropdown overrides
+
+.hds-side-nav__dropdown { // ⬅︎ add this class name to the `Hds::Dropdown` component to apply the style overrides
+  .hds-dropdown-toggle-icon {
+    @include hds-side-nav-icon-button($add-visible-border: true);
+  }
+}
+
+// generic "icon-button"
+
+.hds-side-nav__icon-button {
+  @include hds-side-nav-icon-button($add-visible-border: true);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px; // same height as the dropdown "toggle"
+  height: 36px;
+  padding: 5px; // we take in account the transparent border
+}

package/app/styles/components/side-nav/index.scss

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+@use "./vars.scss";
+@use "./main.scss";
+@use "./header.scss";
+@use "./content.scss";
+@use "./a11y-refocus.scss";

package/app/styles/components/side-nav/main.scss

@@ -0,0 +1,202 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// SIDE-NAV
+//
+
+.hds-side-nav {
+  position: sticky;
+  top: 0;
+  z-index: 20; // needs to stay above the main content
+  width: var(--hds-app-sidenav-width-fixed); // "default" width used by the `SideNav::Base` subcomponent (that is not responsive)
+  height: 100vh;
+  min-height: 100vh;
+  isolation: isolate; // used to create a new stacking context (so we can set the overlay's z-index to -1)
+
+  // RESPONSIVENESS - This controls the width of the top-level container ("sidebar") in the grid, and impacts the available space for the "main" grid area
+
+  &.hds-side-nav--is-responsive {
+    transition:
+      width var(--hds-app-sidenav-animation-duration)
+      var(--hds-app-sidenav-animation-easing);
+  }
+
+  // mobile
+  &.hds-side-nav--is-mobile {
+    width: var(--hds-app-sidenav-width-minimized);
+  }
+
+  // desktop
+  &.hds-side-nav--is-desktop {
+    width: var(--hds-app-sidenav-width-expanded);
+  }
+}
+
+
+// OVERLAY
+
+.hds-side-nav__overlay {
+  position: fixed;
+  z-index: -1;
+  inset: 0;
+  background-color: var(--token-color-palette-neutral-700);
+  opacity: 0.2;
+  transition:
+    opacity var(--hds-app-sidenav-animation-duration)
+    var(--hds-app-sidenav-animation-easing)
+    var(--hds-app-sidenav-animation-delay);
+
+  // when we're minimized (mobile) we don't want the overlay to be visible/interactive
+  .hds-side-nav--is-minimized & {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  // when it's desktop we _never_ want the overlay to be visible
+  .hds-side-nav--is-desktop & {
+    display: none;
+  }
+}
+
+
+// MENU/TOGGLE BUTTON
+
+.hds-side-nav__menu-toggle-button {
+  position: absolute;
+  z-index: 1;
+  color: var(--token-color-foreground-high-contrast);
+  background: none;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition-timing-function: var(--hds-app-sidenav-animation-easing);
+  transition-duration: var(--hds-app-sidenav-animation-duration);
+  transition-property: width, height, padding, border-radius, transform;
+
+  &:hover {
+    background-color: var(--token-color-palette-neutral-600);
+    border-color: transparent;
+  }
+
+  &:active {
+    background-color: var(--token-color-palette-neutral-500);
+    border-color: transparent;
+  }
+
+  &:focus {
+    background-color: var(--token-color-palette-neutral-500);
+    border-color: var(--token-color-focus-action-internal);
+    outline: 3px solid var(--token-color-focus-action-external);
+  }
+
+  // by default it's styled as "close" button
+  .hds-side-nav--is-mobile & {
+    width: 24px;
+    height: 24px;
+    padding: 1px;
+    background-color: var(--token-color-foreground-primary);
+    border-radius: 3px;
+    transform:
+      translateX(calc(var(--hds-app-sidenav-width-expanded) + 8px))
+      translateY(24px);
+    // z-index: 15; // not needed anymore?
+  }
+
+  // when the sidenav is minimized it's styled as "menu" button
+  .hds-side-nav--is-mobile.hds-side-nav--is-minimized & {
+    width: 36px;
+    height: 36px;
+    padding: 5px;
+    border-radius: 5px;
+    transform: translateX(22px) translateY(var(--hds-app-sidenav-menu-button-y-shift));
+  }
+
+  // when it's desktop we _never_ want to show the menu/toggle button
+  .hds-side-nav--is-desktop & {
+    display: none;
+  }
+}
+
+
+// RESPONSIVE WRAPPER
+// this container element is used to control the width of the sidebar at different viewports (desktop/mobile) and states (minimized/expanded)
+
+.hds-side-nav__wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  color: var(--token-side-nav-color-foreground-primary); // we set a default color (in case generic content is added to the header/body/footer of the sidenav)
+  background: var(--token-side-nav-color-surface-primary);
+
+  // RESPONSIVENESS - This controls the width of the "sidenav" container, and is independent (bur related) from the parent "sidebar" grid area
+
+  .hds-side-nav--is-responsive & {
+    transition:
+      width var(--hds-app-sidenav-animation-duration)
+      var(--hds-app-sidenav-animation-easing);
+  }
+
+  // mobile
+  .hds-side-nav--is-mobile.hds-side-nav--is-minimized & {
+    width: var(--hds-app-sidenav-width-minimized);
+  }
+
+  .hds-side-nav--is-mobile.hds-side-nav--is-not-minimized & {
+    width: var(--hds-app-sidenav-width-expanded);
+  }
+
+  // desktop
+  .hds-side-nav--is-desktop & {
+    width: var(--hds-app-sidenav-width-expanded);
+  }
+}
+
+// wrapper's child "containers"
+
+.hds-side-nav__wrapper-header {
+  padding-top: var(--token-side-nav-wrapper-padding-vertical);
+  padding-right: var(--token-side-nav-wrapper-padding-horizontal);
+  padding-bottom: 8px; // by design
+  padding-left: var(--token-side-nav-wrapper-padding-horizontal);
+}
+
+.hds-side-nav__wrapper-body {
+  flex: 1;
+  padding:
+    var(--token-side-nav-wrapper-padding-vertical)
+    var(--token-side-nav-wrapper-padding-horizontal);
+  overflow-y: auto;
+}
+
+.hds-side-nav__wrapper-footer {
+  padding:
+    var(--token-side-nav-wrapper-padding-vertical)
+    var(--token-side-nav-wrapper-padding-horizontal);
+}
+
+
+// "HIDE-WHEN-MINIMIZED" SPECIAL CLASS
+// this is a special class that is used to control which elements of the sidenav need to be:
+// - hidden (immediately) when the sidenav is "minimized"
+// - shown (transitioning their opacity) when the sidenav is "expanded"
+
+.hds-side-nav-hide-when-minimized {
+  .hds-side-nav--is-mobile.hds-side-nav--is-minimized & {
+    visibility: hidden !important; // we need `!important` here to override the inline style applied to the single panels
+    opacity: 0;
+    transition: none;
+  }
+
+  .hds-side-nav--is-mobile.hds-side-nav--is-not-minimized &,
+  .hds-side-nav--is-desktop & {
+    visibility: visible;
+    opacity: 1;
+    transition:
+      opacity var(--hds-app-sidenav-animation-duration)
+      var(--hds-app-sidenav-animation-easing)
+      var(--hds-app-sidenav-animation-delay);
+  }
+}
+

package/app/styles/components/side-nav/vars.scss

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// SIDE-NAV - VARS
+//
+
+
+// LOCAL VARIABLES
+// we use `hds-app` as prefix to distinguish them from the normal tokens
+// notice: they may be overwritten at consumer-level side if needed by re-defining the variables in a container element
+
+:root {
+  // breakpoint
+  --hds-app-desktop-breakpoint: 1088px; // this is used only to read its value via JS and set the `hds-side-nav--is-desktop` class
+  // widths
+  --hds-app-sidenav-width-minimized: 80px;
+  --hds-app-sidenav-width-expanded: 280px;
+  --hds-app-sidenav-width-fixed: var(--hds-app-sidenav-width-expanded);
+  // sidebar menu
+  --hds-app-sidenav-menu-button-y-shift: 84px;
+  // animation
+  --hds-app-sidenav-animation-duration: 250ms;
+  --hds-app-sidenav-animation-delay: var(--hds-app-sidenav-animation-duration);
+  --hds-app-sidenav-animation-easing: cubic-bezier(0.65, 0, 0.35, 1);
+}
+
+// reduced motion
+
+@media (prefers-reduced-motion) {
+  :root {
+    --hds-app-sidenav-animation-duration: 0;
+  }
+}