Merge f14ad83 into 3bd12c6

Author: cemms1

.changeset/small-boxes-move.md

@@ -0,0 +1,5 @@
+---
+'@guardian/source-development-kitchen': minor
+---
+
+Add Popover component for displaying information ontop of the document, relative to the anchoring element to be clicked

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

@@ -38,6 +38,7 @@
 		"@storybook/addon-docs": "10.3.3",
 		"@storybook/addon-links": "10.3.3",
 		"@storybook/react-vite": "10.3.3",
+		"@types/chai": "5.2.3",
 		"@types/jest": "30.0.0",
 		"@types/react": "18.2.79",
 		"eslint": "9.39.1",

libs/@guardian/source-development-kitchen/src/react-components/index.test.ts

@@ -13,6 +13,7 @@ export type {
 	LogoProps,
 	NumericInput,
 	NumericInputProps,
+	PopoverProps,
 	StarRatingProps,
 	ToggleSwitchProps,
 	ToggleSwitchAppsProps,
@@ -33,6 +34,7 @@ it('Should have exactly these exports', () => {
 		'Lines',
 		'Logo',
 		'NumericInput',
+		'Popover',
 		'SquigglyLines',
 		'StarRating',
 		'StraightLines',

libs/@guardian/source-development-kitchen/src/react-components/index.ts

@@ -62,3 +62,6 @@ export type { TabContainerProps, TabProps } from './tabs/types';
 
 export { Ticker } from './ticker/Ticker';
 export type { TickerSettings } from './ticker/Ticker';
+
+export { Popover } from './popover/Popover';
+export type { PopoverProps } from './popover/Popover';

libs/@guardian/source-development-kitchen/src/react-components/popover/Popover.stories.tsx

@@ -0,0 +1,104 @@
+import { css } from '@emotion/react';
+import { space } from '@guardian/source/foundations';
+import {
+	Button,
+	LinkButton,
+	SvgInfoRound,
+} from '@guardian/source/react-components';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { userEvent, within } from 'storybook/test';
+import { Popover } from './Popover';
+
+const meta: Meta<typeof Popover> = {
+	title: 'React Components/Popover',
+	component: Popover,
+	args: {
+		title: 'Title',
+		position: 'top',
+		showPointer: true,
+		theme: 'medium',
+		width: '250px',
+	},
+	render: (args) => {
+		// eslint-disable-next-line react-hooks/rules-of-hooks -- Storybook
+		const [isExpanded, setIsExpanded] = useState(false);
+		const handleButtonClick = () => setIsExpanded(!isExpanded);
+
+		return (
+			<div
+				css={css`
+					position: relative;
+					width: fit-content;
+					left: 300px;
+					top: 300px;
+				`}
+			>
+				<Popover
+					{...args}
+					anchorElement={
+						<Button
+							id="info-icon"
+							icon={<SvgInfoRound />}
+							size="xsmall"
+							priority="tertiary"
+							theme={{ borderTertiary: 'unset' }}
+							hideLabel={true}
+							onClick={handleButtonClick}
+						>
+							More information
+						</Button>
+					}
+					isOpen={isExpanded}
+					handleClose={() => setIsExpanded(false)}
+				>
+					<span>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+						eiusmod tempor incididunt ut labore et dolore magna aliqua.
+					</span>
+					<div
+						css={css`
+							margin-top: ${space[3]}px;
+						`}
+					>
+						<LinkButton
+							priority="primary"
+							size="xsmall"
+							href="https://www.theguardian.com/uk"
+						>
+							Primary button xs
+						</LinkButton>
+					</div>
+				</Popover>
+			</div>
+		);
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof Popover>;
+
+export const WithTitleAndPointerTop: Story = {
+	play: async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+
+		await step('Click anchor element', async () => {
+			await userEvent.click(canvas.getByText('More information'));
+		});
+	},
+};
+
+export const WithoutTitleAndPointerLeft: Story = {
+	args: {
+		title: undefined,
+		position: 'left',
+		showPointer: false,
+	},
+	play: async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+
+		await step('Click anchor element', async () => {
+			await userEvent.click(canvas.getByText('More information'));
+		});
+	},
+};