chore: add listbox scenario (microsoft#4136)

packages/web-components/fast-components/src/listbox/listbox.definition.ts

@@ -15,6 +15,7 @@ export const fastListboxDefinition: WebComponentDefinition = {
                     type: DataType.string,
                     default: ListboxRole.listbox,
                     required: true,
+                    values: Object.keys(ListboxRole).map(e => ({ name: `${e}` })),
                 },
                 {
                     name: "disabled",

packages/web-components/fast-components/src/listbox/scenarios/index.html

@@ -0,0 +1,7 @@
+<template title="Default">
+    <fast-listbox>
+        <fast-option value="1">Option 1</fast-option>
+        <fast-option value="2">Option 2</fast-option>
+        <fast-option value="3">Option 3</fast-option>
+    </fast-listbox>
+</template>

sites/fast-component-explorer/app/fast-components/configs/fast-listbox.ts

@@ -0,0 +1,20 @@
+import {
+    fastComponentDefinitions,
+    fastComponentSchemas,
+} from "@microsoft/site-utilities";
+import { camelCase } from "lodash-es";
+import Guidance from "../../.tmp/listbox/guidance";
+import Scenarios from "../../.tmp/listbox/scenario";
+import { mapScenarios } from "../utilities/mapping";
+import { ComponentViewConfig } from "./data.props";
+
+export const fastOptionId = "fast-option";
+export const fastListboxId = "fast-listbox";
+const fastListboxConfig: ComponentViewConfig = {
+    schema: fastComponentSchemas[fastListboxId],
+    definition: fastComponentDefinitions[`${camelCase(fastListboxId)}Definition`],
+    guidance: Guidance,
+    scenarios: mapScenarios(Scenarios),
+};
+
+export default fastListboxConfig;

sites/fast-component-explorer/app/fast-components/configs/index.ts

@@ -28,6 +28,9 @@ export { fastDividerConfig };
 import fastFlipperConfig from "./fast-flipper";
 export { fastFlipperConfig };
 
+import fastListboxConfig from "./fast-listbox";
+export { fastListboxConfig };
+
 import fastMenuConfig from "./fast-menu";
 export { fastMenuConfig };