@depict-ai/react-ui 0.0.10 → 0.0.12

package/dist/main.js

@@ -3,8 +3,8 @@ var $1pn1h$depictaireactsolidbridge = require("@depict-ai/react-solid-bridge");
 var $1pn1h$react = require("react");
 var $1pn1h$depictaiui = require("@depict-ai/ui");
 var $1pn1h$reactjsxruntime = require("react/jsx-runtime");
-var $1pn1h$depictaiutilishared = require("@depict-ai/utilishared");
 var $1pn1h$solidjs = require("solid-js");
+var $1pn1h$depictaiutilishared = require("@depict-ai/utilishared");
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
@@ -19,7 +19,6 @@ $parcel$export(module.exports, "DepictSearchHeader", () => $20bf907adee775ba$exp
 
 
 
-
 const $e589c49931886c97$export$8e769ad4338a911e = {
     search: null,
     header_alignment: null
@@ -38,6 +37,14 @@ function $b4d0d98857ed9934$export$5cae361ad82dce8b(value) {
     ]);
     return ref.current;
 }
+let $b4d0d98857ed9934$var$run_on_href_change;
+function $b4d0d98857ed9934$export$74f3924c5027fe1d(cb) {
+    $b4d0d98857ed9934$var$run_on_href_change = cb;
+}
+(async ()=>{
+    for await (const href of (0, $1pn1h$depictaiutilishared.href_change_ipns))$b4d0d98857ed9934$var$run_on_href_change?.(href);
+})();
+
 
 
 
@@ -116,20 +123,13 @@ const $7b6eabbde6829606$export$99ae278b8f3607a0 = (opts)=>{
 
 
 function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
-    const { children: children , merchant: merchant , market: market , search_page_path: search_page_path  } = props;
-    const previous_props = (0, $b4d0d98857ed9934$export$5cae361ad82dce8b)(props);
-    if (!(0, $e589c49931886c97$export$8e769ad4338a911e).search) // Todo: use search_page_path for navigation
+    const { children: children , search_page_path: search_page_path , ...assignable_options } = props;
+    const { search: search  } = (0, $e589c49931886c97$export$8e769ad4338a911e);
+    if (!search) // Todo: use search_page_path for navigation
     (0, $e589c49931886c97$export$8e769ad4338a911e).search = (0, $7b6eabbde6829606$export$99ae278b8f3607a0)({
-        merchant: merchant,
-        market: market
+        ...assignable_options
     });
-    else if (previous_props) {
-        const { prev_merchant: prev_merchant , prev_market: prev_market , search_page_path: search_page_path1  } = previous_props;
-    // Todo: here we can check if our search config changed and react to it.
-    // Do we need to know if it changed specifically, or could we just always set the values regardless if they changed or not?
-    // Should changing merchant log an error? Is it ever not a bug?
-    }
-    console.log("DepictProvider render", props, previous_props);
+    else Object.assign(search, assignable_options);
     return children;
 }
 
@@ -222,8 +222,13 @@ function $7c7f5a6b750dca70$var$DepictSearchPageContent(opts) {
         const solidBridge = (0, $1pn1h$reactjsxruntime.jsx)((0, $1pn1h$depictaireactsolidbridge.ReactToSolidBridge), {
             solidComponent: ()=>{
                 const [el, dispose] = (0, $1pn1h$solidjs.createRoot)((dispose)=>{
+                    (0, $b4d0d98857ed9934$export$74f3924c5027fe1d)((href)=>{
+                        // TODO: Will be user specified
+                        if (!new URL(href).pathname.startsWith("/search")) dispose();
+                    });
                     const el = (0, $1pn1h$depictaiui.SearchPage)({
                         depict_search: (0, $e589c49931886c97$export$8e769ad4338a911e).search,
+                        include_input_field: true,
                         cols_at_size: [
                             [
                                 4
@@ -248,7 +253,6 @@ function $7c7f5a6b750dca70$var$DepictSearchPageContent(opts) {
                     ];
                 });
                 (0, $1pn1h$solidjs.onCleanup)(dispose);
-                $7c7f5a6b750dca70$var$dispose_on_href_change(dispose);
                 return el;
             },
             key: Math.random()
@@ -266,10 +270,5 @@ function $7c7f5a6b750dca70$export$210723f5a54a7028(opts) {
         children: (0, $1pn1h$reactjsxruntime.jsx)($7c7f5a6b750dca70$var$DepictSearchPageContent, opts)
     });
 }
-async function $7c7f5a6b750dca70$var$dispose_on_href_change(dispose) {
-    const [exit_ipns, href_ipns] = (0, $1pn1h$depictaiutilishared.make_asyncIterable_exiter)((0, $1pn1h$depictaiutilishared.href_change_ipns));
-    (0, $1pn1h$solidjs.onCleanup)(exit_ipns);
-    for await (const href of href_ipns)if (!new URL(href).pathname.startsWith("/search")) dispose();
-}
 
 

package/dist/module.js

@@ -3,9 +3,8 @@ import {ReactToSolidBridge as $9xHCU$ReactToSolidBridge, ReactToSolidBridgeProvi
 import {useState as $9xHCU$useState, useEffect as $9xHCU$useEffect, ReactPortal as $9xHCU$ReactPortal, createElement as $9xHCU$createElement, useRef as $9xHCU$useRef} from "react";
 import {SearchPage as $9xHCU$SearchPage, DepictSearch as $9xHCU$DepictSearch, swedish_search_translation as $9xHCU$swedish_search_translation} from "@depict-ai/ui";
 import {jsx as $9xHCU$jsx} from "react/jsx-runtime";
-import {make_asyncIterable_exiter as $9xHCU$make_asyncIterable_exiter, href_change_ipns as $9xHCU$href_change_ipns, observer as $9xHCU$observer, history_replacer as $9xHCU$history_replacer, queueMacroTask as $9xHCU$queueMacroTask} from "@depict-ai/utilishared";
 import {onCleanup as $9xHCU$onCleanup, createRoot as $9xHCU$createRoot, createSignal as $9xHCU$createSignal, createMemo as $9xHCU$createMemo} from "solid-js";
-
+import {href_change_ipns as $9xHCU$href_change_ipns, observer as $9xHCU$observer, history_replacer as $9xHCU$history_replacer, queueMacroTask as $9xHCU$queueMacroTask} from "@depict-ai/utilishared";
 
 
 
@@ -30,6 +29,14 @@ function $c83ba9ab79386687$export$5cae361ad82dce8b(value) {
     ]);
     return ref.current;
 }
+let $c83ba9ab79386687$var$run_on_href_change;
+function $c83ba9ab79386687$export$74f3924c5027fe1d(cb) {
+    $c83ba9ab79386687$var$run_on_href_change = cb;
+}
+(async ()=>{
+    for await (const href of (0, $9xHCU$href_change_ipns))$c83ba9ab79386687$var$run_on_href_change?.(href);
+})();
+
 
 
 
@@ -108,20 +115,13 @@ const $cd2077d7481df27e$export$99ae278b8f3607a0 = (opts)=>{
 
 
 function $faf794495ff8b304$export$9fac37a9c21c2f3b(props) {
-    const { children: children , merchant: merchant , market: market , search_page_path: search_page_path  } = props;
-    const previous_props = (0, $c83ba9ab79386687$export$5cae361ad82dce8b)(props);
-    if (!(0, $9ce874af9a04465f$export$8e769ad4338a911e).search) // Todo: use search_page_path for navigation
+    const { children: children , search_page_path: search_page_path , ...assignable_options } = props;
+    const { search: search  } = (0, $9ce874af9a04465f$export$8e769ad4338a911e);
+    if (!search) // Todo: use search_page_path for navigation
     (0, $9ce874af9a04465f$export$8e769ad4338a911e).search = (0, $cd2077d7481df27e$export$99ae278b8f3607a0)({
-        merchant: merchant,
-        market: market
+        ...assignable_options
     });
-    else if (previous_props) {
-        const { prev_merchant: prev_merchant , prev_market: prev_market , search_page_path: search_page_path1  } = previous_props;
-    // Todo: here we can check if our search config changed and react to it.
-    // Do we need to know if it changed specifically, or could we just always set the values regardless if they changed or not?
-    // Should changing merchant log an error? Is it ever not a bug?
-    }
-    console.log("DepictProvider render", props, previous_props);
+    else Object.assign(search, assignable_options);
     return children;
 }
 
@@ -214,8 +214,13 @@ function $a854d2a2f2059f57$var$DepictSearchPageContent(opts) {
         const solidBridge = (0, $9xHCU$jsx)((0, $9xHCU$ReactToSolidBridge), {
             solidComponent: ()=>{
                 const [el, dispose] = (0, $9xHCU$createRoot)((dispose)=>{
+                    (0, $c83ba9ab79386687$export$74f3924c5027fe1d)((href)=>{
+                        // TODO: Will be user specified
+                        if (!new URL(href).pathname.startsWith("/search")) dispose();
+                    });
                     const el = (0, $9xHCU$SearchPage)({
                         depict_search: (0, $9ce874af9a04465f$export$8e769ad4338a911e).search,
+                        include_input_field: true,
                         cols_at_size: [
                             [
                                 4
@@ -240,7 +245,6 @@ function $a854d2a2f2059f57$var$DepictSearchPageContent(opts) {
                     ];
                 });
                 (0, $9xHCU$onCleanup)(dispose);
-                $a854d2a2f2059f57$var$dispose_on_href_change(dispose);
                 return el;
             },
             key: Math.random()
@@ -258,11 +262,6 @@ function $a854d2a2f2059f57$export$210723f5a54a7028(opts) {
         children: (0, $9xHCU$jsx)($a854d2a2f2059f57$var$DepictSearchPageContent, opts)
     });
 }
-async function $a854d2a2f2059f57$var$dispose_on_href_change(dispose) {
-    const [exit_ipns, href_ipns] = (0, $9xHCU$make_asyncIterable_exiter)((0, $9xHCU$href_change_ipns));
-    (0, $9xHCU$onCleanup)(exit_ipns);
-    for await (const href of href_ipns)if (!new URL(href).pathname.startsWith("/search")) dispose();
-}
 
 
 export {$a854d2a2f2059f57$export$210723f5a54a7028 as DepictSearchPage, $faf794495ff8b304$export$9fac37a9c21c2f3b as DepictProvider, $f41a371216eff80b$export$a7f6cffb6b8ba11c as openModal, $f41a371216eff80b$export$cbcd1ecdb41b1d0a as DepictSearchHeader};

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

@@ -0,0 +1,124 @@
+@use "../../variables";
+@use "../../helpers/supports-hover";
+@use "../../helpers/utils";
+@use "sass:color";
+
+$primary-button-background: variables.$brand-black;
+$primary-button-color: #fff;
+$primary-button-border: 1px solid transparent; // so that the page doesn't jump when there's half a border when switching between having sort and filters open (the buttons switch between pimary and secondary)
+$primary-button-border-radius: variables.$border-radius;
+$primary-button-hover-filter: drop-shadow(-2px -2px 4px rgba(255, 255, 255, 0.25))
+  drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.15));
+$primary-button-active-filter: drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.25))
+  drop-shadow(-2px -2px 4px rgba(0, 0, 0, 0.15));
+$primary-button-focus-visible-filter: drop-shadow(2px 2px 4px rgba(65, 143, 195, 0.8))
+  drop-shadow(-2px -2px 4px rgba(65, 143, 195, 0.8));
+
+$secondary-button-background: variables.$brand-lightest-grey;
+$secondary-button-color: variables.$brand-dark-grey;
+$secondary-button-border: 1px solid variables.$brand-black;
+$secondary-button-border-radius: variables.$border-radius;
+$secondary-button-hover-filter: drop-shadow(-2px -2px 4px rgba(255, 255, 255, 0.25))
+  drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.15));
+$secondary-button-active-filter: drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.25))
+  drop-shadow(-2px -2px 4px rgba(0, 0, 0, 0.15));
+$secondary-button-focus-visible-filter: drop-shadow(-2px -2px 4px rgba(65, 143, 195, 0.8))
+  drop-shadow(2px 2px 4px rgba(65, 143, 195, 0.8));
+
+@mixin PrimaryButton(
+  $background: $primary-button-background,
+  $color: $primary-button-color,
+  $border: $primary-button-border,
+  $border-radius: $primary-button-border-radius,
+  $hover-filter: $primary-button-hover-filter,
+  $active-filter: $primary-button-active-filter,
+  $focus-visible-filter: $primary-button-focus-visible-filter
+) {
+  // not using .primary since that's 100% going to conflict with existing declarations on sites
+  button.major {
+    @include Button(
+      $background,
+      $color,
+      $border,
+      $border-radius,
+      $hover-filter,
+      $active-filter,
+      $focus-visible-filter
+    ) {
+      @content;
+    }
+  }
+}
+
+@mixin SecondaryButton(
+  $background: $secondary-button-background,
+  $color: $secondary-button-color,
+  $border: $secondary-button-border,
+  $border-radius: $secondary-button-border-radius,
+  $hover-filter: $secondary-button-hover-filter,
+  $active-filter: $secondary-button-active-filter,
+  $focus-visible-filter: $secondary-button-focus-visible-filter
+) {
+  // not using .secondary since that's 100% going to conflict with existing declarations on sites
+  button.minor {
+    @include Button(
+      $background,
+      $color,
+      $border,
+      $border-radius,
+      $hover-filter,
+      $active-filter,
+      $focus-visible-filter
+    ) {
+      @content;
+    }
+  }
+}
+
+@mixin Button(
+  $background,
+  $color,
+  $border,
+  $border-radius,
+  $hover-filter,
+  $active-filter,
+  $focus-visible-filter,
+  $padding: 10px 20px
+) {
+  background: $background;
+  color: $color;
+  border: $border;
+  border-radius: $border-radius;
+  @if $padding {
+    padding: $padding;
+  }
+  display: flex;
+  white-space: pre-wrap; // can't have spaces otherwise
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: filter 150ms ease-in-out, background 100ms ease-in-out;
+
+  svg path {
+    fill: $color; // treat icons the same as text
+  }
+
+  @include supports-hover.supports-hover() {
+    &:hover {
+      filter: $hover-filter;
+      @include utils.highlight-background($normal-background: $background);
+    }
+  }
+  &:active {
+    filter: $active-filter;
+    @include utils.highlight-background($normal-background: $background, $darken-factor: 10%, $lighten-factor: 20%);
+  }
+  &:focus {
+    outline-style: none;
+  }
+  &:focus-visible {
+    filter: $focus-visible-filter;
+    @include utils.highlight-background($normal-background: $background);
+  }
+  @content;
+}

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

@@ -0,0 +1,31 @@
+@mixin MorphingSign($color: #fff) {
+  .morphing-sign {
+    /* https://stackoverflow.com/a/38136283 */
+    border: 0;
+    font-size: 1.5em;
+    position: relative;
+    width: 1em;
+    height: 1em;
+
+    span {
+      position: absolute;
+      background: $color;
+      border-radius: 2px;
+    }
+
+    /* Create the "+" shape by positioning the spans absolutely */
+    span:first-child {
+      top: 25%;
+      bottom: 25%;
+      width: 10%;
+      left: 45%;
+    }
+
+    span:last-child {
+      left: 25%;
+      right: 25%;
+      height: 10%;
+      top: 45%;
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+@use "../../variables";
+@use "../../helpers/utils";
+
+@mixin PLPResults() {
+  .listing-page {
+    .no-results {
+      background: white;
+      padding: 40px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-direction: column;
+      flex-grow: 2;
+      .hint {
+        text-decoration: underline;
+        cursor: pointer;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,142 @@
+@use "../../helpers/utils";
+
+@mixin ProductListingPage($spacing-to-filters: 12px, $desktop-item-gap: 20px, $mobile-item-gap: 16px) {
+  .listing-page {
+    display: flex;
+    flex-direction: column;
+    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;
+    }
+  }
+}
+
+@mixin SearchPage(
+  $spacing-to-filters: 12px,
+  $desktop-item-gap: 20px,
+  $mobile-item-gap: 16px,
+  $spacing-above-search-field: true,
+  $query-input-width: 800px,
+  $gap-to-recs-factor: 3
+) {
+  .listing-page {
+    .query_input {
+      width: min(100%, $query-input-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;
+      }
+    }
+    .query_input {
+      // 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);
+      }
+    }
+  }
+}
+
+@mixin CategoryPage($spacing-to-filters: 12px, $desktop-item-gap: 20px, $mobile-item-gap: 16px) {
+  .listing-page {
+    .quicklinks,
+    .crumbs {
+      margin-bottom: $desktop-item-gap;
+      @include mobile_sizes() {
+        margin-bottom: $mobile-item-gap;
+      }
+    }
+  }
+}
+
+@mixin mobile_sizes() {
+  @media (max-width: 651px) {
+    @content;
+  }
+}

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

@@ -0,0 +1,24 @@
+@use "../../variables";
+
+@mixin ScrollStatus(
+  $scroll-status-background: rgba(100, 100, 100, 0.9),
+  $border-radius: calc(variables.$border-radius * 5)
+) {
+  .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: $scroll-status-background;
+      color: white;
+      padding: 10px 20px;
+      border-radius: $border-radius;
+    }
+  }
+}

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

@@ -0,0 +1,74 @@
+@use "../../variables";
+@use "../../helpers/utils";
+@use "../../helpers/supports-hover";
+@use "./Buttons";
+
+@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 Buttons.$primary-button-background;
+          }
+          svg {
+            width: 12.64px;
+            height: 12.64px;
+          }
+        }
+        .clear-all-filters {
+          @if $set-border-on-crumbs {
+            border: Buttons.$secondary-button-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

@@ -0,0 +1,99 @@
+// @use "../../../rendering/slider_button_positioning";
+@use "../../helpers/utils";
+@use "../../variables";
+@use "../../helpers/supports-hover";
+
+@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
+    }
+  }
+}
+
+@mixin SlidableItems($fade-to: variables.$brand-lighter-grey, $fade-from: rgba(238, 238, 240, 0)) {
+  .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;
+
+      @include supports-hover.supports-hover() {
+        &:hover {
+          svg {
+            transform: scale(1.2);
+          }
+        }
+      }
+      svg {
+        transition-duration: 150ms;
+      }
+
+      &:active {
+        opacity: 0.9;
+      }
+    }
+  }
+}