fix(techdocs): move card component into techdocs plugin from backstage core

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

@@ -0,0 +1,79 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { FC } from 'react';
+import { Button, Card, Chip, Typography, makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles(theme => ({
+  header: {
+    color: theme.palette.common.white,
+    padding: theme.spacing(2, 2, 6),
+    backgroundImage:
+      'linear-gradient(-137deg, rgb(25, 230, 140) 0%, rgb(29, 127, 110) 100%)',
+  },
+  content: {
+    padding: theme.spacing(2),
+  },
+  description: {
+    height: 175,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  footer: {
+    display: 'flex',
+    flexDirection: 'row-reverse',
+  },
+}));
+
+type DocsCardProps = {
+  description: string;
+  tags?: string[];
+  title: string;
+  type?: string;
+  label: string;
+  onClick?: () => void;
+};
+export const DocsCard: FC<DocsCardProps> = ({
+  description,
+  tags,
+  title,
+  type,
+  label,
+  onClick,
+}) => {
+  const classes = useStyles();
+
+  return (
+    <Card>
+      <div className={classes.header}>
+        {type ?? <Typography variant="subtitle2">{type}</Typography>}
+        <Typography variant="h6">{title}</Typography>
+      </div>
+      <div className={classes.content}>
+        {tags?.map(tag => (
+          <Chip label={tag} key={tag} />
+        ))}
+        <Typography variant="body2" paragraph className={classes.description}>
+          {description}
+        </Typography>
+        <div className={classes.footer}>
+          <Button onClick={onClick} color="primary">
+            {label}
+          </Button>
+        </div>
+      </div>
+    </Card>
+  );
+};

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

@@ -17,16 +17,19 @@
 import React from 'react';
 import { useShadowDom } from '..';
 import { useAsync } from 'react-use';
+import { useLocation, useParams, useNavigate } from 'react-router-dom';
+
+import { Grid } from '@material-ui/core';
+import { Header, Content } from '@backstage/core';
+
 import transformer, {
   addBaseUrl,
   rewriteDocLinks,
   addEventListener,
 } from '../transformers';
 import { docStorageURL } from '../../config';
-import { Grid } from '@material-ui/core';
-import { Header, Content, ItemCard } from '@backstage/core';
-import { useLocation, useParams, useNavigate } from 'react-router-dom';
 import URLParser from '../urlParser';
+import { DocsCard } from './DocsCard';
 
 const useFetch = (url: string) => {
   const state = useAsync(async () => {
@@ -102,7 +105,7 @@ export const Reader = () => {
           <Content>
             <Grid container>
               <Grid item xs={12} sm={6} md={3}>
-                <ItemCard
+                <DocsCard
                   onClick={() => navigate('/docs/mkdocs')}
                   tags={['Developer Tool']}
                   title="MkDocs"
@@ -111,7 +114,7 @@ export const Reader = () => {
                 />
               </Grid>
               <Grid item xs={12} sm={6} md={3}>
-                <ItemCard
+                <DocsCard
                   onClick={() => navigate('/docs/backstage-microsite')}
                   tags={['Service']}
                   title="Backstage"