@sonic-equipment/ui 0.0.80 → 0.0.81

package/dist/index.d.ts

@@ -4142,7 +4142,6 @@ interface ButtonProps$1 {
   className?: string
   color?: 'primary' | 'secondary'
   condensed?: boolean
-  href?: string
   icon?: React.ReactNode
   iconPosition?: 'left' | 'right'
   isDisabled?: boolean
@@ -4155,6 +4154,7 @@ interface ButtonProps$1 {
 }
 
 interface RouteButtonProps extends ButtonProps$1 {
+    href?: string;
     route?: NavigateOptions;
 }
 declare function RouteButton({ children, onClick, ...props }: RouteButtonProps): react_jsx_runtime.JSX.Element;
@@ -4262,7 +4262,6 @@ interface ButtonProps {
     className?: string;
     color?: 'primary' | 'secondary';
     condensed?: boolean;
-    href?: string;
     icon?: React.ReactNode;
     iconPosition?: 'left' | 'right';
     isDisabled?: boolean;
@@ -4273,7 +4272,7 @@ interface ButtonProps {
     variant?: 'solid' | 'outline' | 'ghost';
     withArrow?: boolean;
 }
-declare function Button({ _pseudo, children, className, color, condensed, href, icon, iconPosition, isDisabled, onClick: _onClick, onPress, size, type, variant, withArrow, }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ _pseudo, children, className, color, condensed, icon, iconPosition, isDisabled, onClick: _onClick, onPress: onPress, size, type, variant, withArrow, }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface FavoriteButtonProps {
     isDisabled?: boolean;
@@ -4304,7 +4303,7 @@ interface LinkProps extends LinkProps$2, RefAttributes<HTMLAnchorElement> {
     onMouseMove?(event: MouseEvent): void;
     role?: 'option';
 }
-declare function Link({ children, className, color, hasUnderline, onClick: _onClick, ref, ...props }: LinkProps): react_jsx_runtime.JSX.Element;
+declare function Link({ children, className, color, hasUnderline, onClick: _onClick, onPress, ref, ...props }: LinkProps): react_jsx_runtime.JSX.Element;
 
 type AddToCartState = 'initial' | 'spinner' | 'manual-input';
 interface AddToCartButtonProps {

package/dist/index.js

@@ -364,7 +364,9 @@ function useFeatureFlags() {
             /* When no new feature flags are set get them from localStorage */
             return Object.entries(features).reduce((acc, [, value]) => ({
                 ...acc,
-                [value]: localStorage.getItem(value) === 'true',
+                [value]: HAS_LOCAL_STORAGE_SUPPORT
+                    ? localStorage.getItem(value) === 'true'
+                    : false,
             }), {});
         }
         const queryStringFeatures = String(queryParams['features'])
@@ -1164,22 +1166,24 @@ function useNavigate() {
 
 var styles$X = {"link":"link-module-xLqBn","primary":"link-module-bGD6u","secondary":"link-module-v31wH","has-underline":"link-module-UuCEp"};
 
-function Link({ children, className, color = 'primary', hasUnderline, onClick: _onClick, ref, ...props }) {
+function Link({ children, className, color = 'primary', hasUnderline, onClick: _onClick, onPress, ref, ...props }) {
     function onClick(e) {
         _onClick?.(e);
         if (props.href)
             return;
         e.preventDefault();
     }
-    const linkRef = ref ||
-        (ref => 
-        // Workaround for react/react-aria #1513
-        ref?.addEventListener('touchend', e => e.preventDefault()));
+    const linkRef = onPress
+        ? ref
+        : ref ||
+            (ref => 
+            // Workaround for react/react-aria #1513
+            ref?.addEventListener('touchend', e => e.preventDefault()));
     return (jsx(Link$1, { ref: linkRef, className: clsx({ [styles$X['has-underline']]: hasUnderline }, styles$X['link'], styles$X[color], className), 
         // Workaround for adobe/react-spectrum #963
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        onClick: onClick, ...props, children: children }));
+        onClick: onClick, onPress: onPress, ...props, children: children }));
 }
 
 function RouteLink({ children, onClick: _onClick, ...props }) {
@@ -1210,21 +1214,19 @@ function GlyphsArrowBoldCapsRightIcon(props) {
 
 var buttonStyles = {"button":"button-module-V4meK","icon":"button-module-XaNWz","sm":"button-module-Pbwz7","md":"button-module-GVTEW","condensed":"button-module-GKHQc","lg":"button-module-nyNY8","primary":"button-module-tmyk8","outline":"button-module-vq9GI","solid":"button-module-AjvlY","hover":"button-module-YzPAr","focus":"button-module--xzsY","active":"button-module-XMFzj","ghost":"button-module-f4UVe","right-arrow-icon":"button-module-ydQAo","secondary":"button-module--1bCH"};
 
-function Button({ _pseudo = 'none', children, className, color = 'primary', condensed, href, icon, iconPosition = 'left', isDisabled, onClick: _onClick, onPress, size = 'lg', type = 'button', variant = 'solid', withArrow = false, }) {
+function Button({ _pseudo = 'none', children, className, color = 'primary', condensed, icon, iconPosition = 'left', isDisabled, onClick: _onClick, onPress: onPress, size = 'lg', type = 'button', variant = 'solid', withArrow = false, }) {
     const showIconOnLeft = icon && iconPosition === 'left';
     const showIconOnRight = icon && iconPosition === 'right';
     const onClick = (e) => {
         if (_onClick)
             _onClick(e);
-        if (e.isDefaultPrevented())
-            return;
-        if (href)
-            window.location.href = href;
         e.preventDefault();
     };
-    return (jsxs(Button$1, { ref: ref => 
-        // Workaround for react/react-aria #1513
-        ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx({ [buttonStyles.condensed]: condensed }, { [buttonStyles.icon]: icon }, buttonStyles.button, buttonStyles[variant], buttonStyles[size], buttonStyles[color], buttonStyles[_pseudo], className), isDisabled: isDisabled, 
+    return (jsxs(Button$1, { ref: _onClick
+            ? undefined
+            : ref => 
+            // Workaround for react/react-aria #1513
+            ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx({ [buttonStyles.condensed]: condensed }, { [buttonStyles.icon]: icon }, buttonStyles.button, buttonStyles[variant], buttonStyles[size], buttonStyles[color], buttonStyles[_pseudo], className), isDisabled: isDisabled, 
         // Workaround for adobe/react-spectrum #963
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
@@ -1238,6 +1240,11 @@ function RouteButton({ children, onClick, ...props }) {
             if (!props.href)
                 return;
             e.preventDefault();
+            if (props.isDisabled)
+                return;
+            if (e.ctrlKey || e.metaKey || e.shiftKey) {
+                return window.open(props.href, '_blank');
+            }
             navigate(props.href, props.route);
         }, ...props, children: children }));
 }
@@ -7630,9 +7637,9 @@ function ShowAll({ children, hasTransparency = true, initialHeight = 0, initialI
     return (jsxs("div", { ref: showAllRef, className: clsx(styles$G['show-all'], {
             [styles$G['content-fits']]: contentFits,
             [styles$G['is-open']]: isReallyOpen,
-        }), style: { '--initital-height': `${initialHeight}px` }, children: [jsx("div", { className: styles$G.panel, children: jsx("div", { className: clsx(styles$G.content, {
-                        [styles$G['has-transparency']]: hasTransparency,
-                    }), children: jsx("div", { ref: ref, "aria-hidden": true, style: { display: 'block' }, children: children }) }) }), !contentFits && (jsxs(RouteLink, { className: styles$G.button, color: "secondary", onPress: () => {
+        }), style: contentFits ? undefined : { '--initital-height': `${initialHeight}px` }, children: [jsx("div", { className: styles$G.panel, children: jsx("div", { className: clsx(styles$G.content, {
+                        [styles$G['has-transparency']]: !contentFits && hasTransparency,
+                    }), children: jsx("div", { ref: ref, children: children }) }) }), !contentFits && (jsxs(RouteLink, { className: styles$G.button, color: "secondary", onPress: () => {
                     if (isControlled)
                         return onToggle(!isControlled);
                     toggle();
@@ -8153,12 +8160,12 @@ function DownloadListItem({ document: { href, name }, }) {
     return (jsxs("div", { className: styles$m['download-list-item'], children: [jsx(StrokeDownloadIcon, {}), jsx("a", { href: href, rel: "noreferrer", target: "_blank", children: name })] }));
 }
 
-var styles$l = {"product-details-panel":"product-details-panel-module-qO4Hi","heading":"product-details-panel-module-s42w-","price-action-container":"product-details-panel-module-5AUJ4","action-container":"product-details-panel-module-IZCrY","description":"product-details-panel-module-BqSmY","feature-list":"product-details-panel-module-J060x"};
+var styles$l = {"product-details-panel":"product-details-panel-module-qO4Hi","heading":"product-details-panel-module-s42w-","product-features-heading":"product-details-panel-module-Fa6vy","price-action-container":"product-details-panel-module-5AUJ4","action-container":"product-details-panel-module-IZCrY","description":"product-details-panel-module-BqSmY","feature-list":"product-details-panel-module-J060x"};
 
 function ProductDetailsPanel({ product }) {
-    return (jsxs("div", { className: styles$l['product-details-panel'], children: [jsxs("div", { className: styles$l.heading, children: [jsx(Heading, { size: "xs", children: product.productTitle }), jsx(ProductSku, { sku: product.productNumber })] }), jsxs("div", { className: styles$l['price-action-container'], children: [jsx(ProductPrice, { isVatIncluded: false, originalPrice: product.unitListPrice, price: product.unitListPrice }), jsxs("div", { className: styles$l['action-container'], children: [product.canAddToCart && (jsx(ConnectedAddToCartButton, { productId: product.storefrontId })), product.canAddToWishlist && (jsx(ConnectedFavoriteButton, { productId: product.storefrontId }))] })] }), jsxs("div", { children: [jsx(Heading, { size: "xxs", children: jsx(FormattedMessage, { id: "Product Features" }) }), jsx(ShowAll, { initialHeight: 216, children: jsx("div", { className: styles$l.description, dangerouslySetInnerHTML: {
+    return (jsxs("div", { className: styles$l['product-details-panel'], children: [jsxs("div", { className: styles$l.heading, children: [jsx(Heading, { italic: true, size: "xs", children: product.productTitle }), jsx(ProductSku, { sku: product.productNumber })] }), jsxs("div", { className: styles$l['price-action-container'], children: [jsx(ProductPrice, { isVatIncluded: false, originalPrice: product.unitListPrice, price: product.unitListPrice }), jsxs("div", { className: styles$l['action-container'], children: [product.canAddToCart && (jsx(ConnectedAddToCartButton, { productId: product.storefrontId })), product.canAddToWishlist && (jsx(ConnectedFavoriteButton, { productId: product.storefrontId }))] })] }), jsxs("div", { children: [jsx(Heading, { italic: true, className: styles$l['product-features-heading'], size: "xxs", children: jsx(FormattedMessage, { id: "Product Features" }) }), product.content.htmlContent && (jsx(ShowAll, { initialHeight: 216, children: jsx("div", { className: styles$l.description, dangerouslySetInnerHTML: {
                                 __html: product.content.htmlContent,
-                            } }) })] }), jsx("div", { children: jsxs(Accordion, { indented: true, borderType: ['top', 'middle-accentuated'], children: [Boolean(product.attributeTypes.length) && (jsx(AccordionItem, { id: "specification", title: jsx(FormattedMessage, { id: "Specifications" }), children: jsx(FeatureList, { className: styles$l['feature-list'], features: product.attributeTypes.map(attribute => ({
+                            } }) }))] }), jsx("div", { children: jsxs(Accordion, { indented: true, borderType: ['top', 'middle-accentuated'], children: [Boolean(product.attributeTypes.length) && (jsx(AccordionItem, { id: "specification", title: jsx(FormattedMessage, { id: "Specifications" }), children: jsx(FeatureList, { className: styles$l['feature-list'], features: product.attributeTypes.map(attribute => ({
                                     id: `${attribute.id}`,
                                     key: { label: attribute.label },
                                     value: attribute.attributeValues.map(attributeValue => attributeValue.value),
@@ -8880,10 +8887,10 @@ function NoResults$1({ content, title }) {
 
 var styles$d = {"category-card":"category-card-module-4NUjH","title":"category-card-module-LEhh3","arrow":"category-card-module-hL4-A","image":"category-card-module-RxWMW","is-selected":"category-card-module-vJ7vB","image-container":"category-card-module-oNTrK"};
 
-function CategoryCard({ href, image, isSelected = false, onClick, title, withArrow = false, }) {
+function CategoryCard({ className, href, image, isSelected = false, onClick, title, withArrow = false, }) {
     return (jsxs(RouteLink, { className: clsx({
             [styles$d['is-selected']]: isSelected,
-        }, styles$d['category-card']), href: href, onClick: onClick, children: [jsx("div", { className: styles$d['image-container'], children: jsx(Image, { className: styles$d.image, ...image, fit: "contain" }) }), jsxs("p", { className: styles$d.title, children: [jsx("span", { children: title }), withArrow && jsx(GlyphsArrowBoldCapsRightIcon, { className: styles$d.arrow })] })] }));
+        }, styles$d['category-card'], className), href: href, onClick: onClick, children: [jsx("div", { className: styles$d['image-container'], children: jsx(Image, { className: styles$d.image, ...image, fit: "contain" }) }), jsxs("p", { className: styles$d.title, children: [jsx("span", { children: title }), withArrow && jsx(GlyphsArrowBoldCapsRightIcon, { className: styles$d.arrow })] })] }));
 }
 
 function transformAlgoliaCategoryData(categories) {
@@ -8910,7 +8917,7 @@ function transformAlgoliaCategoryData(categories) {
 
 function ProductListingPageCategoryCarousel({ currentCategoryPath, }) {
     const { items } = useRefinementList({
-        attribute: `hierarchicalStorefrontCategories.lvl${1}`,
+        attribute: `hierarchicalStorefrontCategories.lvl${currentCategoryPath.length}`,
         limit: 100,
     });
     const categories = transformAlgoliaCategoryData(items).filter(category => currentCategoryPath.every((path, index) => path === category.path[index]));
@@ -9256,11 +9263,11 @@ function SearchResultsPageContent({ keyword }) {
                     replacementValues: { 0: keyword },
                 }) })), jsxs("div", { style: {
                     display: !hasProducts ? 'none' : undefined,
-                }, children: [jsxs("section", { className: styles$b['action-bar'], children: [jsx("div", { className: styles$b['sidebar-toggle'], children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles$b.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles$b.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsxs("section", { children: [jsx("section", { className: styles$b.categories, children: jsx(SearchResultsPageCategoryCarousel, {}) }), jsxs("div", { className: styles$b['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { showCategoriesFilters: true }) }), jsxs("div", { className: styles$b['product-grid'], children: [jsx(SearchResultProductOverview, {}), jsx("div", { className: styles$b.pagination, children: jsx(AlgoliaPagination, { onChange: () => {
-                                                        setTimeout(() => {
-                                                            scrollToTop();
-                                                        }, 100);
-                                                    } }) })] })] })] })] })] }));
+                }, children: [jsx("section", { className: styles$b.categories, children: jsx(SearchResultsPageCategoryCarousel, {}) }), jsxs("section", { className: styles$b['action-bar'], children: [jsx("div", { className: styles$b['sidebar-toggle'], children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles$b.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles$b.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsx("section", { children: jsxs("div", { className: styles$b['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { showCategoriesFilters: true }) }), jsxs("div", { className: styles$b['product-grid'], children: [jsx(SearchResultProductOverview, {}), jsx("div", { className: styles$b.pagination, children: jsx(AlgoliaPagination, { onChange: () => {
+                                                    setTimeout(() => {
+                                                        scrollToTop();
+                                                    }, 100);
+                                                } }) })] })] }) })] })] }));
 }
 
 var styles$a = {"background-overlay":"background-overlay-module-mGiNQ","open":"background-overlay-module-5Uxcl","close":"background-overlay-module-GRInQ"};
@@ -9672,10 +9679,10 @@ function ConnectedSearchInput() {
         }, placeholder: t('What are you searching for?') }));
 }
 
-var styles$6 = {"categories-grid":"categories-grid-module-C751R","category":"categories-grid-module-7OZS1"};
+var styles$6 = {"categories-grid":"categories-grid-module-C751R","category":"categories-grid-module-7OZS1","category-grid-card":"categories-grid-module-Q7i00"};
 
 function CategoriesGrid({ categories, onItemClick, }) {
-    return (jsx("div", { className: styles$6['categories-grid'], children: categories.map(category => (jsx("div", { className: styles$6['category'], children: jsx(CategoryCard, { withArrow: true, href: category.href, image: {
+    return (jsx("div", { className: styles$6['categories-grid'], children: categories.map(category => (jsx("div", { className: styles$6['category'], children: jsx(CategoryCard, { className: styles$6['category-grid-card'], href: category.href, image: {
                     fit: 'contain',
                     image: category.image,
                     title: category.title,

package/dist/src/buttons/button/button.d.ts

@@ -5,7 +5,6 @@ export interface ButtonProps {
     className?: string;
     color?: 'primary' | 'secondary';
     condensed?: boolean;
-    href?: string;
     icon?: React.ReactNode;
     iconPosition?: 'left' | 'right';
     isDisabled?: boolean;
@@ -16,4 +15,4 @@ export interface ButtonProps {
     variant?: 'solid' | 'outline' | 'ghost';
     withArrow?: boolean;
 }
-export declare function Button({ _pseudo, children, className, color, condensed, href, icon, iconPosition, isDisabled, onClick: _onClick, onPress, size, type, variant, withArrow, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ _pseudo, children, className, color, condensed, icon, iconPosition, isDisabled, onClick: _onClick, onPress: onPress, size, type, variant, withArrow, }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/buttons/button/button.stories.d.ts

@@ -19,7 +19,6 @@ export declare const PrimaryActive: Story;
 export declare const PrimaryDisabled: Story;
 export declare const IconOnly: Story;
 export declare const WithArrow: Story;
-export declare const WithHref: Story;
 export declare const Outlined: Story;
 export declare const SecondaryActive: Story;
 export declare const Ghost: Story;

package/dist/src/buttons/link/link.d.ts

@@ -11,4 +11,4 @@ export interface LinkProps extends AriaLinkProps, RefAttributes<HTMLAnchorElemen
     onMouseMove?(event: MouseEvent): void;
     role?: 'option';
 }
-export declare function Link({ children, className, color, hasUnderline, onClick: _onClick, ref, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function Link({ children, className, color, hasUnderline, onClick: _onClick, onPress, ref, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/cards/category-card/category-card.d.ts

@@ -1,5 +1,6 @@
 import { ImageSource } from 'shared/model/image';
 export interface CategoryCardProps {
+    className?: string;
     href: string;
     image: ImageSource;
     isSelected?: boolean;
@@ -7,4 +8,4 @@ export interface CategoryCardProps {
     title: string;
     withArrow?: boolean;
 }
-export declare function CategoryCard({ href, image, isSelected, onClick, title, withArrow, }: CategoryCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function CategoryCard({ className, href, image, isSelected, onClick, title, withArrow, }: CategoryCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/global-search/categories-grid/categories-grid.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+import { CategoriesGrid } from './categories-grid';
+declare const meta: {
+    component: typeof CategoriesGrid;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LVP: Story;
+export declare const MVP: Story;
+export declare const SVP: Story;

package/dist/src/shared/routing/route-button.d.ts

@@ -1,6 +1,7 @@
 import { ButtonProps } from 'buttons/button/button';
 import { NavigateOptions } from './route-provider';
 interface RouteButtonProps extends ButtonProps {
+    href?: string;
     route?: NavigateOptions;
 }
 export declare function RouteButton({ children, onClick, ...props }: RouteButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/styles.css

@@ -2938,6 +2938,10 @@ button.swiper-pagination-bullet {
     gap: 8px;
   }
 
+  .product-details-panel-module-qO4Hi .product-details-panel-module-Fa6vy {
+    padding-bottom: var(--space-12);
+  }
+
   .product-details-panel-module-qO4Hi .product-details-panel-module-5AUJ4 {
     display: flex;
     width: 100%;
@@ -2948,7 +2952,6 @@ button.swiper-pagination-bullet {
   .product-details-panel-module-qO4Hi .product-details-panel-module-5AUJ4 .product-details-panel-module-IZCrY {
       display: flex;
       align-items: center;
-      gap: 8px;
     }
 
   .product-details-panel-module-qO4Hi .product-details-panel-module-BqSmY {
@@ -2961,7 +2964,12 @@ button.swiper-pagination-bullet {
     line-height: 1.5;
   }
 
+  .product-details-panel-module-qO4Hi .product-details-panel-module-BqSmY p {
+      margin: 0;
+    }
+
   .product-details-panel-module-qO4Hi .product-details-panel-module-J060x {
+    margin-top: var(--space-16);
     margin-bottom: var(--space-24);
   }
 
@@ -3724,10 +3732,14 @@ button.swiper-pagination-bullet {
   .categories-grid-module-C751R .categories-grid-module-7OZS1 {
     position: relative;
     display: grid;
-    padding: var(--space-16);
+    padding: var(--space-16) var(--space-4);
     place-items: center;
   }
 
+  .categories-grid-module-C751R .categories-grid-module-Q7i00 {
+    width: 100%;
+  }
+
 @media (0 <= width < 576px) {
   .categories-grid-module-C751R {
     position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "0.0.80",
+  "version": "0.0.81",
   "type": "module",
   "license": "MIT",
   "engines": {