From b92b988ffe2aaa72995ccda9f6fa0eceba6cb7c3 Mon Sep 17 00:00:00 2001 From: Agnese Ragucci Date: Thu, 2 May 2024 18:27:21 +0200 Subject: [PATCH] Intro page and basic example for all components --- projects/layout-components/documentation.json | 456 +++++++++++++++++- .../content-block/content-block.component.css | 3 + .../src/stories/columns.stories.ts | 46 ++ .../src/stories/content-block.stories.ts | 35 ++ .../src/stories/inline.stories.ts | 41 ++ .../src/stories/inset.stories.ts | 37 ++ .../layout-components/src/stories/intro.mdx | 39 +- .../placeholder/placeholder.component.ts | 6 +- .../src/stories/stack.stories.ts | 12 +- .../src/stories/tiles.stories.ts | 44 ++ 10 files changed, 691 insertions(+), 28 deletions(-) create mode 100644 projects/layout-components/src/stories/columns.stories.ts create mode 100644 projects/layout-components/src/stories/content-block.stories.ts create mode 100644 projects/layout-components/src/stories/inline.stories.ts create mode 100644 projects/layout-components/src/stories/inset.stories.ts create mode 100644 projects/layout-components/src/stories/tiles.stories.ts diff --git a/projects/layout-components/documentation.json b/projects/layout-components/documentation.json index bc4779c..198eeed 100644 --- a/projects/layout-components/documentation.json +++ b/projects/layout-components/documentation.json @@ -502,14 +502,44 @@ "miscellaneous": { "variables": [ { - "name": "AlignHorizontal", + "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", - "file": "projects/layout-components/src/stories/stack.stories.ts", + "file": "projects/layout-components/src/stories/columns.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Story", + "defaultValue": "{\n args: {\n gap: '16px',\n },\n}" + }, + { + "name": "Basic", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/layout-components/src/stories/content-block.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "Story", - "defaultValue": "{\n args: {\n gap: '16px',\n alignItems: 'flex-end',\n }\n}" + "defaultValue": "{\n args: {},\n}" + }, + { + "name": "Basic", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/layout-components/src/stories/inline.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Story", + "defaultValue": "{\n args: {\n gap: '16px',\n },\n}" + }, + { + "name": "Basic", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/layout-components/src/stories/inset.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Story", + "defaultValue": "{\n args: {\n padding: '40px',\n },\n}" }, { "name": "Basic", @@ -521,6 +551,64 @@ "type": "Story", "defaultValue": "{\n args: {\n gap: '16px',\n },\n}" }, + { + "name": "Basic", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/layout-components/src/stories/tiles.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Story", + "defaultValue": "{\n args: {\n gap: '16px',\n },\n}" + }, + { + "name": "meta", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/layout-components/src/stories/columns.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Meta<>", + "defaultValue": "{\n title: 'Components/Stack',\n component: ColumnsComponent,\n tags: ['autodocs'],\n decorators: [\n moduleMetadata({\n imports: [PlaceholderComponent],\n }),\n ],\n render: (args) => ({\n props: args,\n template: `\n \n \n \n `,\n }),\n}", + "rawdescription": "## Columns & Column\nThe 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.", + "description": "

Columns & Column

\n

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.

\n" + }, + { + "name": "meta", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/layout-components/src/stories/content-block.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Meta<>", + "defaultValue": "{\n title: 'Components/Stack',\n component: ContentBlockComponent,\n tags: ['autodocs'],\n render: (args) => ({\n props: args,\n template: `\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n `,\n }),\n}", + "rawdescription": "## Content Block\nThe Content Block component limits the maximum width of their children.", + "description": "

Content Block

\n

The Content Block component limits the maximum width of their children.

\n" + }, + { + "name": "meta", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/layout-components/src/stories/inline.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Meta<>", + "defaultValue": "{\n title: 'Components/Stack',\n component: InlineComponent,\n tags: ['autodocs'],\n decorators: [\n moduleMetadata({\n imports: [PlaceholderComponent],\n }),\n ],\n render: (args) => ({\n props: args,\n template: `\n \n \n \n `,\n }),\n}", + "rawdescription": "## Inline\nThe Inline component is used to create horizontally flowing layouts, which wrap across multiple lines if necessary.", + "description": "

Inline

\n

The Inline component is used to create horizontally flowing layouts, which wrap across multiple lines if necessary.

\n" + }, + { + "name": "meta", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/layout-components/src/stories/inset.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Meta<>", + "defaultValue": "{\n title: 'Components/Inset',\n component: InsetComponent,\n tags: ['autodocs'],\n decorators: [\n moduleMetadata({\n imports: [PlaceholderComponent],\n }),\n ],\n render: (args) => ({\n props: args,\n template: `\n \n `,\n }),\n}", + "rawdescription": "## Inset\nThe Inset component creates a container with padding.", + "description": "

Inset

\n

The Inset component creates a container with padding.

\n" + }, { "name": "meta", "ctype": "miscellaneous", @@ -529,7 +617,21 @@ "deprecated": false, "deprecationMessage": "", "type": "Meta<>", - "defaultValue": "{\n title: 'Components/Stack',\n component: StackComponent,\n tags: ['autodocs'],\n decorators: [\n moduleMetadata({\n imports: [PlaceholderComponent],\n }),\n ],\n render: (args) => ({\n props: args,\n template: `\n \n \n \n `,\n }),\n}" + "defaultValue": "{\n title: 'Components/Stack',\n component: StackComponent,\n tags: ['autodocs'],\n decorators: [\n moduleMetadata({\n imports: [PlaceholderComponent],\n }),\n ],\n render: (args) => ({\n props: args,\n template: `\n \n \n \n `,\n }),\n}", + "rawdescription": "## Stack\nThe Stack component is used to arrange its children vertically.", + "description": "

Stack

\n

The Stack component is used to arrange its children vertically.

\n" + }, + { + "name": "meta", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/layout-components/src/stories/tiles.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Meta<>", + "defaultValue": "{\n title: 'Components/Stack',\n component: TilesComponent,\n tags: ['autodocs'],\n decorators: [\n moduleMetadata({\n imports: [PlaceholderComponent],\n }),\n ],\n render: (args) => ({\n props: args,\n template: `\n \n \n \n `,\n }),\n}", + "rawdescription": "## Tiles\nThe Tiles component is used to create grid-like layouts.", + "description": "

Tiles

\n

The Tiles component is used to create grid-like layouts.

\n" } ], "functions": [], @@ -589,6 +691,50 @@ "description": "", "kind": 192 }, + { + "name": "Story", + "ctype": "miscellaneous", + "subtype": "typealias", + "rawtype": "StoryObj", + "file": "projects/layout-components/src/stories/columns.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "kind": 183 + }, + { + "name": "Story", + "ctype": "miscellaneous", + "subtype": "typealias", + "rawtype": "StoryObj", + "file": "projects/layout-components/src/stories/content-block.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "kind": 183 + }, + { + "name": "Story", + "ctype": "miscellaneous", + "subtype": "typealias", + "rawtype": "StoryObj", + "file": "projects/layout-components/src/stories/inline.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "kind": 183 + }, + { + "name": "Story", + "ctype": "miscellaneous", + "subtype": "typealias", + "rawtype": "StoryObj", + "file": "projects/layout-components/src/stories/inset.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "kind": 183 + }, { "name": "Story", "ctype": "miscellaneous", @@ -599,21 +745,118 @@ "deprecationMessage": "", "description": "", "kind": 183 + }, + { + "name": "Story", + "ctype": "miscellaneous", + "subtype": "typealias", + "rawtype": "StoryObj", + "file": "projects/layout-components/src/stories/tiles.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "kind": 183 } ], "enumerations": [], "groupedVariables": { - "projects/layout-components/src/stories/stack.stories.ts": [ + "projects/layout-components/src/stories/columns.stories.ts": [ { - "name": "AlignHorizontal", + "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", - "file": "projects/layout-components/src/stories/stack.stories.ts", + "file": "projects/layout-components/src/stories/columns.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "Story", - "defaultValue": "{\n args: {\n gap: '16px',\n alignItems: 'flex-end',\n }\n}" + "defaultValue": "{\n args: {\n gap: '16px',\n },\n}" }, + { + "name": "meta", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/layout-components/src/stories/columns.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Meta<>", + "defaultValue": "{\n title: 'Components/Stack',\n component: ColumnsComponent,\n tags: ['autodocs'],\n decorators: [\n moduleMetadata({\n imports: [PlaceholderComponent],\n }),\n ],\n render: (args) => ({\n props: args,\n template: `\n \n \n \n `,\n }),\n}", + "rawdescription": "## Columns & Column\nThe 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.", + "description": "

Columns & Column

\n

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.

\n" + } + ], + "projects/layout-components/src/stories/content-block.stories.ts": [ + { + "name": "Basic", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/layout-components/src/stories/content-block.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Story", + "defaultValue": "{\n args: {},\n}" + }, + { + "name": "meta", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/layout-components/src/stories/content-block.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Meta<>", + "defaultValue": "{\n title: 'Components/Stack',\n component: ContentBlockComponent,\n tags: ['autodocs'],\n render: (args) => ({\n props: args,\n template: `\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n `,\n }),\n}", + "rawdescription": "## Content Block\nThe Content Block component limits the maximum width of their children.", + "description": "

Content Block

\n

The Content Block component limits the maximum width of their children.

\n" + } + ], + "projects/layout-components/src/stories/inline.stories.ts": [ + { + "name": "Basic", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/layout-components/src/stories/inline.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Story", + "defaultValue": "{\n args: {\n gap: '16px',\n },\n}" + }, + { + "name": "meta", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/layout-components/src/stories/inline.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Meta<>", + "defaultValue": "{\n title: 'Components/Stack',\n component: InlineComponent,\n tags: ['autodocs'],\n decorators: [\n moduleMetadata({\n imports: [PlaceholderComponent],\n }),\n ],\n render: (args) => ({\n props: args,\n template: `\n \n \n \n `,\n }),\n}", + "rawdescription": "## Inline\nThe Inline component is used to create horizontally flowing layouts, which wrap across multiple lines if necessary.", + "description": "

Inline

\n

The Inline component is used to create horizontally flowing layouts, which wrap across multiple lines if necessary.

\n" + } + ], + "projects/layout-components/src/stories/inset.stories.ts": [ + { + "name": "Basic", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/layout-components/src/stories/inset.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Story", + "defaultValue": "{\n args: {\n padding: '40px',\n },\n}" + }, + { + "name": "meta", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/layout-components/src/stories/inset.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Meta<>", + "defaultValue": "{\n title: 'Components/Inset',\n component: InsetComponent,\n tags: ['autodocs'],\n decorators: [\n moduleMetadata({\n imports: [PlaceholderComponent],\n }),\n ],\n render: (args) => ({\n props: args,\n template: `\n \n `,\n }),\n}", + "rawdescription": "## Inset\nThe Inset component creates a container with padding.", + "description": "

Inset

\n

The Inset component creates a container with padding.

\n" + } + ], + "projects/layout-components/src/stories/stack.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", @@ -632,7 +875,33 @@ "deprecated": false, "deprecationMessage": "", "type": "Meta<>", - "defaultValue": "{\n title: 'Components/Stack',\n component: StackComponent,\n tags: ['autodocs'],\n decorators: [\n moduleMetadata({\n imports: [PlaceholderComponent],\n }),\n ],\n render: (args) => ({\n props: args,\n template: `\n \n \n \n `,\n }),\n}" + "defaultValue": "{\n title: 'Components/Stack',\n component: StackComponent,\n tags: ['autodocs'],\n decorators: [\n moduleMetadata({\n imports: [PlaceholderComponent],\n }),\n ],\n render: (args) => ({\n props: args,\n template: `\n \n \n \n `,\n }),\n}", + "rawdescription": "## Stack\nThe Stack component is used to arrange its children vertically.", + "description": "

Stack

\n

The Stack component is used to arrange its children vertically.

\n" + } + ], + "projects/layout-components/src/stories/tiles.stories.ts": [ + { + "name": "Basic", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/layout-components/src/stories/tiles.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Story", + "defaultValue": "{\n args: {\n gap: '16px',\n },\n}" + }, + { + "name": "meta", + "ctype": "miscellaneous", + "subtype": "variable", + "file": "projects/layout-components/src/stories/tiles.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "type": "Meta<>", + "defaultValue": "{\n title: 'Components/Stack',\n component: TilesComponent,\n tags: ['autodocs'],\n decorators: [\n moduleMetadata({\n imports: [PlaceholderComponent],\n }),\n ],\n render: (args) => ({\n props: args,\n template: `\n \n \n \n `,\n }),\n}", + "rawdescription": "## Tiles\nThe Tiles component is used to create grid-like layouts.", + "description": "

Tiles

\n

The Tiles component is used to create grid-like layouts.

\n" } ] }, @@ -696,6 +965,58 @@ "kind": 192 } ], + "projects/layout-components/src/stories/columns.stories.ts": [ + { + "name": "Story", + "ctype": "miscellaneous", + "subtype": "typealias", + "rawtype": "StoryObj", + "file": "projects/layout-components/src/stories/columns.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "kind": 183 + } + ], + "projects/layout-components/src/stories/content-block.stories.ts": [ + { + "name": "Story", + "ctype": "miscellaneous", + "subtype": "typealias", + "rawtype": "StoryObj", + "file": "projects/layout-components/src/stories/content-block.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "kind": 183 + } + ], + "projects/layout-components/src/stories/inline.stories.ts": [ + { + "name": "Story", + "ctype": "miscellaneous", + "subtype": "typealias", + "rawtype": "StoryObj", + "file": "projects/layout-components/src/stories/inline.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "kind": 183 + } + ], + "projects/layout-components/src/stories/inset.stories.ts": [ + { + "name": "Story", + "ctype": "miscellaneous", + "subtype": "typealias", + "rawtype": "StoryObj", + "file": "projects/layout-components/src/stories/inset.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "kind": 183 + } + ], "projects/layout-components/src/stories/stack.stories.ts": [ { "name": "Story", @@ -708,13 +1029,26 @@ "description": "", "kind": 183 } + ], + "projects/layout-components/src/stories/tiles.stories.ts": [ + { + "name": "Story", + "ctype": "miscellaneous", + "subtype": "typealias", + "rawtype": "StoryObj", + "file": "projects/layout-components/src/stories/tiles.stories.ts", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "kind": 183 + } ] } }, "routes": [], "coverage": { - "count": 0, - "status": "low", + "count": 30, + "status": "medium", "files": [ { "filePath": "projects/layout-components/src/lib/column/column.component.ts", @@ -779,6 +1113,86 @@ "coverageCount": "0/5", "status": "low" }, + { + "filePath": "projects/layout-components/src/stories/columns.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "Basic", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, + { + "filePath": "projects/layout-components/src/stories/columns.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "meta", + "coveragePercent": 100, + "coverageCount": "1/1", + "status": "very-good" + }, + { + "filePath": "projects/layout-components/src/stories/content-block.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "Basic", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, + { + "filePath": "projects/layout-components/src/stories/content-block.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "meta", + "coveragePercent": 100, + "coverageCount": "1/1", + "status": "very-good" + }, + { + "filePath": "projects/layout-components/src/stories/inline.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "Basic", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, + { + "filePath": "projects/layout-components/src/stories/inline.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "meta", + "coveragePercent": 100, + "coverageCount": "1/1", + "status": "very-good" + }, + { + "filePath": "projects/layout-components/src/stories/inset.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "Basic", + "coveragePercent": 0, + "coverageCount": "0/1", + "status": "low" + }, + { + "filePath": "projects/layout-components/src/stories/inset.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", + "name": "meta", + "coveragePercent": 100, + "coverageCount": "1/1", + "status": "very-good" + }, { "filePath": "projects/layout-components/src/stories/placeholder/placeholder.component.ts", "type": "component", @@ -793,7 +1207,7 @@ "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", - "name": "AlignHorizontal", + "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" @@ -803,20 +1217,30 @@ "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", + "name": "meta", + "coveragePercent": 100, + "coverageCount": "1/1", + "status": "very-good" + }, + { + "filePath": "projects/layout-components/src/stories/tiles.stories.ts", + "type": "variable", + "linktype": "miscellaneous", + "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { - "filePath": "projects/layout-components/src/stories/stack.stories.ts", + "filePath": "projects/layout-components/src/stories/tiles.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "meta", - "coveragePercent": 0, - "coverageCount": "0/1", - "status": "low" + "coveragePercent": 100, + "coverageCount": "1/1", + "status": "very-good" } ] } diff --git a/projects/layout-components/src/lib/content-block/content-block.component.css b/projects/layout-components/src/lib/content-block/content-block.component.css index e69de29..f09d325 100644 --- a/projects/layout-components/src/lib/content-block/content-block.component.css +++ b/projects/layout-components/src/lib/content-block/content-block.component.css @@ -0,0 +1,3 @@ +:host { + display: block; +} \ No newline at end of file diff --git a/projects/layout-components/src/stories/columns.stories.ts b/projects/layout-components/src/stories/columns.stories.ts new file mode 100644 index 0000000..848473f --- /dev/null +++ b/projects/layout-components/src/stories/columns.stories.ts @@ -0,0 +1,46 @@ +import { + argsToTemplate, + moduleMetadata, + type Meta, + type StoryObj, +} from '@storybook/angular'; +import { PlaceholderComponent } from './placeholder/placeholder.component'; +import { ColumnsComponent } from '../lib/columns/columns.component'; +import { ColumnComponent } from '../lib/column/column.component'; + +/** + * 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. + */ +const meta: Meta = { + title: 'Components/Columns', + component: ColumnsComponent, + tags: ['autodocs'], + decorators: [ + moduleMetadata({ + imports: [PlaceholderComponent, ColumnComponent], + }), + ], + render: (args) => ({ + props: args, + template: ` + + + + + + + + + + `, + }), +}; +export default meta; + +type Story = StoryObj; + +export const Basic: Story = { + args: { + gap: '16px', + }, +}; diff --git a/projects/layout-components/src/stories/content-block.stories.ts b/projects/layout-components/src/stories/content-block.stories.ts new file mode 100644 index 0000000..33de821 --- /dev/null +++ b/projects/layout-components/src/stories/content-block.stories.ts @@ -0,0 +1,35 @@ +import { + argsToTemplate, + moduleMetadata, + type Meta, + type StoryObj, +} from '@storybook/angular'; +import { PlaceholderComponent } from './placeholder/placeholder.component'; +import { ContentBlockComponent } from '../lib/content-block/content-block.component'; + +/** + * The Content Block component limits the maximum width of their children. + */ +const meta: Meta = { + title: 'Components/Content Block', + component: ContentBlockComponent, + tags: ['autodocs'], + decorators: [ + moduleMetadata({ + imports: [PlaceholderComponent], + }), + ], + render: (args) => ({ + props: args, + template: ` + + `, + }), +}; +export default meta; + +type Story = StoryObj; + +export const Basic: Story = { + args: {}, +}; diff --git a/projects/layout-components/src/stories/inline.stories.ts b/projects/layout-components/src/stories/inline.stories.ts new file mode 100644 index 0000000..6f3a093 --- /dev/null +++ b/projects/layout-components/src/stories/inline.stories.ts @@ -0,0 +1,41 @@ +import { + argsToTemplate, + moduleMetadata, + type Meta, + type StoryObj, +} from '@storybook/angular'; +import { PlaceholderComponent } from './placeholder/placeholder.component'; +import { InlineComponent } from '../lib/inline/inline.component'; + +/** + * The Inline component is used to create horizontally flowing layouts, which wrap across multiple lines if necessary. + */ +const meta: Meta = { + title: 'Components/Inline', + component: InlineComponent, + tags: ['autodocs'], + decorators: [ + moduleMetadata({ + imports: [PlaceholderComponent], + }), + ], + render: (args) => ({ + props: args, + template: ` + + + + + + `, + }), +}; +export default meta; + +type Story = StoryObj; + +export const Basic: Story = { + args: { + gap: '16px', + }, +}; diff --git a/projects/layout-components/src/stories/inset.stories.ts b/projects/layout-components/src/stories/inset.stories.ts new file mode 100644 index 0000000..281f87a --- /dev/null +++ b/projects/layout-components/src/stories/inset.stories.ts @@ -0,0 +1,37 @@ +import { + argsToTemplate, + moduleMetadata, + type Meta, + type StoryObj, +} from '@storybook/angular'; +import { PlaceholderComponent } from './placeholder/placeholder.component'; +import { InsetComponent } from '../lib/inset/inset.component'; + +/** + * The Inset component creates a container with padding. + */ +const meta: Meta = { + title: 'Components/Inset', + component: InsetComponent, + tags: ['autodocs'], + decorators: [ + moduleMetadata({ + imports: [PlaceholderComponent], + }), + ], + render: (args) => ({ + props: args, + template: ` + + `, + }), +}; +export default meta; + +type Story = StoryObj; + +export const Basic: Story = { + args: { + padding: '40px', + }, +}; diff --git a/projects/layout-components/src/stories/intro.mdx b/projects/layout-components/src/stories/intro.mdx index 41e2476..2f827a7 100644 --- a/projects/layout-components/src/stories/intro.mdx +++ b/projects/layout-components/src/stories/intro.mdx @@ -1,8 +1,43 @@ -import { Meta, Canvas } from "@storybook/blocks"; +import { Meta, Title, Subtitle, Description, Canvas } from "@storybook/blocks"; +import * as InsetStories from "./inset.stories"; import * as StackStories from "./stack.stories"; +import * as InlineStories from "./inline.stories"; +import * as ColumnsStories from "./columns.stories"; +import * as TilesStories from "./tiles.stories"; +import * as ContentBlockStories from "./content-block.stories"; -Per esempio lo Stack si usa così: +Layout components +Layout components are containers that represent the most common spacing and alignment +rules that are usually employed in constructing an interface. +## Inset + + + + +## Stack + + + +## Inline + + + + +## Columns & Column + + + + +## Tiles + + + + +## Content Block + + + diff --git a/projects/layout-components/src/stories/placeholder/placeholder.component.ts b/projects/layout-components/src/stories/placeholder/placeholder.component.ts index 634392c..183207b 100644 --- a/projects/layout-components/src/stories/placeholder/placeholder.component.ts +++ b/projects/layout-components/src/stories/placeholder/placeholder.component.ts @@ -5,8 +5,10 @@ import { Component, HostBinding, Input } from '@angular/core'; standalone: true, imports: [], template: `

Placeholder

`, - styleUrls: ['./placeholder.component.scss'] + styleUrls: ['./placeholder.component.scss'], }) export class PlaceholderComponent { - @HostBinding('style.width') @Input({ required: true }) width: string | undefined; + @HostBinding('style.width') @Input({ required: true }) width: + | string + | undefined; } diff --git a/projects/layout-components/src/stories/stack.stories.ts b/projects/layout-components/src/stories/stack.stories.ts index 64f609a..08e4ded 100644 --- a/projects/layout-components/src/stories/stack.stories.ts +++ b/projects/layout-components/src/stories/stack.stories.ts @@ -4,9 +4,12 @@ import { type Meta, type StoryObj, } from '@storybook/angular'; -import { StackComponent } from '../lib/stack/stack.component'; import { PlaceholderComponent } from './placeholder/placeholder.component'; +import { StackComponent } from '../lib/stack/stack.component'; +/** + * The Stack component is used to arrange its children vertically. + */ const meta: Meta = { title: 'Components/Stack', component: StackComponent, @@ -34,10 +37,3 @@ export const Basic: Story = { gap: '16px', }, }; - -export const AlignHorizontal: Story = { - args: { - gap: '16px', - alignItems: 'flex-end', - } -} diff --git a/projects/layout-components/src/stories/tiles.stories.ts b/projects/layout-components/src/stories/tiles.stories.ts new file mode 100644 index 0000000..4edc6c7 --- /dev/null +++ b/projects/layout-components/src/stories/tiles.stories.ts @@ -0,0 +1,44 @@ +import { + argsToTemplate, + moduleMetadata, + type Meta, + type StoryObj, +} from '@storybook/angular'; +import { PlaceholderComponent } from './placeholder/placeholder.component'; +import { TilesComponent } from '../lib/tiles/tiles.component'; + +/** + * The Tiles component is used to create grid-like layouts. + */ +const meta: Meta = { + title: 'Components/Tiles', + component: TilesComponent, + tags: ['autodocs'], + decorators: [ + moduleMetadata({ + imports: [PlaceholderComponent], + }), + ], + render: (args) => ({ + props: args, + template: ` + + + + + + + + + `, + }), +}; +export default meta; + +type Story = StoryObj; + +export const Basic: Story = { + args: { + gap: '16px', + }, +};