docs: add examples for forms

docs/src/demos/components/FieldGroup/bookings-form.demo.tsx

@@ -0,0 +1,84 @@
+import {
+  Button,
+  FieldGroup,
+  Inline,
+  Radio,
+  TextField,
+  ThemeProvider,
+  Stack,
+  FieldBase,
+  Input,
+  Select,
+  TextArea,
+} from '@marigold/components';
+
+import coreTheme from '@marigold/theme-core';
+
+export const BookingForm = () => (
+  <ThemeProvider theme={coreTheme}>
+    <Stack space="large">
+      <FieldGroup labelWidth="250px">
+        <Stack space="xsmall">
+          <Radio.Group label="Anrede" defaultValue="3" orientation="horizontal">
+            <Radio value="1">Herr</Radio>
+            <Radio value="2">Frau</Radio>
+            <Radio value="3">keine</Radio>
+          </Radio.Group>
+          <TextField label="Titel" />
+          <TextField label="Vorname" />
+          <TextField label="Nachname" />
+          <TextField label="Firma" />
+        </Stack>
+        <Stack space="xsmall">
+          <TextField label="Straße" />
+          {/* This shouldn't be used, we need to fix it */}
+          <FieldBase label="PLZ / Ort">
+            <Inline space="xsmall">
+              <Input width="50px" />
+              <Input />
+            </Inline>
+          </FieldBase>
+          <TextField label="Adresszusatz" />
+          <Select label="Land">
+            <Select.Option key={1}>Deutschland</Select.Option>
+            <Select.Option key={2}>Schweiz</Select.Option>
+            <Select.Option key={3}>Österreich</Select.Option>
+          </Select>
+        </Stack>
+        <Stack space="xsmall">
+          <TextField type="tel" label="Telefon" />
+          <TextField label="Fax" />
+          <TextField type="email" label="E-Mail" />
+        </Stack>
+        <Stack space="xsmall">
+          {/* This shouldn't be used, we need to fix it */}
+          <FieldBase label="nach Kundennummern suchen">
+            <Inline space="xsmall">
+              <Input type="search" width="150px" />
+              <Button variant="secondary" size="small">
+                Suchen
+              </Button>
+              <Button variant="secondary" size="small">
+                Felder leeren
+              </Button>
+            </Inline>
+          </FieldBase>
+          <TextArea
+            label="Interne Info zum Kunden"
+            description="noch 1000 Zeichen"
+          />
+        </Stack>
+        <Stack space="xsmall">
+          <TextField label="Buchungszeichen" />
+          <TextArea label="Bestellbemerkung" description="noch 1000 Zeichen" />
+        </Stack>
+        <Inline space="small" alignX="center">
+          <Button variant="primary" type="submit">
+            Speichern
+          </Button>
+          <Button variant="link">| Zurück</Button>
+        </Inline>
+      </FieldGroup>
+    </Stack>
+  </ThemeProvider>
+);

docs/src/demos/components/FieldGroup/index.ts

@@ -0,0 +1,2 @@
+export * from './organization-search.demo';
+export * from './bookings-form.demo';

docs/src/demos/components/FieldGroup/organization-search.demo.tsx

@@ -0,0 +1,50 @@
+import {
+  Checkbox,
+  FieldGroup,
+  Stack,
+  Select,
+  TextField,
+  ThemeProvider,
+  CheckboxGroup,
+  Button,
+} from '@marigold/components';
+
+import coreTheme from '@marigold/theme-core';
+
+export const OrganizationSearch = () => {
+  return (
+    <ThemeProvider theme={coreTheme}>
+      <Stack space="large" alignX="center">
+        <Stack space="xsmall">
+          <FieldGroup labelWidth="300px">
+            <TextField label="Suche in Veranstaltername / Kontaktadresse" />
+            <TextField type="tel" label="Telefon" />
+            <TextField label="PLZ" />
+            <Select label="Status">
+              <Select.Option key={1}>alle</Select.Option>
+              <Select.Option key={2}>produktiv</Select.Option>
+              <Select.Option key={3}>freigeschaltet</Select.Option>
+              <Select.Option key={4}>inaktiv</Select.Option>
+              <Select.Option key={5}>gesperrt</Select.Option>
+            </Select>
+            <Select label="Zahlart">
+              <Select.Option key={1}>alle</Select.Option>
+              <Select.Option key={2}>Lastschrift</Select.Option>
+              <Select.Option key={3}>Auszahlung gesperrt</Select.Option>
+              <Select.Option key={4}>
+                produktiv / Bankverbindung fehlt
+              </Select.Option>
+            </Select>
+            <CheckboxGroup label>
+              <Checkbox value="1">nur Eigene anzeigen</Checkbox>
+              <Checkbox value="2">bilateral anzeigen</Checkbox>
+            </CheckboxGroup>
+          </FieldGroup>
+        </Stack>
+        <Button variant="primary" type="submit">
+          Suchen
+        </Button>
+      </Stack>
+    </ThemeProvider>
+  );
+};

docs/src/demos/components/index.ts

@@ -20,6 +20,7 @@ export * from './Container';
 export * from './Dialog';
 export * from './Divider';
 export * from './Footer';
+export * from './FieldGroup';
 export * from './Header';
 export * from './Headline';
 export * from './Icon';

docs/src/pages/recipes/form-recipes.mdx

@@ -0,0 +1,28 @@
+---
+title: Forms
+caption: Here you can find some recipes for some form components
+---
+
+We used for these examples form components like `<FieldGroup>`, [`<TextField>`](/components/text-field/),[`<Select>`](/components/select/), [`<Checkbox>`](/components/checkbox/) and [`<Radio>`](/components/radio/).
+
+`<FieldGroup>` is wrapped around the other components as you can see in the examples below. With its prop `labelWidth` we set the width of the label to a certain amount, so it has a clean look.
+
+<Message messageTitle="Note" variant="info">
+  Please note that the form components need to have a label prop.
+</Message>
+
+## Organization Search Form
+
+Example from the typical Search Form from the Core.
+
+```tsx preview file=components/FieldGroup/organization-search.demo.tsx
+
+```
+
+## Bookings Formular
+
+This Example shows the Bookings Formular from an Organization under Administration.
+
+```tsx preview file=components/FieldGroup/bookings-form.demo.tsx
+
+```

docs/src/pages/recipes/table-recipes.mdx

@@ -1,5 +1,5 @@
 ---
-title: Table Use Cases
+title: Table
 caption: Here you can find some recipes for the table
 ---