Merge pull request #406 from mateusmarquezini/feature/400-info-card-storybook

Adding "Information Card" component to Storybook

packages/core/src/layout/InfoCard/BottomLink.js

@@ -17,11 +17,23 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@material-ui/core';
-import { Divider, ListItemText } from '@material-ui/core';
+import { Divider, ListItemText, withStyles } from '@material-ui/core';
 import { ListItem, ListItemIcon } from '@material-ui/core';
 import ArrowIcon from '@material-ui/icons/ArrowForward';
+import grey from '@material-ui/core/colors/grey';
+import Box from '@material-ui/core/Box';
 
-export default class BottomLink extends Component {
+const styles = theme => ({
+  root: {
+    maxWidth: 'fit-content',
+    padding: theme.spacing(2, 2, 2, 2.5)
+  },
+  boxTitle: {
+    margin: 0,
+    color: grey[900]
+  }
+})
+class BottomLink extends Component {
   static propTypes = {
     link: PropTypes.string,
     title: PropTypes.string,
@@ -29,19 +41,23 @@ export default class BottomLink extends Component {
   };
 
   render() {
-    const { link, title, onClick } = this.props;
+    const { link, title, onClick, classes } = this.props;
     return (
       <div>
         <Divider />
         <Link href={link} onClick={onClick} highlight="none">
-          <ListItem>
+          <ListItem className={classes.root}>
+            <ListItemText>
+              <Box className={classes.boxTitle} fontWeight="fontWeightBold" m={1}>{title}</Box>
+            </ListItemText>
             <ListItemIcon>
               <ArrowIcon />
             </ListItemIcon>
-            <ListItemText>{title}</ListItemText>
           </ListItem>
         </Link>
       </div>
     );
   }
 }
+
+export default withStyles(styles)(BottomLink);

packages/core/src/layout/InfoCard/InfoCard.js

@@ -29,7 +29,17 @@ import BottomLink from './BottomLink';
 
 import textContent from 'react-addons-text-content';
 
-const BoldHeader = withStyles({ title: { fontWeight: '700' } })(CardHeader);
+const styles = theme => ({
+  header: {
+    padding: theme.spacing(2, 2, 2, 2.5)
+  }
+});
+
+const BoldHeader = withStyles({
+  title: { fontWeight: '700' },
+  subheader: { paddingTop: '2px' },
+})(CardHeader);
+
 const CardActionsTopRight = withStyles({
   root: {
     display: 'inline-block',
@@ -183,12 +193,16 @@ class InfoCard extends Component {
       >
         <ErrorBoundary slackChannel={slackChannel}>
           {title && (
-            <BoldHeader
-              title={title}
-              subheader={subheader}
-              style={{ display: 'inline-block', ...headerStyle }}
-              {...headerProps}
-            />
+            <>
+              <BoldHeader
+                className={classes.header}
+                title={title}
+                subheader={subheader}
+                style={{ display: 'inline-block', ...headerStyle }}
+                {...headerProps}
+              />
+              <Divider />
+            </>
           )}
           {actionsTopRight && (
             <CardActionsTopRight>{actionsTopRight}</CardActionsTopRight>
@@ -212,4 +226,4 @@ class InfoCard extends Component {
   }
 }
 
-export default InfoCard;
+export default withStyles(styles)(InfoCard);

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

@@ -0,0 +1,43 @@
+/*
+ * 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 InfoCard from '.';
+
+const cardContentStyle = { height: '200px' };
+const linkInfo = { title: 'Go to XYZ Location', link: '#' };
+
+export default {
+  title: 'Information Card',
+  component: InfoCard,
+};
+
+export const Default = () => (
+  <InfoCard title="Information Card">
+    <div style={cardContentStyle} />
+  </InfoCard>
+);
+
+export const Subhead = () => (
+  <InfoCard title="Information Card" subheader="Subhead">
+    <div style={cardContentStyle} />
+  </InfoCard>
+);
+
+export const LinkInFooter = () => (
+  <InfoCard title="Information Card" deepLink={linkInfo}>
+    <div style={cardContentStyle} />
+  </InfoCard>
+);

packages/storybook/.storybook/main.js

@@ -5,17 +5,27 @@ module.exports = {
   ],
   addons: ['@storybook/addon-actions', '@storybook/addon-links'],
   webpackFinal: async config => {
-    config.module.rules.push({
-      test: /\.(ts|tsx)$/,
-      use: [
-        {
-          loader: require.resolve('ts-loader'),
-          options: {
-            transpileOnly: true,
+    config.module.rules.push(
+      {
+        test: /\.(ts|tsx)$/,
+        use: [
+          {
+            loader: require.resolve('ts-loader'),
+            options: {
+              transpileOnly: true,
+            },
           },
+        ],
+      },
+      {
+        test: /\.(js|jsx)$/,
+        loader: 'babel-loader',
+        options: {
+          presets: ['@babel/preset-react'],
+          plugins: ['@babel/plugin-proposal-class-properties'],
         },
-      ],
-    });
+      },
+    );
     config.resolve.extensions.push('.ts', '.tsx');
     return config;
   },

plugins/home-page/src/components/HomePage/HomePage.tsx

@@ -58,7 +58,7 @@ const HomePage: FC<{}> = () => {
         <Grid container direction="row" spacing={3}>
           <Grid item xs={6}>
             <Typography variant="h3">Things you own</Typography>
-            <InfoCard maxWidth>
+            <InfoCard>
               <TableContainer>
                 <Table size="small" aria-label="a dense table">
                   <TableHead>

plugins/welcome/src/components/WelcomePage/WelcomePage.tsx

@@ -54,7 +54,7 @@ const WelcomePage: FC<{}> = () => {
         </ContentHeader>
         <Grid container>
           <Grid item xs={12} md={6}>
-            <InfoCard maxWidth>
+            <InfoCard>
               <Typography variant="body1" gutterBottom>
                 You now have a running instance of Backstage!
                 <span role="img" aria-label="confetti">