feat: Adds new colors and animation to switch (#983)

* feat: Adds new colors and animation to switch feat: Adds new colors and animation to switch * test: Updates snapshots test: Updates snapshots * refactor: Refactors to React Aria refactor: Refactors to React Aria * feat: changes size of switch and disables cursor feat: changes size of switch and disables cursor * feat: Adds focus ring feat: Adds focus ring * chore: Removes unused import chore: Removes unused import * fix: Updates tests fix: Updates tests * feat: Adds primary theme and opacity feat: Adds primary theme and opacity * feat: Adds primary theme and opacity feat: Adds primary theme and opacity * feat: Adds backwards compatibility * feat: Adds backwards compatibility * test: Updates snapshots * chore: Limits chromatic snapshots for Image component * feat: Fixes colors across themes feat: Fixes colors across themes * refactor: Deletes main2.js file * feat: Fixes button primary color * fix: Reverts standard color to 900 * feat: Fixes untoggled border color * feat: Reverts button to previous colors --------- Co-authored-by: Amir Zahedi <amir.zahedi@gmail.com>
autoguru-au · Sep 9, 2024 · 78ded1c · 78ded1c
1 parent e49521b
commit 78ded1c
Show file tree

Hide file tree

Showing 22 changed files with 1,524 additions and 272 deletions.
diff --git a/.changeset/giant-dolls-mate.md b/.changeset/giant-dolls-mate.md
@@ -0,0 +1,5 @@
+---
+'@autoguru/overdrive': minor
+---
+
+Enhances the looks and behaviours of Switch component
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -103,40 +103,38 @@ const withThemeProvider = (Story, context) => {
 			</Box>
 		</ThemeOverrideProvider>
 	) : (
-		Object.keys(themes)
-			.filter((theme) => theme !== 'neutralTheme')
-			.map((theme) => (
-				<div
-					key={themes[theme].name}
-					className={themes[theme].themeRef}
-					data-theme={themes[theme].name}
+		Object.keys(themes).map((theme) => (
+			<div
+				key={themes[theme].name}
+				className={themes[theme].themeRef}
+				data-theme={themes[theme].name}
+			>
+				<OverdriveProvider
+					noBodyLevelTheming
+					themeClass={themes[theme].themeRef}
+					tokens={themes[theme].tokens}
+					vars={themes[theme].vars}
 				>
-					<OverdriveProvider
-						noBodyLevelTheming
-						themeClass={themes[theme].themeRef}
-						tokens={themes[theme].tokens}
-						vars={themes[theme].vars}
-					>
-						<Box width="full" padding="5">
-							<Stack width="full" space="3">
-								<Heading is="h5" colour="light">
-									Theme :: {themes[theme].name}
-								</Heading>
+					<Box width="full" padding="5">
+						<Stack width="full" space="3">
+							<Heading is="h5" colour="light">
+								Theme :: {themes[theme].name}
+							</Heading>
 
-								<Story {...context} />
-							</Stack>
-						</Box>
-						<hr
-							style={{
-								margin: 0,
-								border: 0,
-								height: 1,
-								background: '#eee',
-							}}
-						/>
-					</OverdriveProvider>
-				</div>
-			))
+							<Story {...context} />
+						</Stack>
+					</Box>
+					<hr
+						style={{
+							margin: 0,
+							border: 0,
+							height: 1,
+							background: '#eee',
+						}}
+					/>
+				</OverdriveProvider>
+			</div>
+		))
 	);
 };
 

diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
 		"storybook:extract": "npx sb extract",
 		"storybook": "start-storybook -p 6006 -s public",
 		"storybook:build": "build-storybook -s public && yarn run copy:public",
-    "copy:public": "node scripts/copyPublic.js",
+		"copy:public": "node scripts/copyPublic.js",
 		"test": "jest"
 	},
 	"browserslist": "extends browserslist-config-autoguru",

diff --git a/packages/overdrive/lib/components/Badge/Badge.tsx b/packages/overdrive/lib/components/Badge/Badge.tsx
@@ -15,17 +15,23 @@ 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 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'
-}
+const paddingYMap: Record<
+	keyof typeof styles.labelSize,
+	ComponentProps<typeof Box>['padding']
+> = {
+	small: '1',
+	standard: '1',
+	large: '4',
+};
 
 export const Badge: FunctionComponent<Props> = ({
 	label,

diff --git a/packages/overdrive/lib/components/Badge/stories.tsx b/packages/overdrive/lib/components/Badge/stories.tsx
@@ -62,16 +62,14 @@ const largeProps: ComponentProps<typeof Badge> = {
 	...standardProps,
 	size: 'large',
 };
-export const largeAllColours =
-	templateAllColours.bind(largeProps);
+export const largeAllColours = templateAllColours.bind(largeProps);
 largeAllColours.args = largeProps;
 
 const smallProps: ComponentProps<typeof Badge> = {
 	...standardProps,
 	size: 'small',
 };
-export const smallAllColours =
-	templateAllColours.bind(smallProps);
+export const smallAllColours = templateAllColours.bind(smallProps);
 smallAllColours.args = smallProps;
 
 const invertedProps: ComponentProps<typeof Badge> = {

diff --git a/packages/overdrive/lib/components/Image/stories.tsx b/packages/overdrive/lib/components/Image/stories.tsx
@@ -1,4 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import isChromatic from 'chromatic/isChromatic';
 import * as React from 'react';
 import { ComponentProps } from 'react';
 
@@ -9,24 +10,29 @@ import { ImageServerProvider, widthMap } from './ImageServerProvider';
 
 import { Image } from '.';
 
-const sizeOptions: Array<ComponentProps<typeof Image>['imageWidth']> = [
-	'1',
-	'2',
-	'3',
-	'4',
-	'5',
-	'6',
-	'7',
-	'8',
-	'9',
-	'10',
-	'11',
-	'12',
-	'13',
-	'14',
-	'15',
-	'16',
-];
+const sizeOptions: Array<ComponentProps<typeof Image>['imageWidth']> =
+	isChromatic()
+		? ['8']
+		: [
+				'1',
+				'2',
+				'3',
+				'4',
+				'5',
+				'6',
+				'7',
+				'8',
+				'9',
+				'10',
+				'11',
+				'12',
+				'13',
+				'14',
+				'15',
+				'16',
+		  ];
+const qualityOptions: Array<ComponentProps<typeof Image>['quality']> =
+	isChromatic() ? ['70'] : [1, 20, 40, 60, 80, 100];
 export default {
 	title: 'Foundation/Image/Image',
 	component: Image, //Breaks the docs when enabled!
@@ -136,7 +142,7 @@ const AllQualityTemplate: ComponentStory<typeof Image> = (args) => (
 	<ImageServerProvider srcUrlMapper={srcUrlMapper}>
 		<div style={{ width: '100%', overflow: 'auto' }}>
 			<Stack space="5">
-				{[1, 20, 40, 60, 80, 100].map((quality) => (
+				{qualityOptions.map((quality) => (
 					<Stack key={quality} space="1">
 						<Text>
 							Quality: <Text strong>{quality}</Text>

diff --git a/packages/overdrive/lib/components/NumberInput/NumberInput.tsx b/packages/overdrive/lib/components/NumberInput/NumberInput.tsx
@@ -11,7 +11,7 @@ const isEdge: boolean =
 
 const type = isEdge ? 'text' : 'number';
 
-const MAX_NUMBER_INPUT_VALUE= 2_147_483_647;
+const MAX_NUMBER_INPUT_VALUE = 2_147_483_647;
 
 interface Props
 	extends Partial<Pick<HTMLInputElement, 'min' | 'max' | 'step'>>,
@@ -23,8 +23,7 @@ interface Props
 	max?: string;
 }
 
-export const NumberInput
-	= withEnhancedInput<Props>(
+export const NumberInput = withEnhancedInput<Props>(
 	({
 		field: { ref, ...incomingFieldProps },
 		eventHandlers,

diff --git a/packages/overdrive/lib/components/NumberInput/stories.tsx b/packages/overdrive/lib/components/NumberInput/stories.tsx
@@ -85,8 +85,8 @@ const argTypes: ArgTypes = {
 		description: 'Set the max length of the number',
 		control: {
 			type: 'number',
-		}
-	}
+		},
+	},
 };
 
 const Template: ComponentStory<typeof NumberInput> = ({

diff --git a/packages/overdrive/lib/components/Switch/Switch.css.ts b/packages/overdrive/lib/components/Switch/Switch.css.ts
@@ -3,55 +3,85 @@ import { style, styleVariants } from '@vanilla-extract/css';
 import { themeContractVars as vars } from '../../themes/theme.css';
 
 const handleSize = '24px';
-const handleOffset = '2px';
+const handleOffset = '3px';
 const borderSize = '1px';
 
 export const handle = styleVariants({
+	disabled: {
+		border: `${borderSize} solid ${vars.colours.intent.primary.background.mild}`,
+	},
 	default: {
-		borderColor: vars.border.colours.gray,
+		borderSize: `${borderSize}`, //ball
 		top: `calc(${handleOffset} - ${borderSize})`,
-		left: `calc(${handleOffset} - ${borderSize})`,
-		width: `${handleSize}`,
-		height: `${handleSize}`,
+		left: `calc(1.5 * ${handleOffset})`,
+		width: `calc(${handleSize} - (2 * ${handleOffset}))`,
+		height: `calc(${handleSize} - (2 * ${handleOffset}))`,
 		transition: 'transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
 		willChange: 'transform',
+		selectors: {
+			'&:hover': {
+				transform: 'scale(0.9)',
+			},
+		},
 	},
 	transition: {
 		transform: `translateX(calc(${handleSize} - (2 * ${handleOffset})))`,
-		borderColor: vars.colours.intent.primary.background.strong,
+		selectors: {
+			'&:hover': {
+				transform: `translateX(calc(${handleSize} - (2 * ${handleOffset}))) scale(0.9)`,
+			},
+		},
 	},
 });
 
 export const toggled = style({
-	borderColor: vars.colours.intent.primary.background.strong,
-	backgroundColor: vars.colours.intent.primary.background.standard,
+	border: `${borderSize} solid ${vars.colours.intent.primary.background.strong}`,
+	backgroundColor: vars.colours.intent.primary.background.strong,
+});
+
+export const untoggled = style({
+	border: `${borderSize} solid color-mix(in oklch, ${vars.colours.intent.primary.background.standard}, transparent 60%)`,
+	backgroundColor: vars.colours.intent.primary.background.mild,
+	transition: '0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
+	selectors: {
+		'&:hover': {
+			borderColor: vars.colours.intent.primary.background.strong,
+			backgroundColor: vars.colours.intent.primary.background.strong,
+		},
+	},
 });
 
 export const disabled = styleVariants({
 	default: {
 		selectors: {
 			'&[aria-disabled=true]': {
 				cursor: 'not-allowed',
-				borderColor: vars.border.colours.light,
-				backgroundColor: vars.border.colours.light,
+				border: `${borderSize} solid ${vars.colours.intent.primary.background.mild}`,
+				backgroundColor: 'white',
 			},
 		},
 	},
 	toggled: {
 		selectors: {
 			'&[aria-disabled=true]': {
-				borderColor: vars.border.colours.light,
-				backgroundColor: vars.colours.intent.primary.background.mild,
+				cursor: 'not-allowed',
+				border: `${borderSize} solid ${vars.colours.intent.primary.background.mild}`,
+				backgroundColor: 'white',
 			},
 		},
 	},
 });
 
+export const focus = style({
+	outline: `calc(${handleOffset} - ${borderSize}) solid ${vars.colours.intent.brand.background.standard}`,
+});
+
 export const root = style({
-	width: `calc((2 * ${handleSize}) + ${handleOffset} - 2 * ${borderSize})`,
-	height: `calc(${handleSize} + (${handleOffset} * 2))`,
+	width: `calc((2 * ${handleSize}) - 2 * ${borderSize})`, //pill
+	height: `${handleSize}`,
+	top: `calc(${handleOffset} - ${borderSize})`,
+	left: `calc(1.5 * ${handleOffset})`,
 	transition: 'background-color 0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
-	border: `${borderSize} solid ${vars.border.colours.light}`,
 	selectors: {
 		[`&:not(${disabled.default}):not(${disabled.toggled}):focus`]: {
 			borderColor: vars.colours.intent.information.background.standard,