@depict-ai/react-ui 0.0.76 → 0.0.78

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

@@ -1,157 +0,0 @@
-@use "../../../variables";
-@use "../../../helpers/utils";
-@use "sass:map";
-
-/// Mobile modal - taking arguments from SortAndFilter mixin so see SortAndFilter docs for more info
-@mixin SortAndFilterModal() {
-  $title-font-weight: variables.get-merged(variables.$font-weights-defaults, variables.$font-weights, 400);
-  $expanded-title-font-weight: variables.get-merged(variables.$font-weights-defaults, variables.$font-weights, 600);
-  $sort-and-filter-modal-background: #fff;
-  $mobile-top-level-collapse-background: $sort-and-filter-modal-background;
-  $mobile-top-level-collapse-color: variables.get-text-color("base", "default");
-
-  .depict-filter-sort-modal-backdrop {
-    @include utils.modal-backdrop($background: rgba(0, 0, 0, 0.7), $z-index: variables.$base-z-index);
-    will-change: opacity;
-    opacity: 0;
-  }
-
-  .dismiss-modal {
-    background: transparent;
-    padding: 0;
-    line-height: 0;
-    border: none;
-    position: fixed;
-    top: 14px;
-    transform: translateY(calc(-100% - 14px));
-    left: 4px;
-    z-index: variables.$base-z-index + 3;
-    cursor: pointer;
-    svg {
-      transform: scale(0.6646);
-      path {
-        fill: #fff;
-      }
-    }
-  }
-
-  .filter-sort-modal {
-    z-index: calc(#{variables.$base-z-index} + 2);
-    position: fixed;
-    top: 0;
-    left: 30px;
-    width: calc(100% - 30px);
-    height: 100%;
-    background: $sort-and-filter-modal-background;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    will-change: transform;
-    transform: translateY(100%);
-
-    // the toggles that close/expand the whole sorting and filter section on mobile
-    details {
-      &.sorting,
-      &.filters {
-        & > summary {
-          list-style: none;
-          &::-webkit-details-marker {
-            display: none;
-          }
-        }
-        .sort-filter-summary > .summary {
-          border-top: 1px solid #f4f4f4;
-          cursor: pointer;
-          box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
-          color: $mobile-top-level-collapse-color;
-          padding: 13px 20px;
-          background: $mobile-top-level-collapse-background;
-          display: flex;
-          justify-content: space-between;
-          @if $title-font-weight {
-            font-weight: $title-font-weight;
-          }
-          .left-els {
-            display: flex;
-            align-items: center;
-            @include utils.flex-gap(10px, "row nowrap");
-          }
-        }
-      }
-      &[open] {
-        .sort-filter-summary > .summary {
-          @if $expanded-title-font-weight {
-            font-weight: $expanded-title-font-weight;
-          }
-        }
-      }
-    }
-    .filter-icon,
-    .sort-icon {
-      fill: $mobile-top-level-collapse-color;
-    }
-
-    & > .body {
-      overflow-y: auto;
-      display: flex;
-      flex-direction: column;
-      @include utils.flex-gap(2px, "column nowrap");
-    }
-    .filters,
-    .sorting {
-      .body {
-        color: variables.get-text-color("neutral", "default");
-      }
-      & > summary {
-        .morphing-sign span {
-          background: $mobile-top-level-collapse-color;
-        }
-      }
-    }
-
-    .filters {
-      .filter-collapsible-body {
-        background: transparent;
-      }
-      .body {
-        padding: 10px;
-        background: unset;
-
-        .filter-part,
-        .view-more-clear {
-          background: rgb(253, 253, 253);
-        }
-      }
-    }
-    .sorting .body {
-      margin: 10px;
-      background: rgb(238, 238, 240);
-      border-radius: variables.$border-radius;
-      padding: 0;
-    }
-
-    .bottom-row {
-      flex-shrink: 0;
-      padding: 10px;
-      display: flex;
-      justify-content: space-between;
-      @include utils.flex-gap(10px, "row nowrap");
-
-      & > button {
-        padding-top: 12px;
-        padding-bottom: 12px;
-        border-radius: variables.$border-radius;
-      }
-
-      .show-results {
-        flex-grow: 1;
-        font-weight: 500;
-        font-size: 1.1em;
-      }
-
-      .clear {
-        font-size: 1.1em;
-      }
-    }
-  }
-}

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

@@ -1,61 +0,0 @@
-@use "../../variables";
-@use "../../helpers/utils";
-
-/// Toast is a small, unobtrusive, banner that appears at the bottom of the page when we clear their filters when going sideways in the category tree (or they do it manually). The Toast has a button that allows them to get their filters back (restore them) in case they want it back.
-/// It's a general component otherwise and might also be used for other messages.
-
-@mixin Toast() {
-  .depict.plp.toast {
-    position: fixed;
-    bottom: 10px;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: calc(#{variables.$base-z-index} + 5);
-    background: white;
-    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
-    padding: 10px 20px;
-    border-radius: variables.$border-radius;
-    border-image-source: linear-gradient(
-      90deg,
-      variables.$toast-progress-bar-color 0%,
-      variables.$toast-progress-bar-color 100%
-    );
-    border-image-slice: 0 0 100% 0;
-    border-bottom-style: solid;
-    border-bottom-width: 2px; // doesn't show in chrome sometimes without
-    white-space: nowrap;
-
-    *,
-    & * {
-      user-select: none;
-      -webkit-user-select: none;
-    }
-
-    @media (min-width: 1000px) {
-      padding: 10px 40px;
-    }
-
-    &,
-    & .buttons {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      @media (max-width: 999px) {
-        @include utils.flex-gap(10px, "row nowrap");
-      }
-      @media (min-width: 1000px) {
-        @include utils.flex-gap(30px, "row nowrap");
-      }
-    }
-
-    & {
-      color: variables.get-text-color("base", "default");
-    }
-    button {
-      padding: 5px 20px;
-      border-radius: variables.$border-radius;
-      cursor: pointer;
-    }
-    @content;
-  }
-}

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

@@ -1,15 +0,0 @@
-@use "sass:meta";
-
-/// Component style mixins for PLP
-/// PLP encompasses both Search and Category page, so you will always need to include these mixins.
-
-@forward "SelectedFilters";
-@forward "ScrollStatus";
-@forward "SlidableItems";
-@forward "PLPResults";
-@forward "SortAndFilter/SortAndFilter";
-@forward "SortAndFilter/SortAndFilterModal";
-@forward "SortAndFilter/FloatingButtons";
-@forward "Toast";
-@forward "ProductListingPage";
-@forward "Buttons";

package/dist/styles/components/category/BreadCrumbs.scss

@@ -1,25 +0,0 @@
-@use "../../variables";
-
-/// BreadCrumbs is the trail of links that shows the user where they are in the site hierarchy and allows them to go back up the tree. Often BreadCrumbs are located at the top of the page.
-
-@mixin BreadCrumbs() {
-  .crumbs {
-    display: flex;
-    flex-wrap: wrap;
-    .crumb {
-      color: variables.get-text-color("neutral", "default");
-      &:hover {
-        text-decoration: underline;
-      }
-      &:last-of-type {
-        color: variables.get-text-color("base", "default");
-        font-weight: 500;
-      }
-    }
-    .separator {
-      margin-left: 10px;
-      margin-right: 10px;
-      color: variables.get-text-color("subtle", "default");
-    }
-  }
-}

package/dist/styles/components/category/CategoryTitle.scss

@@ -1,33 +0,0 @@
-@use "../../variables";
-@use "../../helpers/utils";
-@use "../../helpers/supports-hover";
-
-/// CategoryTitle is the component that shows the title of the current category along with the number of products in it.
-/// This component is optional. When setting up the SDK in TypeScript you can choose between using this component (CategoryTitle) or embedded_num_products which will just show the number of products in the category and allow you to add a title outside of the category page yourself.
-/// You only need to call the mixin if you're using the CategoryTitle component.
-
-@mixin CategoryTitle() {
-  .category-title {
-    overflow-wrap: anywhere;
-    font-size: 1.5em;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    * {
-      display: flex;
-      align-items: center;
-    }
-    .title {
-      margin-right: 10px;
-      font-weight: 700;
-      font-size: inherit;
-    }
-    .explanation {
-      color: variables.get-text-color("subtle", "default");
-      font-weight: 500;
-      .product-count {
-        margin-left: 10px;
-      }
-    }
-  }
-}

package/dist/styles/components/category/QuickLinks.scss

@@ -1,57 +0,0 @@
-@use "../../variables";
-@use "../../helpers/utils";
-@use "../../helpers/supports-hover";
-@use "../PLP/Buttons";
-@use "sass:color";
-@use "sass:map";
-
-/// The QuickLinks show the quick links to the subcategories or sibling categories of the current category.
-/// It enables to user to navigate to a subcategory or sibling category without having to go back to the category page.
-
-@mixin QuickLinks() {
-  .quicklinks {
-    overflow: hidden;
-    .quicklink {
-      white-space: nowrap;
-      padding: 10px 20px;
-      background: variables.get-background-color("base", "default");
-      color: variables.get-text-color("base", "default");
-      transition: all 75ms ease-in-out;
-      border-radius: variables.$border-radius;
-      border: 1px solid variables.get-border-color("neutral", "default");
-      &:focus {
-        outline: none;
-      }
-      @include supports-hover.supports-hover() {
-        &:hover {
-          background: variables.get-background-color("base", "hover");
-        }
-      }
-      &:focus-visible {
-        background: variables.get-background-color("base", "hover");
-        filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
-      }
-      &:active {
-        background: variables.get-background-color("base", "pressed");
-      }
-      &.selected {
-        color: variables.get-text-color("inverse", "default");
-        background: variables.get-background-color("inverse", "default");
-        border: 1px solid transparent;
-        @include supports-hover.supports-hover() {
-          &:hover {
-            // should we have this? since it's selected, nothing will happen when clicked
-            background: variables.get-background-color("inverse", "hover");
-          }
-        }
-        &:focus-visible {
-          background: variables.get-background-color("inverse", "hover");
-          filter: map.get(Buttons.get-primary-button-properties(), "focus-visible-filter");
-        }
-        &:active {
-          background: variables.get-background-color("inverse", "pressed");
-        }
-      }
-    }
-  }
-}

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

@@ -1,7 +0,0 @@
-/// Component style mixins for Category styling
-/// Don't forget to also include PLP styling
-
-@forward "BreadCrumbs";
-@forward "QuickLinks";
-@forward "CategoryTitle";
-@forward "../PLP/ProductListingPage";

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

@@ -1,182 +0,0 @@
-@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 {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(
-  $entries-without-highlight: variables.$autocomplete-entries-without-highlight,
-  $entries-with-highlight: variables.$autocomplete-entries-with-highlight
-) {
-  $entries-without-highlight-defaults: (
-    "color": variables.get-text-color("neutral", "default"),
-    "font-weight": variables.get-font-weight(400),
-  );
-  $entries-with-highlight-defaults: (
-    "highlighted-part": (
-      "color": variables.get-text-color("neutral", "default"),
-      "font-weight": variables.get-font-weight(500),
-    ),
-    "toned-down-part": (
-      "color": variables.get-text-color("neutral", "default") y,
-      "font-weight": variables.get-font-weight(400),
-    ),
-  );
-  $merged-entries-without-highlight: map.deep-merge($entries-without-highlight-defaults, $entries-without-highlight);
-  $merged-entries-with-highlight: map.deep-merge($entries-with-highlight-defaults, $entries-with-highlight);
-  @include PreviousSearches.PreviousSearches();
-  .previous-searches,
-  .suggestions {
-    .text {
-      font-size: 16px;
-      font-weight: variables.get-font-weight(700);
-      color: variables.get-text-color("neutral", "default");
-      margin-top: 0;
-    }
-    .item,
-    .suggestion {
-      background: variables.get-background-color("base", "default");
-      &.selected {
-        background: variables.get-background-color("neutral", "default");
-      }
-
-      &:focus-visible {
-        outline: none;
-        filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
-      }
-
-      &:active {
-        background: variables.get-background-color("subtle", "pressed");
-      }
-
-      @each $property, $value in $merged-entries-without-highlight {
-        #{$property}: $value;
-      }
-    }
-  }
-  .suggestions {
-    display: flex;
-    flex-direction: column;
-    @include utils.flex-gap(map.get(variables.get-gap("autocomplete"), "between-category-and-other"), "column nowrap");
-
-    &:not(.compact) > .suggestion-container,
-    &.compact > .suggestion-container:not(.query) {
-      @include utils.flex-gap(map.get(variables.get-gap("autocomplete"), "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;
-
-        padding: 10px 20px;
-
-        .search-icon {
-          max-width: 12px;
-          max-height: 13px;
-          svg {
-            transform: scale(0.6) translate(-6.9px, -7.2px);
-            path {
-              fill: variables.get-text-color("neutral", "default");
-            }
-          }
-        }
-
-        .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(map.get(variables.get-gap("autocomplete"), "between-compact-suggestions"), "row wrap");
-    }
-  }
-}

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

@@ -1,53 +0,0 @@
-@use "../../helpers/supports-hover";
-@use "../../helpers/utils";
-@use "../../variables";
-
-/// CategorySuggestions is the component that displays suggested Categories on the SearchPage, above the results.
-@mixin CategorySuggestions() {
-  .category-suggestions {
-    display: flex;
-
-    .sliding {
-      padding-bottom: 2px;
-      margin-bottom: -2px;
-    }
-
-    .title {
-      font-weight: variables.get-font-weight(500);
-    }
-    .category-suggestion {
-      background: variables.get-background-color("base", "default");
-      transition: background 100ms ease-in-out;
-
-      &:focus-visible {
-        background: variables.get-background-color("base", "hover");
-      }
-      @include supports-hover.supports-hover() {
-        &:hover {
-          background: variables.get-background-color("base", "hover");
-        }
-      }
-      &:active {
-        background: variables.get-background-color("base", "pressed");
-      }
-      border: 1px solid variables.get-border-color("subtle", "default");
-      padding: 10px 20px;
-      color: variables.get-text-color("base", "default");
-      display: flex;
-      height: 100%;
-      align-items: center;
-      justify-content: space-between;
-      @include utils.flex-gap(10px, "row nowrap");
-
-      .parent-title {
-        font-weight: variables.get-font-weight(300);
-      }
-
-      & > * {
-        white-space: nowrap;
-        font-size: 0.85em;
-      }
-    }
-    @content;
-  }
-}