@depict-ai/react-ui 2.0.5 → 2.0.6

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

@@ -0,0 +1,160 @@
+@use "../../../variables";
+@use "../../../helpers/utils";
+
+/*
+*  Mobile modal - taking arguments from SortAndFilter mixin
+*/
+@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,148 @@
+@use "../../../helpers/utils";
+@use "../../../helpers/custom_input";
+@use "SortAndFilterModal";
+@use "../MorphingSign";
+@use "../../../variables";
+@use "../../../helpers/supports-hover";
+@use "SortAndFilter";
+
+@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-black,
+  $checkbox-top-offset: 0px,
+  $checkbox-left-offset: 0px,
+  $radio-border: 1px solid variables.$brand-black,
+  $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,54 @@
+@use "../../variables";
+@use "../../helpers/utils";
+
+@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,45 @@
+@use "sass:meta";
+
+// Component style mixins
+@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 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
+// If more control is needed use these mixins separately and pass custom params
+@mixin all-components() {
+  .depict.plp {
+    @include PLPResults.PLPResults();
+    @include ProductListingPage.ProductListingPage();
+    @include SelectedFilters.SelectedFilters();
+    @include ScrollStatus.ScrollStatus();
+    @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,23 @@
+@use "../../variables";
+
+@mixin BreadCrumbs() {
+  .crumbs {
+    display: flex;
+    flex-wrap: wrap;
+    .crumb {
+      color: variables.$brand-dark-grey;
+      &:hover {
+        text-decoration: underline;
+      }
+      &:last-of-type {
+        color: variables.$brand-black;
+        font-weight: 500;
+      }
+    }
+    .separator {
+      margin-left: 10px;
+      margin-right: 10px;
+      color: variables.$brand-grey;
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+@use "../../variables";
+@use "../../helpers/utils";
+@use "../../helpers/supports-hover";
+
+@mixin CategoryTitle($title-font-weight: 700, $explanation-font-weight: 500, $title-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;
+    }
+    .explanation {
+      color: $title-color;
+      font-weight: $explanation-font-weight;
+      .product-count {
+        margin-left: 10px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,71 @@
+@use "../../variables";
+@use "../../helpers/utils";
+@use "../../helpers/supports-hover";
+@use "../PLP/Buttons";
+@use "sass:color";
+
+@mixin QuickLinks(
+  $background: white,
+  $border-radius: false,
+  $selected-background: Buttons.$primary-button-background,
+  $hovered-background: false
+) {
+  .quicklinks {
+    overflow: hidden;
+    .quicklink {
+      white-space: nowrap;
+      padding: 10px 20px;
+      border-radius: variables.$border-radius;
+      background: $background;
+      color: variables.$brand-black;
+      transition: all 75ms ease-in-out;
+      &:focus {
+        outline: none;
+      }
+      @if $border-radius {
+        border-radius: $border-radius;
+      }
+      @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: Buttons.$secondary-button-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: Buttons.$primary-button-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 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.category {
+    @include BreadCrumbs.BreadCrumbs();
+    @include QuickLinks.QuickLinks();
+    @include CategoryTitle.CategoryTitle();
+    @include ProductListingPage.CategoryPage();
+  }
+}

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

@@ -0,0 +1,117 @@
+@use "../../variables";
+@use "../../helpers/utils";
+@use "PreviousSearches";
+@use "../PLP/Buttons";
+
+@mixin Autocomplete(
+  $background: white,
+  $selected-background: #ffffff80,
+  $search-icon-color: variables.$brand-black,
+  $history-icon-color: variables.$brand-black,
+  $autocomplete-gap-between-items-in-row-mode: 5px,
+  $autocomplete-gap-between-category-and-other: 20px,
+  $heading-color: variables.$brand-dark-grey,
+  $heading-font-weight: 700,
+  $entries-without-highlight-color: variables.$brand-dark-grey,
+  $entries-without-highlight-font-weight: 400,
+  $entries-with-highlight-highlighted-part-color: variables.$brand-dark-grey,
+  $entries-with-highlight-highlighted-part-font-weight: 500,
+  $entries-with-highlight-toned-down-part-color: variables.$brand-dark-grey,
+  $entries-with-highlight-toned-down-part-font-weight: 400
+) {
+  @include PreviousSearches.PreviousSearches(
+    $icon-color: $history-icon-color,
+    $item-color: $entries-without-highlight-color
+  );
+  .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: Buttons.$secondary-button-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;
+        font-weight: $entries-without-highlight-font-weight;
+        color: $entries-without-highlight-color;
+
+        padding: 10px 20px;
+
+        .search-icon {
+          max-width: 12px;
+          max-height: 13px;
+          svg {
+            transform: scale(0.6) translate(-6.9px, -7.2px);
+            path {
+              fill: $search-icon-color;
+            }
+          }
+        }
+
+        .has-history-match {
+          color: $entries-with-highlight-toned-down-part-color;
+          font-weight: $entries-with-highlight-toned-down-part-font-weight;
+          .highlighted-part {
+            color: $entries-with-highlight-highlighted-part-color;
+            font-weight: $entries-with-highlight-highlighted-part-font-weight;
+          }
+        }
+
+        .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(5px, "row wrap");
+    }
+  }
+}