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