@depict-ai/react-ui 2.0.3 → 2.0.4

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

@@ -0,0 +1,74 @@
+@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

@@ -0,0 +1,117 @@
+@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

@@ -0,0 +1,10 @@
+@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

@@ -0,0 +1,77 @@
+@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

@@ -0,0 +1,167 @@
+@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

@@ -0,0 +1,95 @@
+@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

@@ -0,0 +1,25 @@
+@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

@@ -0,0 +1,10 @@
+@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

@@ -0,0 +1,40 @@
+@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();
+  }
+}