@depict-ai/react-ui 0.0.79 → 0.0.80

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

@@ -0,0 +1,119 @@
+@use "../../helpers/utils";
+@use "../../variables";
+
+/// Mixin that styles the idividual product cards in the InstantResults in the SearchModal
+
+@mixin InstantCard() {
+  .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 variables.get-merged(variables.$instant-card-defaults, variables.$instant-card, "show-tagline") {
+            .tagline {
+              font-size: 0.9em;
+              color: #868689;
+            }
+          } @else {
+            .tagline {
+              display: none;
+            }
+          }
+        }
+
+        .price-container {
+          @if variables.get-merged(variables.$instant-card-defaults, variables.$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: variables.get-merged(
+                  variables.$instant-card-defaults,
+                  variables.$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,12 @@
+@use "../../helpers/utils";
+@use "../../variables";
+
+/// Mixin that styles the container of the InstantResults in the SearchModal
+@mixin InstantResults() {
+  .instant-results {
+    display: flex;
+    flex-direction: column;
+    @include utils.flex-gap(variables.get-gap("between-instant-results"), "column nowrap");
+    @content;
+  }
+}

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

@@ -0,0 +1,83 @@
+@use "../../variables";
+@use "../../helpers/utils";
+@use "../PLP/Buttons";
+@use "sass:map";
+
+/// PreviousSearches is the component that shows the previous searches of the user in its own section, with a heading that says "Your previous searches" (key of the string is `previous_searches_text_` in the locales).
+/// The component is only shown if the user has previous searches and the search field is empty.
+///
+/// PreviousSearches is a sub-component of Autocomplete so you probably don't want to use it on its own.
+
+@mixin PreviousSearches() {
+  .previous-searches {
+    display: flex;
+    flex-direction: column;
+    @include utils.flex-gap(15px, "column nowrap");
+    $icon-color: variables.get-text-icon-color("neutral", "default");
+
+    .list {
+      display: flex;
+      flex-direction: column;
+      @include utils.flex-gap(map.get(variables.get-gap("autocomplete"), "between-items-in-row-mode"), "column nowrap");
+      .item {
+        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: $icon-color;
+            }
+          }
+          &:hover svg {
+            transform: scale(1.2);
+            path {
+              fill: variables.get-text-icon-color("neutral", "pressed");
+            }
+          }
+          &:focus-visible {
+            filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
+            svg {
+              transform: scale(1.2);
+              path {
+                fill: variables.get-text-icon-color("neutral", "pressed");
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,160 @@
+@use "../../variables";
+@use "../../helpers/supports-hover";
+@use "../PLP/Buttons";
+@use "sass:map";
+
+/// SearchField is the component that shows the search input, sometimes back button, clear button and the search button.
+
+@mixin SearchField() {
+  $search-field-background: variables.get-merged(
+    variables.$search-field-defaults,
+    variables.$search-field,
+    "background"
+  );
+  $border-radius: variables.get-merged(variables.$search-field-defaults, variables.$search-field, "border-radius");
+
+  .search-field {
+    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: 0px 4px 4px rgba(0, 0, 0, 0.05);
+    // For the shadow
+    border-radius: $border-radius;
+
+    //&:focus-within {
+    //  // something like this could be nice?
+    //  box-shadow: 0px 4px 12px rgba(15, 15, 15, 0.16);
+    //}
+
+    .query {
+      font-size: initial;
+      border-radius: $border-radius 0 0 $border-radius;
+      flex-grow: 1;
+      padding-left: 20px;
+      padding-top: 14px;
+      padding-bottom: 14px;
+      padding-right: 55px;
+      width: 100%;
+      color: variables.get-text-icon-color("neutral", "default");
+      background-color: $search-field-background;
+      border: none;
+
+      &:focus {
+        outline: none;
+        color: variables.get-text-icon-color("neutral", "pressed");
+      }
+      @include supports-hover.supports-hover() {
+        &:hover {
+          outline: none;
+          color: variables.get-text-icon-color("neutral", "pressed");
+        }
+      }
+      &.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-color: $search-field-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: variables.get-text-icon-color("neutral", "default");
+      }
+      &:focus {
+        outline: none;
+      }
+      &:focus-visible {
+        filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
+        svg path {
+          fill: variables.get-text-icon-color("neutral", "hover");
+        }
+      }
+      @include supports-hover.supports-hover() {
+        &:hover {
+          svg path {
+            fill: variables.get-text-icon-color("neutral", "hover");
+          }
+        }
+      }
+    }
+
+    .clear,
+    .submit {
+      cursor: pointer;
+    }
+
+    .clear {
+      position: absolute;
+      right: 30px;
+      top: 50%;
+      transform: translateY(-50%) scale(0.8);
+      background-color: $search-field-background;
+      border: none;
+      padding: 0;
+      svg path {
+        fill: variables.get-text-icon-color("neutral", "default");
+      }
+
+      &:focus {
+        outline: none;
+      }
+      &:focus-visible {
+        filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
+        svg path {
+          fill: variables.get-text-icon-color("neutral", "pressed");
+        }
+      }
+      @include supports-hover.supports-hover() {
+        &:hover {
+          svg path {
+            fill: variables.get-text-icon-color("neutral", "pressed");
+          }
+        }
+      }
+    }
+
+    .submit {
+      border: none;
+      padding: 0;
+      min-width: 50px;
+      border-radius: 0 $border-radius $border-radius 0;
+    }
+    @content;
+  }
+
+  .search-field:not(.in-modal) {
+    $border: 1px solid variables.get-border-color("neutral", "default");
+    .query {
+      border-top: $border;
+      border-bottom: $border;
+      border-left: $border;
+    }
+    .submit {
+      border-top: $border;
+      border-bottom: $border;
+      border-right: $border;
+    }
+  }
+}

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

@@ -0,0 +1,86 @@
+@use "../../helpers/utils";
+@use "../../variables";
+@use "../../helpers/supports-hover";
+
+/// SearchModal is the component that shows the search modal when the user clicks on the search icon/into the search field in the header.
+@mixin SearchModal() {
+  .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;
+
+    .search-field {
+      z-index: calc(#{variables.$base-z-index} + 5); // make shadow go above contents
+    }
+
+    .body {
+      // this also has position:absolute and width: 80vw set as default styling from the javascript, inside of SearchModal.tsx
+      display: flex;
+      flex-direction: column;
+      background: variables.get-background-color("subtle", "default");
+      max-width: variables.get-merged(variables.$search-modal-defaults, variables.$search-modal, "max-width");
+      z-index: calc(#{variables.$base-z-index} + 1);
+      border-radius: calc(#{variables.$border-radius} * 2.5);
+      $top-snapping: variables.get-merged(variables.$search-modal-defaults, variables.$search-modal, "top-snapping");
+
+      @media (hover: hover) and (pointer: fine) {
+        @media (max-height: 790px) {
+          @if $top-snapping {
+            max-height: 100%;
+            top: 0;
+            position: fixed;
+          }
+          @media (max-width: 600px) {
+            left: 30px;
+            width: calc(100% - 30px);
+          }
+        }
+      }
+      @media not all and (hover: hover) and (pointer: fine) {
+        @if $top-snapping {
+          @media (max-height: 1000px) {
+            max-height: 100%;
+            top: 0;
+            position: fixed;
+          }
+        }
+        @media (max-height: 1000px) and (max-width: 600px) {
+          left: 30px;
+          width: calc(100% - 30px);
+        }
+      }
+
+      .padded > *,
+      .search-field {
+        // 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 variables.$uppercase-text-transform != "none" {
+            text-transform: variables.$uppercase-text-transform;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+@use "../../variables";
+@use "../../helpers/utils";
+@use "../../helpers/supports-hover";
+
+/// SearchRecommendations is the component that shows the search recommendations below the SearchResults once the user has reached the end of the results.
+/// @param {Border} $border-top [2px solid variables.$brand-light-grey] - The border separating the results and recommendations
+
+@mixin SearchRecommendations() {
+  .listing-page {
+    .search-recs {
+      border-top: 2px solid variables.get-border-color("subtle", "default");
+      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,7 @@
+/// This is the styling for the text that says "Showing __30__ result(s) for __falk__"
+@mixin ShowingResultsFor() {
+  .results-for {
+    font-size: 1.5em;
+    overflow-wrap: anywhere;
+  }
+}

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

@@ -0,0 +1,12 @@
+/// Component style mixins for Search styling
+/// Don't forget to also include PLP styling
+
+@forward "Autocomplete";
+@forward "CategorySuggestions";
+@forward "InstantResults";
+@forward "InstantCard";
+@forward "SearchField";
+@forward "SearchRecommendations";
+@forward "ShowingResultsFor";
+@forward "SearchModal";
+@forward "../PLP/ProductListingPage";