@sonic-equipment/ui 0.0.32 → 0.0.34

package/dist/intl/use-language-code.d.ts

@@ -0,0 +1,2 @@
+export declare function useLanguageCode(): string;
+export declare function useUpdateLanguageCode(): (languageCode: string) => void;

package/dist/pages/{page-layout/page-layout.d.ts → page-container/page-container.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export declare function PageLayout({ children, className, }: {
+export declare function PageContainer({ children, className, }: {
     children: ReactNode;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/pages/{page-layout/page-layout.stories.d.ts → page-container/page-container.stories.d.ts}

@@ -1,10 +1,10 @@
 import type { StoryObj } from '@storybook/react';
-import { PageLayout } from './page-layout';
+import { PageContainer } from './page-container';
 declare const meta: {
     args: {
         children: import("react/jsx-runtime").JSX.Element;
     };
-    component: typeof PageLayout;
+    component: typeof PageContainer;
     parameters: {
         layout: string;
     };

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

@@ -8,9 +8,9 @@ export interface Filters {
         }[];
     };
 }
-export type ProductListingPageProps = {
+export interface ProductListingPageProps {
     bffUrl: string;
     pageUrl: string;
     searchClient?: SearchClient;
-};
-export declare function ProductListingPage({ bffUrl, pageUrl, searchClient, }: ProductListingPageProps): import("react/jsx-runtime").JSX.Element;
+}
+export declare function ProductListingPage({ bffUrl, pageUrl, searchClient, }: ProductListingPageProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -3,13 +3,15 @@ import { StoryObj } from '@storybook/react';
 import { ProductListingPage } from './product-listing-page';
 type StoryProps = Omit<ComponentProps<typeof ProductListingPage>, 'searchClient'> & {
     bff: boolean;
+    languageCode: string;
     online: boolean;
 };
 declare const meta: {
     args: {
         bff: true;
         bffUrl: string;
-        online: false;
+        languageCode: string;
+        online: true;
         pageUrl: string;
     };
     parameters: {

package/dist/pages/product-listing-page/use-fetch-product-listing-page/use-fetch-product-listing-page-data.d.ts

@@ -1,2 +1,6 @@
 import { ProductListingPageData } from 'pages/product-listing-page/product-listing-page-data-types';
-export declare function useFetchProductListingPageData(bffUrl: string, pageUrl: string): import("@tanstack/react-query").UseQueryResult<ProductListingPageData, Error>;
+export interface FetchProductListingPageDataArgs {
+    languageCode: string;
+    pageUrl: string;
+}
+export declare function useFetchProductListingPageData(bffUrl: string, { languageCode, pageUrl }: FetchProductListingPageDataArgs): import("@tanstack/react-query").UseQueryResult<ProductListingPageData, Error>;

package/dist/pages/product-listing-page/use-fetch-product-listing-page/use-fetch-product-listing-page-data.stories.d.ts

@@ -1,12 +1,14 @@
 import { StoryObj } from '@storybook/react';
 interface StoryProps {
     bffUrl: string;
+    languageCode: string;
     pageUrl: string;
 }
-declare function UseFetchProductListingPageDataStory(args: StoryProps): import("react/jsx-runtime").JSX.Element;
+declare function UseFetchProductListingPageDataStory({ bffUrl, languageCode, pageUrl, }: StoryProps): import("react/jsx-runtime").JSX.Element;
 declare const meta: {
     args: {
         bffUrl: string;
+        languageCode: string;
         pageUrl: string;
     };
     component: typeof UseFetchProductListingPageDataStory;

package/dist/shared/hooks/use-breakpoint.d.ts

@@ -1,11 +1,11 @@
-declare const breakpoints: {
+export declare const breakpoints: {
     readonly sm: 0;
     readonly md: 576;
     readonly lg: 768;
     readonly xl: 1024;
     readonly xxl: 1440;
 };
-type Breakpoint = keyof typeof breakpoints;
+export type Breakpoint = keyof typeof breakpoints;
 interface UseBreakpointReturnType extends Record<Breakpoint, boolean> {
     current: Breakpoint;
 }

package/dist/shared/hooks/use-is-breakpoint.d.ts

@@ -0,0 +1,2 @@
+import { Breakpoint } from './use-breakpoint';
+export declare function useIsBreakpoint(breakpoint: Breakpoint): boolean;

package/dist/shared/utils/environment.d.ts

@@ -1,3 +1,3 @@
 export declare const environments: readonly ["sandbox", "production"];
 export type Environment = (typeof environments)[number];
-export declare const environment: Environment | undefined;
+export declare let environment: Environment;

package/dist/sidebar/sidebar-context.d.ts

@@ -1,5 +1,7 @@
 export interface SidebarContextType {
+    close: () => void;
     isOpen: boolean;
+    open: () => void;
     toggle: () => void;
     transition: boolean;
 }

package/dist/sidebar/sidebar-provider.d.ts

@@ -2,5 +2,6 @@ import { ReactElement } from 'react';
 interface SidebarProviderProps {
     children: ReactElement;
 }
+export declare function SidebarDetectBreakpoint(): import("react/jsx-runtime").JSX.Element | null;
 export declare function SidebarProvider({ children }: SidebarProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/styles.css

@@ -283,7 +283,6 @@
 .button-module-V4meK {
   all: unset;
   display: inline-flex;
-  width: uppercase;
   box-sizing: border-box;
   flex-shrink: 0;
   align-items: center;
@@ -728,21 +727,20 @@
   width: 28px;
 }
 
+:root {
+  --tag-height: var(--space-16);
+}
+
 .tag-module-B7r15 {
   --tag-bg-color: var(--color-brand-red);
   --tag-fg-color: var(--color-brand-white);
 
   display: inline-flex;
-  height: 16px;
-  flex: 1 1;
-  flex-direction: row;
-  align-items: stretch;
+  height: var(--tag-height);
 }
 
-  .tag-module-B7r15 .tag-module-4cfCf {
-    display: block;
-    padding: 2px 0 0 4px;
-    border: 1px solid var(--tag-bg-color);
+.tag-module-B7r15 .tag-module-4cfCf {
+    padding: 3px 1px 1px 5px;
     background-color: var(--tag-bg-color);
     color: var(--tag-fg-color);
     font-size: var(--font-size-11);
@@ -751,12 +749,10 @@
     text-transform: uppercase;
   }
 
-  .tag-module-B7r15 .tag-module-c7CRb {
+.tag-module-B7r15 .tag-module-c7CRb {
     min-width: 8px;
     height: 16px;
-    flex: 0 0;
     color: var(--tag-bg-color);
-    vertical-align: top;
   }
 
 .product-price-module-oIU1K {
@@ -889,8 +885,8 @@
   }
 
   .product-card-module-pLaiB .product-card-module-Q0VvF .product-card-module-HkWBE {
-      display: inline-flex;
-      flex-direction: row;
+      display: flex;
+      min-height: var(--tag-height, var(--space-16));
       margin-bottom: 18px;
       gap: var(--space-4);
     }
@@ -985,6 +981,7 @@
   cursor: pointer;
   padding-inline: 10px;
   place-items: center;
+  -webkit-tap-highlight-color: transparent;
 }
 
   .category-card-module-4NUjH,
@@ -1002,14 +999,14 @@
     line-height: 1;
     text-align: center;
     text-transform: uppercase;
-    word-break: break-all;
+    word-break: break-word;
   }
 
   .category-card-module-4NUjH[data-pressed] .category-card-module-LEhh3, .category-card-module-4NUjH[data-hovered] .category-card-module-LEhh3, .category-card-module-4NUjH[data-focused] .category-card-module-LEhh3 {
       color: var(--color-brand-red);
     }
 
-  .category-card-module-4NUjH.category-card-module-vJ7vB .category-card-module-LEhh3 {
+  .category-card-module-4NUjH[data-pressed] .category-card-module-LEhh3, .category-card-module-4NUjH[data-hovered] .category-card-module-LEhh3, .category-card-module-4NUjH[data-focused] .category-card-module-LEhh3, .category-card-module-4NUjH.category-card-module-vJ7vB .category-card-module-LEhh3 {
       color: var(--color-brand-red);
     }
 
@@ -1351,6 +1348,9 @@
   position: relative;
   display: block;
   width: 100%;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 .carousel-module-ealh-,
   .carousel-module-ealh- * {
@@ -1731,20 +1731,30 @@
 
 .select-module-ui-Wc {
   --trigger-width: initial;
+  --height: var(--space-44);
 
   all: unset;
   position: relative;
   display: inline-flex;
   box-sizing: border-box;
+  flex-grow: 1;
   gap: var(--space-4);
 }
 
+  .select-module-ui-Wc.select-module-44a1l {
+    --height: var(--space-36);
+  }
+
+  .select-module-ui-Wc.select-module-QUm-8 {
+    --height: var(--space-44);
+  }
+
 .select-module-aMQIQ {
   all: unset;
   position: relative;
   display: flex;
   width: 100%;
-  height: var(--space-44);
+  height: var(--height);
   box-sizing: border-box;
   align-items: center;
   padding: 10px 32px 10px 16px;
@@ -1976,31 +1986,31 @@
       }
 }
 
-.page-layout-module-sSsgZ {
+.page-container-module-PYmbC {
   overflow: hidden;
 }
 
-  .page-layout-module-sSsgZ .page-layout-module-osQ2n {
-    --page-layout-padding: 10px;
+  .page-container-module-PYmbC .page-container-module-uD8GF {
+    --page-container-padding: 10px;
 
     position: relative;
     box-sizing: border-box;
-    padding: var(--page-layout-padding);
+    padding: var(--page-container-padding);
     padding-bottom: var(--space-64);
   }
 
   @media (width >= 768px) {
 
-  .page-layout-module-sSsgZ .page-layout-module-osQ2n {
-      max-width: calc(806px + (2 * var(--page-layout-padding)));
+  .page-container-module-PYmbC .page-container-module-uD8GF {
+      max-width: calc(806px + (2 * var(--page-container-padding)));
       margin: 0 auto
   }
     }
 
   @media (width >= 1440px) {
 
-  .page-layout-module-sSsgZ .page-layout-module-osQ2n {
-      max-width: calc(1222px + (2 * var(--page-layout-padding)));
+  .page-container-module-PYmbC .page-container-module-uD8GF {
+      max-width: calc(1222px + (2 * var(--page-container-padding)));
       padding-bottom: var(--space-96)
   }
     }
@@ -2119,10 +2129,6 @@
     padding-inline: var(--padding);
   }
 
-  .filter-panel-module-8oxI1 .filter-panel-module-bRChA {
-    text-transform: capitalize;
-  }
-
   .filter-panel-module-8oxI1 .filter-panel-module-AHlq3 {
     padding-bottom: 14px;
     border-bottom: 1px solid var(--color-brand-medium-gray);
@@ -2259,22 +2265,24 @@
     margin-bottom: 44px;
   }
   .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: var(--space-24);
-    row-gap: var(--space-8);
+    display: grid;
+    gap: var(--space-16);
+    justify-items: center;
   }
-  .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-aQzHr {
-      display: flex;
-      justify-content: flex-end;
+  .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-F7bxy,
+    .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-aQzHr {
+      width: 100%;
     }
+  .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-F7bxy > *, .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-aQzHr > * {
+        display: flex;
+        width: 100%;
+        justify-content: center;
+      }
   .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-zx79v {
-      margin: auto;
+      order: 2;
     }
   .product-listing-page-module-dmIHF .product-listing-page-module-R4aOl {
-    margin-bottom: var(--space-64);
+    margin-bottom: var(--space-44);
   }
   .product-listing-page-module-dmIHF .product-listing-page-module-ICkKg {
     display: grid;
@@ -2288,12 +2296,44 @@
     margin-top: var(--space-24);
     grid-column: span 2;
   }
-  @media (width >= 1440px) {
+  @media (width >= 768px) {
+    .product-listing-page-module-dmIHF .product-listing-page-module-R4aOl {
+      margin-bottom: var(--space-64);
+    }
+
     .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr {
       display: grid;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: var(--space-24);
       grid-template-columns: repeat(3, 1fr);
+      row-gap: var(--space-8);
     }
 
+      .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-F7bxy,
+      .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-aQzHr {
+        width: initial;
+      }
+
+        .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-F7bxy > *, .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-aQzHr > * {
+          width: initial;
+        }
+
+      .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-F7bxy {
+        justify-self: flex-start;
+      }
+
+      .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-aQzHr {
+        display: flex;
+        justify-self: flex-end;
+      }
+
+      .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-zx79v {
+        order: initial;
+        margin: auto;
+      }
+  }
+  @media (width >= 1440px) {
     .product-listing-page-module-dmIHF .product-listing-page-module-ICkKg {
       grid-template-columns: auto 1fr;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -51,20 +51,20 @@
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-docs": "^8.1.9",
-    "@storybook/addon-essentials": "^8.1.9",
-    "@storybook/addon-interactions": "^8.1.9",
-    "@storybook/addon-links": "^8.1.9",
-    "@storybook/addon-viewport": "^8.1.9",
-    "@storybook/blocks": "^8.1.9",
-    "@storybook/preview-api": "^8.1.9",
-    "@storybook/react": "^8.1.9",
-    "@storybook/react-vite": "^8.1.9",
-    "@storybook/test": "^8.1.9",
+    "@storybook/addon-docs": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-viewport": "^8.1.10",
+    "@storybook/blocks": "^8.1.10",
+    "@storybook/preview-api": "^8.1.10",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-vite": "^8.1.10",
+    "@storybook/test": "^8.1.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.13.0",
-    "@typescript-eslint/parser": "^7.13.0",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
+    "@typescript-eslint/parser": "^7.14.1",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.19",
     "concurrently": "^8.2.2",
@@ -75,7 +75,7 @@
     "eslint-plugin-mdx": "^3.1.5",
     "eslint-plugin-no-relative-import-paths": "^1.5.4",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-simple-import-sort": "^12.1.0",
     "eslint-plugin-sort-destructure-keys": "^2.0.0",
@@ -85,7 +85,7 @@
     "eslint-plugin-unused-imports": "^3.2.0",
     "http-server": "^14.1.1",
     "husky": "^9.0.11",
-    "instantsearch.js": "^4.71.1",
+    "instantsearch.js": "^4.72.1",
     "postcss": "^8.4.38",
     "postcss-custom-media": "^10.0.6",
     "postcss-import": "^16.1.0",
@@ -98,12 +98,12 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-ts": "^3.4.5",
-    "storybook": "^8.1.9",
+    "storybook": "^8.1.10",
     "stylelint": "^16.6.1",
     "stylelint-config-css-modules": "^4.4.0",
     "stylelint-config-idiomatic-order": "^10.0.0",
-    "stylelint-config-standard": "^36.0.0",
-    "typescript": "^5.4.5",
+    "stylelint-config-standard": "^36.0.1",
+    "typescript": "^5.5.2",
     "vite": "^5.3.1",
     "vite-tsconfig-paths": "^4.3.2"
   },
@@ -113,13 +113,13 @@
     "@algolia/autocomplete-plugin-recent-searches": "^1.17.2",
     "@algolia/autocomplete-preset-algolia": "^1.17.2",
     "@algolia/client-search": "^4.23.3",
-    "@tanstack/react-query": "^5.45.0",
+    "@tanstack/react-query": "^5.47.0",
     "@types/react-transition-group": "^4.4.10",
     "algoliasearch": "^4.23.3",
     "clsx": "^2.1.1",
-    "instantsearch.js": "^4.71.1",
+    "instantsearch.js": "^4.72.1",
     "react-aria-components": "^1.2.1",
-    "react-instantsearch": "^7.11.1",
+    "react-instantsearch": "^7.11.3",
     "react-transition-group": "^4.4.5",
     "swiper": "^11.1.4"
   },