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,
+  },
+];

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

@@ -0,0 +1,83 @@
+const calloutBanner = `
+<CallOutBanner
+  actions={<Button iconRight={<Icons.NewWindow />} size="small" type="secondary">Find a Room</Button>}
+  description="Select your accommodation from more than a million properties worldwide."
+  illustration={<Illustration name="Accommodation" size="small"/>}
+  title="Rooms in Warsaw"
+>
+  <List type="secondary">
+    <ListItem icon={<Icons.Check color="success" />}>
+      Up to 50% off.
+    </ListItem>
+    <ListItem icon={<Icons.Check color="success" />}>
+      From 3-star budget to 5-star luxury.
+    </ListItem>
+  </List>
+</CallOutBanner>
+`;
+
+const drawer = `
+<Drawer title="Drawer title" position="right" width="320px">
+  <Collapse label="Links list" initialExpanded>
+    <LinkList indent>
+      <TextLink type="secondary">
+        Link 1
+      </TextLink>
+      <TextLink type="secondary">
+        Link 2
+      </TextLink>
+      <TextLink type="secondary">
+        Link 3
+      </TextLink>
+    </LinkList>
+  </Collapse>
+  <LinkList>
+    <TextLink type="secondary">
+      Sign out
+    </TextLink>
+  </LinkList>
+</Drawer>
+`;
+
+const horizontalScroll = `
+<HorizontalScroll arrows>
+  {Array(...Array(10)).map((_, key) => (
+    <Box
+      key={key}
+      display="flex"
+      justify="center"
+      minWidth="150px"
+      background="cloudLight"
+      height="full"
+    >
+      <Text size="large" weight="bold" as="div">
+        <div
+          style={{
+            height: "50px",
+            display: "flex",
+            alignItems: "center",
+          }}
+        >
+          {key}
+        </div>
+      </Text>
+    </Box>
+  ))}
+  )}
+</HorizontalScroll>
+`;
+
+export default [
+  {
+    group: "CalloutBanner",
+    code: calloutBanner,
+  },
+  {
+    group: "Drawer",
+    code: drawer,
+  },
+  {
+    group: "HorizontalScroll",
+    code: horizontalScroll,
+  },
+];

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

@@ -0,0 +1,62 @@
+const airportIllustration = `<AirportIllustration name="PRGSmartPass"/>`;
+
+const countryFlag = `<CountryFlag code="cz" name="Czech Republic" />`;
+
+const carrierLogo = `
+<CarrierLogo
+  carriers={[
+    {
+      code: 'FR',
+      name: 'Ryanair'
+    },
+    {
+      code: '3K',
+      name: 'Jetstar Asia'
+    },
+    {
+      code: 'V7',
+      name: 'Volotea'
+    },
+    {
+      code: 'TP',
+      name: 'TAP Air Portugal'
+    }
+  ]}
+  inlineStacked
+  rounded
+  size="large"
+/>
+`;
+
+const featureIcon = `<FeatureIcon name="TicketFlexi" />`;
+
+const icon = `<Icons.Airplane />`;
+
+const illustration = `<Illustration name="Accommodation" size="small"/>`;
+
+export default [
+  {
+    group: "Airport Illustration",
+    code: airportIllustration,
+  },
+  {
+    group: "Carrier Logo",
+    code: carrierLogo,
+  },
+  {
+    group: "Country Flag",
+    code: countryFlag,
+  },
+  {
+    group: "Feature Icon",
+    code: featureIcon,
+  },
+  {
+    group: "Icon",
+    code: icon,
+  },
+  {
+    group: "Illustration",
+    code: illustration,
+  },
+];