@depict-ai/react-ui 2.1.7 → 2.1.8

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

@@ -0,0 +1,197 @@
+@use "../../variables";
+@use "../../helpers/utils";
+@use "PreviousSearches";
+@use "../PLP/Buttons";
+@use "sass:map";
+
+/// Autocomplete is the component that displays suggested Categories and Products in the SearchModal, both under the "Suggestions" heading (i18n key `suggestions_`) when the customer hasn't typed anything, and once the customer has started typing.
+/// It also includes previous searches inside of the suggestions provided from the API - when the user hasn't typed though, the PreviousSearches component is shown instead.
+///
+/// ### Explanation of "entries without highlight" and "entries with highlight"
+///
+/// When the user is typing in the input field, we show query and category suggestions from the API and suggestions from the previous searches of the user (which are saved in localStorage).
+/// While the user is typing, we highlight the *new* parts of the query that we are suggesting (what the user hasn't typed). This only happens *if* the suggestion contains the query the user has typed.
+///
+/// The most flexible yet simple way we could come up with to style this is by breaking it down as follows:
+/// Note: "entry" refers to a suggestion from the API or a previous search.
+/// <ol>
+/// <li><b>Entries without highlight:</b><br />
+/// This is the styling for the entries where nothing is highlighted. This is the case when the user hasn't typed anything yet, or when the suggestion doesn't contain the query the user has typed.</li>
+/// <li><b>Entries with highlight:</b><br />
+/// Something is highlighted in this suggestion. This is the case when the user has typed something and the suggestion contains the query the user has typed.
+/// There are two things you can style here:
+/// <ol><li><b>Highlighted part:</b><br />
+/// The styling for the highlighted part of the suggestion.</li>
+/// <li><b>Toned down part:</b><br />
+/// The styling for the part of the suggestion that is not highlighted. This is the part of the suggestion that the user has already typed.</li></ol></li></ol>
+///
+/// @param {Color} $background [white] background color on the individual suggestion items
+/// @param {Color} $selected-background [#ffffff80] background color on the individual suggestion items when they are selected (hovered or selected by keyboard navigating (up/down arrows))
+/// @param {Color} $icon-color [variables.$brand-black] - color of the clock, search and clear icon
+/// @param {Number with size unit} $autocomplete-gap-between-items-in-row-mode [5px] - The vertical gap between the "list-style items", the individual suggestions that have the full width.
+/// @param {Number with size unit} $autocomplete-gap-between-category-and-other [20px]- The vertical gap between the category and query suggestion sections
+/// @param {Number with size unit} $autocomplete-gap-between-compact-suggestions [$autocomplete-gap-between-items-in-row-mode] - The horizontal gap between the individual query suggestions that show up in "compact" mode (multiple in the same row) when no query has been entered
+/// @param {Color} $heading-color [variables.$brand-dark-grey] - The color of the heading of both the previous searches and the suggestions (all headings in the Autocomplete section)
+/// @param {Number} $heading-font-weight [700] - The font weight of all headings in the Autocomplete section
+/// @param {Map} $entries-without-highlight [("color": variables.$brand-dark-grey, "font-weight": 400)] - Map between *any* CSS property key to CSS value. The styling for the entries where nothing is highlighted, see the explanation above.
+/// @param {Map} $entries-with-highlight [(
+///    "highlighted-part": (
+///      "color": variables.$brand-dark-grey,
+///      "font-weight": 500
+///    ),
+///    "toned-down-part": (
+///      "color": variables.$brand-dark-grey,
+///      "font-weight": 400
+///    )
+///  )] - Map containing either "toned-down-part" which is a map and/or "highlighted-part" which is also a map. Both of the aforementioned maps can contain *any* CSS property key to CSS value. See the explanation above in the `Explanation of "entries without highlight" and "entries with highlight"`-section.
+/// @example scss - Simple example adding a custom font for the highlighted part of the suggestions
+///   @include search.Autocomplete(
+///    $entries-with-highlight: (
+///      "highlighted-part": (
+///        "font-family": "Gotham Medium",
+///      ),
+///    )
+///  );
+/// @example scss - Example if having bold text doesn't fit your brand and you instead want to make what the user typed "light" but keep the rest "regular":
+///   @include search.Autocomplete(
+///    $entries-without-highlight: (
+///      "font-weight": 400
+///    ),
+///    $entries-with-highlight: (
+///      "highlighted-part": (
+///        "font-weight": 400
+///      ),
+///      "toned-down-part": (
+///        "font-weight": 300
+///      )
+///    )
+///  );
+
+@mixin Autocomplete(
+  $background: white,
+  $selected-background: #ffffff80,
+  $icon-color: variables.$brand-black,
+  $autocomplete-gap-between-items-in-row-mode: 5px,
+  $autocomplete-gap-between-category-and-other: 20px,
+  $autocomplete-gap-between-compact-suggestions: $autocomplete-gap-between-items-in-row-mode,
+  $heading-color: variables.$brand-dark-grey,
+  $heading-font-weight: 700,
+  $entries-without-highlight: (),
+  $entries-with-highlight: ()
+) {
+  $entries-without-highlight-defaults: (
+    "color": variables.$brand-dark-grey,
+    "font-weight": 400,
+  );
+  $entries-with-highlight-defaults: (
+    "highlighted-part": (
+      "color": variables.$brand-dark-grey,
+      "font-weight": 500,
+    ),
+    "toned-down-part": (
+      "color": variables.$brand-dark-grey,
+      "font-weight": 400,
+    ),
+  );
+  $merged-entries-without-highlight: map.merge($entries-without-highlight-defaults, $entries-without-highlight);
+  $merged-entries-with-highlight: map.merge($entries-with-highlight-defaults, $entries-with-highlight);
+  @include PreviousSearches.PreviousSearches(
+    $icon-color: $icon-color,
+    $item-color: map.get($merged-entries-without-highlight, "color"),
+    $gap-between-items: $autocomplete-gap-between-items-in-row-mode
+  );
+  .previous-searches,
+  .suggestions {
+    .text {
+      font-size: 16px;
+      font-weight: $heading-font-weight;
+      color: $heading-color;
+      margin-top: 0;
+    }
+    .item,
+    .suggestion {
+      background: $background;
+      &.selected {
+        background: $selected-background;
+      }
+
+      &:focus-visible {
+        outline: none;
+        filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
+      }
+    }
+  }
+  .suggestions {
+    display: flex;
+    flex-direction: column;
+    @include utils.flex-gap($autocomplete-gap-between-category-and-other, "column nowrap");
+
+    &:not(.compact) > .suggestion-container,
+    &.compact > .suggestion-container:not(.query) {
+      @include utils.flex-gap($autocomplete-gap-between-items-in-row-mode, "column nowrap");
+    }
+    .suggestion-container {
+      display: flex;
+      flex-direction: column;
+      .suggestion {
+        svg {
+          flex-shrink: 0;
+        }
+        display: flex;
+        justify-content: space-between;
+        overflow-wrap: anywhere;
+        align-items: center;
+        border-radius: variables.$border-radius;
+        @each $property, $value in $merged-entries-without-highlight {
+          #{$property}: $value;
+        }
+
+        padding: 10px 20px;
+
+        .search-icon {
+          max-width: 12px;
+          max-height: 13px;
+          svg {
+            transform: scale(0.6) translate(-6.9px, -7.2px);
+            path {
+              fill: $icon-color;
+            }
+          }
+        }
+
+        .has-history-match {
+          @each $property, $value in map.get($merged-entries-with-highlight, "toned-down-part") {
+            #{$property}: $value;
+          }
+          .highlighted-part {
+            @each $property, $value in map.get($merged-entries-with-highlight, "highlighted-part") {
+              #{$property}: $value;
+            }
+          }
+        }
+
+        .category {
+          margin-right: 20px;
+        }
+
+        .type {
+          color: #868689;
+          text-transform: capitalize;
+        }
+      }
+
+      &.query {
+        flex-direction: column;
+        .suggestion {
+          justify-content: flex-start;
+          @include utils.flex-gap(8px, "row nowrap");
+        }
+      }
+    }
+    &.compact > .suggestion-container.query {
+      flex-direction: row;
+      flex-wrap: wrap;
+      @include utils.flex-gap($autocomplete-gap-between-compact-suggestions, "row wrap");
+    }
+  }
+}

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

@@ -0,0 +1,82 @@
+@use "../../helpers/supports-hover";
+@use "../../helpers/utils";
+@use "../../variables";
+
+/// CategorySuggestions is the component that displays suggested Categories on the SearchPage, above the results.
+/// @param {Color} $card-background [white] - The background color of individual category "cards"
+/// @param {false | Color} $hovered-card-background [false] - The background color of individual category "cards" when hovered. If false, a color is automatically obtained by lightening or darkening `$card-background`.
+/// @param {Border | false} $card-border [false] - The border of individual category "cards". If false, no border is applied.
+/// @param {Number with size unit} $card-border-radius [variables.$border-radius] - The border radius of individual category "cards"
+/// @param {Number} $title-font-weight [420] - The font weight of the text on the category "cards"
+/// @param {Number} $parent-title-font-weight [400] - The font weight of the text on the category "cards" that is the parent of proposed category (not always displayed)
+/// @param {Boolean} $thin [true] - If true, the category title and parent category title are displayed besides each other (in the same row).
+@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,122 @@
+@use "../../helpers/utils";
+@use "../../variables";
+
+/// Mixin that styles the idividual product cards in the InstantResults in the SearchModal
+/// @param {Color} $instant-card-sales-price-color [$instant-card-sales-price-color] - The color of the sales price
+/// @param {Boolean} $instant-card-show-price [true] - Whether to show the price
+/// @param {Boolean} $instant-card-show-tagline [true] - Whether to show the tagline (this can be different things depending on what backend sends)
+
+@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,12 @@
+@use "../../helpers/utils";
+
+/// Mixin that styles the container of the InstantResults in the SearchModal
+/// @param {Number with size unit} $gap [5px] - The gap between the InstantResults
+@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,90 @@
+@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. It can also be configured by configuring Autocomplete.
+/// @param {Color} $icon-color [variables.$brand-black] - The color of the clock icon and clear icon. Keep in mind that it needs to have contrast with the hovered state of the delete icon
+/// @param {Color} $item-color [variables.$brand-black] - The color of the text of the previous searches item
+/// @param {Number with size unit} $gap-between-items [5px] - The gap between the individual previous searches items
+
+@mixin PreviousSearches(
+  $icon-color: variables.$brand-dark-grey,
+  $item-color: variables.$brand-black,
+  $gap-between-items: 5px
+) {
+  .previous-searches {
+    display: flex;
+    flex-direction: column;
+    @include utils.flex-gap(15px, "column nowrap");
+
+    .list {
+      display: flex;
+      flex-direction: column;
+      @include utils.flex-gap($gap-between-items, "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: $icon-color;
+            }
+          }
+          &:hover svg {
+            transform: scale(1.2);
+            path {
+              fill: #000;
+            }
+          }
+          &:focus-visible {
+            filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
+            svg {
+              transform: scale(1.2);
+              path {
+                fill: #000;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,189 @@
+@use "../../variables";
+@use "../../helpers/supports-hover";
+@use "../PLP/Buttons";
+@use "sass:map";
+
+/// QueryInput is the component that shows the search input, sometimes back button, clear button and the search button.
+/// The version exported in the SDK it is called SearchField
+/// @param {Number with size unit} $border-radius [variables.$border-radius * 2.5] - Border radius of the search input
+/// @param {Number with size unit} $input-font-size [initial] - Font size of the `<input>` element
+/// @param {Number} $input-font-weight [initial] - Font weight of the `<input>` element
+/// @param {Color} $input-placeholder-color [initial] - Color of the placeholder text in the `<input>` element (the text that's visible when no search query has been entered)
+/// @param {Color | false} $submit-background [false] If not false: the background color of the submit button
+/// @param {Number} $submit-icon-size [1] - The scaling factor of the submit icon
+/// @param {Color} $back-color [variables.$brand-dark-grey] - The color of the path of the back icon
+/// @param {Color} $back-background [#fff] - The background color of the back button
+/// @param {Color} $clear-color [variables.$brand-dark-grey] - The color of the path of the clear icon
+/// @param {Color} $hovered-clear-color [variables.$brand-black] - The color of the path of the clear icon when hovered
+/// @param {Color} $query-text-color [variables.$brand-dark-grey] - The color of the text in the search input
+/// @param {Color} $query-background-color [#fff] - The background color of the `<input>` element
+/// @param {Border} $query-border [none] - The border of the `<input>` element
+/// @param {Color} $hovered-back-color [variables.$brand-black] - The color of the path of the back icon when hovered
+/// @param {false | Color} $hovered-submit-color [false] - If not false: the color of the path of the submit icon when hovered
+/// @param {Color} $focused-query-text-color [#000] - The color of the text in the search input when focused or hovered
+/// @param {Shadow} $box-shadow [0px 4px 4px rgba(0, 0, 0, 0.05)] - The box shadow of the whole QueryInput component (including buttons, etc)
+
+@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)
+) {
+  // TODO: Probably rename to SearchField?
+  .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: map.get(Buttons.get-secondary-button-properties(), "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: map.get(Buttons.get-secondary-button-properties(), "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;
+      }
+
+      @if $hovered-submit-color {
+        @include supports-hover.supports-hover() {
+          &:hover {
+            svg path {
+              fill: $hovered-submit-color;
+            }
+          }
+        }
+      }
+    }
+    @content;
+  }
+}