feat(Align): add Align component

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

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;

packages/components/src/components/Align/index.ts

@@ -0,0 +1,4 @@
+import { Align } from "./Align";
+
+export { type AlignProps, Align } from "./Align";
+export default Align;

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 />
+        [email protected]
+        <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>
+  ),
+};

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",

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

packages/design-tokens/src/structure/align.yml

@@ -0,0 +1,4 @@
+align:
+  avatar-text:
+    spacing:
+      value: "{size-rem.s}"

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

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 />

packages/docs/src/content/03-components/structure/align/overview.mdx

@@ -0,0 +1,3 @@
+# Avatar + Text
+
+<LiveCodeEditor />