Merge 637d127 into 022a233

guardian · May 17, 2024 · 6e2f519 · 6e2f519
2 parents 022a233 + 637d127
commit 6e2f519
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 10 deletions.
diff --git a/.changeset/empty-geese-explain.md b/.changeset/empty-geese-explain.md
@@ -0,0 +1,5 @@
+---
+'@guardian/source-react-components': minor
+---
+
+Adds `collapseUntil` option to `Inline` layout component to allow collapsing into a single column below a given breakpoint
diff --git a/libs/@guardian/source-react-components/src/button/styles.ts b/libs/@guardian/source-react-components/src/button/styles.ts
@@ -22,7 +22,7 @@ import { themeButton as defaultTheme } from './theme';
 
 const button = css`
 	display: inline-flex;
-	justify-content: space-between;
+	justify-content: center;
 	align-items: center;
 	box-sizing: border-box;
 	border: none;
@@ -208,7 +208,6 @@ const iconRight = css`
 `;
 
 const iconOnly = css`
-	justify-content: center;
 	padding: 0;
 `;
 

diff --git a/libs/@guardian/source-react-components/src/inline/Inline.stories.tsx b/libs/@guardian/source-react-components/src/inline/Inline.stories.tsx
@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
-import { palette, space } from '@guardian/source-foundations';
+import { breakpoints, palette, space } from '@guardian/source-foundations';
 import type { Meta, StoryFn } from '@storybook/react';
+import { Button } from '../button/Button';
 import type { InlineProps } from './Inline';
 import { Inline } from './Inline';
 
@@ -18,8 +19,8 @@ const wrapper = css`
 const box = css`
 	display: grid;
 	place-items: center;
-	width: ${space[12]}px;
-	height: ${space[12]}px;
+	min-width: ${space[12]}px;
+	min-height: ${space[12]}px;
 	background: ${palette.news[600]};
 `;
 
@@ -113,3 +114,47 @@ MultipleChildElements.args = {
 		</div>
 	)),
 };
+
+// *****************************************************************************
+
+export const CollapseUntilTablet: StoryFn<typeof Inline> = Template.bind({});
+CollapseUntilTablet.args = {
+	space: 2,
+	collapseUntil: 'tablet',
+};
+CollapseUntilTablet.parameters = {
+	viewport: { defaultViewport: 'mobile' },
+	chromatic: {
+		viewports: [breakpoints.mobile],
+	},
+};
+
+// *****************************************************************************
+
+export const ButtonGroupMobile: StoryFn<typeof Inline> = () => (
+	<Inline space={2} collapseUntil="tablet">
+		<Button>Subscribe now</Button>
+		<Button priority="tertiary">Cancel</Button>
+	</Inline>
+);
+ButtonGroupMobile.parameters = {
+	viewport: { defaultViewport: 'mobileMedium' },
+	chromatic: {
+		viewports: [breakpoints.mobileMedium],
+	},
+};
+
+// *****************************************************************************
+
+export const ButtonGroupTablet: StoryFn<typeof Inline> = () => (
+	<Inline space={2} collapseUntil="tablet">
+		<Button>Subscribe now</Button>
+		<Button priority="tertiary">Cancel</Button>
+	</Inline>
+);
+ButtonGroupTablet.parameters = {
+	viewport: { defaultViewport: 'tablet' },
+	chromatic: {
+		viewports: [breakpoints.tablet],
+	},
+};
diff --git a/libs/@guardian/source-react-components/src/inline/Inline.tsx b/libs/@guardian/source-react-components/src/inline/Inline.tsx
@@ -1,14 +1,24 @@
+import type { Breakpoint } from '@guardian/source-foundations';
 import type { HTMLAttributes } from 'react';
 import type { Props } from '../@types/Props';
 import type { Space } from '../@types/Space';
-import { inline, inlineSpace, inlineWrapper } from './styles';
+import {
+	collapseBreakpoint,
+	inline,
+	inlineSpace,
+	inlineWrapper,
+} from './styles';
 
 export interface InlineProps extends HTMLAttributes<HTMLDivElement>, Props {
 	/**
 	 * [Units of space](https://guardian.github.io/storybooks/?path=/docs/source-foundations_space--docs)
 	 * between children.
 	 */
 	space?: Space;
+	/**
+	 * Collapse to a single column below the specified [breakpoint](https://guardian.github.io/storybooks/?path=/docs/source-foundations_media-queries--docs)
+	 */
+	collapseUntil?: Breakpoint;
 }
 
 /**
@@ -23,12 +33,18 @@ export const Inline = ({
 	cssOverrides,
 	children,
 	space,
+	collapseUntil,
 	...props
 }: InlineProps) => {
 	return (
 		<div css={inline}>
 			<div
-				css={[inlineWrapper, space && inlineSpace(space), cssOverrides]}
+				css={[
+					inlineWrapper,
+					space ? inlineSpace(space) : '',
+					collapseUntil ? collapseBreakpoint(collapseUntil) : '',
+					cssOverrides,
+				]}
 				{...props}
 			>
 				{children}

diff --git a/libs/@guardian/source-react-components/src/inline/styles.ts b/libs/@guardian/source-react-components/src/inline/styles.ts
@@ -1,6 +1,6 @@
-import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
-import { space } from '@guardian/source-foundations';
+import type { Breakpoint } from '@guardian/source-foundations';
+import { space, until } from '@guardian/source-foundations';
 import type { Space } from '../@types/Space';
 
 export const inline = css`
@@ -12,7 +12,13 @@ export const inlineWrapper = css`
 	flex-wrap: wrap;
 `;
 
-export const inlineSpace = (number: Space): SerializedStyles => css`
+export const collapseBreakpoint = (breakpoint: Breakpoint) => css`
+	${until[breakpoint]} {
+		flex-direction: column;
+	}
+`;
+
+export const inlineSpace = (number: Space) => css`
 	margin: -${space[number] / 2}px;
 	> * {
 		margin: ${space[number] / 2}px;