diff --git a/package.json b/package.json index 90ea5d088..ae22b8bc5 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "docz": "^2.3.1", "gatsby-plugin-sass": "^3.2.0", "gatsby-theme-docz": "^2.3.1", - "govuk-frontend": "^3.14.0", + "govuk-frontend": "4.0.1", "husky": "^4.3.8", "identity-obj-proxy": "^3.0.0", "immutability-helper": "^3.1.1", diff --git a/packages/core/package.json b/packages/core/package.json index 90e58f826..f0b5f4d27 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -30,7 +30,7 @@ "clean": "rimraf lib" }, "peerDependencies": { - "@tpr/theming": "^2.4.0", + "@tpr/theming": "^3.0.0", "react": "^16.14.0", "react-dom": "^16.14.0" }, diff --git a/packages/forms/package.json b/packages/forms/package.json index 38caa89fd..d793a8e8f 100644 --- a/packages/forms/package.json +++ b/packages/forms/package.json @@ -1,68 +1,68 @@ { - "name": "@tpr/forms", - "version": "5.0.0", - "description": "TPR Forms components", - "author": "David Alekna ", - "license": "MIT", - "main": "./lib/index.cjs.js", - "module": "./lib/index.js", - "typings": "./lib/index.d.ts", - "sideEffects": false, - "files": [ - "lib/*" - ], - "repository": { - "type": "git", - "url": "https://dev.azure.com/thepensionsregulator/TPR/_git/react-components.git" - }, - "bugs": { - "url": "https://dev.azure.com/thepensionsregulator/TPR/_git/react-components/issues" - }, - "homepage": "https://dev.azure.com/thepensionsregulator/TPR/_git/react-components#readme", - "keywords": [ - "tpr" - ], - "scripts": { - "prepare": "yarn build", - "copycss": "copyfiles -u 1 \"./src/**/*.{css,scss}\" \"./lib/\" && echo @tpr/forms css files copied.", - "bundle": "cross-env-shell \"../../node_modules/.bin/rollup\" -c rollup.config.js", - "build": "tsc -b && yarn copycss", - "clean": "rimraf lib" - }, - "peerDependencies": { - "@tpr/core": "^3.0.0", - "@tpr/icons": "^3.1.10", - "@tpr/theming": "^2.4.0", - "react": "^16.14.0", - "react-dom": "^16.14.0", - "react-helmet": "^6.1.0" - }, - "dependencies": { - "@financial-times/accessible-autocomplete": "^2.2.1", - "@tpr/govuk-react-jsx": "^6.2.1", - "@types/lodash.isequal": "^4.5.5", - "@types/lodash.merge": "^4.6.6", - "@types/qs": "^6.9.5", - "date-fns": "^2.17.0", - "final-form": "^4.20.1", - "govuk-frontend": "^3.14.0", - "lodash.isequal": "^4.5.0", - "lodash.merge": "^4.6.2", - "qs": "^6.9.6", - "react-final-form": "^6.5.2", - "tslib": "^2.1.0" - }, - "publishConfig": { - "access": "public" - }, - "devDependencies": { - "@tpr/core": "file:../core", - "@tpr/icons": "file:../icons", - "@tpr/theming": "file:../theming", - "cross-env": "^7.0.3", - "node-sass": "^5.0.0", - "react": "file:../../node_modules/react", - "react-dom": "file:../../node_modules/react-dom" - }, - "gitHead": "57aec9c9de22596d6343bae07eb6b198322a0bee" + "name": "@tpr/forms", + "version": "5.0.0", + "description": "TPR Forms components", + "author": "David Alekna ", + "license": "MIT", + "main": "./lib/index.cjs.js", + "module": "./lib/index.js", + "typings": "./lib/index.d.ts", + "sideEffects": false, + "files": [ + "lib/*" + ], + "repository": { + "type": "git", + "url": "https://dev.azure.com/thepensionsregulator/TPR/_git/react-components.git" + }, + "bugs": { + "url": "https://dev.azure.com/thepensionsregulator/TPR/_git/react-components/issues" + }, + "homepage": "https://dev.azure.com/thepensionsregulator/TPR/_git/react-components#readme", + "keywords": [ + "tpr" + ], + "scripts": { + "prepare": "yarn build", + "copycss": "copyfiles -u 1 \"./src/**/*.{css,scss}\" \"./lib/\" && echo @tpr/forms css files copied.", + "bundle": "cross-env-shell \"../../node_modules/.bin/rollup\" -c rollup.config.js", + "build": "tsc -b && yarn copycss", + "clean": "rimraf lib" + }, + "peerDependencies": { + "@tpr/core": "^4.0.0", + "@tpr/icons": "^4.0.0", + "@tpr/theming": "^3.0.0", + "react": "^16.14.0", + "react-dom": "^16.14.0", + "react-helmet": "^6.1.0" + }, + "dependencies": { + "@financial-times/accessible-autocomplete": "^2.2.1", + "@tpr/govuk-react-jsx": "^7.0.1", + "@types/lodash.isequal": "^4.5.5", + "@types/lodash.merge": "^4.6.6", + "@types/qs": "^6.9.5", + "date-fns": "^2.17.0", + "final-form": "^4.20.1", + "govuk-frontend": "^4.0.1", + "lodash.isequal": "^4.5.0", + "lodash.merge": "^4.6.2", + "qs": "^6.9.6", + "react-final-form": "^6.5.2", + "tslib": "^2.1.0" + }, + "publishConfig": { + "access": "public" + }, + "devDependencies": { + "@tpr/core": "file:../core", + "@tpr/icons": "file:../icons", + "@tpr/theming": "file:../theming", + "cross-env": "^7.0.3", + "node-sass": "^5.0.0", + "react": "file:../../node_modules/react", + "react-dom": "file:../../node_modules/react-dom" + }, + "gitHead": "57aec9c9de22596d6343bae07eb6b198322a0bee" } diff --git a/packages/icons/package.json b/packages/icons/package.json index ebd112d04..18b8f7c12 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -32,8 +32,8 @@ "clean": "rimraf lib" }, "peerDependencies": { - "@tpr/core": "^3.0.0", - "@tpr/theming": "^2.4.0", + "@tpr/core": "^4.0.0", + "@tpr/theming": "^3.0.0", "react": "^16.14.0", "react-dom": "^16.14.0" }, diff --git a/packages/icons/src/__tests__/icons.spec.tsx b/packages/icons/src/__tests__/icons.spec.tsx index 685064b40..8c186c6fb 100644 --- a/packages/icons/src/__tests__/icons.spec.tsx +++ b/packages/icons/src/__tests__/icons.spec.tsx @@ -5,11 +5,7 @@ import { ArrowLeft, ArrowRight, } from '../components/arrows/arrows'; -import { - CheckedCircle, - ErrorCircle, - WarningCircle, -} from '../components/circle/circle'; +import { CheckedCircle, ErrorCircle } from '../components/circle/circle'; import { Cross } from '../components/cross/cross'; import { CheckboxChecked, @@ -103,29 +99,6 @@ describe('Icons', () => { expect(icon).toContainElement(title); expect(icon).not.toHaveAttribute('aria-hidden'); }); - - test('Warning Circle to render without error', () => { - const { getByTestId } = render(); - expect(getByTestId('warning-circle')).toBeDefined(); - }); - - test('Warning Circle to be aria-hidden by default', () => { - const { getByTestId } = render(); - expect(getByTestId('warning-circle')).toHaveAttribute( - 'aria-hidden', - 'true', - ); - }); - - test('Warning Circle to not be aria-hidden if there is alternative text', () => { - const { getByTestId, getByText } = render( - , - ); - const icon = getByTestId('warning-circle'); - const title = getByText('Test label'); - expect(icon).toContainElement(title); - expect(icon).not.toHaveAttribute('aria-hidden'); - }); }); describe('Cross', () => { diff --git a/packages/icons/src/components/circle/circle.tsx b/packages/icons/src/components/circle/circle.tsx index 35bcbe436..7e5bdf204 100644 --- a/packages/icons/src/components/circle/circle.tsx +++ b/packages/icons/src/components/circle/circle.tsx @@ -29,14 +29,3 @@ export const ErrorCircle: React.FC = (props) => { ); }; - -export const WarningCircle: React.FC = (props) => { - return ( - - - - ); -}; diff --git a/packages/icons/src/index.mdx b/packages/icons/src/index.mdx index b590ec7f2..d81dc9f23 100644 --- a/packages/icons/src/index.mdx +++ b/packages/icons/src/index.mdx @@ -12,7 +12,6 @@ import { RadioButtonUnchecked, CheckedCircle, ErrorCircle, - WarningCircle, ArrowUp, ArrowDown, ArrowLeft, @@ -40,7 +39,6 @@ import { CheckboxChecked, CheckboxBlank } from '@tpr/icons'; | RadioButtonUnchecked | | CheckedCircle | | ErrorCircle | -| WarningCircle | | ArrowUp | | ArrowDown | | ArrowLeft | @@ -75,12 +73,6 @@ import { CheckboxChecked, CheckboxBlank } from '@tpr/icons'; -## Warning Circle - - - - - ## Arrow Up diff --git a/packages/layout/package.json b/packages/layout/package.json index 4180fd532..24b75dc51 100644 --- a/packages/layout/package.json +++ b/packages/layout/package.json @@ -1,68 +1,69 @@ { - "name": "@tpr/layout", - "version": "5.0.0", - "description": "TPR Layout components", - "author": "David Alekna ", - "license": "MIT", - "main": "./lib/index.cjs.js", - "module": "./lib/index.js", - "typings": "./lib/index.d.ts", - "sideEffects": false, - "files": [ - "lib/*" - ], - "repository": { - "type": "git", - "url": "https://github.com/thepensionsregulator/react-components.git" - }, - "bugs": { - "url": "https://github.com/thepensionsregulator/react-components/issues" - }, - "homepage": "https://github.com/thepensionsregulator/react-components#readme", - "keywords": [ - "tpr" - ], - "scripts": { - "prepare": "yarn build", - "test": "jest --coverage", - "test:watch": "jest --watch", - "copycss": "copyfiles -u 1 \"./src/**/*.{css,scss}\" \"./lib/\" && echo @tpr/layout css files copied.", - "bundle": "cross-env-shell \"../../node_modules/.bin/rollup\" -c rollup.config.js", - "build": "tsc -b && yarn copycss", - "clean": "rimraf lib" - }, - "peerDependencies": { - "@tpr/core": "^3.0.0", - "@tpr/forms": "^4.0.8", - "@tpr/icons": "^3.1.10", - "@tpr/theming": "^2.4.0", - "react": "^16.14.0", - "react-dom": "^16.14.0" - }, - "dependencies": { - "@types/lodash.merge": "^4.6.6", - "@xstate/react": "^1.2.2", - "date-fns": "^2.17.0", - "final-form": "^4.20.1", - "lodash.merge": "^4.6.2", - "qs": "^6.9.6", - "react-collapsible": "^2.8.3", - "react-final-form": "^6.5.2", - "tslib": "^2.1.0", - "xstate": "^4.16.2" - }, - "publishConfig": { - "access": "public" - }, - "devDependencies": { - "@tpr/core": "file:../core", - "@tpr/forms": "file:../forms", - "@tpr/icons": "file:../icons", - "@tpr/theming": "file:../theming", - "cross-env": "^7.0.3", - "node-sass": "^5.0.0", - "react": "file:../../node_modules/react", - "react-dom": "file:../../node_modules/react-dom" - }, - "gitHead": "5c43a52eaf98d8e7e9e29581196655397b2d15d9" + "name": "@tpr/layout", + "version": "5.0.0", + "description": "TPR Layout components", + "author": "David Alekna ", + "license": "MIT", + "main": "./lib/index.cjs.js", + "module": "./lib/index.js", + "typings": "./lib/index.d.ts", + "sideEffects": false, + "files": [ + "lib/*" + ], + "repository": { + "type": "git", + "url": "https://github.com/thepensionsregulator/react-components.git" + }, + "bugs": { + "url": "https://github.com/thepensionsregulator/react-components/issues" + }, + "homepage": "https://github.com/thepensionsregulator/react-components#readme", + "keywords": [ + "tpr" + ], + "scripts": { + "prepare": "yarn build", + "test": "jest --coverage", + "test:watch": "jest --watch", + "copycss": "copyfiles -u 1 \"./src/**/*.{css,scss}\" \"./lib/\" && echo @tpr/layout css files copied.", + "bundle": "cross-env-shell \"../../node_modules/.bin/rollup\" -c rollup.config.js", + "build": "tsc -b && yarn copycss", + "clean": "rimraf lib" + }, + "peerDependencies": { + "@tpr/core": "^4.0.0", + "@tpr/forms": "^5.0.0", + "@tpr/icons": "^4.0.0", + "@tpr/theming": "^3.0.0", + "react": "^16.14.0", + "react-dom": "^16.14.0" + }, + "dependencies": { + "@tpr/govuk-react-jsx": "^7.0.1", + "@types/lodash.merge": "^4.6.6", + "@xstate/react": "^1.2.2", + "date-fns": "^2.17.0", + "final-form": "^4.20.1", + "lodash.merge": "^4.6.2", + "qs": "^6.9.6", + "react-collapsible": "^2.8.3", + "react-final-form": "^6.5.2", + "tslib": "^2.1.0", + "xstate": "^4.16.2" + }, + "publishConfig": { + "access": "public" + }, + "devDependencies": { + "@tpr/core": "file:../core", + "@tpr/forms": "file:../forms", + "@tpr/icons": "file:../icons", + "@tpr/theming": "file:../theming", + "cross-env": "^7.0.3", + "node-sass": "^5.0.0", + "react": "file:../../node_modules/react", + "react-dom": "file:../../node_modules/react-dom" + }, + "gitHead": "5c43a52eaf98d8e7e9e29581196655397b2d15d9" } diff --git a/packages/layout/rollup.config.js b/packages/layout/rollup.config.js index 27fe33585..f387583f5 100644 --- a/packages/layout/rollup.config.js +++ b/packages/layout/rollup.config.js @@ -7,6 +7,7 @@ export default rollup({ '@tpr/forms', '@tpr/icons', '@tpr/theming', + '@tpr/govuk-react-jsx', '@types/lodash.merge', '@xstate/react', 'final-form', diff --git a/packages/layout/src/components/__tests__/info.spec.tsx b/packages/layout/src/components/__tests__/info.spec.tsx deleted file mode 100644 index 2ba55a41d..000000000 --- a/packages/layout/src/components/__tests__/info.spec.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import { Info } from '../info/info'; -import { axe } from 'jest-axe'; - -describe('Info', () => { - test('is accessible', async () => { - const { container } = render( - -

Here is some information

- , - ); - - const results = await axe(container); - expect(results).toHaveNoViolations(); - }); - - test('uses section element', () => { - const { getByTestId } = render( - -

Here is some information

- , - ); - const container = getByTestId('example'); - expect(container.tagName).toEqual('SECTION'); - }); - - test('important message renders correctly', () => { - const { getByText, getByTestId } = render( - -

Here is some information

- , - ); - - const container = getByTestId('example'); - const wrapper = getByText('Important Information'); - const title = getByText('Title'); - expect(container).toHaveAttribute('aria-labelledby', 'example-important'); - expect(wrapper).toHaveClass('importantMessage'); - expect(wrapper).toHaveAttribute('id', 'example-important'); - expect(title.tagName).toEqual('H2'); - expect(getByText('Here is some information')).toBeInTheDocument(); - }); -}); diff --git a/packages/layout/src/components/__tests__/warningbox.spec.tsx b/packages/layout/src/components/__tests__/warningText.spec.tsx similarity index 63% rename from packages/layout/src/components/__tests__/warningbox.spec.tsx rename to packages/layout/src/components/__tests__/warningText.spec.tsx index bd71021a5..f10f91f0f 100644 --- a/packages/layout/src/components/__tests__/warningbox.spec.tsx +++ b/packages/layout/src/components/__tests__/warningText.spec.tsx @@ -1,19 +1,19 @@ import React from 'react'; import { render } from '@testing-library/react'; import { P } from '@tpr/core'; -import { WarningBox } from '../warning/warning'; +import { WarningText } from '../warningText/warningText'; -describe('WarningBox', () => { +describe('WarningText', () => { test('Renders with expected text and role', () => { // Arrange const warningBoxText = 'This is the warning text'; - const warningLabelText = 'warning-label-text'; + const iconFallbackText = 'Icon fallback text'; // Act const { getByRole, getByTitle } = render( - +

{warningBoxText}

- , + , ); let warningBox = getByRole('alert'); @@ -21,6 +21,6 @@ describe('WarningBox', () => { // Assert expect(warningBox).toBeDefined(); expect(warningBox).toHaveTextContent(warningBoxText); - expect(getByTitle(warningLabelText)).toBeDefined(); + expect(getByTitle(iconFallbackText)).toBeDefined(); }); }); diff --git a/packages/layout/src/components/cards/actuary/i18n.ts b/packages/layout/src/components/cards/actuary/i18n.ts index 15e921ed5..0e339e298 100644 --- a/packages/layout/src/components/cards/actuary/i18n.ts +++ b/packages/layout/src/components/cards/actuary/i18n.ts @@ -90,6 +90,7 @@ export const i18n: ActuaryI18nProps = { remove: 'Remove actuary', cancel: 'Cancel', }, + iconFallbackText: 'Warning', }, date: { title: 'Remove this actuary', diff --git a/packages/layout/src/components/cards/actuary/views/remove/confirm/confirm.tsx b/packages/layout/src/components/cards/actuary/views/remove/confirm/confirm.tsx index 24c49cc40..52b6b7c1d 100644 --- a/packages/layout/src/components/cards/actuary/views/remove/confirm/confirm.tsx +++ b/packages/layout/src/components/cards/actuary/views/remove/confirm/confirm.tsx @@ -58,6 +58,7 @@ export const ConfirmRemove = () => { removeMessage1={i18n.remove.confirm.dialog.message1} removeBtnTitle={i18n.remove.confirm.buttons.remove} cancelBtnTitle={i18n.remove.confirm.buttons.cancel} + iconFallbackText={i18n.remove.confirm.iconFallbackText} handleRemove={handleRemove} handleCancel={() => send('CANCEL')} loading={loading} diff --git a/packages/layout/src/components/cards/common/interfaces.ts b/packages/layout/src/components/cards/common/interfaces.ts index e1a01fdf7..0c0cc4355 100644 --- a/packages/layout/src/components/cards/common/interfaces.ts +++ b/packages/layout/src/components/cards/common/interfaces.ts @@ -188,6 +188,7 @@ export interface I18nRemoveViewDateAndConfirm { remove: string; cancel: string; }; + iconFallbackText: string; }; } @@ -229,6 +230,7 @@ export interface I18nRemoveViewReasonAndConfirm { remove: string; cancel: string; }; + iconFallbackText: string; }; } diff --git a/packages/layout/src/components/cards/common/views/remove/confirm/confirm.module.scss b/packages/layout/src/components/cards/common/views/remove/confirm/confirm.module.scss index 81fbbe223..fb2a5c7dd 100644 --- a/packages/layout/src/components/cards/common/views/remove/confirm/confirm.module.scss +++ b/packages/layout/src/components/cards/common/views/remove/confirm/confirm.module.scss @@ -1,33 +1,14 @@ @import '@tpr/core/lib/components/typography/typography.module.scss'; -// typography.module.scss includes '@tpr/theming/lib/variables.scss' -.confirm { - flex-direction: column; - - .paragraph1 { +div.confirm { + p:last-child { @include removeMarginBottom; } - - .paragraph2 { - margin-top: $space-3; - } - - .actionButtons { - .cancelButton { - margin: $space-3; - } - } + margin-bottom: $space-3; } -@media (max-width: 30rem) { - .confirm { - .actionButtons { - flex-wrap: wrap; - - .cancelButton { - margin-top: 0 !important; - margin-left: 0 !important; - } - } +.actionButtons { + .cancelButton { + margin: $space-3; } } diff --git a/packages/layout/src/components/cards/common/views/remove/confirm/confirm.tsx b/packages/layout/src/components/cards/common/views/remove/confirm/confirm.tsx index 40daa3672..587966c77 100644 --- a/packages/layout/src/components/cards/common/views/remove/confirm/confirm.tsx +++ b/packages/layout/src/components/cards/common/views/remove/confirm/confirm.tsx @@ -2,9 +2,9 @@ import React from 'react'; import { Hr, Flex, P, H3, Link } from '@tpr/core'; import { Content } from '../../../../components/content'; import { ArrowButton } from '../../../../../buttons/buttons'; -import { WarningBox } from '../../../../../warning/warning'; import { cardType, cardTypeName } from '../../../interfaces'; import styles from './confirm.module.scss'; +import { WarningText } from '../../../../../warningText/warningText'; interface ConfirmProps { cardType: cardType; @@ -18,7 +18,7 @@ interface ConfirmProps { handleRemove: () => void; handleCancel: () => void; loading: boolean; - warningLabel?: string; + iconFallbackText: string; } const Confirm: React.FC = ({ @@ -33,37 +33,38 @@ const Confirm: React.FC = ({ handleRemove, handleCancel, loading, - warningLabel, + iconFallbackText, }) => { return (

{removeTitle}

- - -

{removeMessage1}

- {removeMessage2 && ( -

{removeMessage2}

- )} - - - - {cancelBtnTitle} - - +
+ +

{removeMessage1}

+ {removeMessage2 &&

{removeMessage2}

} + + + + + {cancelBtnTitle} + - +
); }; diff --git a/packages/layout/src/components/cards/corporateGroup/i18n.ts b/packages/layout/src/components/cards/corporateGroup/i18n.ts index 08fa5a30c..7f638b9c5 100644 --- a/packages/layout/src/components/cards/corporateGroup/i18n.ts +++ b/packages/layout/src/components/cards/corporateGroup/i18n.ts @@ -118,6 +118,7 @@ export const i18n: CorporateGroupI18nProps = { remove: 'Remove Trustee', cancel: 'Cancel', }, + iconFallbackText: 'Warning', }, reason: { title: 'Remove this trustee', diff --git a/packages/layout/src/components/cards/corporateGroup/views/remove/confirm/confirm.tsx b/packages/layout/src/components/cards/corporateGroup/views/remove/confirm/confirm.tsx index 2bcc1f462..83b10a184 100644 --- a/packages/layout/src/components/cards/corporateGroup/views/remove/confirm/confirm.tsx +++ b/packages/layout/src/components/cards/corporateGroup/views/remove/confirm/confirm.tsx @@ -55,6 +55,7 @@ export const ConfirmRemove: React.FC = () => { removeMessage1={i18n.remove.confirm.subtitle} removeBtnTitle={i18n.remove.confirm.buttons.remove} cancelBtnTitle={i18n.remove.confirm.buttons.cancel} + iconFallbackText={i18n.remove.confirm.iconFallbackText} handleRemove={handleRemove} handleCancel={() => send('CANCEL')} loading={loading} diff --git a/packages/layout/src/components/cards/employer/i18n.ts b/packages/layout/src/components/cards/employer/i18n.ts index 5f66c142d..3c578c98e 100644 --- a/packages/layout/src/components/cards/employer/i18n.ts +++ b/packages/layout/src/components/cards/employer/i18n.ts @@ -135,6 +135,7 @@ export const i18n: EmployerI18nProps = { remove: 'Remove employer', cancel: 'Cancel', }, + iconFallbackText: 'Warning', }, date: { title: 'Remove this employer', diff --git a/packages/layout/src/components/cards/employer/views/remove/confirm/confirm.tsx b/packages/layout/src/components/cards/employer/views/remove/confirm/confirm.tsx index 87753a5e4..278b1a2fb 100644 --- a/packages/layout/src/components/cards/employer/views/remove/confirm/confirm.tsx +++ b/packages/layout/src/components/cards/employer/views/remove/confirm/confirm.tsx @@ -59,6 +59,7 @@ export const ConfirmRemove: React.FC = () => { removeMessage2={i18n.remove.confirm.dialog.message2} removeBtnTitle={i18n.remove.confirm.buttons.remove} cancelBtnTitle={i18n.remove.confirm.buttons.cancel} + iconFallbackText={i18n.remove.confirm.iconFallbackText} handleRemove={handleRemove} handleCancel={() => send('CANCEL')} loading={loading} diff --git a/packages/layout/src/components/cards/inHouse/i18n.ts b/packages/layout/src/components/cards/inHouse/i18n.ts index 30334e520..8abd21100 100644 --- a/packages/layout/src/components/cards/inHouse/i18n.ts +++ b/packages/layout/src/components/cards/inHouse/i18n.ts @@ -97,6 +97,7 @@ export const i18n: InHouseAdminI18nProps = { remove: 'Remove in house admin', cancel: 'Cancel', }, + iconFallbackText: 'Warning', }, date: { title: 'Remove this in house admin', diff --git a/packages/layout/src/components/cards/inHouse/views/remove/confirm/confirm.tsx b/packages/layout/src/components/cards/inHouse/views/remove/confirm/confirm.tsx index eb36fa50a..59e70ae11 100644 --- a/packages/layout/src/components/cards/inHouse/views/remove/confirm/confirm.tsx +++ b/packages/layout/src/components/cards/inHouse/views/remove/confirm/confirm.tsx @@ -59,6 +59,7 @@ export const ConfirmRemove: React.FC = () => { removeMessage2={i18n.remove.confirm.dialog.message2} removeBtnTitle={i18n.remove.confirm.buttons.remove} cancelBtnTitle={i18n.remove.confirm.buttons.cancel} + iconFallbackText={i18n.remove.confirm.iconFallbackText} handleRemove={handleRemove} handleCancel={() => send('CANCEL')} loading={loading} diff --git a/packages/layout/src/components/cards/independentTrustee/i18n.tsx b/packages/layout/src/components/cards/independentTrustee/i18n.tsx index bd8496c61..ed90962c1 100644 --- a/packages/layout/src/components/cards/independentTrustee/i18n.tsx +++ b/packages/layout/src/components/cards/independentTrustee/i18n.tsx @@ -75,6 +75,7 @@ export const i18n: IndependentTrusteeI18nProps = { remove: 'Remove Trustee', cancel: 'Cancel', }, + iconFallbackText: 'Warning', }, reason: { title: 'Remove this trustee', diff --git a/packages/layout/src/components/cards/independentTrustee/views/remove/confirm/confirm.tsx b/packages/layout/src/components/cards/independentTrustee/views/remove/confirm/confirm.tsx index b21dcf6fb..149c82d22 100644 --- a/packages/layout/src/components/cards/independentTrustee/views/remove/confirm/confirm.tsx +++ b/packages/layout/src/components/cards/independentTrustee/views/remove/confirm/confirm.tsx @@ -55,6 +55,7 @@ export const ConfirmRemove: React.FC = () => { removeMessage1={i18n.remove.confirm.subtitle} removeBtnTitle={i18n.remove.confirm.buttons.remove} cancelBtnTitle={i18n.remove.confirm.buttons.cancel} + iconFallbackText={i18n.remove.confirm.iconFallbackText} handleRemove={handleRemove} handleCancel={() => send('CANCEL')} loading={loading} diff --git a/packages/layout/src/components/cards/insurer/i18n.ts b/packages/layout/src/components/cards/insurer/i18n.ts index 27c8d7105..148bfbb15 100644 --- a/packages/layout/src/components/cards/insurer/i18n.ts +++ b/packages/layout/src/components/cards/insurer/i18n.ts @@ -76,6 +76,7 @@ export const i18n: InsurerI18nProps = { remove: 'Remove insurer', cancel: 'Cancel', }, + iconFallbackText: 'Warning', }, date: { title: 'Remove this insurer', diff --git a/packages/layout/src/components/cards/insurer/views/remove/confirm/confirm.tsx b/packages/layout/src/components/cards/insurer/views/remove/confirm/confirm.tsx index 89cdb6706..cd46e6b39 100644 --- a/packages/layout/src/components/cards/insurer/views/remove/confirm/confirm.tsx +++ b/packages/layout/src/components/cards/insurer/views/remove/confirm/confirm.tsx @@ -59,6 +59,7 @@ export const ConfirmRemove: React.FC = () => { removeMessage2={i18n.remove.confirm.dialog.message2} removeBtnTitle={i18n.remove.confirm.buttons.remove} cancelBtnTitle={i18n.remove.confirm.buttons.cancel} + iconFallbackText={i18n.remove.confirm.iconFallbackText} handleRemove={handleRemove} handleCancel={() => send('CANCEL')} loading={loading} diff --git a/packages/layout/src/components/cards/thirdParty/i18n.ts b/packages/layout/src/components/cards/thirdParty/i18n.ts index af1908891..0e50846af 100644 --- a/packages/layout/src/components/cards/thirdParty/i18n.ts +++ b/packages/layout/src/components/cards/thirdParty/i18n.ts @@ -73,6 +73,7 @@ export const i18n: ThirdPartyI18nProps = { remove: 'Remove third party admin', cancel: 'Cancel', }, + iconFallbackText: 'Warning', }, date: { title: 'Remove this third party admin', diff --git a/packages/layout/src/components/cards/thirdParty/views/remove/confirm/confirm.tsx b/packages/layout/src/components/cards/thirdParty/views/remove/confirm/confirm.tsx index 6b9b5cdb2..15be209c0 100644 --- a/packages/layout/src/components/cards/thirdParty/views/remove/confirm/confirm.tsx +++ b/packages/layout/src/components/cards/thirdParty/views/remove/confirm/confirm.tsx @@ -59,6 +59,7 @@ export const ConfirmRemove: React.FC = () => { removeMessage2={i18n.remove.confirm.dialog.message2} removeBtnTitle={i18n.remove.confirm.buttons.remove} cancelBtnTitle={i18n.remove.confirm.buttons.cancel} + iconFallbackText={i18n.remove.confirm.iconFallbackText} handleRemove={handleRemove} handleCancel={() => send('CANCEL')} loading={loading} diff --git a/packages/layout/src/components/cards/trustee/i18n.ts b/packages/layout/src/components/cards/trustee/i18n.ts index bc38e824b..f68d2e0d0 100644 --- a/packages/layout/src/components/cards/trustee/i18n.ts +++ b/packages/layout/src/components/cards/trustee/i18n.ts @@ -121,6 +121,7 @@ export const i18n: TrusteeI18nProps = { remove: 'Remove this trustee', cancel: 'Cancel', }, + iconFallbackText: 'Warning', }, reason: { title: 'Remove this trustee', diff --git a/packages/layout/src/components/cards/trustee/views/remove/confirm/index.tsx b/packages/layout/src/components/cards/trustee/views/remove/confirm/index.tsx index 0bc913b18..e009eb84f 100644 --- a/packages/layout/src/components/cards/trustee/views/remove/confirm/index.tsx +++ b/packages/layout/src/components/cards/trustee/views/remove/confirm/index.tsx @@ -55,6 +55,7 @@ export const ConfirmRemove: React.FC = () => { removeMessage1={i18n.remove.confirm.subtitle} removeBtnTitle={i18n.remove.confirm.buttons.remove} cancelBtnTitle={i18n.remove.confirm.buttons.cancel} + iconFallbackText={i18n.remove.confirm.iconFallbackText} handleRemove={handleRemove} handleCancel={() => send('CANCEL')} loading={loading} diff --git a/packages/layout/src/components/info/info.mdx b/packages/layout/src/components/info/info.mdx deleted file mode 100644 index 9f601ffa9..000000000 --- a/packages/layout/src/components/info/info.mdx +++ /dev/null @@ -1,47 +0,0 @@ ---- -name: Info -menu: Layout -route: /layout/info ---- - -import { Props } from 'docz'; -import { Playground } from '@playground'; -import { Info } from './info'; - -# Info - -Info components for tpr apps - -## Properties - - - -## Basic usage - -```js -import { Info } from '@tpr/layout'; -``` - - - - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias - voluptatibus quaerat consequatur deleniti nobis explicabo eius. Fugit - consequuntur, rerum optio architecto ab ad nam. Aperiam nostrum eveniet quam - quia porro animi illo quidem hic eius. Possimus facilis inventore saepe - dolor culpa nobis laborum a id voluptatum? Doloribus illo impedit - perferendis. - - - -## With props - - - - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias - voluptatibus quaerat consequatur deleniti nobis explicabo eius. Fugit - consequuntur, rerum optio architecto ab ad nam. Aperiam nostrum eveniet quam - quia porro animi illo quidem hic eius. Possimus facilis inventore saepe - dolor culpa nobis laborum a id voluptatum? Doloribus illo impedit - perferendis. - - diff --git a/packages/layout/src/components/info/info.module.scss b/packages/layout/src/components/info/info.module.scss deleted file mode 100644 index 6456de7be..000000000 --- a/packages/layout/src/components/info/info.module.scss +++ /dev/null @@ -1,30 +0,0 @@ -@import '@tpr/theming/lib/variables.scss'; - -.info { - position: relative; - display: flex; - flex-direction: column; - padding: $space-6; - background: $colors-neutral-3; - color: $colors-neutral-7; -} - -.important { - margin-top: $space-8; - border-top: 0.375rem solid $colors-neutral-8; -} - -.importantMessage { - display: flex; - align-items: center; - justify-content: center; - font-size: $font-size-3; - position: absolute; - left: 0; - height: 2.875rem; - top: -3rem; - padding: 0 $space-6; - background: $colors-neutral-8; - color: $white; - font-weight: normal; -} diff --git a/packages/layout/src/components/info/info.tsx b/packages/layout/src/components/info/info.tsx deleted file mode 100644 index 1aea82e47..000000000 --- a/packages/layout/src/components/info/info.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import { classNames, H2 } from '@tpr/core'; -import styles from './info.module.scss'; - -type InfoProps = { id: string; title?: string; importantMessage?: string }; -export const Info: React.FC = ({ - children, - id = 'info', - title, - importantMessage, -}) => { - return ( -
- {importantMessage && ( - - {importantMessage} - - )} - {title &&

{title}

} - {children} -
- ); -}; diff --git a/packages/layout/src/components/warning/warning.mdx b/packages/layout/src/components/warning/warning.mdx deleted file mode 100644 index 17cf34f6b..000000000 --- a/packages/layout/src/components/warning/warning.mdx +++ /dev/null @@ -1,67 +0,0 @@ ---- -name: Warning -menu: Layout -route: /layout/warning ---- - -import { Props } from 'docz'; -import { Playground } from '@playground'; -import { WarningBox } from './warning'; -import { useState } from 'react'; -import { Button } from '@tpr/core'; - -# Warning Box - -Warning box for tpr apps - -## Basic usage - -```js -import { WarningBox } from '@tpr/layout'; -``` - - - - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias - voluptatibus quaerat consequatur deleniti nobis explicabo eius. - - - -## Accessibility - -The warning box has the role type of 'alert' so if it is toggled into view then assistive technology will immediately alert the user of it's presence. - -```js -import { WarningBox } from '@tpr/layout'; -``` - - - {() => { - const [toggleWarning, setToggleWarning] = useState(false); - - return ( - <> - - {(toggleWarning && - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias - voluptatibus quaerat consequatur deleniti nobis explicabo eius. - )} - ) - }} - - - -## API - -``` -Accepted config props: SpaceProps, FlexProps -``` - -### Props - -| Property | Required | Type | Description | -| ---------------- | -------- | ----------------- | ---------------------------------------------------------------------------------------------------------- | -| warningLabel | false | boolean | Optionally overrides the default title text on the svg image (the exclamation mark) within the warning box | \ No newline at end of file diff --git a/packages/layout/src/components/warning/warning.module.scss b/packages/layout/src/components/warning/warning.module.scss deleted file mode 100644 index 8e8dd9160..000000000 --- a/packages/layout/src/components/warning/warning.module.scss +++ /dev/null @@ -1,20 +0,0 @@ -@import '@tpr/theming/lib/variables.scss'; - -.warning { - border: 0.25rem solid $colors-danger-2; - font-weight: $font-weight-3; - - svg { - min-width: 1.5625rem; - min-height: 1.5625rem; - margin-top: 0.125rem; - } -} - -@media (max-width: 25rem) { - .warning { - .innerWrapper { - flex-wrap: wrap; - } - } -} diff --git a/packages/layout/src/components/warning/warning.tsx b/packages/layout/src/components/warning/warning.tsx deleted file mode 100644 index 7e550972b..000000000 --- a/packages/layout/src/components/warning/warning.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import { Flex, SpaceProps, FlexProps } from '@tpr/core'; -import { WarningCircle } from '@tpr/icons'; -import styles from './warning.module.scss'; - -export type WarningBoxProps = { - cfg?: SpaceProps & FlexProps; - warningLabel?: string; - wrapInMobile?: boolean; -}; -export const WarningBox: React.FC = ({ - children, - cfg, - warningLabel = 'Warning', - wrapInMobile = false, -}) => { - return ( - - - - {children} - - - ); -}; diff --git a/packages/layout/src/components/warningText/IWarningTextProps.ts b/packages/layout/src/components/warningText/IWarningTextProps.ts new file mode 100644 index 000000000..4560842b5 --- /dev/null +++ b/packages/layout/src/components/warningText/IWarningTextProps.ts @@ -0,0 +1,5 @@ +export interface IWarningTextProps { + id?: string; + className?: string; + iconFallbackText: string; +} diff --git a/packages/layout/src/components/warningText/govuk-frontend.module.scss b/packages/layout/src/components/warningText/govuk-frontend.module.scss new file mode 100644 index 000000000..f4b7d31c1 --- /dev/null +++ b/packages/layout/src/components/warningText/govuk-frontend.module.scss @@ -0,0 +1,9 @@ +@import '@tpr/theming/lib/govuk-frontend.module.scss'; +@import '~govuk-frontend/govuk/objects/_all'; +@import '~govuk-frontend/govuk/components/warning-text/_index'; + +/* if EditorFonts is used as a child component it sets the font-weight on p elements, + so we need to override that with the original value from govuk-frontend to get the correct weight by default */ +.warningText p { + font-weight: $font-weight-4; +} diff --git a/packages/layout/src/components/warningText/warningText.mdx b/packages/layout/src/components/warningText/warningText.mdx new file mode 100644 index 000000000..6bea4ae5d --- /dev/null +++ b/packages/layout/src/components/warningText/warningText.mdx @@ -0,0 +1,63 @@ +--- +name: Warning text +menu: Layout +route: /layout/warningText +--- + +import { Props } from 'docz'; +import { Playground } from '@playground'; +import { WarningText } from './warningText'; +import { useState } from 'react'; +import { Button } from '@tpr/core'; + +# Warning text + +Warning text for TPR apps + +## Basic usage + +```js +import { WarningText } from '@tpr/layout'; +``` + + + + + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias + voluptatibus quaerat consequatur deleniti nobis explicabo eius. + + + +## Accessibility + +If you show or hide the warning text dynamically, surround it with a `
` that is never hidden. When the warning text is toggled into view then assistive technology will immediately alert the user of its presence. + +```js +import { WarningText } from '@tpr/layout'; +``` + + + {() => { + const [toggleWarning, setToggleWarning] = useState(false); + + return ( + <> + + {(toggleWarning && + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias + voluptatibus quaerat consequatur deleniti nobis explicabo eius. + )} + ) + }} + + + +## Props + +| Property | Required | Type | Description | +| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------ | +| className | false | string | Adds an additional CSS class to customise the component | +| iconFallbackText | true | boolean | Sets the alternative text for the exclamation mark image | diff --git a/packages/layout/src/components/warningText/warningText.tsx b/packages/layout/src/components/warningText/warningText.tsx new file mode 100644 index 000000000..03442a83a --- /dev/null +++ b/packages/layout/src/components/warningText/warningText.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import govuk from './govuk-frontend.module.scss'; +import { WarningText as GovUkWarningText } from '@tpr/govuk-react-jsx'; +import { IWarningTextProps } from './IWarningTextProps'; +import { classNames } from '@tpr/core'; + +export const WarningText: React.FC = ({ + children, + className, + ...rest +}) => { + return ( + + {children} + + ); +}; diff --git a/packages/layout/src/index.ts b/packages/layout/src/index.ts index fc606fccc..2cd21ec8b 100644 --- a/packages/layout/src/index.ts +++ b/packages/layout/src/index.ts @@ -12,7 +12,6 @@ export * from './components/phaseBanner/phaseBanner'; export * from './components/footer/footer'; export * from './components/header/header'; export * from './components/highlight/highlight'; -export * from './components/info/info'; export * from './components/navitem'; export * from './components/sidebar'; export * from './components/tasklist'; @@ -24,7 +23,7 @@ export { export * from './components/tasklist/components/types'; export * from './components/buttons/buttons'; export * from './components/buttons/links'; -export * from './components/warning/warning'; +export * from './components/warningText/warningText'; export * from './components/helplink/helplink'; export * from './components/hint/hint'; export * from './components/poscon/poscon'; diff --git a/packages/theming/package.json b/packages/theming/package.json index 0f036f3fe..1e4349432 100644 --- a/packages/theming/package.json +++ b/packages/theming/package.json @@ -34,7 +34,7 @@ "react-dom": "^16.14.0" }, "dependencies": { - "govuk-frontend": "^3.14.0", + "govuk-frontend": "^4.0.1", "normalize.css": "^8.0.1", "tslib": "^2.1.0" }, diff --git a/yarn.lock b/yarn.lock index 64c94662f..c92b609ac 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3674,7 +3674,7 @@ integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw== "@tpr/core@file:./packages/core": - version "3.0.5" + version "4.0.0" dependencies: "@xstate/react" "^1.2.2" final-form "^4.20.1" @@ -3684,36 +3684,37 @@ xstate "^4.16.2" "@tpr/forms@file:./packages/forms": - version "4.1.14" + version "5.0.0" dependencies: "@financial-times/accessible-autocomplete" "^2.2.1" - "@tpr/govuk-react-jsx" "^6.2.1" + "@tpr/govuk-react-jsx" "^7.0.1" "@types/lodash.isequal" "^4.5.5" "@types/lodash.merge" "^4.6.6" "@types/qs" "^6.9.5" date-fns "^2.17.0" final-form "^4.20.1" - govuk-frontend "^3.14.0" + govuk-frontend "^4.0.1" lodash.isequal "^4.5.0" lodash.merge "^4.6.2" qs "^6.9.6" react-final-form "^6.5.2" tslib "^2.1.0" -"@tpr/govuk-react-jsx@^6.2.1": - version "6.2.1" - resolved "https://registry.yarnpkg.com/@tpr/govuk-react-jsx/-/govuk-react-jsx-6.2.1.tgz#dedd8addf1e9124cf14ec2203ee1dd0bd67a92ab" - integrity sha512-98NpAQtjvu48xUeOEZHWBvogmj0c7f0k0hNHENKLgnC5kNlFguOrbMyfqi+bt/UNTyRw+fB/wpporQqWPVhP5g== +"@tpr/govuk-react-jsx@^7.0.1": + version "7.0.1" + resolved "https://registry.yarnpkg.com/@tpr/govuk-react-jsx/-/govuk-react-jsx-7.0.1.tgz#a9cb3689e8222ed676fd67411a08060004d2b896" + integrity sha512-9jyqPTN9fm02NDjOK+OJGczD46DkBXT5iJz6xsYXN+Nz7i7oz14GU9lXddUk8jG00hlFE7blspSPAPC2/ThV3A== "@tpr/icons@file:./packages/icons": - version "3.1.15" + version "4.0.0" dependencies: normalize.css "^8.0.1" tslib "^2.1.0" "@tpr/layout@file:./packages/layout": - version "4.0.3" + version "5.0.0" dependencies: + "@tpr/govuk-react-jsx" "^7.0.1" "@types/lodash.merge" "^4.6.6" "@xstate/react" "^1.2.2" date-fns "^2.17.0" @@ -3726,9 +3727,9 @@ xstate "^4.16.2" "@tpr/theming@file:./packages/theming": - version "2.4.3" + version "3.0.0" dependencies: - govuk-frontend "^3.14.0" + govuk-frontend "^4.0.1" normalize.css "^8.0.1" tslib "^2.1.0" @@ -10113,10 +10114,10 @@ got@9.6.0, got@^9.6.0: to-readable-stream "^1.0.0" url-parse-lax "^3.0.0" -govuk-frontend@^3.14.0: - version "3.14.0" - resolved "https://registry.yarnpkg.com/govuk-frontend/-/govuk-frontend-3.14.0.tgz#d3a9c54437c08f5188f87b1f4480ba60e95c8eb6" - integrity sha512-y7FTuihCSA8Hty+e9h0uPhCoNanCAN+CLioNFlPmlbeHXpbi09VMyxTcH+XfnMPY4Cp++7096v0rLwwdapTXnA== +govuk-frontend@4.0.1, govuk-frontend@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/govuk-frontend/-/govuk-frontend-4.0.1.tgz#bceff58ecb399272cba32bd2b357fe16198e3249" + integrity sha512-X+B88mqYHoxAz0ID87Uxo3oHqdKBRnNHd3Cz8+u8nvQUAsrEzROFLK+t7sAu7e+fKqCCrJyIgx6Cmr6dIGnohQ== graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.3, graceful-fs@^4.2.4: version "4.2.4"