# 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/overview#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/overview) 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/overview) oder eines
[Buttons](/04-components/actions/button/overview) unterstützt werden. Alerts
sollten stets in der Nähe des betroffenen Inhalts platziert werden (s.
[Alert: Position](/04-components/status/alert/guidelines#anwendung)).

```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/overview) dient dazu, den
Status eines Elements schnell sichtbar zu machen, beispielsweise in
[Section](/04-components/structure/section/overview)
[Headings](/04-components/content/heading/overview) oder
[List](/04-components/structure/list/overview)-Einträgen. In vielen Fällen wird
sie durch einen [Alert](/04-components/status/alert/overview) 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/overview) besser geeignet
(siehe
[AlertBadge vs. Badge](/04-components/status/alert-badge/guidelines#grundlagen)).

```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/overview) 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/overview)
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/overview#icon-bibliothek)
können den User auf versteckte Status-Informtionen aufmerksam machen. Zum
Beispiel zeigt ein Status-Icon innerhalb von einem
[Tab](/04-components/navigation/tabs/overview) an, dass in diesem ein relevanter
Status vorliegt. Der Status kann dann im Tab z. B. mit Hilfe eines
[Alerts](/04-components/status/alert/overview) 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>
```