aidos-ui 4.0.4 → 4.0.5

package/src/DesignBook.tsx

@@ -1,677 +0,0 @@
-import React, { useContext, useState } from "react";
-
-import { RootView } from "./RootView";
-import { Sublist } from "./Sublist";
-import { Button } from "./Button";
-import { IconButton } from "./IconButton";
-import { Text } from "./Text";
-import { TextPairing } from "./TextPairing";
-import { Icon } from "./Icon";
-import { TextInput } from "./TextInput";
-import { Checkbox } from "./Checkbox";
-import { List } from "./List";
-import { ListSpacer } from "./ListSpacer";
-
-import { ListButtonItem } from "./ListButtonItem";
-import { Dialog, useDialog } from "./Dialog";
-import { Row } from "./Row";
-import { DarkModeContext } from "./DarkMode";
-import { Popover, PopoverTrigger } from "./Popover";
-import { Tooltip } from "./Tooltip";
-import { Link } from "./Link";
-import { Calendar } from "./Calendar";
-import { Box } from "./Box";
-import { Badge } from "./Badge";
-
-function ExampleDialog({ close }) {
-  const darkMode = useContext(DarkModeContext);
-  return (
-    <Dialog close={close} label="Example">
-      <Row padding="medium" align="center" justify="space-between">
-        <Text>Dark mode</Text>
-        <Checkbox
-          size="medium"
-          checked={darkMode.enabled}
-          onClick={() => darkMode.toggle()}
-        />
-      </Row>
-    </Dialog>
-  );
-}
-
-export function DesignBook() {
-  const dialog = useDialog<void>(
-    ({ close }) => <ExampleDialog close={close} />,
-    { closeOnOutsideClick: true }
-  );
-
-  const [checkbox1, setCheckbox1] = useState(true);
-  const [checkbox2, setCheckbox2] = useState(true);
-  const [checkbox3, setCheckbox3] = useState(true);
-  const [checkbox4, setCheckbox4] = useState(false);
-  const [checkbox5, setCheckbox5] = useState(false);
-  const [checkbox6, setCheckbox6] = useState(false);
-
-  return (
-    <RootView>
-      <List navigation={false} ariaLabel="Design book">
-        <ListSpacer />
-        <Sublist label="Button" initialState={{ collapsed: false }}>
-          <Row gap="medium">
-            <Button
-              color="positive"
-              onClick={() => {
-                dialog.open();
-              }}
-            >
-              Positive button
-            </Button>
-          </Row>
-
-          <Row gap="medium">
-            <PopoverTrigger
-              PopoverComponent={({ close }) => {
-                return (
-                  <Popover close={close}>
-                    <List navigation={false} ariaLabel="Popover ">
-                      <ListButtonItem
-                        gap="medium"
-                        addOn={
-                          <Icon
-                            size="medium"
-                            color="primary"
-                            icon="fa-address-book"
-                          />
-                        }
-                        headline="Option 1"
-                        onClick={() => {}}
-                        color={"positive"}
-                      ></ListButtonItem>
-                      <ListButtonItem
-                        gap="medium"
-                        addOn={
-                          <Icon
-                            size="medium"
-                            color="primary"
-                            icon="fa-adjust"
-                          />
-                        }
-                        headline="Option 2"
-                        onClick={() => {}}
-                        withDivider={false}
-                        color={"positive"}
-                      ></ListButtonItem>
-                    </List>
-                  </Popover>
-                );
-              }}
-            >
-              {({ toggle }) => (
-                <Button
-                  style={{ position: "relative" }}
-                  color="primary"
-                  onClick={() => {
-                    toggle(undefined);
-                  }}
-                >
-                  Secondary button
-                </Button>
-              )}
-            </PopoverTrigger>
-          </Row>
-
-          <Row gap="medium">
-            <PopoverTrigger
-              PopoverComponent={({ close }) => {
-                return (
-                  <Popover close={close}>
-                    <List ariaLabel="Popover ">
-                      <ListButtonItem
-                        gap="medium"
-                        addOn={
-                          <Icon
-                            size="medium"
-                            color="primary"
-                            icon="fa-address-book"
-                          />
-                        }
-                        headline="Option 1"
-                        onClick={() => {}}
-                        color={"positive"}
-                      ></ListButtonItem>
-                      <ListButtonItem
-                        gap="medium"
-                        addOn={
-                          <Icon
-                            size="medium"
-                            color="primary"
-                            icon="fa-adjust"
-                          />
-                        }
-                        headline="Option 2"
-                        onClick={() => {}}
-                        withDivider={false}
-                        color={"positive"}
-                      ></ListButtonItem>
-                    </List>
-                  </Popover>
-                );
-              }}
-            >
-              {({ toggle }) => (
-                <Button
-                  color="negative"
-                  onClick={() => {
-                    toggle(undefined);
-                  }}
-                >
-                  Negative button
-                </Button>
-              )}
-            </PopoverTrigger>
-          </Row>
-
-          <Row gap="medium">
-            <Tooltip content="Tooltip here">
-              <Button color="positive" onClick={() => {}} disabled={true}>
-                Disabled button
-              </Button>
-            </Tooltip>
-          </Row>
-
-          <Row gap="medium">
-            <Button bare={true} color="positive" onClick={() => {}}>
-              Bare positive button
-            </Button>
-          </Row>
-
-          <Row gap="medium">
-            <Button bare={true} color="primary" onClick={() => {}}>
-              Bare secondary button
-            </Button>
-          </Row>
-
-          <Row gap="medium">
-            <Button bare={true} color="negative" onClick={() => {}}>
-              Bare negative button
-            </Button>
-          </Row>
-
-          <Row gap="medium">
-            <Button
-              bare={true}
-              color="positive"
-              onClick={() => {}}
-              disabled={true}
-            >
-              Bare disabled button
-            </Button>
-          </Row>
-        </Sublist>
-
-        <Sublist label="Link" initialState={{ collapsed: false }}>
-          <Row gap="medium">
-            <Link color="positive" href="/">
-              Positive link
-            </Link>
-          </Row>
-
-          <Row gap="medium">
-            <Link color="primary" href="/">
-              Secondary link
-            </Link>
-          </Row>
-
-          <Row gap="medium">
-            <Tooltip content="Tooltip here">
-              <Link color="positive" href="/" disabled={true}>
-                Disabled link
-              </Link>
-            </Tooltip>
-          </Row>
-
-          <Row gap="medium">
-            <Link bare={true} color="positive" href="/">
-              Bare positive link
-            </Link>
-          </Row>
-
-          <Row gap="medium">
-            <Link bare={true} color="primary" href="/">
-              Bare secondary link
-            </Link>
-          </Row>
-
-          <Row gap="medium">
-            <Link bare={true} color="negative" href="/">
-              Bare negative link
-            </Link>
-          </Row>
-
-          <Row gap="medium">
-            <Link bare={true} color="positive" href="/" disabled={true}>
-              Bare disabled Link
-            </Link>
-          </Row>
-        </Sublist>
-
-        <ListSpacer />
-        <Sublist label="Icon button" initialState={{ collapsed: false }}>
-          <Row padding="medium" gap="medium">
-            <IconButton
-              size="large"
-              icon="fa-check"
-              color="positive"
-              onClick={() => {}}
-            />
-            <IconButton
-              size="medium"
-              icon="fa-check"
-              color="positive"
-              onClick={() => {}}
-            />
-            <IconButton
-              size="small"
-              icon="fa-check"
-              color="positive"
-              onClick={() => {}}
-            />
-            <IconButton
-              size="large"
-              icon="fa-check"
-              color="positive"
-              onClick={() => {}}
-              bare={true}
-            />
-            <IconButton
-              size="medium"
-              icon="fa-check"
-              color="positive"
-              onClick={() => {}}
-              bare={true}
-            />
-            <IconButton
-              size="small"
-              icon="fa-check"
-              color="positive"
-              onClick={() => {}}
-              bare={true}
-            />
-          </Row>
-
-          <Row padding="medium" gap="medium">
-            <IconButton
-              size="large"
-              icon="fa-remove"
-              color="negative"
-              onClick={() => {}}
-            />
-            <IconButton
-              size="medium"
-              icon="fa-remove"
-              color="negative"
-              onClick={() => {}}
-            />
-            <IconButton
-              size="small"
-              icon="fa-remove"
-              color="negative"
-              onClick={() => {}}
-            />
-            <IconButton
-              size="large"
-              icon="fa-remove"
-              color="negative"
-              onClick={() => {}}
-              bare={true}
-            />
-            <IconButton
-              size="medium"
-              icon="fa-remove"
-              color="negative"
-              onClick={() => {}}
-              bare={true}
-            />
-            <IconButton
-              size="small"
-              icon="fa-remove"
-              color="negative"
-              onClick={() => {}}
-              bare={true}
-            />
-          </Row>
-
-          <Row padding="medium" gap="medium">
-            <IconButton
-              size="large"
-              icon="fa-info"
-              color="primary"
-              onClick={() => {}}
-            />
-            <IconButton
-              size="medium"
-              icon="fa-info"
-              color="primary"
-              onClick={() => {}}
-            />
-            <IconButton
-              size="small"
-              icon="fa-info"
-              color="primary"
-              onClick={() => {}}
-            />
-            <IconButton
-              size="large"
-              icon="fa-info"
-              color="primary"
-              onClick={() => {}}
-              bare={true}
-            />
-            <IconButton
-              size="medium"
-              icon="fa-info"
-              color="primary"
-              onClick={() => {}}
-              bare={true}
-            />
-            <IconButton
-              size="small"
-              icon="fa-info"
-              color="primary"
-              onClick={() => {}}
-              bare={true}
-            />
-          </Row>
-
-          <Row padding="medium" gap="medium">
-            <IconButton
-              disabled={true}
-              size="large"
-              icon="fa-check"
-              color="positive"
-              onClick={() => {}}
-            />
-            <IconButton
-              disabled={true}
-              size="medium"
-              icon="fa-check"
-              color="positive"
-              onClick={() => {}}
-            />
-            <IconButton
-              disabled={true}
-              size="small"
-              icon="fa-check"
-              color="positive"
-              onClick={() => {}}
-            />
-            <IconButton
-              disabled={true}
-              size="large"
-              icon="fa-check"
-              color="positive"
-              onClick={() => {}}
-              bare={true}
-            />
-            <IconButton
-              disabled={true}
-              size="medium"
-              icon="fa-check"
-              color="positive"
-              onClick={() => {}}
-              bare={true}
-            />
-            <IconButton
-              disabled={true}
-              size="small"
-              icon="fa-check"
-              color="positive"
-              onClick={() => {}}
-              bare={true}
-            />
-          </Row>
-        </Sublist>
-        <ListSpacer />
-        <Sublist
-          label="Pressable list row"
-          initialState={{
-            collapsed: false,
-          }}
-        >
-          <ListButtonItem
-            onClick={() => {}}
-            headline="Headline"
-            color={"positive"}
-          />
-          <ListButtonItem
-            selected={true}
-            onClick={() => {}}
-            headline="Selected"
-            color={"positive"}
-          />
-          <ListButtonItem
-            onClick={() => {}}
-            headline="Headline"
-            body="Body"
-            color={"positive"}
-          />
-          <ListButtonItem
-            onClick={() => {}}
-            headline="Disabled"
-            body="Body"
-            disabled={true}
-            color={"positive"}
-          />
-          <ListButtonItem
-            gap="medium"
-            addOn={
-              <Box padding="medium">
-                <Icon size="medium" color="primary" icon="fa-address-book" />
-              </Box>
-            }
-            headline="Really long body"
-            body="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."
-            onClick={() => {}}
-            color={"positive"}
-          ></ListButtonItem>
-        </Sublist>
-        <Sublist label="Text" initialState={{ collapsed: false }}>
-          <Row padding="medium" gap="medium">
-            <Text size="large" color="primary">
-              Primary large
-            </Text>
-            <Text size="medium" color="primary">
-              Primary medium
-            </Text>
-            <Text size="small" color="primary">
-              Primary small
-            </Text>
-          </Row>
-
-          <Row padding="medium" gap="medium">
-            <Text size="large" color="secondary">
-              Secondary large
-            </Text>
-            <Text size="medium" color="secondary">
-              Secondary medium
-            </Text>
-            <Text size="small" color="secondary">
-              Secondary small
-            </Text>
-          </Row>
-
-          <Row padding="medium" gap="medium">
-            <Text size="large" color="subtle">
-              Subtle large
-            </Text>
-            <Text size="medium" color="subtle">
-              Subtle medium
-            </Text>
-            <Text size="small" color="subtle">
-              Subtle small
-            </Text>
-          </Row>
-
-          <Row padding="medium" gap="medium">
-            <Text size="large" color="light">
-              Light large
-            </Text>
-            <Text size="medium" color="light">
-              Light medium
-            </Text>
-            <Text size="small" color="light">
-              Light small
-            </Text>
-          </Row>
-
-          <Row padding="medium" gap="medium">
-            <Text size="large" color="highlight">
-              Highlight large
-            </Text>
-            <Text size="medium" color="highlight">
-              Highlight medium
-            </Text>
-            <Text size="small" color="highlight">
-              Highlight small
-            </Text>
-          </Row>
-
-          <Row padding="medium" gap="medium">
-            <Text size="large" color="negative">
-              Negative large
-            </Text>
-            <Text size="medium" color="negative">
-              Negative medium
-            </Text>
-            <Text size="small" color="negative">
-              Negative small
-            </Text>
-          </Row>
-        </Sublist>
-        <ListSpacer />
-        <Sublist initialState={{ collapsed: false }} label="Icon">
-          <Row padding="medium" gap="medium">
-            <Icon size="large" color="primary" icon="fa-check" />
-            <Icon size="medium" color="primary" icon="fa-check" />
-            <Icon size="small" color="primary" icon="fa-check" />
-          </Row>
-
-          <Row padding="medium" gap="medium">
-            <Icon size="large" color="secondary" icon="fa-check" />
-            <Icon size="medium" color="secondary" icon="fa-check" />
-            <Icon size="small" color="secondary" icon="fa-check" />
-          </Row>
-
-          <Row padding="medium" gap="medium">
-            <Icon size="large" color="subtle" icon="fa-check" />
-            <Icon size="medium" color="subtle" icon="fa-check" />
-            <Icon size="small" color="subtle" icon="fa-check" />
-          </Row>
-
-          <Row padding="medium" gap="medium">
-            <Icon size="large" color="light" icon="fa-check" />
-            <Icon size="medium" color="light" icon="fa-check" />
-            <Icon size="small" color="light" icon="fa-check" />
-          </Row>
-        </Sublist>
-        <ListSpacer />
-        <Sublist initialState={{ collapsed: false }} label="Text pairing">
-          <Row padding="medium" gap="medium">
-            <TextPairing headline="Headline" />
-          </Row>
-
-          <Row padding="medium" gap="medium">
-            <TextPairing headline="Headline" body="Body" />
-          </Row>
-
-          <Row padding="medium" gap="medium">
-            <TextPairing
-              headline="Headline"
-              body="Body"
-              addOn={<Icon size="large" color="primary" icon="fa-user" />}
-            />
-          </Row>
-        </Sublist>
-        <ListSpacer />
-        <Sublist initialState={{ collapsed: false }} label="Input">
-          <Row padding="medium" gap="medium">
-            <TextInput
-              value=""
-              placeholder="Placeholder text input"
-              onValueChange={() => {}}
-            />
-          </Row>
-
-          <Row padding="medium" gap="medium">
-            <TextInput value="Text input" onValueChange={() => {}} />
-          </Row>
-
-          <Row padding="medium" gap="medium">
-            <Checkbox
-              size="small"
-              checked={checkbox1}
-              onClick={() => setCheckbox1((x) => !x)}
-            />
-            <Checkbox
-              size="medium"
-              checked={checkbox2}
-              onClick={() => setCheckbox2((x) => !x)}
-            />
-            <Checkbox
-              size="large"
-              checked={checkbox3}
-              onClick={() => setCheckbox3((x) => !x)}
-            />
-          </Row>
-
-          <Row padding="medium" gap="medium">
-            <Checkbox
-              size="small"
-              checked={checkbox4}
-              onClick={() => setCheckbox4((x) => !x)}
-            />
-            <Checkbox
-              size="medium"
-              checked={checkbox5}
-              onClick={() => setCheckbox5((x) => !x)}
-            />
-            <Checkbox
-              size="large"
-              checked={checkbox6}
-              onClick={() => setCheckbox6((x) => !x)}
-            />
-          </Row>
-        </Sublist>
-        <ListSpacer />
-
-        <ListSpacer />
-
-        <Sublist label="Calendar">
-          <Calendar
-            date={new Date()}
-            header={({ weekday }) => (
-              <Box>
-                <Text>{weekday}</Text>
-              </Box>
-            )}
-            cell={({ today, date, outOfMonth }) => (
-              <Box relative={true} style={{ opacity: outOfMonth ? 0.2 : 1 }}>
-                {today && (
-                  <Badge
-                    jss={{
-                      position: "absolute",
-                      top: "50%",
-                      transform: "translateY(-50%) translateX(-75%)",
-                      right: "50%",
-                    }}
-                  />
-                )}
-                <Text>{date.getDate()}</Text>
-              </Box>
-            )}
-          />
-        </Sublist>
-      </List>
-    </RootView>
-  );
-}