Merge pull request #449 from spotify/alund/story

Storybook: wrap InfoCards to fix width

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

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>
 );