Skip to content

Commit fc8cbd1

Browse files
gabrogabro
committed
Improve stories
1 parent fee6c36 commit fc8cbd1

File tree

3 files changed

+88
-50
lines changed

3 files changed

+88
-50
lines changed

‎projects/layout-components/src/stories/columns.stories.ts

+69-38
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
import { PlaceholderComponent } from './placeholder/placeholder.component';
88
import { ColumnsComponent } from '../lib/columns/columns.component';
99
import { ColumnComponent } from '../lib/column/column.component';
10+
import { StackComponent } from '../public-api';
1011

1112
/**
1213
* The Columns component creates horizontal layouts that don't wrap. Use the Column component to determine the column size. If not specified, Column fits its content.
@@ -17,49 +18,22 @@ const meta: Meta<typeof ColumnsComponent> = {
1718
tags: ['autodocs'],
1819
decorators: [
1920
moduleMetadata({
20-
imports: [PlaceholderComponent, ColumnComponent],
21+
imports: [PlaceholderComponent, ColumnComponent, StackComponent],
2122
}),
2223
],
2324
render: (args) => ({
2425
props: args,
2526
template: `<columns ${argsToTemplate(args)}>
26-
<column width="1/12">
27-
1
28-
</column>
29-
<column width="1/12">
30-
2
31-
</column>
32-
<column width="1/12">
33-
3
34-
</column>
35-
<column width="1/12">
36-
4
37-
</column>
38-
<column width="1/12">
39-
5
40-
</column>
41-
<column width="1/12">
42-
6
43-
</column>
44-
<column width="1/12">
45-
7
46-
</column>
47-
<column width="1/12">
48-
8
49-
</column>
50-
<column width="1/12">
51-
9
52-
</column>
53-
<column width="1/12">
54-
10
55-
</column>
56-
<column width="1/12">
57-
11
58-
</column>
59-
<column width="1/12">
60-
12
61-
</column>
62-
</columns>`,
27+
<column width="240px">
28+
<placeholder />
29+
</column>
30+
<column>
31+
<placeholder />
32+
</column>
33+
<column flexGrow="1">
34+
<placeholder />
35+
</column>
36+
</columns>`,
6337
}),
6438
};
6539
export default meta;
@@ -71,3 +45,60 @@ export const Basic: Story = {
7145
gap: '16px',
7246
},
7347
};
48+
49+
export const Fractions: Story = {
50+
args: {
51+
gap: '16px',
52+
},
53+
render: (args) => ({
54+
props: args,
55+
template: `<stack gap="32px">
56+
<columns ${argsToTemplate(args)}>
57+
<column width="2/5">
58+
<placeholder>2/5</placeholder>
59+
</column>
60+
<column width="100%">
61+
<placeholder>100%</placeholder>
62+
</column>
63+
</columns>
64+
<columns ${argsToTemplate(args)}>
65+
<column width="3/5">
66+
<placeholder>3/5</placeholder>
67+
</column>
68+
<column width="100%">
69+
<placeholder>100%</placeholder>
70+
</column>
71+
</columns>
72+
<columns ${argsToTemplate(args)}>
73+
<column width="100%">
74+
<placeholder>100%</placeholder>
75+
</column>
76+
<column width="2/3">
77+
<placeholder>2/3</placeholder>
78+
</column>
79+
</columns>
80+
<columns ${argsToTemplate(args)}>
81+
<column width="1/5">
82+
<placeholder>1/5</placeholder>
83+
</column>
84+
<column width="100%">
85+
<placeholder>100%</placeholder>
86+
</column>
87+
<column width="1/5">
88+
<placeholder>1/5</placeholder>
89+
</column>
90+
</columns>
91+
<columns ${argsToTemplate(args)}>
92+
<column width="100%">
93+
<placeholder>100%</placeholder>
94+
</column>
95+
<column width="1/6">
96+
<placeholder>1/6</placeholder>
97+
</column>
98+
<column width="100%">
99+
<placeholder>100%</placeholder>
100+
</column>
101+
</columns>
102+
</stack>`,
103+
}),
104+
};

‎projects/layout-components/src/stories/placeholder/placeholder.component.scss

+15-11
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
22

33
:host {
4-
display: flex;
5-
align-items: center;
6-
justify-content: center;
7-
background-color: #ECEFF4;
8-
color: #364459;
9-
font-family: "Poppins", sans-serif;
10-
font-weight: 400;
11-
padding: 40px;
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
background-color: #eceff4;
8+
color: #364459;
9+
font-family: "Poppins", sans-serif;
10+
font-weight: 400;
11+
padding: 40px;
1212
}
1313

1414
p {
15-
margin: 0;
16-
}
15+
margin: 0;
16+
}
17+
18+
p:not(:empty) + p.default {
19+
display: none;
20+
}

‎projects/layout-components/src/stories/placeholder/placeholder.component.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ import { Component, HostBinding, Input } from '@angular/core';
44
selector: 'placeholder',
55
standalone: true,
66
imports: [],
7-
template: `<p>Placeholder</p>`,
7+
template: `
8+
<p><ng-content></ng-content></p>
9+
<p class="default">Placeholder</p>
10+
`,
811
styleUrls: ['./placeholder.component.scss'],
912
})
1013
export class PlaceholderComponent {

0 commit comments

Comments
 (0)