feat(marko-json): changed all attribute tags to be singular (#2415)

eBay · Jan 30, 2025 · 02f4e69 · 02f4e69
1 parent b2f1c6b
commit 02f4e69
Show file tree

Hide file tree

Showing 137 changed files with 361 additions and 361 deletions.
diff --git a/.changeset/funny-buttons-fry.md b/.changeset/funny-buttons-fry.md
@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": major
+---
+
+feat(marko-json): changed all attribute tags to be singular
diff --git a/src/common/menu-utils/index.ts b/src/common/menu-utils/index.ts
@@ -8,7 +8,7 @@ export interface MenuItem extends Omit<Marko.HTML.Button, `on${string}`> {
 }
 
 export interface BaseMenuInput {
-    items?: Marko.AttrTag<MenuItem>;
+    item?: Marko.AttrTag<MenuItem>;
     type?: string;
 }
 
@@ -59,7 +59,7 @@ export class MenuUtils<
             from items to pass correct indexes to state
             Any other component that doesn't have separator should pass through
         */
-        this.items = [...(input.items || [])].filter((item) => !item.separator);
+        this.items = [...(input.item || [])].filter((item) => !item.separator);
         this.type = input.type;
         if (this.isRadio()) {
             return {
@@ -108,7 +108,7 @@ export class MenuUtils<
 
     getSeparatorMap(input: Input) {
         let separatorCount = 0;
-        return [...(input.items || [])].reduce(
+        return [...(input.item || [])].reduce(
             (map, item, index) => {
                 if (item.separator) {
                     map[index - separatorCount] = true;

diff --git a/src/common/menu-utils/test/test.browser.js b/src/common/menu-utils/test/test.browser.js
@@ -5,7 +5,7 @@ import { getNItems } from "../../test-utils/shared";
 describe("non radio component", () => {
     const input = {
         type: "checkbox",
-        items: getNItems(3, (i) => ({
+        item: getNItems(3, (i) => ({
             value: `item ${i}`,
             checked: i === 2,
         })),
@@ -63,7 +63,7 @@ describe("non radio component", () => {
 describe("radio component", () => {
     const input = {
         type: "radio",
-        items: getNItems(3, (i) => ({
+        item: getNItems(3, (i) => ({
             value: `item ${i}`,
             checked: i === 2,
         })),

diff --git a/src/components/ebay-breadcrumbs/breadcrumbs.stories.ts b/src/components/ebay-breadcrumbs/breadcrumbs.stories.ts
@@ -77,7 +77,7 @@ export const heading = Template.bind({});
 heading.args = {
     a11yHeadingText: "Current pages",
     a11yMenuButtonText: "menu",
-    items: [
+    item: [
         {
             href: "http://www.ebay.com/",
             renderBody: "eBay",

diff --git a/src/components/ebay-breadcrumbs/component.ts b/src/components/ebay-breadcrumbs/component.ts
@@ -9,7 +9,7 @@ interface BreadcrumbsInput extends Omit<Marko.HTML.Nav, `on${string}`> {
     "a11y-heading-text"?: AttrString;
     "a11y-menu-button-text"?: AttrString;
     class?: AttrClass;
-    items?: Marko.AttrTag<Marko.HTML.A | (Marko.HTML.Button & { href: never })>;
+    item?: Marko.AttrTag<Marko.HTML.A | (Marko.HTML.Button & { href: never })>;
     "on-select"?: (event: { originalEvent: Event; el: HTMLElement }) => void;
 }
 
@@ -46,7 +46,7 @@ class Breadcrumbs extends Marko.Component<Input, State> {
     onInput(input: Input) {
         this.cachedWidths = [];
         const hiddenIndex: number[] = [];
-        const items = [...(input.items ?? [])];
+        const items = [...(input.item ?? [])];
         if ((items || []).length > 4) {
             // If we have more than 4 items, we automatically add them into hiddenIndexes.
             // The first, second to last, and last indexes will be shown automatically
@@ -87,7 +87,7 @@ class Breadcrumbs extends Marko.Component<Input, State> {
 
     _calculateMaxItems() {
         const { input, state } = this;
-        const items = [...(input.items ?? [])];
+        const items = [...(input.item ?? [])];
 
         if (!items.some((item) => !item.type)) {
             return;

diff --git a/src/components/ebay-breadcrumbs/index.marko b/src/components/ebay-breadcrumbs/index.marko
@@ -6,11 +6,11 @@ $ const {
     a11yHeadingTag,
     a11yMenuButtonText,
     class: inputClass,
-    items: attrTagItems,
+    item: attrTagItems = [],
     ...htmlInput
 } = input;
 
-$ const items = [...(attrTagItems || [])];
+$ const items = [...attrTagItems];
 
 $ var anyHref = (items || []).some((element) => element.href != null);
 <nav

diff --git a/src/components/ebay-breadcrumbs/marko-tag.json b/src/components/ebay-breadcrumbs/marko-tag.json
@@ -10,7 +10,7 @@
     "@a11y-menu-button-text": "string",
     "@aria-labelledby": "never",
     "@role": "never",
-    "@items <item>[]": {
+    "@item <item>[]": {
         "@*": {
             "targetProperty": null,
             "type": "expression"

diff --git a/src/components/ebay-breadcrumbs/mock/index.js b/src/components/ebay-breadcrumbs/mock/index.js
@@ -2,19 +2,19 @@ import { createRenderBody, getNItems } from "../../../common/test-utils/shared";
 
 export const Links = {
     a11yHeadingText: "Page navigation",
-    items: getNItems(3, (i) => ({
+    item: getNItems(3, (i) => ({
         href: i === 2 ? undefined : "#",
         renderBody: createRenderBody(`Item Text ${i}`),
     })),
 };
 export const Buttons = {
-    items: getNItems(3, (i) => ({
+    item: getNItems(3, (i) => ({
         renderBody: createRenderBody(`Item Text ${i}`),
     })),
 };
 export const linkLastWithoutHREF = {
     a11yHeadingText: "Page navigation",
-    items: getNItems(3, (i) => ({
+    item: getNItems(3, (i) => ({
         href: i === 2 ? undefined : "#",
         renderBody: createRenderBody(`Item Text ${i}`),
     })),

diff --git a/src/components/ebay-breadcrumbs/test/__snapshots__/test.server.js.snap b/src/components/ebay-breadcrumbs/test/__snapshots__/test.server.js.snap
@@ -235,7 +235,7 @@ exports[`passes through additional html attributes 2`] = `
 </nav>
 `;
 
-exports[`passes through additional html attributes from child items 1`] = `
+exports[`passes through additional html attributes from child item 1`] = `
 <button
   aria-current="location"
   class="class1"
@@ -246,7 +246,7 @@ exports[`passes through additional html attributes from child items 1`] = `
 />
 `;
 
-exports[`passes through additional html attributes from child items 2`] = `
+exports[`passes through additional html attributes from child item 2`] = `
 <button
   aria-current="location"
   class="class1"

diff --git a/src/components/ebay-breadcrumbs/test/test.browser.js b/src/components/ebay-breadcrumbs/test/test.browser.js
@@ -9,7 +9,7 @@ let component;
 
 describe("given a basic breadcrumb", () => {
     const input = mock.Links;
-    const firstItem = input.items[0];
+    const firstItem = input.item[0];
 
     beforeEach(async () => {
         component = await render(template, input);
@@ -30,7 +30,7 @@ describe("given a basic breadcrumb", () => {
 
 describe("button", () => {
     const input = mock.Buttons;
-    const lastItem = input.items[input.items.length - 1];
+    const lastItem = input.item[input.item.length - 1];
 
     beforeEach(async () => {
         component = await render(template, input);

diff --git a/src/components/ebay-breadcrumbs/test/test.server.js b/src/components/ebay-breadcrumbs/test/test.server.js
@@ -12,7 +12,7 @@ describe("breadcrumbs", () => {
 
         expect(getByLabelText(input.a11yHeadingText)).toMatchSnapshot();
 
-        input.items.forEach((item) =>
+        input.item.forEach((item) =>
             expect(getByText(item.renderBody.text)).toMatchSnapshot(),
         );
     });
@@ -21,12 +21,12 @@ describe("breadcrumbs", () => {
         const input = mock.linkLastWithoutHREF;
         const { getByText } = await render(template, input);
 
-        input.items.forEach((item, i) => {
+        input.item.forEach((item, i) => {
             const itemEl = getByText(item.renderBody.text);
             expect(itemEl).toMatchSnapshot();
             if (item.href) {
                 expect(itemEl).toMatchSnapshot();
-            } else if (i === input.items.length - 1) {
+            } else if (i === input.item.length - 1) {
                 expect(itemEl).toMatchSnapshot();
             } else {
                 // error state, because for this test, each item should either have an href or aria-current for the last one
@@ -44,7 +44,7 @@ describe("breadcrumbs", () => {
     it("renders buttons when hrefs are missing", async () => {
         const input = mock.Buttons;
         const { getByText } = await render(template, input);
-        input.items.forEach((item) =>
+        input.item.forEach((item) =>
             expect(getByText(item.renderBody.text)).toMatchSnapshot(),
         );
     });
@@ -53,7 +53,7 @@ describe("breadcrumbs", () => {
 testPassThroughAttributes(template);
 testPassThroughAttributes(template, {
     child: {
-        name: "items",
+        name: "item",
         multiple: true,
     },
 });
diff --git a/src/components/ebay-carousel/component.ts b/src/components/ebay-carousel/component.ts
@@ -24,7 +24,7 @@ interface Item {
 }
 
 interface CarouselInput {
-    items?: Marko.AttrTag<Item>;
+    item?: Marko.AttrTag<Item>;
     gap?: number | string;
     index?: number | string;
     "items-per-slide"?: number | string;
@@ -426,7 +426,7 @@ class Carousel extends Marko.Component<Input, State> {
                 "a11yNextText",
                 "a11yPlayText",
                 "a11yPauseText",
-                "items",
+                "item",
                 "hiddenScrollbar",
             ]),
             classes: [
@@ -471,7 +471,7 @@ class Carousel extends Marko.Component<Input, State> {
             // Only allow autoplay option for discrete carousels.
             if (input.autoplay) {
                 const isSingleSlide =
-                    (input.items as Item[])?.length <= itemsPerSlide;
+                    (input.item as Item[])?.length <= itemsPerSlide;
                 state.autoplayInterval =
                     parseInt(input.autoplay as any, 10) || 4000;
                 state.classes.push("carousel__autoplay");
@@ -480,7 +480,7 @@ class Carousel extends Marko.Component<Input, State> {
             }
         }
 
-        state.items = ((input.items as Item[]) || []).map((item, i) => {
+        state.items = ((input.item as Item[]) || []).map((item, i) => {
             const isStartOfSlide = state.itemsPerSlide
                 ? i % state.itemsPerSlide === 0
                 : true;

diff --git a/src/components/ebay-carousel/marko-tag.json b/src/components/ebay-carousel/marko-tag.json
@@ -26,7 +26,7 @@
     "@image-treatment": {
         "enum": ["none", "matte"]
     },
-    "@items <item>[]": {
+    "@item <item>[]": {
         "@*": {
             "targetProperty": null,
             "type": "expression"

diff --git a/src/components/ebay-carousel/test/__snapshots__/test.server.js.snap b/src/components/ebay-carousel/test/__snapshots__/test.server.js.snap
@@ -158,7 +158,7 @@ exports[`carousel > passes through additional html attributes 2`] = `
 </div>
 `;
 
-exports[`carousel > passes through additional html attributes from child items 1`] = `
+exports[`carousel > passes through additional html attributes from child item 1`] = `
 <li
   class="carousel__snap-point class1"
   data-passed-through="true"
@@ -168,7 +168,7 @@ exports[`carousel > passes through additional html attributes from child items 1
 />
 `;
 
-exports[`carousel > passes through additional html attributes from child items 2`] = `
+exports[`carousel > passes through additional html attributes from child item 2`] = `
 <li
   class="carousel__snap-point class1"
   data-passed-through="true"

diff --git a/src/components/ebay-carousel/test/mock/index.js b/src/components/ebay-carousel/test/mock/index.js
@@ -7,14 +7,14 @@ export const discrete1PerSlide0Items = {
     itemsPerSlide: 1,
     a11yPreviousText: "prev",
     a11yNextText: "next",
-    items: [],
+    item: [],
 };
 
 export const discrete1PerSlide1Items = Object.assign(
     {},
     discrete1PerSlide0Items,
     {
-        items: [
+        item: [
             {
                 renderBody: createRenderBody("carousel item content 1"),
             },
@@ -26,7 +26,7 @@ export const discrete1PerSlide3Items = Object.assign(
     {},
     discrete1PerSlide0Items,
     {
-        items: getNItems(3, (i) => ({
+        item: getNItems(3, (i) => ({
             renderBody: createRenderBody(`carousel item content ${i}`),
         })),
     },
@@ -45,7 +45,7 @@ export const discrete2PerSlide6Items = Object.assign(
     discrete1PerSlide0Items,
     {
         itemsPerSlide: 2,
-        items: getNItems(6, (i) => ({
+        item: getNItems(6, (i) => ({
             renderBody: createRenderBody(`carousel item content ${i}`),
         })),
     },
@@ -63,11 +63,11 @@ export const discrete1PerSlide3ItemsAutoPlay = Object.assign(
 export const continuous0Items = {
     a11yPreviousText: "prev",
     a11yNextText: "next",
-    items: [],
+    item: [],
 };
 
 export const continuous1Item = Object.assign({}, continuous0Items, {
-    items: [
+    item: [
         {
             style: "width:200px",
             renderBody: createRenderBody("carousel item content 1"),
@@ -76,14 +76,14 @@ export const continuous1Item = Object.assign({}, continuous0Items, {
 });
 
 export const continuous6Items = Object.assign({}, continuous0Items, {
-    items: getNItems(6, (i) => ({
+    item: getNItems(6, (i) => ({
         style: "width:200px",
         renderBody: createRenderBody(`carousel item content ${i}`),
     })),
 });
 
 export const continuous12Items = Object.assign({}, continuous0Items, {
-    items: getNItems(12, (i) => ({
+    item: getNItems(12, (i) => ({
         style: "width:200px",
         renderBody: createRenderBody(`carousel item content ${i}`),
     })),