@sonic-equipment/ui 0.0.20 → 0.0.21

package/dist/intl/translation-id.d.ts

@@ -1 +1 @@
-export type TranslationId = 'Chosen filters' | 'Clear filters' | 'Excl. VAT' | 'Incl. VAT' | 'Show all' | 'Show filters' | 'Show less' | 'Sort' | 'articles' | 'article';
+export type TranslationId = 'Chosen filters' | 'Clear filters' | 'Excl. VAT' | 'Incl. VAT' | 'Show' | 'Show all' | 'Show filters' | 'Show less' | 'Sort' | 'articles' | 'article' | 'of';

package/dist/product-listing/product-listing.d.ts

@@ -1,4 +1,3 @@
-import { ComponentType } from 'react';
 export interface Filters {
     color: {
         options: {
@@ -25,13 +24,8 @@ export type ProductListingProps = {
     isLoading?: boolean;
     onFilterChange: (filters: ActiveFilters) => void;
     onSortChange: (sort: SortKey) => void;
-    productCard: ComponentType;
-    products: {
-        id: string;
-        title: string;
-    }[];
     sort: SortKey;
     total: number;
 };
-export declare function ProductListing({ activeFilters, filters, isLoading, onFilterChange, onSortChange, productCard: ProductCard, products, }: ProductListingProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductListing({ isLoading }: ProductListingProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/product-listing/product-listing.stories.d.ts

@@ -1,16 +1,21 @@
+import { ComponentProps } from 'react';
 import { StoryObj } from '@storybook/react';
 import { ProductListing } from './product-listing';
 declare const meta: {
     args: {
         onFilterChange: import("@vitest/spy").Mock<[filters: import("./product-listing").ActiveFilters], void>;
         onSortChange: import("@vitest/spy").Mock<[sort: "new" | "popular" | "price_asc" | "price_desc" | "recommended"], void>;
+        online: false;
     };
     component: typeof ProductListing;
     tags: string[];
     title: string;
 };
 export default meta;
-type Story = StoryObj<typeof ProductListing>;
+type StoryProps = ComponentProps<typeof ProductListing> & {
+    online: boolean;
+};
+type Story = StoryObj<StoryProps>;
 export declare const Default: Story;
 export declare const Loading: Story;
 export declare const WithActiveFilters: Story;

package/dist/shared/hooks/{use-device.d.ts → use-breakpoint.d.ts}

@@ -1,4 +1,4 @@
-export declare const useDevice: () => {
+export declare const useBreakpoint: () => {
     isDesktop: boolean;
     isMobile: boolean;
     isTablet: boolean;

package/dist/shared/hooks/use-debounce-callback.d.ts

@@ -0,0 +1 @@
+export declare function useDebouncedCallback<T extends (...args: any[]) => any>(func: T, delay: number): (...args: Parameters<T>) => void;

package/dist/shared/providers/cart-provider.d.ts

@@ -0,0 +1,33 @@
+import { Cart, CartLine } from 'shared/types/cart';
+interface Props {
+    addToCart: (args: {
+        productId: string;
+        quantity: number;
+    }) => void;
+    currentCart: Cart;
+    isLoaded: boolean;
+    isLoading: boolean;
+    loadCurrentCart: VoidFunction;
+    removeCartLine: (args: {
+        cartLineId: string;
+    }) => void;
+    updateCartLine: (cartLine: CartLine) => void;
+}
+export declare function CartProvider(props: Props): null;
+export declare function useCart(): Props;
+export declare function useProductCartLine(productId: string): {
+    addToCart: (args: {
+        productId: string;
+        quantity: number;
+    }) => void;
+    cartLine: CartLine | undefined;
+    currentCart: Cart;
+    isLoaded: boolean;
+    isLoading: boolean;
+    loadCurrentCart: VoidFunction;
+    removeCartLine: (args: {
+        cartLineId: string;
+    }) => void;
+    updateCartLine: (cartLine: CartLine) => void;
+};
+export {};

package/dist/shared/providers/global-state-provider.d.ts

@@ -0,0 +1,23 @@
+import { MutableRefObject, ReactElement, ReactNode } from 'react';
+import { EventEmitter } from 'shared/utils/event-emitter';
+declare class State<T> extends EventEmitter<T | undefined> {
+    private _state;
+    constructor(state?: T);
+    get value(): T | undefined;
+    set value(newState: T | undefined);
+}
+declare class GlobalState {
+    private states;
+    constructor(states: MutableRefObject<Record<string | symbol, State<any>>>);
+    get<T>(key: string | symbol): State<T>;
+    get<T>(key: string | symbol, initialState: T | undefined): State<T>;
+    set<T>(key: string | symbol, state: State<T>): void;
+}
+export declare const GlobalStateProviderContext: React.Context<GlobalState>;
+interface GlobalStateProviderProps {
+    children: ReactNode;
+}
+export declare function GlobalStateProvider({ children, }: GlobalStateProviderProps): ReactElement | null;
+export declare function useGlobalState<T>(key: string | symbol): [T | undefined, (value: T) => void];
+export declare function useGlobalState<T>(key: string | symbol, initialState: T): [T, (value: T) => void];
+export {};

package/dist/shared/types/cart.d.ts

@@ -0,0 +1,8 @@
+export interface CartLine {
+    id: string;
+    productId: string;
+    qtyOrdered: number;
+}
+export interface Cart {
+    cartLines: CartLine[];
+}

package/dist/shared/utils/event-emitter.d.ts

@@ -0,0 +1,9 @@
+type EventCallback<T> = (data: T) => void;
+export declare class EventEmitter<T> {
+    private listeners;
+    constructor();
+    addEventListener(event: string, listener: EventCallback<T>): void;
+    removeEventListener(event: string, listener: EventCallback<T>): void;
+    trigger(event: string, data: T): void;
+}
+export {};

package/dist/styles.css

@@ -269,6 +269,7 @@
   min-height: 40px;
   padding: 0 var(--space-20);
   border-radius: var(--border-radius-20);
+  font-size: var(--font-size-14);
 }
 
 .button-module-GVTEW.button-module-GKHQc {
@@ -499,6 +500,11 @@
   cursor: pointer;
 }
 
+  .icon-button-module-4PDK-[data-disabled] {
+    cursor: default;
+    opacity: 0.4;
+  }
+
 /*********************************************************
  *
  *  Sizes
@@ -759,6 +765,7 @@
     aspect-ratio: 1 / 1;
     margin-inline: auto;
     place-items: center;
+    transition: width ease 0.2s;
   }
 
   .product-card-module-pLaiB .product-card-module-p-zoi img {
@@ -819,6 +826,8 @@
   --color: var(--color-black);
   --button-font-size: var(--font-size-16);
   --seperator-color: transparent;
+  --accordion-padding-inline: 0;
+  --accordion-padding-block: var(--space-16);
 }
 
   .accordion-module-9WvAH.accordion-module-CaVdG {
@@ -841,8 +850,11 @@
       --seperator-color: var(--color-white);
     }
 
+.accordion-module-6CcEH {
+  --accordion-padding-inline: var(--space-16);
+}
+
 .accordion-module-lf9d- {
-  --padding: var(--space-16);
   --transition-duration: 0.2s;
 
   border-bottom: 1px solid var(--seperator-color);
@@ -856,8 +868,8 @@
     position: relative;
     display: block;
     width: 100%;
-    padding: var(--padding);
-    padding-right: calc(var(--padding) * 2);
+    padding-right: calc(var(--accordion-padding-inline) * 2);
+    padding-left: var(--accordion-padding-inline);
     border: none;
     background: none;
     color: var(--color);
@@ -866,6 +878,7 @@
     font-size: var(--button-font-size);
     font-weight: var(--font-weight-bold);
     line-height: 1;
+    padding-block: var(--accordion-padding-block);
     text-align: left;
   }
 
@@ -897,7 +910,7 @@
 .accordion-module-lf9d- .accordion-module-KZjMo {
     display: grid;
     grid-template-rows: 0fr;
-    padding-inline: var(--padding);
+    padding-inline: var(--accordion-padding-inline);
     transition:
       grid-template-rows var(--transition-duration) linear,
       padding-block var(--transition-duration) linear;
@@ -1005,8 +1018,9 @@
   align-items: center;
   color: var(--color-brand-black);
   cursor: pointer;
+  font-size: var(--font-size-14);
   forced-color-adjust: none;
-  gap: 4px;
+  gap: 6px;
   line-height: 1;
 }
 
@@ -1130,6 +1144,7 @@
     display: block;
     width: var(--space-12);
     height: var(--space-12);
+    color: var(--color-brand-dark-gray);
     inset-block: 0;
     inset-inline-end: 14px;
     margin-block: auto;
@@ -1157,16 +1172,27 @@
   min-width: fit-content;
   background-color: var(--color-white);
   box-shadow: var(--box-shadow-light);
+  padding-block: var(--space-8);
 }
 
 .select-module-S21ba {
   outline: none;
 }
 
+.select-module-4Bm2j {
+  padding: var(--space-8) var(--space-24);
+  color: var(--color-brand-dark-gray);
+  cursor: default;
+  line-height: 1;
+  outline: none;
+  word-break: break-word;
+}
+
 .select-module-LgEJO {
   position: relative;
   padding: var(--space-8) var(--space-24);
   cursor: pointer;
+  line-height: 1;
   outline: none;
   word-break: break-word;
 }
@@ -1334,6 +1360,174 @@
       }
 }
 
+.heading-module-pMC65 {
+  padding: 0;
+  margin: 0;
+  color: var(--color-brand-black);
+  font-weight: 900;
+}
+
+  .heading-module-pMC65:where(.heading-module-6spgX) {
+    text-transform: uppercase;
+  }
+
+  .heading-module-pMC65:where(.heading-module-XXMDM) {
+    font-style: italic;
+  }
+
+  .heading-module-pMC65:where(.heading-module-Kn3ZN) {
+    font-size: var(--text-heading-xxl-size);
+    line-height: var(--text-heading-xxl-line-height);
+  }
+
+  .heading-module-pMC65:where(.heading-module--hZs-) {
+    font-size: var(--text-heading-xl-size);
+    line-height: var(--text-heading-xl-line-height);
+  }
+
+  .heading-module-pMC65:where(.heading-module-WrJRY) {
+    font-size: var(--text-heading-l-size);
+    line-height: var(--text-heading-l-line-height);
+  }
+
+  .heading-module-pMC65:where(.heading-module-hTexc) {
+    font-size: var(--text-heading-m-size);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--text-heading-m-line-height);
+  }
+
+  .heading-module-pMC65:where(.heading-module-7W29m) {
+    font-size: var(--text-heading-s-size);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--text-heading-s-line-height);
+  }
+
+  .heading-module-pMC65:where(.heading-module-SgaLB) {
+    font-size: var(--text-heading-xs-size);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--text-heading-xs-line-height);
+  }
+
+  .heading-module-pMC65:where(.heading-module-33en7) {
+    font-size: var(--text-heading-xxs-size);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--text-heading-xxs-line-height);
+  }
+
+.active-filters-module-1qLjB {
+  --spacing: var(--space-16);
+
+  border-bottom: 1px solid var(--color-brand-medium-gray);
+  margin-top: var(--space-16);
+  color: var(--color-brand-black);
+}
+
+  .active-filters-module-1qLjB .active-filters-module-UKKDu {
+    margin-bottom: var(--spacing);
+  }
+
+  .active-filters-module-1qLjB .active-filters-module-UKKDu .active-filters-module-h29rI {
+      margin: 0;
+      font-size: var(--font-size-16);
+      line-height: 1;
+    }
+
+  .active-filters-module-1qLjB .active-filters-module-UKKDu,
+  .active-filters-module-1qLjB .active-filters-module-Rrmhy {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .active-filters-module-1qLjB .active-filters-module-u9TTE {
+    display: grid;
+    margin-bottom: var(--spacing);
+    gap: var(--spacing);
+  }
+
+  .active-filters-module-1qLjB .active-filters-module-u9TTE .active-filters-module-CIuPU {
+      font-weight: var(--font-weight-bold);
+    }
+
+.filter-panel-module-8oxI1 {
+  --padding: var(--space-16);
+
+  position: relative;
+  height: 100%;
+}
+
+  .filter-panel-module-8oxI1,
+  .filter-panel-module-8oxI1 * {
+    box-sizing: border-box;
+  }
+
+  .filter-panel-module-8oxI1 .filter-panel-module-w0hhZ {
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+    padding-bottom: 76px;
+    padding-inline: var(--padding);
+  }
+
+  .filter-panel-module-8oxI1 .filter-panel-module-AHlq3 {
+    padding-bottom: 14px;
+    border-bottom: 1px solid var(--color-brand-medium-gray);
+  }
+
+  .filter-panel-module-8oxI1 .filter-panel-module-AHlq3 .filter-panel-module-TMp3J {
+      display: inline-block;
+      color: var(--color-black);
+      font-size: var(--font-size-14);
+      line-height: 2.25;
+      text-decoration: none;
+    }
+
+  .filter-panel-module-8oxI1 .filter-panel-module-AHlq3 .filter-panel-module-TMp3J .filter-panel-module-ykW1a {
+        color: var(--color-brand-medium-gray);
+      }
+
+  .filter-panel-module-8oxI1 .filter-panel-module-AHlq3 .filter-panel-module-xvhRz {
+      display: grid;
+      gap: var(--space-8);
+    }
+
+  .filter-panel-module-8oxI1 .filter-panel-module-AHlq3 .filter-panel-module-hJVR0 {
+      margin-top: 0;
+      margin-bottom: var(--space-8);
+      font-size: var(--font-size-16);
+      font-weight: var(--font-weight-bold);
+    }
+
+  .filter-panel-module-8oxI1 .filter-panel-module-hMmIb {
+    position: absolute;
+    bottom: var(--padding);
+    display: grid;
+    inset-inline: 0;
+    padding-inline: var(--padding);
+  }
+
+  @media (width >= 1440px) {
+    .filter-panel-module-8oxI1 .filter-panel-module-w0hhZ {
+      overflow: hidden;
+    }
+
+    .filter-panel-module-8oxI1 .filter-panel-module-hMmIb {
+      display: none;
+    }
+  }
+
+.pagination-module-k4OgY,
+.pagination-module-oq89A {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-24);
+}
+
+  .pagination-module-k4OgY .pagination-module-oq89A, .pagination-module-oq89A .pagination-module-oq89A {
+    gap: var(--space-8);
+  }
+
 .sidebar-module-fSa9Q {
   --transition-duration: 0.3s;
   --transition-timing-function: ease-in-out;
@@ -1346,8 +1540,8 @@
   max-width: 100vw;
   height: 100%;
   box-sizing: border-box;
-  padding: 46px 16px;
   background: var(--color-white);
+  padding-block: 46px;
   transform: translateX(-100%);
   transition: transform var(--transition-duration)
     var(--transition-timing-function);
@@ -1355,6 +1549,7 @@
 
   .sidebar-module-fSa9Q .sidebar-module-2puGC {
     position: absolute;
+    z-index: calc(var(--sidebar-layer) + 2);
     top: 36px;
     right: 8px;
   }
@@ -1380,6 +1575,7 @@
     position: static;
     z-index: initial;
     overflow: hidden;
+    width: 324px;
     padding: 0;
     transform: translateX(0);
     transition: width var(--transition-duration)
@@ -1397,16 +1593,32 @@
     }
 }
 
-.product-listing-module-EmEFw .product-listing-module-rFNcR {
+.product-listing-module-EmEFw .product-listing-module-JEjsa {
+    margin-bottom: 44px;
+  }
+  .product-listing-module-EmEFw .product-listing-module-rFNcR {
     display: grid;
     align-items: center;
     margin-bottom: var(--space-24);
     grid-template-columns: auto 1fr auto;
   }
-
-    .product-listing-module-EmEFw .product-listing-module-rFNcR .product-listing-module-1seez {
+  .product-listing-module-EmEFw .product-listing-module-rFNcR .product-listing-module-1seez {
       margin: auto;
     }
   .product-listing-module-EmEFw .product-listing-module-hZuKD {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+  .product-listing-module-EmEFw .product-listing-module-RRbLO {
     display: flex;
+    flex-direction: column;
+  }
+  .product-listing-module-EmEFw .product-listing-module-kkOfB {
+    margin-top: var(--space-24);
+    grid-column: span 2;
+  }
+  @media (width >= 1440px) {
+    .product-listing-module-EmEFw .product-listing-module-hZuKD {
+      grid-template-columns: auto 1fr;
+    }
   }

package/dist/typography/heading/heading.d.ts

@@ -7,7 +7,7 @@ interface HeadingProps {
     children: React.ReactNode;
     className?: string;
     italic?: boolean;
-    size: Size;
+    size?: Size;
     tag?: Tag;
     uppercase?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -24,8 +24,8 @@
     "check-updates": "npx npm-check-updates",
     "clean": "rimraf node_modules dist",
     "dev": "storybook dev -p 6006",
-    "lint": "eslint . --ext ts,tsx,cjs,js,mdx --report-unused-disable-directives --max-warnings 0 --cache --cache-location node_modules/.cache/.eslintcache",
-    "lint:fix": "eslint . --fix --ext ts,tsx,cjs,js,mdx --report-unused-disable-directives --max-warnings 0 --cache --cache-location node_modules/.cache/.eslintcache",
+    "lint": "eslint . --ext ts,tsx,cjs,js,mdx --report-unused-disable-directives --cache --cache-location node_modules/.cache/.eslintcache",
+    "lint:fix": "eslint . --fix --ext ts,tsx,cjs,js,mdx --report-unused-disable-directives --cache --cache-location node_modules/.cache/.eslintcache",
     "prepare": "husky",
     "start": "http-server ./storybook-static",
     "stylelint": "stylelint --config .stylelintrc.cjs \"src/**/*.css\"",
@@ -81,6 +81,7 @@
     "eslint-plugin-unused-imports": "^3.2.0",
     "http-server": "^14.1.1",
     "husky": "^9.0.11",
+    "instantsearch.js": "^4.69.0",
     "postcss": "^8.4.38",
     "postcss-custom-media": "^10.0.6",
     "postcss-import": "^16.1.0",