feat(806) container queries and storybook

package.json

@@ -101,7 +101,7 @@
     "@docsearch/css": "^3.0.0",
     "@docsearch/react": "^3.0.0",
     "@emotion/jest": "^11.2.1",
-    "@emotion/react": "^11.1.5",
+    "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@hookform/resolvers": "^2.5.0",
     "@mapbox/rehype-prism": "^0.3.1",
@@ -292,8 +292,8 @@
     "kind-of": "^6.0.3"
   },
   "peerDependencies": {
-    "@emotion/react": ">= 11.1.5 <= 11.9.3",
-    "@emotion/styled": ">= 11.1.5 <= 11.9.3",
+    "@emotion/react": ">= 11.10.4 <= 12",
+    "@emotion/styled": ">= 11.10.4 <= 12",
     "react": ">= 16.8.0 <= 18",
     "react-dom": ">= 16.8.0 <= 18",
     "react-is": ">= 16.8.0 <= 18"

src/__tests__/__snapshots__/package.test.ts.snap

@@ -31,8 +31,8 @@ Object {
   "module": "esm/index.js",
   "name": "newskit",
   "peerDependencies": Object {
-    "@emotion/react": ">= 11.1.5 <= 11.9.3",
-    "@emotion/styled": ">= 11.1.5 <= 11.9.3",
+    "@emotion/react": ">= 11.10.4 <= 12",
+    "@emotion/styled": ">= 11.10.4 <= 12",
     "react": ">= 16.8.0 <= 18",
     "react-dom": ">= 16.8.0 <= 18",
     "react-is": ">= 16.8.0 <= 18",

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,66 @@ 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
+          containerName="container-small"
+          containerType="inline-size"
+          stylePreset="blockContainerQueryWrapper"
+          style={{width: '200px'}}
+        >
+          <QueryBlock />
+        </Block>
+      </StorybookCase>
+      <StorybookCase title="Container > 300px">
+        <Block
+          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,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,15 @@ 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>,
-    LogicalProps {
+    LogicalProps,
+    ContainerQueryProps {
   as?: keyof JSX.IntrinsicElements;
   stylePreset?: MQ<string>;
   transitionPreset?: TransitionToken | TransitionToken[];
@@ -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__/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 {
   CardComposable,
@@ -38,6 +39,15 @@ import {
   stylePresets as stylePresetsTheSun,
 } from './the-sun-cards';
 
+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}}
@@ -707,6 +717,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">
@@ -779,7 +874,6 @@ export const StoryOverrides = () => (
 );
 StoryOverrides.storyName = 'Styling overrides';
 
-// https://www.linkedin.com/search/results/content/?keywords=design&origin=FACETED_SEARCH&postedBy=%5B%22first%22%2C%22following%22%5D&sid=xxV&sortBy=%22relevance%22
 export const ComplexStory = () => (
   <StorybookPage>
     <StorybookCase title="Other card">

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

@@ -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: {