From 48d988cd9775b4ad83328b6747b7fc6efa46cf1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B8rn=20Hoffmann?= Date: Fri, 1 Sep 2023 12:16:39 +0200 Subject: [PATCH 1/4] Add even more vater components --- libs/watt/.eslintrc.json | 2 +- libs/watt/src/lib/components/vater/index.ts | 2 + .../components/vater/vater-flex.component.ts | 12 +++-- .../vater/vater-spacer.component.ts | 34 ++++++++++++ .../components/vater/vater-stack.component.ts | 12 +++-- .../vater/vater-utility.directive.ts | 40 ++++++++++++++ libs/watt/src/lib/components/vater/vater.mdx | 52 ++++++++++++++++++- .../src/lib/components/vater/vater.stories.ts | 29 ++++++++++- libs/watt/src/lib/foundations/_vater.scss | 47 +++++++++++++++++ .../@energinet-datahub/watt/_index.scss | 1 + 10 files changed, 218 insertions(+), 13 deletions(-) create mode 100644 libs/watt/src/lib/components/vater/vater-spacer.component.ts create mode 100644 libs/watt/src/lib/components/vater/vater-utility.directive.ts create mode 100644 libs/watt/src/lib/foundations/_vater.scss diff --git a/libs/watt/.eslintrc.json b/libs/watt/.eslintrc.json index e86ecbef61..207135d7ca 100644 --- a/libs/watt/.eslintrc.json +++ b/libs/watt/.eslintrc.json @@ -13,7 +13,7 @@ "error", { "type": "attribute", - "prefix": "watt", + "prefix": ["watt", "vater"], "style": "camelCase" } ], diff --git a/libs/watt/src/lib/components/vater/index.ts b/libs/watt/src/lib/components/vater/index.ts index cc3acb3aa1..06803dd2f0 100644 --- a/libs/watt/src/lib/components/vater/index.ts +++ b/libs/watt/src/lib/components/vater/index.ts @@ -15,4 +15,6 @@ * limitations under the License. */ export { VaterFlexComponent } from './vater-flex.component'; +export { VaterSpacerComponent } from './vater-spacer.component'; export { VaterStackComponent } from './vater-stack.component'; +export { VaterUtilityDirective } from './vater-utility.directive'; diff --git a/libs/watt/src/lib/components/vater/vater-flex.component.ts b/libs/watt/src/lib/components/vater/vater-flex.component.ts index 36964f635f..9f703146cc 100644 --- a/libs/watt/src/lib/components/vater/vater-flex.component.ts +++ b/libs/watt/src/lib/components/vater/vater-flex.component.ts @@ -16,10 +16,17 @@ */ import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core'; import { Direction, Gap, Justify } from './types'; +import { VaterUtilityDirective } from './vater-utility.directive'; @Component({ selector: 'vater-flex, [vater-flex]', encapsulation: ViewEncapsulation.None, + hostDirectives: [ + { + directive: VaterUtilityDirective, + inputs: ['fill'], + }, + ], standalone: true, styles: [ ` @@ -56,11 +63,6 @@ export class VaterFlexComponent { return this.gap ? `var(--watt-space-${this.gap})` : undefined; } - @HostBinding('style.height') - get _height() { - return this.direction === 'column' ? '100%' : undefined; - } - @HostBinding('style.overflow') get _overflow() { return this.scrollable === '' ? 'auto' : undefined; diff --git a/libs/watt/src/lib/components/vater/vater-spacer.component.ts b/libs/watt/src/lib/components/vater/vater-spacer.component.ts new file mode 100644 index 0000000000..227fc9a0a0 --- /dev/null +++ b/libs/watt/src/lib/components/vater/vater-spacer.component.ts @@ -0,0 +1,34 @@ +/** + * @license + * Copyright 2020 Energinet DataHub A/S + * + * Licensed under the Apache License, Version 2.0 (the "License2"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { Component, ViewEncapsulation } from '@angular/core'; + +@Component({ + selector: 'vater-spacer, [vater-spacer]', + encapsulation: ViewEncapsulation.None, + standalone: true, + styles: [ + ` + vater-spacer, + [vater-spacer] { + flex-basis: 100%; + align-self: stretch; + } + `, + ], + template: ``, +}) +export class VaterSpacerComponent {} diff --git a/libs/watt/src/lib/components/vater/vater-stack.component.ts b/libs/watt/src/lib/components/vater/vater-stack.component.ts index b97a960437..7c5318e2e6 100644 --- a/libs/watt/src/lib/components/vater/vater-stack.component.ts +++ b/libs/watt/src/lib/components/vater/vater-stack.component.ts @@ -16,10 +16,17 @@ */ import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core'; import { Align, Direction, Gap, Justify } from './types'; +import { VaterUtilityDirective } from './vater-utility.directive'; @Component({ selector: 'vater-stack, [vater-stack]', encapsulation: ViewEncapsulation.None, + hostDirectives: [ + { + directive: VaterUtilityDirective, + inputs: ['fill'], + }, + ], standalone: true, styles: [ ` @@ -52,9 +59,4 @@ export class VaterStackComponent { get _gap() { return this.gap ? `var(--watt-space-${this.gap})` : undefined; } - - @HostBinding('style.height') - get _height() { - return this.direction === 'column' ? '100%' : undefined; - } } diff --git a/libs/watt/src/lib/components/vater/vater-utility.directive.ts b/libs/watt/src/lib/components/vater/vater-utility.directive.ts new file mode 100644 index 0000000000..0381b61b13 --- /dev/null +++ b/libs/watt/src/lib/components/vater/vater-utility.directive.ts @@ -0,0 +1,40 @@ +/** + * @license + * Copyright 2020 Energinet DataHub A/S + * + * Licensed under the Apache License, Version 2.0 (the "License2"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { Directive, HostBinding, Input } from '@angular/core'; + +export type Fill = 'horizontal' | 'vertical' | 'both'; +export type Inset = '0' | 'xs' | 's' | 'm' | 'ml' | 'l' | 'xl'; + +/* eslint-disable @angular-eslint/no-input-rename */ +@Directive({ + selector: '[vater]', + standalone: true, +}) +export class VaterUtilityDirective { + /** Stretch the element to fill the available space in one or both directions. */ + @Input({ transform: (value: Fill) => `vater-fill-${value}` }) + fill?: Fill; + + /** Position the element absolute with the provided inset value. */ + @Input({ transform: (value: Inset) => `vater-inset-${value}` }) + inset?: Inset; + + @HostBinding('class') + get _class() { + return [this.fill, this.inset].filter(Boolean); + } +} diff --git a/libs/watt/src/lib/components/vater/vater.mdx b/libs/watt/src/lib/components/vater/vater.mdx index 2b202c3e0c..0231d42cda 100644 --- a/libs/watt/src/lib/components/vater/vater.mdx +++ b/libs/watt/src/lib/components/vater/vater.mdx @@ -19,6 +19,8 @@ import { ArgsTable, Meta, Source, Story } from '@storybook/blocks'; import * as VaterStories from './vater.stories.ts'; import { VaterStackComponent } from './vater-stack.component.ts'; import { VaterFlexComponent } from './vater-flex.component.ts'; +import { VaterSpacerComponent } from './vater-spacer.component.ts'; +import { VaterUtilityDirective } from './vater-utility.directive.ts'; @@ -45,7 +47,9 @@ overflow to fit the available space. They will never expand beyond their origina `} /> + ## Flex + Next layout component is `vater-flex`, meant to simplify the creation of flexible layouts. Like the `vater-stack` component, it provides the ability to arrange child elements vertically (column) or horizontally (row). What makes `vater-flex` distinct is its ability to stretch @@ -61,7 +65,7 @@ allowing the container to shrink beyond the minimum height while showing a scrol Log out - +

Heading

Content

 @@ -69,3 +73,49 @@ allowing the container to shrink beyond the minimum height while showing a scrol `} /> + +## Spacer + +The `VaterSpacerComponent` serves as a handy tool for improving the flexibility of layouts when +utilized in conjunction with the `vater-flex` component. It provides a straightforward method for +inserting space between items, enabling you to easily fine-tune the alignment of your content. + + + + +

Dashboard

+ + Log out + + `} +/> + + +## Utility + +The `VaterUtilityDirective` simplifies class assignment by offering an intuitive, effortless, +and inherently type-safe mechanism for applying utility classes. This not only streamlines +development but also enhances the development experience by enabling editor auto-completion +for CSS utilities. + + + + + + +

Results

+ + + + + + `} +/> diff --git a/libs/watt/src/lib/components/vater/vater.stories.ts b/libs/watt/src/lib/components/vater/vater.stories.ts index 0198bb15a4..3cc5e58ce3 100644 --- a/libs/watt/src/lib/components/vater/vater.stories.ts +++ b/libs/watt/src/lib/components/vater/vater.stories.ts @@ -18,6 +18,7 @@ import { Meta, StoryObj, moduleMetadata } from '@storybook/angular'; import { VaterStackComponent } from './vater-stack.component'; import { VaterFlexComponent } from './vater-flex.component'; +import { VaterSpacerComponent } from './vater-spacer.component'; const meta: Meta = { /* 👇 The title prop is optional. @@ -27,7 +28,7 @@ const meta: Meta = { title: 'Components/Vater', decorators: [ moduleMetadata({ - imports: [VaterStackComponent, VaterFlexComponent], + imports: [VaterStackComponent, VaterFlexComponent, VaterSpacerComponent], }), ], }; @@ -81,3 +82,29 @@ export const Flex: StoryObj = { `, }), }; + +export const Spacer: StoryObj = { + render: (args) => ({ + props: args, + template: ` + + + direction="column" +
+
+
+ +
+ + + direction="row" +
+
+
+ +
+ + + `, + }), +}; diff --git a/libs/watt/src/lib/foundations/_vater.scss b/libs/watt/src/lib/foundations/_vater.scss new file mode 100644 index 0000000000..311704c03b --- /dev/null +++ b/libs/watt/src/lib/foundations/_vater.scss @@ -0,0 +1,47 @@ +.vater-fill-horizontal { + width: 100%; +} + +.vater-fill-vertical { + height: 100%; +} + +.vater-fill-both { + width: 100%; + height: 100%; +} + +.vater-inset-0 { + position: absolute; + inset: 0; +} + +.vater-inset-xs { + position: absolute; + inset: var(--watt-space-xs); +} + +.vater-inset-s { + position: absolute; + inset: var(--watt-space-s); +} + +.vater-inset-m { + position: absolute; + inset: var(--watt-space-m); +} + +.vater-inset-ml { + position: absolute; + inset: var(--watt-space-ml); +} + +.vater-inset-l { + position: absolute; + inset: var(--watt-space-l); +} + +.vater-inset-xl { + position: absolute; + inset: var(--watt-space-xl); +} diff --git a/libs/watt/src/lib/styles/@energinet-datahub/watt/_index.scss b/libs/watt/src/lib/styles/@energinet-datahub/watt/_index.scss index ec22239321..af0eb06308 100644 --- a/libs/watt/src/lib/styles/@energinet-datahub/watt/_index.scss +++ b/libs/watt/src/lib/styles/@energinet-datahub/watt/_index.scss @@ -27,6 +27,7 @@ @use "../../../foundations/tooltip"; @use "../../../foundations/elevation"; @use "../../../foundations/chips"; +@use "../../../foundations/vater"; html, body { From 2c779761e3daf4cb81ae3a77e9aa3f0211f799df Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 1 Sep 2023 10:20:40 +0000 Subject: [PATCH 2/4] chore: add license --- libs/watt/src/lib/foundations/_vater.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/libs/watt/src/lib/foundations/_vater.scss b/libs/watt/src/lib/foundations/_vater.scss index 311704c03b..325324311e 100644 --- a/libs/watt/src/lib/foundations/_vater.scss +++ b/libs/watt/src/lib/foundations/_vater.scss @@ -1,3 +1,19 @@ +/** + * @license + * Copyright 2020 Energinet DataHub A/S + * + * Licensed under the Apache License, Version 2.0 (the "License2"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ .vater-fill-horizontal { width: 100%; } From d37b8d5b5df8dc77d6161953d37df4452cb9125f Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 1 Sep 2023 12:23:20 +0200 Subject: [PATCH 3/4] Chore: bump version to 0.3.338 for build/infrastructure/eo/chart/values.yaml --- build/infrastructure/eo/chart/values.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/infrastructure/eo/chart/values.yaml b/build/infrastructure/eo/chart/values.yaml index 4d472a7025..b3e4a5a584 100644 --- a/build/infrastructure/eo/chart/values.yaml +++ b/build/infrastructure/eo/chart/values.yaml @@ -2,4 +2,4 @@ app: replicaCount: 2 image: name: ghcr.io/energinet-datahub/eo-frontend-app - tag: 0.3.337 + tag: 0.3.338 From cce1c7942f722314619c4df6f76bdc9645fdc846 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 1 Sep 2023 12:23:24 +0200 Subject: [PATCH 4/4] Chore: bump version to 0.3.338 for build/infrastructure/eo/chart/Chart.yaml --- build/infrastructure/eo/chart/Chart.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/infrastructure/eo/chart/Chart.yaml b/build/infrastructure/eo/chart/Chart.yaml index 1c462ae1fe..4f6f5e08df 100644 --- a/build/infrastructure/eo/chart/Chart.yaml +++ b/build/infrastructure/eo/chart/Chart.yaml @@ -2,4 +2,4 @@ apiVersion: v2 name: eo-frontend description: A Helm chart for Kubernetes type: application -version: 0.3.337 +version: 0.3.338