From 49ab74ad408f4c012b2ba9129967c011781213b1 Mon Sep 17 00:00:00 2001 From: Agnese Ragucci Date: Mon, 3 Jun 2024 12:17:31 +0200 Subject: [PATCH 1/4] Stack - Added height and instruction for building sidebars --- .../src/lib/stack/stack.component.css | 1 - .../src/lib/stack/stack.component.ts | 12 ++++++++---- .../layout-components/src/stories/stack.stories.ts | 3 +++ 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/projects/layout-components/src/lib/stack/stack.component.css b/projects/layout-components/src/lib/stack/stack.component.css index cb8f16f..1637f87 100644 --- a/projects/layout-components/src/lib/stack/stack.component.css +++ b/projects/layout-components/src/lib/stack/stack.component.css @@ -1,5 +1,4 @@ :host { display: flex; flex-direction: column; - padding: 12px; } \ No newline at end of file diff --git a/projects/layout-components/src/lib/stack/stack.component.ts b/projects/layout-components/src/lib/stack/stack.component.ts index 52b198a..903febf 100644 --- a/projects/layout-components/src/lib/stack/stack.component.ts +++ b/projects/layout-components/src/lib/stack/stack.component.ts @@ -1,5 +1,4 @@ import { Component, HostBinding, Input } from '@angular/core'; -import { Properties } from 'csstype'; import { AlignItems, Gap, JustifyContent, Padding } from '../common'; @Component({ @@ -10,15 +9,20 @@ import { AlignItems, Gap, JustifyContent, Padding } from '../common'; styleUrl: './stack.component.css', }) export class StackComponent { - @HostBinding('style.justify-content') @Input() justifyContent: JustifyContent = - 'flex-start'; + @HostBinding('style.justify-content') + @Input() + justifyContent: JustifyContent = 'flex-start'; @HostBinding('style.align-items') @Input() alignItems: AlignItems = 'stretch'; + @HostBinding('style.height') + @Input() + height?: string; @HostBinding('style.gap') /** * The gap between the children of the stack. */ - @Input() gap: Gap = '0'; + @Input() + gap: Gap = '0'; @HostBinding('style.padding') @Input() padding: Padding = '0'; } diff --git a/projects/layout-components/src/stories/stack.stories.ts b/projects/layout-components/src/stories/stack.stories.ts index 08e4ded..6e29acc 100644 --- a/projects/layout-components/src/stories/stack.stories.ts +++ b/projects/layout-components/src/stories/stack.stories.ts @@ -9,6 +9,8 @@ import { StackComponent } from '../lib/stack/stack.component'; /** * The Stack component is used to arrange its children vertically. + * + * If you want to create a sidebar, Stack is the most suitable component. Set [height]="100%" on Stack and do the same with all its parents. If you want a child of the Stack to grow to cover a specific portion of the available space, set a flex-grow on it. */ const meta: Meta = { title: 'Components/Stack', @@ -35,5 +37,6 @@ type Story = StoryObj; export const Basic: Story = { args: { gap: '16px', + height: '100%', }, }; From 3679c6d57abcbac4f58cce9303012c6624d5bf36 Mon Sep 17 00:00:00 2001 From: Agnese Ragucci Date: Tue, 4 Jun 2024 10:42:17 +0200 Subject: [PATCH 2/4] Fix to run the project locally --- package-lock.json | 7 ++++--- package.json | 1 + 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 28b3f37..184259b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,6 +40,7 @@ "@storybook/blocks": "^8.0.9", "@storybook/test": "^8.0.9", "@types/jasmine": "~5.1.0", + "@types/node": "^20.12.13", "@typescript-eslint/eslint-plugin": "7.2.0", "@typescript-eslint/parser": "7.2.0", "eslint": "^8.57.0", @@ -7893,9 +7894,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "20.12.7", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz", - "integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==", + "version": "20.12.13", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.13.tgz", + "integrity": "sha512-gBGeanV41c1L171rR7wjbMiEpEI/l5XFQdLLfhr/REwpgDy/4U8y89+i8kRiLzDyZdOkXh+cRaTetUnCYutoXA==", "dev": true, "dependencies": { "undici-types": "~5.26.4" diff --git a/package.json b/package.json index 1a97c6d..291b137 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "@storybook/blocks": "^8.0.9", "@storybook/test": "^8.0.9", "@types/jasmine": "~5.1.0", + "@types/node": "^20.12.13", "@typescript-eslint/eslint-plugin": "7.2.0", "@typescript-eslint/parser": "7.2.0", "eslint": "^8.57.0", From fee6c36d6cb0b86f222ee9c19ba17481ed4199b8 Mon Sep 17 00:00:00 2001 From: Agnese Ragucci Date: Tue, 4 Jun 2024 12:34:21 +0200 Subject: [PATCH 3/4] Fraction columns (gap problem) --- projects/layout-components/documentation.json | 464 ++---------------- .../src/lib/column/column.component.scss | 112 +++++ .../src/lib/column/column.component.ts | 8 +- projects/layout-components/src/lib/common.ts | 50 ++ .../src/stories/columns.stories.ts | 47 +- 5 files changed, 258 insertions(+), 423 deletions(-) diff --git a/projects/layout-components/documentation.json b/projects/layout-components/documentation.json index 7edc167..9809aca 100644 --- a/projects/layout-components/documentation.json +++ b/projects/layout-components/documentation.json @@ -9,7 +9,7 @@ "components": [ { "name": "ColumnComponent", - "id": "component-ColumnComponent-45f77322473e1c665ccba2453ab20608810724e2e78d689902148133a4c78e47bfb415d6ca97f3d1e0d24f538492f1a4e44a3abceb61cfdb3322d2057e8e153b", + "id": "component-ColumnComponent-ffe45297c3aac013b8a0c5f105c093301dc59477fe16ffa4abb8805cfe27fd934a8f6bf760170bdf1075e76dbc1bf04f279f630c2cd41afa7467eb278a0e917d", "file": "projects/layout-components/src/lib/column/column.component.ts", "encapsulation": [], "entryComponents": [], @@ -28,7 +28,7 @@ "name": "flexGrow", "deprecated": false, "deprecationMessage": "", - "line": 12, + "line": 16, "type": "string | undefined", "decorators": [] }, @@ -36,8 +36,8 @@ "name": "width", "deprecated": false, "deprecationMessage": "", - "line": 11, - "type": "string | undefined", + "line": 12, + "type": "string | ColumnFractionWidth | undefined", "decorators": [] } ], @@ -53,7 +53,7 @@ "description": "", "rawdescription": "\n", "type": "component", - "sourceCode": "import { Component, HostBinding, Input } from '@angular/core';\n\n@Component({\n selector: 'column',\n standalone: true,\n imports: [],\n template: ``,\n styleUrl: './column.component.scss'\n})\nexport class ColumnComponent {\n @HostBinding('style.width') @Input() width: string | undefined;\n @HostBinding('style.flex-grow') @Input() flexGrow: string | undefined;\n}\n", + "sourceCode": "import { Component, HostBinding, Input } from '@angular/core';\nimport { ColumnFractionWidth } from '../common';\n\n@Component({\n selector: 'column',\n standalone: true,\n imports: [],\n template: ``,\n styleUrl: './column.component.scss',\n})\nexport class ColumnComponent {\n @HostBinding('style.width') @Input() width:\n | string\n | ColumnFractionWidth\n | undefined;\n @HostBinding('style.flex-grow') @Input() flexGrow: string | undefined;\n}\n", "styleUrl": "./column.component.scss", "assetsDirs": [], "styleUrlsData": "", @@ -351,147 +351,9 @@ "stylesData": "", "extends": [] }, - { - "name": "RackComponent", - "id": "component-RackComponent-0b1b5259daf99fcfc2dabbe64c4e7877df67d67a50355734033b1a4fbc9a78d74a231cb31aa3cb367f9ba043bce51755786b1d717aa4086f00bbc5968c0d984b", - "file": "projects/layout-components/src/lib/rack/rack.component.ts", - "encapsulation": [], - "entryComponents": [], - "inputs": [], - "outputs": [], - "providers": [], - "selector": "rack", - "styleUrls": [], - "styles": [], - "templateUrl": [ - "./rack.component.html" - ], - "viewProviders": [], - "hostDirectives": [], - "inputsClass": [ - { - "required": true, - "name": "color", - "deprecated": false, - "deprecationMessage": "", - "optional": false, - "line": 12, - "type": "\"darkGrey\" | \"lightGrey\" | \"white\" | \"warmGrey\" | \"maroon\" | \"orange\" | \"gold\" | \"paleGreen\" | \"paleBlue\" | \"royalBlue\"", - "decorators": [] - }, - { - "required": true, - "name": "size", - "deprecated": false, - "deprecationMessage": "", - "optional": false, - "line": 11, - "type": "\"small\" | \"large\"", - "decorators": [] - } - ], - "outputsClass": [], - "propertiesClass": [], - "methodsClass": [], - "deprecated": false, - "deprecationMessage": "", - "hostBindings": [], - "hostListeners": [], - "standalone": true, - "imports": [], - "description": "", - "rawdescription": "\n", - "type": "component", - "sourceCode": "import { Component, Input } from '@angular/core';\n\n@Component({\n selector: 'rack',\n standalone: true,\n imports: [],\n templateUrl: './rack.component.html',\n styleUrl: './rack.component.scss',\n})\nexport class RackComponent {\n @Input({ required: true }) size!: 'small' | 'large';\n @Input({ required: true }) color!:\n | 'darkGrey'\n | 'lightGrey'\n | 'white'\n | 'warmGrey'\n | 'maroon'\n | 'orange'\n | 'gold'\n | 'paleGreen'\n | 'paleBlue'\n | 'royalBlue';\n\n get className() {\n return `${this.color} ${this.size}`;\n }\n}\n", - "styleUrl": "./rack.component.scss", - "assetsDirs": [], - "styleUrlsData": "", - "stylesData": "", - "extends": [], - "accessors": { - "className": { - "name": "className", - "getSignature": { - "name": "className", - "type": "", - "returnType": "", - "line": 24 - } - } - }, - "templateData": "\n \n\n" - }, - { - "name": "RackSlotComponent", - "id": "component-RackSlotComponent-37562ca7284bc11f654d8f96bb31bff311c98f1940443ca660b5cb911f8ce809a83fe5beb9b30ccd762da739017352ce0d681478e58409fa58bf78621816aed9", - "file": "projects/layout-components/src/lib/rack-slot/rack-slot.component.ts", - "encapsulation": [], - "entryComponents": [], - "inputs": [], - "outputs": [], - "providers": [], - "selector": "rack-slot", - "styleUrls": [], - "styles": [], - "templateUrl": [ - "./rack-slot.component.html" - ], - "viewProviders": [], - "hostDirectives": [], - "inputsClass": [ - { - "required": true, - "name": "name", - "deprecated": false, - "deprecationMessage": "", - "optional": false, - "line": 15, - "type": "string", - "decorators": [] - }, - { - "required": true, - "name": "size", - "deprecated": false, - "deprecationMessage": "", - "optional": false, - "line": 13, - "type": "\"small\" | \"large\"", - "decorators": [] - } - ], - "outputsClass": [], - "propertiesClass": [], - "methodsClass": [], - "deprecated": false, - "deprecationMessage": "", - "hostBindings": [], - "hostListeners": [], - "standalone": true, - "imports": [ - { - "name": "RackComponent", - "type": "component" - }, - { - "name": "StackComponent", - "type": "component" - } - ], - "description": "", - "rawdescription": "\n", - "type": "component", - "sourceCode": "import { Component, Input } from '@angular/core';\nimport { RackComponent } from '../rack/rack.component';\nimport { StackComponent } from '../stack/stack.component';\n\n@Component({\n selector: 'rack-slot',\n standalone: true,\n imports: [RackComponent, StackComponent],\n templateUrl: './rack-slot.component.html',\n styleUrl: './rack-slot.component.css',\n})\nexport class RackSlotComponent {\n @Input({ required: true }) size!: 'small' | 'large';\n\n @Input({ required: true }) name!: string;\n}\n", - "styleUrl": "./rack-slot.component.css", - "assetsDirs": [], - "styleUrlsData": "", - "stylesData": "", - "extends": [], - "templateData": "\n \n \n {{ name }}\n \n\n" - }, { "name": "StackComponent", - "id": "component-StackComponent-6f7f38c78f1a3bdda1c056c4b66ef3f9b216de304eceab0d8a6665d795fc4179318d845cf4727dc98c21fc935820c5c7d00f8ca8df6d17053632504e3a35cc08", + "id": "component-StackComponent-e524620005cf74e06b3d2c29920be105a4795f4ef8cdef17c7268ec5a0363f09884c91332e95b397e6317931b3b46fd81b4231fdf814f096a2a1fff798d2175f", "file": "projects/layout-components/src/lib/stack/stack.component.ts", "encapsulation": [], "entryComponents": [], @@ -520,16 +382,24 @@ "defaultValue": "'0'", "deprecated": false, "deprecationMessage": "", - "line": 22, + "line": 26, "type": "Gap", "decorators": [] }, + { + "name": "height", + "deprecated": false, + "deprecationMessage": "", + "line": 20, + "type": "string", + "decorators": [] + }, { "name": "justifyContent", "defaultValue": "'flex-start'", "deprecated": false, "deprecationMessage": "", - "line": 13, + "line": 14, "type": "JustifyContent", "decorators": [] }, @@ -538,7 +408,7 @@ "defaultValue": "'0'", "deprecated": false, "deprecationMessage": "", - "line": 23, + "line": 27, "type": "Padding", "decorators": [] } @@ -555,7 +425,7 @@ "description": "", "rawdescription": "\n", "type": "component", - "sourceCode": "import { Component, HostBinding, Input } from '@angular/core';\nimport { Properties } from 'csstype';\nimport { AlignItems, Gap, JustifyContent, Padding } from '../common';\n\n@Component({\n selector: 'stack',\n standalone: true,\n imports: [],\n template: ``,\n styleUrl: './stack.component.css',\n})\nexport class StackComponent {\n @HostBinding('style.justify-content') @Input() justifyContent: JustifyContent =\n 'flex-start';\n @HostBinding('style.align-items')\n @Input()\n alignItems: AlignItems = 'stretch';\n @HostBinding('style.gap')\n /**\n * The gap between the children of the stack.\n */\n @Input() gap: Gap = '0';\n @HostBinding('style.padding') @Input() padding: Padding = '0';\n}\n", + "sourceCode": "import { Component, HostBinding, Input } from '@angular/core';\nimport { AlignItems, Gap, JustifyContent, Padding } from '../common';\n\n@Component({\n selector: 'stack',\n standalone: true,\n imports: [],\n template: ``,\n styleUrl: './stack.component.css',\n})\nexport class StackComponent {\n @HostBinding('style.justify-content')\n @Input()\n justifyContent: JustifyContent = 'flex-start';\n @HostBinding('style.align-items')\n @Input()\n alignItems: AlignItems = 'stretch';\n @HostBinding('style.height')\n @Input()\n height?: string;\n @HostBinding('style.gap')\n /**\n * The gap between the children of the stack.\n */\n @Input()\n gap: Gap = '0';\n @HostBinding('style.padding') @Input() padding: Padding = '0';\n}\n", "styleUrl": "./stack.component.css", "assetsDirs": [], "styleUrlsData": "", @@ -708,7 +578,7 @@ "deprecated": false, "deprecationMessage": "", "type": "Story", - "defaultValue": "{\n args: {\n gap: '16px',\n },\n}" + "defaultValue": "{\n args: {\n gap: '16px',\n height: '100%',\n },\n}" }, { "name": "Basic", @@ -720,26 +590,6 @@ "type": "Story", "defaultValue": "{\n args: {\n gap: '16px',\n columns: 3,\n },\n}" }, - { - "name": "Large", - "ctype": "miscellaneous", - "subtype": "variable", - "file": "projects/layout-components/src/stories/rack-slot.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "type": "Story", - "defaultValue": "{\n args: {\n size: 'large',\n name: 'Name',\n },\n}" - }, - { - "name": "Large", - "ctype": "miscellaneous", - "subtype": "variable", - "file": "projects/layout-components/src/stories/rack.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "type": "Story", - "defaultValue": "{\n args: {\n color: 'darkGrey',\n size: 'large',\n },\n}" - }, { "name": "meta", "ctype": "miscellaneous", @@ -748,7 +598,7 @@ "deprecated": false, "deprecationMessage": "", "type": "Meta<>", - "defaultValue": "{\n title: 'Components/Columns',\n component: ColumnsComponent,\n tags: ['autodocs'],\n decorators: [\n moduleMetadata({\n imports: [PlaceholderComponent, ColumnComponent],\n }),\n ],\n render: (args) => ({\n props: args,\n template: `\n \n \n \n \n \n \n \n \n \n `,\n }),\n}", + "defaultValue": "{\n title: 'Components/Columns',\n component: ColumnsComponent,\n tags: ['autodocs'],\n decorators: [\n moduleMetadata({\n imports: [PlaceholderComponent, ColumnComponent],\n }),\n ],\n render: (args) => ({\n props: args,\n template: `\n \n 1\n \n \n 2\n\n\n3\n\n\n4\n\n\n5\n\n\n6\n\n\n7\n\n\n8\n\n\n9\n\n\n10\n\n\n11\n\n\n12\n\n`,\n }),\n}", "rawdescription": "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.", "description": "

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" }, @@ -788,26 +638,6 @@ "rawdescription": "The Inset component creates a container with padding.", "description": "

The Inset component creates a container with padding.

\n" }, - { - "name": "meta", - "ctype": "miscellaneous", - "subtype": "variable", - "file": "projects/layout-components/src/stories/rack-slot.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "type": "Meta<>", - "defaultValue": "{\n title: 'Components/Rack Slot',\n component: RackSlotComponent,\n tags: ['autodocs'],\n}" - }, - { - "name": "meta", - "ctype": "miscellaneous", - "subtype": "variable", - "file": "projects/layout-components/src/stories/rack.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "type": "Meta<>", - "defaultValue": "{\n title: 'Components/Rack',\n component: RackComponent,\n tags: ['autodocs'],\n}" - }, { "name": "meta", "ctype": "miscellaneous", @@ -817,8 +647,8 @@ "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}", - "rawdescription": "The Stack component is used to arrange its children vertically.", - "description": "

The Stack component is used to arrange its children vertically.

\n" + "rawdescription": "The Stack component is used to arrange its children vertically.\n\nIf you want to create a sidebar, Stack is the most suitable component. Set [height]=\"100%\" on Stack and do the same with all its parents. If you want a child of the Stack to grow to cover a specific portion of the available space, set a flex-grow on it.", + "description": "

The Stack component is used to arrange its children vertically.

\n

If you want to create a sidebar, Stack is the most suitable component. Set [height]=\"100%\" on Stack and do the same with all its parents. If you want a child of the Stack to grow to cover a specific portion of the available space, set a flex-grow on it.

\n" }, { "name": "meta", @@ -831,26 +661,6 @@ "defaultValue": "{\n title: 'Components/Tiles',\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 \n \n \n `,\n }),\n}", "rawdescription": "The Tiles component is used to create grid-like layouts.", "description": "

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

\n" - }, - { - "name": "Small", - "ctype": "miscellaneous", - "subtype": "variable", - "file": "projects/layout-components/src/stories/rack-slot.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "type": "Story", - "defaultValue": "{\n args: {\n size: 'small',\n name: 'Name',\n },\n}" - }, - { - "name": "Small", - "ctype": "miscellaneous", - "subtype": "variable", - "file": "projects/layout-components/src/stories/rack.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "type": "Story", - "defaultValue": "{\n args: {\n color: 'darkGrey',\n size: 'small',\n },\n}" } ], "functions": [], @@ -866,6 +676,17 @@ "description": "", "kind": 192 }, + { + "name": "ColumnFractionWidth", + "ctype": "miscellaneous", + "subtype": "typealias", + "rawtype": "\"1/2\" | \"1/3\" | \"2/3\" | \"1/4\" | \"2/4\" | \"3/4\" | \"1/5\" | \"2/5\" | \"3/5\" | \"4/5\" | \"1/6\" | \"2/6\" | \"3/6\" | \"4/6\" | \"5/6\" | \"1/7\" | \"2/7\" | \"3/7\" | \"4/7\" | \"5/7\" | \"6/7\" | \"1/8\" | \"2/8\" | \"3/8\" | \"4/8\" | \"5/8\" | \"6/8\" | \"7/8\" | \"1/10\" | \"2/10\" | \"3/10\" | \"4/10\" | \"5/10\" | \"6/10\" | \"7/10\" | \"8/10\" | \"9/10\" | \"1/12\" | \"2/12\" | \"3/12\" | \"4/12\" | \"5/12\" | \"6/12\" | \"7/12\" | \"8/12\" | \"9/12\" | \"10/12\" | \"11/12\"", + "file": "projects/layout-components/src/lib/common.ts", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "kind": 192 + }, { "name": "Gap", "ctype": "miscellaneous", @@ -903,7 +724,7 @@ "name": "SpacingScale", "ctype": "miscellaneous", "subtype": "typealias", - "rawtype": "\"0\" | \"4px\" | \"8px\" | \"12px\" | \"16px\" | \"32px\" | \"40px\" | \"64px\" | \"80px\" | \"120px\" | \"160px\"", + "rawtype": "\"0\" | \"4px\" | \"8px\" | \"12px\" | \"16px\" | \"24px\" | \"32px\" | \"40px\" | \"64px\" | \"80px\" | \"120px\" | \"160px\"", "file": "projects/layout-components/src/lib/common.ts", "deprecated": false, "deprecationMessage": "", @@ -954,28 +775,6 @@ "description": "", "kind": 183 }, - { - "name": "Story", - "ctype": "miscellaneous", - "subtype": "typealias", - "rawtype": "StoryObj", - "file": "projects/layout-components/src/stories/rack-slot.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "description": "", - "kind": 183 - }, - { - "name": "Story", - "ctype": "miscellaneous", - "subtype": "typealias", - "rawtype": "StoryObj", - "file": "projects/layout-components/src/stories/rack.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "description": "", - "kind": 183 - }, { "name": "Story", "ctype": "miscellaneous", @@ -1020,7 +819,7 @@ "deprecated": false, "deprecationMessage": "", "type": "Meta<>", - "defaultValue": "{\n title: 'Components/Columns',\n component: ColumnsComponent,\n tags: ['autodocs'],\n decorators: [\n moduleMetadata({\n imports: [PlaceholderComponent, ColumnComponent],\n }),\n ],\n render: (args) => ({\n props: args,\n template: `\n \n \n \n \n \n \n \n \n \n `,\n }),\n}", + "defaultValue": "{\n title: 'Components/Columns',\n component: ColumnsComponent,\n tags: ['autodocs'],\n decorators: [\n moduleMetadata({\n imports: [PlaceholderComponent, ColumnComponent],\n }),\n ],\n render: (args) => ({\n props: args,\n template: `\n \n 1\n \n \n 2\n\n\n3\n\n\n4\n\n\n5\n\n\n6\n\n\n7\n\n\n8\n\n\n9\n\n\n10\n\n\n11\n\n\n12\n\n`,\n }),\n}", "rawdescription": "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.", "description": "

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" } @@ -1106,7 +905,7 @@ "deprecated": false, "deprecationMessage": "", "type": "Story", - "defaultValue": "{\n args: {\n gap: '16px',\n },\n}" + "defaultValue": "{\n args: {\n gap: '16px',\n height: '100%',\n },\n}" }, { "name": "meta", @@ -1117,8 +916,8 @@ "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}", - "rawdescription": "The Stack component is used to arrange its children vertically.", - "description": "

The Stack component is used to arrange its children vertically.

\n" + "rawdescription": "The Stack component is used to arrange its children vertically.\n\nIf you want to create a sidebar, Stack is the most suitable component. Set [height]=\"100%\" on Stack and do the same with all its parents. If you want a child of the Stack to grow to cover a specific portion of the available space, set a flex-grow on it.", + "description": "

The Stack component is used to arrange its children vertically.

\n

If you want to create a sidebar, Stack is the most suitable component. Set [height]=\"100%\" on Stack and do the same with all its parents. If you want a child of the Stack to grow to cover a specific portion of the available space, set a flex-grow on it.

\n" } ], "projects/layout-components/src/stories/tiles.stories.ts": [ @@ -1144,70 +943,6 @@ "rawdescription": "The Tiles component is used to create grid-like layouts.", "description": "

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

\n" } - ], - "projects/layout-components/src/stories/rack-slot.stories.ts": [ - { - "name": "Large", - "ctype": "miscellaneous", - "subtype": "variable", - "file": "projects/layout-components/src/stories/rack-slot.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "type": "Story", - "defaultValue": "{\n args: {\n size: 'large',\n name: 'Name',\n },\n}" - }, - { - "name": "meta", - "ctype": "miscellaneous", - "subtype": "variable", - "file": "projects/layout-components/src/stories/rack-slot.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "type": "Meta<>", - "defaultValue": "{\n title: 'Components/Rack Slot',\n component: RackSlotComponent,\n tags: ['autodocs'],\n}" - }, - { - "name": "Small", - "ctype": "miscellaneous", - "subtype": "variable", - "file": "projects/layout-components/src/stories/rack-slot.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "type": "Story", - "defaultValue": "{\n args: {\n size: 'small',\n name: 'Name',\n },\n}" - } - ], - "projects/layout-components/src/stories/rack.stories.ts": [ - { - "name": "Large", - "ctype": "miscellaneous", - "subtype": "variable", - "file": "projects/layout-components/src/stories/rack.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "type": "Story", - "defaultValue": "{\n args: {\n color: 'darkGrey',\n size: 'large',\n },\n}" - }, - { - "name": "meta", - "ctype": "miscellaneous", - "subtype": "variable", - "file": "projects/layout-components/src/stories/rack.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "type": "Meta<>", - "defaultValue": "{\n title: 'Components/Rack',\n component: RackComponent,\n tags: ['autodocs'],\n}" - }, - { - "name": "Small", - "ctype": "miscellaneous", - "subtype": "variable", - "file": "projects/layout-components/src/stories/rack.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "type": "Story", - "defaultValue": "{\n args: {\n color: 'darkGrey',\n size: 'small',\n },\n}" - } ] }, "groupedFunctions": {}, @@ -1225,6 +960,17 @@ "description": "", "kind": 192 }, + { + "name": "ColumnFractionWidth", + "ctype": "miscellaneous", + "subtype": "typealias", + "rawtype": "\"1/2\" | \"1/3\" | \"2/3\" | \"1/4\" | \"2/4\" | \"3/4\" | \"1/5\" | \"2/5\" | \"3/5\" | \"4/5\" | \"1/6\" | \"2/6\" | \"3/6\" | \"4/6\" | \"5/6\" | \"1/7\" | \"2/7\" | \"3/7\" | \"4/7\" | \"5/7\" | \"6/7\" | \"1/8\" | \"2/8\" | \"3/8\" | \"4/8\" | \"5/8\" | \"6/8\" | \"7/8\" | \"1/10\" | \"2/10\" | \"3/10\" | \"4/10\" | \"5/10\" | \"6/10\" | \"7/10\" | \"8/10\" | \"9/10\" | \"1/12\" | \"2/12\" | \"3/12\" | \"4/12\" | \"5/12\" | \"6/12\" | \"7/12\" | \"8/12\" | \"9/12\" | \"10/12\" | \"11/12\"", + "file": "projects/layout-components/src/lib/common.ts", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "kind": 192 + }, { "name": "Gap", "ctype": "miscellaneous", @@ -1262,7 +1008,7 @@ "name": "SpacingScale", "ctype": "miscellaneous", "subtype": "typealias", - "rawtype": "\"0\" | \"4px\" | \"8px\" | \"12px\" | \"16px\" | \"32px\" | \"40px\" | \"64px\" | \"80px\" | \"120px\" | \"160px\"", + "rawtype": "\"0\" | \"4px\" | \"8px\" | \"12px\" | \"16px\" | \"24px\" | \"32px\" | \"40px\" | \"64px\" | \"80px\" | \"120px\" | \"160px\"", "file": "projects/layout-components/src/lib/common.ts", "deprecated": false, "deprecationMessage": "", @@ -1322,32 +1068,6 @@ "kind": 183 } ], - "projects/layout-components/src/stories/rack-slot.stories.ts": [ - { - "name": "Story", - "ctype": "miscellaneous", - "subtype": "typealias", - "rawtype": "StoryObj", - "file": "projects/layout-components/src/stories/rack-slot.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "description": "", - "kind": 183 - } - ], - "projects/layout-components/src/stories/rack.stories.ts": [ - { - "name": "Story", - "ctype": "miscellaneous", - "subtype": "typealias", - "rawtype": "StoryObj", - "file": "projects/layout-components/src/stories/rack.stories.ts", - "deprecated": false, - "deprecationMessage": "", - "description": "", - "kind": 183 - } - ], "projects/layout-components/src/stories/stack.stories.ts": [ { "name": "Story", @@ -1378,8 +1098,8 @@ }, "routes": [], "coverage": { - "count": 21, - "status": "low", + "count": 30, + "status": "medium", "files": [ { "filePath": "projects/layout-components/src/lib/column/column.component.ts", @@ -1426,31 +1146,13 @@ "coverageCount": "0/2", "status": "low" }, - { - "filePath": "projects/layout-components/src/lib/rack-slot/rack-slot.component.ts", - "type": "component", - "linktype": "component", - "name": "RackSlotComponent", - "coveragePercent": 0, - "coverageCount": "0/3", - "status": "low" - }, - { - "filePath": "projects/layout-components/src/lib/rack/rack.component.ts", - "type": "component", - "linktype": "component", - "name": "RackComponent", - "coveragePercent": 0, - "coverageCount": "0/3", - "status": "low" - }, { "filePath": "projects/layout-components/src/lib/stack/stack.component.ts", "type": "component", "linktype": "component", "name": "StackComponent", "coveragePercent": 0, - "coverageCount": "0/5", + "coverageCount": "0/6", "status": "low" }, { @@ -1551,66 +1253,6 @@ "coverageCount": "0/2", "status": "low" }, - { - "filePath": "projects/layout-components/src/stories/rack-slot.stories.ts", - "type": "variable", - "linktype": "miscellaneous", - "linksubtype": "variable", - "name": "Large", - "coveragePercent": 0, - "coverageCount": "0/1", - "status": "low" - }, - { - "filePath": "projects/layout-components/src/stories/rack-slot.stories.ts", - "type": "variable", - "linktype": "miscellaneous", - "linksubtype": "variable", - "name": "meta", - "coveragePercent": 0, - "coverageCount": "0/1", - "status": "low" - }, - { - "filePath": "projects/layout-components/src/stories/rack-slot.stories.ts", - "type": "variable", - "linktype": "miscellaneous", - "linksubtype": "variable", - "name": "Small", - "coveragePercent": 0, - "coverageCount": "0/1", - "status": "low" - }, - { - "filePath": "projects/layout-components/src/stories/rack.stories.ts", - "type": "variable", - "linktype": "miscellaneous", - "linksubtype": "variable", - "name": "Large", - "coveragePercent": 0, - "coverageCount": "0/1", - "status": "low" - }, - { - "filePath": "projects/layout-components/src/stories/rack.stories.ts", - "type": "variable", - "linktype": "miscellaneous", - "linksubtype": "variable", - "name": "meta", - "coveragePercent": 0, - "coverageCount": "0/1", - "status": "low" - }, - { - "filePath": "projects/layout-components/src/stories/rack.stories.ts", - "type": "variable", - "linktype": "miscellaneous", - "linksubtype": "variable", - "name": "Small", - "coveragePercent": 0, - "coverageCount": "0/1", - "status": "low" - }, { "filePath": "projects/layout-components/src/stories/stack.stories.ts", "type": "variable", diff --git a/projects/layout-components/src/lib/column/column.component.scss b/projects/layout-components/src/lib/column/column.component.scss index 5d4e87f..527a5d4 100644 --- a/projects/layout-components/src/lib/column/column.component.scss +++ b/projects/layout-components/src/lib/column/column.component.scss @@ -1,3 +1,115 @@ :host { display: block; + flex: 0 0 var(--column-width); +} + +:host([width="1/2"]), +:host([width="2/4"]), +:host([width="3/6"]), +:host([width="4/8"]), +:host([width="5/10"]), +:host([width="6/12"]) { + --column-width: calc(1 / 2 * 100%); +} + +:host([width="1/3"]), +:host([width="2/6"]), +:host([width="4/12"]) { + --column-width: calc(1 / 3 * 100%); +} + +:host([width="2/3"]), +:host([width="4/6"]), +:host([width="8/12"]) { + --column-width: calc(2 / 3 * 100%); +} + +:host([width="1/4"]), +:host([width="2/8"]), +:host([width="3/12"]) { + --column-width: calc(1 / 4 * 100%); +} + +:host([width="3/4"]), +:host([width="6/8"]), +:host([width="9/12"]) { + --column-width: calc(3 / 4 * 100%); +} + +:host([width="1/5"]), +:host([width="2/10"]) { + --column-width: calc(1 / 5 * 100%); +} + +:host([width="2/5"]), +:host([width="4/10"]) { + --column-width: calc(2 / 5 * 100%); +} + +:host([width="3/5"]), +:host([width="6/10"]) { + --column-width: calc(3 / 5 * 100%); +} + +:host([width="4/5"]), +:host([width="8/10"]) { + --column-width: calc(4 / 5 * 100%); +} + +:host([width="1/6"]), +:host([width="2/12"]) { + --column-width: calc(1 / 6 * 100%); +} + +:host([width="5/6"]), +:host([width="10/12"]) { + --column-width: calc(5 / 6 * 100%); +} + +:host([width="1/8"]) { + --column-width: calc(1 / 8 * 100%); +} + +:host([width="3/8"]) { + --column-width: calc(3 / 8 * 100%); +} + +:host([width="5/8"]) { + --column-width: calc(5 / 8 * 100%); +} + +:host([width="7/8"]) { + --column-width: calc(7 / 8 * 100%); +} + +:host([width="1/10"]) { + --column-width: calc(1 / 10 * 100%); +} + +:host([width="3/10"]) { + --column-width: calc(3 / 10 * 100%); +} + +:host([width="7/10"]) { + --column-width: calc(7 / 10 * 100%); +} + +:host([width="9/10"]) { + --column-width: calc(9 / 10 * 100%); +} + +:host([width="1/12"]) { + --column-width: calc(1 / 12 * 100%); +} + +:host([width="5/12"]) { + --column-width: calc(5 / 12 * 100%); +} + +:host([width="7/12"]) { + --column-width: calc(7 / 12 * 100%); +} + +:host([width="11/12"]) { + --column-width: calc(11 / 12 * 100%); } diff --git a/projects/layout-components/src/lib/column/column.component.ts b/projects/layout-components/src/lib/column/column.component.ts index 9348482..3a3385f 100644 --- a/projects/layout-components/src/lib/column/column.component.ts +++ b/projects/layout-components/src/lib/column/column.component.ts @@ -1,13 +1,17 @@ import { Component, HostBinding, Input } from '@angular/core'; +import { ColumnFractionWidth } from '../common'; @Component({ selector: 'column', standalone: true, imports: [], template: ``, - styleUrl: './column.component.scss' + styleUrl: './column.component.scss', }) export class ColumnComponent { - @HostBinding('style.width') @Input() width: string | undefined; + @HostBinding('style.width') @Input() width: + | string + | ColumnFractionWidth + | undefined; @HostBinding('style.flex-grow') @Input() flexGrow: string | undefined; } diff --git a/projects/layout-components/src/lib/common.ts b/projects/layout-components/src/lib/common.ts index 186c98f..d6328c7 100644 --- a/projects/layout-components/src/lib/common.ts +++ b/projects/layout-components/src/lib/common.ts @@ -34,3 +34,53 @@ export type JustifyContent = | 'space-between' | 'space-around' | 'space-evenly'; + +export type ColumnFractionWidth = + | '1/2' + | '1/3' + | '2/3' + | '1/4' + | '2/4' + | '3/4' + | '1/5' + | '2/5' + | '3/5' + | '4/5' + | '1/6' + | '2/6' + | '3/6' + | '4/6' + | '5/6' + | '1/7' + | '2/7' + | '3/7' + | '4/7' + | '5/7' + | '6/7' + | '1/8' + | '2/8' + | '3/8' + | '4/8' + | '5/8' + | '6/8' + | '7/8' + | '1/10' + | '2/10' + | '3/10' + | '4/10' + | '5/10' + | '6/10' + | '7/10' + | '8/10' + | '9/10' + | '1/12' + | '2/12' + | '3/12' + | '4/12' + | '5/12' + | '6/12' + | '7/12' + | '8/12' + | '9/12' + | '10/12' + | '11/12'; diff --git a/projects/layout-components/src/stories/columns.stories.ts b/projects/layout-components/src/stories/columns.stories.ts index 848473f..9a73ccd 100644 --- a/projects/layout-components/src/stories/columns.stories.ts +++ b/projects/layout-components/src/stories/columns.stories.ts @@ -23,16 +23,43 @@ const meta: Meta = { render: (args) => ({ props: args, template: ` - - - - - - - - - - `, + + 1 + + + 2 + + +3 + + +4 + + +5 + + +6 + + +7 + + +8 + + +9 + + +10 + + +11 + + +12 + +`, }), }; export default meta; From fc8cbd19834295e4359033a1524f9d6645c6ec4d Mon Sep 17 00:00:00 2001 From: Gabriele Petronella Date: Tue, 4 Jun 2024 13:11:08 +0200 Subject: [PATCH 4/4] Improve stories --- .../src/stories/columns.stories.ts | 107 +++++++++++------- .../placeholder/placeholder.component.scss | 26 +++-- .../placeholder/placeholder.component.ts | 5 +- 3 files changed, 88 insertions(+), 50 deletions(-) diff --git a/projects/layout-components/src/stories/columns.stories.ts b/projects/layout-components/src/stories/columns.stories.ts index 9a73ccd..a7ae73a 100644 --- a/projects/layout-components/src/stories/columns.stories.ts +++ b/projects/layout-components/src/stories/columns.stories.ts @@ -7,6 +7,7 @@ import { import { PlaceholderComponent } from './placeholder/placeholder.component'; import { ColumnsComponent } from '../lib/columns/columns.component'; import { ColumnComponent } from '../lib/column/column.component'; +import { StackComponent } from '../public-api'; /** * 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 = { tags: ['autodocs'], decorators: [ moduleMetadata({ - imports: [PlaceholderComponent, ColumnComponent], + imports: [PlaceholderComponent, ColumnComponent, StackComponent], }), ], render: (args) => ({ props: args, template: ` - - 1 - - - 2 - - -3 - - -4 - - -5 - - -6 - - -7 - - -8 - - -9 - - -10 - - -11 - - -12 - -`, + + + + + + + + + + `, }), }; export default meta; @@ -71,3 +45,60 @@ export const Basic: Story = { gap: '16px', }, }; + +export const Fractions: Story = { + args: { + gap: '16px', + }, + render: (args) => ({ + props: args, + template: ` + + + 2/5 + + + 100% + + + + + 3/5 + + + 100% + + + + + 100% + + + 2/3 + + + + + 1/5 + + + 100% + + + 1/5 + + + + + 100% + + + 1/6 + + + 100% + + + `, + }), +}; diff --git a/projects/layout-components/src/stories/placeholder/placeholder.component.scss b/projects/layout-components/src/stories/placeholder/placeholder.component.scss index 7678f56..e9a8d24 100644 --- a/projects/layout-components/src/stories/placeholder/placeholder.component.scss +++ b/projects/layout-components/src/stories/placeholder/placeholder.component.scss @@ -1,16 +1,20 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); :host { - display: flex; - align-items: center; - justify-content: center; - background-color: #ECEFF4; - color: #364459; - font-family: "Poppins", sans-serif; - font-weight: 400; - padding: 40px; + display: flex; + align-items: center; + justify-content: center; + background-color: #eceff4; + color: #364459; + font-family: "Poppins", sans-serif; + font-weight: 400; + padding: 40px; } p { - margin: 0; -} \ No newline at end of file + margin: 0; +} + +p:not(:empty) + p.default { + display: none; +} diff --git a/projects/layout-components/src/stories/placeholder/placeholder.component.ts b/projects/layout-components/src/stories/placeholder/placeholder.component.ts index 183207b..7de4cf6 100644 --- a/projects/layout-components/src/stories/placeholder/placeholder.component.ts +++ b/projects/layout-components/src/stories/placeholder/placeholder.component.ts @@ -4,7 +4,10 @@ import { Component, HostBinding, Input } from '@angular/core'; selector: 'placeholder', standalone: true, imports: [], - template: `

Placeholder

`, + template: ` +

+

Placeholder

+ `, styleUrls: ['./placeholder.component.scss'], }) export class PlaceholderComponent {