Merge pull request #449 from spotify/alund/story

Storybook: wrap InfoCards to fix width
This commit is contained in:
Stefan Ålund
2020-04-03 10:35:58 +02:00
committed by GitHub
2 changed files with 26 additions and 12 deletions
@@ -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>
);