- css({
+ checkbox: ({ size, color, theme }: Partial) => {
+ const pixelSize = isNaN(Number(size)) ? size : `${size}px`;
+ return css({
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
- height: size,
- width: size,
+ height: pixelSize,
+ width: pixelSize,
border: `1px solid ${color || theme?.colors?.primary || '#333'}`,
'&.ss__checkbox--disabled': {
opacity: 0.7,
},
'& .ss__checkbox__empty': {
display: 'inline-block',
- width: `calc(${size} - 30%)`,
- height: `calc(${size} - 30%)`,
+ width: `calc(${pixelSize} - 30%)`,
+ height: `calc(${pixelSize} - 30%)`,
},
- }),
+ });
+ },
native: () => css({}),
};
@@ -140,7 +142,7 @@ export interface CheckboxProps extends ComponentProps {
icon?: string;
iconColor?: string;
onClick?: (e: React.MouseEvent) => void;
- size?: string;
+ size?: string | number;
startChecked?: boolean;
native?: boolean;
disableA11y?: boolean;
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
+
```
@@ -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
+
- 
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+