Skip to content

Commit 2d30778

Browse files
rakieta2015rakieta2015
committed
storybook: Add CSidebar
1 parent 0c62349 commit 2d30778

File tree

1 file changed

+234
-0
lines changed

1 file changed

+234
-0
lines changed

‎stories/CSidebar.stories.js

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
2+
import { boolean, select, text, object, withKnobs } from '@storybook/addon-knobs'
3+
import { storiesOf } from '@storybook/vue'
4+
import CSidebar from '../src/components/template/CSidebar'
5+
import CSidebarHeader from '../src/components/template/CSidebarHeader'
6+
import CSidebarFooter from '../src/components/template/CSidebarFooter'
7+
8+
import CSidebarNavDivider from '../src/components/template/CSidebarNavDivider'
9+
import CSidebarNavDropdown from '../src/components/template/CSidebarNavDropdown'
10+
import CSidebarNavItem from '../src/components/template/CSidebarNavItem'
11+
import CSidebarNavTitle from '../src/components/template/CSidebarNavTitle'
12+
13+
14+
15+
import CCard from '../src/components/card/CCard'
16+
import CCardBody from '../src/components/card/CCardBody'
17+
import CCol from '../src/components/grid/CCol'
18+
19+
storiesOf('CSidebar', module)
20+
.addDecorator(withKnobs)
21+
.add('single', () => {
22+
23+
return {
24+
components: {
25+
CCol,
26+
CCard,
27+
CCardBody,
28+
CSidebar,
29+
CSidebarHeader,
30+
CSidebarFooter,
31+
CSidebarNavDivider,
32+
CSidebarNavDropdown,
33+
CSidebarNavItem,
34+
CSidebarNavTitle,
35+
},
36+
props: {
37+
fixedSidebar:{
38+
type: Boolean,
39+
default: boolean('Fixed', true, 'CSidebar'),
40+
},
41+
unfoldableSidebar:{
42+
type: Boolean,
43+
default: boolean('Unfoldable', false, 'CSidebar'),
44+
},
45+
overlaidSidebar:{
46+
type: Boolean,
47+
default: boolean('Overlaid', false, 'CSidebar'),
48+
},
49+
breakpointSidebar:{
50+
type: String,
51+
default: select('Breakpoint',
52+
[
53+
'sm', 'md', 'lg', 'xl'
54+
],
55+
'lg',
56+
'CSidebar')
57+
},
58+
minimizeSidebar:{
59+
type: Boolean,
60+
default: boolean('Minimize', false, 'CSidebar'),
61+
},
62+
showSidebar:{
63+
type: String,
64+
default: select('Show',
65+
[
66+
true, false, 'responsive'
67+
],
68+
'responsive',
69+
'CSidebar')
70+
},
71+
sizeSidebar:{
72+
type: String,
73+
default: select('Size',
74+
[undefined, 'sm', 'lg', 'xl'],
75+
undefined,
76+
'CSidebar'
77+
)
78+
},
79+
hideOnMobileClickSidebar:{
80+
type: Boolean,
81+
default: boolean('HideOnMobileClick', true, 'CSidebar')
82+
},
83+
asideSidebar:{
84+
type: Boolean,
85+
default: boolean('Aside', false, 'CSidebar')
86+
},
87+
colorSchemeSidebar:{
88+
type: String,
89+
default: select(
90+
'ColorScheme',
91+
[
92+
"light",
93+
"dark",
94+
],
95+
'dark',
96+
'CSidebar'
97+
),
98+
},
99+
dropdownModeSidebar:{
100+
type: String,
101+
default: select(
102+
'DropdownMode',
103+
['openActive', 'close', 'closeInactive', 'noAction'],
104+
'openActive',
105+
'CSidebar'
106+
),
107+
},
108+
nameNavItem:{
109+
type: String,
110+
default: text('Name', 'Lorem ipsum', 'CSidebarNavItem')
111+
},
112+
badgeNavItem:{
113+
type: Object,
114+
default: object('Badge', {}, 'CSidebarNavItem')
115+
},
116+
iconNavItem:{
117+
type: String,
118+
default: text('Icon', '', 'CSidebarNavItem')
119+
},
120+
fontIconNavItem:{
121+
type: String,
122+
default: text('FontIcon', '', 'CSidebarNavItem')
123+
},
124+
addLinkClassesNavItem:{
125+
type: String,
126+
default: text('AddLinkClasses', '', 'CSidebarNavItem')
127+
},
128+
labelNavItem:{
129+
type: String,
130+
default: text('LabelNav', false, 'CSidebarNavItem')
131+
},
132+
colorNavItem:{
133+
type: String,
134+
default: select('Color', [
135+
undefined,
136+
"primary",
137+
"secondary",
138+
"success",
139+
"warning",
140+
"danger",
141+
"info",
142+
"light",
143+
"dark",
144+
], undefined, 'CSidebarNavItem')
145+
},
146+
nameNavDropdown:{
147+
type: String,
148+
default: text('Name', '', 'CSidebarNavDropdown')
149+
},
150+
routeNavDropdown:{
151+
type: String,
152+
default: text('Route', '', 'CSidebarNavDropdown')
153+
},
154+
iconNavDropdown:{
155+
type: String,
156+
default: text('Icon', '', 'CSidebarNavDropdown')
157+
},
158+
fontIconNavDropdown:{
159+
type: String,
160+
default: text('FontIcon', '', 'CSidebarNavDropdown')
161+
},
162+
showNavDropdown:{
163+
type: Boolean,
164+
default: boolean('Show', undefined, 'CSidebarNavDropdown')
165+
},
166+
itemsNavDropdown:{
167+
type: Object,
168+
default: object('Items', {}, 'CSidebarNavDropdown')
169+
},
170+
},
171+
template: `
172+
<CSidebar
173+
:fixed="fixedSidebar"
174+
:unfoldable="unfoldableSidebar"
175+
:overlaid="overlaidSidebar"
176+
:breakpoint="breakpointSidebar"
177+
:minimize="minimizeSidebar"
178+
:show="showSidebar"
179+
:size="sizeSidebar"
180+
:hideOnMobileClick="hideOnMobileClickSidebar"
181+
:aside="asideSidebar"
182+
:colorScheme="colorSchemeSidebar"
183+
:dropdownMode="dropdownModeSidebar"
184+
>
185+
<CSidebarHeader></CSidebarHeader>
186+
187+
<CSidebarNavTitle>Lorem ipsum dolor</CSidebarNavTitle>
188+
189+
<CSidebarNavItem
190+
:name="nameNavItem"
191+
:badge="badgeNavItem"
192+
:icon="iconNavItem"
193+
:fontIcon="fontIconNavItem"
194+
:label="labelNavItem"
195+
:color="colorNavItem"
196+
/>
197+
198+
<CSidebarNavDropdown
199+
:name="nameNavDropdown"
200+
:route="routeNavDropdown"
201+
:icon="iconNavDropdown"
202+
:fontIcon="fontIconNavDropdown"
203+
:show="showNavDropdown"
204+
:items="itemsNavDropdown"
205+
>
206+
<CSidebarNavItem
207+
:name="nameNavItem"
208+
:badge="badgeNavItem"
209+
:icon="iconNavItem"
210+
:fontIcon="fontIconNavItem"
211+
:label="labelNavItem"
212+
:color="colorNavItem"
213+
/>
214+
</CSidebarNavDropdown>
215+
216+
<CSidebarNavDivider></CSidebarNavDivider>
217+
218+
<CSidebarNavDropdown name="Ipsum dolor">
219+
<CSidebarNavItem name="Lorem"></CSidebarNavItem>
220+
<CSidebarNavItem name="Ipsum dolor"></CSidebarNavItem>
221+
<CSidebarNavItem name="Cet emit"></CSidebarNavItem>
222+
</CSidebarNavDropdown>
223+
224+
<CSidebarNavDropdown name="Cet emit">
225+
<CSidebarNavItem name="Lorem"></CSidebarNavItem>
226+
<CSidebarNavItem name="Ipsum dolor"></CSidebarNavItem>
227+
<CSidebarNavItem name="Cet emit"></CSidebarNavItem>
228+
</CSidebarNavDropdown>
229+
230+
<CSidebarFooter></CSidebarFooter>
231+
</CSidebar>
232+
`
233+
}
234+
})

0 commit comments

Comments
 (0)