chore: add Playroom snippets

kiwicom · Jan 17, 2025 · 46880f0 · 46880f0
1 parent 10b7c3e
commit 46880f0
Show file tree

Hide file tree

Showing 2 changed files with 165 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,97 @@ const dialog = `
 
 const heading = `<Heading as="h1" type="title1">Heading</Heading>`;
 
+const linkList = `
+  <LinkList>
+    <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 around the globe
+    </ListItem>
+    <ListItem>
+      Lowest price car rental in Warsaw
+    </ListItem>
+    <ListItem>
+      From 3 star budget to 5 star luxury
+    </ListItem>
+  </List>
+`;
+
+const listChoice = `
+<>
+  <ListChoice
+    description="Further description"
+    icon={<Icons.Accommodation />}
+    role="list"
+    selectable
+    title="Choice Title"
+  />
+  <ListChoice
+    description="Further description"
+    icon={<Icons.Accommodation />}
+    role="list"
+    selectable
+    title="Choice Title"
+  />
+</>
+`;
+
+const loading = `<Loading loading text="Please wait, content is loading..." type="pageLoader" />`;
+
+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>
+    </Stack>}
+  >
+    <Button
+      iconRight={<Icons.ChevronDown />}
+    >
+      Open popover
+    </Button>
+  </Popover>
+`;
+
+const radio = `<Radio label="Label" name="Name" value="value" />`;
+
+const seat = `<Seat label="XY" type="default" />`;
+
 export default [
   {
     group: "Alert",
@@ -107,4 +198,40 @@ export default [
     group: "Heading",
     code: heading,
   },
+  {
+    group: "LinkList",
+    code: linkList,
+  },
+  {
+    group: "List",
+    code: list,
+  },
+  {
+    group: "ListChoice",
+    code: listChoice,
+  },
+  {
+    group: "Loading",
+    code: loading,
+  },
+  {
+    group: "NotificationBadge",
+    code: notificationBadge,
+  },
+  {
+    group: "Pagination",
+    code: pagination,
+  },
+  {
+    group: "Popover",
+    code: popover,
+  },
+  {
+    group: "Radio",
+    code: radio,
+  },
+  {
+    group: "Seat",
+    code: seat,
+  },
 ];
diff --git a/packages/orbit-components/playroom/snippets/Layouts.ts b/packages/orbit-components/playroom/snippets/Layouts.ts
@@ -323,6 +323,40 @@ const modal = `
 </Modal>
 `;
 
+const navigationBar = `<NavigationBar
+  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>
+`;
+
 export default [
   {
     group: "CalloutBanner",
@@ -344,4 +378,8 @@ export default [
     group: "Modal",
     code: modal,
   },
+  {
+    group: "NavigationBar",
+    code: navigationBar,
+  },
 ];