Skip to content

Commit

Permalink
feat(preact-components): adding ability to have "stacked" badges to o…
Browse files Browse the repository at this point in the history 
…verlay and callout badges
  • Loading branch information
@korgon
korgon committed Jul 1, 2024
1 parent ecf2e7b commit 1fd1767
Show file tree
Hide file tree
Showing 6 changed files with 186 additions and 52 deletions.
82 changes: 69 additions & 13 deletions ...ges/snap-preact-components/src/components/Molecules/CalloutBadge/CalloutBadge.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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 <CalloutBadge {...args} result={controller?.store?.results[1] as Product} />;
return <CalloutBadge {...args} result={controller?.store?.results[0] as Product} />;
});

export const Default = (args: CalloutBadgeProps, { loaded: { controller } }: { loaded: { controller: SearchController } }) => {
Expand All @@ -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',
},
];

Expand All @@ -139,7 +159,12 @@ Default.loaders = [
name: 'Left',
},
],
right: [],
right: [
{
tag: 'right',
name: 'Right',
},
],
callout: [
{
tag: 'callout',
Expand All @@ -148,30 +173,61 @@ 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',
},
},
},
},
};
});

await snapInstance.search();

return {
Expand Down
6 changes: 4 additions & 2 deletions packages/snap-preact-components/src/components/Molecules/CalloutBadge/CalloutBadge.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const CSS = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
gap: '5px',
}),
};

Expand All @@ -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 } = {};

Expand All @@ -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) {
Expand All @@ -69,4 +70,5 @@ export interface CalloutBadgeProps extends ComponentProps {
tag?: string;
renderEmpty?: boolean;
componentMap?: ComponentMap;
limit?: number;
}
25 changes: 16 additions & 9 deletions packages/snap-preact-components/src/components/Molecules/CalloutBadge/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
<CalloutBadge tag={'callout'} result={controller.store.results[0]} />
<CalloutBadge result={result} />
```

### componentMap
Expand All @@ -19,8 +19,7 @@ The `componentMap` prop allows for custom badge components. This functionallity
import { CustomOnSale } from './components/Badges/CustomOnSale';
...
<CalloutBadge
tag={'callout'}
result={controller.store.results[0]}
result={result}
componentMap={{
'customOnSaleBadge': () => CustomOnSale
}}
Expand All @@ -31,8 +30,7 @@ The `componentMap` also supports async functions for dynamic importing of badges

```jsx
<CalloutBadge
tag={'callout'}
result={controller.store.results[0]}
result={result}
componentMap={{
'customOnSaleBadge': () => {
return (await import('./components/Badges/CustomOnSale')).CustomOnSale;
Expand All @@ -47,17 +45,26 @@ By default if there are no badges, the wrapper element will not render. If you n
```jsx
<CalloutBadge
renderEmpty
tag={'callout'}
result={controller.store.results[0]}
result={result}
componentMap={{
'customOnSaleBadge': () => 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
<CalloutBadge
limit={3}
result={result}
/>
```

### 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
<CalloutBadge tag={'callout'} result={controller.store.results[0]} />
<CalloutBadge tag={'callout'} result={result} />
```
81 changes: 69 additions & 12 deletions ...ges/snap-preact-components/src/components/Molecules/OverlayBadge/OverlayBadge.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -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',
},
];

Expand All @@ -151,7 +171,12 @@ Default.loaders = [
name: 'Left',
},
],
right: [],
right: [
{
tag: 'right',
name: 'Right',
},
],
callout: [
{
tag: 'callout',
Expand All @@ -160,31 +185,63 @@ 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',
},
},
},
},
};
});

await snapInstance.search();

return {
controller: snapInstance,
};
Expand Down
Loading

0 comments on commit 1fd1767

Please sign in to comment.