Merge branch 'main' into sa-responsive-column-width

.eslintrc.json

@@ -12,7 +12,8 @@
     "prettier/prettier": "error",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-unused-vars": "off",
-    "jsx-a11y/label-has-for": "off"
+    "jsx-a11y/label-has-for": "off",
+    "react/react-in-jsx-scope": "off"
   },
   "parserOptions": {
     "ecmaFeatures": {

package.json

@@ -6,7 +6,7 @@
   "workspaces": [
     "src/core/*",
     "src/core/components/*",
-    "src/editorial/web/*",
+    "src/editorial/web",
     "src/editorial/web/components/*"
   ],
   "scripts": {
@@ -23,9 +23,9 @@
     "release:major:all": "yarn build:all && yarn validate && yarn verbump:major:all && yarn publish:release",
     "release:minor:all": "yarn build:all && yarn validate && yarn verbump:minor:all && yarn publish:release",
     "release:patch:all": "yarn build:all && yarn validate && yarn verbump:patch:all && yarn publish:release",
-    "release:prerelease-bump:all": "yarn build:all && yarn validate && yarn verbump:prerelease:all && yarn publish:release",
-    "release:prerelease:all": "yarn build:all && yarn validate && yarn publish:release",
-    "storybook": "yarn watch:foundations & yarn watch:icons & start-storybook",
+    "release:prerelease-bump:all": "yarn validate && yarn verbump:prerelease:all && yarn publish:release",
+    "release:prerelease:all": "yarn validate && yarn publish:release",
+    "storybook": "start-storybook",
     "tag:beta:all": "ts-node ./scripts/tag-beta-all",
     "test": "jest",
     "tsc": "tsc",

scripts/build-all.ts

@@ -1,8 +1,12 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
 import execa, { ExecaReturnValue } from 'execa';
 import { paths, getComponentPaths } from './paths';
 
 const build = (dir: string) => {
-	return execa('yarn', ['--cwd', `${dir}`, 'run', 'build'], {
+	console.log(`\nBuilding ${require(`${dir}/package.json`).name}`);
+
+	return execa('yarn', ['--cwd', dir, 'run', 'build'], {
 		stdio: 'inherit',
 	});
 };

src/core/brand/guardian-live-logo.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export const SvgGuardianLiveLogo = () => {
 	return (
 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 200">

src/core/brand/guardian-logo.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export const SvgGuardianLogo = () => {
 	return (
 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">

src/core/brand/package.json

@@ -6,22 +6,20 @@
     "url": "https://github.com/guardian/source.git"
   },
   "license": "Apache-2.0",
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
   "files": [
-    "guardian-logo.tsx",
-    "guardian-live-logo.tsx",
-    "roundel.tsx",
-    "roundel-brand.tsx",
-    "roundel-brand-inverse.tsx",
-    "roundel-default.tsx",
-    "roundel-inverse.tsx",
-    "*.d.ts",
-    "dist/*.js"
+    "dist/esm",
+    "dist/cjs",
+    "dist/types"
   ],
   "scripts": {
-    "build": "yarn clean && tsc && rollup --config",
-    "clean": "rm -rf dist *.d.ts",
+    "build": "npm-run-all clean --parallel build:*",
+    "build:cjs": "tsc --composite false --declaration false --emitDeclarationOnly false --outDir dist/cjs --module commonjs",
+    "build:esm": "tsc --composite false --declaration false --emitDeclarationOnly false --outDir dist/esm --module ES6",
+    "build:types": "tsc -b",
+    "clean": "rm -rf dist",
     "prepublish": "yarn build",
     "publish:public": "yarn publish --access public",
     "verbump:major": "yarn version --major --no-git-tag-version",
@@ -33,19 +31,11 @@
     "watch": "rollup --config --watch"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.10.0",
-    "@babel/preset-react": "^7.10.0",
-    "@babel/preset-typescript": "^7.9.0",
-    "@emotion/react": "^11.1.2",
-    "@guardian/src-foundations": "^3.3.0-rc.0",
-    "@guardian/src-helpers": "^3.3.0-rc.0",
-    "rollup": "^1.17.0",
-    "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-node-resolve": "^5.2.0",
+    "npm-run-all": "^4.1.5",
     "typescript": "^4.1.3"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.1.2",
     "@guardian/src-foundations": "^3.3.0-rc.0",
     "react": "^17.0.1"
   }

src/core/brand/roundel-brand-inverse.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { SvgRoundelFilled } from './roundel-filled';
 import { brand } from '@guardian/src-foundations/palette';
 

src/core/brand/roundel-brand.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { SvgRoundelFilled } from './roundel-filled';
 import { brand } from '@guardian/src-foundations/palette';
 

src/core/brand/roundel-default.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { SvgRoundelFilled } from './roundel-filled';
 import { neutral } from '@guardian/src-foundations/palette';
 

src/core/brand/roundel-filled.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export const SvgRoundelFilled = ({
 	background,
 	text,

src/core/brand/roundel-inverse.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { SvgRoundelFilled } from './roundel-filled';
 import { neutral } from '@guardian/src-foundations/palette';
 

src/core/brand/roundel.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 // TODO: Deprecated. Please only use filled versions
 export const SvgRoundel = () => {
 	return (

src/core/brand/tsconfig.json

@@ -1,12 +1,15 @@
 {
+  "extends": "../../../tsconfig.json",
   "compilerOptions": {
-    "outDir": ".",
+    "outDir": "dist/types",
     "declaration": true,
-    "emitDeclarationOnly": true,
-    "jsx": "preserve",
-    "esModuleInterop": true,
-    "lib": ["es5", "es6", "es7", "es2017", "es2019", "dom"],
-    "types": ["@emotion/react/types/css-prop"]
+    "emitDeclarationOnly": true
   },
-  "exclude": ["node_modules"]
+  "include": ["."],
+  "exclude": ["dist", "stories.tsx", "stories"],
+  "references": [
+    {
+      "path": "../foundations"
+    }
+  ]
 }

src/core/components/accordion/index.tsx

@@ -1,4 +1,3 @@
-///<reference types="@emotion/react/types/css-prop" />
 import React, { useState, useEffect, ReactElement, ReactNode } from 'react';
 import {
 	accordion,

src/core/components/accordion/package.json

@@ -6,16 +6,19 @@
     "url": "https://github.com/guardian/source.git"
   },
   "license": "Apache-2.0",
-  "main": "dist/accordion.js",
-  "module": "dist/accordion.esm.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
   "files": [
-    "dist/*.js",
-    "index.tsx",
-    "styles.ts",
-    "emotion.d.ts"
+    "dist/esm",
+    "dist/cjs",
+    "dist/types"
   ],
   "scripts": {
-    "build": "yarn clean && rollup --config",
+    "build": "npm-run-all clean --parallel build:*",
+    "build:cjs": "tsc --composite false --declaration false --emitDeclarationOnly false --outDir dist/cjs --module commonjs",
+    "build:esm": "tsc --composite false --declaration false --emitDeclarationOnly false --outDir dist/esm --module ES6",
+    "build:types": "tsc -b",
     "clean": "rm -rf dist",
     "prepublish": "yarn build",
     "publish:public": "yarn publish --access public",
@@ -30,21 +33,13 @@
     "@guardian/src-helpers": "^3.3.0-rc.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.10.0",
-    "@babel/preset-react": "^7.10.0",
-    "@babel/preset-typescript": "^7.9.0",
-    "@emotion/babel-preset-css-prop": "^11.0.0",
-    "@guardian/src-foundations": "^3.3.0-rc.0",
-    "@guardian/src-link": "^3.3.0-rc.0",
-    "rollup": "^1.17.0",
-    "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-commonjs": "^10.0.2",
-    "rollup-plugin-node-resolve": "^5.2.0"
+    "npm-run-all": "^4.1.5",
+    "typescript": "^4.1.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.1.2",
     "@guardian/src-foundations": "^3.3.0-rc.0",
+    "@guardian/src-icons": "^3.3.0-rc.0",
     "react": "^17.0.1"
   }
 }

src/core/components/accordion/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/types",
+    "declaration": true,
+    "emitDeclarationOnly": true
+  },
+  "include": [".", "../../foundations/types/themes.d.ts"],
+  "exclude": ["dist", "stories.tsx", "stories/**/*"],
+  "references": [
+    {
+      "path": "../../foundations"
+    },
+    {
+      "path": "../../icons"
+    }
+  ]
+}