Fix some types issues in storybook (#1539)

guardian · Jun 13, 2024 · efb0bc6 · efb0bc6
1 parent b0d59ba
commit efb0bc6
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 45 deletions.
diff --git a/libs/@guardian/source/src/foundations/colour/palette.mdx b/libs/@guardian/source/src/foundations/colour/palette.mdx
@@ -1,6 +1,4 @@
 import { Meta, Story } from '@storybook/blocks';
-import { palette as colours } from './palette';
-import { ColorPalette, ColorItem } from './storybookColorPalette';
 import * as PaletteStories from './palette.stories';
 
 <Meta of={PaletteStories} />

diff --git a/libs/@guardian/source/src/foundations/colour/palette.stories.tsx b/libs/@guardian/source/src/foundations/colour/palette.stories.tsx
@@ -19,39 +19,25 @@ export const Palette = {
 	render: () => (
 		<ColorPalette>
 			{Object.entries(colours).map(([category, shades]) => {
-				/* Storybook is adding displayName and __docgenInfo to exported TS enum:
-						https://github.com/storybookjs/storybook/issues/9832 */
-				// These colours have been deprecated and should not be used.
-				// Skip deprecated colours
-				if (category !== '__docgenInfo' && category !== 'displayName') {
-					const deprecatedColours = {
-						opinion: ['300'],
-						culture: ['350'],
-					};
+				const usableShades = { ...shades };
 
-					const shadesWithoutDeprecated = {};
-
-					for (const shade in shades) {
-						const isShadeDeprecated =
-							deprecatedColours[category]?.includes(shade);
-
-						if (isShadeDeprecated) {
-							continue;
-						} else {
-							shadesWithoutDeprecated[shade] = shades[shade];
-						}
-					}
-
-					return (
-						<ColorItem
-							key={category}
-							title={category}
-							colors={{
-								...shadesWithoutDeprecated,
-							}}
-						/>
-					);
+				// These colours have been deprecated and should not be documented.
+				if (category === 'opinion') {
+					delete usableShades['300' as keyof typeof usableShades];
 				}
+				if (category === 'culture') {
+					delete usableShades['350' as keyof typeof usableShades];
+				}
+
+				return (
+					<ColorItem
+						key={category}
+						title={category}
+						colors={{
+							...usableShades,
+						}}
+					/>
+				);
 			})}
 		</ColorPalette>
 	),

diff --git a/libs/@guardian/source/src/foundations/colour/storybookColorPalette.tsx b/libs/@guardian/source/src/foundations/colour/storybookColorPalette.tsx
@@ -12,10 +12,6 @@ const ItemTitleStyles = css`
 	font-size: 14px;
 `;
 
-const ItemSubtitleStyles = css`
-	color: grey;
-`;
-
 const ItemDescriptionStyles = css`
 	flex: 0 0 30%;
 	line-height: 1;
@@ -127,12 +123,6 @@ const ListStyles = css`
 
 type Colors = string[] | Record<string, string>;
 
-interface ColorItemProps {
-	title: string;
-	subtitle: string;
-	colors: Colors;
-}
-
 const renderSwatch = (color: string, index: number) => (
 	<div css={SwatchStyles(color)} key={`${color} -${index} `} title={color} />
 );
@@ -176,12 +166,17 @@ const renderSwatchSpecimen = (colors: Colors) => {
  * A single color row your styleguide showing title, subtitle and one or more colors, used
  * as a child of `ColorPalette`.
  */
-export const ColorItem = ({ title, subtitle, colors }: ColorItemProps) => {
+export const ColorItem = ({
+	title,
+	colors,
+}: {
+	title: string;
+	colors: Colors;
+}) => {
 	return (
 		<div css={ItemStyles}>
 			<div css={ItemDescriptionStyles}>
 				<div css={ItemTitleStyles}>{title}</div>
-				<div css={ItemSubtitleStyles}>{subtitle}</div>
 			</div>
 			<div css={SwatchesStyles}>{renderSwatchSpecimen(colors)}</div>
 		</div>