feat(PPDSC-2238) container queries

.storybook/addons/tealium/preset.js

@@ -0,0 +1,5 @@
+function managerEntries(entry = [], options) {
+  return [...entry, require.resolve('./register')];
+}
+
+module.exports = {managerEntries};

.storybook/addons/tealium/register.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import {addons, types} from '@storybook/addons';
+import {STORY_CHANGED, STORY_SPECIFIED} from '@storybook/core-events';
+import Helmet from 'react-helmet';
+import {IconButton, Icons} from '@storybook/components';
+
+import {
+  Consent,
+  Tealium,
+  ConsentSettingsLink,
+  newskitLightTheme,
+  NewsKitProvider,
+  Tooltip,
+} from '../../../src';
+
+const sendEvent = api => {
+  const {path} = api.getUrlState();
+  const storyData = api.getCurrentStoryData();
+  let pageName = '';
+  if (storyData) {
+    const {title, story} = storyData;
+    pageName = `${title.replace('NewsKit Light/', '')} : ${story}`;
+  }
+
+  if (!pageName) return;
+
+  const [component, object] = pageName.split(':').map(s => s.trim());
+
+  const event = {
+    context: {
+      url: path,
+      component,
+      object,
+    },
+    originator: 'page-load',
+    trigger: 'load',
+  };
+
+  if (window && window.tealiumTrack) {
+    // Un-comment when want to see the data
+    // console.log('SEND_EVENT', event);
+    window.tealiumTrack(event);
+  }
+};
+
+const ADDON_ID = 'storybook/tealium';
+const TOOL_ID = `${ADDON_ID}/tool`;
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+const CONFIG = {
+  privacyManagerId: '407619',
+  tealium: {
+    accountId: 'newsinternational',
+    profileId: 'thetimes.storybook',
+    env: isProduction ? 'prod' : 'dev',
+  },
+  consent: {
+    accountId: 259,
+    propertyHref: 'https://newskit.co.uk',
+    gdpr: {},
+  },
+};
+
+const Tool = () => {
+  const handleOnClick = React.useCallback(() => {
+    const link = document.querySelector('.privacy-policy-link');
+    if (link) {
+      link.click();
+    }
+  });
+
+  return (
+    <>
+      <NewsKitProvider theme={newskitLightTheme}>
+        <ConsentSettingsLink
+          privacyManagerId={CONFIG.privacyManagerId}
+          gdpr
+          className="privacy-policy-link"
+        >
+          {''}
+        </ConsentSettingsLink>
+        <Tealium {...CONFIG.tealium} reactHelmet={Helmet} />
+        <Consent
+          sourcePointConfigUnified={CONFIG.consent}
+          reactHelmet={Helmet}
+        />
+        <Tooltip content="Privacy Manager" asLabel placement="left">
+          <span>
+            <IconButton
+              key={TOOL_ID}
+              title="Show Privacy Manager"
+              onClick={handleOnClick}
+            >
+              <Icons icon="shield" />
+            </IconButton>
+          </span>
+        </Tooltip>
+      </NewsKitProvider>
+    </>
+  );
+};
+
+addons.register(ADDON_ID, api => {
+  addons.add(TOOL_ID, {
+    type: types.TOOLEXTRA,
+    title: 'Privacy',
+    render: Tool,
+  });
+
+  // send initial page view event, since storybook doesn't do it via STORY_CHANGED
+  // When the preview boots, the first story is chosen via a selection specifier
+  api.on(STORY_SPECIFIED, () => {
+    sendEvent(api);
+  });
+
+  // send event every time user navigates to a new story
+  api.on(STORY_CHANGED, () => {
+    sendEvent(api);
+  });
+});

.storybook/main.js

@@ -28,6 +28,7 @@ module.exports = {
         },
       },
     },
+    './addons/tealium/preset.js',
     {
       name: '@storybook/addon-docs',
       options: {
@@ -66,4 +67,5 @@ module.exports = {
   typescript: {
     reactDocgen: false, // added to negate https://github.com/styleguidist/react-docgen-typescript/issues/356
   },
+  staticDirs: ['../fonts', '../static', 'private-fonts'],
 };

package.json

@@ -17,7 +17,7 @@
   "scripts": {
     "dev": "concurrently --names \"src,storybook,docs\" \"yarn build:ts --watch\" \"yarn dev:storybook\" \"next site -p 8081\"",
     "dev:docs": "yarn build:icons && concurrently --names \"src,docs\" \"yarn build:ts --watch\" \"next site -p 8081\"",
-    "dev:storybook": "yarn build:icons && start-storybook --ci -p 6006 -s ./fonts,./.storybook/private-fonts,./static",
+    "dev:storybook": "yarn build:icons && start-storybook --ci -p 6006",
     "eyes:storybook": "eyes-storybook --conf applitools.components.config.js",
     "fetch-external-storybook-fonts": "node ./.storybook/fetch-external-fonts.js",
     "lint:code:base": "eslint --report-unused-disable-directives --ext=.js,.ts,.jsx,.tsx --cache",
@@ -45,7 +45,7 @@
     "build:sync-version-number": "node ./scripts/sync-version-number.js",
     "build:comps:clean-icons": "sh ./scripts/reduce-file-count.sh",
     "build:comps": "concurrently \"yarn build:ts\" \"yarn build:ts:cjs\" && yarn build:comps:clean-icons && yarn build:copy-files && yarn build:package-json",
-    "build:storybook": "build-storybook -c .storybook -o dist-storybook -s ./fonts,./.storybook/private-fonts,./static",
+    "build:storybook": "build-storybook -c .storybook -o dist-storybook",
     "build:docs": "yarn build:comps:clean-icons && next build site && next export site -o public",
     "postbuild:docs": "node ./scripts/post-build",
     "build:icons": "node ./scripts/generate-icons",
@@ -66,11 +66,11 @@
     "serve:docs": "http-server public -p 8081 -c300",
     "serve:storybook": "http-server dist-storybook -p 6006",
     "dependencies:check": "package-change-checker --install-cmd=\"yarn install --pure-lockfile\" HEAD@{1} HEAD",
-    "storybook": "start-storybook -c .storybook -p 6006 -s ./fonts,./.storybook/private-fonts,./static"
+    "storybook": "start-storybook -c .storybook -p 6006 "
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.25.6",
-    "@applitools/eyes-storybook": "^3.27.6",
+    "@applitools/eyes-storybook": "^3.29.3",
     "@babel/core": "^7.13.15",
     "@babel/parser": "^7.14.6",
     "@commitlint/cli": "^8.0.0",
@@ -95,7 +95,10 @@
     "@storybook/addon-essentials": "^6.5.9",
     "@storybook/addon-links": "^6.5.9",
     "@storybook/addon-storysource": "^6.5.9",
+    "@storybook/addons": "^6.5.12",
+    "@storybook/components": "^6.5.12",
     "@storybook/react": "^6.5.9",
+    "@storybook/theming": "^6.5.12",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/react-hooks": "^8.0.1",

site/pages/_document.tsx

@@ -251,6 +251,7 @@ export default class MyDocument extends Document {
               accountId="newsinternational"
               profileId="thetimes.newskit"
               env={isSiteEnvProduction ? 'prod' : 'dev'}
+              reactHelmet={Helmet}
             />
           )}
           <Main />

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

@@ -24,7 +24,7 @@ exports[`Tealium renders scripts for dev environment 2`] = `
       "content": "(function(a,b,c,d){\\n              a='//tags.tiqcdn.com/utag/the-account-id/the-profile-id/the-env-id/utag.js';\\n              b=document;\\n              c='script';\\n              d=b.createElement(c);\\n              d.src=a;\\n              d.type='text/java'+c;\\n              d.async=true;\\n              window.utag_queue = []\\n              if (d.addEventListener) {\\n                d.addEventListener(\\n                  'load',\\n                  function () {\\n                    for (var i = 0; i < utag_queue.length; i++) {\\n                      event = utag_queue[i];\\n                      utag.track(event.event, event.data);\\n                    }\\n                  },\\n                  false\\n                );\\n              } else {\\n                d.onreadystatechange = function () {\\n                  if (this.readyState == 'complete' || this.readyState == 'loaded') {\\n                    this.onreadystatechange = null;\\n                    for (var i = 0; i < utag_queue.length; i++) {\\n                      event = utag_queue[i];\\n                      utag.track(event.event, event.data);\\n                    }\\n                  }\\n                };\\n              }\\n              a = b.getElementsByTagName(c)[0];\\n              a.parentNode.insertBefore(d, a);\\n            })();"
     }
   ],
-  "reactHelmet": "undefined"
+  "reactHelmet": "function"
 }
   </div>
 </DocumentFragment>

src/tealium/tealium.tsx

@@ -14,8 +14,10 @@ export const Tealium: React.FC<TealiumProps> = ({
   accountId,
   profileId,
   env,
+  reactHelmet,
 }) => (
   <RenderScripts
+    reactHelmet={reactHelmet}
     scripts={[
       {
         content: `(function(a,b,c,d){

src/typography/__tests__/heading.stories.tsx

@@ -253,3 +253,40 @@ export const StoryHeadingLogicalProps = () => {
   );
 };
 StoryHeadingLogicalProps.storyName = 'heading-logical-props';
+
+export const StoryHeadingContainerQuery = () => (
+  <div style={{containerType: 'inline-size'}}>
+    <StorybookHeading>Heading - Media Query</StorybookHeading>
+
+    <H3
+      overrides={{
+        marginBlock: {
+          xs: 'space030',
+          md: 'space050',
+        },
+        typographyPreset: {
+          xs: 'editorialParagraph010',
+          md: 'editorialParagraph020',
+        },
+      }}
+    >
+      CSS Containment Module Level 3
+    </H3>
+    <StorybookHeading>Heading - Container Query</StorybookHeading>
+    <H3
+      overrides={{
+        marginBlock: {
+          '100px': 'space030',
+          '800px': 'space050',
+        },
+        typographyPreset: {
+          '100px': 'editorialParagraph010',
+          '800px': 'editorialParagraph020',
+        },
+      }}
+    >
+      CSS Containment Module Level 3
+    </H3>
+  </div>
+);
+StoryHeadingContainerQuery.storyName = 'heading-container-query';

src/utils/__tests__/base.test.ts

@@ -58,6 +58,38 @@ describe('getXFromTheme', () => {
       '@media screen and (min-width: 768px)': {width: '12px'},
     });
   });
+  test('getXFromTheme with CQ value', () => {
+    const result = getXFromTheme('sizing')('width', {
+      '300px': 'sizing010',
+      '500px': 'sizing020',
+      '800px': 'sizing030',
+    })({theme});
+    expect(result).toEqual({
+      '@container (min-width: 300px)': {width: '4px'},
+      '@container (min-width: 500px)': {width: '8px'},
+      '@container (min-width: 800px)': {width: '12px'},
+    });
+  });
+  test('getXFromTheme with CQ & MQ value', () => {
+    const result = getXFromTheme('sizing')('width', {
+      xs: 'sizing010',
+      sm: 'sizing020',
+      '300px': 'sizing010',
+      '500px': 'sizing020',
+      '800px': 'sizing030',
+    })({theme});
+    expect(result).toEqual({
+      '@container (min-width: 300px)': {width: '4px'},
+      '@container (min-width: 500px)': {width: '8px'},
+      '@container (min-width: 800px)': {width: '12px'},
+      '@media screen and (max-width: 479px)': {
+        width: '4px',
+      },
+      '@media screen and (min-width: 480px)': {
+        width: '8px',
+      },
+    });
+  });
 
   test('getXFromTheme with non MQ and callback', () => {
     const cb = (value: string) => ({padding: `${value} 0`, width: value});

src/utils/responsive-helpers.ts

@@ -50,4 +50,20 @@ export const isResponsive = (
 ): prop is Record<keyof Breakpoints, unknown> =>
   !!prop &&
   typeof prop === 'object' &&
-  Object.keys(breakpoints).some(bp => prop && hasOwnProperty(prop, bp));
+  (Object.keys(breakpoints).some(bp => prop && hasOwnProperty(prop, bp)) ||
+    // assuming that container queries end with px
+    Object.keys(prop).some(p => p.endsWith('px')));
+
+export const getContainerQuery = (
+  minWidth: string,
+  maxWidth?: string,
+): string => {
+  const queries = [];
+  if (minWidth) {
+    queries.push(`(min-width: ${minWidth})`);
+  }
+  if (maxWidth) {
+    queries.push(`(max-width: ${maxWidth})`);
+  }
+  return `@container ${queries.join(' AND ')}`;
+};

src/utils/style/base.ts

@@ -1,6 +1,10 @@
 import {Theme, BreakpointKeys} from '../../theme';
-import {isResponsive, getMediaQueryFromTheme} from '../responsive-helpers';
-import {filterObject} from '../filter-object';
+import {
+  isResponsive,
+  getMediaQueryFromTheme,
+  getContainerQuery,
+} from '../responsive-helpers';
+import {filterObject, rejectObject} from '../filter-object';
 import {getToken} from '../get-token';
 import {ThemeProp} from '../style-types';
 import {MQ} from './types';
@@ -76,7 +80,7 @@ export const getResponsiveValueFromTheme = <ThemeToken extends string>(
       ([a], [b]) =>
         mq.indexOf(a as BreakpointKeys) - mq.indexOf(b as BreakpointKeys),
     ) as any; // eslint-disable-line @typescript-eslint/no-explicit-any
-    const cssObject = presetKeys
+    const cssMediaQueryObject = presetKeys
       .filter(
         // Exclude invalid breakpoints and theme section keys
         ([breakpointKey, presetKey]) =>
@@ -114,7 +118,34 @@ export const getResponsiveValueFromTheme = <ThemeToken extends string>(
         return acc;
       }, {} as Record<string, unknown>);
 
-    return Object.entries(cssObject);
+    // get container queries
+    const containerKeys: [string, ThemeToken][] = Object.entries(
+      rejectObject(propKeys, mq),
+    ) as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+    const cssContainerQueryObject = containerKeys.reduce(
+      (acc, [minWidth, presetKey]) => {
+        let preset = '' as Record<ThemeToken, unknown>[ThemeToken];
+        const MQtokens =
+          typeof presetKey === 'string' && (presetKey as string).split(' ');
+        if (themeKey === 'spacePresets' && isMQTokenArray(MQtokens)) {
+          preset = mapTokensArray(MQtokens);
+        } else {
+          preset =
+            section[presetKey] ||
+            (canHaveNonThemeValue &&
+              isValidUnit(themeKey, presetKey) &&
+              presetKey);
+        }
+
+        const mediaQuery = getContainerQuery(minWidth);
+        acc[mediaQuery] = preset;
+        return acc;
+      },
+      {} as Record<string, unknown>,
+    );
+
+    return Object.entries({...cssMediaQueryObject, ...cssContainerQueryObject});
   }
 
   const noMQtokens =

src/utils/style/getters.ts

@@ -355,7 +355,7 @@ export const handleResponsiveProp = <Props extends ThemeProp, T>(
     ? commonMQKeys
     : ['xs', ...commonMQKeys];
 
-  const cssObject = usedMQKeys.reduce((acc, mqKey, index) => {
+  const cssMediaQueryObject = usedMQKeys.reduce((acc, mqKey, index) => {
     const fromMqKey = mqKey;
     const toMqKey = usedMQKeys[index + 1] ? usedMQKeys[index + 1] : undefined;
 
@@ -380,5 +380,7 @@ export const handleResponsiveProp = <Props extends ThemeProp, T>(
     return acc;
   }, {} as Record<string, unknown>) as CSSObject;
 
-  return cssObject;
+  const cssContentQueryObject = {};
+
+  return {...cssMediaQueryObject, ...cssContentQueryObject};
 };

src/utils/style/types.ts

@@ -6,4 +6,4 @@ export type MQPartial<T> = Partial<{
   xl: T;
 }>;
 
-export type MQ<T> = T | MQPartial<T>;
+export type MQ<T> = T | MQPartial<T> | {[minWidth: string]: T};