diff --git a/packages/snap-preact-components/src/components/Molecules/CalloutBadge/CalloutBadge.stories.tsx b/packages/snap-preact-components/src/components/Molecules/CalloutBadge/CalloutBadge.stories.tsx index abaab885e..d45a6298e 100644 --- a/packages/snap-preact-components/src/components/Molecules/CalloutBadge/CalloutBadge.stories.tsx +++ b/packages/snap-preact-components/src/components/Molecules/CalloutBadge/CalloutBadge.stories.tsx @@ -81,6 +81,16 @@ export default { }, control: { type: 'boolean' }, }, + limit: { + description: 'Number of badges per slot', + table: { + type: { + summary: 'number', + }, + defaultValue: { summary: '1' }, + }, + control: { type: 'number' }, + }, tag: { description: 'Callout location tag', table: { @@ -95,10 +105,10 @@ export default { }, }; -const snapInstance = Snapify.search({ id: 'Result', globals: { siteId: '8uyt2m' } }); +const snapInstance = Snapify.search({ id: 'CalloutBadge', globals: { siteId: '8uyt2m' } }); const ObservableCalloutBadge = observer(({ args, controller }: { args: CalloutBadgeProps; controller: SearchController }) => { - return ; + return ; }); export const Default = (args: CalloutBadgeProps, { loaded: { controller } }: { loaded: { controller: SearchController } }) => { @@ -118,14 +128,24 @@ Default.loaders = [ response.results[0].badges = [ { - tag: 'free-shipping-overlay', + tag: 'free-shipping', value: 'Free Shipping', }, - ]; - response.results[1].badges = [ { - tag: 'free-shipping-callout', - value: 'Free Shipping', + tag: 'last-one', + value: 'Last One!', + }, + { + tag: 'on-sale', + value: 'On Sale', + }, + { + tag: 'save-percent', + value: 'Save 30%', + }, + { + tag: 'inventory-remaining', + value: '1 in stock', }, ]; @@ -139,7 +159,12 @@ Default.loaders = [ name: 'Left', }, ], - right: [], + right: [ + { + tag: 'right', + name: 'Right', + }, + ], callout: [ { tag: 'callout', @@ -148,23 +173,53 @@ Default.loaders = [ ], }, tags: { - 'free-shipping-overlay': { - location: 'left/left', + 'free-shipping': { + location: 'callout/callout', component: 'BadgeRectangle', priority: 1, enabled: true, parameters: { - color: '#FF0000', + color: '#3A23AD', + colorText: '#FFFFFF', + }, + }, + 'last-one': { + location: 'callout/callout', + component: 'BadgePill', + priority: 1, + enabled: true, + parameters: { + color: '#515151', colorText: '#FFFFFF', }, }, - 'free-shipping-callout': { + 'inventory-remaining': { location: 'callout/callout', + component: 'BadgePill', + priority: 1, + enabled: true, + parameters: { + color: '#382F5A', + colorText: '#FFFFFF', + }, + }, + 'on-sale': { + location: 'left/left', + component: 'BadgePill', + priority: 1, + enabled: true, + parameters: { + color: '#00CEE1', + colorText: '#FFFFFF', + }, + }, + 'save-percent': { + location: 'left/left', component: 'BadgeRectangle', priority: 1, enabled: true, parameters: { - color: '#FF0000', + color: '#8F6CF6', colorText: '#FFFFFF', }, }, @@ -172,6 +227,7 @@ Default.loaders = [ }, }; }); + await snapInstance.search(); return { diff --git a/packages/snap-preact-components/src/components/Molecules/CalloutBadge/CalloutBadge.tsx b/packages/snap-preact-components/src/components/Molecules/CalloutBadge/CalloutBadge.tsx index c1211efde..1f61d759e 100644 --- a/packages/snap-preact-components/src/components/Molecules/CalloutBadge/CalloutBadge.tsx +++ b/packages/snap-preact-components/src/components/Molecules/CalloutBadge/CalloutBadge.tsx @@ -17,6 +17,7 @@ const CSS = { display: 'flex', justifyContent: 'center', alignItems: 'center', + gap: '5px', }), }; @@ -26,13 +27,14 @@ export const CalloutBadge = observer((properties: CalloutBadgeProps): JSX.Elemen const props: CalloutBadgeProps = { // default props tag: 'callout', + limit: 1, // global theme ...globalTheme?.components?.calloutBadge, // props ...properties, ...properties.theme?.components?.calloutBadge, }; - const { result, tag, renderEmpty, disableStyles, className, style } = props; + const { result, tag, renderEmpty, limit, disableStyles, className, style } = props; const styling: { css?: StylingCSS } = {}; @@ -43,7 +45,6 @@ export const CalloutBadge = observer((properties: CalloutBadgeProps): JSX.Elemen styling.css = [style]; } - const limit = 1; const badges = result?.badges?.atLocation(tag).slice(0, limit); if (renderEmpty || badges?.length) { @@ -69,4 +70,5 @@ export interface CalloutBadgeProps extends ComponentProps { tag?: string; renderEmpty?: boolean; componentMap?: ComponentMap; + limit?: number; } diff --git a/packages/snap-preact-components/src/components/Molecules/CalloutBadge/readme.md b/packages/snap-preact-components/src/components/Molecules/CalloutBadge/readme.md index 78dc0e499..6d304daac 100644 --- a/packages/snap-preact-components/src/components/Molecules/CalloutBadge/readme.md +++ b/packages/snap-preact-components/src/components/Molecules/CalloutBadge/readme.md @@ -9,7 +9,7 @@ Renders callout badges configured in the Searchspring Management Console and ret The required `result` prop specifies a reference to a product object from the `results` store array. ```jsx - + ``` ### componentMap @@ -19,8 +19,7 @@ The `componentMap` prop allows for custom badge components. This functionallity import { CustomOnSale } from './components/Badges/CustomOnSale'; ... CustomOnSale }} @@ -31,8 +30,7 @@ The `componentMap` also supports async functions for dynamic importing of badges ```jsx { return (await import('./components/Badges/CustomOnSale')).CustomOnSale; @@ -47,17 +45,26 @@ By default if there are no badges, the wrapper element will not render. If you n ```jsx CustomOnSale }} /> ``` +### limit +The callout badge slot will by default only render a single badge, but the limit can be increased to allow rendering multiple badges in the same location. This allows for "stacking" of the badges in the callout slot. The order of the stack is determined by the SMC badge configuration. + +```jsx + +``` + ### tag -The `tag` prop specifies the location name of this callout location. +The `tag` prop specifies the location name of this callout location, the default value is `callout`. ```jsx - + ``` diff --git a/packages/snap-preact-components/src/components/Molecules/OverlayBadge/OverlayBadge.stories.tsx b/packages/snap-preact-components/src/components/Molecules/OverlayBadge/OverlayBadge.stories.tsx index c05126a10..283327740 100644 --- a/packages/snap-preact-components/src/components/Molecules/OverlayBadge/OverlayBadge.stories.tsx +++ b/packages/snap-preact-components/src/components/Molecules/OverlayBadge/OverlayBadge.stories.tsx @@ -94,11 +94,21 @@ export default { }, control: { type: 'boolean' }, }, + limit: { + description: 'Number of badges per slot', + table: { + type: { + summary: 'number', + }, + defaultValue: { summary: '1' }, + }, + control: { type: 'number' }, + }, ...componentArgs, }, }; -const snapInstance = Snapify.search({ id: 'Result', globals: { siteId: '8uyt2m' } }); +const snapInstance = Snapify.search({ id: 'OverlayBadge', globals: { siteId: '8uyt2m' } }); const ObservableOverlayBadge = observer(({ args, controller }: { args: OverlayBadgeProps; controller: SearchController }) => { return ( @@ -130,14 +140,24 @@ Default.loaders = [ response.results[0].badges = [ { - tag: 'free-shipping-overlay', + tag: 'free-shipping', value: 'Free Shipping', }, - ]; - response.results[1].badges = [ { - tag: 'free-shipping-callout', - value: 'Free Shipping', + tag: 'last-one', + value: 'Last One!', + }, + { + tag: 'on-sale', + value: 'On Sale', + }, + { + tag: 'save-percent', + value: 'Save 30%', + }, + { + tag: 'inventory-remaining', + value: '1 in stock', }, ]; @@ -151,7 +171,12 @@ Default.loaders = [ name: 'Left', }, ], - right: [], + right: [ + { + tag: 'right', + name: 'Right', + }, + ], callout: [ { tag: 'callout', @@ -160,23 +185,53 @@ Default.loaders = [ ], }, tags: { - 'free-shipping-overlay': { + 'free-shipping': { location: 'left/left', component: 'BadgeRectangle', priority: 1, enabled: true, parameters: { - color: '#FF0000', + color: '#3A23AD', + colorText: '#FFFFFF', + }, + }, + 'last-one': { + location: 'left/left', + component: 'BadgePill', + priority: 1, + enabled: true, + parameters: { + color: '#515151', colorText: '#FFFFFF', }, }, - 'free-shipping-callout': { - location: 'callout/callout', + 'inventory-remaining': { + location: 'left/left', + component: 'BadgePill', + priority: 1, + enabled: true, + parameters: { + color: '#382F5A', + colorText: '#FFFFFF', + }, + }, + 'on-sale': { + location: 'right/right', + component: 'BadgePill', + priority: 1, + enabled: true, + parameters: { + color: '#00CEE1', + colorText: '#FFFFFF', + }, + }, + 'save-percent': { + location: 'right/right', component: 'BadgeRectangle', priority: 1, enabled: true, parameters: { - color: '#FF0000', + color: '#8F6CF6', colorText: '#FFFFFF', }, }, @@ -184,7 +239,9 @@ Default.loaders = [ }, }; }); + await snapInstance.search(); + return { controller: snapInstance, }; diff --git a/packages/snap-preact-components/src/components/Molecules/OverlayBadge/OverlayBadge.tsx b/packages/snap-preact-components/src/components/Molecules/OverlayBadge/OverlayBadge.tsx index 3a9c35a65..3b1b03f2c 100644 --- a/packages/snap-preact-components/src/components/Molecules/OverlayBadge/OverlayBadge.tsx +++ b/packages/snap-preact-components/src/components/Molecules/OverlayBadge/OverlayBadge.tsx @@ -61,13 +61,14 @@ export const OverlayBadge = observer((properties: OverlayBadgeProps): JSX.Elemen const props: OverlayBadgeProps = { // default props + limit: 1, // global theme ...globalTheme?.components?.overlayBadge, // props ...properties, ...properties.theme?.components?.overlayBadge, }; - const { result, children, controller, renderEmpty, disableStyles, className, style } = props; + const { result, children, controller, renderEmpty, limit, disableStyles, className, style } = props; const styling: { css?: StylingCSS } = {}; @@ -76,7 +77,6 @@ export const OverlayBadge = observer((properties: OverlayBadgeProps): JSX.Elemen return ; } - const limit = 1; const meta = controller?.store?.meta; const group = 'overlay'; const grid = meta?.badges?.groups?.[group]?.grid; @@ -151,4 +151,5 @@ export interface OverlayBadgeProps extends ComponentProps { children: ComponentChildren; renderEmpty?: boolean; componentMap?: ComponentMap; + limit?: number; } diff --git a/packages/snap-preact-components/src/components/Molecules/OverlayBadge/readme.md b/packages/snap-preact-components/src/components/Molecules/OverlayBadge/readme.md index 38583a14f..36ec211f1 100644 --- a/packages/snap-preact-components/src/components/Molecules/OverlayBadge/readme.md +++ b/packages/snap-preact-components/src/components/Molecules/OverlayBadge/readme.md @@ -8,9 +8,9 @@ Renders overlay badges configured in the Searchspring Management Console and ret The required children provided to the component will be wrapped and rendered in a relative div to allow badges to be positioned absolutely. ```jsx - +
- +
``` @@ -19,9 +19,9 @@ The required children provided to the component will be wrapped and rendered in The required `controller` prop specifies a reference to the controller. ```jsx - +
- +
``` @@ -30,9 +30,9 @@ The required `controller` prop specifies a reference to the controller. The required `result` prop specifies a reference to a product object from the `results` store array. ```jsx - +
- +
``` @@ -45,13 +45,13 @@ import { CustomOnSale } from './components/Badges/CustomOnSale'; ... CustomOnSale }} >
- +
``` @@ -61,7 +61,7 @@ The `componentMap` also supports async functions for dynamic importing of badges ```jsx { return (await import('./components/Badges/CustomOnSale')).CustomOnSale; @@ -69,7 +69,7 @@ The `componentMap` also supports async functions for dynamic importing of badges }} >
- +
``` @@ -80,14 +80,25 @@ By default if there are no badges, the wrapper element will not render. If you n ```jsx CustomOnSale }} >
- +
-``` \ No newline at end of file +``` + +### limit +The overlay badge will by default only render a single badge per overlay slot (left and right by default), but the limit can be increased to allow rendering multiple badges in the same location. This allows for "stacking" of the badges in the overlay slots. The order of the stack is determined by the SMC badge configuration. + +```jsx + +```