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,19 @@ 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 = {
@@ -29,6 +29,13 @@ const blockCustomThemeObject: CreateThemeArgs = {
           borderColor: '{{colors.red060}}',
         },
       },
+      blockContainerQueryWrapper: {
+        base: {
+          borderStyle: 'dashed',
+          borderWidth: '{{borders.borderWidth010}}',
+          borderColor: '{{colors.blue060}}',
+        },
+      },
       blockTransition: {
         base: {
           color: '{{colors.inkBase}}',
@@ -124,6 +131,70 @@ export const StoryBreakpoint = () => (
 );
 StoryBreakpoint.storyName = 'Breakpoint';
 
+export const StoryContainerQueries = () => {
+  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 < 300px">
+        <Block
+          overrides={{
+            containerName: 'container-small',
+            containerType: 'inline-size',
+          }}
+          stylePreset="blockContainerQueryWrapper"
+          style={{width: '200px'}}
+        >
+          <QueryBlock />
+        </Block>
+      </StorybookCase>
+      <StorybookCase title="Container > 300px">
+        <Block
+          overrides={{
+            containerName: 'container-large',
+            containerType: 'inline-size',
+          }}
+          stylePreset="blockContainerQueryWrapper"
+          style={{width: '500px'}}
+        >
+          <QueryBlock />
+        </Block>
+      </StorybookCase>
+    </StorybookPage>
+  );
+};
+StoryContainerQueries.storyName = 'Container Queries';
+
 export const StoryTransitions = () => (
   <StorybookPage columns={blockGridCols}>
     <Block

src/block/__tests__/block.test.tsx

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

src/block/block.tsx

@@ -6,8 +6,10 @@ import {
   MQ,
   getSpacingFromTheme,
   getStylePresetFromTheme,
+  ContainerQueryProps,
 } from '../utils/style';
 import {getTransitionPresetFromTheme} from '../utils/style/transition-preset';
+import {containerProps} from '../utils/container-properties';
 
 export interface BlockProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -23,6 +25,7 @@ export interface BlockProps
    * @deprecated This property is deprecated and will be removed in the next major release. Use `marginBlockEnd` instead.
    */
   spaceStack?: MQ<string>;
+  overrides?: ContainerQueryProps;
 }
 
 const StyledDiv = styled.div<BlockProps>`
@@ -32,6 +35,7 @@ const StyledDiv = styled.div<BlockProps>`
   ${({spaceStack}) =>
     spaceStack && getSpacingFromTheme(spaceStack, undefined, 'marginBottom')}
   ${logicalProps()}
+  ${containerProps()}
   ${({transitionPreset}) =>
     transitionPreset && getTransitionPresetFromTheme(transitionPreset)};
 `;

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;
+  display: grid;
+  container-type: inline-size;
+  container-name: test-container;
+}
+
+<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

@@ -55,7 +55,7 @@ describe('GridLayout', () => {
     const props: GridLayoutProps = {
       areas: `
         "A A"
-        "B C"
+      "B C"
         "D E"`,
       children: areasChildren,
     };
@@ -64,6 +64,18 @@ describe('GridLayout', () => {
     expect(fragment).toMatchSnapshot();
   });
 
+  test('renders GridLayout with container name and type', () => {
+    const props: GridLayoutProps = {
+      overrides: {
+        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: {