feat(806) container queries and storybook

package.json

@@ -101,8 +101,8 @@
     "@docsearch/css": "^3.0.0",
     "@docsearch/react": "^3.0.0",
     "@emotion/jest": "^11.2.1",
-    "@emotion/react": "^11.1.5",
-    "@emotion/styled": "^11.10.4",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
     "@hookform/resolvers": "^2.5.0",
     "@mapbox/rehype-prism": "^0.3.1",
     "@mdx-js/loader": "^1.5.8",

src/block/__tests__/__snapshots__/block.test.tsx.snap

@@ -8,6 +8,18 @@ exports[`Block with no props renders an unstyled div 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Block with props renders GridLayout with container name and type 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  container-type:inline-size container-name: test-container;
+}
+
+<div
+    class="emotion-0"
+  />
+</DocumentFragment>
+`;
+
 exports[`Block with props renders as span 1`] = `
 <DocumentFragment>
   <span

src/block/__tests__/block.stories.tsx

@@ -6,7 +6,7 @@ import {ThemeProvider, CreateThemeArgs} from '../../theme';
 import {Visible} from '../../grid/visibility';
 import {createCustomThemeWithBaseThemeSwitch} from '../../test/theme-select-object';
 import {TextBlock} from '../../text-block';
-import {MQ} from '../../utils';
+import {MQ, styled, getColorCssFromTheme} from '../../utils';
 
 // The style presets are added for easier visualization of the spacings around the Block component
 const blockCustomThemeObject: CreateThemeArgs = {
@@ -124,6 +124,69 @@ export const StoryBreakpoint = () => (
 );
 StoryBreakpoint.storyName = 'Breakpoint';
 
+export const StoryContainerQueries = () => {
+  const QueryContainerSmall = styled.div`
+    container-type: inline-size;
+    width: 300px;
+    border: 1px dashed;
+    ${getColorCssFromTheme('borderColor', 'blue060')}
+  `;
+  const QueryContainerLarge = styled.div`
+    container-type: inline-size;
+    width: 600px;
+    border: 1px dashed;
+    ${getColorCssFromTheme('borderColor', 'blue060')}
+  `;
+
+  const QueryBlock = () => (
+    <Block
+      stylePreset="blockDefault"
+      paddingInline={{
+        rules: [
+          {
+            rule: '@container (width <= 300px)',
+            value: 'space010',
+          },
+          {
+            rule: '@container (width > 300px)',
+            value: 'space040',
+          },
+        ],
+      }}
+      paddingBlock={{
+        rules: [
+          {
+            rule: '@container (width <= 300px)',
+            value: 'space010',
+          },
+          {
+            rule: '@container (width > 300px)',
+            value: 'space040',
+          },
+        ],
+      }}
+    >
+      <Text>This block changes padding depending on its container size</Text>
+    </Block>
+  );
+
+  return (
+    <StorybookPage columns={blockGridCols}>
+      <StorybookCase title="Container query < 300px">
+        <QueryContainerSmall>
+          <QueryBlock />
+        </QueryContainerSmall>
+      </StorybookCase>
+      <StorybookCase title="Container query > 300px">
+        <QueryContainerLarge>
+          <QueryBlock />
+        </QueryContainerLarge>
+      </StorybookCase>
+    </StorybookPage>
+  );
+};
+StoryContainerQueries.storyName = 'Container Queries';
+
 export const StoryTransitions = () => (
   <StorybookPage columns={blockGridCols}>
     <Block

src/block/__tests__/block.test.tsx

@@ -99,5 +99,15 @@ describe('Block', () => {
       const fragment = renderToFragmentWithTheme(Block, props);
       expect(fragment).toMatchSnapshot();
     });
+
+    test('renders GridLayout with container name and type', () => {
+      const props: BlockProps = {
+        containerName: 'test-container',
+        containerType: 'inline-size',
+      };
+
+      const fragment = renderToFragmentWithTheme(Block, props);
+      expect(fragment).toMatchSnapshot();
+    });
   });
 });

src/block/block.tsx

@@ -6,12 +6,14 @@ import {
   MQ,
   getSpacingFromTheme,
   getStylePresetFromTheme,
+  ContainerQueryProps,
 } from '../utils/style';
 import {getTransitionPresetFromTheme} from '../utils/style/transition-preset';
 
 export interface BlockProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    LogicalProps {
+    LogicalProps,
+    ContainerQueryProps {
   as?: keyof JSX.IntrinsicElements;
   stylePreset?: MQ<string>;
   transitionPreset?: TransitionToken | TransitionToken[];
@@ -26,6 +28,8 @@ export interface BlockProps
 }
 
 const StyledDiv = styled.div<BlockProps>`
+  ${({containerType}) => containerType && `container-type: ${containerType}`}
+  ${({containerName}) => containerName && `container-name: ${containerName}`}
   ${({stylePreset}) => stylePreset && getStylePresetFromTheme(stylePreset)}
   ${({spaceInline}) =>
     spaceInline && getSpacingFromTheme(spaceInline, undefined, 'marginRight')}

src/card-composable/__tests__/__stories/card-composable.stories.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-script-url */
 import React from 'react';
 import {Story as StoryType} from '@storybook/react';
+import {styled} from '../../../utils';
 import {Videocam as FilledVideocam} from '@emotion-icons/material/Videocam';
 import {Share as FilledShare} from '@emotion-icons/material/Share';
 import {
@@ -35,6 +36,15 @@ import {Tag} from '../../../tag';
 import {VideoPlayer} from '../../../video-player';
 import {DEFAULT_VIDEO_PLAYER_CONFIG} from '../../../video-player/__tests__/config';
 
+const QueryContainerSmall = styled.div`
+  container-type: inline-size;
+  width: 300px;
+`;
+const QueryContainerLarge = styled.div`
+  container-type: inline-size;
+  width: 400px;
+`;
+
 const H = ({overrides, ...props}: Omit<HeadlineProps, 'children'>) => (
   <Headline
     overrides={{typographyPreset: 'editorialHeadline030', ...overrides}}
@@ -953,6 +963,91 @@ export const StoryLogicalProps = () => (
 );
 StoryLogicalProps.storyName = 'Logical props';
 
+export const StoryContainerQueries = () => {
+  const CardWithQueries = () => (
+    <CardComposable
+      overrides={{
+        stylePreset: 'cardInset',
+        paddingBlock: {
+          rules: [
+            {
+              rule: '@container (width <= 300px)',
+              value: 'space020',
+            },
+            {
+              rule: '@container (width > 300px)',
+              value: 'space060',
+            },
+          ],
+        },
+        paddingInline: {
+          rules: [
+            {
+              rule: '@container (width <= 300px)',
+              value: 'space020',
+            },
+            {
+              rule: '@container (width > 300px)',
+              value: 'space060',
+            },
+          ],
+        },
+      }}
+      rowGap={areasGap}
+      containerType="inline-size"
+    >
+      <CardContent rowGap={contentGap}>
+        <Flag>Flag</Flag>
+        <Headline
+          overrides={{
+            typographyPreset: {
+              rules: [
+                {
+                  rule: '@container (width <= 300px)',
+                  value: 'editorialHeadline020',
+                },
+                {
+                  rule: '@container (width > 300px)',
+                  value: 'editorialHeadline040',
+                },
+              ],
+            },
+          }}
+        >
+          This headline&apos;s typographyPreset changes depending on its
+          container size
+        </Headline>
+        <P />
+      </CardContent>
+      <CardMedia
+        media={{
+          src: 'https://storybook.newskit.co.uk/placeholder-3x2.png',
+        }}
+      />
+      <CardActions>
+        <Tag href={href} size="medium">
+          Tag
+        </Tag>
+      </CardActions>
+    </CardComposable>
+  );
+  return (
+    <StorybookPage>
+      <StorybookCase title="Container Query < 300px">
+        <QueryContainerSmall>
+          <CardWithQueries />
+        </QueryContainerSmall>
+      </StorybookCase>
+      <StorybookCase title="Container Query > 300px">
+        <QueryContainerLarge>
+          <CardWithQueries />
+        </QueryContainerLarge>
+      </StorybookCase>
+    </StorybookPage>
+  );
+};
+StoryContainerQueries.storyName = 'Container Queries';
+
 export const StoryOverrides = () => (
   <StorybookPage>
     <StorybookCase title="Style preset - card and flag colours">

src/grid-layout/__tests__/__snapshots__/grid-layout.test.tsx.snap

@@ -205,6 +205,22 @@ exports[`GridLayout renders GridLayout with colum/row prop 1`] = `
 </DocumentFragment>
 `;
 
+exports[`GridLayout renders GridLayout with container name and type 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  margin: 0;
+  padding: 0;
+  container-type:inline-size;
+  container-name:test-container;
+  display: grid;
+}
+
+<div
+    class="emotion-0"
+  />
+</DocumentFragment>
+`;
+
 exports[`GridLayout renders GridLayout with different areas for different breakpoints 1`] = `
 <DocumentFragment>
   .emotion-0 {

src/grid-layout/__tests__/grid-layout.test.tsx

@@ -64,6 +64,16 @@ describe('GridLayout', () => {
     expect(fragment).toMatchSnapshot();
   });
 
+  test('renders GridLayout with container name and type', () => {
+    const props: GridLayoutProps = {
+      containerName: 'test-container',
+      containerType: 'inline-size',
+    };
+
+    const fragment = renderToFragmentWithTheme(GridLayout, props);
+    expect(fragment).toMatchSnapshot();
+  });
+
   test('renders GridLayout with different areas for different breakpoints', () => {
     const props: GridLayoutProps = {
       areas: {

src/grid-layout/__tests__/stories/grid-layout.stories.tsx

@@ -9,6 +9,7 @@ import {Label} from '../../..';
 import {
   StorybookHeading,
   StorybookSubHeading,
+  StorybookCase,
 } from '../../../test/storybook-comps';
 
 const BigRedBlock = styled(Block)`
@@ -17,6 +18,18 @@ const BigRedBlock = styled(Block)`
   background: red;
 `;
 
+const QueryContainerSmall = styled(Block)`
+  width: 200px;
+  container-type: inline-size;
+  container-name: grid-container;
+`;
+
+const QueryContainerLarge = styled(Block)`
+  width: 400px;
+  container-type: inline-size;
+  container-name: grid-container;
+`;
+
 export const StoryResponsiveExample = () => (
   <>
     <StorybookSubHeading>Responsive grid with mixed sizing</StorybookSubHeading>
@@ -163,6 +176,56 @@ export const StoryResponsiveExample = () => (
 );
 StoryResponsiveExample.storyName = 'responsive';
 
+export const StoryContainerQueryExample = () => {
+  const QueryGridLayout = () => (
+    <GridLayout
+      rows={{
+        rules: [
+          {
+            rule: '@container grid-container (width <= 200px)',
+            value: '1fr 1fr',
+          },
+          {
+            rule: '@container grid-container (width > 200px)',
+            value: '1fr',
+          },
+        ],
+      }}
+      columns={{
+        rules: [
+          {
+            rule: '@container grid-container (width <= 200px)',
+            value: '1fr 1fr',
+          },
+          {
+            rule: '@container grid-container (width > 200px)',
+            value: '1fr',
+          },
+        ],
+      }}
+    >
+      <GridBox>1</GridBox>
+      <GridBox>2</GridBox>
+    </GridLayout>
+  );
+
+  return (
+    <>
+      <StorybookCase title="Container query < 200px">
+        <QueryContainerSmall>
+          <QueryGridLayout />
+        </QueryContainerSmall>
+      </StorybookCase>
+      <StorybookCase title="Container query > 200px">
+        <QueryContainerLarge>
+          <QueryGridLayout />
+        </QueryContainerLarge>
+      </StorybookCase>
+    </>
+  );
+};
+StoryContainerQueryExample.storyName = 'Container Queries';
+
 export const StoryMinMaxRepeat = () => {
   const boxes = Array.from(Array(20)).map((_, i) => <GridBox>{i} box</GridBox>);
   return (