feat(ebay-accordion): new component

src/components/ebay-accordion/README.md

@@ -0,0 +1,14 @@
+<h1 style="display: flex; justify-content: space-between; align-items: center;">
+    <span>
+        ebay-accordion
+    </span>
+    <span style="font-weight: normal; font-size: medium; margin-bottom: -15px;">
+        DS v1.0.0
+    </span>
+</h1>
+
+## Examples and Documentation
+
+-   [Storybook](https://ebay.github.io/ebayui-core/?path=/story/navigation-disclosure-ebay-accordion)
+-   [Storybook Docs](https://ebay.github.io/ebayui-core/?path=/docs/navigation-disclosure-ebay-accordion)
+-   [Code Examples](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-accordion/examples)

src/components/ebay-accordion/accordion.stories.ts

@@ -0,0 +1,111 @@
+import { buildExtensionTemplate } from "../../common/storybook/utils";
+import Accordion from "./index.marko";
+import Readme from "./README.md";
+import openTemplate from "./examples/opened.marko";
+import openTemplateCode from "./examples/opened.marko?raw";
+import largeTemplate from "./examples/large.marko";
+import largeTemplateCode from "./examples/large.marko?raw";
+import autoCollapsedTemplate from "./examples/autoCollapsed.marko";
+import autoCollapsedTemplateCode from "./examples/autoCollapsed.marko?raw";
+import { Story } from "@storybook/marko";
+import type { Input } from "./component-browser";
+
+const Template: Story<Input> = (args) => ({
+    input: {
+        ...args,
+        renderBody: function (out: any) {
+            out.html(args.renderBody);
+        } as any,
+    },
+});
+
+export default {
+    title: "navigation & disclosure/ebay-accordion",
+    component: Accordion,
+    parameters: {
+        docs: {
+            description: {
+                component: Readme,
+            },
+        },
+    },
+
+    argTypes: {
+        size: {
+            type: "options",
+            description: "Size of the details",
+            table: {
+                defaultValue: {
+                    summary: "regular",
+                },
+            },
+            options: ["regular", "large"],
+        },
+        autoCollapse: {
+            type: "boolean",
+            description: "Whether accordion panels should be autocollapsed when another is opened",
+            table: {
+                defaultValue: {
+                    summary: "false",
+                },
+            },
+        },
+        a11yRoleDescription: {
+            type: "string",
+            control: { type: "text" },
+            description:
+                "The localized role description to announce the component role for a11y users.",
+            table: {
+                defaultValue: {
+                    summary: "accordion",
+                },
+            },
+        },
+        items: {
+            name: "@item",
+            description:
+                "Represents an <ebay-details/> element to be used as part of the group. Allowed attributes are `open`, `as`, `text` and `renderBody`",
+            table: {
+                category: "@attribute tags",
+            },
+        },
+        onToggle: {
+            action: "on-toggle",
+            description: "Triggered on toggle",
+            table: {
+                category: "Events",
+                defaultValue: {
+                    summary: "{ originalEvent, open }",
+                },
+            },
+        },
+    },
+};
+
+export const Default = Template.bind({});
+const items: any = [
+    {
+        text: "Item 1",
+        renderBody:
+            `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.`,
+    },
+    {
+        text: "Item 2",
+        renderBody:
+            `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.`,
+    },
+    {
+        text: "Item 3",
+        renderBody:
+            `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.`,
+    },
+];
+Default.args = {
+    items: items
+};
+
+export const Open = buildExtensionTemplate(openTemplate, openTemplateCode);
+
+export const Large = buildExtensionTemplate(largeTemplate, largeTemplateCode);
+
+export const AutoCollapsed = buildExtensionTemplate(autoCollapsedTemplate, autoCollapsedTemplateCode);

src/components/ebay-accordion/browser.json

@@ -0,0 +1,9 @@
+{
+    "requireRemap": [
+        {
+            "from": "./style",
+            "to": "../../common/empty",
+            "if-flag": "ebayui-no-skin"
+        }
+    ]
+}

src/components/ebay-accordion/component-browser.ts

@@ -0,0 +1,38 @@
+import type { AttrBoolean, AttrString } from "marko/tags-html";
+import type { WithNormalizedProps } from "../../global";
+import type { Input as DetailsInput } from "../ebay-details/component-browser";
+
+export interface AccordionInput extends Omit<Marko.Input<"ul">, `on${string}`> {
+    size?: "regular" | "large";
+    "auto-collapse"?: AttrBoolean;
+    "a11y-role-description"?: AttrString;
+    items?: Marko.AttrTag<
+        Omit<DetailsInput, "size" | "alignment" | "layout" | `on${string}`>
+    >;
+    "on-toggle"?: (event: { originalEvent: Event; open: boolean }) => 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");
+            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,
+        });
+    }
+}
+
+export default Accordion;

src/components/ebay-accordion/examples/autoCollapsed.marko

@@ -0,0 +1,11 @@
+<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>
+</ebay-accordion>

src/components/ebay-accordion/examples/default.marko

@@ -0,0 +1,11 @@
+<ebay-accordion>
+    <@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>
+</ebay-accordion>

src/components/ebay-accordion/examples/large.marko

@@ -0,0 +1,11 @@
+<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>
+</ebay-accordion>

src/components/ebay-accordion/examples/opened.marko

@@ -0,0 +1,11 @@
+<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>
+</ebay-accordion>

src/components/ebay-accordion/index.marko

@@ -0,0 +1,33 @@
+import { processHtmlAttributes } from "../../common/html-attributes";
+
+static function noop() {}
+
+$ const {
+    class: inputClass,
+    size,
+    items,
+    autoCollapse,
+    a11yRoleDescription,
+    ...htmlInput
+} = input;
+
+$ (input as any).toJSON = noop;
+
+<ul
+    ...processHtmlAttributes(htmlInput)
+    class=["accordion", size === "large" && "accordion--large", inputClass]
+    aria-roledescription=(a11yRoleDescription ?? "accordion")
+    key="accordion-root"
+>
+    <for|item, i| of=items || []>
+        <li>
+            <ebay-details
+                ...item
+                layout="accordion"
+                on-toggle("handleToggle")
+            >
+                ${item.renderBody}
+            </ebay-details>
+        </li>
+    </for>
+</ul>

src/components/ebay-accordion/marko-tag.json

@@ -0,0 +1,24 @@
+{
+    "attribute-groups": ["html-attributes"],
+    "@*": {
+        "targetProperty": null,
+        "type": "expression"
+    },
+    "@html-attributes": "expression",
+    "@size": {
+        "enum": ["regular", "large"]
+    },
+    "@as": "string",
+    "@auto-collapse": "boolean",
+    "@a11y-role-description": "string",
+    "@items <item>[]": {
+        "attribute-groups": ["html-attributes"],
+        "@*": {
+            "targetProperty": null,
+            "type": "expression"
+        },
+        "@html-attributes": "expression",
+        "@text": "string"
+    },
+    "description": "[view documentation](https://ebay.github.io/ebayui-core/?path=/story/navigation-disclosure-ebay-accordion)"
+}

src/components/ebay-accordion/style.ts

@@ -0,0 +1 @@
+import "@ebay/skin/accordion";