chore: add playroom snippets

packages/orbit-components/playroom.config.js

@@ -6,7 +6,7 @@ module.exports = {
   components: require.resolve("./playroomComponents.tsx"),
   outputPath: "./.playroom/playroom",
   frameComponent: "./playroom/FrameComponent.tsx",
-  snippets: "./playroom/snippets.ts",
+  snippets: "./playroom/snippets/index.ts",
   scope: "./playroom/scope.ts",
   port: 9000,
   openBrowser: false,

packages/orbit-components/playroom/snippets/Accordion.ts

@@ -0,0 +1,56 @@
+const utils = `const [expandedSection, setExpandedSection] = React.useState("accordion-section-0");`;
+
+const code = `
+<>
+  {/* For the example to work as expected, you should also import the Accordion Utils before the return. */}
+
+  <Accordion expandedSection={expandedSection} onExpand={id => setExpandedSection(String(id))}>
+    <AccordionSection
+      id="accordion-section-0"
+      header={
+        <Stack spacing="300">
+          <Text type="primary">This is a header label</Text>
+          <Text size="small">This is a header label</Text>
+        </Stack>
+      }
+    >
+      <Text type="primary">This is a content text</Text>
+    </AccordionSection>
+    <AccordionSection
+      id="accordion-section-1"
+      header={
+        <Stack spacing="300">
+          <Text type="primary">This is a header label</Text>
+          <Text size="small">This is a header label</Text>
+        </Stack>
+      }
+    >
+      <Text type="primary">This is a content text</Text>
+    </AccordionSection>
+    <AccordionSection
+      id="accordion-section-2"
+      header={
+        <Stack spacing="300">
+          <Text type="primary">This is a header label</Text>
+          <Text size="small">This is a header label</Text>
+        </Stack>
+      }
+    >
+      <Text type="primary">This is a content text</Text>
+    </AccordionSection>
+  </Accordion>
+</>
+`;
+
+export default [
+  {
+    group: "Accordion",
+    name: "Basic Accordion",
+    code,
+  },
+  {
+    group: "Accordion",
+    name: "Utils",
+    code: utils,
+  },
+];

packages/orbit-components/playroom/snippets/BasicComponents.ts

@@ -0,0 +1,110 @@
+const alert = `<Alert title="The title" type="info" icon>The message.</Alert>`;
+
+const button = `<Button type="primary">Primary Button</Button>`;
+
+const badge = `<Badge type="info">Content</Badge>`;
+
+const buttonLink = `<ButtonLink type="primary">ButtonLink</ButtonLink>`;
+
+const badgeList = `
+<BadgeList>
+  <BadgeListItem icon={<Icons.KiwicomGuarantee />}>
+    You're departing from a different place
+  </BadgeListItem>
+  <BadgeListItem icon={<Icons.KiwicomGuarantee />} type="info" size="normal">
+    You must collect and recheck your baggage
+  </BadgeListItem>
+</BadgeList>
+`;
+
+const breadcrumbs = `
+<Breadcrumbs>
+  <BreadcrumbsItem>Kiwi.com</BreadcrumbsItem>
+  <BreadcrumbsItem>1. Level</BreadcrumbsItem>
+  <BreadcrumbsItem>2. Level</BreadcrumbsItem>
+  <BreadcrumbsItem>3. Level</BreadcrumbsItem>
+</Breadcrumbs>
+`;
+
+const buttonGroup = `
+<ButtonGroup>
+  <Button>Button</Button>
+  <Button iconLeft={<Icons.ChevronDown />}/>
+</ButtonGroup>
+`;
+
+const checkbox = `<Checkbox label="Checkbox label" info="Additional information" />`;
+
+const choiceGroup = `
+<ChoiceGroup label="Choice group">
+  <Radio label="Option one" value="one" />
+  <Radio label="Option two" value="two" />
+  <Radio label="Option three" value="three" />
+</ChoiceGroup>`;
+
+const collapse = `<Collapse label="Title"><Text>Collapsed content</Text></Collapse>`;
+
+const coupon = `<Coupon>CODE</Coupon>`;
+
+const dialog = `
+<Dialog 
+  title="Log out"
+  description="Are you sure you want to log out now?" 
+  primaryAction={<Button type="critical">Log out</Button>}/>`;
+
+const heading = `<Heading as="h1" type="title1">Heading</Heading>`;
+
+export default [
+  {
+    group: "Alert",
+    code: alert,
+  },
+  {
+    group: "Button",
+    code: button,
+  },
+  {
+    group: "ButtonLink",
+    code: buttonLink,
+  },
+  {
+    group: "ButtonGroup",
+    code: buttonGroup,
+  },
+  {
+    group: "Badge",
+    code: badge,
+  },
+  {
+    group: "BadgeList",
+    code: badgeList,
+  },
+  {
+    group: "Breadcrumbs",
+    code: breadcrumbs,
+  },
+  {
+    group: "Checkbox",
+    code: checkbox,
+  },
+  {
+    group: "ChoiceGroup",
+    code: choiceGroup,
+  },
+  {
+    group: "Collapse",
+    code: collapse,
+  },
+  {
+    group: "Coupon",
+    code: coupon,
+  },
+  {
+    group: "Dialog",
+    code: dialog,
+  },
+  {
+    group: "Heading",
+    code: heading,
+  },
+];

packages/orbit-components/playroom/snippets/Card.ts

@@ -0,0 +1,32 @@
+const basic = `<Card description="This is description of the card" title="Card title"/>`;
+
+const expandable = `
+<Card description="This card has expandable sections" title="Card Expandable">
+  <CardSection
+    title="Exapandable Section"
+    description="Section Description"
+    expandable
+  >
+    Section content
+  </CardSection>
+  <CardSection
+    title="Non exapandable Section"
+    description="Section Description"
+  >
+    Section content
+  </CardSection>
+</Card>
+`;
+
+export default [
+  {
+    group: "Card",
+    name: "Basic Card",
+    code: basic,
+  },
+  {
+    group: "Card",
+    name: "Expandable Card",
+    code: expandable,
+  },
+];