feat: change heading and subheading to accept ReactNode

Author: ganiirsyadi

src/@next/Card/Card.stories.tsx

@@ -3,6 +3,8 @@ import { Story, Meta } from '@storybook/react';
 
 import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
 import { Card, CardProps } from './Card';
+import { Typography } from '../Typography';
+import { Red } from '../utilities/colors';
 
 (Card as React.FunctionComponent<CardProps>).displayName = 'Card';
 
@@ -140,3 +142,25 @@ export const SecondaryActionOnly = SecondaryActionOnlyTemplate.bind({});
 SecondaryActionOnly.args = {
   heading: 'Heading',
 };
+
+const CustomHeadingSubHeadingTemplate: Story<CardProps> = args => {
+  const heading = (
+    <Typography variant="subtitle1" color={Red.B74}>
+      Custom Heading
+    </Typography>
+  );
+
+  const subheading = (
+    <Typography variant="subtitle2" color={Red.B65}>
+      Custom Sub Heading
+    </Typography>
+  );
+
+  return (
+    <Card {...args} heading={heading} subheading={subheading}>
+      <Card.Section>This is a section</Card.Section>
+    </Card>
+  );
+};
+
+export const CustomHeadingSubHeading = CustomHeadingSubHeadingTemplate.bind({});

src/@next/Card/Card.tsx

@@ -10,12 +10,15 @@ import {
   StyledCardHeaderSection,
   StyledCardHeaderSectionHalf,
   StyledCardHeaderWrapper,
+  StyledCustomHeader,
 } from './CardStyle';
 import { Section } from './Section';
 
+const PRIMITIVE_TYPES = ['string', 'number'];
+
 export type CardProps = {
-  heading?: string;
-  subheading?: string;
+  heading?: React.ReactNode;
+  subheading?: React.ReactNode;
   children?: React.ReactNode;
   primaryAction?: ComponentAction;
   secondaryAction?: ComponentAction;
@@ -33,16 +36,20 @@ const CardComponent = React.forwardRef<HTMLDivElement, CardProps>(function Card(
   }: CardProps,
   ref
 ) {
-  const headingMarkup = (
+  const headingMarkup = PRIMITIVE_TYPES.includes(typeof heading) ? (
     <Typography as="div" variant="body2">
       {heading}
     </Typography>
+  ) : (
+    <StyledCustomHeader>{heading}</StyledCustomHeader>
   );
 
-  const subHeadingMarkup = (
+  const subHeadingMarkup = PRIMITIVE_TYPES.includes(typeof subheading) ? (
     <Typography as="div" variant="subtitle2">
       {subheading}
     </Typography>
+  ) : (
+    <StyledCustomHeader>{subheading}</StyledCustomHeader>
   );
 
   const headerMarkup = () => {

src/@next/Card/CardStyle.ts

@@ -63,3 +63,9 @@ export const StyledCardActionWrapper = styled.div`
     padding: 10px ${space16} ${space12};
   }
 `;
+
+export const StyledCustomHeader = styled.div`
+  & > * {
+    margin: 0;
+  }
+`;

test/e2e/card/card.spec.ts

@@ -12,19 +12,19 @@ test('Card', async ({ page }) => {
 
 test('Card - without subheading', async ({ page }) => {
   const cardPage = getPage(page);
-  await cardPage.goto('args=subheading:');
+  await cardPage.goto('args=subheading:!null');
   await expect(cardPage.container).toHaveScreenshot('card-no-subheading.png');
 });
 
 test('Card - without heading', async ({ page }) => {
   const cardPage = getPage(page);
-  await cardPage.goto('args=heading:');
+  await cardPage.goto('args=heading:!null');
   await expect(cardPage.container).toHaveScreenshot('card-no-heading.png');
 });
 
 test('Card - without header', async ({ page }) => {
   const cardPage = getPage(page);
-  await cardPage.goto('args=heading:;subheading:');
+  await cardPage.goto('args=heading:!null;subheading:!null');
   await expect(cardPage.container).toHaveScreenshot('card-no-header.png');
 });
 
@@ -63,3 +63,14 @@ test('Card - secondary action only', async ({ page }) => {
     'card-secondary-action-only.png'
   );
 });
+
+test('Card - Custom Heading and Sub Heading', async ({ page }) => {
+  const cardPage = new StoryBookPage(
+    page,
+    '?path=/story/next-card--custom-heading-sub-heading'
+  );
+  await cardPage.goto();
+  await expect(cardPage.container).toHaveScreenshot(
+    'card-custom-heading-sub-heading.png'
+  );
+});