From daacfa8e854764210955fd82bce6128f37116c82 Mon Sep 17 00:00:00 2001
From: Lisa Meyer <84317589+Lisa18289@users.noreply.github.com>
Date: Thu, 5 Dec 2024 07:33:47 +0100
Subject: [PATCH] feat(Align): support input and button (#1040)

---
 .../src/components/Align/Align.module.scss    | 60 ++++++++++-----
 .../components/src/components/Align/Align.tsx |  1 +
 .../Align/stories/InputButton.stories.tsx     | 73 +++++++++++++++++++
 .../src/components/Modal/Modal.module.scss    |  1 -
 .../design-tokens/src/structure/align.yml     |  3 +
 .../structure/align/examples/input-button.tsx | 11 +++
 .../structure/align/overview.mdx              |  6 ++
 7 files changed, 134 insertions(+), 21 deletions(-)
 create mode 100644 packages/components/src/components/Align/stories/InputButton.stories.tsx
 create mode 100644 packages/docs/src/content/03-components/structure/align/examples/input-button.tsx

diff --git a/packages/components/src/components/Align/Align.module.scss b/packages/components/src/components/Align/Align.module.scss
index 62ae51be5..2aa6e8845 100644
--- a/packages/components/src/components/Align/Align.module.scss
+++ b/packages/components/src/components/Align/Align.module.scss
@@ -1,30 +1,50 @@
 .align {
-  display: flex;
-  gap: var(--align--avatar-text--spacing);
-
-  .text {
-    font-size: var(--font-size-text--s);
-    flex-grow: 1;
+  &:has(.avatar):has(.text) {
     display: flex;
-    flex-direction: column;
-    align-self: center;
+    gap: var(--align--avatar-text--spacing);
+
+    .text {
+      font-size: var(--font-size-text--s);
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      align-self: center;
 
-    b {
-      font-size: var(--font-size-text--m);
+      b {
+        font-size: var(--font-size-text--m);
+      }
     }
-  }
 
-  --first-two-lines-height: calc(var(--line-height--s) * 2);
+    --first-two-lines-height: calc(var(--line-height--s) * 2);
 
-  &:has(b) {
-    --first-two-lines-height: calc(
-      var(--line-height--m) + var(--line-height--s)
-    );
+    &:has(b) {
+      --first-two-lines-height: calc(
+        var(--line-height--m) + var(--line-height--s)
+      );
+    }
+
+    .avatar {
+      margin-top: calc(
+        (var(--first-two-lines-height) - var(--avatar--size--m)) / 2
+      );
+    }
   }
 
-  .avatar {
-    margin-top: calc(
-      (var(--first-two-lines-height) - var(--avatar--size--m)) / 2
-    );
+  &:has(:global(.flow--form-field)):has(.button) {
+    display: flex;
+    align-items: start;
+    column-gap: var(--align--input-button--spacing);
+
+    :first-child {
+      flex-grow: 1;
+    }
+
+    &:has(label) {
+      .button {
+        margin-top: calc(
+          var(--label--font-size) * 1.5 + var(--form-control--spacing-y)
+        );
+      }
+    }
   }
 }
diff --git a/packages/components/src/components/Align/Align.tsx b/packages/components/src/components/Align/Align.tsx
index c4003afcd..7f4ea58e7 100644
--- a/packages/components/src/components/Align/Align.tsx
+++ b/packages/components/src/components/Align/Align.tsx
@@ -20,6 +20,7 @@ export const Align = flowComponent("Align", (props) => {
 
   const propsContext: PropsContext = {
     Text: { className: styles.text },
+    Button: { className: styles.button },
     Avatar: { className: styles.avatar, size: "m" },
   };
 
diff --git a/packages/components/src/components/Align/stories/InputButton.stories.tsx b/packages/components/src/components/Align/stories/InputButton.stories.tsx
new file mode 100644
index 000000000..b0c644c59
--- /dev/null
+++ b/packages/components/src/components/Align/stories/InputButton.stories.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+import { Align } from "@/components/Align";
+import { TextField } from "@/components/TextField";
+import { Label } from "@/components/Label";
+import { Button } from "@/components/Button";
+import type { Meta, StoryObj } from "@storybook/react";
+import defaultMeta from "./Default.stories";
+import { NumberField } from "@/components/NumberField";
+import { TextArea } from "@/components/TextArea";
+import { Option, Select } from "@/components/Select";
+
+const meta: Meta<typeof Align> = {
+  ...defaultMeta,
+  title: "Structure/Align/Input + Button",
+  component: Align,
+  render: (props) => (
+    <Align {...props}>
+      <TextField>
+        <Label>Mail address</Label>
+      </TextField>
+      <Button>Hinzufügen</Button>
+    </Align>
+  ),
+};
+export default meta;
+
+type Story = StoryObj<typeof Align>;
+
+export const Default: Story = {};
+
+export const WithNumberField: Story = {
+  render: (props) => (
+    <Align {...props}>
+      <NumberField>
+        <Label>Number</Label>
+      </NumberField>
+      <Button>Hinzufügen</Button>
+    </Align>
+  ),
+};
+
+export const WithTextArea: Story = {
+  render: (props) => (
+    <Align {...props}>
+      <TextArea>
+        <Label>Message</Label>
+      </TextArea>
+      <Button>Hinzufügen</Button>
+    </Align>
+  ),
+};
+
+export const WithSelect: Story = {
+  render: (props) => (
+    <Align {...props}>
+      <Select>
+        <Label>Options</Label>
+        <Option>Option 1</Option>
+        <Option>Option 2</Option>
+      </Select>
+      <Button>Hinzufügen</Button>
+    </Align>
+  ),
+};
+
+export const WithoutLabel: Story = {
+  render: (props) => (
+    <Align {...props}>
+      <TextField />
+      <Button>Hinzufügen</Button>
+    </Align>
+  ),
+};
diff --git a/packages/components/src/components/Modal/Modal.module.scss b/packages/components/src/components/Modal/Modal.module.scss
index 5595cc186..7a523c839 100644
--- a/packages/components/src/components/Modal/Modal.module.scss
+++ b/packages/components/src/components/Modal/Modal.module.scss
@@ -58,7 +58,6 @@
     display: flex;
     flex-direction: column;
     padding: var(--modal--padding);
-    row-gap: var(--section--content-to-content-spacing);
   }
 
   .actionGroup {
diff --git a/packages/design-tokens/src/structure/align.yml b/packages/design-tokens/src/structure/align.yml
index 10e482ece..ff827c046 100644
--- a/packages/design-tokens/src/structure/align.yml
+++ b/packages/design-tokens/src/structure/align.yml
@@ -2,3 +2,6 @@ align:
   avatar-text:
     spacing:
       value: "{size-rem.s}"
+  input-button:
+    spacing:
+      value: "{size-px.m}"
diff --git a/packages/docs/src/content/03-components/structure/align/examples/input-button.tsx b/packages/docs/src/content/03-components/structure/align/examples/input-button.tsx
new file mode 100644
index 000000000..a42e7c7ed
--- /dev/null
+++ b/packages/docs/src/content/03-components/structure/align/examples/input-button.tsx
@@ -0,0 +1,11 @@
+import { Align } from "@mittwald/flow-react-components/Align";
+import { TextField } from "@mittwald/flow-react-components/TextField";
+import { Label } from "@mittwald/flow-react-components/Label";
+import { Button } from "@mittwald/flow-react-components/Button";
+
+<Align>
+  <TextField>
+    <Label>Weiterleitungsziel</Label>
+  </TextField>
+  <Button>Hinzufügen</Button>
+</Align>;
diff --git a/packages/docs/src/content/03-components/structure/align/overview.mdx b/packages/docs/src/content/03-components/structure/align/overview.mdx
index 970ba2af3..25a50954f 100644
--- a/packages/docs/src/content/03-components/structure/align/overview.mdx
+++ b/packages/docs/src/content/03-components/structure/align/overview.mdx
@@ -1,3 +1,9 @@
 # Avatar + Text
 
 <LiveCodeEditor />
+
+---
+
+# Input + Button
+
+<LiveCodeEditor example="input-button" />