Skip to content

Commit 1967ebe

Browse files
PhyelePhyele
authored
Merge pull request #1 from buildo/Various-fixes
Various fixes
2 parents 6e7a4ee + fc8cbd1 commit 1967ebe

12 files changed

+318
-437
lines changed

‎package-lock.json

+4-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
"@storybook/blocks": "^8.0.9",
4646
"@storybook/test": "^8.0.9",
4747
"@types/jasmine": "~5.1.0",
48+
"@types/node": "^20.12.13",
4849
"@typescript-eslint/eslint-plugin": "7.2.0",
4950
"@typescript-eslint/parser": "7.2.0",
5051
"eslint": "^8.57.0",

‎projects/layout-components/documentation.json

+53-411
Large diffs are not rendered by default.

‎projects/layout-components/src/lib/column/column.component.scss

+112
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,115 @@
11
:host {
22
display: block;
3+
flex: 0 0 var(--column-width);
4+
}
5+
6+
:host([width="1/2"]),
7+
:host([width="2/4"]),
8+
:host([width="3/6"]),
9+
:host([width="4/8"]),
10+
:host([width="5/10"]),
11+
:host([width="6/12"]) {
12+
--column-width: calc(1 / 2 * 100%);
13+
}
14+
15+
:host([width="1/3"]),
16+
:host([width="2/6"]),
17+
:host([width="4/12"]) {
18+
--column-width: calc(1 / 3 * 100%);
19+
}
20+
21+
:host([width="2/3"]),
22+
:host([width="4/6"]),
23+
:host([width="8/12"]) {
24+
--column-width: calc(2 / 3 * 100%);
25+
}
26+
27+
:host([width="1/4"]),
28+
:host([width="2/8"]),
29+
:host([width="3/12"]) {
30+
--column-width: calc(1 / 4 * 100%);
31+
}
32+
33+
:host([width="3/4"]),
34+
:host([width="6/8"]),
35+
:host([width="9/12"]) {
36+
--column-width: calc(3 / 4 * 100%);
37+
}
38+
39+
:host([width="1/5"]),
40+
:host([width="2/10"]) {
41+
--column-width: calc(1 / 5 * 100%);
42+
}
43+
44+
:host([width="2/5"]),
45+
:host([width="4/10"]) {
46+
--column-width: calc(2 / 5 * 100%);
47+
}
48+
49+
:host([width="3/5"]),
50+
:host([width="6/10"]) {
51+
--column-width: calc(3 / 5 * 100%);
52+
}
53+
54+
:host([width="4/5"]),
55+
:host([width="8/10"]) {
56+
--column-width: calc(4 / 5 * 100%);
57+
}
58+
59+
:host([width="1/6"]),
60+
:host([width="2/12"]) {
61+
--column-width: calc(1 / 6 * 100%);
62+
}
63+
64+
:host([width="5/6"]),
65+
:host([width="10/12"]) {
66+
--column-width: calc(5 / 6 * 100%);
67+
}
68+
69+
:host([width="1/8"]) {
70+
--column-width: calc(1 / 8 * 100%);
71+
}
72+
73+
:host([width="3/8"]) {
74+
--column-width: calc(3 / 8 * 100%);
75+
}
76+
77+
:host([width="5/8"]) {
78+
--column-width: calc(5 / 8 * 100%);
79+
}
80+
81+
:host([width="7/8"]) {
82+
--column-width: calc(7 / 8 * 100%);
83+
}
84+
85+
:host([width="1/10"]) {
86+
--column-width: calc(1 / 10 * 100%);
87+
}
88+
89+
:host([width="3/10"]) {
90+
--column-width: calc(3 / 10 * 100%);
91+
}
92+
93+
:host([width="7/10"]) {
94+
--column-width: calc(7 / 10 * 100%);
95+
}
96+
97+
:host([width="9/10"]) {
98+
--column-width: calc(9 / 10 * 100%);
99+
}
100+
101+
:host([width="1/12"]) {
102+
--column-width: calc(1 / 12 * 100%);
103+
}
104+
105+
:host([width="5/12"]) {
106+
--column-width: calc(5 / 12 * 100%);
107+
}
108+
109+
:host([width="7/12"]) {
110+
--column-width: calc(7 / 12 * 100%);
111+
}
112+
113+
:host([width="11/12"]) {
114+
--column-width: calc(11 / 12 * 100%);
3115
}

‎projects/layout-components/src/lib/column/column.component.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import { Component, HostBinding, Input } from '@angular/core';
2+
import { ColumnFractionWidth } from '../common';
23

34
@Component({
45
selector: 'column',
56
standalone: true,
67
imports: [],
78
template: `<ng-content></ng-content>`,
8-
styleUrl: './column.component.scss'
9+
styleUrl: './column.component.scss',
910
})
1011
export class ColumnComponent {
11-
@HostBinding('style.width') @Input() width: string | undefined;
12+
@HostBinding('style.width') @Input() width:
13+
| string
14+
| ColumnFractionWidth
15+
| undefined;
1216
@HostBinding('style.flex-grow') @Input() flexGrow: string | undefined;
1317
}

‎projects/layout-components/src/lib/common.ts

+50
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,53 @@ export type JustifyContent =
3434
| 'space-between'
3535
| 'space-around'
3636
| 'space-evenly';
37+
38+
export type ColumnFractionWidth =
39+
| '1/2'
40+
| '1/3'
41+
| '2/3'
42+
| '1/4'
43+
| '2/4'
44+
| '3/4'
45+
| '1/5'
46+
| '2/5'
47+
| '3/5'
48+
| '4/5'
49+
| '1/6'
50+
| '2/6'
51+
| '3/6'
52+
| '4/6'
53+
| '5/6'
54+
| '1/7'
55+
| '2/7'
56+
| '3/7'
57+
| '4/7'
58+
| '5/7'
59+
| '6/7'
60+
| '1/8'
61+
| '2/8'
62+
| '3/8'
63+
| '4/8'
64+
| '5/8'
65+
| '6/8'
66+
| '7/8'
67+
| '1/10'
68+
| '2/10'
69+
| '3/10'
70+
| '4/10'
71+
| '5/10'
72+
| '6/10'
73+
| '7/10'
74+
| '8/10'
75+
| '9/10'
76+
| '1/12'
77+
| '2/12'
78+
| '3/12'
79+
| '4/12'
80+
| '5/12'
81+
| '6/12'
82+
| '7/12'
83+
| '8/12'
84+
| '9/12'
85+
| '10/12'
86+
| '11/12';

‎projects/layout-components/src/lib/stack/stack.component.css

-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
:host {
22
display: flex;
33
flex-direction: column;
4-
padding: 12px;
54
}

‎projects/layout-components/src/lib/stack/stack.component.ts

+8-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Component, HostBinding, Input } from '@angular/core';
2-
import { Properties } from 'csstype';
32
import { AlignItems, Gap, JustifyContent, Padding } from '../common';
43

54
@Component({
@@ -10,15 +9,20 @@ import { AlignItems, Gap, JustifyContent, Padding } from '../common';
109
styleUrl: './stack.component.css',
1110
})
1211
export class StackComponent {
13-
@HostBinding('style.justify-content') @Input() justifyContent: JustifyContent =
14-
'flex-start';
12+
@HostBinding('style.justify-content')
13+
@Input()
14+
justifyContent: JustifyContent = 'flex-start';
1515
@HostBinding('style.align-items')
1616
@Input()
1717
alignItems: AlignItems = 'stretch';
18+
@HostBinding('style.height')
19+
@Input()
20+
height?: string;
1821
@HostBinding('style.gap')
1922
/**
2023
* The gap between the children of the stack.
2124
*/
22-
@Input() gap: Gap = '0';
25+
@Input()
26+
gap: Gap = '0';
2327
@HostBinding('style.padding') @Input() padding: Padding = '0';
2428
}

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

+62-4
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,20 +18,20 @@ 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)}>
2627
<column width="240px">
27-
<placeholder></placeholder>
28+
<placeholder />
2829
</column>
2930
<column>
30-
<placeholder></placeholder>
31+
<placeholder />
3132
</column>
3233
<column flexGrow="1">
33-
<placeholder></placeholder>
34+
<placeholder />
3435
</column>
3536
</columns>`,
3637
}),
@@ -44,3 +45,60 @@ export const Basic: Story = {
4445
gap: '16px',
4546
},
4647
};
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)