Merge 606900a into 35fbe89

eBay · Jan 26, 2024 · 2f0734c · 2f0734c
2 parents 35fbe89 + 606900a
commit 2f0734c
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 12 deletions.
diff --git a/src/components/ebay-select/examples/external-label.marko b/src/components/ebay-select/examples/external-label.marko
@@ -1,15 +1,22 @@
-import type { Input as SelectInput } from "<ebay-select>"
-export type Input = SelectInput;
+class {
+    onCreate() {
+        this.state = {
+            selected: null
+        }
+    }
 
-class {}
+    handleChange({ index }) {
+        this.state.selected = index;
+    }
+}
 
 <span class="field">
     <label class="field__label field__label--start" for="select">
         Option
     </label>
-    <ebay-select ...input name="formFieldName" id="select">
-        <@option value="1" text="Option 1"/>
-        <@option value="2" text="Option 2"/>
-        <@option value="3" text="Option 3"/>
+    <ebay-select ...input name="formFieldName" id="select" on-change("handleChange")>
+        <for|option, i| of=input.options>
+            <@option value=option.value text=option.text selected=i === state.selected/>
+        </for>
     </ebay-select>
 </span>
diff --git a/src/components/ebay-select/select.stories.ts b/src/components/ebay-select/select.stories.ts
@@ -31,11 +31,6 @@ export default {
     },
 
     argTypes: {
-        selected: {
-            control: { type: "number" },
-            description:
-                "allows you to set the selected index option to `selected`",
-        },
         floatingLabel: {
             type: "string",
             control: { type: "string" },
@@ -68,6 +63,14 @@ export default {
                 category: "@option attributes",
             },
         },
+        selected: {
+            control: { type: "text" },
+            description:
+                "used to determine which option is selected. This should be included in one and only one option.",
+            table: {
+                category: "@option attributes",
+            },
+        },
         option: {
             name: "@option",
             table: {
@@ -132,6 +135,27 @@ ExternalLabel.parameters = {
     },
 };
 
+ExternalLabel.args = {
+    options: [
+        {
+            text: "Select an option",
+            value: "",
+        },
+        {
+            text: "option 1",
+            value: "option 1",
+        },
+        {
+            text: "option 2",
+            value: "option 2",
+        },
+        {
+            text: "option 3",
+            value: "option 3",
+        },
+    ],
+};
+
 export const Disabled = (args) => ({
     input: args,
     component: DisabledTemplate,