# Informationskonzept

Das Informationskonzept beschreibt, wie der User im mStudio über alle relevanten
Informationen informiert wird – sowohl durch selbst initiierte Aktionen als auch
durch systemseitig ausgelöste Ereignisse. Dazu zählen laufende und
abgeschlossene Prozesse sowie wichtige Systemmeldungen (z. B. „Speicherplatz ist
voll“). Es definiert, wie Feedback zu Prozessen gegeben wird und wie
Benachrichtigungen gestaltet sind.

---

# Status

Das Informationskonzept unterscheidet verschiedene Status. Jeder Status folgt
dabei einem definierten Kombination aus
[Color](/02-foundations/01-design/02-colors)- und
[Icon](/04-components/content/icon#icon-bibliothek), um eine eindeutige und
schnelle Erkennung zu ermöglichen.

Wenn zwei Status inhaltlich miteinander konkurrieren, wird immer der
handlungsentscheidende angezeigt. Zum Beispiel überschreibt ein Danger stets
Warning und Info.

| Status                                                    | Einsatz                                                      | Beispiel                                                                                                                                     |
| --------------------------------------------------------- | ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
| Info               | Sachliche Hinweise/Informationen ohne akuten Handlungsbedarf | - Update verfügbar<br />- Download wird vorbereitet<br />- Kündigung vorgemerkt<br />- Neue Nachricht im Ticket<br />- Aktive Anlegeprozesse |
| Warning         | Handlungsempfehlung oder Hinweis möglicher Konflikt          | - Speicherplatz fast voll<br />- E-Mail Versand gesperrt<br />- Domain unverifiziert<br />- Zertifikat konnte nicht ausgestellt werden       |
| Danger           | Kritisches Problem, das sofortiges Handeln erfordert         | - Speicherplatz voll<br />- E-Mail Empfang deaktiviert<br />- Webserver/Cronjobs deaktiviert                                                 |
| Success         | Erfolgreich abgeschlossene Ereignisse                        | - Erfolgreich installiert<br />- Erfolgreich angelegt<br />- Erfolgreich erstellt<br />- Domain verifiziert                                  |
| Unavailable | Nicht verfügbare Elemente                                    | - Fehlende Berechtigungen<br />- Gelöschtes Objekt                                                                                           |

---

# Alert

Ein [Alert](/04-components/status/alert) wird dort eingesetzt, wo unmittelbare
Aufmerksamkeit erforderlich ist – etwa bei Systemfehlern oder wichtigen
Systeminformationen. Er übermittelt die Information in wenigen Sätzen und gibt,
wenn möglich, eine Handlungsempfehlung. Diese kann mithilfe eines
[Links](/04-components/navigation/link) oder eines
[Buttons](/04-components/actions/button) unterstützt werden. Alerts sollten
stets in der Nähe des betroffenen Inhalts platziert werden (s.
[Alert: Position](/04-components/status/alert#position)).

```tsx
import {
  Alert,
  Heading,
  Text,
  Content,
  Button,
  Link,
} from "@mittwald/flow-react-components";

<>
  <Alert>
    <Heading>E-Mail-Adresse wurde archiviert</Heading>
    <Content>
      <Text>
        Da deine Domain gelöscht wurde, wurde diese
        E-Mail-Adresse archiviert. Um E-Mails empfangen und
        senden zu können musst du die Adresse wieder
        umbenennen.
      </Text>
    </Content>
  </Alert>

  <Alert status="warning">
    <Heading>Dein Speicher ist fast voll</Heading>
    <Content>
      <Text>
        Dein Speicher ist zu über 80% belegt. Wir empfehlen
        dir deinen Speicherplatz zu erweitern, um Problemen
        vorzubeugen.
      </Text>
      <Button>Speicherplatz anpassen</Button>
    </Content>
  </Alert>

  <Alert status="danger">
    <Heading>
      Es konnte kein SSL-Zertifikat ausgestellt werden
    </Heading>
    <Content>
      <Text>
        Für diese Domain konnte kein SSL-Zertifikat
        ausgestellt werden, da die Domain per IP nicht auf
        deine Server-IP zeigt.
      </Text>
    </Content>
  </Alert>

  <Alert status="success">
    <Heading>App aktualisiert</Heading>
    <Content>
      <Text>
        Deine App wurde erfolgreich auf die neueste Version
        aktualisiert.
      </Text>
      <Link>Mehr Informationen zur aktuellen Version</Link>
    </Content>
  </Alert>

  <Alert status="unavailable">
    <Heading>Inhalte nicht gefunden</Heading>
    <Content>
      <Text>
        Die gewünschten Inhalte sind leider nicht verfügbar.
        Entweder wurden sie inzwischen gelöscht oder dir
        fehlen die notwendigen Berechtigungen.
      </Text>
    </Content>
  </Alert>
</>
```

---

# AlertBadge

Eine [AlertBadge](/04-components/status/alert-badge) dient dazu, den Status
eines Elements schnell sichtbar zu machen, beispielsweise in
[Section](/04-components/structure/section)
[Headings](/04-components/content/heading) oder
[List](/04-components/structure/list)-Einträgen. In vielen Fällen wird sie durch
einen [Alert](/04-components/status/alert) ergänzt, etwa auf der
[Detailseite](/03-patterns/01-patterns/detail-page), um zusätzliche
Informationen bereitzustellen. Für Metadaten oder ergänzende Informationen ist
hingegen die [Badge](/04-components/status/badge) besser geeignet (siehe
[AlertBadge vs. Badge](/04-components/status/alert-badge#alertbadge-vs-badge)).

```tsx
import { AlertBadge } from "@mittwald/flow-react-components";

<>
  <AlertBadge>Update verfügbar</AlertBadge>

  <AlertBadge status="warning">
    Speicherplatz fast voll
  </AlertBadge>

  <AlertBadge status="danger">
    Speicherplatz voll
  </AlertBadge>

  <AlertBadge status="success">Verifiziert</AlertBadge>

  <AlertBadge status="unavailable">
    Nicht gefunden
  </AlertBadge>
</>
```

---

# Notifications

[Notifications](/04-components/status/notification) informieren über wichtige
System- oder Statusmeldungen und erscheinen kurz im Bildschirm des Users. So
stellen sie sicher, dass User über einen Status informiert werden, auch wenn sie
sich gerade nicht auf der betroffenen
[Detailseite](/03-patterns/01-patterns/detail-page) befinden. Notifications
sollten bewusst und sparsam eingesetzt werden. Denn zu viele Notifications
überfluten den User und lenken von wirklich wichtigen Informationen ab.

Notifications werden durch den
[NotificationsProvider](04-components/status/notification-provider) ausgelöst.
Da Notifications in der Regel nur kurz sichtbar sind, sollten sie an einem
zentralen Ort gesammelt werden, damit ungelesene Notifications auch zu einem
späteren Zeitpunkt eingesehen werden können. Kritische Probleme sollten
zusätzlich zur Notification per E-Mail kommuniziert werden. So wird
sichergestellt, dass der User die Informationen zuverlässig erhält.

```tsx
import {
  Heading,
  Notification,
  Text,
} from "@mittwald/flow-react-components";

<>
  <Notification>
    <Heading>E-Mail-Adresse archiviert</Heading>
    <Text>
      Die E-Mail-Adresse <b>example@mittwald.de</b> wurde
      archiviert.
    </Text>
  </Notification>

  <Notification status="warning">
    <Heading>Speicher fast voll</Heading>
    <Text>
      Der Speicherplatz im Projekt <b>My Project</b> ist zu
      80% voll.
    </Text>
  </Notification>

  <Notification status="danger">
    <Heading>Kein SSL-Zertifikat</Heading>
    <Text>
      Für <b>exmaple.de</b> konnte kein SSL-Zertifikat
      ausgestellt werden.
    </Text>
  </Notification>

  <Notification status="success">
    <Heading>App installiert</Heading>
    <Text>
      Deine App <b>My WordPress</b> wurde erfolgreich
      installiert.
    </Text>
  </Notification>

  <Notification status="unavailable">
    <Heading>Nicht gefunden</Heading>
    <Text>
      Die gewünschten Inhalte sind leider nicht verfügbar.
    </Text>
  </Notification>
</>
```

---

# Status-Icon

Einzelne [Status-Icons](/04-components/content/icon#icon-bibliothek) können den
User auf versteckte Status-Informtionen aufmerksam machen. Zum Beispiel zeigt
ein Status-Icon innerhalb von einem [Tab](/04-components/structure/tabs) an,
dass in diesem ein relevanter Status vorliegt. Der Status kann dann im Tab z. B.
mit Hilfe eines [Alerts](/04-components/status/alert) erläutert werden.

```tsx
import {
  Tabs,
  Tab,
  TabTitle,
  AlertIcon,
} from "@mittwald/flow-react-components";

<Tabs>
  <Tab>
    <TabTitle>Tab</TabTitle>
    Tab Content
  </Tab>
  <Tab>
    <TabTitle>
      Tab
      <AlertIcon />
    </TabTitle>
    Tab Content
  </Tab>
  <Tab>
    <TabTitle>Tab</TabTitle>
    Tab Content
  </Tab>
</Tabs>
```