feat(806) container queries and storybook

[LukeFinch]

closes #806

What

Background - why this is needed Allows users to add custom media queries and container queries into props/overrides What did you do

• Added new CSSQuery type
• Added new ResponsiveValue type - a union of CSSQuery and MQ
• Changed MQ<T> to ResponsiveValue<T> for some components (grid layout, block, textblock) What does the reviewers should expect
• You can use one of the above components, and add a "rules" object to the style override.

      <GridLayout
        rows={{
          rules: [
            {
              rule: '@container grid-container (width <= 200px)',
              value: '1fr 1fr',
            },
            {
              rule: '@container grid-container (width > 200px)',
              value: '1fr 1fr 1fr 1fr',
            },
          ],
        }}
        columns={{
          xs: '1fr',
          md: '2fr',
          rules: [
            {
              rule: '@container grid-container (width <= 200px)',
              value: '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr',
            },
            {
              rule: '@container grid-container (width > 200px)',
              value: '1fr 1fr',
            },
          ],
        }}
      >

This adds a new style to the page with emotion that handles the container query

I have done:

• [x] Written unit tests against changes
• [ ] Written functional tests against the component and/or NewsKit site
• [ ] Updated relevant documentation

I have tested manually:

• [x] The feature's functionality is working as expected on Chrome, Firefox, Safari and Edge
• [ ] The screen reader reads and flows through the elements as expected.
• [x] There are no new errors in the browser console coming from this PR.
• [ ] When visual test is not added, it renders correctly on different browsers and mobile viewports (Safari, Firefox, small mobile viewport, tablet)
• [ ] The Playground feature is working as expected

Before:

After:

Who should review this PR:

How to test:

[pp-serviceaccount]

You can preview these changes on: Documentation Site: http://ncu-newskit-docs-pr.s3-website-eu-west-1.amazonaws.com/806-container-queries-storybook Storybook: http://ncu-newskit-docs-pr.s3-website-eu-west-1.amazonaws.com/806-container-queries-storybook/storybook

[mstuartf]

👏 This is cool

[mutebg]

Since we are changing PEER DEPS I am not sure if that's not a breaking change for all users