@depict-ai/react-ui 0.0.56 → 0.0.59

package/dist/module.js

@@ -1,8 +1,8 @@
 import {dlog as $TZSbU$dlog, href_change_ipns as $TZSbU$href_change_ipns, catchify as $TZSbU$catchify, observer as $TZSbU$observer, history_replacer as $TZSbU$history_replacer, queueMacroTask as $TZSbU$queueMacroTask, ContainedPlaceholderImage as $TZSbU$ContainedPlaceholderImage, Placeholder as $TZSbU$Placeholder} from "@depict-ai/utilishared";
-import {add_to_version_info as $TZSbU$add_to_version_info, SearchField as $TZSbU$SearchField, DepictSearch as $TZSbU$DepictSearch, DepictCategory as $TZSbU$DepictCategory, get_search_query_updating_blocked_signal as $TZSbU$get_search_query_updating_blocked_signal, SearchPage as $TZSbU$SearchPage, CategoryPage as $TZSbU$CategoryPage, embedded_num_products as $TZSbU$embedded_num_products} from "@depict-ai/ui";
-import {untrack as $TZSbU$untrack, createComponent as $TZSbU$createComponent, Show as $TZSbU$Show, onCleanup as $TZSbU$onCleanup, createSignal as $TZSbU$createSignal, createComputed as $TZSbU$createComputed} from "solid-js";
+import {add_to_version_info as $TZSbU$add_to_version_info, CategoryTitle as $43099132aad1ceb6$re_export$CategoryTitle, embedded_num_products as $43099132aad1ceb6$re_export$EmbeddedNumProducts, SearchField as $TZSbU$SearchField, DepictSearch as $TZSbU$DepictSearch, DepictCategory as $TZSbU$DepictCategory, get_search_query_updating_blocked_signal as $TZSbU$get_search_query_updating_blocked_signal, SearchPage as $TZSbU$SearchPage, CategoryPage as $TZSbU$CategoryPage, BreadCrumbs as $TZSbU$BreadCrumbs, QuickLinks as $TZSbU$QuickLinks, styles_to_valid_css_string as $TZSbU$styles_to_valid_css_string, align_field as $TZSbU$align_field} from "@depict-ai/ui";
+import {untrack as $TZSbU$untrack, createComponent as $TZSbU$createComponent, Show as $TZSbU$Show, onCleanup as $TZSbU$onCleanup, createSignal as $TZSbU$createSignal, createRoot as $TZSbU$createRoot, createComputed as $TZSbU$createComputed} from "solid-js";
 import {render as $TZSbU$render} from "solid-js/web";
-import {useState as $TZSbU$useState, useRef as $TZSbU$useRef, useEffect as $TZSbU$useEffect, createElement as $TZSbU$createElement, Fragment as $TZSbU$Fragment} from "react";
+import {useState as $TZSbU$useState, useRef as $TZSbU$useRef, useEffect as $TZSbU$useEffect, createElement as $TZSbU$createElement, Fragment as $TZSbU$Fragment, forwardRef as $TZSbU$forwardRef} from "react";
 import {jsx as $TZSbU$jsx} from "react/jsx-runtime";
 import {createPortal as $TZSbU$createPortal} from "react-dom";
 import {en as $TZSbU$en} from "@depict-ai/ui/locales";
@@ -15,7 +15,7 @@ import {en as $TZSbU$en} from "@depict-ai/ui/locales";
 const $42858f023ef23dab$export$8e769ad4338a911e = {
     search: null,
     category: null,
-    header_alignment: null,
+    category_path: null,
     search_page_path_: (0, $TZSbU$createSignal)(),
     required_state_set_: (0, $TZSbU$createSignal)(false)
 };
@@ -33,8 +33,11 @@ function $c83ba9ab79386687$export$74f3924c5027fe1d(cb) {
 (async ()=>{
     for await (const href of (0, $TZSbU$href_change_ipns))$c83ba9ab79386687$var$run_on_href_change?.(href);
 })();
-const $c83ba9ab79386687$export$6cb4d3a5c1ac9b43 = (url)=>url.pathname == (0, $TZSbU$untrack)((0, $42858f023ef23dab$export$8e769ad4338a911e).search_page_path_[0]); // might have changed therefore get it from globalState
-function $c83ba9ab79386687$export$f6e64e17bd69eeef(solid_component, props, wrapper_type = "div", wrapper_style = {}, render_cb) {
+const $c83ba9ab79386687$export$775e6b3892b5ad52 = (url)=>url.pathname == (0, $TZSbU$untrack)((0, $42858f023ef23dab$export$8e769ad4338a911e).search_page_path_[0]); // might have changed therefore get it from globalState
+const $c83ba9ab79386687$export$92a8f8b3c630fa0d = (url)=>{
+    return $c83ba9ab79386687$export$775e6b3892b5ad52(url) || url.pathname === (0, $42858f023ef23dab$export$8e769ad4338a911e).category_path;
+};
+function $c83ba9ab79386687$export$f6e64e17bd69eeef(solid_component, props, wrapper_type = "div", wrapper_style = {}, react_render_handler) {
     const [portals, set_portals] = (0, $TZSbU$useState)([]);
     const wrapper_element_ref = (0, $TZSbU$useRef)();
     (0, $TZSbU$useEffect)(()=>{
@@ -42,17 +45,17 @@ function $c83ba9ab79386687$export$f6e64e17bd69eeef(solid_component, props, wrapp
         const dispose = (0, $TZSbU$render)(()=>solid_component(props, set_portals), wrapper_element);
         return dispose;
     }, []);
-    render_cb?.(props);
+    react_render_handler?.(props);
     return (0, $TZSbU$createElement)(wrapper_type, {
         ref: wrapper_element_ref,
         style: wrapper_style
     }, portals);
 }
-function $c83ba9ab79386687$export$e5139bbbb9a05035(component) {
+function $c83ba9ab79386687$export$e5139bbbb9a05035(component, is_set = (0, $42858f023ef23dab$export$8e769ad4338a911e).required_state_set_[0]) {
     return (...args)=>{
         return (0, $TZSbU$createComponent)((0, $TZSbU$Show), {
             get when () {
-                return (0, $42858f023ef23dab$export$8e769ad4338a911e).required_state_set_[0]();
+                return is_set();
             },
             get children () {
                 return component(...args);
@@ -96,7 +99,7 @@ async function $c83ba9ab79386687$export$79c79419c1ef0081({ display: display , in
 
 
 
-function $54b0d21b77e719c4$export$d2c02478244f91f7() {
+function $02e2452814b6e7d6$export$4c0fa313cf50c4ad() {
     return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)(()=>(0, $TZSbU$SearchField)({
             depict_search: (0, $42858f023ef23dab$export$8e769ad4338a911e).search
         })), {});
@@ -160,9 +163,8 @@ function $8071251ee4e9ffa1$var$removeLotsOfPadding() {
 
 
 
-
 const $7216ca4c8308a0f9$export$599d4515591ef232 = (href)=>{
-    const shallow = (0, $c83ba9ab79386687$export$6cb4d3a5c1ac9b43)(location);
+    const shallow = (0, $c83ba9ab79386687$export$92a8f8b3c630fa0d)(location);
     window.next.router.push(href, undefined, {
         shallow: shallow,
         scroll: true
@@ -170,7 +172,8 @@ const $7216ca4c8308a0f9$export$599d4515591ef232 = (href)=>{
 };
 
 
-function $faf794495ff8b304$export$9fac37a9c21c2f3b(props) {
+
+function $5376eb2a386cd90d$export$9fac37a9c21c2f3b(props) {
     const { children: children , navigateFunction: navigateFunction , market: market , merchant: merchant , locale: locale  } = props;
     const usedLocale = locale ?? (0, $TZSbU$en);
     const { searchPagePath: searchPagePath , urlParamName: urlParamName , enableCategorySuggestions: enableCategorySuggestions  } = props.search ?? {};
@@ -186,8 +189,7 @@ function $faf794495ff8b304$export$9fac37a9c21c2f3b(props) {
             if (navigateFunction) navigateFunction(new_href);
             else (0, $7216ca4c8308a0f9$export$599d4515591ef232)(new_href);
         } : undefined;
-        if (!search) {
-            (0, $42858f023ef23dab$export$8e769ad4338a911e).search = new (0, $TZSbU$DepictSearch)({
+        if (!search) (0, $TZSbU$createRoot)(()=>(0, $42858f023ef23dab$export$8e769ad4338a911e).search = new (0, $TZSbU$DepictSearch)({
                 search_query_url_param_name: urlParamName,
                 market: market,
                 merchant: merchant,
@@ -196,24 +198,24 @@ function $faf794495ff8b304$export$9fac37a9c21c2f3b(props) {
                 localization: usedLocale,
                 url_transformer: (url)=>url.pathname = (0, $TZSbU$untrack)(get_search_page_path),
                 on_navigation: on_navigation
-            });
-            (0, $8071251ee4e9ffa1$export$6453cbc34515a94d)((0, $c83ba9ab79386687$export$6cb4d3a5c1ac9b43));
-        } else {
+            }));
+        else {
             search.market = market;
             search.merchant = merchant;
             search.localization = usedLocale;
         }
-        if (!category) (0, $42858f023ef23dab$export$8e769ad4338a911e).category = new (0, $TZSbU$DepictCategory)({
-            market: market,
-            merchant: merchant,
-            localization: usedLocale,
-            on_navigation: on_navigation
-        });
+        if (!category) (0, $TZSbU$createRoot)(()=>(0, $42858f023ef23dab$export$8e769ad4338a911e).category = new (0, $TZSbU$DepictCategory)({
+                market: market,
+                merchant: merchant,
+                localization: usedLocale,
+                on_navigation: on_navigation
+            }));
         else {
             category.market = market;
             category.merchant = merchant;
             category.localization = usedLocale;
         }
+        (0, $8071251ee4e9ffa1$export$6453cbc34515a94d)((0, $c83ba9ab79386687$export$92a8f8b3c630fa0d));
         (0, $42858f023ef23dab$export$8e769ad4338a911e).required_state_set_[1](true);
     } catch (e) {
         // Make sure to not break the users app if we throw
@@ -225,42 +227,33 @@ function $faf794495ff8b304$export$9fac37a9c21c2f3b(props) {
 }
 
 
-// PoC maybe-component
-// Idea is to always give a nice "modal input in header" look with no more config than adding this component to the page header to where it can absolute-size
-// and cover the entire height of the header. Then we know where to put the modal input top and bottom, and the left and right we just center.
-
 
-function $f41a371216eff80b$export$cbcd1ecdb41b1d0a() {
-    return (0, $TZSbU$createElement)("div", {
+const $4db0e2f013fc5124$export$3f4580d6398c5027 = /*#__PURE__*/ (0, $TZSbU$forwardRef)((_, ref)=>{
+    return /*#__PURE__*/ (0, $TZSbU$createElement)("div", {
         className: "depict aligner",
-        ref: (e)=>(0, $42858f023ef23dab$export$8e769ad4338a911e).header_alignment = e
+        style: {
+            height: "100%"
+        },
+        ref: ref
     });
-}
-let $f41a371216eff80b$var$sheet;
-function $f41a371216eff80b$export$a7f6cffb6b8ba11c() {
-    if (!(0, $42858f023ef23dab$export$8e769ad4338a911e).search) {
-        console.error("No active search in the app!");
-        return;
-    }
-    (0, $42858f023ef23dab$export$8e769ad4338a911e).search.modal_open = true;
-}
+});
 
 
 
 
 
 
-function $9f8d5ef3c016c493$export$210723f5a54a7028(props) {
-    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)($9f8d5ef3c016c493$var$SolidSearchPage), props);
+function $4a678f0c87b12e78$export$210723f5a54a7028(props) {
+    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)($4a678f0c87b12e78$var$SolidSearchPage), props);
 }
-function $9f8d5ef3c016c493$var$SolidSearchPage(props, set_portals) {
+function $4a678f0c87b12e78$var$SolidSearchPage(props, set_portals) {
     const depict_search = (0, $42858f023ef23dab$export$8e769ad4338a911e).search;
     if (!depict_search) throw Error("No depict_search instance when rendering SearchPage. Did you forget to wrap your app in DepictProvider?");
     const search_query_updating_blocked_signal = (0, $TZSbU$get_search_query_updating_blocked_signal)(depict_search);
     if (!search_query_updating_blocked_signal) throw Error("No search_query_updating_blocked_signal when rendering SearchPage");
     const [, set_search_query_updating_blocked_signal] = search_query_updating_blocked_signal;
     const update_updating_blocked_signal = ()=>{
-        set_search_query_updating_blocked_signal(!(0, $c83ba9ab79386687$export$6cb4d3a5c1ac9b43)(location));
+        set_search_query_updating_blocked_signal(!(0, $c83ba9ab79386687$export$775e6b3892b5ad52)(location));
     };
     // react is really slow with disposing components, we want to avoid a flash of another search query when you click on a product and navigate away
     (0, $c83ba9ab79386687$export$74f3924c5027fe1d)(update_updating_blocked_signal); // if we navigate, re-check
@@ -303,51 +296,87 @@ function $9f8d5ef3c016c493$var$SolidSearchPage(props, set_portals) {
 
 
 
-let $f2cd62bf5f14ad67$var$render_cb;
-function $f2cd62bf5f14ad67$export$d87c61cecb2edf0d(props) {
-    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)($f2cd62bf5f14ad67$var$SolidCategoryPage), props, "div", {}, (props)=>$f2cd62bf5f14ad67$var$render_cb?.(props));
+
+let $48d7f568740a317d$var$render_cb;
+function $48d7f568740a317d$export$d87c61cecb2edf0d(props) {
+    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)($48d7f568740a317d$var$SolidCategoryPage), props, "div", {}, (props)=>$48d7f568740a317d$var$render_cb?.(props));
 }
-function $f2cd62bf5f14ad67$var$SolidCategoryPage(props, set_portals) {
+function $48d7f568740a317d$var$SolidCategoryPage(props, set_portals) {
     const depict_category = (0, $42858f023ef23dab$export$8e769ad4338a911e).category;
     if (!depict_category) throw Error("No depict_category instance when rendering SearchPage. Did you forget to wrap your app in DepictProvider?");
-    $f2cd62bf5f14ad67$var$render_cb = (props)=>depict_category.category_id = props.categoryId;
-    $f2cd62bf5f14ad67$var$render_cb(props);
+    const [category_state_set, set_category_state_set] = (0, $TZSbU$createSignal)(false);
+    $48d7f568740a317d$var$render_cb = (props)=>{
+        depict_category.category_id = props.categoryId;
+        (0, $42858f023ef23dab$export$8e769ad4338a911e).category_path = location.pathname;
+        if (props.categoryId) set_category_state_set(true);
+    };
+    $48d7f568740a317d$var$render_cb(props);
     const component_portals = new Set();
-    return (0, $TZSbU$CategoryPage)({
-        depict_category: depict_category,
-        cols_at_size: props.columnsAtSize ?? [
-            [
-                4
+    const category = ()=>(0, $TZSbU$CategoryPage)({
+            depict_category: depict_category,
+            cols_at_size: props.columnsAtSize ?? [
+                [
+                    4
+                ],
+                [
+                    3,
+                    1024
+                ],
+                [
+                    2,
+                    901
+                ]
             ],
-            [
-                3,
-                1024
-            ],
-            [
-                2,
-                901
-            ]
-        ],
-        grid_spacing: props.gridSpacing ?? "2%",
-        // Todo: Do we need this?
-        get_product_id: ()=>"",
-        category_title: (0, $TZSbU$embedded_num_products),
-        show_breadcrumbs: props.showBreadcrumbs || false,
-        show_quicklinks: props.showQuicklinks || false,
-        product_card_template: (display, info)=>(0, $c83ba9ab79386687$export$79c79419c1ef0081)({
-                display: display,
-                info: info,
-                react_template: props.productCard,
-                component_portals: component_portals,
-                set_portals: set_portals
-            })
+            grid_spacing: props.gridSpacing ?? "2%",
+            get_product_id: ()=>"",
+            category_title: props.categoryTitlePlugin || (0, $43099132aad1ceb6$re_export$CategoryTitle),
+            show_breadcrumbs: props.showBreadcrumbs === undefined ? true : props.showBreadcrumbs,
+            show_quicklinks: props.showQuicklinks === undefined ? true : props.showQuicklinks,
+            product_card_template: (display, info)=>(0, $c83ba9ab79386687$export$79c79419c1ef0081)({
+                    display: display,
+                    info: info,
+                    react_template: props.productCard,
+                    component_portals: component_portals,
+                    set_portals: set_portals
+                })
+        });
+    return (0, $c83ba9ab79386687$export$e5139bbbb9a05035)(category, category_state_set);
+}
+
+
+
+
+
+function $f866f7ed9f751af4$export$5646050d516e06bc() {
+    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)($f866f7ed9f751af4$var$vanilla_breadcrumbs), {});
+}
+function $f866f7ed9f751af4$var$vanilla_breadcrumbs() {
+    const depict_category = (0, $42858f023ef23dab$export$8e769ad4338a911e).category;
+    if (!depict_category) throw Error("No depict_category instance when rendering BreadCrumbs. Did you forget to wrap your app in DepictProvider?");
+    return (0, $TZSbU$BreadCrumbs)({
+        depict_category: depict_category
+    });
+}
+
+
+
+
+
+function $b68a14248b7ef667$export$466cdc317043f6cb() {
+    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)($b68a14248b7ef667$var$vanilla_quick_links), {});
+}
+function $b68a14248b7ef667$var$vanilla_quick_links() {
+    const depict_category = (0, $42858f023ef23dab$export$8e769ad4338a911e).category;
+    if (!depict_category) throw Error("No depict_category instance when rendering QuickLinks. Did you forget to wrap your app in DepictProvider?");
+    return (0, $TZSbU$QuickLinks)({
+        depict_category: depict_category
     });
 }
 
 
 
 
-const $c95f83f01e99fc18$export$3f37af283f8fb843 = ({ aspectRatio: aspectRatio  })=>{
+const $f446a84f85ba06f6$export$3f37af283f8fb843 = ({ aspectRatio: aspectRatio  })=>{
     return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)(()=>(0, $TZSbU$ContainedPlaceholderImage)({
             aspect_ratio: aspectRatio
         }), {}, "div", {
@@ -358,7 +387,7 @@ const $c95f83f01e99fc18$export$3f37af283f8fb843 = ({ aspectRatio: aspectRatio  }
 
 
 
-const $8aa3ab31237c8dc9$export$89c6019e4baa40b1 = ({ width: width , height: height  })=>{
+const $cbd250061abf11cb$export$89c6019e4baa40b1 = ({ width: width , height: height  })=>{
     return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)(()=>(0, $TZSbU$Placeholder)({
             width: width,
             height: height
@@ -368,13 +397,81 @@ const $8aa3ab31237c8dc9$export$89c6019e4baa40b1 = ({ width: width , height: heig
 };
 
 
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.56";
+
+
+
+
+
+
+const $5e26376d86621891$export$d69d8daa20eae175 = (createOpenModalParams)=>{
+    const { globalState: globalState , location: location , alignerRef: alignerRef  } = createOpenModalParams;
+    const openModal = ()=>{
+        const headerAligner = alignerRef?.current;
+        if (!globalState.search) throw new Error("No active search in the app!");
+        if (!headerAligner && location === "aligned") throw new Error("No active search header aligner on the page!");
+        const alignment_height = headerAligner?.clientHeight;
+        if (location !== "aligned" || isNaN(alignment_height)) {
+            // Open centered modal
+            globalState.search.modal_open = true;
+            return;
+        }
+        const style_element = document.createElement("style");
+        document.head.append(style_element);
+        const resize_observer = new ResizeObserver((0, $TZSbU$catchify)(()=>{
+            const styles = (0, $TZSbU$styles_to_valid_css_string)({
+                ".depict.plp .depict-search-modal .query-input": {
+                    "height": `${headerAligner?.clientHeight}px`
+                }
+            });
+            style_element.replaceChildren(styles);
+        }));
+        resize_observer.observe(headerAligner);
+        let dispose_aligner;
+        /**
+     * Setting position to fixed is important to make the modal work with align_field.
+     */ const style_props_ = (0, $TZSbU$createSignal)({
+            position: "fixed"
+        });
+        (0, $TZSbU$createRoot)((dispose)=>{
+            dispose_aligner = ()=>{
+                resize_observer.disconnect();
+                style_element.remove();
+                dispose();
+            };
+            (0, $TZSbU$align_field)(style_props_, headerAligner, undefined, false, "top");
+        });
+        globalState.search.modal_open = [
+            {
+                style_props_: style_props_
+            },
+            dispose_aligner
+        ];
+    };
+    return openModal;
+};
+
+
+function $cfa72c75e6cf6901$export$cc1e9aaf280afdcb(params) {
+    const open = (0, $5e26376d86621891$export$d69d8daa20eae175)({
+        globalState: $42858f023ef23dab$export$8e769ad4338a911e,
+        ...params
+    });
+    return {
+        open: open
+    };
+}
+
+
+
+
+
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.59";
 
 
 
 
 const $a92aa2beb560b8af$export$804fac5697cfbe35 = (router)=>(href)=>{
-        const shallow = (0, $c83ba9ab79386687$export$6cb4d3a5c1ac9b43)(location);
+        const shallow = (0, $c83ba9ab79386687$export$92a8f8b3c630fa0d)(location);
         router.push(href, undefined, {
             shallow: shallow,
             scroll: true
@@ -410,4 +507,4 @@ const $43099132aad1ceb6$var$package_name = "@depict-ai/react-ui";
 });
 
 
-export {$54b0d21b77e719c4$export$d2c02478244f91f7 as DepictSearchField, $faf794495ff8b304$export$9fac37a9c21c2f3b as DepictProvider, $f41a371216eff80b$export$a7f6cffb6b8ba11c as openModal, $f41a371216eff80b$export$cbcd1ecdb41b1d0a as DepictSearchHeader, $9f8d5ef3c016c493$export$210723f5a54a7028 as DepictSearchPage, $f2cd62bf5f14ad67$export$d87c61cecb2edf0d as DepictCategoryPage, $c95f83f01e99fc18$export$3f37af283f8fb843 as ImagePlaceholder, $8aa3ab31237c8dc9$export$89c6019e4baa40b1 as TextPlaceholder, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version, $97603d19204ec48d$export$b8a61e5c71402559 as Navigation};
+export {$b68a14248b7ef667$export$466cdc317043f6cb as QuickLinks, $f866f7ed9f751af4$export$5646050d516e06bc as BreadCrumbs, $4db0e2f013fc5124$export$3f4580d6398c5027 as DepictAligner, $5376eb2a386cd90d$export$9fac37a9c21c2f3b as DepictProvider, $48d7f568740a317d$export$d87c61cecb2edf0d as DepictCategoryPage, $4a678f0c87b12e78$export$210723f5a54a7028 as DepictSearchPage, $02e2452814b6e7d6$export$4c0fa313cf50c4ad as DepictSearchField, $f446a84f85ba06f6$export$3f37af283f8fb843 as ImagePlaceholder, $cbd250061abf11cb$export$89c6019e4baa40b1 as TextPlaceholder, $cfa72c75e6cf6901$export$cc1e9aaf280afdcb as useDepictSearchModal, $43099132aad1ceb6$re_export$CategoryTitle as CategoryTitle, $43099132aad1ceb6$re_export$EmbeddedNumProducts as EmbeddedNumProducts, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version, $97603d19204ec48d$export$b8a61e5c71402559 as Navigation};

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

@@ -25,7 +25,7 @@ $secondary-button-overrides: ();
   @return map.merge($primary-button-properties, $primary-button-overrides);
 }
 
-/// Used to get the current properties of the primary button. (`Buttons.$primary-button-overrides` merged into the default properties.) This is so that parts of the button styling can be re-used in other mixins in the state they were in as the mixins get called.
+/// Used to get the current properties of the secondary button. (`Buttons.$secondary-button-overrides` merged into the default properties.) This is so that parts of the button styling can be re-used in other mixins in the state they were in as the mixins get called.
 /// @example
 ///  filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
 @function get-secondary-button-properties() {
@@ -46,7 +46,7 @@ $secondary-button-overrides: ();
 ///
 /// *Please only provide options to this mixin if you want to create styling for just a specific button.*
 ///
-/// This mixin and the SecondaryButton mixin are specialties that are trying out a way of styling that we'll probably switch to in the future where you configure the styling of different components using maps instead of calling mixins yourself with different properties, as that will reduce boilerplate. The reason we had to change these already is that the values defined here are also used in other mixins and they can't be accessed if they are only provided as arguments in mixin calls.
+/// This mixin and the SecondaryButton mixin are currently specialties in how they get customised using maps. Everything that isn't customised using maps is subject to change in the future.
 ////
 /// *For generally changing how the buttons look, override the $primary-button-overrides map with a custom map containing the properties you want to change.*
 /// See the example below.
@@ -91,7 +91,7 @@ $secondary-button-overrides: ();
 ///
 /// *Please only provide options to this mixin if you want to create styling for just a specific button.*
 ///
-/// This mixin and the SecondaryButton mixin are specialties that are trying out a way of styling that we'll probably switch to in the future where you configure the styling of different components using maps instead of calling mixins yourself with different properties, as that will reduce boilerplate. The reason we had to change these already is that the values defined here are also used in other mixins and they can't be accessed if they are only provided as arguments in mixin calls.
+/// This mixin and the SecondaryButton mixin are currently specialties in how they get customised using maps. Everything that isn't customised using maps is subject to change in the future.
 ////
 /// *For generally changing how the buttons look, override the $secondary-button-overrides map with a custom map containing the properties you want to change.*
 /// See the example below.

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

@@ -2,10 +2,9 @@
   .morphing-sign {
     /* https://stackoverflow.com/a/38136283 */
     border: 0;
-    font-size: 1.5em;
     position: relative;
-    width: 1em;
-    height: 1em;
+    width: 1.5em;
+    height: 1.5em;
 
     span {
       position: absolute;

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

@@ -2,7 +2,7 @@
 
 /// 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.
 ///
-/// Making the background slightly frosted is something I'd love to do, but there's a bug in chrome that it doesn't work. I'd appreciate if you starred my bug report so it maybe gets fixed one day: https://bugs.chromium.org/p/chromium/issues/detail?id=1382360
+/// 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 {Color} $scroll-status-background [rgba(100, 100, 100, 0.9)] - The background color of the scroll status. I recommend setting a slightly transparent color.
 /// @param {Number with size unit} $border-radius [variables.$border-radius * 5] - The border-radius of the scroll status.

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

@@ -49,7 +49,7 @@
 }
 
 /// Styling for sliders used in the PLP.
-/// Most of the times slider is used for items laid out horizontally that do not fit the screen width.
+/// 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.

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

@@ -9,8 +9,7 @@
 @use "sass:map";
 
 /// Mixin that styles the sorting and filtering menus.
-/// We probably want to refactor this quite soon so sorry for not writing descriptions
-/// You'll have to look at the code to see what the params do - I hope the names are somewhat descriptive.
+/// The way this is configured is soon going to be subject to change, therefore the parameters are not argumented.
 /// @param {Color} $mobile-top-level-collapse-color [variables.$brand-black] -
 /// @param {Color} $mobile-top-level-collapse-background [#fff] -
 /// @param {Color} $custom-input-checked-background [#fff] -
@@ -20,10 +19,10 @@
 /// @param {Color} $checkbox-checked-background-color [variables.$brand-black] -
 /// @param {Color} $checkbox-checkmark-color [#fff] -
 /// @param {Number with size unit} $checkbox-border-radius [if(variables.$border-radius == 0, 0, if(variables.$border-radius == 0px, 0, 2px))] -
-/// @param {Border} $checkbox-border [1px solid variables.$brand-black] -
+/// @param {Border} $checkbox-border [1px solid variables.$brand-dark-grey] -
 /// @param {Number with size unit} $checkbox-top-offset [0px] -
 /// @param {Number with size unit} $checkbox-left-offset [0px] -
-/// @param {Border} $radio-border [1px solid variables.$brand-black] -
+/// @param {Border} $radio-border [1px solid variables.$brand-dark-grey] -
 /// @param {Color} $radio-background-color [#fff] -
 /// @param {Color} $radio-selected-dot-color [variables.$brand-black] -
 /// @param {Number with size unit} $radio-selected-dot-size [14px] -
@@ -76,10 +75,10 @@
   $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-border: 1px solid variables.$brand-dark-grey,
   $checkbox-top-offset: 0px,
   $checkbox-left-offset: 0px,
-  $radio-border: 1px solid variables.$brand-black,
+  $radio-border: 1px solid variables.$brand-dark-grey,
   $radio-background-color: #fff,
   $radio-selected-dot-color: variables.$brand-black,
   $radio-selected-dot-size: 14px,
@@ -121,7 +120,8 @@
   $sort-and-filter-modal-section-title-font-weight: false,
   $sort-and-filter-modal-section-expanded-title-font-weight: $sort-and-filter-modal-section-title-font-weight
 ) {
-  $input-row-height-goal: 20px;
+  $input-row-height-goal: max(21px, 1em); // if text gets bigger we have to get bigger too to not cut off the text
+  // it was meant to be 20px but there was a bug so I'm setting it to 21px now so it doesn't change
   $count-distance-to-right: 30px;
   $largest-border-on-custom-input: max(
     custom_input.get_border_width($checkbox-border),
@@ -209,7 +209,7 @@
       align-items: center;
       transition: opacity 250ms ease-in-out;
       font-size: 12px;
-      z-index: calc(variables.$search-page-base-z-index + 1);
+      z-index: calc(#{variables.$search-page-base-z-index} + 1);
     }
     .open-filters-button-container {
       position: relative;
@@ -249,7 +249,8 @@
       $hovered-checkbox-checked-background-color,
       $hovered-checkbox-border,
       $hovered-radio-border,
-      $width-and-height: calc(#{$input-row-height-goal} - #{$largest-border-on-custom-input})
+      $input-row-height-goal,
+      $largest-border-on-custom-input
     );
   }
   .filters {
@@ -276,9 +277,7 @@
         }
         .text {
           //line-height: 1.8; /** Fix for ÅÄÖ getting cut-off **/
-          line-height: calc(
-            #{$input-row-height-goal} + #{$largest-border-on-custom-input}
-          ); // Sorry ÅÄÖ, hope you survive this
+          line-height: $input-row-height-goal; // Sorry ÅÄÖ, hope you survive this
           display: -webkit-box;
           text-overflow: ellipsis;
           white-space: pre-line;
@@ -581,7 +580,7 @@
                 }
                 & > .summary {
                   justify-content: flex-end;
-                  $morphing-sign-width: calc(#{$input-row-height-goal} + #{$largest-border-on-custom-input});
+                  $morphing-sign-width: #{$input-row-height-goal};
                   .count {
                     margin-right: calc(#{$count-distance-to-right} - #{$morphing-sign-width});
                   }
@@ -742,6 +741,7 @@
           }
         }
       }
+      @include CheckboxColor();
     }
   }
   .sorting {
@@ -770,17 +770,31 @@
 }
 
 @mixin default_morphing_sign_in_expandable {
-  .morphing-sign span {
-    background: #333333;
+  .morphing-sign {
+    span {
+      background: #333333;
 
-    &:first-child {
-      width: 5%;
-      left: 47.5%;
+      &:first-child {
+        width: 5%;
+        left: 47.5%;
+      }
+
+      &:last-child {
+        height: 5%;
+        top: 47.5%;
+      }
     }
+  }
+}
+
+@mixin CheckboxColor() {
+  .checkbox-color {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
 
-    &:last-child {
-      height: 5%;
-      top: 47.5%;
+    .input-row {
+      width: calc(50% - 10px);
     }
   }
 }

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

@@ -1,9 +1,7 @@
 @use "../../../variables";
 @use "../../../helpers/utils";
 
-/*
-*  Mobile modal - taking arguments from SortAndFilter mixin
-*/
+/// Mobile modal - taking arguments from SortAndFilter mixin so see SortAndFilter docs for more info
 @mixin SortAndFilterModal(
   $mobile-top-level-collapse-color,
   $mobile-top-level-collapse-background,
@@ -39,7 +37,7 @@
   }
 
   .filter-sort-modal {
-    z-index: calc(variables.$base-z-index + 2);
+    z-index: calc(#{variables.$base-z-index} + 2);
     position: fixed;
     top: 0;
     left: 30px;

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

@@ -21,10 +21,10 @@
   $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-border: 1px solid variables.$brand-dark-grey,
   $checkbox-top-offset: 0px,
   $checkbox-left-offset: 0px,
-  $radio-border: 1px solid variables.$brand-black,
+  $radio-border: 1px solid variables.$brand-dark-grey,
   $radio-background-color: #fff,
   $radio-selected-dot-color: variables.$brand-black,
   $radio-selected-dot-size: 14px,

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

@@ -28,8 +28,6 @@
 @forward "../../variables";
 
 /// Load all PLP mixins with default values. PLP encompasses both Search and Category page, so you will always need to include the mixins that this includes somehow. 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