feat: Adds small size badge (#978)

* feat: Adds small size badge * chore: Deletes package-lock.json * chore: Updates yarn dependency * chore: Adds changeset * fix: Fixes badge padding * fix: Fixes linting issue
autoguru-au · Jun 26, 2024 · c4d3c69 · c4d3c69
1 parent ef069b4
commit c4d3c69
Show file tree

Hide file tree

Showing 7 changed files with 2,063 additions and 2,009 deletions.
diff --git a/.changeset/big-falcons-look.md b/.changeset/big-falcons-look.md
@@ -0,0 +1,5 @@
+---
+'@autoguru/overdrive': minor
+---
+
+small size added to badge
diff --git a/packages/overdrive/lib/components/Badge/Badge.css.ts b/packages/overdrive/lib/components/Badge/Badge.css.ts
@@ -9,6 +9,10 @@ export const label = style({
 });
 
 export const labelSize = styleVariants({
+	small: {
+		fontSize: vars.typography.size['1'].fontSize,
+		lineHeight: vars.typography.size['1'].fontSize,
+	},
 	standard: {
 		fontSize: vars.typography.size['2'].fontSize,
 		lineHeight: vars.typography.size['2'].fontSize,

diff --git a/packages/overdrive/lib/components/Badge/Badge.spec.jsx b/packages/overdrive/lib/components/Badge/Badge.spec.jsx
@@ -58,6 +58,33 @@ describe('<Badge />', () => {
 		);
 	});
 
+	it('should apply small size when small size is set', () => {
+		const { container } = render(
+			<Badge size="small" colour="neutral" label="Hello World!" />,
+		);
+		expect(container.firstChild.firstChild).toHaveClass(
+			styles.labelSize.small,
+		);
+	});
+
+	it('should apply standard size when standard size is set', () => {
+		const { container } = render(
+			<Badge size="standard" colour="neutral" label="Hello World!" />,
+		);
+		expect(container.firstChild.firstChild).toHaveClass(
+			styles.labelSize.standard,
+		);
+	});
+
+	it('should apply large size when large size is set', () => {
+		const { container } = render(
+			<Badge size="large" colour="neutral" label="Hello World!" />,
+		);
+		expect(container.firstChild.firstChild).toHaveClass(
+			styles.labelSize.large,
+		);
+	});
+
 	it('should apply minimal style when minimal look is set', () => {
 		const { container } = render(
 			<Badge look="standard" colour="neutral" label="Hello World!" />,

diff --git a/packages/overdrive/lib/components/Badge/Badge.tsx b/packages/overdrive/lib/components/Badge/Badge.tsx
@@ -1,6 +1,6 @@
 import { invariant } from '@autoguru/utilities';
 import * as React from 'react';
-import { FunctionComponent } from 'react';
+import { FunctionComponent, ComponentProps } from 'react';
 
 import { Box } from '../Box';
 import { useTextStyles } from '../Text';
@@ -15,14 +15,25 @@ export interface Props {
 	size?: keyof typeof styles.labelSize;
 }
 
+const paddingXMap: Record<keyof typeof styles.labelSize , ComponentProps<typeof Box>['padding']> = {
+	'small': '1',
+	'standard': '1',
+	'large': '4'
+}
+
+const paddingYMap: Record<keyof typeof styles.labelSize , ComponentProps<typeof Box>['padding']> = {
+	'small': '1',
+	'standard': '1',
+	'large': '4'
+}
+
 export const Badge: FunctionComponent<Props> = ({
 	label,
 	colour = 'neutral',
 	look = 'standard',
 	size = 'standard',
 	className = '',
 }) => {
-	const isStandardSize = size === 'standard';
 	const textStyles = useTextStyles({
 		noWrap: true,
 		fontWeight: 'semiBold',
@@ -46,8 +57,8 @@ export const Badge: FunctionComponent<Props> = ({
 				]}
 				overflow="hidden"
 				display="block"
-				paddingX={isStandardSize ? '1' : '4'}
-				paddingY={isStandardSize ? '1' : '2'}
+				paddingX={paddingXMap[size]}
+				paddingY={paddingYMap[size]}
 				borderRadius="1"
 			>
 				<Box

diff --git a/packages/overdrive/lib/components/Badge/__snapshots__/Badge.spec.jsx.snap b/packages/overdrive/lib/components/Badge/__snapshots__/Badge.spec.jsx.snap
@@ -5,7 +5,7 @@ exports[`<Badge /> should match snapshot with label 1`] = `
   class="reset_block__6swfds3 useBoxStyles_display_flex__7o6k06fb"
 >
   <div
-    class="reset_block__6swfds3 useBoxStyles_makeResponsiveStyle_key_bp__7o6k060 useBoxStyles_makeResponsiveStyle_key_bp__7o6k0614 useBoxStyles_makeResponsiveStyle_key_bp__7o6k0628 useBoxStyles_makeResponsiveStyle_key_bp__7o6k063c useBoxStyles_display_block__7o6k06fa useBoxStyles_overflow_hidden__7o6k06f5 useBoxStyles_makeResponsiveStyle_key_bp__7o6k06cl Badge_labelSize_standard__19rwmn11 Badge_colours_default_neutral__19rwmn13"
+    class="reset_block__6swfds3 useBoxStyles_makeResponsiveStyle_key_bp__7o6k060 useBoxStyles_makeResponsiveStyle_key_bp__7o6k0614 useBoxStyles_makeResponsiveStyle_key_bp__7o6k0628 useBoxStyles_makeResponsiveStyle_key_bp__7o6k063c useBoxStyles_display_block__7o6k06fa useBoxStyles_overflow_hidden__7o6k06f5 useBoxStyles_makeResponsiveStyle_key_bp__7o6k06cl Badge_labelSize_standard__19rwmn12 Badge_colours_default_neutral__19rwmn14"
   >
     <span
       class="reset_inlineText__6swfds2 useBoxStyles_display_block__7o6k06fa useBoxStyles_overflow_hidden__7o6k06f5 useTextStyles_root__w6to7i0 reset_block__6swfds3 useTextStyles_fontWeight_semiBold__w6to7io useTextStyles_noWrap__w6to7iq Badge_label__19rwmn10 useTextStyles_root__w6to7i0 reset_block__6swfds3 useTextStyles_colours_white__w6to7if"

diff --git a/packages/overdrive/lib/components/Badge/stories.tsx b/packages/overdrive/lib/components/Badge/stories.tsx
@@ -58,13 +58,21 @@ standard.args = standardProps;
 export const standardAllColours = templateAllColours.bind(standardProps);
 standardAllColours.args = standardProps;
 
-const standardLargeProps: ComponentProps<typeof Badge> = {
+const largeProps: ComponentProps<typeof Badge> = {
 	...standardProps,
 	size: 'large',
 };
-export const standardLargeAllColours =
-	templateAllColours.bind(standardLargeProps);
-standardLargeAllColours.args = standardLargeProps;
+export const largeAllColours =
+	templateAllColours.bind(largeProps);
+largeAllColours.args = largeProps;
+
+const smallProps: ComponentProps<typeof Badge> = {
+	...standardProps,
+	size: 'small',
+};
+export const smallAllColours =
+	templateAllColours.bind(smallProps);
+smallAllColours.args = smallProps;
 
 const invertedProps: ComponentProps<typeof Badge> = {
 	...standardProps,
@@ -78,7 +86,7 @@ export const invertedAllColours = templateAllColours.bind(invertedProps);
 invertedAllColours.args = invertedProps;
 
 const invertedLargeProps: ComponentProps<typeof Badge> = {
-	...standardLargeProps,
+	...largeProps,
 	look: 'inverted',
 };
 export const invertedLargeAllColours =