fix: more code suggestions

eBay · Jan 23, 2025 · 4562035 · 4562035
1 parent 282d676
commit 4562035
Show file tree

Hide file tree

Showing 24 changed files with 283 additions and 247 deletions.
diff --git a/src/components/ebay-accordion/accordion.stories.ts b/src/components/ebay-accordion/accordion.stories.ts
@@ -53,8 +53,8 @@ export default {
                 },
             },
         },
-        item: {
-            name: "@item",
+        details: {
+            name: "@details",
             description:
                 "Represents an <ebay-details/> element to be used as part of the group. Allowed attributes are `open`, `as`, `text` and `renderBody`",
             table: {
@@ -71,6 +71,16 @@ export default {
                 },
             },
         },
+        onClick: {
+            action: "on-click",
+            description: "Triggered on click of details",
+            table: {
+                category: "Events",
+                defaultValue: {
+                    summary: "{ originalEvent }",
+                },
+            },
+        },
     },
 };
 

diff --git a/src/components/ebay-accordion/component-browser.ts b/src/components/ebay-accordion/component-browser.ts
@@ -6,27 +6,38 @@ export interface AccordionInput extends Omit<Marko.Input<"ul">, `on${string}`> {
     size?: "regular" | "large";
     "auto-collapse"?: AttrBoolean;
     "a11y-role-description"?: AttrString;
-    item?: Marko.AttrTag<
+    details?: Marko.AttrTag<
         Omit<DetailsInput, "size" | "alignment" | "layout" | `on${string}`>
     >;
     "on-toggle"?: (event: { originalEvent: Event; open: boolean }) => void;
+    "on-click"?: (event: { originalEvent: MouseEvent }) => void;
 }
 
 export interface Input extends WithNormalizedProps<AccordionInput> {}
 class Accordion extends Marko.Component<Input> {
     handleToggle(event: { originalEvent: Event; open: boolean }) {
 
         const { autoCollapse } = this.input;
-        if(autoCollapse && event.open) {
-            const accordion = this.getEl("accordion-root") as HTMLUListElement;
-            const detailsElements = accordion.querySelectorAll("details");
+        const accordion = this.getEl("accordion-root") as HTMLUListElement;
+        const detailsElements = Array.from(accordion.querySelectorAll("details"));
+        const index = detailsElements.indexOf(
+            event.originalEvent.target as HTMLDetailsElement,
+        );
+
+        if (autoCollapse && event.open) {
             detailsElements.forEach((details: HTMLDetailsElement) => {
                 // Close the <details> element by setting its open attribute to false
                 if (details !== event.originalEvent.target) {
                     details.open = false;
-                } 
-            });            
+                }
+            });
         }
+
+        this.emit("toggle", {
+            originalEvent: event.originalEvent,
+            open: (event.originalEvent.target as HTMLDetailsElement).open,
+            index,
+        });
     }
 }
 

diff --git a/src/components/ebay-accordion/examples/autoCollapsed.marko b/src/components/ebay-accordion/examples/autoCollapsed.marko
@@ -1,11 +1,14 @@
 <ebay-accordion auto-collapse=true>
-    <@item text="Item 1">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
-    <@item text="Item 2">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
-    <@item text="Item 3">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
+    <@details>
+        <@summary>Item 1</@summary>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </@details>
+    <@details>
+        <@summary>Item 2</@summary>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </@details>
+    <@details>
+        <@summary>Item 3</@summary>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </@details>
 </ebay-accordion>
diff --git a/src/components/ebay-accordion/examples/default.marko b/src/components/ebay-accordion/examples/default.marko
@@ -1,11 +1,14 @@
 <ebay-accordion ...input>
-    <@item text="Item 1">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
-    <@item text="Item 2">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
-    <@item text="Item 3">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
+    <@details>
+        <@summary>Item 1</@summary>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </@details>
+    <@details>
+        <@summary>Item 2</@summary>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </@details>
+    <@details>
+        <@summary>Item 3</@summary>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </@details>
 </ebay-accordion>
diff --git a/src/components/ebay-accordion/examples/large.marko b/src/components/ebay-accordion/examples/large.marko
@@ -1,11 +1,14 @@
 <ebay-accordion size="large">
-    <@item text="Item 1">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
-    <@item text="Item 2">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
-    <@item text="Item 3">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
+    <@details>
+        <@summary>Item 1</@summary>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </@details>
+    <@details>
+        <@summary>Item 2</@summary>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </@details>
+    <@details>
+        <@summary>Item 3</@summary>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </@details>
 </ebay-accordion>
diff --git a/src/components/ebay-accordion/examples/opened.marko b/src/components/ebay-accordion/examples/opened.marko
@@ -1,11 +1,14 @@
 <ebay-accordion>
-    <@item text="Item 1" open>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
-    <@item text="Item 2">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
-    <@item text="Item 3">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </@item>
+    <@details open>
+        <@summary>Item 1</@summary>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </@details>
+    <@details>
+        <@summary>Item 2</@summary>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </@details>
+    <@details>
+        <@summary>Item 3</@summary>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </@details>
 </ebay-accordion>
diff --git a/src/components/ebay-accordion/index.marko b/src/components/ebay-accordion/index.marko
@@ -5,7 +5,7 @@ static function noop() {}
 $ const {
     class: inputClass,
     size,
-    item: items = [],
+    details: items = [],
     autoCollapse,
     a11yRoleDescription,
     ...htmlInput
@@ -25,6 +25,7 @@ $ (input as any).toJSON = noop;
                 ...item
                 layout="accordion"
                 on-toggle("handleToggle")
+                on-click("emit", "click")
             >
                 <${item.renderBody} />
             </ebay-details>

diff --git a/src/components/ebay-accordion/marko-tag.json b/src/components/ebay-accordion/marko-tag.json
@@ -11,14 +11,13 @@
     "@as": "string",
     "@auto-collapse": "boolean",
     "@a11y-role-description": "string",
-    "@item <item>[]": {
+    "@details <details>[]": {
         "attribute-groups": ["html-attributes"],
         "@*": {
             "targetProperty": null,
             "type": "expression"
         },
-        "@html-attributes": "expression",
-        "@text": "string"
+        "@html-attributes": "expression"
     },
     "description": "[view documentation](https://ebay.github.io/ebayui-core/?path=/story/navigation-disclosure-ebay-accordion)"
 }