Fix care card css classes

NHSDigital · Jan 23, 2024 · 9d278f5 · 9d278f5
1 parent 72d109f
commit 9d278f5
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/src/components/care-card/CareCard.tsx b/src/components/care-card/CareCard.tsx
@@ -23,7 +23,7 @@ const genHiddenText = (cardType: CareCardType): string => {
 };
 
 const CareCardContent: React.FC<HTMLProps<HTMLDivElement>> = ({ className, ...rest }) => (
-  <div className={classNames('nhsuk-care-card__content', className)} {...rest} />
+  <div className={classNames('nhsuk-card__content', className)} {...rest} />
 );
 
 interface CareCardHeadingProps extends HTMLProps<HTMLHeadingElement> {
@@ -41,9 +41,9 @@ const CareCardHeading: React.FC<CareCardHeadingProps> = ({
 }) => {
   const cardType = useContext(CareCardContext);
   return (
-    <div className="nhsuk-care-card__heading-container">
+    <div className="nhsuk-card--care__heading-container">
       <HeadingLevel
-        className={classNames('nhsuk-care-card__heading', className)}
+        className={classNames('nhsuk-card--care__heading', className)}
         headingLevel={headingLevel}
         {...rest}
       >
@@ -56,7 +56,7 @@ const CareCardHeading: React.FC<CareCardHeadingProps> = ({
           {children}
         </span>
       </HeadingLevel>
-      <span className="nhsuk-care-card__arrow" aria-hidden="true" />
+      <span className="nhsuk-card--care__arrow" aria-hidden="true" />
     </div>
   );
 };
@@ -73,7 +73,7 @@ interface CareCard extends React.FC<CareCardProps> {
 const CareCard: CareCard = ({
   className, type, children, ...rest
 }) => (
-  <div className={classNames('nhsuk-care-card', `nhsuk-care-card--${type}`, className)} {...rest}>
+  <div className={classNames('nhsuk-card', 'nhsuk-card--care', `nhsuk-card--care--${type}`, className)} {...rest}>
     <CareCardContext.Provider value={type}>{children}</CareCardContext.Provider>
   </div>
 );

diff --git a/src/components/care-card/__tests__/CareCard.tests.tsx b/src/components/care-card/__tests__/CareCard.tests.tsx
@@ -58,9 +58,9 @@ describe('CareCard', () => {
     const urgentCard = shallow(<CareCard type="urgent" />);
     const immediateCard = shallow(<CareCard type="immediate" />);
 
-    expect(nonUrgentCard.hasClass('nhsuk-care-card--non-urgent')).toBeTruthy();
-    expect(urgentCard.hasClass('nhsuk-care-card--urgent')).toBeTruthy();
-    expect(immediateCard.hasClass('nhsuk-care-card--immediate')).toBeTruthy();
+    expect(nonUrgentCard.hasClass('nhsuk-card--care--non-urgent')).toBeTruthy();
+    expect(urgentCard.hasClass('nhsuk-card--care--urgent')).toBeTruthy();
+    expect(immediateCard.hasClass('nhsuk-card--care--immediate')).toBeTruthy();
 
     nonUrgentCard.unmount();
     urgentCard.unmount();
@@ -73,7 +73,7 @@ describe('CareCard', () => {
         <CareCard.Content>Test Content</CareCard.Content>
       </CareCard>,
     );
-    expect(component.find('.nhsuk-care-card__content').text()).toEqual('Test Content');
+    expect(component.find('.nhsuk-card__content').text()).toEqual('Test Content');
     component.unmount();
   });
 });
diff --git a/src/components/care-card/__tests__/__snapshots__/CareCard.tests.tsx.snap b/src/components/care-card/__tests__/__snapshots__/CareCard.tests.tsx.snap
@@ -5,7 +5,7 @@ exports[`CareCard matches snapshot: BaseCareCard 1`] = `
   type="urgent"
 >
   <div
-    className="nhsuk-care-card nhsuk-care-card--urgent"
+    className="nhsuk-card nhsuk-card--care nhsuk-card--care--urgent"
   />
 </CareCard>
 `;