From 0d93dde6bac075a25b17b24074c209f8d2ebd9d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20=C3=85lund?= <alund@spotify.com>
Date: Mon, 6 Apr 2020 15:07:36 +0200
Subject: [PATCH] Storybook for ProgressCard (#477)

* Storybook for ProgressCard

* Update ProgressCard.stories.tsx

* Fix import
---
 .../src/components/ProgressCard.stories.tsx   | 80 +++++++++++++++++++
 packages/core/src/components/ProgressCard.tsx | 21 ++---
 2 files changed, 86 insertions(+), 15 deletions(-)
 create mode 100644 packages/core/src/components/ProgressCard.stories.tsx

diff --git a/packages/core/src/components/ProgressCard.stories.tsx b/packages/core/src/components/ProgressCard.stories.tsx
new file mode 100644
index 0000000000..9b99b5d621
--- /dev/null
+++ b/packages/core/src/components/ProgressCard.stories.tsx
@@ -0,0 +1,80 @@
+/*
+ * 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 from 'react';
+import ProgressCard from './ProgressCard';
+import { Grid } from '@material-ui/core';
+
+const linkInfo = { title: 'Go to XYZ Location', link: '#' };
+
+export default {
+  title: 'Progress Card',
+  component: ProgressCard,
+};
+
+export const Default = () => (
+  <Grid container spacing={2}>
+    <Grid item>
+      <ProgressCard title="Progress" progress={0.3} />
+    </Grid>
+    <Grid item>
+      <ProgressCard title="Progress" progress={0.57} />
+    </Grid>
+    <Grid item>
+      <ProgressCard title="Progress" progress={0.89} />
+    </Grid>
+  </Grid>
+);
+
+export const Subhead = () => (
+  <Grid container spacing={2}>
+    <Grid item>
+      <ProgressCard
+        title="Progress"
+        subheader="With a subheader"
+        progress={0.3}
+      />
+    </Grid>
+    <Grid item>
+      <ProgressCard
+        title="Progress"
+        subheader="With a subheader"
+        progress={0.57}
+      />
+    </Grid>
+    <Grid item>
+      <ProgressCard
+        title="Progress"
+        subheader="With a subheader"
+        progress={0.89}
+      />
+    </Grid>
+  </Grid>
+);
+
+export const LinkInFooter = () => (
+  <Grid container spacing={2}>
+    <Grid item>
+      <ProgressCard title="Progress" deepLink={linkInfo} progress={0.3} />
+    </Grid>
+    <Grid item>
+      <ProgressCard title="Progress" deepLink={linkInfo} progress={0.57} />
+    </Grid>
+    <Grid item>
+      <ProgressCard title="Progress" deepLink={linkInfo} progress={0.89} />
+    </Grid>
+  </Grid>
+);
diff --git a/packages/core/src/components/ProgressCard.tsx b/packages/core/src/components/ProgressCard.tsx
index 6a3b87ba89..ef84c40499 100644
--- a/packages/core/src/components/ProgressCard.tsx
+++ b/packages/core/src/components/ProgressCard.tsx
@@ -18,15 +18,16 @@ import React, { FC } from 'react';
 import { makeStyles } from '@material-ui/core';
 
 import InfoCard from '../layout/InfoCard';
+import { Props as BottomLinkProps } from '../layout/InfoCard/BottomLink';
 import CircleProgress from './CircleProgress';
 
 type Props = {
   title: string;
   subheader?: string;
   variant?: string;
-  progress: number | string;
-  deepLink?: string | { title: string; link: string };
-  gacontext?: string;
+  /** Progress in % specified as decimal, e.g. "0.23" */
+  progress: number;
+  deepLink?: BottomLinkProps;
 };
 
 const useStyles = makeStyles({
@@ -40,25 +41,15 @@ const ProgressCard: FC<Props> = props => {
   const classes = useStyles(props);
   const { title, subheader, progress, deepLink, variant } = props;
 
-  // TODO(freben): Make type more strict when InfoCard is written in TS
-  let link: any = undefined;
-  if (deepLink) {
-    if (typeof deepLink === 'string') {
-      link = { title: 'View more', link: deepLink };
-    } else {
-      link = deepLink;
-    }
-  }
-
   return (
     <div className={classes.root}>
       <InfoCard
         title={title}
         subheader={subheader}
-        deepLink={link}
+        deepLink={deepLink}
         variant={variant}
       >
-        <CircleProgress value={Number(progress)} />
+        <CircleProgress value={progress} />
       </InfoCard>
     </div>
   );