Migrate components to patterns, rework components removed from NHSUK …

…frontend
NHSDigital · Mar 26, 2024 · edd1d4f · edd1d4f
1 parent d2b7f4b
commit edd1d4f
Show file tree

Hide file tree

Showing 30 changed files with 763 additions and 677 deletions.
diff --git a/docs/upgrade-to-4.0.md b/docs/upgrade-to-4.0.md
@@ -81,6 +81,42 @@ Should become this:
 It is now required that a `js-enabled` class is added to a parent element if JavaScript is enabled (we suggest using `body`). E.g. `<body class="js-enabled">`.
 This is to facilitate a differentiation in styling to the header depending on whether JavaScript is enabled or disabled.
 
+### CareCard is now a variant of Card
+
+`CareCard` has been removed as a standalone component and the `Card` component has been refactored to provide this functionality. This is achieved via the `cardType` prop.
+
+Notice also that the `immediate` type of card is unsupported - this has been replaced with `emergency`.
+
+Before, using the `CareCard`, you may have markup that looks like this:
+
+```
+<CareCard type='immediate'>
+    <CareCard.Heading>Call 999 if:</CareCard.Heading>
+    <CareCard.Content>
+        <div>Your care card contents</div>
+    </CareCard.Content>
+</CareCard>
+```
+
+Now, it should look like this:
+
+```
+<Card cardType='emergency'>
+    <Card.Heading>Call 999 if:</CareCard.Heading>
+    <Card.Content>
+        <div>Your care card contents</div>
+    </Card.Content>
+</Card>
+```
+
+### NavAZ and ListPanel
+
+Due to these components being [removed from the nhsuk-frontend library](https://github.com/nhsuk/nhsuk-frontend/blob/main/CHANGELOG.md#600---29-november-2021), refactoring has taken place to ensure they still adhere to the NHS digital service manual.
+
+The `NavAZ` component is still available, however the `ListPanel` component has now been renamed to `Panel`. To combine multiple panels you would simply render them as siblings - there is no need to wrap them in a list.
+
+An additional storybook story has been added to give a full example of an A-Z page, combining both of these components. This helps to bring this library into alignment with the [NHS digital service manual listing](https://service-manual.nhs.uk/design-system/patterns/a-to-z-page) for this pattern.
+
 ## New features
 
 ### Text input prefixes + suffixes
@@ -162,7 +198,7 @@ More information can be found in the [NHS digital service manual](https://servic
 Usage:
 
 ```
-<Card clickable primary>
+<Card clickable cardType='primary'>
     <Card.Content>
         <Card.Heading>
             <Card.Link href="#">Primary card heading</Card.Link>
@@ -180,7 +216,7 @@ More information can be found in the [NHS digital service manual](https://servic
 Usage:
 
 ```
-<Card clickable secondary>
+<Card clickable cardType='secondary'>
     <Card.Content>
         <Card.Heading>
             <Card.Link href="#">Secondary card heading</Card.Link>

diff --git a/src/__tests__/index.test.ts b/src/__tests__/index.test.ts
@@ -43,10 +43,10 @@ describe('Index', () => {
       'InsetText',
       'Label',
       'LedeText',
-      'ListPanel',
       'MinusIcon',
       'NavAZ',
       'Pagination',
+      'Panel',
       'PlusIcon',
       'Radios',
       'ReadingWidth',

diff --git a/src/components/form-elements/character-count/__tests__/CharacterCount.test.tsx b/src/components/form-elements/character-count/__tests__/CharacterCount.test.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import CharacterCount, { CharacterCountType } from '../CharacterCount';
-import { Label, HintText, Textarea } from '../../../..';
+import Label from '@components/form-elements/label/Label';
+import HintText from '@components/form-elements/hint-text/HintText';
+import Textarea from '@components/form-elements/textarea/Textarea';
 
 describe('Character Count', () => {
   it('Matches snapshot', () => {

diff --git a/src/components/list-panel/ListPanel.tsx b/src/components/list-panel/ListPanel.tsx
diff --git a/src/components/list-panel/__tests__/ListPanel.test.tsx b/src/components/list-panel/__tests__/ListPanel.test.tsx
diff --git a/src/components/list-panel/__tests__/__snapshots__/ListPanel.test.tsx.snap b/src/components/list-panel/__tests__/__snapshots__/ListPanel.test.tsx.snap
diff --git a/src/components/list-panel/index.ts b/src/components/list-panel/index.ts
diff --git a/src/components/navigation/card/Card.tsx b/src/components/navigation/card/Card.tsx
@@ -9,6 +9,7 @@ import CardHeading from './components/CardHeading';
 import CardGroup from './components/CardGroup';
 import CardGroupItem from './components/CardGroupItem';
 import { CardType } from '@util/types/NHSUKTypes';
+import { cardTypeIsCareCard } from '@util/types/TypeGuards';
 
 interface CardProps extends HTMLProps<HTMLDivElement> {
   clickable?: boolean;
@@ -25,26 +26,35 @@ interface ICard extends React.FC<CardProps> {
   GroupItem: typeof CardGroupItem;
 }
 
-const Card: ICard = ({ className, clickable, children, cardType, ...rest }) => (
-  <div
-    className={classNames(
-      'nhsuk-card',
-      { 'nhsuk-card--clickable': clickable },
-      { 'nhsuk-card--feature': cardType === 'feature' },
-      { 'nhsuk-card--secondary': cardType === 'secondary' },
-      className,
-    )}
-    {...rest}
-  >
-    <CardContext.Provider
-      value={{
-        cardType,
-      }}
-    >
-      {children}
-    </CardContext.Provider>
-  </div>
-);
+const Card: ICard = ({ className, clickable, children, cardType, ...rest }) => {
+  let cardClassNames = classNames(
+    'nhsuk-card',
+    { 'nhsuk-card--clickable': clickable },
+    { 'nhsuk-card--feature': cardType === 'feature' },
+    { 'nhsuk-card--secondary': cardType === 'secondary' },
+    className,
+  );
+
+  if (cardTypeIsCareCard(cardType)) {
+    cardClassNames = classNames(
+      cardClassNames,
+      'nhsuk-card--care',
+      `nhsuk-card--care--${cardType}`,
+    );
+  }
+
+  return (
+    <div className={cardClassNames} {...rest}>
+      <CardContext.Provider
+        value={{
+          cardType,
+        }}
+      >
+        {children}
+      </CardContext.Provider>
+    </div>
+  );
+};
 
 Card.Heading = CardHeading;
 Card.Description = CardDescription;