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