Merge branch 'develop' of github.com:wellcometrust/design-system into…

… task/8709-design-token-prototyping

# Conflicts:
#	.storybook/styles/storybook-app.scss

.storybook/styles/_storybook-global.scss

@@ -6,9 +6,9 @@
 body {
   color: var(--colour-grey-80);
   font-family: var(--font-primary);
-  font-size: var(--text-base-size);
-  letter-spacing: var(--body-letter-spacing);
-  line-height: var(--body-line-height-md);
+  font-size: var(--font-size-base);
+  letter-spacing: var(--letter-spacing-body);
+  line-height: var(--line-height-body);
 }
 
 a {

.storybook/styles/storybook-app.scss

@@ -1,7 +1,13 @@
+// Base styles and helpers
 @import 'styles/core';
 @import 'styles/theme';
 @import 'styles/common';
 
+// Component styles
+@import 'components/Button/button.scss';
+@import 'components/Icon/icon.scss';
+
+// Storybook specific
 @import './storybook-global';
 @import './storybook-icons';
 @import './storybook-swatches';

config/rollup.config.js

@@ -10,7 +10,8 @@ import styles from 'rollup-plugin-styles';
 import url from '@rollup/plugin-url';
 import virtual from '@rollup/plugin-virtual';
 
-import componentArray from '../src/index.ts';
+import indexComponents from '../src/index.ts';
+import indexStyles from '../src/index-styles.ts';
 
 const extensions = ['.js', '.jsx', '.mdx', '.ts', '.tsx'];
 
@@ -41,6 +42,8 @@ export default (async () => ([
       assetFileNames: '[name][extname]'
     },
     plugins: [
+      // rollup-plugin-postcss does not extract to multiple bundles
+      // so use rollup-plugin-styles instead
       styles({
         mode: 'extract',
         minimize: isProduction,
@@ -49,8 +52,52 @@ export default (async () => ([
     ]
   },
 
+
   /**
-   * 2. React components and associated CSS
+   * 2. Component CSS
+   *
+   * CSS is processed separately to React and JS, as opposed to importing
+   * the styles into their React component and then extracting.
+   * This is to prevent bundling of child component styles and therefore
+   * avoids duplication of code i.e. if Button.tsx imports Icon.tsx and each
+   * component imports styles the output Button.css will also include the
+   * classes which are already in the output Icon.css.
+   */
+  {
+    input: indexStyles,
+    output: {
+      dir: 'dist/components',
+
+      /*
+       * TODO: Replace or refactor to prevent outputting extraneous JS files
+       *
+       * @see {@link https://github.com/wellcometrust/corporate/issues/8793}
+       */
+      entryFileNames: '[name]/[name].js',
+      format: 'es',
+      sourcemap: !isProduction,
+
+      // this determines the naming of output CSS files based on input entries
+      assetFileNames: '[name]/[name][extname]'
+    },
+    plugins: [
+      nodeResolve({
+        // Allows us to import modules absolutely from these directories
+        moduleDirectories: ['./src', './src/components']
+      }),
+
+      // rollup-plugin-postcss does not extract to multiple bundles
+      // so use rollup-plugin-styles instead
+      styles({
+        mode: 'extract',
+        minimize: isProduction,
+        plugins: [autoprefixer(), calc()]
+      }),
+    ]
+  },
+
+  /**
+   * 3. React components
    *
    * By default Rollout creates the same number of output bundles as input
    * entries. To ensure individual CSS files are created, components also have
@@ -59,15 +106,12 @@ export default (async () => ([
   {
     external: Object.keys(globals),
 
-    input: componentArray,
+    input: indexComponents,
     output: {
       dir: 'dist/components',
       format: 'es',
       preserveModules: true, // Important if we want to code split
       sourcemap: !isProduction,
-
-      // this determines the naming of output CSS files based on input entries
-      assetFileNames: '[name][extname]'
     },
     plugins: [
       nodeResolve({
@@ -92,20 +136,14 @@ export default (async () => ([
         // are always bundled with the code, not copied to /dist
         limit: Infinity
       }),
-      json(),
-
-      // rollup-plugin-postcss does not extract to multiple bundles
-      // so use rollup-plugin-styles instead which does
-      styles({
-        mode: 'extract',
-        minimize: isProduction,
-        plugins: [autoprefixer(), calc()]
-      }),
+      json()
     ]
   },
 
+
+
   /**
-   * 3. Component index
+   * 4. Component index
    *
    * To enable consuming apps to use the React components a virtual index
    * file is created to provide named exports.
@@ -120,22 +158,22 @@ export default (async () => ([
     plugins: [
       // write the index file content
       virtual({
-        entry: componentArray.map(entry => {
+        entry: Object.keys(indexComponents).map(entry => {
           // captures a file name minus the file extension from a given path
           // e.g. Button/Button.tsx will return a full match of `Button.`
           // and `Button` from the first capturing group
-          const regex = /(\w+)\./;
-          const entryName = entry.match(regex)[1];
+          // const regex = /(\w+)\./;
+          // const entryName = entry.match(regex)[1];
 
           // outputs each component as a named export, one per line
-          return `export { ${entryName} } from '/components/${entryName}/${entryName}';`
+          return `export { ${entry} } from '/components/${entry}/${entry}';`
         }).join('\n')
       })
     ]
   },
 
   /**
-   * 4. Server side rendering to output component HTML
+   * 5. Server side rendering to output component HTML
    *
    * This process relies on ssr-config being kept up to date. Long-term this
    * could be labour intensive.
@@ -166,7 +204,7 @@ export default (async () => ([
       }),
 
       /**
-       * 5. Copy and rename dist/index to provide correct type defs
+       * 6. Copy and rename dist/index to provide correct type defs
        * for named exports
        *
        * This is included here to separate it from the previous process which