Rename type of ItemCard to subtitle and allow to pass react nodes

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>

.changeset/popular-nails-agree.md

@@ -0,0 +1,6 @@
+---
+'@backstage/core': patch
+---
+
+Deprecate `type` of `ItemCard` and introduce new `subtitle` which allows passing
+react nodes.

packages/core/src/layout/ItemCard/ItemCard.stories.tsx

@@ -30,7 +30,7 @@ export const Default = () => (
         title="Item Card"
         description="This is the description of an Item Card"
         label="Button"
-        type="Pretitle"
+        subtitle="Pretitle"
         onClick={() => {}}
       />
     </Grid>
@@ -39,7 +39,7 @@ export const Default = () => (
         title="Item Card"
         description="This is the description of an Item Card"
         label="Button"
-        type="Pretitle"
+        subtitle="Pretitle"
         onClick={() => {}}
       />
     </Grid>

packages/core/src/layout/ItemCard/ItemCard.test.tsx

@@ -14,25 +14,35 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import { renderInTestApp } from '@backstage/test-utils';
+import React from 'react';
 import { ItemCard } from './ItemCard';
 
 const minProps = {
   description: 'This is the description of an Item Card',
   label: 'Button',
   title: 'Item Card',
-  type: 'Pretitle',
 };
 
 describe('<InfoCard />', () => {
   it('renders default without exploding', async () => {
-    const { description, label, title, type } = minProps;
+    const { description, label, title } = minProps;
     const { getByText } = await renderInTestApp(<ItemCard {...minProps} />);
     expect(getByText(description)).toBeInTheDocument();
     expect(getByText(title)).toBeInTheDocument();
     expect(getByText(label)).toBeInTheDocument();
-    expect(getByText(type)).toBeInTheDocument();
+  });
+
+  it('renders with subtitle without exploding', async () => {
+    const { description, label, title } = minProps;
+    const subtitle = 'Pretitle';
+    const { getByText } = await renderInTestApp(
+      <ItemCard {...minProps} subtitle={subtitle} />,
+    );
+    expect(getByText(description)).toBeInTheDocument();
+    expect(getByText(title)).toBeInTheDocument();
+    expect(getByText(label)).toBeInTheDocument();
+    expect(getByText(subtitle)).toBeInTheDocument();
   });
 
   it('renders with tags without exploding', async () => {

packages/core/src/layout/ItemCard/ItemCard.tsx

@@ -15,7 +15,7 @@
  */
 import { Button, Card, Chip, makeStyles, Typography } from '@material-ui/core';
 import clsx from 'clsx';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Link } from '../../components';
 
 const useStyles = makeStyles(theme => ({
@@ -45,7 +45,9 @@ type ItemCardProps = {
   description?: string;
   tags?: string[];
   title: string;
+  /** @deprecated Use subtitle instead */
   type?: string;
+  subtitle?: ReactNode;
   label: string;
   onClick?: () => void;
   href?: string;
@@ -56,6 +58,7 @@ export const ItemCard = ({
   tags,
   title,
   type,
+  subtitle,
   label,
   onClick,
   href,
@@ -65,7 +68,9 @@ export const ItemCard = ({
   return (
     <Card>
       <div className={classes.header}>
-        {type ?? <Typography variant="subtitle2">{type}</Typography>}
+        {(subtitle || type) && (
+          <Typography variant="subtitle2">{subtitle ?? type}</Typography>
+        )}
         <Typography variant="h6">{title}</Typography>
       </div>
       <div className={classes.content}>