chore: update card stories
This commit is contained in:
2 files changed
+31
-32
No files matched your search
@@ -1,6 +1,6 @@
|
||||
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
import { text, select } from '@storybook/addon-knobs';
|
||||
|
||||
<Meta title="Rose|Card|Link" component="Link" />
|
||||
|
||||
@@ -9,7 +9,12 @@ import { text } from '@storybook/addon-knobs';
|
||||
Card link component wraps content with `LinkTo` component. Supports title and description.
|
||||
|
||||
```html
|
||||
<Rose::Card::Link @title='Card title' @description='Card description' @route='about'/>
|
||||
<Rose::Card::Link
|
||||
@title='Card title'
|
||||
@description='Card description'
|
||||
@id='resource_id_1234'
|
||||
@icon='user-organization'
|
||||
@route='about'/>
|
||||
```
|
||||
|
||||
<Preview>
|
||||
@@ -18,43 +23,23 @@ Card link component wraps content with `LinkTo` component. Supports title and de
|
||||
<Rose::Card::Link
|
||||
@title={{title}}
|
||||
@description={{description}}
|
||||
@id={{id}}
|
||||
@icon={{icon}}
|
||||
/>
|
||||
`,
|
||||
context: {
|
||||
title: text('title', 'Card title'),
|
||||
description: text('description', 'Card description'),
|
||||
id: text('id', 'resource_id_1234'),
|
||||
icon: select('icon', {
|
||||
'user-organization': 'user-organization',
|
||||
'partner': 'partner',
|
||||
'gift-fill': 'gift-fill',
|
||||
},
|
||||
'user-organization'
|
||||
),
|
||||
},
|
||||
}}</Story>
|
||||
</Preview>
|
||||
|
||||
`@route` defaults to 'index' when not supplied.
|
||||
|
||||
`@title` and `@description` are optional. Card expands to fit content.
|
||||
|
||||
```html
|
||||
<Rose::Card::Link @title='Card title'/>
|
||||
```
|
||||
<Preview>
|
||||
<Story name="Title">{{
|
||||
template: hbs`
|
||||
<Rose::Card::Link @title={{title}} />
|
||||
`,
|
||||
context: {
|
||||
title: text('title', 'Card title'),
|
||||
},
|
||||
}}</Story>
|
||||
</Preview>
|
||||
|
||||
```html
|
||||
<Rose::Card::Link @description='Card description'/>
|
||||
```
|
||||
<Preview>
|
||||
<Story name="Description">{{
|
||||
template: hbs`
|
||||
<Rose::Card::Link @description={{description}} />
|
||||
`,
|
||||
context: {
|
||||
description: text('description', 'Card description'),
|
||||
},
|
||||
}}</Story>
|
||||
</Preview>
|
||||
@@ -17,26 +17,36 @@ A set of cards arranged side-by-side.
|
||||
@route="index"
|
||||
@title="Card Title"
|
||||
@description="Description"
|
||||
@id="resource_id_1234"
|
||||
@icon="user-organization"
|
||||
/>
|
||||
<cards.link
|
||||
@route="index"
|
||||
@title="Card Title"
|
||||
@description="Description"
|
||||
@id="resource_id_1234"
|
||||
@icon="user-organization"
|
||||
/>
|
||||
<cards.link
|
||||
@route="index"
|
||||
@title="Card Title"
|
||||
@description="Description"
|
||||
@id="resource_id_1234"
|
||||
@icon="user-organization"
|
||||
/>
|
||||
<cards.link
|
||||
@route="index"
|
||||
@title="Card Title"
|
||||
@description="Description"
|
||||
@id="resource_id_1234"
|
||||
@icon="user-organization"
|
||||
/>
|
||||
<cards.link
|
||||
@route="index"
|
||||
@title="Card Title"
|
||||
@description="Description"
|
||||
@id="resource_id_1234"
|
||||
@icon="user-organization"
|
||||
/>
|
||||
</Rose::Cards>
|
||||
`,
|
||||
@@ -51,11 +61,15 @@ A set of cards arranged side-by-side.
|
||||
@route="index"
|
||||
@title="Card Title"
|
||||
@description="Description"
|
||||
@id="resource_id_1234"
|
||||
@icon="user-organization"
|
||||
/>
|
||||
<cards.link
|
||||
@route="index"
|
||||
@title="Card Title"
|
||||
@description="Description"
|
||||
@id="resource_id_1234"
|
||||
@icon="user-organization"
|
||||
/>
|
||||
</Rose::Cards>
|
||||
```
|
||||
Reference in new issue
Block a user