Skip to content

Commit c9f0445

Browse files
iangflemingtw15egan
iangfleming
authored and
tw15egan
committed
refactor(card/overflowMenu): update to v7 classes and modifiers (carbon-design-system#543)
* refactor(overflowMenu): update to v7 classes and modifiers * refactor(card): update with v7 classes and remove unused card types * refactor(card): update story * refactor(card/OverflowMenu): fix tests
1 parent 02e0296 commit c9f0445

10 files changed

+144
-373
lines changed

‎.storybook/components/CardStory.js

+44-203
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import CardStatus from '../../components/CardStatus';
99
import CardActions from '../../components/CardActions';
1010
import CardActionItem from '../../components/CardActionItem';
1111
import Button from '../../components/Button';
12+
import Link from '../../components/Link';
1213

1314
const cardProps = {
1415
onClick: () => { console.log('click'); }, // eslint-disable-line no-console
@@ -27,32 +28,15 @@ const overflowMenuItemProps = {
2728
className: 'some-class',
2829
};
2930

30-
const appCardLinks = [
31-
'http://myapp.mybluemix.net',
32-
];
33-
34-
const containerCardInfo = [
35-
'Route: None',
36-
];
37-
38-
const serviceCardInfo = [
39-
'Cloudant NoSQL DB',
40-
'Shared',
41-
];
42-
43-
const virtualServerCardLinks = [
44-
'Private IP: 127.31.0.6',
45-
'Image: Ubuntu 14.04',
46-
];
47-
4831
class ControlledCard extends Component {
4932
static propTypes = {
5033
status: React.PropTypes.number,
51-
stopApp: React.PropTypes.func,
34+
simple: React.PropTypes.bool,
5235
}
5336

5437
static defaultProps = {
5538
status: CardStatus.appStatus.RUNNING,
39+
simple: false
5640
}
5741

5842
constructor(props) {
@@ -97,254 +81,111 @@ class ControlledCard extends Component {
9781
];
9882

9983
return (
100-
<Card {...cardProps}>
84+
(this.props.simple) ? (<Card {...cardProps}>
10185
<CardContent
102-
cardTitle="App Title 1"
103-
cardLink={cardLinks}
86+
cardTitle="Card Name"
87+
cardIcon="app-services"
88+
cardInfo={['Secondary Information']}
10489
>
10590
<OverflowMenu {...overflowMenuProps}>
10691
<OverflowMenuItem
10792
{...overflowMenuItemProps}
10893
itemText="Stop App"
109-
onClick={this.stopApp}
11094
/>
11195
<OverflowMenuItem
11296
{...overflowMenuItemProps}
11397
itemText="Restart App"
114-
onClick={this.restartApp}
11598
/>
11699
<OverflowMenuItem
117100
{...overflowMenuItemProps}
118101
itemText="Rename App"
119-
onClick={this.renameApp}
120102
/>
121103
<OverflowMenuItem
122104
{...overflowMenuItemProps}
123105
itemText="Delete App"
124-
isDelete
125-
isLastItem
126-
onClick={this.deleteApp}
106+
hasDivider
127107
/>
128108
</OverflowMenu>
129109
</CardContent>
130110
<CardFooter>
131-
<CardStatus status={this.state.status} />
132-
<CardActions>
133-
<CardActionItem iconName="restart--glyph" onClick={this.restartApp} description="Restart App" />
134-
<CardActionItem iconName="launch--glyph" onClick={this.goToApp} description="Go To App" />
135-
<CardActionItem iconName="favorite" onClick={this.favoriteApp} description="Favorite App" />
136-
</CardActions>
111+
<Button small kind="primary">View credentials</Button>
112+
<Link href="#" className="bx--card-footer__link">Link</Link>
137113
</CardFooter>
138-
</Card>
139-
);
140-
}
141-
}
142-
143-
storiesOf('Card', module)
144-
.addWithInfo(
145-
'card with example functions',
146-
`
147-
Cards provide an at-a glance preview of the content they link to and frequently contain
148-
easily-consumable content. The Card component can be divided into seperate parts.
149-
Use the Card Footer component to add a section to the bottom of your Card. The Card Content component
150-
contains the main content of the card (cardIcon, cardTitle, cardLink, cardInfo). Card Status displays the
151-
current status of the application (RUNNING, NOT_RUNNING, STOPPED). Finally, create Card Actions
152-
to add functional buttons with icons. The example below shows a Card component with info and an Overflow Menu in the
153-
Card Content, plus Restart/Go To/Favorite actions in the Card Footer.
154-
`,
155-
() => (
156-
<ControlledCard status={CardStatus.appStatus.RUNNING} />
157-
))
158-
.addWithInfo(
159-
'basic card',
160-
`
161-
Cards provide an at-a glance preview of the content they link to and frequently contain
162-
easily-consumable content. The example below shows an empty card. Create Card Content, Card Footer,
163-
Card Status and Card Actions components to add content to your card.
164-
`,
165-
() => (
166-
<Card />
167-
))
168-
.addWithInfo(
169-
'app card',
170-
`
171-
Cards provide an at-a glance preview of the content they link to and frequently contain
172-
easily-consumable content. The example below shows a Card suited for an application.
173-
`,
174-
() => (
175-
<Card {...cardProps}>
114+
</Card>)
115+
: (<Card {...cardProps}>
176116
<CardContent
177117
cardTitle="App Title 1"
178-
cardLink={appCardLinks}
179-
>
180-
<OverflowMenu {...overflowMenuProps}>
181-
<OverflowMenuItem
182-
{...overflowMenuItemProps}
183-
itemText="Stop App"
184-
/>
185-
<OverflowMenuItem
186-
{...overflowMenuItemProps}
187-
itemText="Restart App"
188-
/>
189-
<OverflowMenuItem
190-
{...overflowMenuItemProps}
191-
itemText="Rename App"
192-
/>
193-
<OverflowMenuItem
194-
{...overflowMenuItemProps}
195-
itemText="Delete App"
196-
isDelete
197-
isLastItem
198-
/>
199-
</OverflowMenu>
200-
</CardContent>
201-
<CardFooter>
202-
<CardStatus status={CardStatus.appStatus.RUNNING} />
203-
<CardActions>
204-
<CardActionItem iconName="restart--glyph" />
205-
<CardActionItem iconName="launch--glyph" />
206-
<CardActionItem iconName="favorite" />
207-
</CardActions>
208-
</CardFooter>
209-
</Card>
210-
))
211-
.addWithInfo(
212-
'container card',
213-
`
214-
Cards provide an at-a glance preview of the content they link to and frequently contain
215-
easily-consumable content. The example below shows a Card suited for a container.
216-
`,
217-
() => (
218-
<Card {...cardProps}>
219-
<CardContent
220-
cardTitle="Container Group"
221-
cardInfo={containerCardInfo}
118+
cardLink={cardLinks}
222119
>
223120
<OverflowMenu {...overflowMenuProps}>
224121
<OverflowMenuItem
225122
{...overflowMenuItemProps}
226123
itemText="Stop App"
124+
onClick={this.stopApp}
227125
/>
228126
<OverflowMenuItem
229127
{...overflowMenuItemProps}
230128
itemText="Restart App"
129+
onClick={this.restartApp}
231130
/>
232131
<OverflowMenuItem
233132
{...overflowMenuItemProps}
234133
itemText="Rename App"
134+
onClick={this.renameApp}
235135
/>
236136
<OverflowMenuItem
237137
{...overflowMenuItemProps}
238138
itemText="Delete App"
239-
isDelete
240-
isLastItem
139+
hasDivider
140+
onClick={this.deleteApp}
241141
/>
242142
</OverflowMenu>
243143
</CardContent>
244144
<CardFooter>
245-
<CardStatus status={CardStatus.appStatus.RUNNING} />
145+
<CardStatus status={this.state.status} />
246146
<CardActions>
247-
<CardActionItem iconName="restart_icon" />
147+
<CardActionItem iconName="restart--glyph" onClick={this.restartApp} description="Restart App" />
148+
<CardActionItem iconName="launch--glyph" onClick={this.goToApp} description="Go To App" />
149+
<CardActionItem iconName="favorite" onClick={this.favoriteApp} description="Favorite App" />
248150
</CardActions>
249151
</CardFooter>
250-
</Card>
251-
))
152+
</Card>)
153+
);
154+
}
155+
}
156+
157+
storiesOf('Card', module)
252158
.addWithInfo(
253-
'service card',
159+
'card',
254160
`
255161
Cards provide an at-a glance preview of the content they link to and frequently contain
256-
easily-consumable content. The example below shows a Card suited for a service.
162+
easily-consumable content. The example below shows an empty card. Create Card Content, Card Footer,
163+
Card Status and Card Actions components to add content to your card.
257164
`,
258165
() => (
259-
<Card {...cardProps}>
260-
<CardContent
261-
cardTitle="Service Name 1"
262-
cardInfo={serviceCardInfo}
263-
>
264-
<OverflowMenu {...overflowMenuProps}>
265-
<OverflowMenuItem
266-
{...overflowMenuItemProps}
267-
itemText="Stop App"
268-
/>
269-
<OverflowMenuItem
270-
{...overflowMenuItemProps}
271-
itemText="Restart App"
272-
/>
273-
<OverflowMenuItem
274-
{...overflowMenuItemProps}
275-
itemText="Rename App"
276-
/>
277-
<OverflowMenuItem
278-
{...overflowMenuItemProps}
279-
itemText="Delete App"
280-
isDelete
281-
isLastItem
282-
/>
283-
</OverflowMenu>
284-
</CardContent>
285-
<CardFooter>
286-
<Button
287-
className="bx--card-footer__credentials-button"
288-
>View Credentials
289-
</Button>
290-
<a href="#" className="bx--card-footer__docs-link">Docs</a>
291-
</CardFooter>
292-
</Card>
166+
<ControlledCard simple />
293167
))
294168
.addWithInfo(
295-
'virtual server group',
169+
'card with example functions',
296170
`
297171
Cards provide an at-a glance preview of the content they link to and frequently contain
298-
easily-consumable content. The example below shows a Card suited for virtual server group.
172+
easily-consumable content. The Card component can be divided into seperate parts.
173+
Use the Card Footer component to add a section to the bottom of your Card. The Card Content component
174+
contains the main content of the card (cardIcon, cardTitle, cardLink, cardInfo). Card Status displays the
175+
current status of the application (RUNNING, NOT_RUNNING, STOPPED). Finally, create Card Actions
176+
to add functional buttons with icons. The example below shows a Card component with info and an Overflow Menu in the
177+
Card Content, plus Restart/Go To/Favorite actions in the Card Footer.
299178
`,
300179
() => (
301-
<Card {...cardProps}>
302-
<CardContent
303-
cardTitle="Virtual Server Group"
304-
cardLink={virtualServerCardLinks}
305-
>
306-
<OverflowMenu {...overflowMenuProps}>
307-
<OverflowMenuItem
308-
{...overflowMenuItemProps}
309-
itemText="Stop App"
310-
/>
311-
<OverflowMenuItem
312-
{...overflowMenuItemProps}
313-
itemText="Restart App"
314-
/>
315-
<OverflowMenuItem
316-
{...overflowMenuItemProps}
317-
itemText="Rename App"
318-
/>
319-
<OverflowMenuItem
320-
{...overflowMenuItemProps}
321-
itemText="Delete App"
322-
isDelete
323-
isLastItem
324-
/>
325-
</OverflowMenu>
326-
</CardContent>
327-
<CardFooter>
328-
<CardStatus status={CardStatus.appStatus.RUNNING} />
329-
<CardActions>
330-
<CardActionItem iconName="restart_icon" />
331-
</CardActions>
332-
</CardFooter>
333-
</Card>
180+
<ControlledCard status={CardStatus.appStatus.RUNNING} />
334181
))
335182
.addWithInfo(
336-
'quota card',
183+
'basic card',
337184
`
338185
Cards provide an at-a glance preview of the content they link to and frequently contain
339-
easily-consumable content. The example below shows a Card suited for a quota.
186+
easily-consumable content. The example below shows an empty card. Create Card Content, Card Footer,
187+
Card Status and Card Actions components to add content to your card.
340188
`,
341189
() => (
342-
<Card {...cardProps} className="card--quota">
343-
<CardContent
344-
amount="2"
345-
desc="out of 11 containers not running"
346-
buttonText="Details"
347-
fullSize
348-
/>
349-
</Card>
190+
<Card />
350191
));

‎.storybook/components/OverflowMenuStory.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,7 @@ storiesOf('OverflowMenu', module)
4141
<OverflowMenuItem
4242
{...overflowMenuItemEvents}
4343
itemText="Delete App"
44-
isDelete
45-
isLastItem
44+
hasDivider
4645
/>
4746
</OverflowMenu>
4847
));

0 commit comments

Comments
 (0)