diff --git a/packages/orbit-components/playroom/snippets/BasicComponents.ts b/packages/orbit-components/playroom/snippets/BasicComponents.ts index 5af07a68b6..aaf745ce73 100644 --- 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`; +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 = ` +<> + } + role="list" + selectable + title="Choice Title" + /> + } + role="list" + selectable + title="Choice Title" + /> + +`; + +const loading = ``; + +const notificationBadge = `10`; + +const pagination = ` + Numbers of pages: 6} + pageCount={6} + /> +`; + +const popover = ` + + +

+ Passengers +

+ + + Adult + 11+ + + + +
+ } + > + +
+`; + +const radio = ``; + +const seat = ``; + 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 index 271c66cb73..f96e721b2b 100644 --- a/packages/orbit-components/playroom/snippets/Layouts.ts +++ b/packages/orbit-components/playroom/snippets/Layouts.ts @@ -323,6 +323,40 @@ const modal = ` `; +const navigationBar = ` + + } + type="secondary" + > + Flights + + + } + type="secondary" + /> + } + type="secondary" + /> + + + +`; + export default [ { group: "CalloutBanner", @@ -344,4 +378,8 @@ export default [ group: "Modal", code: modal, }, + { + group: "NavigationBar", + code: navigationBar, + }, ];