@fs-design/pantry 6.567.7

package/src/components/navigation-bar/_nav-submenu.scss

@@ -0,0 +1,148 @@
+.nav-submenu,
+.nav-submenu__item {
+  list-style: none;
+}
+
+.nav-submenu {
+  z-index: 2;
+
+  @media (min-width: $hamburger-breakpoint) {
+    position: relative;
+  }
+}
+
+.nav-submenu.is-open {
+  .nav-submenu__container {
+    display: flex;
+  }
+
+  .nav-submenu__title {
+    background-color: $l-primary-lightest;
+    color: $l-primary;
+
+    &::after {
+      border-color: $l-base-gray-darker;
+
+      @media (min-width: $hamburger-breakpoint) {
+        margin-top: 0.28571em;
+        transform: rotate(-45deg);
+      }
+    }
+  }
+}
+
+.nav-submenu__container {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: -100%;
+  width: 100%;
+  height: auto;
+  min-height: 100%;
+  background-color: $color-white;
+  flex-direction: column;
+
+  @media (min-width: $hamburger-breakpoint) {
+    flex-direction: row;
+    top: auto;
+    right: auto;
+    left: 50%;
+    width: auto;
+    min-height: auto;
+    margin-top: $spacing-5;
+    border: 1px solid $l-base-gray-lightest;
+    border-radius: $border-radius-default;
+    box-shadow: $box-shadow-default;
+    transform: translateX(-50%);
+  }
+}
+
+.nav-submenu__title {
+  @extend %clickable-menu-item;
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  &::after {
+    content: ' ';
+    display: inline-block;
+    height: 0.57143em;
+    width: 0.57143em;
+    margin-left: auto;
+    border-style: solid;
+    border-width: 2px 2px 0 0;
+    border-color: $l-base-gray;
+    transform: rotate(45deg);
+
+    @media (min-width: $hamburger-breakpoint) {
+      margin-left: 8px;
+      margin-top: -0.28571em;
+      transform: rotate(135deg);
+    }
+  }
+}
+
+.nav-submenu__items {
+  list-style: none;
+  padding: $spacing-5;
+  width: 100%;
+
+  @media (min-width: $hamburger-breakpoint) {
+    width: $menu-submenu-width;
+  }
+}
+
+.nav-submenu__item {
+  a:not(.btn) {
+    @extend %clickable-menu-item;
+  }
+
+  .btn--link {
+    font-family: $font-family-body;
+    color: $l-base-gray;
+    font-weight: $font-weight-medium;
+
+    &:hover {
+      text-decoration: underline;
+      background: none;
+    }
+  }
+}
+
+.nav_submenu__item-icon {
+  margin-top: $spacing-1;
+  margin-right: $spacing-3;
+}
+
+.nav-submenu__item-subtitle {
+  margin-bottom: 0;
+  margin-top: $spacing-2;
+  color: $l-base-gray;
+  font-size: $font-size-caption;
+}
+
+.nav-submenu__aside {
+  padding: $spacing-6;
+  border-top: 1px solid $l-base-gray-lightest;
+
+  @media (min-width: $hamburger-breakpoint) {
+    width: $menu-submenu-width;
+    border-top: 0;
+    border-left: 1px solid $l-base-gray-lightest;
+  }
+}
+
+.nav-submenu__item + .nav-submenu__item {
+  margin-top: $menu-margin-between;
+}
+
+.nav-submenu + .nav-submenu,
+.nav-submenu + .nav-menu__item {
+  margin-top: $menu-margin-between;
+
+  @media (min-width: $hamburger-breakpoint) {
+    margin-top: 0;
+    margin-left: $menu-margin-between;
+  }
+}

package/src/components/navigation-bar/_nav.scss

@@ -0,0 +1,90 @@
+.nav {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  width: 100%;
+
+  @media (min-width: $hamburger-breakpoint) {
+    height: auto;
+  }
+
+  &.is-open {
+    height: 100vh;
+
+    @media (min-width: $hamburger-breakpoint) {
+      height: auto;
+    }
+
+    .nav-menu--hamburger {
+      transform: translateY(0);
+    }
+
+    .navbar {
+      box-shadow: none;
+      border-bottom: 1px solid $l-base-gray-lightest;
+
+      @media (min-width: $breakpoint-small) {
+        border-bottom: 0;
+        box-shadow: $box-shadow-default;
+      }
+    }
+
+    .navbar__brand {
+      opacity: 0;
+      width: 0;
+
+      @media (min-width: $hamburger-breakpoint) {
+        opacity: 1;
+      }
+    }
+
+    .navbar__hamburger {
+      color: $l-base-gray;
+    }
+
+    .navbar__hamburger-indicator {
+      transition-delay: 0.12s;
+      transition-timing-function: $menu-hamburger-transition-fn;
+      transform: rotate(45deg);
+
+      &::before {
+        top: 0;
+        opacity: 0;
+        transition: top $menu-hamburger-transition-duration ease,
+          opacity $menu-hamburger-transition-duration ease 0.12s;
+      }
+
+      &::after {
+        bottom: 0;
+        transition: bottom $menu-hamburger-transition-duration ease,
+          transform $menu-hamburger-transition-duration
+            $menu-hamburger-transition-fn 0.12s;
+        transform: rotate(-90deg);
+      }
+    }
+
+    .navbar__hamburger-return {
+      width: auto;
+      margin-right: auto;
+    }
+  }
+
+  &.is-open.is-submenu-open {
+    .navbar__hamburger-return {
+      display: flex;
+      opacity: 1;
+
+      @media (min-width: $hamburger-breakpoint) {
+        display: none;
+      }
+    }
+
+    .nav-menu__items {
+      transform: translateX(-100%);
+
+      @media (min-width: $hamburger-breakpoint) {
+        transform: none;
+      }
+    }
+  }
+}

package/src/components/navigation-bar/_navbar.scss

@@ -0,0 +1,114 @@
+.navbar {
+  display: flex;
+  align-items: center;
+  padding: $navbar-padding;
+  line-height: 1;
+  box-shadow: $box-shadow-default;
+  min-height: $navbar-min-height;
+  position: relative;
+  z-index: 3;
+  background-color: $color-white;
+
+  @media (min-width: $hamburger-breakpoint) {
+    padding-left: $spacing-7;
+    padding-right: $spacing-7;
+  }
+}
+
+.navbar__brand {
+  display: inline-block;
+  transition: opacity 200ms linear;
+}
+
+.navbar__hamburger-return {
+  opacity: 0;
+  width: 0;
+  border: 0;
+  padding: 0;
+  box-shadow: none;
+  display: flex;
+  align-items: center;
+  font-family: $font-family-body;
+  font-size: $font-size-small;
+  font-weight: $font-weight-medium;
+  transition: opacity 200ms linear;
+
+  &::before {
+    content: ' ';
+    display: inline-block;
+    margin-right: 8px;
+    height: 0.57143em;
+    width: 0.57143em;
+    border-style: solid;
+    border-width: 2px 0 0 2px;
+    border-color: $l-base-gray-darker;
+    transform: rotate(-45deg);
+  }
+
+  &:hover {
+    transform: none;
+    box-shadow: none;
+    color: $l-primary;
+  }
+}
+
+.navbar__hamburger {
+  font-size: 2rem;
+  width: 1em;
+  height: 1em;
+  color: $l-base-gray-darker;
+  margin-left: auto;
+  border: 0;
+  padding: 0;
+  background: none;
+  box-shadow: none;
+
+  &:hover {
+    color: $l-primary;
+    transform: none;
+    box-shadow: none;
+  }
+
+  @media (min-width: $hamburger-breakpoint) {
+    display: none;
+  }
+}
+
+.navbar__hamburger-indicator {
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  left: 0;
+  background-color: currentColor;
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  transition-duration: $menu-hamburger-transition-duration;
+
+  &::before,
+  &::after {
+    content: ' ';
+    left: 0;
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    transition-timing-function: ease;
+    transition-duration: 0.15s;
+    transition-property: transform;
+    background-color: currentColor;
+  }
+
+  &::before {
+    top: -0.3em;
+    will-change: top;
+    transition: top $menu-hamburger-transition-duration ease 0.12s,
+      opacity $menu-hamburger-transition-duration ease;
+  }
+
+  &::after {
+    bottom: -0.3em;
+    will-change: bottom;
+    transition: bottom $menu-hamburger-transition-duration ease 0.12s,
+      transform $menu-hamburger-transition-duration
+        cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+}

package/src/components/progress-indicator/_index.scss

@@ -0,0 +1,140 @@
+$pi-marker-size: 2em;
+$pi-active-border-thickness: 0.125em;
+$pi-tick-thickness: 0.125em;
+$pi-tick-width: $pi-marker-size * 0.6;
+$pi-tick-height: $pi-marker-size * 0.3;
+$pi-space-between-steps: 2em;
+$pi-separator-thickness: 0.125em;
+$pi-separator-gap-from-marker: 0.25em;
+$pi-center-of-marker: ($pi-marker-size / 2) - ($pi-separator-thickness / 2);
+
+.progress-indicator {
+  display: flex;
+  justify-content: space-around;
+  padding: 0;
+
+  @media (min-width: $breakpoint-small) {
+    display: initial;
+  }
+}
+
+.progress-indicator__step {
+  position: relative;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  flex: 1 1 0;
+  text-align: center;
+  color: $color-gray-300;
+
+  @media (min-width: $breakpoint-small) {
+    text-align: initial;
+    display: flex;
+    align-items: center;
+  }
+
+  &::before {
+    position: absolute;
+    background: $color-gray-100;
+    height: $pi-separator-thickness;
+    width: 100%;
+    left: -50%;
+    bottom: $pi-center-of-marker;
+
+    @media (min-width: $breakpoint-small) {
+      height: $pi-space-between-steps;
+      width: $pi-separator-thickness;
+      left: $pi-center-of-marker;
+      bottom: $pi-marker-size;
+    }
+  }
+}
+
+.progress-indicator__step + .progress-indicator__step {
+  @media (min-width: $breakpoint-small) {
+    margin-top: $pi-space-between-steps;
+  }
+
+  &::before {
+    content: ' ';
+  }
+}
+
+.progress-indicator__step.is-active,
+.progress-indicator__step.is-complete {
+  color: #000;
+
+  &::before {
+    background: currentColor;
+  }
+
+  .progress-indicator__step-marker {
+    color: currentColor;
+  }
+}
+
+.progress-indicator__step.is-active {
+  .progress-indicator__step-marker {
+    background: $color-white;
+    box-shadow: inset 0 0 0 $pi-active-border-thickness currentColor;
+  }
+
+  .progress-indicator__step-label {
+    font-weight: $font-weight-semibold;
+  }
+}
+
+.progress-indicator__step.is-complete {
+  .progress-indicator__step-marker {
+    background: currentColor;
+
+    &::after {
+      content: ' ';
+    }
+  }
+}
+
+.progress-indicator__step-marker {
+  position: relative;
+  width: $pi-marker-size;
+  height: $pi-marker-size;
+  line-height: 2;
+  display: inline-block;
+  border-radius: 50%;
+  background: $color-gray-100;
+  text-align: center;
+  z-index: 1;
+
+  &::before,
+  &::after {
+    position: absolute;
+  }
+
+  &::before {
+    content: ' ';
+    box-shadow: 0 0 0 $pi-separator-gap-from-marker $color-white;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+  }
+
+  &::after {
+    border-bottom: $pi-tick-thickness solid $color-white;
+    border-left: $pi-tick-thickness solid $color-white;
+    top: $pi-tick-height;
+    left: $pi-tick-width / 3;
+    height: $pi-tick-height;
+    width: $pi-tick-width;
+    transform: rotate(-45deg);
+  }
+}
+
+.progress-indicator__step-label {
+  display: none;
+
+  @media (min-width: $breakpoint-small) {
+    margin-left: 1em;
+    display: inline;
+  }
+}

package/src/components/radial-progress/_index.scss

@@ -0,0 +1,23 @@
+.radial-progress {
+  position: relative;
+  flex-shrink: 0;
+  top: 0.125em;
+  width: 1em;
+  height: 1em;
+}
+
+.radial-progress__base,
+.radial-progress__progress {
+  fill: none;
+  stroke-linecap: round;
+  stroke-width: 5.5;
+}
+
+.radial-progress__base {
+  stroke: $l-base-gray-lighter;
+}
+
+.radial-progress__progress {
+  stroke: $l-success;
+  transition: 250ms stroke-dasharray cubic-bezier(0, 0, 0.2, 1);
+}

package/src/components/select/_index.scss

@@ -0,0 +1,49 @@
+$select-transition-fn: cubic-bezier(0, 0, 0.2, 1);
+$select-arrow-width: 5px;
+$select-arrow-space: ($spacing-5 * 2) + ($select-arrow-width * 2);
+
+.form-select {
+  position: relative;
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    right: $spacing-5;
+    top: 50%;
+    display: block;
+    border-top: $select-arrow-width solid $color-gray-900;
+    border-left: $select-arrow-width solid transparent;
+    border-right: $select-arrow-width solid transparent;
+    transform: translateY(-50%);
+  }
+}
+
+select {
+  appearance: none;
+  display: block;
+  width: 100%;
+  background: $color-white;
+  border: 1px solid $color-gray-300;
+  border-radius: $border-radius-small;
+  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.12);
+  padding: $spacing-3 $select-arrow-space $spacing-3 $spacing-5;
+  color: $color-gray-900;
+  font-size: $font-size-default;
+  line-height: $line-height-default;
+  will-change: border-color, box-shadow;
+  transition: border-color 150ms $select-transition-fn,
+    box-shadow 150ms $select-transition-fn;
+
+  &:disabled {
+    background: $color-gray-100;
+    color: $color-gray-700;
+    box-shadow: none;
+    cursor: not-allowed;
+  }
+
+  &:focus {
+    outline: 0;
+    border-color: $color-blue-300;
+    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 0 1px $color-blue-300;
+  }
+}

package/src/components/step-progress/_index.scss

@@ -0,0 +1,137 @@
+$sp-marker-size: 20px;
+$sp-active-border-thickness: 1.75px;
+$sp-tick-thickness: 2.625px;
+$sp-tick-width: $sp-marker-size * 0.6;
+$sp-tick-height: $sp-marker-size * 0.3;
+$sp-space-between-steps: 28px;
+$sp-separator-thickness: 4px;
+$sp-separator-gap-from-marker: $sp-separator-thickness;
+$sp-center-of-marker: ($sp-marker-size / 2) - ($sp-separator-thickness / 2);
+
+@mixin horizontal-and-non-mobile {
+  @at-root {
+    .step-progress--horizontal & {
+      @media (min-width: $breakpoint-small) {
+        @content;
+      }
+    }
+  }
+}
+
+.step-progress {
+  display: initial;
+  justify-content: space-around;
+  padding: 0;
+  font-size: $font-size-small;
+
+  &--horizontal {
+    @media (min-width: $breakpoint-small) {
+      display: flex;
+    }
+  }
+}
+
+.step-progress__step {
+  display: flex;
+  align-items: center;
+  position: relative;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  flex: 1 1 0;
+  color: $l-primary;
+
+  &:not(.is-active):not(.is-complete):not(.is-errored) {
+    opacity: 0.25;
+  }
+
+  @include horizontal-and-non-mobile {
+    flex-direction: column;
+    align-items: initial;
+  }
+
+  &::before {
+    position: absolute;
+    background: $l-primary;
+    height: $sp-space-between-steps - $sp-separator-gap-from-marker;
+    width: $sp-separator-thickness;
+    left: $sp-center-of-marker;
+    bottom: $sp-marker-size + $sp-separator-gap-from-marker - 1px; // why 1?
+    border-radius: $sp-separator-thickness;
+
+    @include horizontal-and-non-mobile {
+      height: $sp-separator-thickness;
+      width: calc(
+        100% - (#{$sp-marker-size + ($sp-separator-gap-from-marker * 2)})
+      );
+      left: calc(-100% + (#{$sp-marker-size + $sp-separator-gap-from-marker}));
+      top: $sp-center-of-marker;
+    }
+  }
+}
+
+.step-progress__step + .step-progress__step {
+  margin-top: $sp-space-between-steps;
+
+  @include horizontal-and-non-mobile {
+    margin-top: initial;
+  }
+
+  &::before {
+    content: ' ';
+  }
+}
+
+.step-progress__step.is-errored {
+  color: $l-error;
+
+  .step-progress__step-marker {
+    &::after {
+      content: '!';
+      display: flex;
+      width: 100%;
+      height: 100%;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+
+.step-progress__step.is-complete {
+  .step-progress__step-marker {
+    &::after {
+      content: ' ';
+      position: absolute;
+      border-bottom: $sp-tick-thickness solid currentColor;
+      border-left: $sp-tick-thickness solid currentColor;
+      top: $sp-tick-height;
+      left: $sp-tick-width / 3;
+      height: $sp-tick-height;
+      width: $sp-tick-width;
+      transform: rotate(-45deg);
+    }
+  }
+}
+
+.step-progress__step-marker {
+  position: relative;
+  width: $sp-marker-size;
+  height: $sp-marker-size;
+  line-height: 2;
+  display: inline-block;
+  border-radius: 50%;
+  background: $color-white;
+  box-shadow: inset 0 0 0 $sp-active-border-thickness currentColor;
+  text-align: center;
+  z-index: 1;
+}
+
+.step-progress__step-label {
+  color: $l-base-gray-darker;
+  margin-left: 14px;
+
+  @include horizontal-and-non-mobile {
+    margin-left: initial;
+    margin-top: 5.25px;
+  }
+}