aidos-ui 3.0.0

package/src/pages/List.mdx

@@ -0,0 +1,292 @@
+import { List } from "../List";
+import { ListItem } from "../ListItem";
+import { ListButtonItem } from "../ListButtonItem";
+import { ListLinkItem } from "../ListLinkItem";
+import { Icon } from "../Icon";
+import { Sublist } from "../Sublist";
+
+# List
+
+The `List` component is used to represent data in a list, it has several components that can be used to create rich experiences within it.
+
+## Base list
+
+<List ariaLabel="example">
+  <ListItem
+    headline="Headline"
+    body="Body"
+    addOn={<Icon color="primary" icon="fa-bell" size="medium" />}
+    addOnPosition="start"
+  />
+  <ListButtonItem
+    color="positive"
+    headline="Positive button"
+    addOn={<Icon color="highlight" icon="fa-plus" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListButtonItem
+    color="secondary"
+    headline="Secondary button"
+    addOn={<Icon color="primary" icon="fa-bicycle" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListButtonItem
+    color="negative"
+    headline="Negative button"
+    addOn={<Icon color="negative" icon="fa-ban" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListLinkItem
+    href="/"
+    color="secondary"
+    headline="Selected link"
+    selected
+    addOn={<Icon color="primary" icon="fa-renren" size="medium" />}
+    addOnPosition="start"
+  />
+  <ListLinkItem
+    href="/"
+    color="secondary"
+    headline="Link"
+    addOn={<Icon color="primary" icon="fa-renren" size="medium" />}
+    addOnPosition="start"
+    withDivider={false}
+  />
+</List>
+
+```js
+<List ariaLabel="example">
+  <ListItem
+    headline="Headline"
+    body="Body"
+    addOn={<Icon color="primary" icon="fa-bell" size="medium" />}
+    addOnPosition="start"
+  />
+  <ListButtonItem
+    color="positive"
+    headline="Positive button"
+    addOn={<Icon color="highlight" icon="fa-plus" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListButtonItem
+    color="secondary"
+    headline="Secondary button"
+    addOn={<Icon color="primary" icon="fa-bicycle" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListButtonItem
+    color="negative"
+    headline="Negative button"
+    addOn={<Icon color="negative" icon="fa-ban" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListLinkItem
+    href="/"
+    color="secondary"
+    headline="Selected link"
+    selected
+    addOn={<Icon color="primary" icon="fa-renren" size="medium" />}
+    addOnPosition="start"
+  />
+  <ListLinkItem
+    href="/"
+    color="secondary"
+    headline="Link"
+    addOn={<Icon color="primary" icon="fa-renren" size="medium" />}
+    addOnPosition="start"
+    withDivider={false}
+  />
+</List>
+```
+
+---
+
+## Bare list
+
+<List bare ariaLabel="example">
+  <ListItem
+    bare
+    headline="Headline"
+    body="Body"
+    addOn={<Icon color="primary" icon="fa-bell" size="medium" />}
+    addOnPosition="start"
+  />
+  <ListButtonItem
+    bare
+    color="positive"
+    headline="Positive button"
+    addOn={<Icon color="highlight" icon="fa-plus" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListButtonItem
+    bare
+    color="secondary"
+    headline="Secondary button"
+    addOn={<Icon color="primary" icon="fa-bicycle" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListButtonItem
+    bare
+    color="negative"
+    headline="Negative button"
+    addOn={<Icon color="negative" icon="fa-ban" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListLinkItem
+    href="/"
+    bare
+    color="secondary"
+    headline="Selected link"
+    selected
+    addOn={<Icon color="highlight" icon="fa-renren" size="medium" />}
+    addOnPosition="start"
+  />
+  <ListLinkItem
+    href="/"
+    bare
+    headline="Link"
+    addOn={<Icon color="primary" icon="fa-renren" size="medium" />}
+    addOnPosition="start"
+    withDivider={false}
+  />
+</List>
+
+```js
+<List bare ariaLabel="example">
+  <ListItem
+    bare
+    headline="Headline"
+    body="Body"
+    addOn={<Icon color="primary" icon="fa-bell" size="medium" />}
+    addOnPosition="start"
+  />
+  <ListButtonItem
+    bare
+    color="positive"
+    headline="Positive button"
+    addOn={<Icon color="highlight" icon="fa-plus" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListButtonItem
+    bare
+    color="secondary"
+    headline="Secondary button"
+    addOn={<Icon color="primary" icon="fa-bicycle" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListButtonItem
+    bare
+    color="negative"
+    headline="Negative button"
+    addOn={<Icon color="negative" icon="fa-ban" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListLinkItem
+    href="/"
+    bare
+    color="secondary"
+    headline="Selected link"
+    selected
+    addOn={<Icon color="highlight" icon="fa-renren" size="medium" />}
+    addOnPosition="start"
+  />
+  <ListLinkItem
+    href="/"
+    bare
+    headline="Link"
+    addOn={<Icon color="primary" icon="fa-renren" size="medium" />}
+    addOnPosition="start"
+    withDivider={false}
+  />
+</List>
+```
+
+---
+
+## Sublist
+
+<List bare ariaLabel="example">
+  <Sublist bare label="Sublist">
+    <ListItem bare headline="Headline 1" body="Body 1" />
+    <ListItem bare headline="Headline 2" body="Body 2" />
+    <ListItem bare headline="Headline 3" body="Body 3" />
+  </Sublist>
+</List>
+
+```js
+<List bare ariaLabel="example">
+  <Sublist bare label="Sublist">
+    <ListItem bare headline="Headline 1" body="Body 1" />
+    <ListItem bare headline="Headline 2" body="Body 2" />
+    <ListItem bare headline="Headline 3" body="Body 3" />
+  </Sublist>
+</List>
+```
+
+---
+
+## navigation
+
+Lists support keyboard navigation by default via the `useNavigation` hook. It can be disabled by passing the prop `navigation` and tries to emulate the [grid layout spec](https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/layout-grids/):
+
+<List ariaLabel="example" navigation={true}>
+  <ListButtonItem color="secondary" headline="Headline 1" onClick={() => {}} />
+  <ListButtonItem color="secondary" headline="Headline 2" onClick={() => {}} />
+  <ListButtonItem
+    withDivider={false}
+    color="secondary"
+    headline="Headline 3"
+    onClick={() => {}}
+  />
+</List>
+
+---
+
+<List ariaLabel="example" navigation={false}>
+  <ListButtonItem color="secondary" headline="Headline 1" onClick={() => {}} />
+  <ListButtonItem color="secondary" headline="Headline 2" onClick={() => {}} />
+  <ListButtonItem
+    withDivider={false}
+    color="secondary"
+    headline="Headline 3"
+    onClick={() => {}}
+  />
+</List>
+
+```js
+<List ariaLabel="example" navigation={true}>
+  <ListButtonItem color="secondary" headline="Headline 1" onClick={() => {}} />
+  <ListButtonItem color="secondary" headline="Headline 2" onClick={() => {}} />
+  <ListButtonItem
+    withDivider={false}
+    color="secondary"
+    headline="Headline 3"
+    onClick={() => {}}
+  />
+</List>
+
+<List ariaLabel="example" navigation={false}>
+  <ListButtonItem color="secondary" headline="Headline 1" onClick={() => {}} />
+  <ListButtonItem color="secondary" headline="Headline 2" onClick={() => {}} />
+  <ListButtonItem
+    withDivider={false}
+    color="secondary"
+    headline="Headline 3"
+    onClick={() => {}}
+  />
+</List>
+```
+
+---

package/src/pages/ListHeader.mdx

@@ -0,0 +1,94 @@
+import { List } from "../List";
+import { Icon } from "../Icon";
+import { ListItem } from "../ListItem";
+import { ListHeaderItem } from "../ListHeaderItem";
+
+# List headers
+
+`ListHeaders` have a variety of styles and support both regular and bare styling. They can be used to give contextual information about what a list contains or to visually separate a subgroup of elements.
+
+<List ariaLabel="example">
+  <ListHeaderItem headline="Header" />
+  <ListItem headline="Headline 1" body="Body 1" />
+  <ListHeaderItem
+    headline="Header"
+    addOn={<Icon icon="fa-chain-broken" size="medium" color="primary" />}
+  />
+  <ListItem headline="Headline 2" body="Body 2" />
+  <ListHeaderItem highlight headline="Header" />
+  <ListItem headline="Headline 3" body="Body 3" />
+  <ListHeaderItem
+    highlight
+    headline="Header"
+    addOn={<Icon icon="fa-chain-broken" size="medium" color="light" />}
+  />
+  <ListItem withDivider={false} headline="Headline 4" body="Body 3" />
+</List>
+
+```js
+<List ariaLabel="example">
+  <ListHeaderItem headline="Header" />
+  <ListItem headline="Headline 1" body="Body 1" />
+  <ListHeaderItem
+    headline="Header"
+    addOn={<Icon icon="fa-chain-broken" size="medium" color="primary" />}
+  />
+  <ListItem headline="Headline 2" body="Body 2" />
+  <ListHeaderItem highlight headline="Header" />
+  <ListItem headline="Headline 3" body="Body 3" />
+  <ListHeaderItem
+    highlight
+    headline="Header"
+    addOn={<Icon icon="fa-chain-broken" size="medium" color="light" />}
+  />
+  <ListItem withDivider={false} headline="Headline 4" body="Body 3" />
+</List>
+```
+
+---
+
+## Bare list headers
+
+<List bare ariaLabel="example">
+  <ListHeaderItem bare headline="Header" />
+  <ListItem bare headline="Headline 1" body="Body 1" />
+  <ListHeaderItem
+    bare
+    headline="Header"
+    addOn={<Icon icon="fa-chain-broken" size="medium" color="primary" />}
+  />
+  <ListItem bare headline="Headline 2" body="Body 2" />
+  <ListHeaderItem bare highlight headline="Header" />
+  <ListItem bare headline="Headline 3" body="Body 3" />
+  <ListHeaderItem
+    bare
+    highlight
+    headline="Header"
+    addOn={<Icon icon="fa-chain-broken" size="medium" color="highlight" />}
+  />
+  <ListItem bare withDivider={false} headline="Headline 4" body="Body 3" />
+</List>
+
+```js
+<List bare ariaLabel="example">
+  <ListHeaderItem bare headline="Header" />
+  <ListItem bare headline="Headline 1" body="Body 1" />
+  <ListHeaderItem
+    bare
+    headline="Header"
+    addOn={<Icon icon="fa-chain-broken" size="medium" color="primary" />}
+  />
+  <ListItem bare headline="Headline 2" body="Body 2" />
+  <ListHeaderItem bare highlight headline="Header" />
+  <ListItem bare headline="Headline 3" body="Body 3" />
+  <ListHeaderItem
+    bare
+    highlight
+    headline="Header"
+    addOn={<Icon icon="fa-chain-broken" size="medium" color="light" />}
+  />
+  <ListItem bare withDivider={false} headline="Headline 4" body="Body 3" />
+</List>
+```
+
+---

package/src/pages/Popover.mdx

@@ -0,0 +1,101 @@
+import { Popover, PopoverTrigger } from "../Popover";
+import { Icon } from "../Icon";
+import { Button } from "../Button";
+import { List } from "../List";
+import { ListButtonItem } from "../ListButtonItem";
+
+# Popover
+
+The `Popover` component can be used in conjunction with the `PopoverTrigger` component to create modal experiences:
+
+<PopoverTrigger
+  PopoverComponent={({ close }) => (
+    <Popover close={close}>
+      <List bare ariaLabel="Popover" autofocus>
+        <ListButtonItem
+          bare
+          headline="Option 1"
+          onClick={() => {
+            close();
+          }}
+          color="secondary"
+        />
+        <ListButtonItem
+          bare
+          headline="Option 2"
+          onClick={() => {
+            close();
+          }}
+          color="secondary"
+        />
+        <ListButtonItem
+          bare
+          headline="Option 3"
+          onClick={() => {
+            close();
+          }}
+          color="secondary"
+          withDivider={false}
+        />
+      </List>
+    </Popover>
+  )}
+>
+  {({ toggle }) => (
+    <Button
+      style={{ position: "relative" }}
+      label="Popover trigger"
+      color="positive"
+      onClick={() => {
+        toggle(undefined);
+      }}
+    />
+  )}
+</PopoverTrigger>
+
+```js
+<PopoverTrigger
+  PopoverComponent={({ close }) => (
+    <Popover close={close}>
+      <List bare ariaLabel="Popover" autofocus>
+        <ListButtonItem
+          bare
+          headline="Option 1"
+          onClick={() => {
+            close();
+          }}
+          color="secondary"
+        />
+        <ListButtonItem
+          bare
+          headline="Option 2"
+          onClick={() => {
+            close();
+          }}
+          color="secondary"
+        />
+        <ListButtonItem
+          bare
+          headline="Option 3"
+          onClick={() => {
+            close();
+          }}
+          color="secondary"
+          withDivider={false}
+        />
+      </List>
+    </Popover>
+  )}
+>
+  {({ toggle }) => (
+    <Button
+      style={{ position: "relative" }}
+      label="Popover trigger"
+      color="positive"
+      onClick={() => {
+        toggle(undefined);
+      }}
+    />
+  )}
+</PopoverTrigger>
+```

package/src/pages/ProgressBar.mdx

@@ -0,0 +1,20 @@
+import { ProgressBar } from "../ProgressBar";
+import { Column } from "../Column";
+
+# ProgressBar
+
+The `ProgressBar` component can be used to represent percentual progress in a linear way:
+
+<Column gap="medium">
+  <ProgressBar color="highlight" progress={0.66} size="large" />
+  <ProgressBar color="negative" progress={0.66} size="medium" />
+  <ProgressBar color="warning" progress={0.66} size="small" />
+</Column>
+
+```js
+<Column gap="medium">
+  <ProgressBar color="highlight" progress={0.66} size="large" />
+  <ProgressBar color="negative" progress={0.66} size="medium" />
+  <ProgressBar color="warning" progress={0.66} size="small" />
+</Column>
+```

package/src/pages/ProgressCircle.mdx

@@ -0,0 +1,35 @@
+import { ProgressCircle } from "../ProgressCircle";
+import { Row } from "../Row";
+import { cssVar } from "../jss";
+
+# ProgressCircle
+
+The `ProgressCircle` component can be used to represent percentual progress in a circular way:
+
+<Row gap="medium" align="center">
+  <ProgressCircle progress={0.1} outerRadius={12} />
+  <ProgressCircle progress={0.2} outerRadius={12} />
+  <ProgressCircle progress={0.3} outerRadius={12} />
+  <ProgressCircle progress={0.4} outerRadius={12} />
+  <ProgressCircle progress={0.5} outerRadius={12} />
+  <ProgressCircle progress={0.6} outerRadius={12} />
+  <ProgressCircle progress={0.7} outerRadius={12} />
+  <ProgressCircle progress={0.8} outerRadius={12} />
+  <ProgressCircle progress={0.9} outerRadius={12} />
+  <ProgressCircle progress={1} outerRadius={12} />
+</Row>
+
+```js
+<Row gap="medium" align="center">
+  <ProgressCircle progress={0.1} outerRadius={12} />
+  <ProgressCircle progress={0.2} outerRadius={12} />
+  <ProgressCircle progress={0.3} outerRadius={12} />
+  <ProgressCircle progress={0.4} outerRadius={12} />
+  <ProgressCircle progress={0.5} outerRadius={12} />
+  <ProgressCircle progress={0.6} outerRadius={12} />
+  <ProgressCircle progress={0.7} outerRadius={12} />
+  <ProgressCircle progress={0.8} outerRadius={12} />
+  <ProgressCircle progress={0.9} outerRadius={12} />
+  <ProgressCircle progress={1} outerRadius={12} />
+</Row>
+```

package/src/pages/RangeInput.mdx

@@ -0,0 +1,109 @@
+import { RangeInput } from "../RangeInput";
+import { Column } from "../Column";
+import { Icon } from "../Icon";
+
+# RangeInput
+
+The `RangeInput` item is a thin wrapper over the HTML `<input type="range">` element with some options for adding addOn and customise the label for it.
+
+<Column>
+  <RangeInput value={12.5} onValueChange={() => {}} />
+  <RangeInput value={25} onValueChange={() => {}} label="Right" />
+  <RangeInput
+    value={37.5}
+    onValueChange={() => {}}
+    label="Left"
+    labelPosition="start"
+  />
+  <RangeInput
+    addOn={<Icon icon="fa-volume-up" color="primary" size="medium" />}
+    value={50}
+    onValueChange={() => {}}
+    label="Right"
+  />
+  <RangeInput
+    addOn={<Icon icon="fa-volume-up" color="primary" size="medium" />}
+    addOnPosition="end"
+    value={62.5}
+    onValueChange={() => {}}
+    label="Left"
+    labelPosition="start"
+  />
+  <RangeInput
+    addOn={<Icon icon="fa-volume-up" color="primary" size="medium" />}
+    value={75}
+    onValueChange={() => {}}
+    label="Right"
+    labelSize="large"
+  />
+  <RangeInput
+    addOn={<Icon icon="fa-volume-up" color="primary" size="medium" />}
+    value={87.5}
+    onValueChange={() => {}}
+    label="Right"
+    labelSize="large"
+    labelColor="highlight"
+  />
+  <RangeInput
+    addOn={<Icon icon="fa-volume-up" color="primary" size="medium" />}
+    value={100}
+    onValueChange={() => {}}
+    label="Right"
+    labelSize="large"
+    labelColor="highlight"
+    labelBold
+  />
+</Column>
+
+```js
+<Column>
+  <RangeInput value={12.5} onValueChange={() => {}} />
+  <RangeInput value={25} onValueChange={() => {}} label="Right" />
+  <RangeInput
+    value={37.5}
+    onValueChange={() => {}}
+    label="Left"
+    labelPosition="start"
+  />
+  <RangeInput
+    addOn={<Icon icon="fa-volume-up" color="primary" size="medium" />}
+    value={50}
+    onValueChange={() => {}}
+    label="Right"
+  />
+  <RangeInput
+    addOn={<Icon icon="fa-volume-up" color="primary" size="medium" />}
+    addOnPosition="end"
+    value={62.5}
+    onValueChange={() => {}}
+    label="Left"
+    labelPosition="start"
+  />
+  <RangeInput
+    addOn={<Icon icon="fa-volume-up" color="primary" size="medium" />}
+    value={75}
+    onValueChange={() => {}}
+    label="Right"
+    labelSize="large"
+  />
+  <RangeInput
+    addOn={<Icon icon="fa-volume-up" color="primary" size="medium" />}
+    value={87.5}
+    onValueChange={() => {}}
+    label="Right"
+    labelSize="large"
+    labelColor="highlight"
+  />
+  <RangeInput
+    addOn={<Icon icon="fa-volume-up" color="primary" size="medium" />}
+    value={100}
+    onValueChange={() => {}}
+    label="Right"
+    labelSize="large"
+    labelColor="highlight"
+    labelBold
+  />
+</Column>
+```
+
+---