From 3be5e9ade37c15a238c61c9c008104cc3cb19092 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20=C3=85lund?= <alund@spotify.com>
Date: Thu, 2 Apr 2020 13:53:33 +0200
Subject: [PATCH] Storybook: wrap InfoCards to fix width

---
 README.md                                     |  5 +--
 .../src/layout/InfoCard/InfoCard.stories.tsx  | 33 +++++++++++++------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 2145e62fa8..f884b1881b 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,7 @@ We created Backstage about 4 years ago. While our internal version of Backstage
 
 - 🐇 **Phase 3:** Ecosystem (later) - Everyone's infrastructure stack is different. By fostering a vibrant community of contributors we hope to provide an ecosystem of Open Source plugins/integrations that allows you to pick the tools that match your stack.
 
-Check out our [Milestones](https://github.com/spotify/backstage/milestones) and open [RFCs](https://github.com/spotify/backstage/labels/rfc) how they relate to the three Phases outlined above. 
+Check out our [Milestones](https://github.com/spotify/backstage/milestones) and open [RFCs](https://github.com/spotify/backstage/labels/rfc) how they relate to the three Phases outlined above.
 
 Our vision for Backstage is for it to become the trusted standard toolbox (read: UX layer) for the open source infrastructure landscape. Think of it like Kubernetes for developer experience. We realize this is an ambitious goal. We can’t do it alone. If this sounds interesting or you'd like to help us shape our product vision, we'd love to talk. You can email me directly: [alund@spotify.com](mailto:alund@spotify.com).
 
@@ -69,7 +69,7 @@ $ yarn start
 
 The final `yarn start` command should open a local instance of Backstage in your browser, otherwise open one of the URLs printed in the terminal.
 
-For more complex development environment configuration, see the 
+For more complex development environment configuration, see the
 [Development Environment](docs/getting-started/development-environment.md) section of the Getting Started docs.
 
 ## Documentation
@@ -79,6 +79,7 @@ For more complex development environment configuration, see the
 - [Structure of a Plugin](docs/getting-started/structure-of-a-plugin.md)
 - [Frontend architecture](docs/architecture-terminology.md)
 - [API references](docs/reference/README.md)
+- [Storybook - UI components](http://storybook.backstage.io) ([WIP](https://github.com/spotify/backstage/milestone/9))
 - Using Backstage components (TODO)
 
 ## Community
diff --git a/packages/core/src/layout/InfoCard/InfoCard.stories.tsx b/packages/core/src/layout/InfoCard/InfoCard.stories.tsx
index 47edbde229..611facd29c 100644
--- a/packages/core/src/layout/InfoCard/InfoCard.stories.tsx
+++ b/packages/core/src/layout/InfoCard/InfoCard.stories.tsx
@@ -15,8 +15,9 @@
  */
 import React from 'react';
 import InfoCard from '.';
+import { Grid } from '@material-ui/core';
 
-const cardContentStyle = { height: '200px' };
+const cardContentStyle = { height: 200, width: 500 };
 const linkInfo = { title: 'Go to XYZ Location', link: '#' };
 
 export default {
@@ -24,20 +25,32 @@ export default {
   component: InfoCard,
 };
 
+const Wrapper = ({ children }) => (
+  <Grid container spacing={4}>
+    <Grid item>{children}</Grid>
+  </Grid>
+);
+
 export const Default = () => (
-  <InfoCard title="Information Card">
-    <div style={cardContentStyle} />
-  </InfoCard>
+  <Wrapper>
+    <InfoCard title="Information Card">
+      <div style={cardContentStyle} />
+    </InfoCard>
+  </Wrapper>
 );
 
 export const Subhead = () => (
-  <InfoCard title="Information Card" subheader="Subhead">
-    <div style={cardContentStyle} />
-  </InfoCard>
+  <Wrapper>
+    <InfoCard title="Information Card" subheader="Subhead">
+      <div style={cardContentStyle} />
+    </InfoCard>
+  </Wrapper>
 );
 
 export const LinkInFooter = () => (
-  <InfoCard title="Information Card" deepLink={linkInfo}>
-    <div style={cardContentStyle} />
-  </InfoCard>
+  <Wrapper>
+    <InfoCard title="Information Card" deepLink={linkInfo}>
+      <div style={cardContentStyle} />
+    </InfoCard>
+  </Wrapper>
 );