@depict-ai/react-ui 2.0.1 → 2.0.3

package/dist/styles/components/PLP/Buttons.scss

@@ -1,124 +0,0 @@
-@use "../../variables";
-@use "../../helpers/supports-hover";
-@use "../../helpers/utils";
-@use "sass:color";
-
-$primary-button-background: variables.$brand-black;
-$primary-button-color: #fff;
-$primary-button-border: 1px solid transparent; // so that the page doesn't jump when there's half a border when switching between having sort and filters open (the buttons switch between pimary and secondary)
-$primary-button-border-radius: variables.$border-radius;
-$primary-button-hover-filter: drop-shadow(-2px -2px 4px rgba(255, 255, 255, 0.25))
-  drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.15));
-$primary-button-active-filter: drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.25))
-  drop-shadow(-2px -2px 4px rgba(0, 0, 0, 0.15));
-$primary-button-focus-visible-filter: drop-shadow(2px 2px 4px rgba(65, 143, 195, 0.8))
-  drop-shadow(-2px -2px 4px rgba(65, 143, 195, 0.8));
-
-$secondary-button-background: variables.$brand-lightest-grey;
-$secondary-button-color: variables.$brand-dark-grey;
-$secondary-button-border: 1px solid variables.$brand-black;
-$secondary-button-border-radius: variables.$border-radius;
-$secondary-button-hover-filter: drop-shadow(-2px -2px 4px rgba(255, 255, 255, 0.25))
-  drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.15));
-$secondary-button-active-filter: drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.25))
-  drop-shadow(-2px -2px 4px rgba(0, 0, 0, 0.15));
-$secondary-button-focus-visible-filter: drop-shadow(-2px -2px 4px rgba(65, 143, 195, 0.8))
-  drop-shadow(2px 2px 4px rgba(65, 143, 195, 0.8));
-
-@mixin PrimaryButton(
-  $background: $primary-button-background,
-  $color: $primary-button-color,
-  $border: $primary-button-border,
-  $border-radius: $primary-button-border-radius,
-  $hover-filter: $primary-button-hover-filter,
-  $active-filter: $primary-button-active-filter,
-  $focus-visible-filter: $primary-button-focus-visible-filter
-) {
-  // not using .primary since that's 100% going to conflict with existing declarations on sites
-  button.major {
-    @include Button(
-      $background,
-      $color,
-      $border,
-      $border-radius,
-      $hover-filter,
-      $active-filter,
-      $focus-visible-filter
-    ) {
-      @content;
-    }
-  }
-}
-
-@mixin SecondaryButton(
-  $background: $secondary-button-background,
-  $color: $secondary-button-color,
-  $border: $secondary-button-border,
-  $border-radius: $secondary-button-border-radius,
-  $hover-filter: $secondary-button-hover-filter,
-  $active-filter: $secondary-button-active-filter,
-  $focus-visible-filter: $secondary-button-focus-visible-filter
-) {
-  // not using .secondary since that's 100% going to conflict with existing declarations on sites
-  button.minor {
-    @include Button(
-      $background,
-      $color,
-      $border,
-      $border-radius,
-      $hover-filter,
-      $active-filter,
-      $focus-visible-filter
-    ) {
-      @content;
-    }
-  }
-}
-
-@mixin Button(
-  $background,
-  $color,
-  $border,
-  $border-radius,
-  $hover-filter,
-  $active-filter,
-  $focus-visible-filter,
-  $padding: 10px 20px
-) {
-  background: $background;
-  color: $color;
-  border: $border;
-  border-radius: $border-radius;
-  @if $padding {
-    padding: $padding;
-  }
-  display: flex;
-  white-space: pre-wrap; // can't have spaces otherwise
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  transition: filter 150ms ease-in-out, background 100ms ease-in-out;
-
-  svg path {
-    fill: $color; // treat icons the same as text
-  }
-
-  @include supports-hover.supports-hover() {
-    &:hover {
-      filter: $hover-filter;
-      @include utils.highlight-background($normal-background: $background);
-    }
-  }
-  &:active {
-    filter: $active-filter;
-    @include utils.highlight-background($normal-background: $background, $darken-factor: 10%, $lighten-factor: 20%);
-  }
-  &:focus {
-    outline-style: none;
-  }
-  &:focus-visible {
-    filter: $focus-visible-filter;
-    @include utils.highlight-background($normal-background: $background);
-  }
-  @content;
-}

package/dist/styles/components/PLP/MorphingSign.scss

@@ -1,31 +0,0 @@
-@mixin MorphingSign($color: #fff) {
-  .morphing-sign {
-    /* https://stackoverflow.com/a/38136283 */
-    border: 0;
-    font-size: 1.5em;
-    position: relative;
-    width: 1em;
-    height: 1em;
-
-    span {
-      position: absolute;
-      background: $color;
-      border-radius: 2px;
-    }
-
-    /* Create the "+" shape by positioning the spans absolutely */
-    span:first-child {
-      top: 25%;
-      bottom: 25%;
-      width: 10%;
-      left: 45%;
-    }
-
-    span:last-child {
-      left: 25%;
-      right: 25%;
-      height: 10%;
-      top: 45%;
-    }
-  }
-}

package/dist/styles/components/PLP/PLPResults.scss

@@ -1,20 +0,0 @@
-@use "../../variables";
-@use "../../helpers/utils";
-
-@mixin PLPResults() {
-  .listing-page {
-    .no-results {
-      background: white;
-      padding: 40px;
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      flex-direction: column;
-      flex-grow: 2;
-      .hint {
-        text-decoration: underline;
-        cursor: pointer;
-      }
-    }
-  }
-}

package/dist/styles/components/PLP/ProductListingPage.scss

@@ -1,142 +0,0 @@
-@use "../../helpers/utils";
-
-@mixin ProductListingPage($spacing-to-filters: 12px, $desktop-item-gap: 20px, $mobile-item-gap: 16px) {
-  .listing-page {
-    display: flex;
-    flex-direction: column;
-    padding: $desktop-item-gap calc(#{$desktop-item-gap} / 2);
-    @include mobile_sizes() {
-      padding: $mobile-item-gap calc(#{$mobile-item-gap} / 2);
-    }
-
-    &,
-    & * {
-      box-sizing: border-box;
-    }
-
-    & > .filter-results-for-one-row,
-    & > .results-for {
-      margin-bottom: calc(#{$desktop-item-gap} / 2);
-      @include mobile_sizes() {
-        margin-bottom: calc(#{$mobile-item-gap} / 2);
-      }
-    }
-
-    & > .sort-and-filter-buttons {
-      margin-top: calc(#{$desktop-item-gap} / 2);
-      margin-bottom: calc(#{$desktop-item-gap} / 2);
-      @include mobile_sizes() {
-        margin-top: calc(#{$mobile-item-gap} / 2);
-        margin-bottom: calc(#{$mobile-item-gap} / 2);
-      }
-    }
-    .PLP-results {
-      margin-top: calc(#{$desktop-item-gap} / 2);
-      @include mobile_sizes() {
-        margin-top: calc(#{$mobile-item-gap} / 2);
-      }
-      display: flex;
-      & > {
-        .filters,
-        .sorting {
-          margin-left: $spacing-to-filters;
-        }
-      }
-    }
-    .cards {
-      // this is for all product lists, meaning PLPResults (category + search product lists) and SearchRecommendations
-      flex-wrap: wrap;
-      display: flex;
-      flex-direction: row;
-      flex-grow: 1;
-      overflow: hidden;
-    }
-  }
-}
-
-@mixin SearchPage(
-  $spacing-to-filters: 12px,
-  $desktop-item-gap: 20px,
-  $mobile-item-gap: 16px,
-  $spacing-above-search-field: true,
-  $query-input-width: 800px,
-  $gap-to-recs-factor: 3
-) {
-  .listing-page {
-    .query-input {
-      width: min(100%, $query-input-width);
-      align-self: center;
-
-      @if $spacing-above-search-field {
-        margin-top: calc(#{$desktop-item-gap} * 2);
-      }
-      margin-bottom: $desktop-item-gap;
-      @include mobile_sizes() {
-        margin-bottom: $mobile-item-gap;
-        @if $spacing-above-search-field {
-          margin-top: calc(#{$mobile-item-gap});
-        }
-      }
-      ~ .category-suggestions .category-suggestion {
-        &:last-child {
-          margin-right: auto;
-        }
-        &:first-child {
-          margin-left: auto;
-        }
-      }
-    }
-    .category-suggestions {
-      margin-bottom: $desktop-item-gap;
-      @include mobile_sizes() {
-        margin-bottom: $mobile-item-gap;
-      }
-    }
-    .query-input {
-      // if there are no category suggestions we should have 2x the gap between where they should be and what's there, only for desktop tho
-      & + .filter-results-for-one-row,
-      & + .results-for {
-        @media (min-width: 652px) {
-          margin-top: $desktop-item-gap;
-        }
-      }
-    }
-    .search-recs {
-      // whole gap here so that we don't have to make the margin bottom of search-results conditional
-      margin-top: calc(#{$desktop-item-gap} * #{$gap-to-recs-factor});
-      // in between these there's the border, a visual line separating the results and recs
-      padding-top: calc(#{$desktop-item-gap} * #{$gap-to-recs-factor});
-      @include mobile_sizes() {
-        margin-top: calc(#{$mobile-item-gap} * #{$gap-to-recs-factor});
-        padding-top: calc(#{$mobile-item-gap} * #{$gap-to-recs-factor});
-      }
-    }
-    .PLP-results.nothing + .search-recs {
-      // if no results, bring us closer
-      margin-top: calc(#{$desktop-item-gap} * 1.5);
-      padding-top: calc(#{$desktop-item-gap} * 1.5);
-      @include mobile_sizes() {
-        margin-top: calc(#{$mobile-item-gap} * 1.5);
-        padding-top: calc(#{$mobile-item-gap} * 1.5);
-      }
-    }
-  }
-}
-
-@mixin CategoryPage($spacing-to-filters: 12px, $desktop-item-gap: 20px, $mobile-item-gap: 16px) {
-  .listing-page {
-    .quicklinks,
-    .crumbs {
-      margin-bottom: $desktop-item-gap;
-      @include mobile_sizes() {
-        margin-bottom: $mobile-item-gap;
-      }
-    }
-  }
-}
-
-@mixin mobile_sizes() {
-  @media (max-width: 651px) {
-    @content;
-  }
-}

package/dist/styles/components/PLP/ScrollStatus.scss

@@ -1,24 +0,0 @@
-@use "../../variables";
-
-@mixin ScrollStatus(
-  $scroll-status-background: rgba(100, 100, 100, 0.9),
-  $border-radius: calc(variables.$border-radius * 5)
-) {
-  .scroll-status {
-    pointer-events: none;
-    position: sticky;
-    bottom: 10vh;
-    white-space: nowrap;
-    display: flex;
-    justify-content: center;
-    z-index: calc(#{variables.$base-z-index} + 4);
-    align-items: center;
-    opacity: 0;
-    .text {
-      background: $scroll-status-background;
-      color: white;
-      padding: 10px 20px;
-      border-radius: $border-radius;
-    }
-  }
-}

package/dist/styles/components/PLP/SelectedFilters.scss

@@ -1,74 +0,0 @@
-@use "../../variables";
-@use "../../helpers/utils";
-@use "../../helpers/supports-hover";
-@use "./Buttons";
-
-@mixin SelectedFilters(
-  $border-radius: variables.$border-radius,
-  $title-color: variables.$brand-black,
-  $filter-title-transform: uppercase,
-  $margin-on-desktop: 0px,
-  $set-border-on-crumbs: true
-) {
-  .listing-page .selected-filters {
-    .inner {
-      // this is in here because it's an ExpandingContainer and the animation gets borked otherwise
-      margin-top: 10px;
-      margin-bottom: 10px;
-      display: flex;
-      align-items: center;
-      .title {
-        margin-right: 10px;
-      }
-      @media (min-width: 652px) {
-        margin-top: $margin-on-desktop;
-        margin-bottom: $margin-on-desktop;
-      }
-
-      .title {
-        @media (max-width: 600px) {
-          display: none;
-        }
-        font-size: 1.1em;
-        text-transform: $filter-title-transform;
-        color: $title-color;
-      }
-
-      .depict-slider {
-        overflow: hidden;
-        width: unset;
-
-        .clear-filter {
-          @if $set-border-on-crumbs {
-            border: 1px solid Buttons.$primary-button-background;
-          }
-          svg {
-            width: 12.64px;
-            height: 12.64px;
-          }
-        }
-        .clear-all-filters {
-          @if $set-border-on-crumbs {
-            border: Buttons.$secondary-button-border;
-          }
-        }
-
-        .clear-filter,
-        .clear-all-filters {
-          flex: 0 0 auto;
-          box-sizing: border-box;
-          white-space: nowrap;
-          padding: 5px 10px;
-          display: flex;
-          @include utils.flex-gap(5px, "row nowrap");
-          align-items: center;
-          border-radius: $border-radius;
-          font-size: 1em;
-          line-height: 1;
-          cursor: pointer;
-        }
-      }
-      @content;
-    }
-  }
-}

package/dist/styles/components/PLP/SlidableItems.scss

@@ -1,99 +0,0 @@
-// @use "../../../rendering/slider_button_positioning";
-@use "../../helpers/utils";
-@use "../../variables";
-@use "../../helpers/supports-hover";
-
-@mixin button_positioning {
-  .d-navbutton {
-    position: absolute;
-    z-index: 2;
-    top: 50%;
-    transform: translateY(-50%);
-    -webkit-transform: translateY(-50%);
-    touch-action: manipulation;
-    transition-duration: 0.2s;
-    padding-right: 1px;
-    cursor: pointer;
-    &.hidden {
-      cursor: default;
-      opacity: 0;
-      animation-name: depict_slider_button_unclickable;
-      animation-duration: 5s;
-      animation-fill-mode: forwards;
-    }
-    &.left {
-      transform: translateY(-50%) rotate(180deg);
-      left: -1px; // fix chrome rendering half a px of not the button
-    }
-    &.right {
-      right: -1px;
-    }
-    img {
-      width: 100%;
-      height: 100%;
-    }
-    @content;
-  }
-  @keyframes depict_slider_button_unclickable {
-    0% {
-      pointer-events: all;
-    }
-    100% {
-      pointer-events: none;
-      visibility: hidden; // make not keyboard focusable with tab
-    }
-  }
-}
-
-@mixin SlidableItems($fade-to: variables.$brand-lighter-grey, $fade-from: rgba(238, 238, 240, 0)) {
-  .depict-slider {
-    width: 100%;
-    position: relative;
-    .sliding {
-      height: 100%;
-      @include utils.flex-gap(10px, "row nowrap");
-      align-items: center;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: nowrap;
-      overflow-x: scroll;
-      /* Internet Explorer 10+; next 3 properties stolen from: https://stackoverflow.com/a/38994837*/
-      -ms-overflow-style: none;
-      /* Firefox */
-      scrollbar-width: none;
-      // Chrome and Safari
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-    // TODO: break out button button positioning related lib code into a package and import that here instead of duplicating the code
-    // @include slider_button_positioning.button_positioning {
-    @include button_positioning {
-      height: calc(100% + 2px);
-      padding-top: 0;
-      padding-left: 0;
-      padding-bottom: 0;
-      width: 26px;
-      background: linear-gradient(270deg, $fade-to 50%, $fade-from 105%);
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      border: none;
-
-      @include supports-hover.supports-hover() {
-        &:hover {
-          svg {
-            transform: scale(1.2);
-          }
-        }
-      }
-      svg {
-        transition-duration: 150ms;
-      }
-
-      &:active {
-        opacity: 0.9;
-      }
-    }
-  }
-}

package/dist/styles/components/PLP/SortAndFilter/FloatingButtons.scss

@@ -1,75 +0,0 @@
-@use "../../../variables";
-@use "../../../helpers/supports-hover";
-
-@mixin FloatingButtons(
-  $button-background: variables.$brand-lighter-grey,
-  $hovered-button-background: variables.$brand-lightest-grey,
-  $button-border-color: variables.$brand-black,
-  $icon-color: variables.$brand-dark-grey,
-  $bottom-distance: 12px,
-  $side-distance: 12px,
-  $position: "left" // "left" or "right"
-) {
-  .floating-buttons {
-    position: sticky;
-    bottom: $bottom-distance;
-    display: flex;
-    z-index: calc(#{variables.$base-z-index} + 4);
-    align-items: center;
-    opacity: 0;
-    transition-timing-function: ease-in-out;
-    transition-duration: 300ms;
-    @if $position== "left" {
-      padding-left: $side-distance;
-      justify-content: flex-start;
-    } @else if $position== "right" {
-      padding-right: $side-distance;
-      justify-content: flex-end;
-    }
-    &:not(.show-them) {
-      pointer-events: none;
-    }
-    &.show-them {
-      opacity: 1;
-    }
-    .filter {
-      margin-right: 5px;
-    }
-
-    .sort {
-      margin-left: 5px;
-      margin-right: 5px;
-    }
-
-    .up {
-      margin-left: 5px;
-    }
-
-    .sort,
-    .filter,
-    .up {
-      background: $button-background;
-      filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1)) drop-shadow(-2px -2px 4px rgba(255, 255, 255, 0.3));
-      border: 1px solid $button-border-color;
-      border-radius: 20px;
-      padding: 10px;
-      @include supports-hover.supports-hover() {
-        &:hover {
-          background: $hovered-button-background;
-        }
-      }
-      &:focus {
-        outline: none;
-      }
-      &:focus-visible {
-        background: $hovered-button-background;
-      }
-      div {
-        display: flex;
-      }
-      svg path {
-        fill: $icon-color;
-      }
-    }
-  }
-}