Add support for links in ItemCard and fix height of cards with tags vs cards without tags

.changeset/four-shrimps-flash.md

@@ -0,0 +1,7 @@
+---
+'@backstage/core': patch
+'@backstage/plugin-techdocs': patch
+---
+
+Add `href` in addition to `onClick` to `ItemCard`. Ensure that the height of a
+`ItemCard` with and without tags is equal.

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

@@ -13,9 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
-import { ItemCard } from '.';
 import { Grid } from '@material-ui/core';
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+import { ItemCard } from '.';
 
 export default {
   title: 'Layout/Item Card',
@@ -63,5 +64,35 @@ export const Tags = () => (
         label="Button"
       />
     </Grid>
+    <Grid item xs={12} md={3}>
+      <ItemCard
+        title="Item Card"
+        description="This is the description of an Item Card without Tags"
+        label="Button"
+      />
+    </Grid>
   </Grid>
 );
+
+export const Link = () => (
+  <MemoryRouter>
+    <Grid container spacing={4}>
+      <Grid item xs={12} md={3}>
+        <ItemCard
+          title="Backstage"
+          description="This is the description of an Item Card with link"
+          label="Read More"
+          href="https://www.backstage.io"
+        />
+      </Grid>
+      <Grid item xs={12} md={3}>
+        <ItemCard
+          title="Backstage @ GitHub"
+          description="This is the description of an Item Card with link"
+          label="Read More"
+          href="https://github.com/backstage/backstage"
+        />
+      </Grid>
+    </Grid>
+  </MemoryRouter>
+);

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

@@ -13,8 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { Button, Card, Chip, makeStyles, Typography } from '@material-ui/core';
 import React from 'react';
-import { Button, Card, Chip, Typography, makeStyles } from '@material-ui/core';
+import { Link } from '../../components';
 
 const useStyles = makeStyles(theme => ({
   header: {
@@ -30,6 +31,9 @@ const useStyles = makeStyles(theme => ({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
   },
+  withTags: {
+    height: 'calc(175px - 32px - 8px)',
+  },
   footer: {
     display: 'flex',
     flexDirection: 'row-reverse',
@@ -43,7 +47,9 @@ type ItemCardProps = {
   type?: string;
   label: string;
   onClick?: () => void;
+  href?: string;
 };
+
 export const ItemCard = ({
   description,
   tags,
@@ -51,6 +57,7 @@ export const ItemCard = ({
   type,
   label,
   onClick,
+  href,
 }: ItemCardProps) => {
   const classes = useStyles();
 
@@ -64,13 +71,22 @@ export const ItemCard = ({
         {tags?.map((tag, i) => (
           <Chip label={tag} key={`tag-${i}`} />
         ))}
-        <Typography variant="body2" paragraph className={classes.description}>
+        <Typography
+          variant="body2"
+          paragraph
+          className={`${classes.description} ${
+            tags && tags.length > 0 ? classes.withTags : ''
+          }`}
+        >
           {description}
         </Typography>
         <div className={classes.footer}>
-          <Button onClick={onClick} color="primary">
-            {label}
-          </Button>
+          {!href && (
+            <Button onClick={onClick} color="primary">
+              {label}
+            </Button>
+          )}
+          {href && <Link to={href}>{label}</Link>}
         </div>
       </div>
     </Card>

plugins/techdocs/src/reader/components/TechDocsHome.tsx

@@ -25,13 +25,12 @@ import {
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { Grid } from '@material-ui/core';
 import React from 'react';
-import { generatePath, useNavigate } from 'react-router-dom';
+import { generatePath } from 'react-router-dom';
 import { useAsync } from 'react-use';
 import { rootDocsRouteRef } from '../../plugin';
 
 export const TechDocsHome = () => {
   const catalogApi = useApi(catalogApiRef);
-  const navigate = useNavigate();
 
   const { value, loading, error } = useAsync(async () => {
     const response = await catalogApi.getEntities();
@@ -80,15 +79,11 @@ export const TechDocsHome = () => {
             ? value.map((entity, index: number) => (
                 <Grid key={index} item xs={12} sm={6} md={3}>
                   <ItemCard
-                    onClick={() =>
-                      navigate(
-                        generatePath(rootDocsRouteRef.path, {
-                          namespace: entity.metadata.namespace ?? 'default',
-                          kind: entity.kind,
-                          name: entity.metadata.name,
-                        }),
-                      )
-                    }
+                    href={generatePath(rootDocsRouteRef.path, {
+                      namespace: entity.metadata.namespace ?? 'default',
+                      kind: entity.kind,
+                      name: entity.metadata.name,
+                    })}
                     title={entity.metadata.name}
                     label="Read Docs"
                     description={entity.metadata.description}