@depict-ai/react-ui 2.1.11 → 2.1.13

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

@@ -1,82 +0,0 @@
-@use "../../variables";
-@use "../../helpers/utils";
-@use "../../helpers/supports-hover";
-@use "./Buttons";
-@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.
-/// @param {Number with size unit} $border-radius [variables.$border-radius] - A local override of the border-radius variable.
-/// @param {String} $title-color [variables.$brand-black] - The color of the text that says "Filters:" (the key of this string is `selected_filters_title_` in the locale files).
-/// @param {String} $filter-title-transform [uppercase] - text-transform for the aforementioned "Filters:" string
-/// @param {Number with size unit} $margin-on-desktop [0px] - Margin above/below SelectedFilters on desktop. This is set here because ExpandingContainer, our expanding component, gets confused when the margin isn't precisely on this element. Otherwise this value would be in ProductListingPage.scss.
-/// @param {Boolean} $set-border-on-crumbs [true] - Whether to set a border on the "crumbs" (a crumb is one selected filter).
-
-@mixin SelectedFilters(
-  $border-radius: variables.$border-radius,
-  $title-color: variables.$brand-black,
-  $filter-title-transform: uppercase,
-  $margin-on-desktop: 0px,
-  $set-border-on-crumbs: true
-) {
-  .listing-page .selected-filters {
-    .inner {
-      // this is in here because it's an ExpandingContainer and the animation gets borked otherwise
-      margin-top: 10px;
-      margin-bottom: 10px;
-      display: flex;
-      align-items: center;
-      .title {
-        margin-right: 10px;
-      }
-      @media (min-width: 652px) {
-        margin-top: $margin-on-desktop;
-        margin-bottom: $margin-on-desktop;
-      }
-
-      .title {
-        @media (max-width: 600px) {
-          display: none;
-        }
-        font-size: 1.1em;
-        text-transform: $filter-title-transform;
-        color: $title-color;
-      }
-
-      .depict-slider {
-        overflow: hidden;
-        width: unset;
-
-        .clear-filter {
-          @if $set-border-on-crumbs {
-            border: 1px solid map.get(Buttons.get-primary-button-properties(), "background");
-          }
-          svg {
-            width: 12.64px;
-            height: 12.64px;
-          }
-        }
-        .clear-all-filters {
-          @if $set-border-on-crumbs {
-            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: $border-radius;
-          font-size: 1em;
-          line-height: 1;
-          cursor: pointer;
-        }
-      }
-      @content;
-    }
-  }
-}

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

@@ -1,121 +0,0 @@
-// @use "../../../rendering/slider_button_positioning";
-@use "../../helpers/utils";
-@use "../../components/PLP/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).
-/// @param {Color} $fade-to [variables.$brand-lighter-grey] - The color the slider buttons fade to, set this to the background color behind the slider.
-/// @param {Color} @fade-from [transparent] - The color the slider buttons fade from, you probably want to leave this at transparent.
-@mixin SlidableItems($fade-to: variables.$brand-lighter-grey, $fade-from: rgba(238, 238, 240, 0)) {
-  // TODO: we could probably infer these colours (and maybe some more) if we add some global background color variable
-  .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, $fade-to 50%, $fade-from 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,84 +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.
-/// @param {Color} $button-background [variables.$brand-lighter-grey] - The background color of the buttons.
-/// @param {Color} $hovered-button-background [variables.$brand-lightest-grey] - The background color of the buttons when hovered.
-/// @param {Color} $button-border-color [variables.$brand-black] - The border color of the buttons.
-/// @param {Color} $icon-color [variables.$brand-dark-grey] - The color of the icons.
-/// @param {Number with unit} $bottom-distance [12px] - The distance from the bottom of the buttons to the bottom of the screen.
-/// @param {Number with unit} $side-distance [12px] - The distance from the `$position`-side of the buttons to the `$position`-side of the screen.
-/// @param {"left" | "right"} $position [left] - The side of the screen the buttons should be aligned to.
-
-@mixin FloatingButtons(
-  $button-background: variables.$brand-lighter-grey,
-  $hovered-button-background: variables.$brand-lightest-grey,
-  $button-border-color: variables.$brand-black,
-  $icon-color: variables.$brand-dark-grey,
-  $bottom-distance: 12px,
-  $side-distance: 12px,
-  $position: "left" // "left" or "right"
-) {
-  .floating-buttons {
-    position: sticky;
-    bottom: $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;
-    @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: $button-background;
-      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 $button-border-color;
-      border-radius: 20px;
-      padding: 10px;
-      @include supports-hover.supports-hover() {
-        &:hover {
-          background: $hovered-button-background;
-        }
-      }
-      &:focus {
-        outline: none;
-      }
-      &:focus-visible {
-        background: $hovered-button-background;
-      }
-      div {
-        display: flex;
-      }
-      svg path {
-        fill: $icon-color;
-      }
-    }
-  }
-}