Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Stacked Badges #1090

Merged
merged 1 commit into from
Jul 1, 2024
Merged

Stacked Badges #1090

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 69 additions & 13 deletions ...ges/snap-preact-components/src/components/Molecules/CalloutBadge/CalloutBadge.stories.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading