diff --git a/packages/orbit-components/playroom.config.js b/packages/orbit-components/playroom.config.js index 4679ef6138..0e03ff28bf 100644 --- a/packages/orbit-components/playroom.config.js +++ b/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, diff --git a/packages/orbit-components/playroom/snippets.ts b/packages/orbit-components/playroom/snippets.ts deleted file mode 100644 index c287ae2ff2..0000000000 --- a/packages/orbit-components/playroom/snippets.ts +++ /dev/null @@ -1,39 +0,0 @@ -interface Snippet { - group: string; - name: string; - code: string; -} - -const snippets: Snippet[] = [ - { - group: "Basic Components", - name: "Button Primary", - code: ``, - }, - { - group: "Basic Components", - name: "Alert Info", - code: `This is an informational message`, - }, - { - group: "Forms", - name: "Input Field", - code: ``, - }, - { - group: "Layout", - name: "Card with Content", - code: ` - - - - Card Title - This is some content inside a card. - - - -`, - }, -]; - -export default snippets; diff --git a/packages/orbit-components/playroom/snippets/Accordion.ts b/packages/orbit-components/playroom/snippets/Accordion.ts new file mode 100644 index 0000000000..a6adac5013 --- /dev/null +++ b/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. */} + + setExpandedSection(String(id))}> + + This is a header label + This is a header label + + } + > + This is a content text + + + This is a header label + This is a header label + + } + > + This is a content text + + + This is a header label + This is a header label + + } + > + This is a content text + + + +`; + +export default [ + { + group: "Accordion", + name: "Basic Accordion", + code, + }, + { + group: "Accordion", + name: "Utils", + code: utils, + }, +]; diff --git a/packages/orbit-components/playroom/snippets/BasicComponents.ts b/packages/orbit-components/playroom/snippets/BasicComponents.ts new file mode 100644 index 0000000000..5fb93aaf83 --- /dev/null +++ b/packages/orbit-components/playroom/snippets/BasicComponents.ts @@ -0,0 +1,344 @@ +const alert = `The message.`; + +const button = ``; + +const badge = `Content`; + +const buttonLink = `ButtonLink`; + +const badgeList = ` + + }> + You're departing from a different place + + } type="info" size="normal"> + You must collect and recheck your baggage + + +`; + +const breadcrumbs = ` + + Kiwi.com + 1. Level + 2. Level + 3. Level + +`; + +const buttonGroup = ` + + + }/>`; + +const heading = `Heading`; + +const linkList = ` + + + Flight 1 + + + Flight 2 + + + Flight 3 + + +`; + +const list = ` + + + 24,000 locations around the globe + + + Lowest price car rental in Warsaw + + + From 3 star budget to 5 star luxury + + +`; + +const listChoice = ` +<> + } + selectable + /> + } + selectable + /> + +`; + +const loading = ``; + +const notificationBadge = `10`; + +const pagination = ` + +`; + +const popover = ` + + Lorem ipsum + +} +> + + +`; + +const radio = ``; + +const seat = ``; + +const segmentedSwitch = ` +
+ +
+`; + +const separator = ``; + +const skeleton = ``; + +const socialButton = ``; + +const stepper = ``; + +const stopoverArrow = ``; + +const switchComponent = `} />`; + +const tag = ` +} + type="colored" + onRemove={() => {}} +> + Passengers + +`; + +const text = `Text`; + +const textLink = ` +} + onClick={() => {}} +> + Link text + +`; + +const timeline = ` + + + + + + +`; + +const tooltip = ` + + + Tooltip trigger + + +`; + +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, + }, + { + 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, + }, + { + group: "SegmentedSwitch", + code: segmentedSwitch, + }, + { + group: "Separator", + code: separator, + }, + { + group: "Skeleton", + code: skeleton, + }, + { + group: "SocialButton", + code: socialButton, + }, + { + group: "Stepper", + code: stepper, + }, + { + group: "StopoverArrow", + code: stopoverArrow, + }, + { + group: "Switch", + code: switchComponent, + }, + { + group: "Tag", + code: tag, + }, + { + group: "Text", + code: text, + }, + { + group: "TextLink", + code: textLink, + }, + { + group: "Timeline", + code: timeline, + }, + { + group: "Tooltip", + code: tooltip, + }, +]; diff --git a/packages/orbit-components/playroom/snippets/Card.ts b/packages/orbit-components/playroom/snippets/Card.ts new file mode 100644 index 0000000000..733dc2792b --- /dev/null +++ b/packages/orbit-components/playroom/snippets/Card.ts @@ -0,0 +1,32 @@ +const basic = ``; + +const expandable = ` + + + Section content + + + Section content + + +`; + +export default [ + { + group: "Card", + name: "Basic Card", + code: basic, + }, + { + group: "Card", + name: "Expandable Card", + code: expandable, + }, +]; diff --git a/packages/orbit-components/playroom/snippets/Inputs.ts b/packages/orbit-components/playroom/snippets/Inputs.ts new file mode 100644 index 0000000000..10fba42fe0 --- /dev/null +++ b/packages/orbit-components/playroom/snippets/Inputs.ts @@ -0,0 +1,199 @@ +const basic = ``; + +const withError = ` +
+ } + suffix={} size="normal"/>} + /> +
`; + +const inputFile = ` +
+ +
`; + +const inputGroup = ` + + + } +/> +`; + +const textarea = ` +