@depict-ai/react-ui 2.0.9 → 2.0.10

package/dist/styles/components/search/CategorySuggestions.scss

@@ -1,74 +0,0 @@
-@use "../../helpers/supports-hover";
-@use "../../helpers/utils";
-@use "../../variables";
-
-@mixin CategorySuggestions(
-  $card-background: white,
-  $hovered-card-background: false,
-  $card-border: false,
-  $card-border-radius: variables.$border-radius,
-  $title-font-weight: 420,
-  $parent-title-font-weight: 400,
-  $thin: true
-) {
-  .category-suggestions {
-    display: flex;
-
-    .sliding {
-      padding-bottom: 2px;
-      margin-bottom: -2px;
-    }
-
-    .title {
-      font-weight: $title-font-weight;
-    }
-    .category-suggestion {
-      background: $card-background;
-      transition: background 100ms ease-in-out;
-
-      &:focus {
-        @if $hovered-card-background {
-          background: $hovered-card-background;
-        } @else {
-          @include utils.highlight-background($normal-background: $card-background);
-        }
-      }
-      @include supports-hover.supports-hover() {
-        &:hover {
-          @if $hovered-card-background {
-            background: $hovered-card-background;
-          } @else {
-            @include utils.highlight-background($normal-background: $card-background);
-          }
-        }
-      }
-      border-radius: $card-border-radius;
-      @if $card-border {
-        border: $card-border;
-      }
-      padding: 10px 20px;
-      color: black;
-      display: flex;
-      height: 100%;
-      align-items: center;
-      @if $thin {
-        justify-content: space-between;
-        @include utils.flex-gap(10px, "row nowrap");
-      } @else {
-        justify-content: center;
-        flex-direction: column;
-        @include utils.flex-gap(10px, "column nowrap");
-      }
-
-      .parent-title {
-        font-weight: $parent-title-font-weight;
-      }
-
-      & > * {
-        white-space: nowrap;
-        font-size: 0.85em;
-      }
-    }
-    @content;
-  }
-}

package/dist/styles/components/search/InstantCard.scss

@@ -1,117 +0,0 @@
-@use "../../helpers/utils";
-@use "../../variables";
-
-@mixin InstantCard(
-  $instant-card-sales_price_color: variables.$instant-card-sales_price_color,
-  $instant-card-show-price: variables.$instant-card-show-price,
-  $instant-card-show-tagline: variables.$instant-card-show-tagline
-) {
-  .instant-results {
-    .instant-card {
-      $card-gap: 1.5vw;
-      &:hover,
-      &:focus {
-        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15), -4px -4px 4px rgba(255, 255, 255, 0.3);
-        z-index: 2;
-      }
-      overflow: hidden;
-      flex: 1 1 100%;
-      display: flex;
-      background: white;
-      padding-left: 20px;
-      padding-top: 5px;
-      padding-bottom: 5px;
-      padding-right: 20px;
-      border-radius: variables.$border-radius;
-      @include utils.flex-gap($card-gap, "row nowrap");
-
-      .img-part {
-        flex: 0 0 100px;
-      }
-
-      .right-part {
-        flex-grow: 1;
-        display: flex;
-        justify-content: space-between;
-        @include utils.flex-gap($card-gap, "row nowrap");
-
-        .title-brand-tagline {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          @media (min-width: 601px) {
-            @include utils.flex-gap($card-gap, "row nowrap");
-          }
-
-          @media (max-width: 600px) {
-            @include utils.flex-gap($card-gap, "column nowrap");
-            flex-direction: column;
-            align-items: flex-start;
-          }
-
-          .title {
-            text-overflow: ellipsis;
-            white-space: pre-line;
-            overflow-wrap: anywhere;
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-            overflow: hidden;
-            word-break: break-word;
-          }
-
-          @if $instant-card-show-tagline {
-            .tagline {
-              font-size: 0.9em;
-              color: #868689;
-            }
-          } @else {
-            .tagline {
-              display: none;
-            }
-          }
-        }
-
-        .price-container {
-          @if $instant-card-show-price {
-            display: flex;
-
-            justify-content: center;
-            align-items: center;
-            @media (min-width: 601px) {
-              @include utils.flex-gap($card-gap, "row nowrap");
-            }
-
-            .price {
-              &:not(.orig) {
-                font-weight: 700;
-                color: #0f0f0f;
-              }
-              &.orig {
-                text-decoration: line-through;
-                color: #868689;
-              }
-              &.sales-price {
-                color: $instant-card-sales_price_color;
-              }
-            }
-            @media (max-width: 600px) {
-              @include utils.flex-gap($card-gap, "column nowrap");
-              flex-direction: column;
-
-              .price:not(.orig) {
-                order: 0;
-              }
-
-              .price.orig {
-                order: 1;
-              }
-            }
-          } @else {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-}

package/dist/styles/components/search/InstantResults.scss

@@ -1,10 +0,0 @@
-@use "../../helpers/utils";
-
-@mixin InstantResults($gap: 5px) {
-  .instant-results {
-    display: flex;
-    flex-direction: column;
-    @include utils.flex-gap($gap, "column nowrap");
-    @content;
-  }
-}

package/dist/styles/components/search/PreviousSearches.scss

@@ -1,77 +0,0 @@
-@use "../../variables";
-@use "../../helpers/utils";
-@use "../PLP/Buttons";
-
-@mixin PreviousSearches($icon-color: variables.$brand-black, $item-color: variables.$brand-black) {
-  .previous-searches {
-    display: flex;
-    flex-direction: column;
-    @include utils.flex-gap(15px, "column nowrap");
-
-    .list {
-      display: flex;
-      flex-direction: column;
-      @include utils.flex-gap(5px, "column nowrap");
-      .item {
-        color: $item-color;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding-top: 10px;
-        padding-bottom: 10px;
-        padding-left: 20px;
-        padding-right: 20px;
-        border-radius: variables.$border-radius;
-        overflow-wrap: anywhere;
-        .left {
-          @include utils.flex-gap(10px, "row nowrap");
-          display: flex;
-          align-items: center;
-          svg {
-            min-width: 12px;
-            path {
-              fill: $icon-color;
-            }
-          }
-        }
-        .delete {
-          height: 100%;
-          padding: 0 10px;
-          background: transparent;
-          cursor: pointer;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-
-          &:focus {
-            outline: none;
-          }
-
-          svg {
-            transition-duration: 150ms;
-            width: 13px;
-            height: 13px;
-            path {
-              fill: variables.$brand-dark-grey;
-            }
-          }
-          &:hover svg {
-            transform: scale(1.2);
-            path {
-              fill: #000;
-            }
-          }
-          &:focus-visible {
-            filter: Buttons.$secondary-button-focus-visible-filter;
-            svg {
-              transform: scale(1.2);
-              path {
-                fill: #000;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/dist/styles/components/search/QueryInput.scss

@@ -1,167 +0,0 @@
-@use "../../variables";
-@use "../../helpers/supports-hover";
-@use "../PLP/Buttons";
-
-@mixin QueryInput(
-  $border-radius: calc(#{variables.$border-radius} * 2.5),
-  $input-font-size: initial,
-  $input-font-weight: initial,
-  $input-placeholder-color: initial,
-  $submit-background: false,
-  $submit-icon-size: 1,
-  $back-color: variables.$brand-dark-grey,
-  $back-background: #fff,
-  $clear-color: variables.$brand-dark-grey,
-  $hovered-clear-color: variables.$brand-black,
-  $query-text-color: variables.$brand-dark-grey,
-  $query-background-color: #fff,
-  $query-border: none,
-  $hovered-back-color: variables.$brand-black,
-  $hovered-submit-color: false,
-  $focused-query-text-color: #000,
-  $box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05)
-) {
-  .query-input {
-    input,
-    button {
-      margin: 0; // safari has some default margin
-    }
-    display: flex;
-    z-index: calc(#{variables.$search-page-base-z-index} + 5); // make shadow go above contents
-    box-shadow: $box-shadow;
-
-    .query {
-      border-radius: $border-radius 0 0 $border-radius;
-      border: $query-border;
-      flex-grow: 1;
-      padding-left: 20px;
-      padding-top: 14px;
-      padding-bottom: 14px;
-      padding-right: 55px;
-      width: 100%;
-      color: $query-text-color;
-      background-color: $query-background-color;
-
-      &::placeholder {
-        color: $input-placeholder-color;
-      }
-      &:focus {
-        outline: none;
-        color: $focused-query-text-color;
-      }
-      @include supports-hover.supports-hover() {
-        &:hover {
-          outline: none;
-          color: $focused-query-text-color;
-        }
-      }
-      font-size: $input-font-size;
-      font-weight: $input-font-weight;
-      &.has-adjacent-back-button {
-        border-bottom-left-radius: 0;
-        border-top-left-radius: 0;
-        padding-left: 0;
-      }
-    }
-
-    .field {
-      position: relative;
-      flex-grow: 1;
-      display: flex;
-    }
-
-    .back {
-      background: $back-background;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border: none;
-      padding-left: 10px;
-      padding-top: 14px;
-      padding-bottom: 14px;
-      padding-right: 15px;
-      border-bottom-left-radius: $border-radius;
-      border-top-left-radius: $border-radius;
-      cursor: pointer;
-      svg path {
-        fill: $back-color;
-      }
-      &:focus {
-        outline: none;
-      }
-      &:focus-visible {
-        filter: Buttons.$secondary-button-focus-visible-filter;
-        svg path {
-          fill: $hovered-back-color;
-        }
-      }
-      @include supports-hover.supports-hover() {
-        &:hover {
-          svg path {
-            fill: $hovered-back-color;
-          }
-        }
-      }
-    }
-
-    .clear,
-    .submit {
-      cursor: pointer;
-    }
-
-    .clear {
-      position: absolute;
-      right: 30px;
-      top: 50%;
-      transform: translateY(-50%) scale(0.8);
-      background: transparent;
-      border: none;
-      padding: 0;
-      svg path {
-        fill: $clear-color;
-      }
-
-      &:focus {
-        outline: none;
-      }
-      &:focus-visible {
-        filter: Buttons.$secondary-button-focus-visible-filter;
-        svg path {
-          fill: $hovered-clear-color;
-        }
-      }
-      @include supports-hover.supports-hover() {
-        &:hover {
-          svg path {
-            fill: $hovered-clear-color;
-          }
-        }
-      }
-    }
-
-    .submit {
-      border: none;
-      padding: 0;
-      min-width: 50px;
-      border-radius: 0 $border-radius $border-radius 0;
-      svg {
-        transform: scale($submit-icon-size);
-      }
-
-      @if ($submit-background) {
-        background: $submit-background;
-      }
-
-      @include supports-hover.supports-hover() {
-        &:hover {
-          svg path {
-            @if $hovered-submit-color {
-              fill: $hovered-submit-color;
-            }
-          }
-        }
-      }
-    }
-    @content;
-  }
-}

package/dist/styles/components/search/SearchModal.scss

@@ -1,95 +0,0 @@
-@use "../../helpers/utils";
-@use "../../variables";
-@use "../../helpers/supports-hover";
-
-@mixin SearchModal(
-  $background: variables.$brand-lighter-grey,
-  $border-radius: calc(#{variables.$border-radius} * 2.5),
-  $discover-more-text-transform: uppercase,
-  $top-snapping: true,
-  $max-width: 800px
-) {
-  .depict-search-modal-backdrop {
-    @include utils.modal-backdrop($z-index: variables.$base-z-index);
-  }
-
-  .depict-search-modal {
-    // Center horizontally by default, align_field can override
-    display: flex;
-    justify-content: center;
-
-    button {
-      // disable ugly default borders
-      border: none;
-    }
-
-    .query-input {
-      z-index: calc(#{variables.$base-z-index} + 5); // make shadow go above contents
-    }
-
-    .body {
-      display: flex;
-      flex-direction: column;
-      background: $background;
-      width: 80vw;
-      max-width: $max-width;
-      z-index: calc(#{variables.$base-z-index} + 1);
-      position: absolute;
-      border-radius: $border-radius;
-      @media (hover: hover) and (pointer: fine) {
-        @media (max-height: 790px) {
-          @if $top-snapping {
-            max-height: 100% !important;
-            top: 0 !important;
-            position: fixed;
-          }
-          @media (max-width: 600px) {
-            left: 30px !important;
-            width: calc(100% - 30px) !important;
-          }
-        }
-      }
-      @media not all and (hover: hover) and (pointer: fine) {
-        @if $top-snapping {
-          @media (max-height: 1000px) {
-            max-height: 100% !important;
-            top: 0 !important;
-            position: fixed;
-          }
-        }
-        @media (max-height: 1000px) and (max-width: 600px) {
-          left: 30px !important;
-          width: calc(100% - 30px) !important;
-        }
-      }
-
-      .padded > *,
-      .query-input {
-        // workaround https://github.com/philipwalton/flexbugs#flexbug-1 in MobileSafari 12-14.2 (range is only what I tested)
-        flex-shrink: 0;
-      }
-      .padded {
-        padding-top: 20px;
-        padding-left: max(1vw, 10px);
-        padding-right: max(1vw, 10px);
-        @include utils.flex-gap(20px, "column nowrap");
-        display: flex;
-        flex-direction: column;
-        overflow: auto;
-      }
-
-      .discover-more {
-        display: flex;
-        justify-content: center;
-
-        button {
-          padding: 12px 18px;
-          margin: 20px 0;
-          @if $discover-more-text-transform {
-            text-transform: $discover-more-text-transform;
-          }
-        }
-      }
-    }
-  }
-}

package/dist/styles/components/search/SearchRecommendations.scss

@@ -1,25 +0,0 @@
-@use "../../variables";
-@use "../../helpers/utils";
-@use "../../helpers/supports-hover";
-
-@mixin SearchRecommendations($border-top: 2px solid variables.$brand-light-grey) {
-  .listing-page {
-    .search-recs {
-      border-top: $border-top;
-      display: flex;
-      flex-direction: column;
-      .search-recs-title {
-        line-height: 1;
-        font-weight: 600;
-        font-size: 24px;
-        margin-top: 0;
-        margin-bottom: 20px;
-      }
-      .load-more-container {
-        display: flex;
-        justify-content: center;
-        margin-top: 30px;
-      }
-    }
-  }
-}

package/dist/styles/components/search/ShowingResultsFor.scss

@@ -1,10 +0,0 @@
-@mixin ShowingResultsFor($results-for-font-size: 1.5em, $mobile-centered: false) {
-  .results-for {
-    font-size: $results-for-font-size;
-    overflow-wrap: anywhere;
-    @if $mobile-centered {
-      // To center in the one row view, add flex-grow: 1;
-      text-align: center;
-    }
-  }
-}

package/dist/styles/components/search/index.scss

@@ -1,40 +0,0 @@
-@use "sass:meta";
-
-// Component style mixins
-@use "Autocomplete";
-@use "CategorySuggestions";
-@use "InstantResults";
-@use "InstantCard";
-@use "QueryInput";
-@use "ShowingResultsFor";
-@use "SearchRecommendations";
-@use "SearchModal";
-@use "../PLP/ProductListingPage";
-
-@forward "Autocomplete";
-@forward "CategorySuggestions";
-@forward "InstantResults";
-@forward "InstantCard";
-@forward "QueryInput";
-@forward "SearchRecommendations";
-@forward "ShowingResultsFor";
-@forward "SearchModal";
-@forward "../PLP/ProductListingPage";
-
-// Load all mixins with default values. If only minor theming is needed styles in variables.scss can be
-// reassigned: https://sass-lang.com/documentation/at-rules/use#reassigning-variables
-// The variables are forwarded from PLP/index.scss
-// If more control is needed use these mixins separately and pass custom params
-@mixin all-components() {
-  .depict.search {
-    @include Autocomplete.Autocomplete();
-    @include CategorySuggestions.CategorySuggestions();
-    @include InstantResults.InstantResults();
-    @include InstantCard.InstantCard();
-    @include QueryInput.QueryInput();
-    @include SearchModal.SearchModal();
-    @include ProductListingPage.SearchPage();
-    @include SearchRecommendations.SearchRecommendations();
-    @include ShowingResultsFor.ShowingResultsFor();
-  }
-}