feat: initial badge component

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

@@ -54,16 +54,6 @@ export default {
 			},
 			control: { type: 'text' },
 		},
-		overflow: {
-			description: 'Allow badge image to overflow grid cell',
-			table: {
-				type: {
-					summary: 'boolean',
-				},
-				defaultValue: { summary: true },
-			},
-			control: { type: 'boolean' },
-		},
 		...componentArgs,
 	},
 };
@@ -72,5 +62,4 @@ 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',
-	constrain: true,
 };

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

@@ -17,28 +17,6 @@ describe('BadgeImage Component', () => {
 		expect(BadgeImg).toHaveAttribute('alt', BADGE_LABEL);
 	});
 
-	it('renders BadgeImage with overflow prop true', () => {
-		const rendered = render(<BadgeImage url={BADGE_URL} label={BADGE_LABEL} overflow={true} />);
-		const BadgeImg = rendered.container.querySelector('.ss__badge-image')!;
-		expect(BadgeImg).toBeInTheDocument();
-
-		const styles = getComputedStyle(BadgeImg);
-
-		expect(styles.maxHeight).toBe('100%');
-		expect(styles.maxWidth).toBe('100%');
-	});
-
-	it('renders BadgeImage with overflow prop false', () => {
-		const rendered = render(<BadgeImage url={BADGE_URL} label={BADGE_LABEL} overflow={false} />);
-		const BadgeImg = rendered.container.querySelector('.ss__badge-image')!;
-		expect(BadgeImg).toBeInTheDocument();
-
-		const styles = getComputedStyle(BadgeImg);
-
-		expect(styles.maxHeight).toBe('');
-		expect(styles.maxWidth).toBe('unset');
-	});
-
 	describe('BadgeImage theming works', () => {
 		it('is themeable with ThemeProvider', () => {
 			const globalTheme = {

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

@@ -9,10 +9,10 @@ import { Theme, useTheme, CacheProvider } from '../../../providers';
 import { ComponentProps, StylingCSS } from '../../../types';
 
 const CSS = {
-	BadgeImage: (props: BadgeImageProps) => {
+	BadgeImage: () => {
 		return css({
-			maxHeight: props.overflow ? '100%' : undefined,
-			maxWidth: props.overflow ? '100%' : 'unset',
+			maxHeight: '100%',
+			maxWidth: '100%',
 		});
 	},
 };
@@ -22,7 +22,6 @@ export const BadgeImage = observer((properties: BadgeImageProps): JSX.Element =>
 
 	const props: BadgeImageProps = {
 		// default props
-		overflow: false,
 		// global theme
 		...globalTheme?.components?.badgeImage,
 		// props
@@ -34,7 +33,7 @@ export const BadgeImage = observer((properties: BadgeImageProps): JSX.Element =>
 	const styling: { css?: StylingCSS } = {};
 
 	if (!disableStyles) {
-		styling.css = [CSS.BadgeImage(props), style];
+		styling.css = [CSS.BadgeImage(), style];
 	} else if (style) {
 		styling.css = [style];
 	}
@@ -51,5 +50,4 @@ export const BadgeImage = observer((properties: BadgeImageProps): JSX.Element =>
 export interface BadgeImageProps extends ComponentProps {
 	url: string;
 	label?: string;
-	overflow?: boolean;
 }

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

@@ -18,11 +18,3 @@ The `label` prop specifies the badge image `alt` attribute.
 ```jsx
 <BadgeImage label={'example badge'} src={'/images/example.png'} />
 ```
-
-### overflow
-
-The `overflow` prop is disabled by default. It allows a large sized badge image to overflow its grid cell position and therefore overlap badges in other overlay position.
-
-```jsx
-<BadgeImage overflow={false} src={'/images/example.png'} />
-```

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

@@ -33,7 +33,7 @@ export default {
 		),
 	],
 	argTypes: {
-		label: {
+		value: {
 			description: 'Badge text contents',
 			type: { required: true },
 			table: {
@@ -64,24 +64,13 @@ export default {
 			},
 			control: { type: 'color' },
 		},
-		overflow: {
-			description: 'Allow badge sizing to overflow grid cell',
-			table: {
-				type: {
-					summary: 'boolean',
-				},
-				defaultValue: { summary: true },
-			},
-			control: { type: 'boolean' },
-		},
 		...componentArgs,
 	},
 };
 
 export const Default = (args: BadgeTextProps) => <BadgeText {...args} />;
 Default.args = {
-	label: '30% Off',
+	value: '30% Off',
 	color: '#0000FF',
 	colorText: '#FFFFFF',
-	overflow: true,
 };

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

@@ -5,14 +5,14 @@ import { ThemeProvider } from '../../../providers';
 
 import { BadgeText } from './BadgeText';
 
-const BADGE_LABEL = 'example badge';
+const BADGE_VALUE = 'example badge';
 
 describe('BadgeText Component', () => {
-	it('renders BadgeText with label text', () => {
-		const rendered = render(<BadgeText label={BADGE_LABEL} />);
+	it('renders BadgeText with value text', () => {
+		const rendered = render(<BadgeText value={BADGE_VALUE} />);
 		const BadgeTextEl = rendered.container.querySelector('.ss__badge-text')!;
 		expect(BadgeTextEl).toBeInTheDocument();
-		expect(BadgeTextEl).toHaveTextContent(BADGE_LABEL);
+		expect(BadgeTextEl).toHaveTextContent(BADGE_VALUE);
 
 		const styles = getComputedStyle(BadgeTextEl);
 
@@ -24,7 +24,7 @@ describe('BadgeText Component', () => {
 		const color = 'rgb(255, 0, 0)';
 		const colorText = 'rgb(14, 14, 14)';
 
-		const rendered = render(<BadgeText label={BADGE_LABEL} color={color} colorText={colorText} />);
+		const rendered = render(<BadgeText value={BADGE_VALUE} color={color} colorText={colorText} />);
 		const BadgeTextEl = rendered.container.querySelector('.ss__badge-text')!;
 		expect(BadgeTextEl).toBeInTheDocument();
 
@@ -34,32 +34,6 @@ describe('BadgeText Component', () => {
 		expect(styles.color).toBe(colorText);
 	});
 
-	it('renders BadgeText with overflow prop true', () => {
-		const rendered = render(<BadgeText label={BADGE_LABEL} overflow={true} />);
-		const BadgeTextEl = rendered.container.querySelector('.ss__badge-text')!;
-		expect(BadgeTextEl).toBeInTheDocument();
-
-		const styles = getComputedStyle(BadgeTextEl);
-
-		expect(styles.textOverflow).toBe('ellipsis');
-		expect(styles.whiteSpace).toBe('nowrap');
-		expect(styles.overflow).toBe('hidden');
-		expect(styles.maxWidth).toBe('200%');
-	});
-
-	it('renders BadgeText with overflow prop false', () => {
-		const rendered = render(<BadgeText label={BADGE_LABEL} overflow={false} />);
-		const BadgeTextEl = rendered.container.querySelector('.ss__badge-text')!;
-		expect(BadgeTextEl).toBeInTheDocument();
-
-		const styles = getComputedStyle(BadgeTextEl);
-
-		expect(styles.textOverflow).toBe('');
-		expect(styles.whiteSpace).toBe('');
-		expect(styles.overflow).toBe('');
-		expect(styles.maxWidth).toBe('');
-	});
-
 	describe('BadgeText theming works', () => {
 		it('is themeable with ThemeProvider', () => {
 			const globalTheme = {
@@ -71,7 +45,7 @@ describe('BadgeText Component', () => {
 			};
 			const rendered = render(
 				<ThemeProvider theme={globalTheme}>
-					<BadgeText label={BADGE_LABEL} />
+					<BadgeText value={BADGE_VALUE} />
 				</ThemeProvider>
 			);
 			const element = rendered.container.querySelector('.ss__badge-text');
@@ -87,7 +61,7 @@ describe('BadgeText Component', () => {
 					},
 				},
 			};
-			const rendered = render(<BadgeText label={BADGE_LABEL} theme={propTheme} />);
+			const rendered = render(<BadgeText value={BADGE_VALUE} theme={propTheme} />);
 			const element = rendered.container.querySelector('.ss__badge-text');
 			expect(element).toBeInTheDocument();
 			expect(element).toHaveClass(propTheme.components.badgeText.className);
@@ -98,30 +72,30 @@ describe('BadgeText Component', () => {
 				components: {
 					badgeText: {
 						className: 'classy',
-						label: 'oooo',
+						value: 'oooo',
 					},
 				},
 			};
 			const propTheme = {
 				components: {
 					badgeText: {
 						className: 'classier',
-						label: 'ahhhh',
+						value: 'ahhhh',
 					},
 				},
 			};
 			const rendered = render(
 				<ThemeProvider theme={globalTheme}>
-					<BadgeText label={BADGE_LABEL} theme={propTheme} />
+					<BadgeText value={BADGE_VALUE} theme={propTheme} />
 				</ThemeProvider>
 			);
 
 			const element = rendered.container.querySelector('.ss__badge-text');
 			expect(element).toBeInTheDocument();
 			expect(element).toHaveClass(propTheme.components.badgeText.className);
 			expect(element).not.toHaveClass(globalTheme.components.badgeText.className);
-			expect(element).toHaveTextContent(propTheme.components.badgeText.label);
-			expect(element).not.toHaveTextContent(globalTheme.components.badgeText.label);
+			expect(element).toHaveTextContent(propTheme.components.badgeText.value);
+			expect(element).not.toHaveTextContent(globalTheme.components.badgeText.value);
 		});
 	});
 });

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

@@ -4,27 +4,20 @@ import { Fragment, h } from 'preact';
 import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import type { CSSObject } from '@emotion/serialize';
 import { Theme, useTheme, CacheProvider } from '../../../providers';
 import { ComponentProps, StylingCSS } from '../../../types';
 
 const CSS = {
 	BadgeText: (props: BadgeTextProps) => {
-		const overflow: CSSObject = props.overflow
-			? {
-					textOverflow: 'ellipsis',
-					whiteSpace: 'nowrap',
-					overflow: 'hidden',
-					maxWidth: '200%',
-			  }
-			: {};
-
 		return css({
 			display: 'inline-block',
 			padding: '0.2em 0.5em',
 			background: props.color,
 			color: props.colorText,
-			...overflow,
+			textOverflow: 'ellipsis',
+			whiteSpace: 'nowrap',
+			overflow: 'hidden',
+			maxWidth: '100%',
 		});
 	},
 };
@@ -34,7 +27,6 @@ export const BadgeText = observer((properties: BadgeTextProps): JSX.Element => {
 
 	const props: BadgeTextProps = {
 		// default props
-		overflow: true,
 		color: 'rgba(255, 255, 255, 0.5)',
 		colorText: '#000000',
 		// global theme
@@ -43,7 +35,7 @@ export const BadgeText = observer((properties: BadgeTextProps): JSX.Element => {
 		...properties,
 		...properties.theme?.components?.badgeText,
 	};
-	const { label, disableStyles, className, style } = props;
+	const { value, disableStyles, className, style } = props;
 
 	const styling: { css?: StylingCSS } = {};
 
@@ -53,10 +45,10 @@ export const BadgeText = observer((properties: BadgeTextProps): JSX.Element => {
 		styling.css = [style];
 	}
 
-	return label ? (
+	return value ? (
 		<CacheProvider>
 			<div {...styling} className={classnames('ss__badge-text', className)}>
-				{label}
+				{value}
 			</div>
 		</CacheProvider>
 	) : (
@@ -65,8 +57,7 @@ export const BadgeText = observer((properties: BadgeTextProps): JSX.Element => {
 });
 
 export interface BadgeTextProps extends ComponentProps {
-	label: string;
+	value: string;
 	color?: string;
 	colorText?: string;
-	overflow?: boolean;
 }

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

@@ -4,31 +4,24 @@ Renders a text badge. It is expected to be used with `CalloutBadge` and `Overlay
 
 ## Usage
 
-### label
-The required `label` prop specifies the badge text contents.
+### value
+The required `value` prop specifies the badge text contents.
 
 ```jsx
-<BadgeText label={'30% Off'} />
+<BadgeText value={'30% Off'} />
 ```
 
 ### color
 The `color` prop specifies the badge background color.
 
 ```jsx
-<BadgeText color={'rgba(255, 255, 255, 0.5)'} label={'30% Off'} />
+<BadgeText color={'rgba(255, 255, 255, 0.5)'} value={'30% Off'} />
 ```
 
 ### colorText
 The `colorText` prop specifies the badge text color.
 
 ```jsx
-<BadgeText colorText={'#000000'} label={'30% Off'} />
+<BadgeText colorText={'#000000'} value={'30% Off'} />
 ```
 
-### overflow
-
-The `overflow` prop is enabled by default. It allows a badge with long text content to overflow its grid cell position and therefore overlap badges in other overlay position.
-
-```jsx
-<BadgeText overflow={true} label={'30% Off'} />
-```