Add button docs

packages/docs/src/app/_components/layout/MainContent/MainContent.tsx

@@ -21,7 +21,7 @@ export const MainContent: FC<Props> = (props) => {
   return (
     <>
       <LayoutCard>
-        <ColumnLayout m={component ? [1, 1] : [1]}>
+        <ColumnLayout l={component ? [1, 1] : [1]} m={[1]}>
           <Section>
             <Heading level={1} levelVisual={1}>
               {mdxFile.getTitle()}

packages/docs/src/content/02-foundations/content-guidelines/fehlermeldungen/index.mdx

@@ -21,12 +21,8 @@ dass es in manchen Fällen ausreichend sein kann, nur die Lösung zu nennen.
   <Dont
     exampleText="Wir unterstützen die Formatierung nicht. Bitte gib eine E-Mail-Adresse im Format
 [email protected] ein."
-  >
-    #### Don't
-  </Dont>
-  <Do exampleText="Bitte gib eine E-Mail-Adresse im Format [email protected] ein.">
-    #### Do
-  </Do>
+  />
+  <Do exampleText="Bitte gib eine E-Mail-Adresse im Format [email protected] ein." />
 </DoAndDont>
 
 ## Verständliche Sprache, keine Fachsprache
@@ -36,12 +32,8 @@ verständliche Sprache. Nutzer verstehen so am ehesten, was schiefgelaufen ist
 und wie sie das Problem lösen können.
 
 <DoAndDont>
-  <Dont exampleText="Fehlercode 503: Verbindung zum Server fehlgeschlagen.">
-    #### Don't
-  </Dont>
-  <Do exampleText="Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut.">
-    #### Do
-  </Do>
+  <Dont exampleText="Fehlercode 503: Verbindung zum Server fehlgeschlagen." />
+  <Do exampleText="Wir konnten keine Verbindung zum Server herstellen. Bitte versuche es erneut." />
 </DoAndDont>
 
 ## Schuldzuweisungen vermeiden
@@ -54,15 +46,11 @@ anstatt ihm ein Schuldgefühl zu vermitteln oder seine Frustration zu verstärke
   <Dont
     exampleText="Du hast ein ungültiges Bild hochgeladen. Überprüfe die Dateigröße und versuche
 es erneut."
-  >
-    #### Don't
-  </Dont>
+  />
   <Do
     exampleText="Wir konnten das Bild nicht hochladen. Bitte überprüfe die Dateigröße und
 versuche es erneut."
-  >
-    #### Do
-  </Do>
+  />
 </DoAndDont>
 
 ## Fehler eingestehen, Verständnis erleichtern
@@ -73,15 +61,11 @@ schiefgegangen?" und "Wer muss handeln, um es zu beheben?" einfach und
 verständlich beantwortet.
 
 <DoAndDont>
-  <Dont exampleText="Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut.">
-    #### Don't
-  </Dont>
+  <Dont exampleText="Fehler beim Zurücksetzen des Passworts. Bitte versuche es erneut." />
   <Do
     exampleText="Wir konnten dein Passwort nicht zurücksetzen. Bitte überprüfe die E-Mail-Adresse
 und versuche es erneut."
-  >
-    #### Do
-  </Do>
+  />
 </DoAndDont>
 
 ## Keine ungerechtfertigten Entschuldigungen
@@ -94,14 +78,12 @@ Problems ausführen muss.
 
 <DoAndDont>
   <Dont exampleText="Es tut uns leid, wir unterstützen das Dateiformat nicht.">
-    #### Don't
 
     Entschuldige dich nicht für Kleinigkeiten oder wenn das System keine Schuld
     trägt.
 
   </Dont>
   <Do exampleText="Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.">
-    #### Do
 
     Entschuldige Dich bei ernsthaften Fehlern, z.B. einem systembedingten Verlust von Daten.
 
@@ -118,10 +100,8 @@ wie der wahrscheinlichste Grund zu beheben ist.
   <Dont exampleText="Das eingegebene Passwort entspricht nicht den Mindestanforderungen. Stelle
 sicher, dass es min. 8 Zeichen, einen Groß- und Kleinbuchstaben, eine Ziffer und
 ein Sonderzeichen enthält.">
-    #### Don't
   </Dont>
   <Do exampleText="Dein Passwort muss mindestens 8 Zeichen enthalten.">
-    #### Do
 
   </Do>
 </DoAndDont>
@@ -136,10 +116,8 @@ Benutzeroberfläche finden kann.
 <DoAndDont>
   <Dont exampleText="Wir konnten die Datei „example_file-20.4.24.xy“ nicht hochladen. Bitte verwende
 eine Datei vom Typ XY.">
-    #### Don't
   </Dont>
   <Do exampleText="Wir konnten die Datei nicht hochladen. Bitte verwende eine Datei vom Typ XY.">
-    #### Do
 
   </Do>
 </DoAndDont>
@@ -150,10 +128,8 @@ Fehlermeldungen werden aktiv formuliert, um das Verständnis zu erleichtern.
 
 <DoAndDont>
   <Dont exampleText="Es werden nur Dateien vom Typ XY unterstützt.">
-    #### Don't
   </Dont>
   <Do exampleText="Wir unterstützen nur Dateien vom Typ XY.">
-    #### Do
 
   </Do>
 </DoAndDont>
@@ -168,11 +144,9 @@ die es keine direkte Lösung gibt, nicht immer möglich ist.
 
 <DoAndDont>
   <Dont exampleText="Durch ein Problem mit dem Server ist die Verbindung fehlgeschlagen.">
-    #### Don't
   </Dont>
   <Do exampleText="Es tut uns leid, wir konnten keine Verbindung zum Server herstellen. Bitte
 versuche es erneut.">
-    #### Do
 
   </Do>
 </DoAndDont>

packages/docs/src/content/03-components/actions/button/examples/dark.tsx

@@ -1,11 +1,11 @@
 import Button from "@mittwald/flow-react-components/Button";
 
 <Row>
-  <Button color="dark">Fortfahren/Aktion</Button>
+  <Button color="dark">Dark</Button>
   <Button variant="soft" color="dark">
-    Fortfahren/Aktion
+    Dark
   </Button>
   <Button variant="plain" color="dark">
-    Fortfahren/Aktion
+    Dark
   </Button>
 </Row>;

packages/docs/src/content/03-components/actions/button/examples/default.tsx

@@ -5,5 +5,5 @@ import Button from "@mittwald/flow-react-components/Button";
     alert("Button gedrückt");
   }}
 >
-  Fortfahren/Aktion
+  Button
 </Button>;

packages/docs/src/content/03-components/actions/button/examples/hierarchy-order-do.tsx

@@ -0,0 +1,9 @@
+import Button from "@mittwald/flow-react-components/Button";
+
+<Row>
+  <Button variant="soft" color="secondary">
+    Pausieren
+  </Button>
+  <Button color="secondary">Stoppen</Button>
+  <Button>Starten</Button>
+</Row>;

packages/docs/src/content/03-components/actions/button/examples/hierarchy-order-dont.tsx

@@ -0,0 +1,9 @@
+import Button from "@mittwald/flow-react-components/Button";
+
+<Row>
+  <Button color="secondary">Stoppen</Button>
+  <Button variant="soft" color="secondary">
+    Pausieren
+  </Button>
+  <Button>Starten</Button>
+</Row>;

packages/docs/src/content/03-components/actions/button/examples/hierarchy-soft-do.tsx

@@ -0,0 +1,8 @@
+import Button from "@mittwald/flow-react-components/Button";
+
+<Row>
+  <Button variant="soft" color="secondary">
+    Zurück
+  </Button>
+  <Button>Weiter</Button>
+</Row>;

packages/docs/src/content/03-components/actions/button/examples/hierarchy-solid-do.tsx

@@ -0,0 +1,8 @@
+import Button from "@mittwald/flow-react-components/Button";
+
+<Row>
+  <Button color="secondary">
+    Speichern & weitere anlegen
+  </Button>
+  <Button color="accent">Anlegen</Button>
+</Row>;

packages/docs/src/content/03-components/actions/button/examples/icon-clarity-do.tsx

@@ -0,0 +1,16 @@
+import Button from "@mittwald/flow-react-components/Button";
+import TextField from "@mittwald/flow-react-components/TextField";
+import {
+  IconFilter,
+  IconSorting,
+} from "@mittwald/flow-react-components/Icons";
+
+<Row>
+  <TextField value="Suche" />
+  <Button variant="plain">
+    <IconSorting />
+  </Button>
+  <Button variant="plain">
+    <IconFilter />
+  </Button>
+</Row>;

packages/docs/src/content/03-components/actions/button/examples/icon-clarity-dont.tsx

@@ -0,0 +1,18 @@
+import Button from "@mittwald/flow-react-components/Button";
+import TextField from "@mittwald/flow-react-components/TextField";
+import { IconCat, IconDog } from "@tabler/icons-react";
+import Icon from "@mittwald/flow-react-components/Icon";
+
+<Row>
+  <TextField value="Suche" />
+  <Button variant="plain">
+    <Icon>
+      <IconCat />
+    </Icon>
+  </Button>
+  <Button variant="plain">
+    <Icon>
+      <IconDog />
+    </Icon>
+  </Button>
+</Row>;

packages/docs/src/content/03-components/actions/button/examples/icon-context-menu-do.tsx

@@ -0,0 +1,32 @@
+import Button from "@mittwald/flow-react-components/Button";
+import Text from "@mittwald/flow-react-components/Text";
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+} from "@mittwald/flow-react-components/ContextMenu";
+import MenuItem from "@mittwald/flow-react-components/MenuItem";
+import {
+  IconChevronDown,
+  IconEmail,
+} from "@mittwald/flow-react-components/Icons";
+import { IconAt } from "@tabler/icons-react";
+import { Icon } from "@mittwald/flow-react-components/Icon";
+
+<ContextMenuTrigger>
+  <Button color="accent">
+    <Text>E-Mail-Addresse anlegen</Text>
+    <IconChevronDown />
+  </Button>
+  <ContextMenu>
+    <MenuItem id="1">
+      <Icon>
+        <IconAt />
+      </Icon>
+      <Text>Weiterleitungsaddresse</Text>
+    </MenuItem>
+    <MenuItem id="2">
+      <IconEmail />
+      <Text>E-Mail-Adresse</Text>
+    </MenuItem>
+  </ContextMenu>
+</ContextMenuTrigger>;

packages/docs/src/content/03-components/actions/button/examples/icon.tsx

@@ -1,6 +1,11 @@
 import Button from "@mittwald/flow-react-components/Button";
 import { IconHome } from "@mittwald/flow-react-components/Icons";
 
-<Button aria-label="Home">
-  <IconHome />
-</Button>;
+<Row>
+  <Button size="s" aria-label="Home">
+    <IconHome />
+  </Button>
+  <Button aria-label="Home">
+    <IconHome />
+  </Button>
+</Row>;

packages/docs/src/content/03-components/actions/button/examples/iconText.tsx

@@ -1,8 +1,25 @@
 import Button from "@mittwald/flow-react-components/Button";
 import Text from "@mittwald/flow-react-components/Text";
-import { IconChevronDown } from "@mittwald/flow-react-components/Icons";
+import {
+  IconChevronDown,
+  IconClose,
+} from "@mittwald/flow-react-components/Icons";
 
-<Button>
-  <Text>E-Mail-Adresse hinzufügen</Text>
-  <IconChevronDown />
-</Button>;
+<Row>
+  <Button size="s">
+    <Text>E-Mail hinzufügen</Text>
+    <IconChevronDown />
+  </Button>
+  <Button>
+    <Text>E-Mail hinzufügen</Text>
+    <IconChevronDown />
+  </Button>
+  <Button size="s">
+    <Text>Filter</Text>
+    <IconClose />
+  </Button>
+  <Button>
+    <Text>Filter</Text>
+    <IconClose />
+  </Button>
+</Row>;

packages/docs/src/content/03-components/actions/button/examples/light.tsx

@@ -1,12 +1,11 @@
 import Button from "@mittwald/flow-react-components/Button";
 
 <Row>
-  <Button color="light">Fortfahren/Aktion</Button>
+  <Button color="light">Light</Button>
   <Button variant="soft" color="light">
-    Fortfahren/Aktion
+    Light
   </Button>
   <Button variant="plain" color="light">
-    Fortfahren/Aktion
+    Light
   </Button>
-  ;
 </Row>;

packages/docs/src/content/03-components/actions/button/examples/mobile-width-group-do.tsx

@@ -0,0 +1,20 @@
+import Button from "@mittwald/flow-react-components/Button";
+import TextField from "@mittwald/flow-react-components/TextField";
+import Label from "@mittwald/flow-react-components/Label";
+import Heading from "@mittwald/flow-react-components/Heading";
+import ActionGroup from "@mittwald/flow-react-components/ActionGroup";
+
+<StaticModal>
+  <div className="flow--modal--content">
+    <Heading>Projekt anlegen</Heading>
+    <TextField>
+      <Label>Projekt Name</Label>
+    </TextField>
+  </div>
+  <ActionGroup className="flow--modal--action-group">
+    <Button>Weiter</Button>
+    <Button variant="soft" color="secondary">
+      Abbrechen
+    </Button>
+  </ActionGroup>
+</StaticModal>;

packages/docs/src/content/03-components/actions/button/examples/mobile-width-standard-do.tsx

@@ -0,0 +1,34 @@
+import Button from "@mittwald/flow-react-components/Button";
+import HeaderNavigation from "@mittwald/flow-react-components/HeaderNavigation";
+import {
+  IconMenu,
+  IconSearch,
+  IconSupport,
+} from "@mittwald/flow-react-components/Icons";
+import LayoutCard from "@mittwald/flow-react-components/LayoutCard";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Text from "@mittwald/flow-react-components/Text";
+import Section from "@mittwald/flow-react-components/Section";
+
+<Section style={{ height: "100%" }}>
+  <HeaderNavigation
+    aria-label="Header navigation"
+    color="light"
+    style={{ alignSelf: "flex-end" }}
+  >
+    <Button>
+      <IconSearch />
+    </Button>
+    <Button>
+      <IconSupport />
+    </Button>
+    <Button>
+      <IconMenu />
+    </Button>
+  </HeaderNavigation>
+  <Button color="accent">Projekt anlegen</Button>
+  <LayoutCard style={{ width: "100%", flexGrow: "1" }}>
+    <Heading>Projekte</Heading>
+    <Text>...</Text>
+  </LayoutCard>
+</Section>;