mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
Add Basic Story For SearchInput
I had to remove `| dateTime('dd.MM.yyyy')` in line 61 of the vue file due to issues with $i18n which surely can be easyly solved.
The idea is, that `results` is an object which contains the keys `posts` and `users`. The values are arrays with the search results.
This commit is contained in:
parent
9f4702d002
commit
6475458fe8
80
webapp/components/SearchInput/SearchInput.story.js
Normal file
80
webapp/components/SearchInput/SearchInput.story.js
Normal file
@ -0,0 +1,80 @@
|
||||
import { storiesOf } from '@storybook/vue'
|
||||
import { withA11y } from '@storybook/addon-a11y'
|
||||
import SearchInput from './SearchInput.vue'
|
||||
import helpers from '~/storybook/helpers'
|
||||
|
||||
helpers.init()
|
||||
|
||||
export const results = {
|
||||
posts: [
|
||||
{
|
||||
id: 'de100841-2336-4b01-a574-f1bd2c0b262a',
|
||||
slug: 'user-post-by-jenny',
|
||||
label: 'User Post by Jenny',
|
||||
value: 'User Post by Jenny',
|
||||
shoutedCount: 0,
|
||||
createdAt: '2019-11-13T03:03:16.155Z',
|
||||
author: {
|
||||
id: 'u3',
|
||||
name: 'Jenny Rostock',
|
||||
slug: 'jenny-rostock',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'f48f00a0-c412-432f-8334-4276a4e15d1c',
|
||||
slug: 'eum-quos-est-molestiae-enim-magni-consequuntur-sed-commodi-eos',
|
||||
label: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
|
||||
value: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
|
||||
shoutedCount: 0,
|
||||
createdAt: '2019-11-13T03:00:45.478Z',
|
||||
author: {
|
||||
id: 'u6',
|
||||
name: 'Louie',
|
||||
slug: 'louie',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'p7',
|
||||
slug: 'this-is-post-7',
|
||||
label: 'This is post #7',
|
||||
value: 'This is post #7',
|
||||
shoutedCount: 1,
|
||||
createdAt: '2019-11-13T03:00:23.098Z',
|
||||
author: {
|
||||
id: 'u6',
|
||||
name: 'Louie',
|
||||
slug: 'louie',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'p12',
|
||||
slug: 'this-is-post-12',
|
||||
label: 'This is post #12',
|
||||
value: 'This is post #12',
|
||||
shoutedCount: 0,
|
||||
createdAt: '2019-11-13T03:00:23.098Z',
|
||||
author: {
|
||||
id: 'u6',
|
||||
name: 'Louie',
|
||||
slug: 'louie',
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
storiesOf('Search Input', module)
|
||||
.addDecorator(withA11y)
|
||||
.addDecorator(helpers.layout)
|
||||
.add('test', () => ({
|
||||
components: { SearchInput },
|
||||
store: helpers.store,
|
||||
data: () => ({
|
||||
results: results.posts,
|
||||
}),
|
||||
template: `
|
||||
<search-input
|
||||
:results="results"
|
||||
:width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
|
||||
/>
|
||||
`,
|
||||
}))
|
||||
@ -58,7 +58,8 @@
|
||||
<ds-flex-item>
|
||||
<ds-text size="small" color="softer" align="right">
|
||||
{{ option.author.name | truncate(32) }} -
|
||||
{{ option.createdAt | dateTime('dd.MM.yyyy') }}
|
||||
{{ option.createdAt }}
|
||||
<!-- removed | dateTime('dd.MM.yyyy') -->
|
||||
</ds-text>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user