Remove the unused format prop from ToggleSwitch (#1732)

## What are you changing? - Remove the unused `format` prop from the `ToggleSwitch` component in `@guardian/source-development-kitchen` ## Why? The optional format prop is never used anywhere in the Guardian organisation, implying it is redundant. The component doesn't really do a lot with the format. If a `format` is set, the element gets a slightly different colour palette, but we aren't checking the value of the prop `format`, just whether or not it exists. At best this is overly complex. **Without format:** <img width="279" alt="Screenshot 2024-10-09 at 12 32 52" src="https://github.com/user-attachments/assets/5c8cf409-4619-485a-a006-0eff936cd16f"> **With format:** <img width="380" alt="Screenshot 2024-10-09 at 12 32 43" src="https://github.com/user-attachments/assets/3cd11261-ba5e-4e88-99c4-1509b2899295"> Note: background colour doesn't get applied automatically, this must be manually added to the containing element If we decide we want to keep the alternative colours, we can do so using a flag rather than a `format` prop e.g. `altColourScheme: boolean`. But it should be noted that this alternative colour scheme [is not reflected in the Design System](https://www.figma.com/design/FnCwHWaXPUsyjE0luiI03e/%E2%97%89-Cheat-sheet?m=auto&node-id=2437-73573&t=YGnpuBQPWo6cJ8rR-1).
guardian · Oct 10, 2024 · 61703b4 · 61703b4
2 parents 407a7ba + 18c7e8a
commit 61703b4
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 176 deletions.
diff --git a/.changeset/tame-geese-bathe.md b/.changeset/tame-geese-bathe.md
@@ -0,0 +1,7 @@
+---
+'@guardian/source-development-kitchen': major
+---
+
+Remove `format` prop from `ToggleSwitch` component.
+
+It was not being used anyway.
diff --git a/...an/source-development-kitchen/src/react-components/toggle-switch/ToggleSwitch.stories.tsx b/...an/source-development-kitchen/src/react-components/toggle-switch/ToggleSwitch.stories.tsx
@@ -1,92 +1,16 @@
 import { css } from '@emotion/react';
-import type { ArticleFormat } from '@guardian/libs';
-import {
-	ArticleDesign,
-	ArticleDisplay,
-	ArticlePillar,
-	ArticleSpecial,
-} from '@guardian/libs';
-import {
-	culture,
-	labs,
-	lifestyle,
-	news,
-	opinion,
-	specialReport,
-	sport,
-} from '@guardian/source/foundations';
 import type { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
 import { ToggleSwitch } from './ToggleSwitch';
 import type { ToggleSwitchProps } from './ToggleSwitch';
 
-const decideBackgroundColor = (format?: ArticleFormat) => {
-	if (format) {
-		switch (format.theme) {
-			case ArticlePillar.News:
-				return news[200];
-			case ArticlePillar.Culture:
-				return culture[200];
-			case ArticlePillar.Lifestyle:
-				return lifestyle[300];
-			case ArticlePillar.Sport:
-				return sport[100];
-			case ArticlePillar.Opinion:
-				return opinion[200];
-			case ArticleSpecial.Labs:
-				return labs[200];
-			case ArticleSpecial.SpecialReport:
-				return specialReport[200];
-			default:
-				return news[200];
-		}
-	}
-	return null;
-};
-
-const defaultFormat = {
-	display: ArticleDisplay.Standard,
-	design: ArticleDesign.Standard,
-};
-
-const pillars = [
-	ArticlePillar.News,
-	ArticlePillar.Sport,
-	ArticlePillar.Culture,
-	ArticlePillar.Lifestyle,
-	ArticlePillar.Opinion,
-	ArticleSpecial.SpecialReport,
-	ArticleSpecial.Labs,
-];
-
 const meta: Meta<typeof ToggleSwitch> = {
 	title: 'React Components/ToggleSwitch',
 	component: ToggleSwitch,
 };
 
 export default meta;
 
-const PillarsTemplate: StoryFn<typeof ToggleSwitch> = (
-	args: ToggleSwitchProps,
-) => {
-	return (
-		<div
-			css={css`
-				display: flex;
-				flex-direction: column;
-			`}
-		>
-			{pillars.map((pillar) => (
-				<Template
-					key={pillar}
-					{...args}
-					format={{ ...defaultFormat, theme: pillar }}
-				/>
-			))}
-		</div>
-	);
-};
-
 const Template: StoryFn<typeof ToggleSwitch> = (args: ToggleSwitchProps) => {
 	const [checked, setChecked] = useState(args.checked);
 	return (
@@ -95,7 +19,6 @@ const Template: StoryFn<typeof ToggleSwitch> = (args: ToggleSwitchProps) => {
 				padding: 10px;
 				margin: 10px 0;
 				width: 350px;
-				background-color: ${decideBackgroundColor(args.format)};
 			`}
 		>
 			<ToggleSwitch
@@ -136,15 +59,6 @@ WithBorder.args = {
 
 // *****************************************************************************
 
-export const WithFormat: StoryFn<typeof ToggleSwitch> = PillarsTemplate.bind(
-	{},
-);
-WithFormat.args = {
-	label: 'Get alerts on this story',
-};
-
-// *****************************************************************************
-
 export const WithMediumFont: StoryFn<typeof ToggleSwitch> = Template.bind({});
 WithMediumFont.args = {
 	label: 'Get alerts on this story',

diff --git a/.../@guardian/source-development-kitchen/src/react-components/toggle-switch/ToggleSwitch.tsx b/.../@guardian/source-development-kitchen/src/react-components/toggle-switch/ToggleSwitch.tsx
@@ -1,4 +1,3 @@
-import type { ArticleFormat } from '@guardian/libs';
 import { descriptionId, generateSourceId } from '@guardian/source/foundations';
 import type { Props } from '@guardian/source/react-components';
 import { useEffect, useState } from 'react';
@@ -30,10 +29,6 @@ export interface ToggleSwitchProps extends Props {
 	 * use defaultChecked to indicate the whether the ToggleSwitch is checked initially.
 	 */
 	defaultChecked?: boolean;
-	/**
-	 * Optional Format prop, when provided this renders the toggle with a theme colored tick and light background track
-	 */
-	format?: ArticleFormat;
 	/**
 	 * Optional Id for the switch. Defaults to a generated indexed Source ID e.g. "src-component-XXX}"
 	 */
@@ -83,7 +78,6 @@ export const ToggleSwitch = ({
 	id,
 	fontWeight = 'regular',
 	fontSize = 'small',
-	format,
 	label,
 	labelBorder = false,
 	labelPosition = 'right',
@@ -117,20 +111,16 @@ export const ToggleSwitch = ({
 		<label
 			id={labelId}
 			css={[
-				labelStyles(fontSize, fontWeight, format),
-				labelBorder && labelBorderStyles(format),
+				labelStyles(fontSize, fontWeight),
+				labelBorder && labelBorderStyles,
 				cssOverrides,
 			]}
 			{...props}
 		>
 			{labelPosition === 'left' && label}
 			<button
 				id={buttonId}
-				css={[
-					buttonStyles,
-					buttonStylesMargin(labelPosition),
-					toggleStyles(format),
-				]}
+				css={[buttonStyles, buttonStylesMargin(labelPosition), toggleStyles]}
 				role="switch"
 				aria-checked={isChecked()}
 				aria-labelledby={labelId}

diff --git a/libs/@guardian/source-development-kitchen/src/react-components/toggle-switch/styles.ts b/libs/@guardian/source-development-kitchen/src/react-components/toggle-switch/styles.ts
@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import type { SerializedStyles } from '@emotion/react';
-import type { ArticleFormat } from '@guardian/libs';
 import {
 	brand,
 	neutral,
@@ -17,16 +16,6 @@ import type {
 	ToggleSwitchFontWeight,
 } from './ToggleSwitch';
 
-const toggleBackground = 'rgba(255, 255, 255, 0.4)';
-const toggleBorder = 'rgba(255, 255, 255, 0.6)';
-
-/**
- * This colour represents Palette.success[400] with a 40% opacity white overlay.
- * As we're using it for a border we're unable to add an overlay so use a pre-calculated
- * hex value instead.
- */
-const toggleBorderGreen = '#A7CFB8';
-
 export const buttonStyles = css`
 	flex: none;
 	border: none;
@@ -68,86 +57,83 @@ export const buttonStylesMargin = (
 	}
 };
 
-export const toggleStyles = (format?: ArticleFormat): SerializedStyles => {
-	return css`
-		width: 44px;
-		height: 22px;
-		border-radius: 16px;
-		box-sizing: unset;
-
-		/* this will go away when resets have been standardised */
-		&:before,
-		&:after {
-			box-sizing: border-box;
-		}
+export const toggleStyles = css`
+	width: 44px;
+	height: 22px;
+	border-radius: 16px;
+	box-sizing: unset;
 
-		&:before {
-			content: '';
-			position: absolute;
-			top: 5px;
-			height: 11px;
-			width: 6px;
-			right: 8px;
-			opacity: 0;
-			border-bottom: 2px solid ${success[400]};
-			border-right: 2px solid ${success[400]};
-			transform: rotate(45deg);
-			transition-property: opacity;
-			transition-duration: 0.2s;
-		}
+	/* this will go away when resets have been standardised */
+	&:before,
+	&:after {
+		box-sizing: border-box;
+	}
 
-		&:after {
-			height: 18px;
-			width: 18px;
-			top: 2px;
-			left: 2px;
-		}
+	&:before {
+		content: '';
+		position: absolute;
+		top: 5px;
+		height: 11px;
+		width: 6px;
+		right: 8px;
+		opacity: 0;
+		border-bottom: 2px solid ${success[400]};
+		border-right: 2px solid ${success[400]};
+		transform: rotate(45deg);
+		transition-property: opacity;
+		transition-duration: 0.2s;
+	}
 
-		&[aria-checked='false'] {
-			background-color: ${format ? toggleBackground : neutral[46]};
-			border: 1px solid ${format ? toggleBorder : neutral[46]};
-		}
+	&:after {
+		height: 18px;
+		width: 18px;
+		top: 2px;
+		left: 2px;
+	}
 
-		&[aria-checked='false']:before {
-			transition-delay: 0;
-		}
+	&[aria-checked='false'] {
+		background-color: ${neutral[46]};
+		border: 1px solid ${neutral[46]};
+	}
 
-		&[aria-checked='true'] {
-			background-color: ${success[400]};
-			border: 1px solid ${format ? toggleBorderGreen : success[400]};
-		}
+	&[aria-checked='false']:before {
+		transition-delay: 0;
+	}
 
-		&[aria-checked='true']:before {
-			opacity: 1;
-			z-index: 1;
-			transition-delay: 0.2s;
-		}
+	&[aria-checked='true'] {
+		background-color: ${success[400]};
+		border: 1px solid ${success[400]};
+	}
 
-		&[aria-checked='true']:after {
-			left: 24px;
-			background: ${neutral[100]};
-		}
+	&[aria-checked='true']:before {
+		opacity: 1;
+		z-index: 1;
+		transition-delay: 0.2s;
+	}
 
-		&:focus {
-			outline: 0;
-			html:not(.src-focus-disabled) & {
-				outline: 5px solid ${format ? neutral[100] : brand[500]};
-				outline-offset: 3px;
-			}
+	&[aria-checked='true']:after {
+		left: 24px;
+		background: ${neutral[100]};
+	}
+
+	&:focus {
+		outline: 0;
+		html:not(.src-focus-disabled) & {
+			outline: 5px solid ${brand[500]};
+			outline-offset: 3px;
 		}
-	`;
-};
+	}
+`;
 
 export const labelStyles = (
 	fontSize: ToggleSwitchFontSize,
 	fontWeight: ToggleSwitchFontWeight,
-	format?: ArticleFormat,
 ): SerializedStyles => css`
 	${fontSize === 'small' &&
 	(fontWeight === 'regular' ? textSans15 : textSansBold15)};
 	${fontSize === 'medium' &&
 	(fontWeight === 'regular' ? textSans17 : textSansBold17)};
-	color: ${format ? neutral[100] : neutral[7]};
+	color: ${neutral[7]};
 	display: inline-flex;
 	justify-content: space-between;
 	align-items: center;
@@ -156,10 +142,8 @@ export const labelStyles = (
 	position: relative;
 `;
 
-export const labelBorderStyles = (
-	format?: ArticleFormat,
-): SerializedStyles => css`
-	border-top: 1px solid ${format ? neutral[100] : neutral[46]};
+export const labelBorderStyles = css`
+	border-top: 1px solid ${neutral[46]};
 	padding-top: ${space[1]}px;
 	width: 100%;
 `;