@depict-ai/react-ui 0.0.76 → 0.0.78

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

@@ -1,165 +0,0 @@
-@use "../../helpers/utils";
-@use "../../variables";
-@use "sass:map";
-
-/// Styling that ties together the different components that are common to both Category and Search pages. Mainly takes care of margins and paddings but also sets the styling for .cards which is in both PLPResults and SearchRecommendations.
-///
-/// Note that for the gaps not the exact values will always be used but often multiples for different places where it's appropriate.
-
-@mixin ProductListingPage() {
-  $spacing-to-filters: map.get(variables.get-gap("listing-page"), "spacing-to-filters");
-  $desktop-item-gap: map.get(variables.get-gap("listing-page"), "desktop-item-gap");
-  $mobile-item-gap: map.get(variables.get-gap("listing-page"), "mobile-item-gap");
-  .listing-page {
-    padding: $desktop-item-gap calc(#{$desktop-item-gap} / 2);
-    @include mobile_sizes() {
-      padding: $mobile-item-gap calc(#{$mobile-item-gap} / 2);
-    }
-
-    &,
-    & * {
-      box-sizing: border-box;
-    }
-
-    & > .filter-results-for-one-row,
-    & > .results-for {
-      margin-bottom: calc(#{$desktop-item-gap} / 2);
-      @include mobile_sizes() {
-        margin-bottom: calc(#{$mobile-item-gap} / 2);
-      }
-    }
-
-    & > .sort-and-filter-buttons {
-      margin-top: calc(#{$desktop-item-gap} / 2);
-      margin-bottom: calc(#{$desktop-item-gap} / 2);
-      @include mobile_sizes() {
-        margin-top: calc(#{$mobile-item-gap} / 2);
-        margin-bottom: calc(#{$mobile-item-gap} / 2);
-      }
-    }
-    .PLP-results {
-      margin-top: calc(#{$desktop-item-gap} / 2);
-      @include mobile_sizes() {
-        margin-top: calc(#{$mobile-item-gap} / 2);
-      }
-      display: flex;
-      & > {
-        .filters,
-        .sorting {
-          margin-left: $spacing-to-filters;
-        }
-      }
-    }
-    .cards {
-      // this is for all product lists, meaning PLPResults (category + search product lists) and SearchRecommendations
-      flex-wrap: wrap;
-      display: flex;
-      flex-direction: row;
-      flex-grow: 1;
-      overflow: hidden;
-      align-content: flex-start;
-    }
-  }
-}
-
-/// Styling that ties together the different components on the SearchPage. Mainly takes care of margins and paddings.
-///
-/// Note that for the gaps not the exact values will always be used but often multiples for different places where it's appropriate.
-///
-
-@mixin SearchPage() {
-  $spacing-to-filters: map.get(variables.get-gap("listing-page"), "spacing-to-filters");
-  $desktop-item-gap: map.get(variables.get-gap("listing-page"), "desktop-item-gap");
-  $mobile-item-gap: map.get(variables.get-gap("listing-page"), "mobile-item-gap");
-  $gap-to-recs-factor: map.get(map.get(variables.get-gap("listing-page"), "search"), "gap-to-recs-factor");
-  $spacing-above-search-field: map.get(
-    map.get(variables.get-gap("listing-page"), "search"),
-    "spacing-above-search-field"
-  );
-
-  .listing-page {
-    .search-field {
-      $max-width: variables.get-merged(variables.$search-modal-defaults, variables.$search-modal, "max-width");
-      width: min(100%, $max-width);
-      align-self: center;
-
-      @if $spacing-above-search-field {
-        margin-top: calc(#{$desktop-item-gap} * 2);
-      }
-      margin-bottom: $desktop-item-gap;
-      @include mobile_sizes() {
-        margin-bottom: $mobile-item-gap;
-        @if $spacing-above-search-field {
-          margin-top: calc(#{$mobile-item-gap});
-        }
-      }
-      ~ .category-suggestions .category-suggestion {
-        &:last-child {
-          margin-right: auto;
-        }
-        &:first-child {
-          margin-left: auto;
-        }
-      }
-    }
-    .category-suggestions {
-      margin-bottom: $desktop-item-gap;
-      @include mobile_sizes() {
-        margin-bottom: $mobile-item-gap;
-      }
-    }
-    .search-field {
-      // if there are no category suggestions we should have 2x the gap between where they should be and what's there, only for desktop tho
-      & + .filter-results-for-one-row,
-      & + .results-for {
-        @media (min-width: 652px) {
-          margin-top: $desktop-item-gap;
-        }
-      }
-    }
-    .search-recs {
-      // whole gap here so that we don't have to make the margin bottom of search-results conditional
-      margin-top: calc(#{$desktop-item-gap} * #{$gap-to-recs-factor});
-      // in between these there's the border, a visual line separating the results and recs
-      padding-top: calc(#{$desktop-item-gap} * #{$gap-to-recs-factor});
-      @include mobile_sizes() {
-        margin-top: calc(#{$mobile-item-gap} * #{$gap-to-recs-factor});
-        padding-top: calc(#{$mobile-item-gap} * #{$gap-to-recs-factor});
-      }
-    }
-    .PLP-results.nothing + .search-recs {
-      // if no results, bring us closer
-      margin-top: calc(#{$desktop-item-gap} * 1.5);
-      padding-top: calc(#{$desktop-item-gap} * 1.5);
-      @include mobile_sizes() {
-        margin-top: calc(#{$mobile-item-gap} * 1.5);
-        padding-top: calc(#{$mobile-item-gap} * 1.5);
-      }
-    }
-  }
-}
-
-/// Styling that ties together the different components on the CategoryPage. Mainly takes care of margins and paddings.
-///
-
-@mixin CategoryPage() {
-  $desktop-item-gap: map.get(variables.get-gap("listing-page"), "desktop-item-gap");
-  $mobile-item-gap: map.get(variables.get-gap("listing-page"), "mobile-item-gap");
-  .listing-page {
-    .quicklinks,
-    .crumbs {
-      margin-bottom: $desktop-item-gap;
-      @include mobile_sizes() {
-        margin-bottom: $mobile-item-gap;
-      }
-    }
-  }
-}
-
-/// Internal mixin that dictates when the vertical spaces should switch to the "mobile" versions
-
-@mixin mobile_sizes() {
-  @media (max-width: 651px) {
-    @content;
-  }
-}

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

@@ -1,28 +0,0 @@
-@use "../../variables";
-
-/// ScrollStatus shows the user how many items are left to scroll through, if they scroll at a speed that indicates that they are no longer looking at each product but rather just trying to see how many there are.
-///
-/// If you too think that blurring the background would look great here, please take a minute to upvote this chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1382360
-///
-/// @param {Number with size unit} $border-radius [variables.$border-radius * 5] - The border-radius of the scroll status.
-
-@mixin ScrollStatus() {
-  .scroll-status {
-    pointer-events: none;
-    position: sticky;
-    bottom: 10vh;
-    white-space: nowrap;
-    display: flex;
-    justify-content: center;
-    z-index: calc(#{variables.$base-z-index} + 4);
-    align-items: center;
-    opacity: 0;
-
-    .text {
-      background: rgba(variables.get-background-color("inverse", "hover"), 0.75);
-      color: variables.get-text-color("inverse", "default");
-      padding: 10px 20px;
-      border-radius: calc(#{variables.$border-radius} * 5);
-    }
-  }
-}

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

@@ -1,81 +0,0 @@
-@use "../../variables";
-@use "../../helpers/utils";
-@use "../../helpers/supports-hover";
-@use "Buttons";
-@use "ProductListingPage";
-@use "sass:map";
-
-/// Mixin that styles the SelectedFilters component, which is the component that shows the selected filters if both the sorting and filtering menus are currently hidden.
-
-@mixin SelectedFilters() {
-  .listing-page .selected-filters {
-    .inner {
-      // this is in here because it's an ExpandingContainer and the animation gets borked otherwise
-      $margin-on-desktop: map.get(
-        map.get(variables.get-gap("listing-page"), "above-and-below-selected-filters"),
-        "desktop"
-      );
-      $margin-on-mobile: map.get(
-        map.get(variables.get-gap("listing-page"), "above-and-below-selected-filters"),
-        "mobile"
-      );
-      margin-top: $margin-on-desktop;
-      margin-bottom: $margin-on-desktop;
-      display: flex;
-      align-items: center;
-
-      .title {
-        margin-right: 10px;
-      }
-
-      @include ProductListingPage.mobile_sizes() {
-        margin-top: $margin-on-mobile;
-        margin-bottom: $margin-on-mobile;
-      }
-
-      .title {
-        @media (max-width: 600px) {
-          display: none;
-        }
-        font-size: 1.1em;
-        text-transform: variables.$uppercase-text-transform;
-        color: variables.get-text-color("base", "default");
-      }
-
-      .depict-slider {
-        overflow: hidden;
-        width: unset;
-
-        .clear-filter {
-          border: 1px solid map.get(Buttons.get-primary-button-properties(), "background");
-
-          svg {
-            width: 12.64px;
-            height: 12.64px;
-          }
-        }
-
-        .clear-all-filters {
-          border: map.get(Buttons.get-secondary-button-properties(), "border");
-        }
-
-        .clear-filter,
-        .clear-all-filters {
-          flex: 0 0 auto;
-          box-sizing: border-box;
-          white-space: nowrap;
-          padding: 5px 10px;
-          display: flex;
-          @include utils.flex-gap(5px, "row nowrap");
-          align-items: center;
-          border-radius: variables.$border-radius;
-          font-size: 1em;
-          line-height: 1;
-          cursor: pointer;
-        }
-      }
-
-      @content;
-    }
-  }
-}

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

@@ -1,118 +0,0 @@
-// @use "../../../rendering/slider_button_positioning";
-@use "../../helpers/utils";
-@use "Buttons";
-@use "../../variables";
-@use "../../helpers/supports-hover";
-@use "sass:map";
-
-/// Mixin copy-pasted from @depict-ai/utilishared that helps with positioning slider buttons
-@mixin button_positioning {
-  .d-navbutton {
-    position: absolute;
-    z-index: 2;
-    top: 50%;
-    transform: translateY(-50%);
-    -webkit-transform: translateY(-50%);
-    touch-action: manipulation;
-    transition-duration: 0.2s;
-    padding-right: 1px;
-    cursor: pointer;
-    &.hidden {
-      cursor: default;
-      opacity: 0;
-      animation-name: depict_slider_button_unclickable;
-      animation-duration: 5s;
-      animation-fill-mode: forwards;
-    }
-    &.left {
-      transform: translateY(-50%) rotate(180deg);
-      left: -1px; // fix chrome rendering half a px of not the button
-    }
-    &.right {
-      right: -1px;
-    }
-    img {
-      width: 100%;
-      height: 100%;
-    }
-    @content;
-  }
-  @keyframes depict_slider_button_unclickable {
-    0% {
-      pointer-events: all;
-    }
-    100% {
-      pointer-events: none;
-      visibility: hidden; // make not keyboard focusable with tab
-    }
-  }
-}
-
-/// Styling for sliders used in the PLP.
-/// Most of the times SlidableItems is used for items laid out horizontally that do not fit the screen width.
-///
-/// Examples are the QuickLinks (used to navigate sideways or downwards in the category tree) and the SelectedFilters (if not all selected filters fit on the screen).
-@mixin SlidableItems() {
-  .depict-slider {
-    width: 100%;
-    position: relative;
-    .sliding {
-      height: 100%;
-      @include utils.flex-gap(10px, "row nowrap");
-      align-items: center;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: nowrap;
-      overflow-x: scroll;
-      /* Internet Explorer 10+; next 3 properties stolen from: https://stackoverflow.com/a/38994837*/
-      -ms-overflow-style: none;
-      /* Firefox */
-      scrollbar-width: none;
-      // Chrome and Safari
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-    // TODO: break out button button positioning related lib code into a package and import that here instead of duplicating the code
-    // @include slider_button_positioning.button_positioning {
-    @include button_positioning {
-      height: calc(100% + 2px);
-      padding-top: 0;
-      padding-left: 0;
-      padding-bottom: 0;
-      width: 26px;
-      background: linear-gradient(270deg, variables.$page-background-color 50%, transparent 105%);
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      border: none;
-
-      & > div {
-        display: flex;
-      }
-
-      @include supports-hover.supports-hover() {
-        &:hover {
-          svg {
-            transform: scale(1.2);
-          }
-        }
-      }
-      &:focus-visible {
-        svg {
-          transform: scale(1.5);
-          path {
-            filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
-          }
-        }
-      }
-      svg {
-        transition-duration: 150ms;
-      }
-
-      &:active {
-        opacity: 0.9;
-      }
-    }
-  }
-}

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

@@ -1,76 +0,0 @@
-@use "../../../variables";
-@use "../../../helpers/supports-hover";
-
-/// Styles the FloatingButtons. FloatingButtons are three buttons, one button to open sorting, one button to open filters and one button to scroll to the top that show up when scrolling upwards for a while on a mobile device not really close to the top of the page.
-
-@mixin FloatingButtons() {
-  .floating-buttons {
-    position: sticky;
-    bottom: variables.get-merged(variables.$floating-buttons-defaults, variables.$floating-buttons, "bottom-distance");
-    display: flex;
-    z-index: calc(#{variables.$base-z-index} + 4);
-    align-items: center;
-    opacity: 0;
-    transition-timing-function: ease-in-out;
-    transition-duration: 300ms;
-    $position: variables.get-merged(variables.$floating-buttons-defaults, variables.$floating-buttons, "position");
-    $side-distance: variables.get-merged(
-      variables.$floating-buttons-defaults,
-      variables.$floating-buttons,
-      "side-distance"
-    );
-
-    @if $position == "left" {
-      padding-left: $side-distance;
-      justify-content: flex-start;
-    } @else if $position == "right" {
-      padding-right: $side-distance;
-      justify-content: flex-end;
-    }
-    &:not(.show-them) {
-      pointer-events: none;
-    }
-    &.show-them {
-      opacity: 1;
-    }
-    .filter {
-      margin-right: 5px;
-    }
-
-    .sort {
-      margin-left: 5px;
-      margin-right: 5px;
-    }
-
-    .up {
-      margin-left: 5px;
-    }
-
-    .sort,
-    .filter,
-    .up {
-      background: variables.get-background-color("subtle", "default");
-      filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1)) drop-shadow(-2px -2px 4px rgba(255, 255, 255, 0.3));
-      border: 1px solid variables.get-border-color("base", "default");
-      border-radius: 20px;
-      padding: 10px;
-      @include supports-hover.supports-hover() {
-        &:hover {
-          background: variables.get-background-color("subtle", "hover");
-        }
-      }
-      &:focus {
-        outline: none;
-      }
-      &:focus-visible {
-        background: variables.get-background-color("subtle", "hover");
-      }
-      div {
-        display: flex;
-      }
-      svg path {
-        fill: variables.get-text-color("neutral", "default");
-      }
-    }
-  }
-}