From d552a3a9178f718f45f70df174f346d109856f58 Mon Sep 17 00:00:00 2001
From: Marco Falkenberg <m.falkenberg@mittwald.de>
Date: Tue, 19 Nov 2024 10:46:00 +0100
Subject: [PATCH] feat(Align): add Align component

---
 .../src/components/Align/Align.module.scss    | 30 ++++++++
 .../components/src/components/Align/Align.tsx | 28 +++++++
 .../components/src/components/Align/index.ts  |  4 +
 .../Align/stories/Default.stories.tsx         | 73 +++++++++++++++++++
 packages/components/vite.build.config.base.ts |  1 +
 packages/design-tokens/src/font.yml           |  2 +
 .../design-tokens/src/structure/align.yml     |  4 +
 .../structure/align/examples/default.tsx      | 14 ++++
 .../03-components/structure/align/index.mdx   |  8 ++
 .../structure/align/overview.mdx              |  3 +
 10 files changed, 167 insertions(+)
 create mode 100644 packages/components/src/components/Align/Align.module.scss
 create mode 100644 packages/components/src/components/Align/Align.tsx
 create mode 100644 packages/components/src/components/Align/index.ts
 create mode 100644 packages/components/src/components/Align/stories/Default.stories.tsx
 create mode 100644 packages/design-tokens/src/structure/align.yml
 create mode 100644 packages/docs/src/content/03-components/structure/align/examples/default.tsx
 create mode 100644 packages/docs/src/content/03-components/structure/align/index.mdx
 create mode 100644 packages/docs/src/content/03-components/structure/align/overview.mdx

diff --git a/packages/components/src/components/Align/Align.module.scss b/packages/components/src/components/Align/Align.module.scss
new file mode 100644
index 000000000..62ae51be5
--- /dev/null
+++ b/packages/components/src/components/Align/Align.module.scss
@@ -0,0 +1,30 @@
+.align {
+  display: flex;
+  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);
+    }
+  }
+
+  --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)
+    );
+  }
+
+  .avatar {
+    margin-top: calc(
+      (var(--first-two-lines-height) - var(--avatar--size--m)) / 2
+    );
+  }
+}
diff --git a/packages/components/src/components/Align/Align.tsx b/packages/components/src/components/Align/Align.tsx
new file mode 100644
index 000000000..2d470dfc1
--- /dev/null
+++ b/packages/components/src/components/Align/Align.tsx
@@ -0,0 +1,28 @@
+import type { FC, PropsWithChildren } from "react";
+import React from "react";
+import styles from "./Align.module.scss";
+import clsx from "clsx";
+import type { PropsContext } from "@/lib/propsContext";
+import PropsContextProvider from "@/lib/propsContext/PropsContextProvider";
+import type { PropsWithClassName } from "@/lib/types/props";
+
+export interface AlignProps extends PropsWithChildren, PropsWithClassName {}
+
+export const Align: FC<AlignProps> = (props) => {
+  const { children, className } = props;
+
+  const rootClassName = clsx(styles.align, className);
+
+  const propsContext: PropsContext = {
+    Text: { className: styles.text },
+    Avatar: { className: styles.avatar, size: "m" },
+  };
+
+  return (
+    <PropsContextProvider props={propsContext}>
+      <div className={rootClassName}>{children}</div>
+    </PropsContextProvider>
+  );
+};
+
+export default Align;
diff --git a/packages/components/src/components/Align/index.ts b/packages/components/src/components/Align/index.ts
new file mode 100644
index 000000000..857597903
--- /dev/null
+++ b/packages/components/src/components/Align/index.ts
@@ -0,0 +1,4 @@
+import { Align } from "./Align";
+
+export { type AlignProps, Align } from "./Align";
+export default Align;
diff --git a/packages/components/src/components/Align/stories/Default.stories.tsx b/packages/components/src/components/Align/stories/Default.stories.tsx
new file mode 100644
index 000000000..cd3ce8035
--- /dev/null
+++ b/packages/components/src/components/Align/stories/Default.stories.tsx
@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Align } from "@/components/Align";
+import { Avatar } from "@/components/Avatar";
+import { Initials } from "@/components/Initials";
+import { Text } from "@/components/Text";
+
+const meta: Meta<typeof Align> = {
+  title: "Structure/Align/Avatar + Text",
+  component: Align,
+  render: (props) => (
+    <Align {...props}>
+      <Avatar>
+        <Initials>Max Mustermann</Initials>
+      </Avatar>
+      <Text>
+        <b>Max Mustermann</b>
+        Organisationsinhaber
+      </Text>
+    </Align>
+  ),
+};
+export default meta;
+
+type Story = StoryObj<typeof Align>;
+
+export const Default: Story = {};
+
+export const Multiline: Story = {
+  render: (props) => (
+    <Align {...props}>
+      <Avatar>
+        <Initials>Max Mustermann</Initials>
+      </Avatar>
+      <Text>
+        <b>Max Mustermann</b>
+        Organisationsinhaber
+        <br />
+        max@mustermann.de
+        <br />
+        0163/123456789
+      </Text>
+    </Align>
+  ),
+};
+
+export const Singleline: Story = {
+  render: (props) => (
+    <Align {...props}>
+      <Avatar>
+        <Initials>Max Mustermann</Initials>
+      </Avatar>
+      <Text>
+        <b>Max Mustermann</b>
+      </Text>
+    </Align>
+  ),
+};
+
+export const WithoutBoldText: Story = {
+  render: (props) => (
+    <Align {...props}>
+      <Avatar>
+        <Initials>Max Mustermann</Initials>
+      </Avatar>
+      <Text>
+        Max Mustermann
+        <br />
+        Organisationsinhaber
+      </Text>
+    </Align>
+  ),
+};
diff --git a/packages/components/vite.build.config.base.ts b/packages/components/vite.build.config.base.ts
index f668a8a95..44355840a 100644
--- a/packages/components/vite.build.config.base.ts
+++ b/packages/components/vite.build.config.base.ts
@@ -37,6 +37,7 @@ export const buildConfig = (opts: Options) => {
     Alert: "./src/components/Alert/index.ts",
     AlertBadge: "./src/components/AlertBadge/index.ts",
     AlertIcon: "./src/components/AlertIcon/index.ts",
+    Align: "./src/components/Align/index.ts",
     Avatar: "./src/components/Avatar/index.ts",
     Badge: "./src/components/Badge/index.ts",
     Breadcrumb: "./src/components/Breadcrumb/index.ts",
diff --git a/packages/design-tokens/src/font.yml b/packages/design-tokens/src/font.yml
index b8abb1187..65b152f5f 100644
--- a/packages/design-tokens/src/font.yml
+++ b/packages/design-tokens/src/font.yml
@@ -8,6 +8,8 @@ line-height:
     value: 1.5
   m:
     value: "calc({font-size-text.m} * 1.5)"
+  s:
+    value: "calc({font-size-text.s} * 1.5)"
 font-size-text:
   default:
     value: "{font-size-text.m}"
diff --git a/packages/design-tokens/src/structure/align.yml b/packages/design-tokens/src/structure/align.yml
new file mode 100644
index 000000000..10e482ece
--- /dev/null
+++ b/packages/design-tokens/src/structure/align.yml
@@ -0,0 +1,4 @@
+align:
+  avatar-text:
+    spacing:
+      value: "{size-rem.s}"
diff --git a/packages/docs/src/content/03-components/structure/align/examples/default.tsx b/packages/docs/src/content/03-components/structure/align/examples/default.tsx
new file mode 100644
index 000000000..b9c0ba523
--- /dev/null
+++ b/packages/docs/src/content/03-components/structure/align/examples/default.tsx
@@ -0,0 +1,14 @@
+import { Align } from "@mittwald/flow-react-components/Align";
+import { Avatar } from "@mittwald/flow-react-components/Avatar";
+import { Initials } from "@mittwald/flow-react-components/Initials";
+import { Text } from "@mittwald/flow-react-components/Text";
+
+<Align>
+  <Avatar>
+    <Initials>Max Mustermann</Initials>
+  </Avatar>
+  <Text>
+    <b>Max Mustermann</b>
+    Organisationsinhaber
+  </Text>
+</Align>;
diff --git a/packages/docs/src/content/03-components/structure/align/index.mdx b/packages/docs/src/content/03-components/structure/align/index.mdx
new file mode 100644
index 000000000..f0eb35f4b
--- /dev/null
+++ b/packages/docs/src/content/03-components/structure/align/index.mdx
@@ -0,0 +1,8 @@
+---
+component: Align
+description:
+  Die Align Komponente dient dazu Komponenten miteinander zu kombinieren
+  (Momentan nur Avatar + Text).
+---
+
+<LiveCodeEditor editorDisabled />
diff --git a/packages/docs/src/content/03-components/structure/align/overview.mdx b/packages/docs/src/content/03-components/structure/align/overview.mdx
new file mode 100644
index 000000000..970ba2af3
--- /dev/null
+++ b/packages/docs/src/content/03-components/structure/align/overview.mdx
@@ -0,0 +1,3 @@
+# Avatar + Text
+
+<LiveCodeEditor />