@depict-ai/react-ui 0.0.55 → 0.0.57

package/dist/styles/helpers/custom_input.scss

@@ -1,7 +1,9 @@
 @use "sass:string";
 @use "sass:color";
 @use "supports-hover";
+@use "sass:map";
 @use "./utils";
+@use "../components/PLP/Buttons";
 
 // https://selleo.com/til/posts/rc5qli22jp-pass-hex-color-to-fill-svg-in-background-url-scss
 @function escape-url-hex-color($hex_color) {
@@ -28,8 +30,12 @@
   $hovered-checkbox-checked-background-color,
   $hovered-checkbox-border,
   $hovered-radio-border,
-  $width-and-height
+  $input-row-height-goal,
+  $largest-border-on-custom-input
 ) {
+  $width-and-height: calc(
+    #{$input-row-height-goal} - calc(#{$largest-border-on-custom-input} * 2)
+  ); // border is on both sides
   /* Customize the label (the container) */
   .input-row {
     position: relative;
@@ -62,7 +68,17 @@
         padding: calc(#{$width-and-height} / 2);
         background-color: $checkbox-background-color;
         border-radius: $checkbox-border-radius;
-        border: $checkbox-border;
+        &:not(.color) {
+          border: $checkbox-border;
+        }
+        &.color {
+          padding: calc(#{$input-row-height-goal} / 2); // doesn't have border so needs more size
+          &.outline {
+            $border-width: 0.5px;
+            padding: calc(calc(#{$input-row-height-goal} - calc(#{$border-width} * 2)) / 2);
+            border: $border-width solid #868689;
+          }
+        }
       }
       /* When the checkbox is checked, add a blue background */
       &:checked ~ .custom-indicator {
@@ -83,9 +99,22 @@
           width: 12px;
           height: 10px;
         }
+        &.color:after {
+          // Force this to be white for color checkboxes
+          background-image: url('data:image/svg+xml;utf8,<svg fill="#{escape-url-hex-color(#fff)}" width="12" height="10" viewBox="0 0 12 10" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z" /></svg>');
+        }
+        &.color.check-dark:after {
+          background-image: url('data:image/svg+xml;utf8,<svg fill="#{escape-url-hex-color(#000)}" width="12" height="10" viewBox="0 0 12 10" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z" /></svg>');
+        }
+        &.color.check-multi:after {
+          background-image: url('data:image/svg+xml;utf8,<svg fill="#{escape-url-hex-color(#fff)}" width="12" height="10" viewBox="0 0 12 10" xmlns="http://www.w3.org/2000/svg"><path style="stroke:black;stroke-width:1px" d="M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z" /></svg>');
+        }
       }
       &:focus-visible ~ .custom-indicator {
         background-color: $hovered-checkbox-bg;
+        &.color {
+          filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
+        }
       }
       &:checked:focus-visible ~ .custom-indicator {
         background-color: $hovered-checkbox-checked-background-color;
@@ -95,10 +124,12 @@
       &:hover input[type="checkbox"] {
         & ~ .custom-indicator {
           background-color: $hovered-checkbox-bg;
-          border: $hovered-checkbox-border;
-          $hovered-border-width: get_border_width($hovered-checkbox-border);
-          $border-width: get_border_width($checkbox-border);
-          padding: calc(calc(#{$width-and-height} / 2) - calc(#{$hovered-border-width} - #{$border-width}));
+          &:not(.color) {
+            border: $hovered-checkbox-border;
+            $hovered-border-width: get_border_width($hovered-checkbox-border);
+            $border-width: get_border_width($checkbox-border);
+            padding: calc(calc(#{$width-and-height} / 2) - calc(#{$hovered-border-width} - #{$border-width}));
+          }
         }
         &:checked ~ .custom-indicator {
           background-color: $hovered-checkbox-checked-background-color;
@@ -149,6 +180,7 @@
         padding: calc(calc(#{$width-and-height} / 2) - calc(#{$hovered-border-width} - #{$border-width}));
       }
     }
+
     @content;
   }
 }

package/dist/styles/helpers/supports-hover.scss

@@ -1,3 +1,5 @@
+/// Wraps @content in a media query that targets devices that support `:hover` in a non-fallback way.
+
 @mixin supports-hover {
   @media not all and (hover: none) {
     @content;

package/dist/styles/helpers/utils.scss

@@ -1,6 +1,9 @@
 @use "sass:math";
 @use "sass:color";
 
+/// This mixin is used for the SortAndFilterModal and the SearchModal to color the backdrop behind the modal
+/// @param {Color} $background [rgba(0, 0, 0, 0.4)] - The background color of the backdrop, keep in mind it should be a transparent color
+/// @param {Number} $z-index - The z-index of the backdrop
 @mixin modal-backdrop($background: rgba(0, 0, 0, 0.4), $z-index) {
   position: fixed;
   background: $background;
@@ -12,6 +15,11 @@
   touch-action: none;
 }
 
+/// This mixin sets the background property to the provided color but darkens it by the provided amounts if it is brighter or darker than 50%
+/// The purpose is to really easily create i.e. hover effects
+/// @param {Color} $normal-background - The color to darken or lighten
+/// @param {Percentage} $darken-factor [10%] - The amount to darken the color by
+/// @param {Percentage} $lighten-factor [10%] - The amount to lighten the color by
 @mixin highlight-background($normal-background, $darken-factor: 10%, $lighten-factor: 10%) {
   @if color.lightness($normal-background) >= 50% {
     background: color.adjust($normal-background, $lightness: -$darken-factor);
@@ -20,8 +28,8 @@
   }
 }
 
-// can't use flex gap due to poor compatibility
 // source of below: https://gist.github.com/mashirozx/c0691c3b8ed3f1f63722883649d41c18
+/// We can't (or couldn't) use flex gap due to poor compatibility, this mixin is used instead of it and generates margins. We recommend reading the source code and applying thinking to the margin situation that will result.
 @mixin _flex-gap($gap, $row: true, $use_nth_child: true) {
   $margin: math.div($gap, 2);
   $transform: -$margin;

package/dist/styles/variables.scss

@@ -15,6 +15,9 @@ $base-z-index: 5000;
 /// The z-index of the search page
 $search-page-base-z-index: 1;
 /// The border radius to use. This is used in many places and not often exactly this value. Sometimes a multiple is used and if it's 0 then everything will be square
+///
+/// Does re-assigning this variable with, for example, `PLP.$border-radius: 0` or `variables.$border-radius: 0` give an error in your IDE?
+/// Please upvote the Jetbrains issue (and maybe also comment why this is an issue for you) to get it fixed in WebStorm: https://youtrack.jetbrains.com/issue/WEB-46500
 $border-radius: 4px;
 
 /// Makes the PLP.all-components mixin use WhiteSortAndFilter instead of SortAndFilter
@@ -33,9 +36,8 @@ $g-instant-card: (
 );
 
 /// Configure the styling - right now only works for three variables.
-/// We'll probably change how to customise styling to using maps instead in the future.
+/// This is subject to change.
 ///
-/// Sorry for the confusion
 /// @param {String} $instant-card-sales-price-color [null]
 ///   Determines the color of the sales price in the Instant Card component
 /// @param {Boolean} $instant-card-show-price [null]

package/dist-server/index.d.ts

@@ -1,11 +1,21 @@
-export const version = "0.0.55";
+type OpenModal = () => void;
+interface UseSearchModalReturn {
+    open: OpenModal;
+}
+export const version = "0.0.57";
 export function DepictProvider(props: any): any;
 export function DepictSearchField(): any;
 export function DepictSearchPage(): any;
 export function DepictCategoryPage(): any;
-export function DepictSearchHeader(): import("react").DetailedReactHTMLElement<{
+export function BreadCrumbs(): any;
+export function QuickLinks(): any;
+export function DepictAligner(): import("react").DetailedReactHTMLElement<{
     className: string;
+    style: {
+        height: string;
+    };
 }, HTMLElement>;
 export function ImagePlaceHolder(): any;
 export function TextPlaceholder(): any;
 export function openModal(): void;
+export function useDepictSearchModal(): UseSearchModalReturn;

package/dist-server/main.js

@@ -9,14 +9,17 @@ $parcel$export(module.exports, "DepictProvider", () => $41e7e5d85b5e0d49$export$
 $parcel$export(module.exports, "DepictSearchField", () => $41e7e5d85b5e0d49$export$4c0fa313cf50c4ad);
 $parcel$export(module.exports, "DepictSearchPage", () => $41e7e5d85b5e0d49$export$210723f5a54a7028);
 $parcel$export(module.exports, "DepictCategoryPage", () => $41e7e5d85b5e0d49$export$d87c61cecb2edf0d);
-$parcel$export(module.exports, "DepictSearchHeader", () => $41e7e5d85b5e0d49$export$cbcd1ecdb41b1d0a);
+$parcel$export(module.exports, "BreadCrumbs", () => $41e7e5d85b5e0d49$export$5646050d516e06bc);
+$parcel$export(module.exports, "QuickLinks", () => $41e7e5d85b5e0d49$export$466cdc317043f6cb);
+$parcel$export(module.exports, "DepictAligner", () => $41e7e5d85b5e0d49$export$3f4580d6398c5027);
 $parcel$export(module.exports, "ImagePlaceHolder", () => $41e7e5d85b5e0d49$export$ecf150517ad2aa0);
 $parcel$export(module.exports, "TextPlaceholder", () => $41e7e5d85b5e0d49$export$89c6019e4baa40b1);
 $parcel$export(module.exports, "openModal", () => $41e7e5d85b5e0d49$export$a7f6cffb6b8ba11c);
+$parcel$export(module.exports, "useDepictSearchModal", () => $41e7e5d85b5e0d49$export$cc1e9aaf280afdcb);
 $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fbfd8236492);
 
 
-const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.55";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.57";
 
 
 function $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b(props) {
@@ -37,9 +40,22 @@ function $41e7e5d85b5e0d49$export$d87c61cecb2edf0d() {
         children: []
     });
 }
-function $41e7e5d85b5e0d49$export$cbcd1ecdb41b1d0a() {
+function $41e7e5d85b5e0d49$export$5646050d516e06bc() {
+    return (0, $5efvh$reactjsxruntime.jsx)("div", {
+        children: []
+    });
+}
+function $41e7e5d85b5e0d49$export$466cdc317043f6cb() {
+    return (0, $5efvh$reactjsxruntime.jsx)("div", {
+        children: []
+    });
+}
+function $41e7e5d85b5e0d49$export$3f4580d6398c5027() {
     return (0, $5efvh$react.createElement)("div", {
-        className: "depict aligner"
+        className: "depict aligner",
+        style: {
+            height: "100%"
+        }
     });
 }
 function $41e7e5d85b5e0d49$export$ecf150517ad2aa0() {
@@ -53,5 +69,10 @@ function $41e7e5d85b5e0d49$export$89c6019e4baa40b1() {
     });
 }
 function $41e7e5d85b5e0d49$export$a7f6cffb6b8ba11c() {}
+function $41e7e5d85b5e0d49$export$cc1e9aaf280afdcb() {
+    return {
+        open: ()=>{}
+    };
+}
 
 

package/dist-server/module.js

@@ -3,7 +3,7 @@ import {jsx as $1RlIW$jsx} from "react/jsx-runtime";
 
 
 
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.55";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.57";
 
 
 function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {
@@ -24,9 +24,22 @@ function $2b1fdeb83610500f$export$d87c61cecb2edf0d() {
         children: []
     });
 }
-function $2b1fdeb83610500f$export$cbcd1ecdb41b1d0a() {
+function $2b1fdeb83610500f$export$5646050d516e06bc() {
+    return (0, $1RlIW$jsx)("div", {
+        children: []
+    });
+}
+function $2b1fdeb83610500f$export$466cdc317043f6cb() {
+    return (0, $1RlIW$jsx)("div", {
+        children: []
+    });
+}
+function $2b1fdeb83610500f$export$3f4580d6398c5027() {
     return (0, $1RlIW$createElement)("div", {
-        className: "depict aligner"
+        className: "depict aligner",
+        style: {
+            height: "100%"
+        }
     });
 }
 function $2b1fdeb83610500f$export$ecf150517ad2aa0() {
@@ -40,6 +53,11 @@ function $2b1fdeb83610500f$export$89c6019e4baa40b1() {
     });
 }
 function $2b1fdeb83610500f$export$a7f6cffb6b8ba11c() {}
+function $2b1fdeb83610500f$export$cc1e9aaf280afdcb() {
+    return {
+        open: ()=>{}
+    };
+}
 
 
-export {$2b1fdeb83610500f$export$9fac37a9c21c2f3b as DepictProvider, $2b1fdeb83610500f$export$4c0fa313cf50c4ad as DepictSearchField, $2b1fdeb83610500f$export$210723f5a54a7028 as DepictSearchPage, $2b1fdeb83610500f$export$d87c61cecb2edf0d as DepictCategoryPage, $2b1fdeb83610500f$export$cbcd1ecdb41b1d0a as DepictSearchHeader, $2b1fdeb83610500f$export$ecf150517ad2aa0 as ImagePlaceHolder, $2b1fdeb83610500f$export$89c6019e4baa40b1 as TextPlaceholder, $2b1fdeb83610500f$export$a7f6cffb6b8ba11c as openModal, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version};
+export {$2b1fdeb83610500f$export$9fac37a9c21c2f3b as DepictProvider, $2b1fdeb83610500f$export$4c0fa313cf50c4ad as DepictSearchField, $2b1fdeb83610500f$export$210723f5a54a7028 as DepictSearchPage, $2b1fdeb83610500f$export$d87c61cecb2edf0d as DepictCategoryPage, $2b1fdeb83610500f$export$5646050d516e06bc as BreadCrumbs, $2b1fdeb83610500f$export$466cdc317043f6cb as QuickLinks, $2b1fdeb83610500f$export$3f4580d6398c5027 as DepictAligner, $2b1fdeb83610500f$export$ecf150517ad2aa0 as ImagePlaceHolder, $2b1fdeb83610500f$export$89c6019e4baa40b1 as TextPlaceholder, $2b1fdeb83610500f$export$a7f6cffb6b8ba11c as openModal, $2b1fdeb83610500f$export$cc1e9aaf280afdcb as useDepictSearchModal, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "0.0.55",
+  "version": "0.0.57",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "main": "dist/main.js",
@@ -90,8 +90,8 @@
     "/locales"
   ],
   "dependencies": {
-    "@depict-ai/ui": "^0.0.32",
-    "@depict-ai/utilishared": "^0.0.30",
+    "@depict-ai/ui": "^0.0.34",
+    "@depict-ai/utilishared": "^0.0.32",
     "solid-js": "^1.6.2"
   },
   "peerDependencies": {
@@ -109,17 +109,20 @@
     "@parcel/babel-preset-env": "latest",
     "@parcel/resolver-default": "^2.8.0",
     "@parcel/transformer-sass": "latest",
+    "@types/jest": "^29.2.6",
     "@types/node": "^18.11.11",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "babel-preset-solid": "latest",
     "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
     "jest-haste-map": "^29.3.1",
     "jest-resolve": "^29.3.1",
     "next": "^13.1.1",
     "parcel": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router": "^6.6.1"
+    "react-router": "^6.6.1",
+    "ts-jest": "^29.0.5"
   }
 }