Skip to content

Commit 4dacd51

Browse files
colinrotherhamcolinrotherham
committed
Remove unnecessary card classes
1 parent 869b75b commit 4dacd51

File tree

6 files changed

+27
-74
lines changed

6 files changed

+27
-74
lines changed

‎src/components/navigation/card/Card.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,9 @@ const CardComponent = forwardRef<HTMLDivElement, CardProps>((props, forwardedRef
2626

2727
let cardClassNames = classNames(
2828
'nhsuk-card',
29-
{ 'nhsuk-card--clickable': clickable },
29+
{ 'nhsuk-card--clickable': cardType === 'clickable' || clickable },
3030
{ 'nhsuk-card--feature': cardType === 'feature' },
31+
{ 'nhsuk-card--primary': cardType === 'primary' },
3132
{ 'nhsuk-card--secondary': cardType === 'secondary' },
3233
className,
3334
);

‎src/components/navigation/card/__tests__/Card.test.tsx‎

Lines changed: 9 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ describe('Card', () => {
6565
expect(container.querySelector('button.nhsuk-card__link')?.textContent).toBe('Click me!');
6666
});
6767

68-
it('adds clickable classes', () => {
68+
it('adds clickable modifier', () => {
6969
const { container } = render(
7070
<Card clickable>
7171
<Card.Content>
@@ -84,9 +84,14 @@ describe('Card', () => {
8484
expect(cardEl).toHaveClass('nhsuk-card--clickable');
8585
});
8686

87-
it('adds feature classes to all elements', () => {
87+
it.each<{ cardType: CardType }>([
88+
{ cardType: 'clickable' },
89+
{ cardType: 'feature' },
90+
{ cardType: 'primary' },
91+
{ cardType: 'secondary' },
92+
])('adds $cardType card type modifier', ({ cardType }) => {
8893
const { container } = render(
89-
<Card cardType="feature">
94+
<Card cardType={cardType}>
9095
<Card.Content>
9196
<Card.Heading>Feature card heading</Card.Heading>
9297
<Card.Description>Feature card description</Card.Description>
@@ -97,45 +102,11 @@ describe('Card', () => {
97102
const cardEl = container.querySelector('.nhsuk-card');
98103
const cardHeadingEl = cardEl?.querySelector('.nhsuk-card__heading');
99104

105+
expect(cardEl).toHaveClass(`nhsuk-card--${cardType}`);
100106
expect(cardHeadingEl).toHaveClass('nhsuk-card__heading');
101-
expect(cardHeadingEl).toHaveClass('nhsuk-card__heading--feature');
102107
expect(cardHeadingEl?.tagName).toBe('H2');
103108
});
104109

105-
it('adds primary class to card contents', () => {
106-
const { container } = render(
107-
<Card cardType="primary">
108-
<Card.Content>
109-
<Card.Heading>Feature card heading</Card.Heading>
110-
<Card.Description>Feature card description</Card.Description>
111-
</Card.Content>
112-
</Card>,
113-
);
114-
115-
const cardEl = container.querySelector('.nhsuk-card');
116-
const cardContentsEl = cardEl?.querySelector('.nhsuk-card__content');
117-
118-
expect(cardContentsEl).toHaveClass('nhsuk-card__content--primary');
119-
});
120-
121-
it('adds secondary classes to card and contents', () => {
122-
const { container } = render(
123-
<Card cardType="secondary">
124-
<Card.Content>
125-
<Card.Heading>Feature card heading</Card.Heading>
126-
<Card.Description>Feature card description</Card.Description>
127-
</Card.Content>
128-
</Card>,
129-
);
130-
131-
const cardEl = container.querySelector('.nhsuk-card');
132-
const cardContentsEl = cardEl?.querySelector('.nhsuk-card__content');
133-
134-
expect(cardEl).toHaveClass('nhsuk-card');
135-
expect(cardEl).toHaveClass('nhsuk-card--secondary');
136-
expect(cardContentsEl).toHaveClass('nhsuk-card__content--secondary');
137-
});
138-
139110
describe('Care card variant', () => {
140111
describe.each<{
141112
heading: string;

‎src/components/navigation/card/__tests__/__snapshots__/Card.test.tsx.snap‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,10 @@ exports[`Card Care card variant emergency matches the snapshot 1`] = `
5959
class="nhsuk-card nhsuk-card--care nhsuk-card--care--emergency"
6060
>
6161
<div
62-
class="nhsuk-card--care__heading-container"
62+
class="nhsuk-card__heading-container"
6363
>
6464
<h2
65-
class="nhsuk-card--care__heading"
65+
class="nhsuk-card__heading"
6666
>
6767
<span
6868
role="text"
@@ -90,10 +90,10 @@ exports[`Card Care card variant non-urgent matches the snapshot 1`] = `
9090
class="nhsuk-card nhsuk-card--care nhsuk-card--care--non-urgent"
9191
>
9292
<div
93-
class="nhsuk-card--care__heading-container"
93+
class="nhsuk-card__heading-container"
9494
>
9595
<h2
96-
class="nhsuk-card--care__heading"
96+
class="nhsuk-card__heading"
9797
>
9898
<span
9999
role="text"
@@ -121,10 +121,10 @@ exports[`Card Care card variant urgent matches the snapshot 1`] = `
121121
class="nhsuk-card nhsuk-card--care nhsuk-card--care--urgent"
122122
>
123123
<div
124-
class="nhsuk-card--care__heading-container"
124+
class="nhsuk-card__heading-container"
125125
>
126126
<h2
127-
class="nhsuk-card--care__heading"
127+
class="nhsuk-card__heading"
128128
>
129129
<span
130130
role="text"

‎src/components/navigation/card/components/CardContent.tsx‎

Lines changed: 6 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,14 @@
11
'use client';
22

33
import classNames from 'classnames';
4-
import { forwardRef, useContext, type ComponentPropsWithoutRef } from 'react';
5-
6-
import { CardContext } from '../CardContext.js';
4+
import { forwardRef, type ComponentPropsWithoutRef } from 'react';
75

86
export type CardContentProps = ComponentPropsWithoutRef<'div'>;
97

10-
export const CardContent = forwardRef<HTMLDivElement, CardContentProps>((props, forwardedRef) => {
11-
const { cardType } = useContext(CardContext);
12-
const { className, ...rest } = props;
13-
14-
return (
15-
<div
16-
className={classNames(
17-
'nhsuk-card__content',
18-
{ 'nhsuk-card__content--feature': cardType === 'feature' },
19-
{ 'nhsuk-card__content--primary': cardType === 'primary' },
20-
{ 'nhsuk-card__content--secondary': cardType === 'secondary' },
21-
className,
22-
)}
23-
ref={forwardedRef}
24-
{...rest}
25-
/>
26-
);
27-
});
8+
export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(
9+
({ className, ...rest }, forwardedRef) => (
10+
<div className={classNames('nhsuk-card__content', className)} ref={forwardedRef} {...rest} />
11+
),
12+
);
2813

2914
CardContent.displayName = 'Card.Content';

‎src/components/navigation/card/components/CardHeading.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@ const genHiddenText = (cardType: CareCardType): string => {
2121

2222
const CareHeading = forwardRef<HTMLHeadingElement, HeadingLevelProps & { careType: CareCardType }>(
2323
({ children, className, careType, headingLevel = 'h2', ...rest }, forwardedRef) => (
24-
<div className="nhsuk-card--care__heading-container">
24+
<div className="nhsuk-card__heading-container">
2525
<HeadingLevel
26-
className={classNames('nhsuk-card--care__heading', className)}
26+
className={classNames('nhsuk-card__heading', className)}
2727
headingLevel={headingLevel}
2828
ref={forwardedRef}
2929
{...rest}
@@ -51,11 +51,7 @@ export const CardHeading = forwardRef<HTMLHeadingElement, HeadingLevelProps>(
5151

5252
return (
5353
<HeadingLevel
54-
className={classNames(
55-
'nhsuk-card__heading',
56-
{ 'nhsuk-card__heading--feature': cardType === 'feature' },
57-
className,
58-
)}
54+
className={classNames('nhsuk-card__heading', className)}
5955
headingLevel={headingLevel}
6056
ref={forwardedRef}
6157
{...rest}

‎src/util/types/NHSUKTypes.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export type InputWidth = '2' | '3' | '4' | '5' | '10' | '20' | '30' | 2 | 3 | 4
66

77
export type CareCardType = 'non-urgent' | 'urgent' | 'emergency';
88

9-
export type CardType = 'feature' | 'primary' | 'secondary' | CareCardType;
9+
export type CardType = 'clickable' | 'feature' | 'primary' | 'secondary' | CareCardType;
1010

1111
export type ColWidth =
1212
| 'full'

0 commit comments

Comments
 (0)