Skip to content

Commit b92b988

Browse files
PhyelePhyele
committed
Intro page and basic example for all components
1 parent a706b71 commit b92b988

10 files changed

+691
-28
lines changed

Diff for: ‎projects/layout-components/documentation.json

+440-16
Large diffs are not rendered by default.

Diff for: ‎projects/layout-components/src/lib/content-block/content-block.component.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:host {
2+
display: block;
3+
}

Diff for: ‎projects/layout-components/src/stories/columns.stories.ts

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import {
2+
argsToTemplate,
3+
moduleMetadata,
4+
type Meta,
5+
type StoryObj,
6+
} from '@storybook/angular';
7+
import { PlaceholderComponent } from './placeholder/placeholder.component';
8+
import { ColumnsComponent } from '../lib/columns/columns.component';
9+
import { ColumnComponent } from '../lib/column/column.component';
10+
11+
/**
12+
* 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.
13+
*/
14+
const meta: Meta<typeof ColumnsComponent> = {
15+
title: 'Components/Columns',
16+
component: ColumnsComponent,
17+
tags: ['autodocs'],
18+
decorators: [
19+
moduleMetadata({
20+
imports: [PlaceholderComponent, ColumnComponent],
21+
}),
22+
],
23+
render: (args) => ({
24+
props: args,
25+
template: `<columns ${argsToTemplate(args)}>
26+
<column width="240px">
27+
<placeholder></placeholder>
28+
</column>
29+
<column>
30+
<placeholder></placeholder>
31+
</column>
32+
<column flexGrow="1">
33+
<placeholder></placeholder>
34+
</column>
35+
</columns>`,
36+
}),
37+
};
38+
export default meta;
39+
40+
type Story = StoryObj<ColumnsComponent>;
41+
42+
export const Basic: Story = {
43+
args: {
44+
gap: '16px',
45+
},
46+
};

Diff for: ‎projects/layout-components/src/stories/content-block.stories.ts

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import {
2+
argsToTemplate,
3+
moduleMetadata,
4+
type Meta,
5+
type StoryObj,
6+
} from '@storybook/angular';
7+
import { PlaceholderComponent } from './placeholder/placeholder.component';
8+
import { ContentBlockComponent } from '../lib/content-block/content-block.component';
9+
10+
/**
11+
* The Content Block component limits the maximum width of their children.
12+
*/
13+
const meta: Meta<typeof ContentBlockComponent> = {
14+
title: 'Components/Content Block',
15+
component: ContentBlockComponent,
16+
tags: ['autodocs'],
17+
decorators: [
18+
moduleMetadata({
19+
imports: [PlaceholderComponent],
20+
}),
21+
],
22+
render: (args) => ({
23+
props: args,
24+
template: `<content-block ${argsToTemplate(args)}>
25+
<placeholder></placeholder>
26+
</content-block>`,
27+
}),
28+
};
29+
export default meta;
30+
31+
type Story = StoryObj<ContentBlockComponent>;
32+
33+
export const Basic: Story = {
34+
args: {},
35+
};

Diff for: ‎projects/layout-components/src/stories/inline.stories.ts

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import {
2+
argsToTemplate,
3+
moduleMetadata,
4+
type Meta,
5+
type StoryObj,
6+
} from '@storybook/angular';
7+
import { PlaceholderComponent } from './placeholder/placeholder.component';
8+
import { InlineComponent } from '../lib/inline/inline.component';
9+
10+
/**
11+
* The Inline component is used to create horizontally flowing layouts, which wrap across multiple lines if necessary.
12+
*/
13+
const meta: Meta<typeof InlineComponent> = {
14+
title: 'Components/Inline',
15+
component: InlineComponent,
16+
tags: ['autodocs'],
17+
decorators: [
18+
moduleMetadata({
19+
imports: [PlaceholderComponent],
20+
}),
21+
],
22+
render: (args) => ({
23+
props: args,
24+
template: `<inline ${argsToTemplate(args)}>
25+
<placeholder width="120px"></placeholder>
26+
<placeholder width="240px"></placeholder>
27+
<placeholder width="160px"></placeholder>
28+
<placeholder width="320px"></placeholder>
29+
<placeholder width="120px"></placeholder>
30+
</inline>`,
31+
}),
32+
};
33+
export default meta;
34+
35+
type Story = StoryObj<InlineComponent>;
36+
37+
export const Basic: Story = {
38+
args: {
39+
gap: '16px',
40+
},
41+
};

Diff for: ‎projects/layout-components/src/stories/inset.stories.ts

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import {
2+
argsToTemplate,
3+
moduleMetadata,
4+
type Meta,
5+
type StoryObj,
6+
} from '@storybook/angular';
7+
import { PlaceholderComponent } from './placeholder/placeholder.component';
8+
import { InsetComponent } from '../lib/inset/inset.component';
9+
10+
/**
11+
* The Inset component creates a container with padding.
12+
*/
13+
const meta: Meta<typeof InsetComponent> = {
14+
title: 'Components/Inset',
15+
component: InsetComponent,
16+
tags: ['autodocs'],
17+
decorators: [
18+
moduleMetadata({
19+
imports: [PlaceholderComponent],
20+
}),
21+
],
22+
render: (args) => ({
23+
props: args,
24+
template: `<inset ${argsToTemplate(args)}>
25+
<placeholder></placeholder>
26+
</inset>`,
27+
}),
28+
};
29+
export default meta;
30+
31+
type Story = StoryObj<InsetComponent>;
32+
33+
export const Basic: Story = {
34+
args: {
35+
padding: '40px',
36+
},
37+
};

Diff for: ‎projects/layout-components/src/stories/intro.mdx

+37-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,43 @@
1-
import { Meta, Canvas } from "@storybook/blocks";
1+
import { Meta, Title, Subtitle, Description, Canvas } from "@storybook/blocks";
2+
import * as InsetStories from "./inset.stories";
23
import * as StackStories from "./stack.stories";
4+
import * as InlineStories from "./inline.stories";
5+
import * as ColumnsStories from "./columns.stories";
6+
import * as TilesStories from "./tiles.stories";
7+
import * as ContentBlockStories from "./content-block.stories";
38

49
<Meta title="Intro" />
510

6-
Per esempio lo Stack si usa così:
11+
<Title>Layout components</Title>
12+
Layout components are containers that represent the most common spacing and alignment
13+
rules that are usually employed in constructing an interface.
714

15+
## Inset
16+
17+
<Description of={InsetStories} />
18+
<Canvas of={InsetStories.Basic} />
19+
20+
## Stack
21+
22+
<Description of={StackStories} />
823
<Canvas of={StackStories.Basic} />
24+
25+
## Inline
26+
27+
<Description of={InlineStories} />
28+
<Canvas of={InlineStories.Basic} />
29+
30+
## Columns & Column
31+
32+
<Description of={ColumnsStories} />
33+
<Canvas of={ColumnsStories.Basic} />
34+
35+
## Tiles
36+
37+
<Description of={TilesStories} />
38+
<Canvas of={TilesStories.Basic} />
39+
40+
## Content Block
41+
42+
<Description of={ContentBlockStories} />
43+
<Canvas of={ContentBlockStories.Basic} />

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

+4-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ import { Component, HostBinding, Input } from '@angular/core';
55
standalone: true,
66
imports: [],
77
template: `<p>Placeholder</p>`,
8-
styleUrls: ['./placeholder.component.scss']
8+
styleUrls: ['./placeholder.component.scss'],
99
})
1010
export class PlaceholderComponent {
11-
@HostBinding('style.width') @Input({ required: true }) width: string | undefined;
11+
@HostBinding('style.width') @Input({ required: true }) width:
12+
| string
13+
| undefined;
1214
}

Diff for: ‎projects/layout-components/src/stories/stack.stories.ts

+4-8
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,12 @@ import {
44
type Meta,
55
type StoryObj,
66
} from '@storybook/angular';
7-
import { StackComponent } from '../lib/stack/stack.component';
87
import { PlaceholderComponent } from './placeholder/placeholder.component';
8+
import { StackComponent } from '../lib/stack/stack.component';
99

10+
/**
11+
* The Stack component is used to arrange its children vertically.
12+
*/
1013
const meta: Meta<typeof StackComponent> = {
1114
title: 'Components/Stack',
1215
component: StackComponent,
@@ -34,10 +37,3 @@ export const Basic: Story = {
3437
gap: '16px',
3538
},
3639
};
37-
38-
export const AlignHorizontal: Story = {
39-
args: {
40-
gap: '16px',
41-
alignItems: 'flex-end',
42-
}
43-
}

Diff for: ‎projects/layout-components/src/stories/tiles.stories.ts

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import {
2+
argsToTemplate,
3+
moduleMetadata,
4+
type Meta,
5+
type StoryObj,
6+
} from '@storybook/angular';
7+
import { PlaceholderComponent } from './placeholder/placeholder.component';
8+
import { TilesComponent } from '../lib/tiles/tiles.component';
9+
10+
/**
11+
* The Tiles component is used to create grid-like layouts.
12+
*/
13+
const meta: Meta<typeof TilesComponent> = {
14+
title: 'Components/Tiles',
15+
component: TilesComponent,
16+
tags: ['autodocs'],
17+
decorators: [
18+
moduleMetadata({
19+
imports: [PlaceholderComponent],
20+
}),
21+
],
22+
render: (args) => ({
23+
props: args,
24+
template: `<tiles ${argsToTemplate(args)}>
25+
<placeholder></placeholder>
26+
<placeholder></placeholder>
27+
<placeholder></placeholder>
28+
<placeholder></placeholder>
29+
<placeholder></placeholder>
30+
<placeholder></placeholder>
31+
<placeholder></placeholder>
32+
<placeholder></placeholder>
33+
</tiles>`,
34+
}),
35+
};
36+
export default meta;
37+
38+
type Story = StoryObj<TilesComponent>;
39+
40+
export const Basic: Story = {
41+
args: {
42+
gap: '16px',
43+
},
44+
};

0 commit comments

Comments
 (0)