feat: initial badge component

packages/snap-client/src/Client/Client.ts

@@ -188,13 +188,15 @@ export class Client {
 			siteId: params.siteId || this.globals.siteId,
 		};
 
-		const [profile, recommendations] = await Promise.all([
+		const [meta, profile, recommendations] = await Promise.all([
+			this.meta(params.siteId ? { siteId: params.siteId } : undefined),
 			this.requesters.recommend.getProfile(profileParams),
 			this.requesters.recommend.batchRecommendations(recommendParams),
 		]);
 
 		return {
 			...profile,
+			meta,
 			results: recommendations[0].results,
 		};
 	}

packages/snap-client/src/Client/NetworkCache/NetworkCache.test.ts

@@ -115,7 +115,7 @@ describe('Network Cache', () => {
 		const cacheConfig = {
 			ttl: 1000,
 			enabled: true,
-			maxSize: 2, // KB
+			maxSize: 4, // KB
 			purgeable: true,
 		};
 
@@ -169,7 +169,7 @@ describe('Network Cache', () => {
 			const cacheConfig = {
 				ttl: 1000,
 				enabled: true,
-				maxSize: 2, // KB
+				maxSize: 4, // KB
 				purgeable: false,
 			};
 

packages/snap-client/src/types.ts

@@ -1,5 +1,11 @@
 import { AppMode } from '@searchspring/snap-toolbox';
-import type { MetaRequestModel, SearchResponseModelResult, SearchRequestModel, AutocompleteRequestModel } from '@searchspring/snapi-types';
+import type {
+	MetaRequestModel,
+	SearchResponseModelResult,
+	SearchRequestModel,
+	AutocompleteRequestModel,
+	MetaResponseModel,
+} from '@searchspring/snapi-types';
 
 export type HTTPHeaders = { [key: string]: string };
 
@@ -193,4 +199,4 @@ type RecommendationRequestValueFilterModel = {
 	value: string | number;
 };
 
-export type RecommendCombinedResponseModel = ProfileResponseModel & { results: SearchResponseModelResult[] };
+export type RecommendCombinedResponseModel = ProfileResponseModel & { results: SearchResponseModelResult[] } & { meta: MetaResponseModel };

packages/snap-preact-components/src/components/Atoms/BadgeImage/BadgeImage.stories.tsx

@@ -0,0 +1,65 @@
+import { h } from 'preact';
+
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+
+import { BadgeImageProps, BadgeImage } from './BadgeImage';
+import { componentArgs } from '../../../utilities';
+import Readme from '../BadgeImage/readme.md';
+
+export default {
+	title: `Atoms/BadgeImage`,
+	component: BadgeImage,
+	parameters: {
+		docs: {
+			page: () => (
+				<div>
+					<Readme />
+					<ArgsTable story={PRIMARY_STORY} />
+				</div>
+			),
+		},
+	},
+	decorators: [
+		(Story: any) => (
+			<div
+				style={{
+					width: '200px',
+					height: '200px',
+					border: '2px dotted lightgrey',
+				}}
+			>
+				<Story />
+			</div>
+		),
+	],
+	argTypes: {
+		url: {
+			description: 'Badge image url',
+			type: { required: true },
+			table: {
+				type: {
+					summary: 'string',
+				},
+				defaultValue: { summary: '' },
+			},
+			control: { type: 'text' },
+		},
+		label: {
+			description: 'Badge image alt text',
+			table: {
+				type: {
+					summary: 'string',
+				},
+				defaultValue: { summary: '' },
+			},
+			control: { type: 'text' },
+		},
+		...componentArgs,
+	},
+};
+
+export const Default = (args: BadgeImageProps) => <BadgeImage {...args} />;
+Default.args = {
+	url: '//cdn.searchspring.net/ajax_search/img/star-badge-new-blue.png',
+	label: 'placeholder badge image',
+};

packages/snap-preact-components/src/components/Atoms/BadgeImage/BadgeImage.test.tsx

@@ -0,0 +1,84 @@
+import { h } from 'preact';
+
+import { render } from '@testing-library/preact';
+import { ThemeProvider } from '../../../providers';
+
+import { BadgeImage } from './BadgeImage';
+
+const BADGE_URL = '/images/example.png';
+const BADGE_LABEL = 'example badge';
+
+describe('BadgeImage Component', () => {
+	it('renders BadgeImage with image src and alt text', () => {
+		const rendered = render(<BadgeImage url={BADGE_URL} label={BADGE_LABEL} />);
+		const BadgeImg = rendered.container.querySelector('.ss__badge-image');
+		expect(BadgeImg).toBeInTheDocument();
+		expect(BadgeImg).toHaveAttribute('src', BADGE_URL);
+		expect(BadgeImg).toHaveAttribute('alt', BADGE_LABEL);
+	});
+
+	describe('BadgeImage theming works', () => {
+		it('is themeable with ThemeProvider', () => {
+			const globalTheme = {
+				components: {
+					badgeImage: {
+						className: 'classy',
+					},
+				},
+			};
+			const rendered = render(
+				<ThemeProvider theme={globalTheme}>
+					<BadgeImage url={BADGE_URL} label={BADGE_LABEL} />
+				</ThemeProvider>
+			);
+			const element = rendered.container.querySelector('.ss__badge-image');
+			expect(element).toBeInTheDocument();
+			expect(element).toHaveClass(globalTheme.components.badgeImage.className);
+		});
+
+		it('is themeable with theme prop', () => {
+			const propTheme = {
+				components: {
+					badgeImage: {
+						className: 'classy',
+					},
+				},
+			};
+			const rendered = render(<BadgeImage url={BADGE_URL} label={BADGE_LABEL} theme={propTheme} />);
+			const element = rendered.container.querySelector('.ss__badge-image');
+			expect(element).toBeInTheDocument();
+			expect(element).toHaveClass(propTheme.components.badgeImage.className);
+		});
+
+		it('is theme prop overrides ThemeProvider', () => {
+			const globalTheme = {
+				components: {
+					badgeImage: {
+						className: 'classy',
+						label: 'oooo',
+					},
+				},
+			};
+			const propTheme = {
+				components: {
+					badgeImage: {
+						className: 'classier',
+						label: 'ahhhh',
+					},
+				},
+			};
+			const rendered = render(
+				<ThemeProvider theme={globalTheme}>
+					<BadgeImage url={BADGE_URL} label={BADGE_LABEL} theme={propTheme} />
+				</ThemeProvider>
+			);
+
+			const element = rendered.container.querySelector('.ss__badge-image');
+			expect(element).toBeInTheDocument();
+			expect(element).toHaveClass(propTheme.components.badgeImage.className);
+			expect(element).not.toHaveClass(globalTheme.components.badgeImage.className);
+			expect(element).toHaveAttribute('alt', propTheme.components.badgeImage.label);
+			expect(element).not.toHaveAttribute('alt', globalTheme.components.badgeImage.label);
+		});
+	});
+});

packages/snap-preact-components/src/components/Atoms/BadgeImage/BadgeImage.tsx

@@ -0,0 +1,53 @@
+/** @jsx jsx */
+import { Fragment, h } from 'preact';
+
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+
+import { Theme, useTheme, CacheProvider } from '../../../providers';
+import { ComponentProps, StylingCSS } from '../../../types';
+
+const CSS = {
+	BadgeImage: () => {
+		return css({
+			maxHeight: '100%',
+			maxWidth: '100%',
+		});
+	},
+};
+
+export const BadgeImage = observer((properties: BadgeImageProps): JSX.Element => {
+	const globalTheme: Theme = useTheme();
+
+	const props: BadgeImageProps = {
+		// default props
+		// global theme
+		...globalTheme?.components?.badgeImage,
+		// props
+		...properties,
+		...properties.theme?.components?.badgeImage,
+	};
+	const { label, url, disableStyles, className, style } = props;
+
+	const styling: { css?: StylingCSS } = {};
+
+	if (!disableStyles) {
+		styling.css = [CSS.BadgeImage(), style];
+	} else if (style) {
+		styling.css = [style];
+	}
+
+	return url ? (
+		<CacheProvider>
+			<img {...styling} className={classnames('ss__badge-image', className)} alt={label} src={url} />
+		</CacheProvider>
+	) : (
+		<Fragment />
+	);
+});
+
+export interface BadgeImageProps extends ComponentProps {
+	url: string;
+	label?: string;
+}

packages/snap-preact-components/src/components/Atoms/BadgeImage/index.ts

@@ -0,0 +1 @@
+export * from './BadgeImage';

packages/snap-preact-components/src/components/Atoms/BadgeImage/readme.md

@@ -0,0 +1,20 @@
+# BadgeImage
+
+Renders an image badge. It is expected to be used with `CalloutBadge` and `OverlayBadge` components.
+
+## Usage
+
+### url
+The required `url` prop specifies the badge image `src` attribute.
+
+```jsx
+<BadgeImage src={'/images/example.png'} />
+```
+
+
+### label
+The `label` prop specifies the badge image `alt` attribute. 
+
+```jsx
+<BadgeImage label={'example badge'} src={'/images/example.png'} />
+```

packages/snap-preact-components/src/components/Atoms/BadgeText/BadgeText.stories.tsx

@@ -0,0 +1,76 @@
+import { h } from 'preact';
+
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+
+import { BadgeTextProps, BadgeText } from './BadgeText';
+import { componentArgs } from '../../../utilities';
+import Readme from '../BadgeText/readme.md';
+
+export default {
+	title: `Atoms/BadgeText`,
+	component: BadgeText,
+	parameters: {
+		docs: {
+			page: () => (
+				<div>
+					<Readme />
+					<ArgsTable story={PRIMARY_STORY} />
+				</div>
+			),
+		},
+	},
+	decorators: [
+		(Story: any) => (
+			<div
+				style={{
+					width: '200px',
+					height: '200px',
+					border: '2px dotted lightgrey',
+				}}
+			>
+				<Story />
+			</div>
+		),
+	],
+	argTypes: {
+		value: {
+			description: 'Badge text contents',
+			type: { required: true },
+			table: {
+				type: {
+					summary: 'string',
+				},
+				defaultValue: { summary: '' },
+			},
+			control: { type: 'text' },
+		},
+		color: {
+			description: 'Badge background color',
+			table: {
+				type: {
+					summary: 'string',
+				},
+				defaultValue: { summary: 'rgba(255, 255, 255, 0.5)' },
+			},
+			control: { type: 'color' },
+		},
+		colorText: {
+			description: 'Badge text color',
+			table: {
+				type: {
+					summary: 'string',
+				},
+				defaultValue: { summary: '#000000' },
+			},
+			control: { type: 'color' },
+		},
+		...componentArgs,
+	},
+};
+
+export const Default = (args: BadgeTextProps) => <BadgeText {...args} />;
+Default.args = {
+	value: '30% Off',
+	color: '#0000FF',
+	colorText: '#FFFFFF',
+};