Merge pull request #780 from daniel-ac-martin/error-summary

Add ErrorSummary component

apps/govuk-docs/src/common/pages/components.tsx

@@ -16,6 +16,7 @@ const mainStories = [
   require('../../../../../components/date-input/spec/DateInput.stories.mdx'),
   require('../../../../../components/details/spec/Details.stories.mdx'),
   require('../../../../../components/error-message/spec/ErrorMessage.stories.mdx'),
+  require('../../../../../components/error-summary/spec/ErrorSummary.stories.mdx'),
   require('../../../../../components/fieldset/spec/FieldSet.stories.mdx'),
   require('../../../../../components/file-upload/spec/FileUpload.stories.mdx'),
   require('../../../../../components/footer/spec/Footer.stories.mdx'),

components/error-summary/.gitignore

@@ -0,0 +1,5 @@
+dist/
+node_modules/
+package-lock.json
+pnpm-lock.yaml
+tsconfig.tsbuildinfo

components/error-summary/README.md

@@ -0,0 +1,77 @@
+NotGovUK - Error Summary
+========================
+
+A component to summarise any errors a user has made.
+
+
+Using this package
+------------------
+
+First install the package into your project:
+
+```shell
+npm install -S @not-govuk/error-summary
+```
+
+Then use it in your code as follows:
+
+```js
+import React, { createElement as h } from 'react';
+import ErrorSummary from '@not-govuk/error-summary';
+
+export const MyComponent = props => (
+  <ErrorSummary
+    title="There is a problem"
+    items={[
+      {
+        text: "The date your passport was issued must be in the past",
+        href: "#"
+      },
+      {
+        text: "Enter a postcode, like AA1 1AA",
+        href: "#"
+      }
+    ]}
+  />
+);
+
+export default MyComponent;
+```
+
+
+Working on this package
+-----------------------
+
+Before working on this package you must install its dependencies using
+the following command:
+
+```shell
+pnpm install
+```
+
+
+### Testing
+
+Run the unit tests.
+
+```shell
+npm test
+```
+
+
+### Building
+
+Build the package by compiling the TypeScript source code.
+
+```shell
+npm run build
+```
+
+
+### Clean-up
+
+Remove any previously built files.
+
+```shell
+npm run clean
+```

components/error-summary/assets/ErrorSummary.scss

@@ -0,0 +1,2 @@
+@import "@not-govuk/sass-base";
+@import "govuk-frontend/govuk/components/error-summary";

components/error-summary/jest.config.js

@@ -0,0 +1,15 @@
+'use strict';
+
+const baseConfig = require('../../jest.config.base');
+
+const config = {
+  ...baseConfig,
+  collectCoverageFrom: [
+    '<rootDir>/src/**.{ts,tsx}',
+  ],
+  testMatch: [
+    '<rootDir>/spec/**.{ts,tsx}'
+  ]
+};
+
+module.exports = config;

components/error-summary/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@not-govuk/error-summary",
+  "version": "0.7.2",
+  "description": "A component to summarise any errors a user has made.",
+  "main": "src/ErrorSummary.tsx",
+  "sass": "assets/ErrorSummary.scss",
+  "publishConfig": {
+    "main": "dist/ErrorSummary.js",
+    "typings": "dist/ErrorSummary.d.ts"
+  },
+  "files": [
+    "/assets",
+    "/dist"
+  ],
+  "scripts": {
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
+    "prepublishOnly": "npm run clean && npm run build",
+    "build": "tsc",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo"
+  },
+  "author": "Daniel A.C. Martin <npm@daniel-martin.co.uk> (http://daniel-martin.co.uk/)",
+  "license": "MIT",
+  "keywords": [
+    "react-components"
+  ],
+  "dependencies": {
+    "@not-govuk/anchor-list": "workspace:^0.7.2",
+    "@not-govuk/component-helpers": "workspace:^0.7.2",
+    "@not-govuk/sass-base": "workspace:^0.7.2",
+    "govuk-frontend": "4.6.0"
+  },
+  "peerDependencies": {
+    "@not-govuk/docs-components": "^0.7.2",
+    "@storybook/addon-docs": "^6.4.0",
+    "react": "^16.9.55"
+  },
+  "peerDependenciesMeta": {
+    "@not-govuk/docs-components": {
+      "optional": true
+    },
+    "@storybook/addon-docs": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@mdx-js/react": "1.6.22",
+    "@not-govuk/checkboxes": "workspace:^0.7.2",
+    "@not-govuk/component-test-helpers": "workspace:^0.7.2",
+    "@not-govuk/date-input": "workspace:^0.7.2",
+    "@not-govuk/page": "workspace:^0.7.2",
+    "@not-govuk/text-input": "workspace:^0.7.2",
+    "@types/react": "16.14.32",
+    "jest": "29.2.2",
+    "jest-environment-jsdom": "29.2.2",
+    "ts-jest": "29.0.3",
+    "typescript": "4.8.4"
+  }
+}