Migrate final versions of Source files

libs/@guardian/eslint-plugin-source-foundations/package.json

@@ -1,24 +1,26 @@
 {
 	"name": "@guardian/eslint-plugin-source-foundations",
-	"version": "5.0.1",
+	"version": "8.0.0",
 	"description": "ESLint plugin for Guardian projects using the `@guardian/source-foundations` package.",
 	"dependencies": {
 		"@typescript-eslint/eslint-plugin": "5.21.0",
 		"@typescript-eslint/parser": "5.21.0",
 		"eslint-plugin-import": "2.26.0"
 	},
 	"devDependencies": {
-		"@guardian/eslint-config": "workspace:*",
-		"@guardian/eslint-config-typescript": "workspace:*",
-		"@guardian/libs": "workspace:*",
-		"@guardian/source-foundations": "workspace:*",
+		"@guardian/eslint-config": "1.0.0",
+		"@guardian/eslint-config-typescript": "1.0.0",
+		"@guardian/libs": "9.0.0",
+		"@guardian/source-foundations": "7.0.0",
 		"@types/eslint": "8.4.6",
 		"@types/estree": "0.0.51",
-		"eslint": "8.0.0"
+		"eslint": "8.0.0",
+		"tslib": "2.4.0",
+		"web-vitals": "2.0.0"
 	},
 	"peerDependencies": {
-		"@guardian/libs": "workspace:*",
-		"@guardian/source-foundations": "workspace:*",
-		"eslint": "workspace:^"
+		"@guardian/libs": "^9.0.0",
+		"@guardian/source-foundations": "^7.0.0",
+		"eslint": "^8.0.0"
 	}
 }

libs/@guardian/eslint-plugin-source-react-components/package.json

@@ -1,23 +1,26 @@
 {
 	"name": "@guardian/eslint-plugin-source-react-components",
-	"version": "7.0.0",
+	"version": "10.0.0",
 	"description": "ESLint plugin for Guardian projects using the `@guardian/source-react-components` package.",
 	"dependencies": {
 		"@typescript-eslint/eslint-plugin": "5.21.0",
 		"@typescript-eslint/parser": "5.21.0"
 	},
 	"devDependencies": {
-		"@guardian/eslint-config": "workspace:*",
-		"@guardian/eslint-config-typescript": "workspace:*",
-		"@guardian/libs": "workspace:*",
-		"@guardian/source-react-components": "workspace:*",
+		"@guardian/eslint-config": "1.0.0",
+		"@guardian/eslint-config-typescript": "1.0.0",
+		"@guardian/libs": "9.0.0",
+		"@guardian/source-foundations": "7.0.0",
+		"@guardian/source-react-components": "9.0.0",
 		"@types/eslint": "8.4.6",
 		"@types/estree": "0.0.51",
-		"eslint": "8.0.0"
+		"eslint": "8.0.0",
+		"tslib": "2.4.0",
+		"web-vitals": "2.0.0"
 	},
 	"peerDependencies": {
-		"@guardian/libs": "workspace:*",
-		"@guardian/source-react-components": "workspace:*",
-		"eslint": "workspace:^"
+		"@guardian/libs": "^9.0.0",
+		"@guardian/source-react-components": "^9.0.0",
+		"eslint": "^8.0.0"
 	}
 }

libs/@guardian/source-foundations/package.json

@@ -1,10 +1,10 @@
 {
 	"name": "@guardian/source-foundations",
-	"version": "5.2.1",
+	"version": "7.0.1",
 	"license": "Apache-2.0",
 	"sideEffects": false,
 	"dependencies": {
-		"mini-svg-data-uri": "1.4.4"
+		"mini-svg-data-uri": "^1.3.3"
 	},
 	"devDependencies": {
 		"lightningcss": "^1.16.1"

libs/@guardian/source-react-components-development-kitchen/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @guardian/source-react-components-development-kitchen
 
+## 7.0.0
+
+### Major Changes
+
+- f83640ca: Visually hide StarRating's <figcaption> element
+
+### Minor Changes
+
+- f83640ca: Remove aria-role=complementary from StarRating
+
+### Patch Changes
+
+- 28af724b: The expanding wrapper should manage the tabIndex of child nodes when the wrapper is collapsed
+- f83640ca: Change StarRating caption for 0 stars from 'zero star' to 'zero stars'
+
+## 6.1.2
+
+### Patch Changes
+
+- fada52db: Add theming and a dark theme to the Expanding Wrapper
+
+## 6.1.1
+
+### Patch Changes
+
+- c6e1a9b9: Export the Expanding Wrapper
+
+## 6.1.0
+
+### Minor Changes
+
+- febd9d2c: Adds an expanding wrapper component
+
 ## 6.0.3
 
 ### Patch Changes

libs/@guardian/source-react-components-development-kitchen/package.json

@@ -1,19 +1,21 @@
 {
 	"name": "@guardian/source-react-components-development-kitchen",
-	"version": "3.1.10",
+	"version": "7.0.0",
 	"sideEffects": false,
 	"devDependencies": {
 		"@emotion/react": "11.0.0",
-		"@guardian/libs": "workspace:*",
-		"@guardian/source-foundations": "workspace:*",
-		"@guardian/source-react-components": "workspace:*",
-		"react": "17.0.1"
+		"@guardian/libs": "9.0.0",
+		"@guardian/source-foundations": "7.0.0",
+		"@guardian/source-react-components": "9.0.0",
+		"react": "17.0.1",
+		"tslib": "2.4.0",
+		"web-vitals": "2.0.0"
 	},
 	"peerDependencies": {
-		"@emotion/react": "workspace:^",
-		"@guardian/libs": "workspace:*",
-		"@guardian/source-foundations": "workspace:*",
-		"@guardian/source-react-components": "workspace:*",
-		"react": "workspace:^"
+		"@emotion/react": "^11.0.0",
+		"@guardian/libs": "^9.0.0",
+		"@guardian/source-foundations": "^7.0.0",
+		"@guardian/source-react-components": "^9.0.0",
+		"react": "^17.0.1"
 	}
 }

libs/@guardian/source-react-components-development-kitchen/src/expanding-wrapper/ExpandingWrapper.stories.tsx

@@ -0,0 +1,132 @@
+import { css } from '@emotion/react';
+import { neutral } from '@guardian/source-foundations';
+import type { ReactElement } from 'react';
+import { ExpandingWrapper } from './ExpandingWrapper';
+
+/**
+ * [Storybook](https://guardian.github.io/csnx/?path=/story/source-react-components-development-kitchen_expandingwrapper--expanding-wrapper)
+ * [GitHub](https://github.com/guardian/source/tree/main/packages/@guardian/source-react-components-development-kitchen/src/expanding-wrapper/ExpandingWrapper.tsx) •
+ * [NPM](https://www.npmjs.com/package/@guardian/source-react-components)
+ *
+ * An Expanding Wrapper surrounds a bit of content that can be collapsed and expanded
+ * Note: When collapsed, there should be no focusable elements within the wrapper.
+ *
+ * The following themes are supported: `light`.
+ * */
+
+const loremStyles = css`
+	padding: 10px;
+	background: ${neutral[97]};
+	font-family: GuardianTextSans;
+`;
+
+const Lorem = (
+	<div css={loremStyles}>
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis
+			lorem velit. Mauris semper in velit vitae tempor. Fusce eu eros pretium,
+			commodo tellus nec, cursus risus. Nullam venenatis odio eu fringilla
+			pretium. Nullam quis dignissim eros, sed maximus orci. Fusce pharetra,
+			elit eu ultrices vulputate, sem eros accumsan arcu, et vulputate ante
+			ipsum mattis elit. Ut euismod nec massa vel congue. Phasellus laoreet
+			mauris et enim finibus viverra. Nulla a nunc rutrum, auctor felis nec,
+			pharetra massa. Aenean placerat, leo nec volutpat consequat, risus diam
+			sagittis sem, eu placerat mauris leo vestibulum tellus. Donec sed odio sit
+			amet diam consectetur consequat. Etiam luctus placerat orci, vitae
+			sagittis turpis blandit eget. Sed tempor mi ut urna vehicula, vel posuere
+			ipsum egestas.
+		</p>
+		<input placeholder="Basic Input" />
+
+		<br />
+		<p>
+			Fusce a tincidunt magna. Curabitur non libero vel nisl efficitur mattis.
+			Etiam pulvinar mi est, vel semper nibh aliquet id. Morbi lobortis elit
+			tortor, et facilisis massa placerat non. Quisque sollicitudin dolor in
+			elit dapibus, sit amet vehicula turpis mattis. Mauris tempor magna turpis,
+			sed vulputate turpis pharetra vel. Curabitur aliquam mi neque, non aliquam
+			elit condimentum ac. Integer in sapien eget urna tristique iaculis.
+			Maecenas luctus, mauris eget mattis feugiat, eros justo malesuada nunc,
+			vel aliquam ipsum tellus non neque. Donec tempus tincidunt egestas.
+			Integer dapibus pulvinar condimentum. Pellentesque ultricies ligula et
+			facilisis pulvinar.
+		</p>
+		<button onClick={() => window.alert('HELLO')}>Sound the alarm</button>
+		<br />
+		<p>
+			Phasellus vel dapibus ex. Orci varius natoque penatibus et magnis dis
+			parturient montes, nascetur ridiculus mus. Ut vehicula arcu non erat
+			iaculis efficitur. Donec sit amet varius lacus. Etiam lacinia tincidunt
+			ante a suscipit. Vestibulum iaculis, ipsum non euismod faucibus, ex ipsum
+			vehicula massa, a malesuada enim nunc et mauris. Suspendisse rhoncus ipsum
+			eros, accumsan ornare ex placerat id. Ut blandit, sapien eget fermentum
+			hendrerit, ipsum risus vulputate velit, sed lacinia lacus ipsum sed quam.
+			Pellentesque lacinia velit libero, at volutpat risus pharetra imperdiet.
+			Morbi a lacinia felis. Pellentesque ac risus neque. Nulla at arcu
+			ultrices, tincidunt urna vehicula, egestas felis. Nulla laoreet risus
+			urna, a efficitur metus vulputate nec.
+		</p>
+		<br />
+		<p>
+			Pellentesque tincidunt blandit turpis, convallis facilisis massa fringilla
+			cursus. Praesent neque odio, porta sodales imperdiet a, aliquam eu ante.
+			Maecenas id placerat turpis, quis finibus odio. Integer sed nisi vitae
+			nulla euismod mattis quis condimentum lorem. Suspendisse potenti. Nam
+			lobortis vehicula ex, vitae ultricies purus dictum sed. Fusce id faucibus
+			justo. Quisque nec sagittis felis. Nulla tellus velit, ornare nec turpis
+			et, pretium tincidunt tellus. Integer non mauris venenatis, consequat
+			massa porta, molestie ante. Nulla nisi magna, gravida sit amet massa id,
+			vehicula fermentum leo. Nunc quis odio a eros ullamcorper sodales. Donec
+			eu arcu ornare, dapibus erat placerat, rhoncus mauris. Sed ante neque,
+			interdum eget purus eget, maximus pharetra ante. Cras hendrerit pulvinar
+			enim, at rutrum quam faucibus vel. Integer nisl velit, rhoncus id turpis
+			eu, ultricies venenatis elit.
+		</p>
+		<br />
+		<p>
+			Pellentesque tincidunt blandit turpis, convallis facilisis massa fringilla
+			cursus. Praesent neque odio, porta sodales imperdiet a, aliquam eu ante.
+			Maecenas id placerat turpis, quis finibus odio. Integer sed nisi vitae
+			nulla euismod mattis quis condimentum lorem. Suspendisse potenti. Nam
+			lobortis vehicula ex, vitae ultricies purus dictum sed. Fusce id faucibus
+			justo. Quisque nec sagittis felis. Nulla tellus velit, ornare nec turpis
+			et, pretium tincidunt tellus. Integer non mauris venenatis, consequat
+			massa porta, molestie ante. Nulla nisi magna, gravida sit amet massa id,
+			vehicula fermentum leo. Nunc quis odio a eros ullamcorper sodales. Donec
+			eu arcu ornare, dapibus erat placerat, rhoncus mauris. Sed ante neque,
+			interdum eget purus eget, maximus pharetra ante. Cras hendrerit pulvinar
+			enim, at rutrum quam faucibus vel. Integer nisl velit, rhoncus id turpis
+			eu, ultricies venenatis elit.
+		</p>
+	</div>
+);
+
+const renderUpdatedText = () => (
+	<span
+		style={{
+			background: 'yellow',
+			padding: '2px',
+			fontFamily: 'GuardianTextSans',
+		}}
+	>
+		Last updated yesterday
+	</span>
+);
+
+const expandingWrapper = (): ReactElement => {
+	return (
+		<>
+			<ExpandingWrapper renderExtra={renderUpdatedText} name="Lorem Ipsum Text">
+				{Lorem}
+			</ExpandingWrapper>
+			<button>Click me!</button>
+		</>
+	);
+};
+
+export default {
+	component: expandingWrapper,
+	title: 'ExpandingWrapper',
+};
+
+export { expandingWrapper };

libs/@guardian/source-react-components-development-kitchen/src/expanding-wrapper/ExpandingWrapper.tsx

@@ -0,0 +1,100 @@
+import { css } from '@emotion/react';
+import { visuallyHidden } from '@guardian/source-foundations';
+import { SvgMinus, SvgPlus } from '@guardian/source-react-components';
+import { useEffect, useState } from 'react';
+import type { FC } from 'react';
+import {
+	buttonIconStyles,
+	collapsibleBodyStyles,
+	containerStyles,
+	extraStyles,
+	overlayStyles,
+	showHideLabelStyles,
+} from './styles';
+import type { Theme } from './theme';
+import type { ExpandingWrapperProps, TabbableElementType } from './types';
+
+export type { ExpandingWrapperProps } from './types';
+
+const setTabIndex = (name: string, isExpanded: boolean) => {
+	const collapsibleBody = document.getElementById(
+		`expander-${name}__collapsible-body`,
+	);
+	if (!collapsibleBody) return;
+
+	const tabbableElements: TabbableElementType[] = Array.from(
+		collapsibleBody.querySelectorAll('input,textarea,select,button,a'),
+	);
+	tabbableElements.forEach((element: TabbableElementType) => {
+		element.tabIndex = isExpanded ? 0 : -1;
+	});
+};
+
+export const ExpandingWrapper: FC<ExpandingWrapperProps> = ({
+	name,
+	expandCallback,
+	renderExtra,
+	disableTabbingWhenCollapsed = true,
+	children,
+}) => {
+	const [isExpanded, setIsExpanded] = useState(false);
+
+	useEffect(() => {
+		disableTabbingWhenCollapsed && setTabIndex(name, isExpanded);
+	}, [disableTabbingWhenCollapsed, isExpanded]);
+
+	return (
+		<div
+			id={`expander-${name}`}
+			css={(theme: Theme) => containerStyles(theme.expander)}
+		>
+			<input
+				type="checkbox"
+				css={css`
+					${visuallyHidden};
+				`}
+				className="expander__checkbox"
+				id={`expander-checkbox-${name}`}
+				onChange={(e) => {
+					expandCallback?.(e.target.checked);
+					setIsExpanded(e.target.checked);
+				}}
+				aria-label={`${isExpanded ? 'Collapse' : 'Expand'} ${name && name}`}
+			/>
+			<div
+				className="expander__collapsible-body"
+				id={`expander-${name}__collapsible-body`}
+				css={collapsibleBodyStyles}
+				aria-hidden={!isExpanded}
+			>
+				{children}
+			</div>
+
+			{!isExpanded && (
+				<div css={(theme: Theme) => overlayStyles(theme.expander)} />
+			)}
+			{renderExtra && <span css={extraStyles}>{renderExtra()}</span>}
+			<label
+				aria-hidden={true}
+				css={(theme: Theme) => showHideLabelStyles(theme.expander)}
+				htmlFor={`expander-checkbox-${name}`}
+			>
+				{isExpanded ? (
+					<>
+						<span id="svgminus" css={buttonIconStyles}>
+							<SvgMinus />
+						</span>
+						Show Less
+					</>
+				) : (
+					<>
+						<span id="svgplus" css={buttonIconStyles}>
+							<SvgPlus />
+						</span>
+						Show More
+					</>
+				)}
+			</label>
+		</div>
+	);
+};