@depict-ai/react-ui 2.1.7 → 2.1.8

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

@@ -0,0 +1,158 @@
+@use "../../../variables";
+@use "../../../helpers/utils";
+
+/// Mobile modal - taking arguments from SortAndFilter mixin so see SortAndFilter docs for more info
+@mixin SortAndFilterModal(
+  $mobile-top-level-collapse-color,
+  $mobile-top-level-collapse-background,
+  $close-icon-color: #fff,
+  $some-text-color: variables.$brand-dark-grey,
+  $sort-and-filter-modal-background: variables.$brand-lighter-grey,
+  $title-font-weight: false,
+  $expanded-title-font-weight: $title-font-weight
+) {
+  .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: $close-icon-color;
+      }
+    }
+  }
+
+  .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 {
+          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;
+      background: $sort-and-filter-modal-background;
+      @include utils.flex-gap(2px, "column nowrap");
+    }
+    .filters,
+    .sorting {
+      .body {
+        color: $some-text-color;
+      }
+      & > 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/SortAndFilter/WhiteSortAndFilter.scss

@@ -0,0 +1,152 @@
+@use "../../../helpers/utils";
+@use "../../../helpers/custom_input";
+@use "SortAndFilterModal";
+@use "../MorphingSign";
+@use "../../../variables";
+@use "../../../helpers/supports-hover";
+@use "SortAndFilter";
+
+/// A wrapper around SortAndFilter that styles the sorting and filtering menus for the white theme by providing a default set of white variables.
+///
+/// ### Parameters
+/// See [SortAndFilter](#undefined-mixin-SortAndFilter) for parameters.
+@mixin WhiteSortAndFilter(
+  $mobile-top-level-collapse-color: variables.$brand-black,
+  $mobile-top-level-collapse-background: #fff,
+  $custom-input-checked-background: #fff,
+  $custom-input-background: #fff,
+  $custom-input-indicator-color: variables.$brand-black,
+  $checkbox-background-color: #fff,
+  $checkbox-checked-background-color: variables.$brand-black,
+  $checkbox-checkmark-color: #fff,
+  $checkbox-border-radius: if(variables.$border-radius == 0, 0, if(variables.$border-radius == 0px, 0, 2px)),
+  // if global border radius is 0 or 0px, don't round input fields in their default value
+  $checkbox-border: 1px solid variables.$brand-dark-grey,
+  $checkbox-top-offset: 0px,
+  $checkbox-left-offset: 0px,
+  $radio-border: 1px solid variables.$brand-dark-grey,
+  $radio-background-color: #fff,
+  $radio-selected-dot-color: variables.$brand-black,
+  $radio-selected-dot-size: 14px,
+  $radio-selected-offset: 0px,
+  $separator-color: variables.$brand-dark-grey,
+  $price-range-min-max-text-color: variables.$brand-dark-grey,
+  $range-input-bg-color: variables.$brand-lightest-grey,
+  $clear-all-filters-color: #fff,
+  $top-level-summary-background: transparent,
+  $hovered-top-level-summary-background: variables.$brand-lightest-grey,
+  $hovered-range-input-bg-color: variables.$brand-lighter-grey,
+  $hovered-checkbox-bg: variables.$brand-lighter-grey,
+  $hovered-checkbox-checked-background-color: variables.$brand-dark-grey,
+  $input-row-label-color: variables.$brand-dark-grey,
+  $checked-input-row-label-color: #000,
+  $input-row-label-font-weight: 400,
+  $checked-input-row-label-font-weight: 500,
+  $showing-selected-subfilter-count-color: variables.$brand-grey,
+  $filter-available-products-color: variables.$brand-grey,
+  $count-zero-input-row-label-color: rgb(194, 194, 194),
+  $spacing_between_input_rows: 10px,
+  $ungrouped-top-margin: 25px,
+  $hovered-checkbox-border: 2px solid variables.$brand-black,
+  $hovered-radio-border: 2px solid variables.$brand-black,
+  $sort-and-filter-button-padding: 10px 20px,
+  $expandable-seperator-color: variables.$brand-lightest-grey,
+  $expandable-seperator-hover-color: variables.$brand-lighter-grey,
+  $expandable-seperator-height: 1px,
+  $filter-group-heading-color: variables.$brand-dark-grey,
+  $filter-groups-morphing-sign-color: variables.$brand-dark-grey,
+  $filter-group-border-color: variables.$brand-light-grey,
+  $filter-group-summary-border-radius: 0px,
+  $sort-and-filter-modal-background: white,
+  $filter-group-heading-padding: 15px 10px,
+  $filter-group-summary-spacings: 0px,
+  $range-input-field-border-radius: 0px,
+  $range-input-field-border: 0.5px solid #000000,
+  $filter-group-title-bold: 500,
+  $view-more-clear-background: white,
+  $filter-collapsible-body-background: white,
+  $sort-and-filter-modal-section-title-font-weight: bold,
+  $sort-and-filter-modal-section-expanded-title-font-weight: $sort-and-filter-modal-section-title-font-weight,
+  $expanded-filter-group-border-color: variables.$brand-lighter-grey,
+  $view-more-clear-border-color: variables.$brand-lighter-grey
+) {
+  @include SortAndFilter.SortAndFilter(
+    $mobile-top-level-collapse-color,
+    $mobile-top-level-collapse-background,
+    $custom-input-checked-background,
+    $custom-input-background,
+    $custom-input-indicator-color,
+    $checkbox-background-color,
+    $checkbox-checked-background-color,
+    $checkbox-checkmark-color,
+    $checkbox-border-radius,
+    $checkbox-border,
+    $checkbox-top-offset,
+    $checkbox-left-offset,
+    $radio-border,
+    $radio-background-color,
+    $radio-selected-dot-color,
+    $radio-selected-dot-size,
+    $radio-selected-offset,
+    $separator-color,
+    $price-range-min-max-text-color,
+    $range-input-bg-color,
+    $top-level-summary-background,
+    $hovered-top-level-summary-background,
+    $hovered-range-input-bg-color,
+    $hovered-checkbox-bg,
+    $hovered-checkbox-checked-background-color,
+    $input-row-label-color,
+    $checked-input-row-label-color,
+    $input-row-label-font-weight,
+    $checked-input-row-label-font-weight,
+    $showing-selected-subfilter-count-color,
+    $filter-available-products-color,
+    $count-zero-input-row-label-color,
+    $spacing_between_input_rows,
+    $ungrouped-top-margin,
+    $hovered-checkbox-border,
+    $hovered-radio-border,
+    $sort-and-filter-button-padding,
+    $expandable-seperator-color,
+    $expandable-seperator-hover-color,
+    $expandable-seperator-height,
+    $filter-group-heading-color,
+    $filter-groups-morphing-sign-color,
+    $filter-group-summary-border-radius,
+    $sort-and-filter-modal-background,
+    $filter-group-heading-padding,
+    $filter-group-summary-spacings,
+    $range-input-field-border-radius,
+    $range-input-field-border,
+    $filter-group-title-bold,
+    $view-more-clear-background,
+    $filter-collapsible-body-background,
+    $sort-and-filter-modal-section-title-font-weight,
+    $sort-and-filter-modal-section-expanded-title-font-weight
+  );
+  .filters .body {
+    details.filter-collapsible {
+      border-top: 1px solid $filter-group-border-color;
+      &[open] {
+        & > summary {
+          border-bottom: 1px solid $expanded-filter-group-border-color;
+        }
+      }
+      .filter-collapsible-body {
+        margin-bottom: 15px;
+      }
+    }
+    .view-more-clear {
+      border-top: 1px solid $view-more-clear-border-color;
+    }
+  }
+  .filter-sort-modal details {
+    &.sorting,
+    &.filters {
+      .sort-filter-summary > .summary {
+        border-top: 1px solid #f4f4f4;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,59 @@
+@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.
+/// @param {Number} $z-index [variables.$base-z-index * 5] - The z-index of the Toast.
+/// @param {Color} $progress-bar-color [variables.$brand-dark-grey] - The color of the progress bar below the toast that shows when it will auto-close.
+
+@mixin Toast($z-index: calc(#{variables.$base-z-index} + 5), $progress-bar-color: variables.$brand-dark-grey) {
+  .depict.plp.toast {
+    position: fixed;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: $z-index;
+    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, $progress-bar-color 0%, $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.$brand-dark-grey;
+    }
+    button {
+      padding: 5px 20px;
+      border-radius: variables.$border-radius;
+      cursor: pointer;
+    }
+    @content;
+  }
+}

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

@@ -0,0 +1,51 @@
+@use "sass:meta";
+
+// Component style mixins
+@use "../../variables";
+@use "SelectedFilters";
+@use "ScrollStatus";
+@use "SlidableItems";
+@use "PLPResults";
+@use "SortAndFilter/SortAndFilter";
+@use "SortAndFilter/WhiteSortAndFilter";
+@use "SortAndFilter/FloatingButtons";
+@use "Toast";
+@use "ProductListingPage";
+@use "Buttons";
+
+@forward "SelectedFilters";
+@forward "ScrollStatus";
+@forward "SlidableItems";
+@forward "PLPResults";
+@forward "SortAndFilter/SortAndFilter";
+@forward "SortAndFilter/WhiteSortAndFilter";
+@forward "SortAndFilter/FloatingButtons";
+@forward "Toast";
+@forward "ProductListingPage";
+@forward "Buttons";
+
+/// Default variables
+@forward "../../variables";
+
+/// Load all PLP mixins with default values. PLP encompasses both Search and Category page, so you will always need to include the mixins that this includes somehow. If only minor theming is needed styles in variables.scss can be
+/// reassigned: https://sass-lang.com/documentation/at-rules/use#reassigning-variables
+/// If more control is needed use these mixins separately and pass custom params
+
+@mixin all-PLP-components() {
+  .depict.plp {
+    @include PLPResults.PLPResults();
+    @include ProductListingPage.ProductListingPage();
+    @include SelectedFilters.SelectedFilters();
+    @include ScrollStatus.ScrollStatus();
+    @if variables.$white {
+      @include WhiteSortAndFilter.WhiteSortAndFilter();
+    } @else {
+      @include SortAndFilter.SortAndFilter();
+    }
+    @include FloatingButtons.FloatingButtons();
+    @include SlidableItems.SlidableItems();
+    @include Buttons.PrimaryButton();
+    @include Buttons.SecondaryButton();
+  }
+  @include Toast.Toast();
+}

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

@@ -0,0 +1,32 @@
+@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.
+/// @param {Color} $color [variables.$brand-dark-grey] - The color of the text.
+/// @param {Color} $separator-color [variables.$brand-grey] - The color of the separator between the links.
+/// @param {Color} $selected-color [variables.$brand-black] - The color of the last link in the trail (the one that is selected).
+
+@mixin BreadCrumbs(
+  $color: variables.$brand-dark-grey,
+  $separator-color: variables.$brand-grey,
+  $selected-color: variables.$brand-black
+) {
+  .crumbs {
+    display: flex;
+    flex-wrap: wrap;
+    .crumb {
+      color: $color;
+      &:hover {
+        text-decoration: underline;
+      }
+      &:last-of-type {
+        color: $selected-color;
+        font-weight: 500;
+      }
+    }
+    .separator {
+      margin-left: 10px;
+      margin-right: 10px;
+      color: $separator-color;
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+@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.
+/// @param {Number} $title-font-weight [700] - The font weight of the title
+/// @param {Number} $explanation-font-weight [500] - The font weight of the dash, number of products and "products" string
+/// @param {Color} $explanation-color [variables.$brand-grey] - The color of the dash, number of products and "products" string
+
+@mixin CategoryTitle(
+  $title-font-weight: 700,
+  $explanation-font-weight: 500,
+  $explanation-color: variables.$brand-grey
+) {
+  .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: $title-font-weight;
+      font-size: inherit;
+    }
+    .explanation {
+      color: $explanation-color;
+      font-weight: $explanation-font-weight;
+      .product-count {
+        margin-left: 10px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,80 @@
+@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.
+/// @param {Color} $background [white] - The background color of the individual quick links
+/// @param {Border | false} $border-radius [false] - Border radius override of the individual quick links. Set to false to use default border radius.
+/// @param {Color} $selected-background [map.get(Buttons.get-primary-button-properties(), "background")] - Background of the currently selected quick link
+/// @param {Color | false} $hovered-background [false] - Override background of the quick link when hovered. Set to false to automatically infer it.
+
+@mixin QuickLinks(
+  $background: white,
+  $border-radius: false,
+  $selected-background: map.get(Buttons.get-primary-button-properties(), "background"),
+  $hovered-background: false
+) {
+  .quicklinks {
+    overflow: hidden;
+    .quicklink {
+      white-space: nowrap;
+      padding: 10px 20px;
+      background: $background;
+      color: variables.$brand-black;
+      transition: all 75ms ease-in-out;
+      @if $border-radius {
+        border-radius: $border-radius;
+      } @else {
+        border-radius: variables.$border-radius;
+      }
+      &:focus {
+        outline: none;
+      }
+      @include supports-hover.supports-hover() {
+        &:hover {
+          @if $hovered-background {
+            background: $hovered-background;
+          } @else {
+            @include utils.highlight-background($normal-background: $background);
+          }
+        }
+      }
+      &:focus-visible {
+        @if $hovered-background {
+          background: $hovered-background;
+        } @else {
+          @include utils.highlight-background($normal-background: $background);
+        }
+        filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
+      }
+      &:active {
+        @include utils.highlight-background($normal-background: $background, $darken-factor: 10%, $lighten-factor: 20%);
+      }
+      &.selected {
+        color: white;
+        background: $selected-background;
+        @include supports-hover.supports-hover() {
+          &:hover {
+            // should we have this? since it's selected, nothing will happen when clicked
+            @include utils.highlight-background($normal-background: $selected-background);
+          }
+        }
+        &:focus-visible {
+          @include utils.highlight-background($normal-background: $selected-background);
+          filter: map.get(Buttons.get-primary-button-properties(), "focus-visible-filter");
+        }
+        &:active {
+          @include utils.highlight-background(
+            $normal-background: $selected-background,
+            $darken-factor: 10%,
+            $lighten-factor: 20%
+          );
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+// Component style mixins
+@use "BreadCrumbs";
+@use "QuickLinks";
+@use "CategoryTitle";
+@use "../PLP/ProductListingPage";
+
+@forward "BreadCrumbs";
+@forward "QuickLinks";
+@forward "CategoryTitle";
+@forward "../PLP/ProductListingPage";
+
+/// Load all category page 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-category-components() {
+  .depict.category {
+    @include BreadCrumbs.BreadCrumbs();
+    @include QuickLinks.QuickLinks();
+    @include CategoryTitle.CategoryTitle();
+    @include ProductListingPage.CategoryPage();
+  }
+}