Skip to content

Commit 15b9c49

Browse files
Akshat55Akshat55
committed
docs: Split grid stories into sub folders
Signed-off-by: Akshat Patel <[email protected]>
1 parent 7fa32f0 commit 15b9c49

File tree

2 files changed

+305
-19
lines changed

2 files changed

+305
-19
lines changed

‎src/grid/css-grid.stories.ts‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
/* tslint:disable variable-name */
2+
3+
import { moduleMetadata, componentWrapperDecorator } from "@storybook/angular";
4+
import { Story, Meta } from "@storybook/angular/types-6-0";
5+
import {
6+
GridModule,
7+
GridDirective,
8+
RowDirective,
9+
ColumnDirective
10+
} from "./";
11+
12+
export default {
13+
title: "Components/Grid/CSS",
14+
decorators: [
15+
moduleMetadata({
16+
imports: [GridModule]
17+
}),
18+
componentWrapperDecorator((story) => `<div class="css-grid-story">${story}</div>`)
19+
],
20+
component: GridDirective,
21+
subcomponents: {
22+
RowDirective,
23+
ColumnDirective
24+
},
25+
argTypes: {
26+
useCssGrid: {
27+
control: false
28+
}
29+
}
30+
} as Meta;
31+
32+
const Template: Story<GridDirective> = (args) => ({
33+
props: args,
34+
template: `
35+
<div
36+
cdsGrid
37+
[useCssGrid]="true"
38+
[condensed]="condensed"
39+
[narrow]="narrow"
40+
[fullWidth]="fullWidth">
41+
<div cdsCol [columnNumbers]="{sm: 4}"></div>
42+
<div cdsCol [columnNumbers]="{sm: 4}"></div>
43+
<div cdsCol [columnNumbers]="{sm: 4}"></div>
44+
<div cdsCol [columnNumbers]="{sm: 4}"></div>
45+
</div>
46+
`
47+
});
48+
export const Basic = Template.bind({});
49+
50+
const GridStartTemplate: Story<GridDirective> = (args) => ({
51+
props: args,
52+
template: `
53+
<div
54+
cdsGrid
55+
[useCssGrid]="true"
56+
[condensed]="condensed"
57+
[narrow]="narrow"
58+
[fullWidth]="fullWidth">
59+
<div cdsCol [columnNumbers]="{
60+
sm: {span: 1, start: 4},
61+
md: {span: 2, start: 7},
62+
lg: {span: 4, start: 13}
63+
}">span, start</div>
64+
<div cdsCol [columnNumbers]="{
65+
sm: {span: 2, end: 5},
66+
md: {span: 4, end: 9},
67+
lg: {span: 8, end: 17}
68+
}">span, end</div>
69+
<div cdsCol [columnNumbers]="{
70+
sm: {start: 1, end: 4},
71+
md: {start: 3, end: 7},
72+
lg: {start: 5, end: 17}
73+
}">start, end</div>
74+
</div>
75+
`
76+
});
77+
export const GridStart = GridStartTemplate.bind({});
78+
79+
const ResponsiveTemplate: Story<GridDirective> = (args) => ({
80+
props: args,
81+
template: `
82+
<div
83+
cdsGrid
84+
[useCssGrid]="true"
85+
[condensed]="condensed"
86+
[narrow]="narrow"
87+
[fullWidth]="fullWidth">
88+
<div cdsCol [columnNumbers]="{sm: 2, md: 4, lg: 6}">
89+
<p>Small: Span 2 of 4</p>
90+
<p>Medium: Span 4 of 8</p>
91+
<p>Large: Span 6 of 16</p>
92+
</div>
93+
<div cdsCol [columnNumbers]="{sm: 2, md: 2, lg: 3}">
94+
<p>Small: Span 2 of 4</p>
95+
<p>Medium: Span 2 of 8</p>
96+
<p>Large: Span 3 of 16</p>
97+
</div>
98+
<div cdsCol [columnNumbers]="{sm: 0, md: 2, lg: 3}">
99+
<p>Small: Span 0 of 4</p>
100+
<p>Medium: Span 2 of 8</p>
101+
<p>Large: Span 3 of 16</p>
102+
</div>
103+
<div cdsCol [columnNumbers]="{sm: 0, md: 0, lg: 4}">
104+
<p>Small: Span 0 of 4</p>
105+
<p>Medium: Span 0 of 8</p>
106+
<p>Large: Span 4 of 16</p>
107+
</div>
108+
<div cdsCol [columnNumbers]="{sm: 25, md: 50, lg: 75}">
109+
<p>Small: Span 25%</p>
110+
<p>Medium: Span 50%</p>
111+
<p>Large: 75%</p>
112+
</div>
113+
</div>
114+
`
115+
});
116+
export const Responsive = ResponsiveTemplate.bind({});
117+
118+
const SubgridTemplate: Story<GridDirective> = (args) => ({
119+
props: args,
120+
template: `
121+
<div
122+
cdsGrid
123+
[useCssGrid]="true"
124+
[condensed]="condensed"
125+
[narrow]="narrow"
126+
[fullWidth]="fullWidth">
127+
<div cdsCol [columnNumbers]="{sm: 2, md: 4, lg: 3}">
128+
<p>Small: Span 2 of 4</p>
129+
<p>Medium: Span 4 of 8</p>
130+
<p>Large: Span 3 of 16</p>
131+
</div>
132+
<div cdsCol [columnNumbers]="{sm: 2, md: 4, lg: 10}">
133+
<p>Small: Span 2 of 4</p>
134+
<p>Medium: Span 2 of 8</p>
135+
<p>Large: Span 10 of 16</p>
136+
<div cdsGrid>
137+
<div cdsCol [columnNumbers]="{sm: 1, md: 1, lg: 2}">
138+
<p>sm:1</p>
139+
<p>md:1</p>
140+
<p>lg:2</p>
141+
</div>
142+
<div cdsCol [columnNumbers]="{sm: 1, md: 1, lg: 2}">
143+
<p>sm:1</p>
144+
<p>md:1</p>
145+
<p>lg:2</p>
146+
</div>
147+
<div cdsCol [columnNumbers]="{sm: 0, md: 1, lg: 1}">
148+
<p>sm:0</p>
149+
<p>md:1</p>
150+
<p>lg:1</p>
151+
</div>
152+
<div cdsCol [columnNumbers]="{sm: 0, md: 1, lg: 1}">
153+
<p>sm:0</p>
154+
<p>md:1</p>
155+
<p>lg:1</p>
156+
</div>
157+
<div cdsCol [columnNumbers]="{sm: 0, md: 0, lg: 4}">
158+
<p>sm:0</p>
159+
<p>md:0</p>
160+
<p>lg:4</p>
161+
</div>
162+
</div>
163+
</div>
164+
<div cdsCol [columnNumbers]="{sm: 0, md: 0, lg: 3}">
165+
<p>Small: Span 0 of 4</p>
166+
<p>Medium: Span 0 of 8</p>
167+
<p>Large: Span 3 of 16</p>
168+
</div>
169+
</div>
170+
`
171+
});
172+
export const Subgrid = SubgridTemplate.bind({});

‎src/grid/grid.stories.ts‎

Lines changed: 133 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* tslint:disable variable-name */
22

3-
import { moduleMetadata } from "@storybook/angular";
3+
import { moduleMetadata, componentWrapperDecorator } from "@storybook/angular";
44
import { Story, Meta } from "@storybook/angular/types-6-0";
55
import {
66
GridModule,
@@ -10,49 +10,163 @@ import {
1010
} from "./";
1111

1212
export default {
13-
title: "Components/Grid",
13+
title: "Components/Grid/Flex",
1414
decorators: [
1515
moduleMetadata({
1616
imports: [GridModule]
17-
})
17+
}),
18+
componentWrapperDecorator((story) => `<div class="flex-grid-story">${story}</div>`)
1819
],
1920
component: GridDirective,
2021
subcomponents: {
2122
RowDirective,
2223
ColumnDirective
24+
},
25+
argTypes: {
26+
useCssGrid: {
27+
control: false
28+
}
2329
}
2430
} as Meta;
2531

2632
const Template: Story<GridDirective> = (args) => ({
33+
props: args,
34+
template: `
35+
<div
36+
cdsGrid
37+
[condensed]="condensed"
38+
[fullWidth]="fullWidth"
39+
[narrow]="narrow">
40+
<div cdsRow>
41+
<div cdsCol class="custom-class-example">
42+
<div class="inside">Span 25%</div>
43+
</div>
44+
<div cdsCol class="custom-class-example">
45+
<div class="inside">Span 25%</div>
46+
</div>
47+
<div cdsCol class="custom-class-example">
48+
<div class="inside">Span 25%</div>
49+
</div>
50+
<div cdsCol class="custom-class-example">
51+
<div class="inside">Span 25%</div>
52+
</div>
53+
</div>
54+
</div>
55+
`
56+
});
57+
export const Basic = Template.bind({});
58+
59+
const ResponsiveTemplate: Story<GridDirective> = (args) => ({
2760
props: args,
2861
template: `
2962
<div cdsGrid [condensed]="gridCondensed">
3063
<div
3164
cdsRow
32-
[gutter]="gutter"
3365
[condensed]="rowCondensed">
34-
<div cdsCol class="custom-class-example" [columnNumbers]="{md: 2, sm: 4}">First Column</div>
35-
<div cdsCol class="custom-class-example" [columnNumbers]="{md: 2, sm: 4}">Second column</div>
36-
<div cdsCol class="custom-class-example" [columnNumbers]="{md: 2, sm: 4}">Third Column</div>
66+
<div cdsCol class="custom-class-example" [columnNumbers]="{sm: 2, md: 4, lg: 6}">
67+
<div class="inside">
68+
<p>Small: Span 2 of 4</p>
69+
<p>Medium: Span 4 of 8</p>
70+
<p>Large: Span 6 of 16</p>
71+
</div>
72+
</div>
73+
<div cdsCol class="custom-class-example" [columnNumbers]="{sm: 2, md: 2, lg: 3}">
74+
<div class="inside">
75+
<p>Small: Span 2 of 4</p>
76+
<p>Medium: Span 2 of 8</p>
77+
<p>Large: Span 3 of 16</p>
78+
</div>
79+
</div>
80+
<div cdsCol class="custom-class-example" [columnNumbers]="{sm: 0, md: 2, lg: 3}">
81+
<div class="inside">
82+
<p>Small: Span 0 of 4</p>
83+
<p>Medium: Span 2 of 8</p>
84+
<p>Large: Span 3 of 16</p>
85+
</div>
86+
</div>
3787
</div>
3888
</div>
3989
`
4090
});
41-
export const Basic = Template.bind({});
42-
Basic.args = {
43-
gutter: true,
44-
rowCondensed: false,
45-
gridCondensed: false
46-
};
91+
export const Responsive = ResponsiveTemplate.bind({});
92+
93+
const OffsetTemplate: Story<GridDirective> = (args) => ({
94+
props: args,
95+
template: `
96+
<div
97+
cdsGrid
98+
[condensed]="condensed"
99+
[fullWidth]="fullWidth"
100+
[narrow]="narrow">
101+
<div cdsRow>
102+
<div cdsCol class="custom-class-example" [columnNumbers]="{sm: 1}" [offsets]="{sm: 3}">
103+
<div class="inside">Small: Offset 3</div>
104+
</div>
105+
<div cdsCol class="custom-class-example" [columnNumbers]="{sm: 2}" [offsets]="{sm: 2}">
106+
<div class="inside">Small: Offset 2</div>
107+
</div>
108+
<div cdsCol class="custom-class-example" [columnNumbers]="{sm: 3}" [offsets]="{sm: 1}">
109+
<div class="inside">Small: Offset 1</div>
110+
</div>
111+
<div cdsCol class="custom-class-example" [columnNumbers]="{sm: 4}" [offsets]="{sm: 0}">
112+
<div class="inside">Small: Offset -</div>
113+
</div>
114+
</div>
115+
</div>
116+
`
117+
});
118+
export const Offset = OffsetTemplate.bind({});
119+
120+
const CondensedRowTemplate: Story<GridDirective> = (args) => ({
121+
props: args,
122+
template: `
123+
<div
124+
cdsGrid
125+
[condensed]="condensed"
126+
[fullWidth]="fullWidth"
127+
[narrow]="narrow">
128+
<div cdsRow [condensed]="true">
129+
<div cdsCol class="custom-class-example">
130+
<div class="inside">Span 25%</div>
131+
</div>
132+
<div cdsCol class="custom-class-example">
133+
<div class="inside">Span 25%</div>
134+
</div>
135+
<div cdsCol class="custom-class-example">
136+
<div class="inside">Span 25%</div>
137+
</div>
138+
<div cdsCol class="custom-class-example">
139+
<div class="inside">Span 25%</div>
140+
</div>
141+
</div>
142+
</div>
143+
`
144+
});
145+
export const CondensedRow = CondensedRowTemplate.bind({});
47146

48-
const CSSGridTemplate: Story<GridDirective> = (args) => ({
147+
const NarrowRowTemplate: Story<GridDirective> = (args) => ({
49148
props: args,
50149
template: `
51-
<div cdsGrid [condensed]="gridCondensed" [useCssGrid]="true">
52-
<div cdsCol class="custom-class-example" [columnNumbers]="{md: 2, sm: 4}">First Column</div>
53-
<div cdsCol class="custom-class-example" [columnNumbers]="{md: 2, sm: 4}">Second column</div>
54-
<div cdsCol class="custom-class-example" [columnNumbers]="{md: 2, sm: 4}">Third Column</div>
150+
<div
151+
cdsGrid
152+
[condensed]="condensed"
153+
[fullWidth]="fullWidth"
154+
[narrow]="narrow">
155+
<div cdsRow [condensed]="true" [narrow]="true">
156+
<div cdsCol class="custom-class-example">
157+
<div class="inside">Span 25%</div>
158+
</div>
159+
<div cdsCol class="custom-class-example">
160+
<div class="inside">Span 25%</div>
161+
</div>
162+
<div cdsCol class="custom-class-example">
163+
<div class="inside">Span 25%</div>
164+
</div>
165+
<div cdsCol class="custom-class-example">
166+
<div class="inside">Span 25%</div>
167+
</div>
168+
</div>
55169
</div>
56170
`
57171
});
58-
export const CssGrid = CSSGridTemplate.bind({});
172+
export const NarrowRow = NarrowRowTemplate.bind({});

0 commit comments

Comments
 (0)