chore: add Playroom snippets

kiwicom · Jan 17, 2025 · 10ec884 · 10ec884
1 parent 10b7c3e
commit 10ec884
Showing 1 changed file with 173 additions and 0 deletions.
diff --git a/packages/orbit-components/playroom/snippets/BasicComponents.ts b/packages/orbit-components/playroom/snippets/BasicComponents.ts
@@ -54,6 +54,139 @@ const dialog = `
 
 const heading = `<Heading as="h1" type="title1">Heading</Heading>`;
 
+const linkList = `
+  <LinkList
+    direction="row"
+    spacing="400"
+    useMargin
+  >
+    <TextLink type="secondary">
+      Flight 1
+    </TextLink>
+    <TextLink type="secondary">
+      Flight 2
+    </TextLink>
+    <TextLink type="secondary">
+      Flight 3
+    </TextLink>
+  </LinkList>
+`;
+
+const list = `
+  <List>
+    <ListItem>
+      24,000 locations{' '}
+      <TextLink href="#">
+        around
+      </TextLink>
+      {' '}the globe
+    </ListItem>
+    <ListItem>
+      Lowest price car rental in{' '}
+      <strong>
+        Warsaw
+      </strong>
+    </ListItem>
+    <ListItem>
+      From 3 star budget to 5 star luxury
+    </ListItem>
+  </List>
+`;
+
+const listChoice = `
+<>
+  <ListChoice
+    description="Further description"
+    icon={<Icons.Accommodation />}
+    role="list"
+    selectable
+    tabIndex={0}
+    title="Choice Title"
+  />
+  <ListChoice
+    description="Further description"
+    icon={<Icons.Accommodation />}
+    role="list"
+    selectable
+    tabIndex={0}
+    title="Choice Title"
+  />
+</>
+`;
+
+const loading = `<Loading loading text="Please wait, content is loading..." type="pageLoader" />`;
+
+const navigationBar = `
+<NavigationBar
+  bottomStyle="shadow"
+  hideOnScroll
+  id="navigation-menu-id"
+  // onHide={function()}
+  // onMenuOpen={function()}
+  // onShow={function()}
+  openTitle="Open navigation menu"
+>
+  <Stack
+    justify="between"
+    spacing="none"
+  >
+    <ButtonLink
+      iconRight={<Icons.ChevronDown />}
+      type="secondary"
+    >
+      Flights
+    </ButtonLink>
+    <Stack
+      direction="row"
+      justify="end"
+      shrink
+      spacing="100"
+    >
+      <ButtonLink
+        aria-label="Favourites"
+        iconLeft={<Icons.StarFull />}
+        type="secondary"
+      />
+      <ButtonLink
+        aria-label="Account"
+        iconLeft={<Icons.AccountCircle />}
+        type="secondary"
+      />
+    </Stack>
+  </Stack>
+</NavigationBar>
+`;
+
+const notificationBadge = `<NotificationBadge type="info">10</NotificationBadge>`;
+
+const pagination = `
+  <Pagination
+    labelNext="next"
+    labelPrev="prev"
+    labelProgress={<span>Numbers of pages: 6</span>}
+    pageCount={6}
+  />
+`;
+
+const popover = `
+  <Popover
+    ariaLabel="Passengers select"
+    ariaLabelledby="passengers"
+    content={<Stack><Stack direction="column"><h2 className="sr-only" id="passengers">Passengers</h2><Stack align="center" flex justify="between" shrink><Stack direction="column" inline spacing="none"><Text>Adult</Text><Text type="secondary">11+</Text></Stack><Stepper minValue={0} /></Stack><Stack align="center" flex justify="between" shrink><Stack direction="column" inline spacing="none"><Text>Child</Text><Text type="secondary">2-11</Text></Stack><Stepper minValue={0} /></Stack></Stack></Stack>}
+  >
+    <Button
+      iconRight={<Icons.ChevronDown />}
+      type="secondary"
+    >
+      Open popover
+    </Button>
+  </Popover>
+`;
+
+const radio = `<Radio label="Label" name="Name" tabIndex={0} value="value" />`;
+
+const seat = `<Seat label="XY" type="default" />`;
+
 export default [
   {
     group: "Alert",
@@ -107,4 +240,44 @@ export default [
     group: "Heading",
     code: heading,
   },
+  {
+    group: "LinkList",
+    code: linkList,
+  },
+  {
+    group: "List",
+    code: list,
+  },
+  {
+    group: "ListChoice",
+    code: listChoice,
+  },
+  {
+    group: "Loading",
+    code: loading,
+  },
+  {
+    group: "NavigationBar",
+    code: navigationBar,
+  },
+  {
+    group: "NotificationBadge",
+    code: notificationBadge,
+  },
+  {
+    group: "Pagination",
+    code: pagination,
+  },
+  {
+    group: "Popover",
+    code: popover,
+  },
+  {
+    group: "Radio",
+    code: radio,
+  },
+  {
+    group: "Seat",
+    code: seat,
+  },
 ];