Skip to content

Commit efb0bc3

Browse files
jbiroribfbiggs
jbirori
authored and
bfbiggs
committed
feat(Card): implement card and card section components
1 parent 36a94c0 commit efb0bc3

File tree

18 files changed

+518
-205
lines changed

18 files changed

+518
-205
lines changed

‎react/src/app/containers/KitchenSink/index.js‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
SidebarNavItem,
88
} from '@momentum-ui/react';
99
import CheckboxKitchenSink from '../../../lib/Checkbox/examples/KitchenSink';
10+
import CardKitchenSink from '../../../lib/Card/examples/KitchenSink';
1011
import InputKitchenSink from '../../../lib/Input/examples/KitchenSink';
1112
import RadioKitchenSink from '../../../lib/Radio/examples/KitchenSink';
1213
import EventOverlay from '../EventOverlay';
@@ -15,12 +16,12 @@ export default class KitchenSink extends React.PureComponent {
1516
render() {
1617
return (
1718
<>
18-
<div className="docs-container--with-side-nav">
19-
<Sidebar
20-
className="docs-container__side-nav"
21-
isPageLevel
22-
withIcons={false}
23-
>
19+
<div className="docs-container--with-side-nav">
20+
<Sidebar
21+
className="docs-container__side-nav"
22+
isPageLevel
23+
withIcons={false}
24+
>
2425
<SidebarBody>
2526
<SidebarNav>
2627
<SidebarNavItem
@@ -29,6 +30,15 @@ export default class KitchenSink extends React.PureComponent {
2930
title="Playground"
3031
/>
3132
<SidebarNavItem keyboardKey="k" title="Kitchen Sink">
33+
<SidebarNavItem
34+
key={`CardKitchenSink`}
35+
customAnchorNode={
36+
<NavLink activeClassName="md-active-nav" to={`/card`} />
37+
}
38+
className="md-list-item--primary"
39+
keyboardKey="card"
40+
title="card"
41+
/>
3242
<SidebarNavItem
3343
key={`CheckboxKitchenSink`}
3444
customAnchorNode={<NavLink activeClassName="md-active-nav" to={`/checkbox`} />}
@@ -66,6 +76,12 @@ export default class KitchenSink extends React.PureComponent {
6676
<div className="docs-container__content">
6777
<h1>Kitchen Sink</h1>
6878
<Switch>
79+
<Route
80+
key={`CardKitchenSink`}
81+
exact
82+
path={`/card`}
83+
render={() => <CardKitchenSink />}
84+
/>
6985
<Route
7086
key={`CheckboxKitchenSink`}
7187
exact

‎react/src/lib/Card/examples/Clickable.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import { Avatar, Button, Card, CardSection, Link } from '@momentum-ui/react';
3+
export default function CardClickable() {
4+
return (
5+
<Card onClick={()=>{}} style={{width: '300px'}}>
6+
<CardSection style={{display: 'flex', justifyContent: 'space-between'}}>
7+
<Avatar src="http://react.collab-ui.com/barbara.png" style={{display: 'flex'}} />
8+
<div style={{paddingLeft: '16px'}}>
9+
<h4>Clickable</h4>
10+
<h6>Subtitle</h6>
11+
</div>
12+
</CardSection>
13+
<CardSection full>
14+
<img alt="placeholder" src="https://place-hold.it/400x400" />
15+
</CardSection>
16+
<CardSection>
17+
Et netus et malesuada fames ac turpis egestas macecenas. Adipisccing at in tellus integer.
18+
</CardSection>
19+
<CardSection style={{width: "100%", display: "flex", justifyContent: "flex-end", alignItems: "baseline"}}>
20+
<Link href="" style={{marginRight: '16px',}}> Link Text </Link>
21+
<Button
22+
children="Button"
23+
ariaLabel="myAriaLabel"
24+
/>
25+
</CardSection>
26+
</Card>
27+
);
28+
}

‎react/src/lib/Card/examples/Content.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import { Avatar, Button, Card, CardSection, Link } from '@momentum-ui/react';
3+
export default function CardContent() {
4+
return (
5+
<Card className="small-3 columns">
6+
<CardSection style={{display: 'flex', justifyContent: 'space-between'}}>
7+
<Avatar src="http://react.collab-ui.com/barbara.png" style={{display: 'flex'}} />
8+
<div style={{paddingLeft: '16px'}}>
9+
<h4>Content</h4>
10+
<h6>Subtitle</h6>
11+
</div>
12+
</CardSection>
13+
<CardSection full>
14+
<img alt="placeholder" src="https://place-hold.it/400x400" />
15+
</CardSection>
16+
<CardSection>
17+
Et netus et malesuada fames ac turpis egestas macecenas. Adipisccing at in tellus integer.
18+
</CardSection>
19+
<CardSection style={{width: "100%", display: "flex", justifyContent: "flex-end", alignItems: "baseline"}}>
20+
<Link href="" style={{marginRight: '16px',}}> Link Text </Link>
21+
<Button
22+
children="Button"
23+
ariaLabel="myAriaLabel"
24+
/>
25+
</CardSection>
26+
</Card>
27+
);
28+
}

‎react/src/lib/Card/examples/Content2.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import { Card, CardSection } from '@momentum-ui/react';
3+
export default function CardContent2() {
4+
return (
5+
<Card className="small-3 columns">
6+
<CardSection full>
7+
<img alt="placeholder" src="https://place-hold.it/400x400" />
8+
</CardSection>
9+
<CardSection>
10+
Product Announcement
11+
</CardSection>
12+
<CardSection>
13+
QWASI Makes Marketing Loyalty Programs Better with Collaboration
14+
</CardSection>
15+
<CardSection style={{display: 'flex', width: '100%', justifyContent: 'space-between'}}>
16+
<h4>Clickable</h4>
17+
<h6>Subtitle</h6>
18+
</CardSection>
19+
</Card>
20+
);
21+
}

‎react/src/lib/Card/examples/Default.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import { Card, CardSection } from '@momentum-ui/react';
3+
4+
export default function CardDefault() {
5+
return (
6+
<Card className="small-3 columns">
7+
<CardSection>
8+
<h4>Title</h4>
9+
<h6>Subtitle</h6>
10+
</CardSection>
11+
<CardSection full>
12+
<img alt="placeholder" src="https://place-hold.it/500x300" />
13+
</CardSection>
14+
<CardSection>Content</CardSection>
15+
<CardSection>FOOTER</CardSection>
16+
</Card>
17+
);
18+
}

‎react/src/lib/Card/examples/KitchenSink.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import {
3+
CardClickable,
4+
CardContent,
5+
CardContent2,
6+
CardDefault
7+
} from './index';
8+
9+
export default class CardKitchenSink extends React.Component {
10+
render() {
11+
return (
12+
<React.Fragment>
13+
<CardDefault />
14+
<CardContent />
15+
<CardContent2 />
16+
<CardClickable />
17+
</React.Fragment>
18+
);
19+
}
20+
}

‎react/src/lib/Card/examples/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export { default as CardDefault } from './Default';
2+
export { default as CardContent } from './Content';
3+
export { default as CardContent2 } from './Content2';
4+
export { default as CardClickable } from './Clickable';
5+
export { default as CardKitchenSink } from './KitchenSink';

0 commit comments

Comments
 (0)