Merge pull request #74 from NHSDigital/feature/deprecatePanelAndPromo

NHS.UK 4 - Deprecate Panel and Promo components

Author: Tomdango

.storybook/storybook.scss

@@ -1,4 +1,10 @@
-@import '../node_modules/nhsuk-frontend/dist/nhsuk.css';
+// Also import styles for deprecated Panel and Promo
+@import '../node_modules/nhsuk-frontend-legacy/packages/core/all.scss';
+@import '../node_modules/nhsuk-frontend-legacy/packages/components/panel/panel';
+@import '../node_modules/nhsuk-frontend-legacy/packages/components/promo/promo';
+
+// Allow current nhsuk styles to override legacy
+@import '../node_modules/nhsuk-frontend/packages/nhsuk.scss';
 
 .tag-wrapper {
   display: flex;

CHANGELOG.md

@@ -49,3 +49,18 @@ The `WarningCallout.Label` now has the hidden text `Important: ` before the labe
 ## Hint component renders as div
 
 The `Hint` component now renders as a `div` element rather than a `span`.
+
+## Deprecation of Panel & Promo Components
+
+The `Panel` and `Promo` components have been removed from `nhsuk-frontend` since version 4.0.0. As a result, we have deprecated these components. These components work exactly as they did before, with the only difference being a slightly different import.
+
+```jsx
+// Old Imports
+import { Button, Panel, Promo } from "nhsuk-react-components";
+
+// New Imports
+import { Button } from "nhsuk-react-components";
+import { Panel, Promo } from "nhsuk-react-components/deprecated";
+```
+
+A warning is printed to the console in dev environments when using these components, as they are set to be removed in the next major release.

package.json

@@ -47,6 +47,7 @@
     "jest": "^26.6.1",
     "jest-axe": "^3.4.0",
     "nhsuk-frontend": "^4.1.0",
+    "nhsuk-frontend-legacy": "npm:[email protected]",
     "node-sass": "^4.14.1",
     "prettier": "^1.18.2",
     "react": "^16.9.3",

rollup.config.js

@@ -1,17 +1,33 @@
 import typescript from 'rollup-plugin-typescript2';
 import pkg from './package.json';
 
-export default {
-  input: 'src/index.ts',
-  output: [
-    { file: pkg.main, format: 'cjs' },
-    { file: pkg.module, format: 'es' },
-  ],
-  external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})],
-  plugins: [
-    typescript({
-      typescript: require('typescript'),
-      exclude: ['**/*.test.d.ts'],
-    }),
-  ],
-};
+export default [
+  {
+    input: 'src/index.ts',
+    output: [
+      { file: pkg.main, format: 'cjs' },
+      { file: pkg.module, format: 'es' },
+    ],
+    external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})],
+    plugins: [
+      typescript({
+        typescript: require('typescript'),
+        exclude: ['**/*.test.d.ts'],
+      }),
+    ],
+  },
+  {
+    input: 'src/deprecated/index.ts',
+    output: [
+      { file: 'dist/deprecated.js', format: 'cjs' },
+      { file: 'dist/deprecated.es.js', format: 'es' },
+    ],
+    external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})],
+    plugins: [
+      typescript({
+        typescript: require('typescript'),
+        exclude: ['**/*.test.d.ts'],
+      }),
+    ],
+  },
+];

src/__tests__/index.test.ts

@@ -49,8 +49,6 @@ describe('Index', () => {
       'ListPanel',
       'NavAZ',
       'Pagination',
-      'Panel',
-      'Promo',
       'Radios',
       'ReviewDate',
       'Select',

src/components/checkboxes/Checkboxes.tsx

@@ -21,7 +21,7 @@ class Checkboxes extends PureComponent<CheckboxesProps, CheckboxesState> {
 
   private boxIds: Record<string, string> = {};
 
-  constructor(props: {}) {
+  constructor(props: CheckboxesProps) {
     super(props);
     this.state = {
       conditionalBoxes: [],

src/components/date-input/DateInput.tsx

@@ -17,7 +17,7 @@ type DateInputChangeEvent = ChangeEvent<HTMLInputElement> & {
 
 interface DateInputProps
   extends Omit<HTMLProps<HTMLDivElement>, 'value' | 'defaultValue'>,
-  FormElementProps {
+    FormElementProps {
   autoSelectNext?: boolean;
   value?: Partial<DateInputValue>;
   defaultValue?: Partial<DateInputValue>;

src/deprecated/__tests__/index.test.ts

@@ -0,0 +1,7 @@
+import * as deprecatedIndex from '../index';
+
+describe('DeprecatedIndex', () => {
+  it('contains all expected elements', () => {
+    expect(Object.keys(deprecatedIndex)).toEqual(['Panel', 'Promo']);
+  });
+});

src/components/panel/Panel.tsx src/deprecated/components/panel/Panel.tsxsrc/components/panel/Panel.tsx renamed to src/deprecated/components/panel/Panel.tsx

@@ -1,7 +1,9 @@
 import React, { HTMLProps, isValidElement } from 'react';
 import classNames from 'classnames';
-import { Row, Col } from '../layout';
+import { Row, Col } from '../../../components/layout';
 import PanelContext, { PanelContextType } from './PanelContext';
+import useDevWarning from '../../../util/hooks/UseDevWarning';
+import { PanelDeprecationWarning } from '../../warnings';
 
 interface PanelProps extends HTMLProps<HTMLDivElement> {
   grey?: boolean;
@@ -20,24 +22,28 @@ const BasePanel: React.FC<PanelProps> = ({
   labelProps,
   children,
   ...rest
-}) => (
-  <div
-    className={classNames(
-      { 'nhsuk-panel': !label },
-      { 'nhsuk-panel--grey': grey },
-      { 'nhsuk-panel-with-label': label },
-      className,
-    )}
-    {...rest}
-  >
-    {label ? (
-      <h3 className="nhsuk-panel-with-label__label" {...labelProps}>
-        {label}
-      </h3>
-    ) : null}
-    {children}
-  </div>
-);
+}) => {
+  useDevWarning(PanelDeprecationWarning);
+
+  return (
+    <div
+      className={classNames(
+        { 'nhsuk-panel': !label },
+        { 'nhsuk-panel--grey': grey },
+        { 'nhsuk-panel-with-label': label },
+        className,
+      )}
+      {...rest}
+    >
+      {label ? (
+        <h3 className="nhsuk-panel-with-label__label" {...labelProps}>
+          {label}
+        </h3>
+      ) : null}
+      {children}
+    </div>
+  );
+};
 
 const Panel: Panel = props => {
   const PanelGroupContext = React.useContext<PanelContextType | null>(PanelContext);