Merge pull request #15030 from UsainBloot/fix-info-card-empty-subheader-container

InfoCard - Remove subheader container when there is not a subheader or icon

.changeset/sweet-pandas-relax.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+InfoCard - Remove subheader container when there is not a subheader or icon

packages/core-components/src/layout/InfoCard/InfoCard.test.tsx

@@ -16,6 +16,7 @@
 
 import React from 'react';
 import { renderInTestApp } from '@backstage/test-utils';
+import { within } from '@testing-library/react';
 import { InfoCard } from './InfoCard';
 
 const minProps = {
@@ -36,4 +37,38 @@ describe('<InfoCard />', () => {
     const rendered = await renderInTestApp(<InfoCard {...minProps} />);
     expect(rendered.getByText('A deepLink title')).toBeInTheDocument();
   });
+
+  describe('Subheader', () => {
+    it('shows the subheader passed in via the subheader prop', async () => {
+      const { getByTestId } = await renderInTestApp(
+        <InfoCard {...minProps} subheader="example subheader" />,
+      );
+
+      const subheaderContainer = getByTestId('info-card-subheader');
+
+      expect(
+        within(subheaderContainer).getByText('example subheader'),
+      ).toBeInTheDocument();
+    });
+
+    it('shows the icon passed in via the icon prop', async () => {
+      const { getByTestId } = await renderInTestApp(
+        <InfoCard {...minProps} icon={<span data-testid="mock-icon" />} />,
+      );
+
+      const subheaderContainer = getByTestId('info-card-subheader');
+
+      expect(
+        within(subheaderContainer).getByTestId('mock-icon'),
+      ).toBeInTheDocument();
+    });
+
+    it('is not rendered where there is not an icon or subheading', async () => {
+      const { queryByTestId } = await renderInTestApp(
+        <InfoCard {...minProps} />,
+      );
+
+      expect(queryByTestId('info-card-subheader')).not.toBeInTheDocument();
+    });
+  });
 });

packages/core-components/src/layout/InfoCard/InfoCard.tsx

@@ -200,8 +200,15 @@ export function InfoCard(props: Props): JSX.Element {
   }
 
   const cardSubTitle = () => {
+    if (!subheader && !icon) {
+      return null;
+    }
+
     return (
-      <div className={classes.headerSubheader}>
+      <div
+        className={classes.headerSubheader}
+        data-testid="info-card-subheader"
+      >
         {subheader && <div className={classes.subheader}>{subheader}</div>}
         {icon}
       </div>