@depict-ai/react-ui 2.0.2 → 2.0.3

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

@@ -1,160 +0,0 @@
-@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

@@ -1,148 +0,0 @@
-@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

@@ -1,54 +0,0 @@
-@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

@@ -1,45 +0,0 @@
-@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

@@ -1,23 +0,0 @@
-@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

@@ -1,28 +0,0 @@
-@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

@@ -1,71 +0,0 @@
-@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

@@ -1,23 +0,0 @@
-// 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

@@ -1,117 +0,0 @@
-@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");
-    }
-  }
-}