From 06bdeadb003fb69a870821a32451656a0c1c840d Mon Sep 17 00:00:00 2001
From: Wesley Yee <wesleyy@spotify.com>
Date: Wed, 17 Jun 2020 03:57:45 -0400
Subject: [PATCH] Template card component (#1322)

---
 .../src/components/ScaffolderPage/index.tsx   | 18 ++--
 .../src/components/TemplateCard.tsx           | 84 +++++++++++++++++++
 2 files changed, 94 insertions(+), 8 deletions(-)
 create mode 100644 plugins/scaffolder/src/components/TemplateCard.tsx

diff --git a/plugins/scaffolder/src/components/ScaffolderPage/index.tsx b/plugins/scaffolder/src/components/ScaffolderPage/index.tsx
index 5d976a20b2..aa1cf36082 100644
--- a/plugins/scaffolder/src/components/ScaffolderPage/index.tsx
+++ b/plugins/scaffolder/src/components/ScaffolderPage/index.tsx
@@ -19,19 +19,21 @@ import {
   Lifecycle,
   Content,
   ContentHeader,
-  InfoCard,
   Header,
   Page,
   pageTheme,
 } from '@backstage/core';
 import { Typography, Link, Button } from '@material-ui/core';
 import { Link as RouterLink } from 'react-router-dom';
+import TemplateCard from '../TemplateCard';
 
 // TODO(blam): Connect to backend
 const STATIC_DATA = [
   {
     id: 'react-ssr-template',
+    type: 'web-infra',
     name: 'SSR React Website',
+    tags: ['Experimental'],
     description:
       'Next.js application skeleton for creating isomorphic web applications.',
     ownerId: 'something',
@@ -68,15 +70,15 @@ const ScaffolderPage: React.FC<{}> = () => {
           .
         </Typography>
         <div style={{ display: 'flex' }}>
-          {STATIC_DATA.map((item, ix) => {
+          {STATIC_DATA.map(item => {
             return (
-              <InfoCard
+              <TemplateCard
+                key={item.id}
                 title={item.name}
-                deepLink={{ title: 'Create', link: '#' }}
-                key={ix}
-              >
-                <Typography paragraph>{item.description}</Typography>
-              </InfoCard>
+                type={item.type}
+                description={item.description}
+                tags={item.tags}
+              />
             );
           })}
         </div>
diff --git a/plugins/scaffolder/src/components/TemplateCard.tsx b/plugins/scaffolder/src/components/TemplateCard.tsx
new file mode 100644
index 0000000000..56d8907f7b
--- /dev/null
+++ b/plugins/scaffolder/src/components/TemplateCard.tsx
@@ -0,0 +1,84 @@
+/*
+ * 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,
+  Grid,
+  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 TemplateCardProps = {
+  description: string;
+  tags: string[];
+  title: string;
+  type: string;
+};
+const TemplateCard: FC<TemplateCardProps> = ({
+  description,
+  tags,
+  title,
+  type,
+}) => {
+  const classes = useStyles();
+
+  return (
+    <Grid item xs={12} sm={6} md={3}>
+      <Card>
+        <div className={classes.header}>
+          <Typography variant="subtitle2">{type}</Typography>
+          <Typography variant="h6">{title}</Typography>
+        </div>
+        <div className={classes.content}>
+          {tags?.map(tag => (
+            <Chip label={tag} />
+          ))}
+          <Typography variant="body2" paragraph className={classes.description}>
+            {description}
+          </Typography>
+          <div className={classes.footer}>
+            <Button color="primary">Choose</Button>
+          </div>
+        </div>
+      </Card>
+    </Grid>
+  );
+};
+
+export default TemplateCard;