feat(watt): VaterSpacer and VaterUtility

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

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

libs/watt/.eslintrc.json

@@ -13,7 +13,7 @@
           "error",
           {
             "type": "attribute",
-            "prefix": "watt",
+            "prefix": ["watt", "vater"],
             "style": "camelCase"
           }
         ],

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';

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;

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: `<ng-content />`,
+})
+export class VaterSpacerComponent {}

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;
-  }
 }

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);
+  }
+}

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';
 
 <Meta of={VaterStories} />
 
@@ -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,11 +65,57 @@ allowing the container to shrink beyond the minimum height while showing a scrol
 <!-- Button on top with a card stretched to fill the remaining height -->
 <vater-flex gap="m">
   <watt-button>Log out</watt-button>
-  <watt-card style="height: 100%">
+  <watt-card vater fill="vertical">
     <h3>Heading</h3>
     <p>Content</p>
   </watt-card>
 </vater-flex>
   `}
 />
 
+
+## 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.
+
+<Story of={VaterStories.Spacer} />
+<Source
+  language='html'
+  dark={true}
+  code={`
+<!-- Container with a left aligned title and a right aligned log out button -->
+<vater-flex>
+  <h1>Dashboard</h1>
+  <vater-spacer />
+  <watt-button>Log out</watt-button>
+</vater-flex>
+  `}
+/>
+
+
+## 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.
+
+<ArgsTable of={VaterUtilityDirective} />
+<Source
+  language='html'
+  dark={true}
+  code={`
+<!-- Card positioned to fill the entire view minus a medium margin -->
+<watt-card vater inset="m">
+  <!-- The fill utility is available on vater-flex and vater-stack by default -->
+  <vater-flex fill="horizontal">
+    <h1>Results</h1>
+    <vater-spacer />
+    <watt-search label="Search" />
+  </vater-flex>
+  <watt-table />
+</watt-card>
+  `}
+/>

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<VaterFlexComponent> = {
     `,
   }),
 };
+
+export const Spacer: StoryObj<VaterFlexComponent> = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <vater-flex direction="row" gap="m" style="height: 400px; padding-top: var(--watt-space-l)">
+        <vater-flex gap="s" style="width: 50%; padding: var(--watt-space-s); border: 1px dashed var(--watt-color-neutral-grey-500)">
+          <code style="position: absolute; align-self: flex-start; transform: translateY(calc(-100% - var(--watt-space-m)))">direction="column"</code>
+          <div style="background-color: var(--watt-color-primary-dark); min-height: 60px;"></div>
+          <div style="background-color: var(--watt-color-primary); min-height: 60px;"></div>
+          <div style="background-color: var(--watt-color-primary-light); min-height: 60px;"></div>
+          <vater-spacer />
+          <div style="background-color: var(--watt-color-primary-ultralight); min-height: 60px;"></div>
+        </vater-flex>
+        <vater-flex direction="row" gap="s" style="width: 50%; padding: var(--watt-space-s); border: 1px dashed var(--watt-color-neutral-grey-500)">
+          <code style="position: absolute; align-self: flex-start; transform: translateY(calc(-100% - var(--watt-space-m)))">direction="row"</code>
+          <div style="background-color: var(--watt-color-primary-dark); min-width: 60px;"></div>
+          <div style="background-color: var(--watt-color-primary); min-width: 60px;"></div>
+          <div style="background-color: var(--watt-color-primary-light); min-width: 60px;"></div>
+          <vater-spacer />
+          <div style="background-color: var(--watt-color-primary-ultralight); min-width: 60px;"></div>
+        </vater-flex>
+      </vater-flex>
+    `,
+  }),
+};

libs/watt/src/lib/foundations/_vater.scss

@@ -0,0 +1,63 @@
+/**
+ * @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%;
+}
+
+.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);
+}

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 {