docs: segementedControl

packages/docs/src/content/03-components/form-controls/segmented-control/examples/changeContent.tsx

@@ -0,0 +1,46 @@
+import {
+  Radio,
+  RadioGroup,
+} from "@mittwald/flow-react-components/RadioGroup";
+import { Label } from "@mittwald/flow-react-components/Label";
+import { useState } from "react";
+import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription";
+import { ColumnLayout } from "@mittwald/flow-react-components/ColumnLayout";
+import { TextField } from "@mittwald/flow-react-components/TextField";
+import { Section } from "@mittwald/flow-react-components/Section";
+
+export default () => {
+  const [showContent, setShowContent] =
+    useState<boolean>(false);
+
+  return (
+    <Section>
+      <RadioGroup
+        variant="segmented"
+        defaultValue="lastschrift"
+        s={[1, 1]}
+        onChange={() => setShowContent(!showContent)}
+      >
+        <Label>Zahlungsart</Label>
+        <Radio value="lastschrift">Lastschrift</Radio>
+        <Radio value="Rechnung">Rechnung</Radio>
+        {showContent && (
+          <FieldDescription>
+            Wähle bitte eine Bankverbindung für die
+            Bezahlung mit SEPA-Lastschrift aus.
+          </FieldDescription>
+        )}
+      </RadioGroup>
+      {showContent && (
+        <ColumnLayout>
+          <TextField isRequired>
+            <Label>Kontoinhaber</Label>
+          </TextField>
+          <TextField isRequired>
+            <Label>IBAN</Label>
+          </TextField>
+        </ColumnLayout>
+      )}
+    </Section>
+  );
+};

packages/docs/src/content/03-components/form-controls/segmented-control/examples/compact.tsx

@@ -0,0 +1,29 @@
+import {
+  Radio,
+  RadioGroup,
+} from "@mittwald/flow-react-components/RadioGroup";
+import { Label } from "@mittwald/flow-react-components/Label";
+import { ColumnLayout } from "@mittwald/flow-react-components/ColumnLayout";
+
+<ColumnLayout m={[1, 1]}>
+  <RadioGroup
+    variant="segmented"
+    defaultValue="entwickler"
+    containerBreakpointSize="xl"
+  >
+    <Label>Rolle</Label>
+    <Radio value="entwickler">Entwickler</Radio>
+    <Radio value="geschäftsführer">Geschäftsführer</Radio>
+    <Radio value="andere">Andere</Radio>
+  </RadioGroup>
+  <RadioGroup
+    variant="segmented"
+    defaultValue="entwickler"
+    containerBreakpointSize="xs"
+  >
+    <Label>Rolle</Label>
+    <Radio value="entwickler">Entwickler</Radio>
+    <Radio value="geschäftsführer">Geschäftsführer</Radio>
+    <Radio value="andere">Andere</Radio>
+  </RadioGroup>
+</ColumnLayout>;

packages/docs/src/content/03-components/form-controls/segmented-control/examples/default.tsx

@@ -0,0 +1,15 @@
+import {
+  Radio,
+  RadioGroup,
+} from "@mittwald/flow-react-components/RadioGroup";
+import { Label } from "@mittwald/flow-react-components/Label";
+
+<RadioGroup
+  variant="segmented"
+  defaultValue="lastschrift"
+  s={[1, 1]}
+>
+  <Label>Zahlungsart</Label>
+  <Radio value="lastschrift">Lastschrift</Radio>
+  <Radio value="Rechnung">Rechnung</Radio>
+</RadioGroup>;

packages/docs/src/content/03-components/form-controls/segmented-control/examples/fieldDescription.tsx

@@ -0,0 +1,15 @@
+import {
+  Radio,
+  RadioGroup,
+} from "@mittwald/flow-react-components/RadioGroup";
+import { Label } from "@mittwald/flow-react-components/Label";
+import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription";
+
+<RadioGroup variant="segmented" defaultValue="cloud">
+  <Label>Speicherplatz</Label>
+  <Radio value="cloud">Cloud</Radio>
+  <Radio value="lokal">Lokal</Radio>
+  <FieldDescription>
+    Speicherplatz kann jederzeit geändert werden
+  </FieldDescription>
+</RadioGroup>;

packages/docs/src/content/03-components/form-controls/segmented-control/examples/playground.tsx

@@ -0,0 +1,11 @@
+import {
+  Radio,
+  RadioGroup,
+} from "@mittwald/flow-react-components/RadioGroup";
+import { Label } from "@mittwald/flow-react-components/Label";
+
+<RadioGroup variant="segmented" defaultValue="ssh-key">
+  <Label>Authentifizierungsart</Label>
+  <Radio value="ssh-key">SSH-Key</Radio>
+  <Radio value="passwort">Passwort</Radio>
+</RadioGroup>;

packages/docs/src/content/03-components/form-controls/segmented-control/examples/states.tsx

@@ -0,0 +1,27 @@
+import {
+  Radio,
+  RadioGroup,
+} from "@mittwald/flow-react-components/RadioGroup";
+import { Label } from "@mittwald/flow-react-components/Label";
+import { Section } from "@mittwald/flow-react-components/Section";
+
+<Section>
+  <RadioGroup variant="segmented" defaultValue="dev">
+    <Label>Rolle</Label>
+    <Radio value="entwickler">Entwickler</Radio>
+    <Radio value="designer">Designer</Radio>
+    <Radio value="geschäftsführer">Geschäftsführer</Radio>
+    <Radio value="andere">Andere</Radio>
+  </RadioGroup>
+  <RadioGroup
+    variant="segmented"
+    defaultValue="dev"
+    isDisabled
+  >
+    <Label>Rolle</Label>
+    <Radio value="entwickler">Entwickler</Radio>
+    <Radio value="designer">Designer</Radio>
+    <Radio value="geschäftsführer">Geschäftsführer</Radio>
+    <Radio value="andere">Andere</Radio>
+  </RadioGroup>
+</Section>;

packages/docs/src/content/03-components/form-controls/segmented-control/examples/textDo.tsx

@@ -0,0 +1,11 @@
+import {
+  Radio,
+  RadioGroup,
+} from "@mittwald/flow-react-components/RadioGroup";
+import { Label } from "@mittwald/flow-react-components/Label";
+
+<RadioGroup variant="segmented" defaultValue="individuell">
+  <Label>Einstellung</Label>
+  <Radio value="standard">Standard</Radio>
+  <Radio value="individuell">Individuell</Radio>
+</RadioGroup>;

packages/docs/src/content/03-components/form-controls/segmented-control/examples/textDont.tsx

@@ -0,0 +1,13 @@
+import {
+  Radio,
+  RadioGroup,
+} from "@mittwald/flow-react-components/RadioGroup";
+import { Label } from "@mittwald/flow-react-components/Label";
+
+<RadioGroup variant="segmented" defaultValue="individuell">
+  <Label>Wähle deine Einstellungsart aus:</Label>
+  <Radio value="standard">Standard-Einstellungen</Radio>
+  <Radio value="individuell">
+    Individuell einstellbare Einstellungen
+  </Radio>
+</RadioGroup>;

packages/docs/src/content/03-components/form-controls/segmented-control/guidelines.mdx

@@ -0,0 +1,131 @@
+# Grundlagen
+
+## Best practices
+
+Achte bei der Verwendung eines SegmentedControl darauf, dass...
+
+- maximal 5 Optionen angezeigt werden.
+- die Optionen so kurz wie möglich benannt werden. 1 bis 3 Wörter sollten
+ausreichen.
+- ein [Label](/03-components/content/label) verwendet wird, falls die Optionen
+im Zusammenhang nicht verstanden werden. Falls kein Label verwendet wird, muss
+ein AriaLabel gesetzt werden.
+- eine logische Reihenfolge gewählt wird. Häufig sollte die wichtigste Option an
+erster Stelle stehen.
+
+## Verwendung
+
+Verwende einen SegmentedControl, um...
+
+- eine platzsparende Einfachauswahlmöglichkeit anzubieten.
+- einen Teil des Contents unterhalb zu ändern oder zu filtern. Ein
+SegmentedControl ist kein Ersatz für [Tabs](/03-components/navigation/tabs),
+welche den gesamten Content einer Seite ändern.
+
+## SegmentedControl vs. RadioGroup
+
+Flow bietet verschiedene Auswahl-Components an. Das SegmentedControl und die
+[RadioGroup](/03-components/form-controls/radio-group) haben viele
+Gemeinsamkeiten. Die Cards unter dem Text geben hilfreiche Anhaltspunkte zur
+Unterscheidung.
+
+<DoAndDont>
+  <Info heading="Verwende ein SegmentedControl, um z. B. ...">
+    - eine Einfachauswahl von 2 bis 5 Optionen anzuzeigen. - Optionen anzuzeigen,
+    die aus 1 bis 2 Wörtern bestehen.
+    - Optionen anzuzeigen, die den darunterliegenden Inhalt verändern.
+  </Info>
+
+  <Info heading="Verwende eine RadioGroup, um z. B. ...">
+    - eine Einfachauswahl von 2 bis ungefähr 7 Optionen anzuzeigen.
+    - Optionen mit unterschiedlicher Textlänge darzustellen.
+  </Info>
+</DoAndDont>
+
+---
+
+# Anwendung
+
+## Position
+
+Das SegmentedControl wird häufig in Formularen oder als Ansichtsfilter
+verwendet. Bei der Positionierung ist Folgendes zu beachten:
+
+- In der Regel nimmt das SegmentedControl die gesamte Breite des
+Content-Bereiches ein. In Ausnahmefällen kann das SegmentedControl auch
+schmaler dargestellt werden, z. B. wenn es nicht in Formularen, sondern nur
+als Ansichtsfilter über Diagrammen verwendet wird.
+- Wenn Inhalte mithilfe des SegmentedControls geändert werden sollen, muss das
+SegmentedControl direkt über dem zu ändernden Inhaltsbereich stehen.
+
+<Do example="changeContent">
+  Das SegmentedControl steht über dem angepassten Inhalt.
+</Do>
+
+## Hierarchie
+
+Ein SegmentedControl darf maximal 5 Optionen enthalten. Bei der Reihenfolge der
+Optionen ist folgendes zu beachten:
+
+- Die wichtigste Option sollte an erster Stelle stehen und wird automatisch
+vorselektiert.
+- Nicht nur das gesamte SegmentedControl kann disabled sein, sondern auch
+einzelne Optionen. Wenn eine Option **disabled** ist, sollte es von der
+Ausgangssituation für den User logisch sein, warum er diese Option nicht
+auswählen kann.
+
+## Feedback
+
+Der selektierte Zustand einer Option ist an der geänderten Farbe und dem
+Häkchensymbol zu erkennen. Aus diesem Grund sollte das Icon nicht verändert
+werden. In der aktuellen Version des SegmentedControls sind keine dekorativen
+oder alleinstehenden Icons vorgesehen.
+
+---
+
+# Writing guidelines
+
+## Text
+
+Das SegmentedControl hat Text in den Optionen und im
+[Label](/03-components/content/label). Dabei ist Folgendes zu beachten:
+
+- Wenn ein Label verwendet wird, sollte es so kurz wie möglich ausformuliert
+sein. Der Text des Labels sollte nie mehr als 1-3 Wörter umfassen. Ein Label
+kann ausgelassen werden, wenn die Optionen auch ohne Label ausreichend
+verständlich sind.
+- Im besten Fall sollte eine Option aus einem selbsterklärenden Wort bestehen.
+Wenn nötig, können auch 2-3 Wörter verwendet werden. Es ist jedoch darauf zu
+achten, dass der Text nicht zweizeilig wird und zusammen mit dem Icon genügend
+Platz zur Verfügung steht.
+
+<DoAndDont>
+  <Do example="textDo">
+    Das Label und die Antwortmöglichkeiten sind prägnant und verständlich.
+  </Do>
+  <Dont example="textDont">
+    Kürzer ist oft besser. Versuche, so wenig Wörter wie möglich im Label
+    und in den Optionen zu verwenden.
+  </Dont>
+</DoAndDont>
+
+---
+
+# Behavior
+
+## Responsive layout
+
+Sobald die Breite des Containers kleiner als 551px ist, werden alle Optionen im
+SegmentedControl untereinander dargestellt. Dieser Wert kann mit
+`containerBreakpointSize` angepasst werden. Auch bei schmaleren Containerns
+sollte vermieden werden, dass der Text zweizeilig wird oder nicht mehr lesbar
+ist.
+
+<Info mobile heading="Mobile Variante" example="playground" />
+
+---
+
+# Accessibility
+
+Falls SegmentedControl ohne [Label](/03-components/content/label) verwendet
+wird, muss ein AriaLabel gepflegt werden.

packages/docs/src/content/03-components/form-controls/segmented-control/index.mdx

@@ -0,0 +1,9 @@
+---
+component: SegmentedControl
+description:
+  Ein SegmentedControl bietet dem User eine Einfachauswahl von 2 bis 5 kurzen
+  Optionen. Je nach Einsatzzweck kann die Auswahl des Users den Inhalt unter dem
+  Segmented Control verändern.
+---
+
+<LiveCodeEditor editorDisabled />

packages/docs/src/content/03-components/form-controls/segmented-control/overview.mdx

@@ -0,0 +1,56 @@
+# Playground
+
+Verwende `<RadioGroup variant="segmented" />`, um ein SegmentedControl
+anzuzeigen.
+
+<LiveCodeEditor example="playground" />
+
+---
+
+# Mit Inhaltsänderung
+
+Unterhalb des SegmentedControls kann sich der Inhalt je nach Bedarf ändern.
+Verwende dafür ...`<RadioGroup variant="segmented" />`
+
+<LiveCodeEditor example="changeContent" editorCollapsed />
+
+---
+
+# Kombiniere mit...
+
+## FieldDescription
+
+Unterhalb der `<RadioGroup variant="segmented" />` kann eine hilfreiche
+`<FieldDescription />` eingebaut werden.
+
+<LiveCodeEditor example="fieldDescription" editorCollapsed />
+
+---
+
+# States
+
+Eine SegmentedControl hat 2 States: **Default** und **Disabled**. Die Optionen
+verfügen über die States **Default**, **Hover**, **Pressed**, **Disabled**,
+**Focused** und **Selected**.
+
+<LiveCodeEditor example="states" editorCollapsed />
+
+- **Selected**: Wird eine Option vom User ausgewählt, so erhält er den Zustand
+  Selected. Es kann immer nur eine Option diesen Status haben. Zu Beginn ist
+  immer die erste Option vorausgewählt.
+
+- **Disabled**: Einzelne Optionen oder die gesamte SegmentedControl können den
+  State Disabled haben. Wenn die SegmentedControl den State Disabled erhält,
+  erhalten automatisch auch alle Optionen ebenfalls diesen State, sodass sie vom
+  User nicht ausgewählt werden können.
+
+---
+
+# Container Breakpoint Size
+
+Das SegmentedControl springt in eine kompakte Variante um, sobald der Container
+kleiner als der gesetzte Breakpoint ist. Im Default passiert das bei 550px, was
+der `containerBreakpointSize=”m”` entspricht. Über diese Property kann die Größe
+mit Werten zwischen `xs` und `xl` überschrieben werden.
+
+<LiveCodeEditor example="compact" editorCollapsed />