Re-implement show/hide buttons on containers

dotcom-rendering/src/components/FrontPage.tsx

@@ -17,7 +17,6 @@ import { Metrics } from './Metrics.importable';
 import { ReaderRevenueDev } from './ReaderRevenueDev.importable';
 import { SetABTests } from './SetABTests.importable';
 import { SetAdTargeting } from './SetAdTargeting.importable';
-import { ShowHideContainers } from './ShowHideContainers.importable';
 import { SkipTo } from './SkipTo';
 
 type Props = {
@@ -71,13 +70,6 @@ export const FrontPage = ({ front, NAV }: Props) => {
 					tests={front.config.abTests}
 				/>
 			</Island>
-			<Island priority="enhancement" defer={{ until: 'idle' }}>
-				<ShowHideContainers
-					disableFrontContainerToggleSwitch={
-						!!front.config.switches.disableFrontContainerShowHide
-					}
-				/>
-			</Island>
 			<Island priority="critical">
 				<SetABTests
 					abTestSwitches={filterABTestSwitches(front.config.switches)}

dotcom-rendering/src/components/FrontSection.tsx

@@ -19,7 +19,7 @@ import { ContainerTitle } from './ContainerTitle';
 import { FrontPagination } from './FrontPagination';
 import { FrontSectionTitle } from './FrontSectionTitle';
 import { Island } from './Island';
-import { ShowHideButton } from './ShowHideButton';
+import { ShowHideButton } from './ShowHideButton.importable';
 import { ShowMore } from './ShowMore.importable';
 import { Treats } from './Treats';
 
@@ -579,7 +579,12 @@ export const FrontSection = ({
 
 				{isToggleable && (
 					<div css={sectionShowHide}>
-						<ShowHideButton sectionId={sectionId} />
+						<Island
+							priority="enhancement"
+							defer={{ until: 'idle' }}
+						>
+							<ShowHideButton sectionId={sectionId} />
+						</Island>
 					</div>
 				)}
 

dotcom-rendering/src/components/Island.test.tsx

@@ -31,7 +31,7 @@ import { SendTargetingParams } from './SendTargetingParams.importable';
 import { SetABTests } from './SetABTests.importable';
 import { SetAdTargeting } from './SetAdTargeting.importable';
 import { ShareButton } from './ShareButton.importable';
-import { ShowHideContainers } from './ShowHideContainers.importable';
+import { ShowHideButton } from './ShowHideButton.importable';
 import { SignInGateSelector } from './SignInGateSelector.importable';
 import { SlotBodyEnd } from './SlotBodyEnd.importable';
 import { StickyBottomBanner } from './StickyBottomBanner.importable';
@@ -364,13 +364,9 @@ describe('Island: server-side rendering', () => {
 		).not.toThrow();
 	});
 
-	test('ShowHideContainers', () => {
+	test('ShowHideButton', () => {
 		expect(() =>
-			renderToString(
-				<ShowHideContainers
-					disableFrontContainerToggleSwitch={false}
-				/>,
-			),
+			renderToString(<ShowHideButton sectionId="opinion" />),
 		).not.toThrow();
 	});
 

dotcom-rendering/src/components/Section.tsx

@@ -10,8 +10,9 @@ import { ContainerTitle } from './ContainerTitle';
 import { ElementContainer } from './ElementContainer';
 import { Flex } from './Flex';
 import { Hide } from './Hide';
+import { Island } from './Island';
 import { LeftColumn } from './LeftColumn';
-import { ShowHideButton } from './ShowHideButton';
+import { ShowHideButton } from './ShowHideButton.importable';
 import { Treats } from './Treats';
 
 /**
@@ -364,7 +365,12 @@ export const Section = ({
 							/>
 						</MaybeHideAboveLeftCol>
 						{toggleable && !!sectionId && (
-							<ShowHideButton sectionId={sectionId} />
+							<Island
+								priority="enhancement"
+								defer={{ until: 'idle' }}
+							>
+								<ShowHideButton sectionId={sectionId} />
+							</Island>
 						)}
 					</div>
 					{toggleable && sectionId ? (

dotcom-rendering/src/components/ShowHideButton.importable.tsx

@@ -0,0 +1,96 @@
+import { css } from '@emotion/react';
+import { isObject, isString, storage } from '@guardian/libs';
+import { space, textSans14 } from '@guardian/source/foundations';
+import { Button } from '@guardian/source/react-components';
+import { useEffect, useState } from 'react';
+import { useIsSignedIn } from '../lib/useAuthStatus';
+import { palette } from '../palette';
+
+type Props = {
+	sectionId: string;
+};
+
+const showHideButtonCss = css`
+	button {
+		${textSans14};
+		margin-right: 10px;
+		margin-bottom: ${space[2]}px;
+		position: relative;
+		align-items: bottom;
+		text-decoration: none;
+	}
+`;
+
+type ContainerStates = { [id: string]: string };
+
+const isContainerStates = (item: unknown): item is ContainerStates => {
+	if (!isObject(item)) return false;
+	if (!Object.keys(item).every(isString)) return false;
+	if (!Object.values(item).every(isString)) return false;
+	return true;
+};
+
+const getContainerStates = (): ContainerStates => {
+	const item = storage.local.get(`gu.prefs.container-states`);
+	if (!isContainerStates(item)) return {};
+	return item;
+};
+
+/**
+ * Component to toggle the visibility of a front container. Used within FrontSection.
+ **/
+export const ShowHideButton = ({ sectionId }: Props) => {
+	const [containerStates, setContainerStates] = useState<ContainerStates>({});
+	const [isExpanded, setIsExpanded] = useState(true);
+	const textShowHide = isExpanded ? 'Hide' : 'Show';
+	const isSignedIn = useIsSignedIn();
+
+	const toggleContainer = () => {
+		const section: Element | null =
+			window.document.getElementById(sectionId);
+
+		if (isExpanded) {
+			containerStates[sectionId] = 'closed';
+			section?.classList.add('hidden');
+		} else {
+			containerStates[sectionId] = 'opened';
+			section?.classList.remove('hidden');
+		}
+
+		storage.local.set(`gu.prefs.container-states`, containerStates);
+	};
+
+	useEffect(() => {
+		const section: Element | null =
+			window.document.getElementById(sectionId);
+
+		setContainerStates(getContainerStates());
+
+		const isClosed = containerStates[sectionId] === 'closed';
+		setIsExpanded(!isClosed);
+
+		isClosed
+			? section?.classList.add('hidden')
+			: section?.classList.remove('hidden');
+	}, [containerStates, sectionId]);
+
+	return (
+		isSignedIn === true && (
+			<div css={showHideButtonCss}>
+				<Button
+					priority="subdued"
+					data-link-name={textShowHide}
+					data-show-hide-button={sectionId}
+					aria-controls={sectionId}
+					aria-expanded={isExpanded}
+					theme={{
+						textSubdued: palette('--section-toggle-button'),
+					}}
+					onClick={toggleContainer}
+				>
+					{textShowHide}
+				</Button>
+			</div>
+		)
+	);
+};

dotcom-rendering/src/components/ShowHideButton.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta } from '@storybook/react';
+import { ShowHideButton } from './ShowHideButton.importable';
+
+const meta = {
+	title: 'Components/ShowHideButton',
+	component: ShowHideButton,
+	args: {
+		sectionId: 'sectionId',
+	},
+} satisfies Meta<typeof ShowHideButton>;
+
+export default meta;
+
+export const Default = {};