Merge branch 'main' of github.com:NHSDigital/nhsuk-react-components into feature/deprecatePanelAndPromo

Author: Tomdango

.storybook/config.js

@@ -1,3 +1,10 @@
 module.exports = {
-  addons: ['@storybook/addon-storysource'],
+  stories: ['../stories/*.stories.@(ts|tsx)', '../stories/**/*.stories.@(ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-scss'],
+
+  typescript: {
+    check: true,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+  },
 };

.storybook/main.js

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/addons";
+import nhsTheme from "./theme";
+
+addons.setConfig({
+    theme: nhsTheme
+});

.storybook/manager.js

@@ -0,0 +1,6 @@
+import "./storybook.scss";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}
+

.storybook/preview.js

@@ -1 +1,14 @@
 @import '../node_modules/nhsuk-frontend/dist/nhsuk.css';
+
+.tag-wrapper {
+  display: flex;
+  flex-direction: column;
+
+  & > .nhsuk-tag {
+    margin-bottom: 10px;
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+}

.storybook/storybook.scss

@@ -1,37 +1,36 @@
-import { create } from '@storybook/theming';
+import { create } from "@storybook/theming/create";
+const version = require("../package.json").version;
 
 export default create({
-  base: 'light',
-  background: 'white',
-  colorPrimary: '#005eb8',
-  colorSecondary: '#425563',
+    base: 'light',
+    background: 'white',
+    colorPrimary: '#005eb8',
+    colorSecondary: '#425563',
 
-  // UI
-  appBg: 'white',
-  appContentBg: 'white',
-  appBorderColor: 'grey',
-  appBorderRadius: 4,
+    // UI
+    appBg: 'white',
+    appContentBg: 'white',
+    appBorderColor: 'grey',
+    appBorderRadius: 4,
 
-  // Typography
-  fontBase: '"Frutiger W01", Arial, sans-serif',
-  fontCode: 'monospace',
+    // Typography
+    fontCode: 'monospace',
 
-  // Text colors
-  textColor: '#212b32',
-  textInverseColor: 'white',
+    // Text colors
+    textColor: '#212b32',
+    textInverseColor: 'white',
 
-  // Toolbar default and active colors
-  barTextColor: 'rgba(255,255,255,0.8)',
-  barSelectedColor: 'rgba(255,255,255,1)',
-  barBg: '#005eb8',
+    // Toolbar default and active colors
+    barTextColor: 'rgba(255,255,255,0.8)',
+    barSelectedColor: 'rgba(255,255,255,1)',
+    barBg: '#005eb8',
 
-  // Form colors
-  inputBg: 'white',
-  inputBorder: '#425563',
-  inputTextColor: '#212b32',
-  inputBorderRadius: 4,
+    // Form colors
+    inputBg: 'white',
+    inputBorder: '#425563',
+    inputTextColor: '#212b32',
+    inputBorderRadius: 4,
 
-  brandTitle: 'NHS.UK React Components',
-  brandUrl: 'https://beta.nhs.uk/service-manual/',
-  brandImage: 'https://assets.nhs.uk/images/nhs-logo.png',
+    brandTitle: `NHS.UK React Components (v${version})`,
+    brandUrl: 'https://github.com/NHSDigital/nhsuk-react-components'
 });

.storybook/theme.js

@@ -0,0 +1,51 @@
+# Unreleased Changes
+## New Card Component
+
+The new Card component from `nhsuk-frontend` 4 has been added. Check out the storybook for usage examples!
+
+## WarningCallout
+
+### Removal of WarningCallout "label" prop
+
+The WarningCallout `label` prop has been removed, and replaced with `WarningCallout.Label`.
+
+Existing usages of the WarningCallout will need to be replaced with the new syntax, or will no longer render properly.
+
+```jsx
+// Old Syntax
+<WarningCallout label="School, nursery or work">
+  <p>
+    Stay away from school, nursery or work until all the spots have crusted over.
+    This is usually 5 days after the spots first appeared.
+  </p>
+</WarningCallout>
+
+// New Syntax
+<WarningCallout>
+  <WarningCallout.Label>School, nursery or work</WarningCallout.Label>
+  <p>
+    Stay away from school, nursery or work until all the spots have crusted over.
+    This is usually 5 days after the spots first appeared.
+  </p>
+</WarningCallout>
+```
+
+### Addition of hidden text on the WarningCallout.Label
+
+The `WarningCallout.Label` now has the hidden text `Important: ` before the label content. If this causes an issue in your application, and you would like to change or disable this hidden text you are able to do via the `visuallyHiddenText` prop.
+
+```jsx
+// Custom Visually Hidden Text
+<WarningCallout.Label visuallyHiddenText="This is very, very important: ">
+  Something Quite Important
+</WarningCallout.Label>
+
+// Disabled Visually Hidden Text
+<WarningCallout.Label visuallyHiddenText={false}>
+  Something Much Less Important
+</WarningCallout.Label>
+```
+
+## Hint component renders as div
+
+The `Hint` component now renders as a `div` element rather than a `span`.

.storybook/webpack.config.js

@@ -1,8 +1,8 @@
 module.exports = {
-  presets: ['@babel/env', '@babel/typescript', '@babel/preset-react'],
+  presets: ['@babel/preset-env', '@babel/typescript', '@babel/preset-react'],
   plugins: [
     '@babel/plugin-proposal-numeric-separator',
-    '@babel/proposal-class-properties',
+    ['@babel/proposal-class-properties', { loose: true }],
     '@babel/proposal-object-rest-spread',
   ],
 };

CHANGELOG.md

@@ -8,28 +8,29 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.10.1",
-    "@babel/core": "^7.10.1",
-    "@babel/plugin-proposal-numeric-separator": "^7.10.1",
-    "@babel/preset-react": "^7.10.1",
-    "@babel/preset-typescript": "^7.10.1",
-    "@storybook/addon-centered": "^5.3.19",
-    "@storybook/addon-info": "^5.3.19",
-    "@storybook/addon-storysource": "^5.3.19",
-    "@storybook/react": "^5.3.19",
-    "@storybook/storybook-deployer": "^2.8.6",
+    "@babel/cli": "^7.12.17",
+    "@babel/core": "^7.12.17",
+    "@babel/preset-react": "^7.12.13",
+    "@babel/preset-typescript": "^7.12.17",
+    "@storybook/addon-actions": "^6.1.18",
+    "@storybook/addon-essentials": "^6.1.18",
+    "@storybook/addon-links": "^6.1.18",
+    "@storybook/addon-storysource": "^6.1.18",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^6.1.18",
+    "@storybook/storybook-deployer": "^2.8.7",
     "@types/classnames": "^2.2.9",
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/jest": "^24.0.23",
     "@types/jest-axe": "^3.2.2",
-    "@types/node": "^12.12.12",
     "@types/react": "^16.9.3",
     "@types/react-dom": "^16.9.3",
     "@typescript-eslint/eslint-plugin": "^2.3.1",
     "@typescript-eslint/parser": "^2.3.1",
     "awesome-typescript-loader": "^5.2.1",
-    "babel-loader": "^8.0.6",
+    "babel-loader": "^8.2.2",
+    "css-loader": "^5.0.0",
     "enzyme": "^3.10.3",
     "enzyme-adapter-react-16": "^1.15.1",
     "enzyme-to-json": "^3.4.3",
@@ -43,34 +44,37 @@
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-react": "^7.14.3",
     "eslint-plugin-react-hooks": "^1.7.0",
-    "jest": "^24.9.0",
+    "jest": "^26.6.1",
     "jest-axe": "^3.4.0",
-    "nhsuk-frontend": "^3.1.0",
+    "nhsuk-frontend": "^4.1.0",
     "node-sass": "^4.14.1",
     "prettier": "^1.18.2",
     "react": "^16.9.3",
     "react-docgen-typescript-loader": "^3.2.1",
     "react-dom": "^16.9.3",
+    "react-is": "^17.0.1",
     "rollup": "^1.21.4",
     "rollup-plugin-sass": "^1.2.2",
     "rollup-plugin-scss": "^1.0.2",
     "rollup-plugin-typescript2": "^0.24.2",
-    "sass-loader": "^8.0.2",
-    "ts-jest": "^24.2.0",
+    "sass-loader": "^10.0.4",
+    "style-loader": "^2.0.0",
+    "ts-jest": "^26.4.3",
     "ts-node": "^8.4.1",
     "tslib": "^2.0.0",
     "typescript": "^3.9.5"
   },
   "peerDependencies": {
-    "nhsuk-frontend": "^3.0.0",
+    "nhsuk-frontend": ">=4.0.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0"
   },
   "dependencies": {
+    "@babel/plugin-proposal-class-properties": "7.10.1",
     "classnames": "^2.2.6"
   },
   "scripts": {
-    "storybook": "start-storybook",
+    "storybook": "start-storybook -p 6006",
     "cleanup": "bash scripts/cleanup.sh",
     "build": "yarn cleanup && yarn build:dist && yarn build:lib",
     "build:dist": "rollup -c",
@@ -80,6 +84,7 @@
     "test:watch": "jest --watch",
     "lint": "eslint --fix -c .eslintrc.js --ext .ts --ext .tsx src/*.ts src/components/**/*.ts src/util/*.ts",
     "prebuild": "yarn lint && yarn test --coverage",
+    "build-storybook": "build-storybook",
     "prepare": "yarn build"
   },
   "files": [