aidos-ui 3.0.0

package/src/pages/Tabs.mdx

@@ -0,0 +1,168 @@
+import { Column } from "../Column";
+import { Tabs } from "../Tabs";
+import { Badge } from "../Badge";
+import { cssVar } from "../jss";
+
+# Tabs
+
+The `Tabs` component is made of a horizontal container with the role `tablist`, which contains tabs. It can be controlled with the keyboard and it needs to be passed an ID for the content it controls.
+
+<Column gap="medium">
+  <Tabs
+    aria-controls="foo"
+    tabs={[
+      {
+        href: "/Tabs",
+        selected: true,
+        label: "Tab 1",
+      },
+      {
+        href: "/Tabs",
+        selected: false,
+        label: "Tab 2",
+      },
+      {
+        href: "/Tabs",
+        selected: false,
+        label: "Tab 3",
+      },
+    ]}
+  />
+  <Tabs
+    aria-controls="foo"
+    tabs={[
+      {
+        href: "/Tabs",
+        selected: false,
+        label: "Tab 1",
+      },
+      {
+        href: "/Tabs",
+        selected: true,
+        label: "Tab 2",
+      },
+      {
+        href: "/Tabs",
+        addOn: (
+          <Badge
+            jsStyle={{ margin: cssVar("--spacing-m") }}
+            color="highlight"
+            size="medium"
+          />
+        ),
+        selected: false,
+        label: "Tab 3",
+      },
+    ]}
+  />
+  <Tabs
+    aria-controls="foo"
+    tabs={[
+      {
+        href: "/Tabs",
+        selected: false,
+        label: "Tab 1",
+      },
+      {
+        href: "/Tabs",
+        selected: false,
+        label: "Tab 2",
+      },
+      {
+        href: "/Tabs",
+        addOn: (
+          <Badge
+            jsStyle={{ margin: cssVar("--spacing-m") }}
+            color="highlight"
+            size="medium"
+          />
+        ),
+        addOnPosition: "end",
+        selected: true,
+        label: "Tab 3",
+      },
+    ]}
+  />
+</Column>
+
+```js
+<Column gap="medium">
+  <Tabs
+    aria-controls="foo"
+    tabs={[
+      {
+        href: "/Tabs",
+        selected: true,
+        label: "Tab 1",
+      },
+      {
+        href: "/Tabs",
+        selected: false,
+        label: "Tab 2",
+      },
+      {
+        href: "/Tabs",
+        selected: false,
+        label: "Tab 3",
+      },
+    ]}
+  />
+  <Tabs
+    aria-controls="foo"
+    tabs={[
+      {
+        href: "/Tabs",
+        selected: false,
+        label: "Tab 1",
+      },
+      {
+        href: "/Tabs",
+        selected: true,
+        label: "Tab 2",
+      },
+      {
+        href: "/Tabs",
+        addOn: (
+          <Badge
+            jsStyle={{ margin: cssVar("--spacing-m") }}
+            color="highlight"
+            size="medium"
+          />
+        ),
+        selected: false,
+        label: "Tab 3",
+      },
+    ]}
+  />
+  <Tabs
+    aria-controls="foo"
+    tabs={[
+      {
+        href: "/Tabs",
+        selected: false,
+        label: "Tab 1",
+      },
+      {
+        href: "/Tabs",
+        selected: false,
+        label: "Tab 2",
+      },
+      {
+        href: "/Tabs",
+        addOn: (
+          <Badge
+            jsStyle={{ margin: cssVar("--spacing-m") }}
+            color="highlight"
+            size="medium"
+          />
+        ),
+        addOnPosition: "end",
+        selected: true,
+        label: "Tab 3",
+      },
+    ]}
+  />
+</Column>
+```
+
+---

package/src/pages/Text.mdx

@@ -0,0 +1,133 @@
+import { Column } from "../Column";
+import { Text, Span, P, H1, H2, H3, Li } from "../Text";
+
+# Text
+
+The `Text` component has mant props and is central to many of the other components, that make use of it to ensure consistent styles accross the desgin system.
+
+---
+
+## Semantic API
+
+In general the `Text` component is too flexible for general use, since it has many props that can lead to jarring styling. Instead, there is a higher level API that replicates HTML semantics with consitent stylin. These are really thin wrappers around `Text` that can be custimased to the same level; and one can still use `Text` whenever semantics are not important and there is need for very specific styling.
+
+<Column gap="medium">
+  <Span>Span</Span>
+  <P>P</P>
+  <H1 tag="h2">H1</H1>
+  <H2>H2</H2>
+  <H3>H3</H3>
+  <Li>Li</Li>
+</Column>
+
+<br />
+\* If you inspect the DOM you will see that in the previous example I override the
+HTML tag for the component `H1` because having more than one H1 is discouraged for
+accessibility.
+
+```js
+<Column gap="medium">
+  <Span>Span</Span>
+  <P>P</P>
+  <H1>H1</H1>
+  <H2>H2</H2>
+  <H3>H3</H3>
+  <Li>Li</Li>
+</Column>
+```
+
+---
+
+## Size
+
+<Column gap="medium">
+  <Text size="xsmall">{"xsmall"}</Text>
+  <Text size="small">{"small"}</Text>
+  <Text size="medium">{"medium"}</Text>
+  <Text size="large">{"large"}</Text>
+  <Text size="xlarge">{"xlarge"}</Text>
+</Column>
+
+```js
+<Column gap="medium">
+  <Text size="xsmall">xsmall</Text>
+  <Text size="small">small</Text>
+  <Text size="medium">medium</Text>
+  <Text size="large">large</Text>
+  <Text size="xlarge">xlarge</Text>
+</Column>
+```
+
+---
+
+## Color
+
+<Column gap="medium">
+  <Text color="primary">{"primary"}</Text>
+  <Text color="secondary">{"secondary"}</Text>
+  <Text color="highlight">{"highlight"}</Text>
+  <Text color="negative">{"negative"}</Text>
+  <Text color="subtle">{"subtle"}</Text>
+  <Text color="light">{"light"}</Text>
+  <Text color="inherit">{"inherit"}</Text>
+</Column>
+
+```js
+<Column gap="medium">
+  <Text color="primary">{"primary"}</Text>
+  <Text color="secondary">{"secondary"}</Text>
+  <Text color="highlight">{"highlight"}</Text>
+  <Text color="negative">{"negative"}</Text>
+  <Text color="subtle">{"subtle"}</Text>
+  <Text color="light">{"light"}</Text>
+  <Text color="inherit">{"inherit"}</Text>
+</Column>
+```
+
+---
+
+## Bold
+
+<Column gap="medium">
+  <Text bold>{"bold"}</Text>
+  <Text>{"not bold"}</Text>
+</Column>
+
+```js
+<Column gap="medium">
+  <Text bold>{"bold"}</Text>
+  <Text>{"not bold"}</Text>
+</Column>
+```
+
+---
+
+## Ellipsis
+
+By default ellipsis is enabled in the `Span` element, but can be configured with the `ellipsis` prop.
+
+---
+
+### Span
+
+<Column>
+  <Span>
+    {
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+    }
+  </Span>
+</Column>
+
+---
+
+### P
+
+<Column>
+  <P>
+    {
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+    }
+  </P>
+</Column>
+
+---

package/src/pages/TextInput.mdx

@@ -0,0 +1,110 @@
+import { Column } from "../Column";
+import { Row } from "../Row";
+import { Icon } from "../Icon";
+import { TextInput } from "../TextInput";
+
+# TextInput
+
+The `TextInput` component is an `HTML` input with some extra markup to support more advanced styles, like icons.
+
+## Base TextInput
+
+<Column gap="medium">
+  <TextInput
+    value=""
+    placeholder="Placeholder text input"
+    onValueChange={() => {}}
+  />
+  <TextInput value="Text input" onValueChange={() => {}} />
+  <TextInput
+    addOn={<Icon icon="fa-user" color="primary" size="medium" />}
+    value="Text input"
+    onValueChange={() => {}}
+  />
+  <TextInput
+    value="Text input"
+    addOn={<Icon icon="fa-user" color="primary" size="medium" />}
+    addOnPosition="end"
+    placeholder="Placeholder text input"
+    onValueChange={() => {}}
+  />
+</Column>
+
+```js
+<Column gap="medium">
+  <TextInput
+    value=""
+    placeholder="Placeholder text input"
+    onValueChange={() => {}}
+  />
+  <TextInput value="Text input" onValueChange={() => {}} />
+  <TextInput
+    addOn={<Icon icon="fa-user" color="primary" size="medium" />}
+    value="Text input"
+    onValueChange={() => {}}
+  />
+  <TextInput
+    value="Text input"
+    addOn={<Icon icon="fa-user" color="primary" size="medium" />}
+    addOnPosition="end"
+    placeholder="Placeholder text input"
+    onValueChange={() => {}}
+  />
+</Column>
+```
+
+---
+
+## Bare TextInput
+
+<Column gap="medium">
+  <TextInput
+    bare
+    value=""
+    placeholder="Placeholder text input"
+    onValueChange={() => {}}
+  />
+  <TextInput bare value="Text input" onValueChange={() => {}} />
+  <TextInput
+    bare
+    addOn={<Icon icon="fa-user" color="primary" size="medium" />}
+    value="Text input"
+    onValueChange={() => {}}
+  />
+  <TextInput
+    bare
+    value="Text input"
+    addOn={<Icon icon="fa-user" color="primary" size="medium" />}
+    addOnPosition="end"
+    placeholder="Placeholder text input"
+    onValueChange={() => {}}
+  />
+</Column>
+
+```js
+<Column gap="medium">
+  <TextInput
+    bare
+    value=""
+    placeholder="Placeholder text input"
+    onValueChange={() => {}}
+  />
+  <TextInput bare value="Text input" onValueChange={() => {}} />
+  <TextInput
+    bare
+    addOn={<Icon icon="fa-user" color="primary" size="medium" />}
+    value="Text input"
+    onValueChange={() => {}}
+  />
+  <TextInput
+    bare
+    value="Text input"
+    addOn={<Icon icon="fa-user" color="primary" size="medium" />}
+    addOnPosition="end"
+    placeholder="Placeholder text input"
+    onValueChange={() => {}}
+  />
+</Column>
+```
+
+---

package/src/pages/TextPairing.mdx

@@ -0,0 +1,155 @@
+import { TextPairing } from "../TextPairing";
+import { Column } from "../Column";
+import { ListDivider } from "../ListDivider";
+import { Icon } from "../Icon";
+import { cssVar } from "../jss";
+
+# TextPairing
+
+The `TextPairing` is a seemingly simple component that can be used to represent multiple visual ideas. Many of the other components use it to create more complex elements.
+
+In its simplest form a `TextPairing` is formed of two text elements (headline and body) laid out vertically. However it accepts multiple props to enable much more complex representations.
+
+<Column
+  jsStyle={{ [" > *"]: { borderBottom: `1px solid ${cssVar("--divider")}` } }}
+>
+  <TextPairing headline="Headline" body="Body" />
+  <TextPairing headline="Headline" headlineBold body="Body" />
+  <TextPairing
+    headline="Headline"
+    headlineBold
+    headlineSize="large"
+    body="Body"
+  />
+  <TextPairing
+    headline="Headline"
+    headlineBold
+    headlineSize="large"
+    body="Body"
+    bodyColor="subtle"
+  />
+  <TextPairing
+    headline="Headline"
+    headlineBold
+    headlineSize="large"
+    body="Body"
+    bodyColor="subtle"
+    bodySize="small"
+  />
+  <TextPairing
+    headline="Headline"
+    headlineBold
+    headlineSize="large"
+    body="Body"
+    bodyColor="subtle"
+    bodySize="small"
+    addOn={<Icon icon="fa-bicycle" color="primary" size="xxlarge" />}
+  />
+  <TextPairing
+    headline="Headline"
+    headlineBold
+    headlineSize="large"
+    body="Body"
+    bodyColor="subtle"
+    bodySize="small"
+    addOn={<Icon icon="fa-bicycle" color="primary" size="xxlarge" />}
+    gap="medium"
+  />
+  <TextPairing
+    headline="Headline"
+    headlineBold
+    headlineSize="large"
+    body="Body"
+    bodyColor="subtle"
+    bodySize="small"
+    addOn={<Icon icon="fa-bicycle" color="primary" size="xxlarge" />}
+    gap="medium"
+    addOnPosition="end"
+  />
+  <TextPairing
+    headline="Headline"
+    headlineBold
+    headlineSize="large"
+    body="Body"
+    bodyColor="subtle"
+    bodySize="small"
+    addOn={<Icon icon="fa-bicycle" color="primary" size="xxlarge" />}
+    headlineAddOn={<Icon icon="fa-plus" color="primary" size="small" />}
+    gap="medium"
+    addOnPosition="end"
+  />
+</Column>
+
+```js
+<Column
+  jsStyle={{ [" > *"]: { borderBottom: `1px solid ${cssVar("--divider")}` } }}
+>
+  <TextPairing headline="Headline" body="Body" />
+  <TextPairing headline="Headline" headlineBold body="Body" />
+  <TextPairing
+    headline="Headline"
+    headlineBold
+    headlineSize="large"
+    body="Body"
+  />
+  <TextPairing
+    headline="Headline"
+    headlineBold
+    headlineSize="large"
+    body="Body"
+    bodyColor="subtle"
+  />
+  <TextPairing
+    headline="Headline"
+    headlineBold
+    headlineSize="large"
+    body="Body"
+    bodyColor="subtle"
+    bodySize="small"
+  />
+  <TextPairing
+    headline="Headline"
+    headlineBold
+    headlineSize="large"
+    body="Body"
+    bodyColor="subtle"
+    bodySize="small"
+    addOn={<Icon icon="fa-bicycle" color="primary" size="xxlarge" />}
+  />
+  <TextPairing
+    headline="Headline"
+    headlineBold
+    headlineSize="large"
+    body="Body"
+    bodyColor="subtle"
+    bodySize="small"
+    addOn={<Icon icon="fa-bicycle" color="primary" size="xxlarge" />}
+    gap="medium"
+  />
+  <TextPairing
+    headline="Headline"
+    headlineBold
+    headlineSize="large"
+    body="Body"
+    bodyColor="subtle"
+    bodySize="small"
+    addOn={<Icon icon="fa-bicycle" color="primary" size="xxlarge" />}
+    gap="medium"
+    addOnPosition="end"
+  />
+  <TextPairing
+    headline="Headline"
+    headlineBold
+    headlineSize="large"
+    body="Body"
+    bodyColor="subtle"
+    bodySize="small"
+    addOn={<Icon icon="fa-bicycle" color="primary" size="xxlarge" />}
+    headlineAddOn={<Icon icon="fa-plus" color="primary" size="small" />}
+    gap="medium"
+    addOnPosition="end"
+  />
+</Column>
+```
+
+---

package/src/pages/TimeInput.mdx

@@ -0,0 +1,73 @@
+import { Column } from "../Column";
+import { TimeInput } from "../TimeInput";
+import { Icon } from "../Icon";
+
+# TimeInput
+
+The `TimeInput` component can be used to get the time (hour and minute) from the user.
+
+<Column gap="medium" jsStyle={{ maxWidth: 150 }}>
+  <TimeInput time={new Date()} onTimeChange={() => {}} />
+  <TimeInput
+    addOn={<Icon icon="fa-clock-o" color="primary" size="medium" />}
+    time={new Date()}
+    onTimeChange={() => {}}
+  />
+  <TimeInput
+    addOn={<Icon icon="fa-clock-o" color="primary" size="medium" />}
+    addOnPosition="end"
+    time={new Date()}
+    onTimeChange={() => {}}
+  />
+  <TimeInput bare time={new Date()} onTimeChange={() => {}} />
+  <TimeInput
+    bare
+    addOn={<Icon icon="fa-clock-o" color="primary" size="medium" />}
+    time={new Date()}
+    onTimeChange={() => {}}
+  />
+  <TimeInput
+    bare
+    addOn={<Icon icon="fa-clock-o" color="primary" size="medium" />}
+    addOnPosition="end"
+    time={new Date()}
+    onTimeChange={() => {}}
+  />
+  <TimeInput disabled time={new Date()} onTimeChange={() => {}} />
+  <TimeInput bare disabled time={new Date()} onTimeChange={() => {}} />
+</Column>
+
+```js
+<Column gap="medium" jsStyle={{ maxWidth: 150 }}>
+  <TimeInput time={new Date()} onTimeChange={() => {}} />
+  <TimeInput
+    addOn={<Icon icon="fa-clock-o" color="primary" size="medium" />}
+    time={new Date()}
+    onTimeChange={() => {}}
+  />
+  <TimeInput
+    addOn={<Icon icon="fa-clock-o" color="primary" size="medium" />}
+    addOnPosition="end"
+    time={new Date()}
+    onTimeChange={() => {}}
+  />
+  <TimeInput bare time={new Date()} onTimeChange={() => {}} />
+  <TimeInput
+    bare
+    addOn={<Icon icon="fa-clock-o" color="primary" size="medium" />}
+    time={new Date()}
+    onTimeChange={() => {}}
+  />
+  <TimeInput
+    bare
+    addOn={<Icon icon="fa-clock-o" color="primary" size="medium" />}
+    addOnPosition="end"
+    time={new Date()}
+    onTimeChange={() => {}}
+  />
+  <TimeInput disabled time={new Date()} onTimeChange={() => {}} />
+  <TimeInput bare disabled time={new Date()} onTimeChange={() => {}} />
+</Column>
+```
+
+---

package/src/pages/Tooltip.mdx

@@ -0,0 +1,28 @@
+import { Button } from "../Button";
+import { Tooltip } from "../Tooltip";
+
+# Tooltip
+
+The `Tooltip` component can be used to display light contextual information about an element. The content of a tooltip should not be interactable (to make it accessible interactable elements should be dialgs) so they only accept content of type `string`.
+
+<Tooltip content="Tooltip here">
+  <Button
+    bare
+    label="Hover to show tooltip"
+    color="positive"
+    onClick={() => {}}
+  />
+</Tooltip>
+
+```js
+<Tooltip content="Tooltip here">
+  <Button
+    bare
+    label="Hover to show tooltip"
+    color="positive"
+    onClick={() => {}}
+  />
+</Tooltip>
+```
+
+---