From c00635390b9c302cce10135d2f59b6a22c298019 Mon Sep 17 00:00:00 2001 From: Bill Min Date: Mon, 4 Nov 2024 19:03:26 -0500 Subject: [PATCH 1/8] refactor: (read desc) fully migrate stories to typescript and fix type issues in examples (#2317) --- .changeset/plenty-drinks-sniff.md | 5 ++ package.json | 4 +- src/common/menu-utils/index.ts | 1 + .../common/storybook/storybook-code-source.ts | 0 {.storybook => src/common/storybook}/utils.ts | 2 +- .../components/ebay-dialog-base/component.ts | 2 +- .../ebay-3d-viewer/3d-viewer.stories.ts | 10 ++-- .../ebay-alert-dialog/alert-dialog.stories.ts | 8 ++- .../ebay-alert-dialog/test/test.browser.js | 2 +- .../area-chart.stories-ignore.ts | 18 +++--- src/components/ebay-avatar/avatar.stories.ts | 8 ++- .../ebay-avatar/test/test.server.js | 2 +- src/components/ebay-badge/badge.stories.ts | 7 ++- src/components/ebay-badge/examples/menu.marko | 4 +- .../bar-chart.stories-ignore.ts | 10 ++-- .../ebay-breadcrumbs/breadcrumbs.stories.ts | 11 ++-- src/components/ebay-button/button.stories.ts | 11 ++-- .../ebay-calendar/calendar.stories.ts | 8 ++- .../ebay-carousel/carousel.stories.ts | 5 +- .../ebay-carousel/examples/autoplay.marko | 20 +++---- .../examples/continuous-image-treatment.marko | 5 +- .../ebay-carousel/examples/continuous.marko | 20 +++---- .../examples/discrete-controlled.marko | 25 +++++---- .../ebay-carousel/examples/discrete.marko | 20 +++---- .../character-count.stories.ts | 8 ++- .../examples/custom-text.marko | 31 +++++++--- .../examples/in-field.marko | 26 +++++++-- .../ebay-checkbox/checkbox.stories.ts | 12 ++-- src/components/ebay-chip/chip.stories.ts | 15 ++--- .../chips-combobox.stories.ts | 9 +-- .../ebay-combobox/combobox.stories.ts | 12 ++-- src/components/ebay-combobox/component.ts | 4 +- .../examples/floating-label.marko | 2 +- .../examples/search-filtering.marko | 56 ++++++++++++++----- .../confirm-dialog.stories.ts | 8 ++- .../examples/default.marko | 16 ++++-- .../ebay-confirm-dialog/test/test.browser.js | 2 +- .../ebay-cta-button/cta-button.stories.ts | 13 +++-- .../ebay-date-textbox/date-textbox.stories.ts | 8 ++- .../ebay-date-textbox/examples/in-field.marko | 3 + .../examples/localized.marko | 1 - .../examples/with-clear.marko | 29 +++++++--- .../ebay-details/details.stories.ts | 12 ++-- .../ebay-donut-chart/donut-chart.stories.ts | 10 ++-- .../drawer-dialog.stories.ts | 12 ++-- .../ebay-drawer-dialog/examples/default.marko | 3 + .../examples/lots-of-text.marko | 3 + .../examples/no-handle.marko | 3 + .../ebay-drawer-dialog/test/test.browser.js | 2 +- .../education-notice.stories.ts | 10 ++-- src/components/ebay-eek/eek.stories.ts | 7 ++- .../ebay-fake-link/fake-link.stories.ts | 12 ++-- .../ebay-fake-menu-button/component.ts | 5 +- .../fake-menu-button.stories.ts | 10 ++-- .../ebay-fake-menu/fake-menu.stories.ts | 10 ++-- .../ebay-fake-tabs/fake-tabs.stories.ts | 11 ++-- .../examples/with-mock-uploads.marko | 2 +- .../examples/with-preview-cards.marko | 2 +- .../ebay-file-input/file-input.stories.ts | 14 ++--- .../file-preview-card-group.stories.ts | 11 ++-- .../file-preview-card.stories.ts | 10 ++-- .../filter-menu-button.stories.ts | 12 ++-- .../test/test.browser.js | 2 +- .../ebay-filter-menu/filter-menu.stories.ts | 10 ++-- .../ebay-filter-menu/test/test.browser.js | 2 +- src/components/ebay-filter/filter.stories.ts | 10 ++-- src/components/ebay-flag/flag.stories.ts | 5 +- .../fullsceen-dialog.stories.ts | 8 ++- .../test/test.browser.js | 2 +- .../ebay-icon-button/icon-button.stories.ts | 6 +- src/components/ebay-icon/icon.stories.ts | 8 ++- .../image-placeholder.stories.ts | 2 +- .../examples/modal-programatic.marko | 2 +- .../ebay-infotip/infotip.stories.ts | 2 +- .../inline-notice.stories.ts | 2 +- .../examples/default.marko | 6 +- .../ebay-lightbox-dialog/examples/focus.marko | 7 ++- .../examples/scrolling.marko | 7 ++- .../examples/with-footer.marko | 9 ++- .../examples/with-prev-button.marko | 7 ++- .../lightbox-dialog.stories.ts | 10 ++-- .../ebay-lightbox-dialog/test/test.browser.js | 2 +- .../ebay-line-chart/line-chart.stories.ts | 36 ++++++------ src/components/ebay-list/list.stories.ts | 20 ++----- .../listbox-button.stories.ts | 10 ++-- .../ebay-listbox/listbox.stories.ts | 10 ++-- src/components/ebay-menu-button/component.ts | 4 +- .../ebay-menu-button/menu-button.stories.ts | 10 ++-- .../ebay-menu-button/test/test.browser.js | 2 +- .../ebay-menu/examples/sprites.marko | 1 - .../ebay-menu/examples/typeahead.marko | 1 - src/components/ebay-menu/menu.stories.ts | 10 ++-- .../test/__snapshots__/test.server.js.snap | 2 - .../ebay-page-notice/page-notice.stories.ts | 18 +++--- .../examples/buttons-interactive.marko | 10 ++-- .../examples/hidden-pages.marko | 9 +-- .../ebay-pagination/pagination.stories.ts | 14 +++-- .../ebay-panel-dialog/panel-dialog.stories.ts | 12 ++-- .../ebay-panel-dialog/test/test.browser.js | 2 +- .../ebay-phone-input/phone-input.stories.ts | 10 +--- .../progress-bar-expressive.stories.ts | 12 ++-- .../ebay-progress-bar/progress-bar.stories.ts | 13 +++-- .../progress-spinner.stories.ts | 13 +++-- .../progress-stepper.stories.ts | 13 +++-- src/components/ebay-radio/radio.stories.ts | 26 +++++---- .../section-notice.stories.ts | 16 +++--- .../ebay-section-title/examples/small.marko | 3 - src/components/ebay-section-title/index.marko | 2 +- .../section-title.stories.ts | 13 +++-- .../examples/controlled.marko | 2 +- .../segmented-buttons.stories.ts | 11 ++-- .../ebay-select/examples/external-label.marko | 12 +++- src/components/ebay-select/select.stories.ts | 22 ++++---- src/components/ebay-signal/signal.stories.ts | 15 ++--- .../ebay-skeleton/examples/composite.marko | 2 +- .../examples/text-multiline.marko | 2 +- .../ebay-skeleton/examples/tile.marko | 2 +- .../ebay-skeleton/examples/withContent.marko | 8 ++- .../ebay-skeleton/skeleton.stories.ts | 11 ++-- .../test/__snapshots__/test.server.js.snap | 3 +- .../snackbar-dialog.stories.ts | 17 +----- .../spark-line.stories-ignore.ts | 12 ++-- .../ebay-split-button/split-button.stories.ts | 12 ++-- .../examples/default.marko | 2 +- .../examples/fieldset.marko | 2 +- .../star-rating-select.stories.ts | 14 +++-- .../ebay-star-rating/star-rating.stories.ts | 15 ++--- src/components/ebay-switch/switch.stories.ts | 13 +++-- .../examples/sort-client-side.marko | 8 +-- src/components/ebay-table/examples/sort.marko | 8 +-- src/components/ebay-table/table.stories.ts | 4 +- src/components/ebay-tabs/tabs.stories.ts | 12 ++-- .../ebay-textbox/examples/both-icons.marko | 5 +- .../ebay-textbox/textbox.stories.ts | 28 +++++----- .../ebay-toast-dialog/test/test.browser.js | 2 +- .../ebay-toast-dialog/toast-dialog.stories.ts | 12 ++-- .../examples/controlled.marko | 5 +- .../toggle-button-group.stories.ts | 10 ++-- .../examples/with-image.marko | 6 ++ .../toggle-button.stories.ts | 18 +++--- .../pointer-with-custom-location.marko | 2 +- .../ebay-tooltip/tooltip.stories.ts | 14 +++-- .../ebay-tourtip/examples/withFooter.marko | 2 - .../ebay-tourtip/tourtip.stories.ts | 10 ++-- .../tri-state-checkbox.stories.ts | 18 +++--- src/components/ebay-video/video.stories.ts | 18 +++--- tsconfig.json | 8 +-- 147 files changed, 798 insertions(+), 594 deletions(-) create mode 100644 .changeset/plenty-drinks-sniff.md rename .storybook/storybook-code-source/index.ts => src/common/storybook/storybook-code-source.ts (100%) rename {.storybook => src/common/storybook}/utils.ts (95%) delete mode 100644 src/components/ebay-section-title/examples/small.marko diff --git a/.changeset/plenty-drinks-sniff.md b/.changeset/plenty-drinks-sniff.md new file mode 100644 index 000000000..e174782d3 --- /dev/null +++ b/.changeset/plenty-drinks-sniff.md @@ -0,0 +1,5 @@ +--- +"@ebay/ebayui-core": patch +--- + +refactor(storybook/examples): fully migrate stories and examples to typescript diff --git a/package.json b/package.json index 6ea85095e..b5168de74 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,9 @@ "marko.json", "package-lock.json", "*.browser.json", - "marketplace.json" + "marketplace.json", + "!**/{,*.}stories.*", + "!**/{,*.}stories-ignore.*" ], "license": "MIT", "repository": { diff --git a/src/common/menu-utils/index.ts b/src/common/menu-utils/index.ts index eb363f9ed..94aafe2bc 100644 --- a/src/common/menu-utils/index.ts +++ b/src/common/menu-utils/index.ts @@ -10,6 +10,7 @@ export interface MenuItem extends Omit, `on${string}`> { export interface BaseMenuInput { items?: Marko.AttrTag; type?: string; + separator?: Marko.AttrTag<{}>; } export interface MenuState { diff --git a/.storybook/storybook-code-source/index.ts b/src/common/storybook/storybook-code-source.ts similarity index 100% rename from .storybook/storybook-code-source/index.ts rename to src/common/storybook/storybook-code-source.ts diff --git a/.storybook/utils.ts b/src/common/storybook/utils.ts similarity index 95% rename from .storybook/utils.ts rename to src/common/storybook/utils.ts index a4df24f0f..1bc006c62 100644 --- a/.storybook/utils.ts +++ b/src/common/storybook/utils.ts @@ -1,4 +1,4 @@ -function addRenderBodies(input: any) { +function addRenderBodies(input: any): any { if (input && typeof input === "object") { if (Array.isArray(input)) { return input.map(addRenderBodies); diff --git a/src/components/components/ebay-dialog-base/component.ts b/src/components/components/ebay-dialog-base/component.ts index d2f5192fd..9fc7aea15 100644 --- a/src/components/components/ebay-dialog-base/component.ts +++ b/src/components/components/ebay-dialog-base/component.ts @@ -20,7 +20,7 @@ interface DialogBaseInput extends Omit, `on${string}`> { "close-button-text"?: AttrString; "close-button-class"?: AttrClass; "a11y-close-text"?: AttrString; - "close-button"?: Marko.Renderable; + "close-button"?: Marko.Renderable | Marko.AttrTag<{ renderBody: Marko.Body }>; "is-modal"?: boolean; "ignore-escape"?: boolean; "window-type"?: string; diff --git a/src/components/ebay-3d-viewer/3d-viewer.stories.ts b/src/components/ebay-3d-viewer/3d-viewer.stories.ts index 1f8f0c897..14de0d721 100644 --- a/src/components/ebay-3d-viewer/3d-viewer.stories.ts +++ b/src/components/ebay-3d-viewer/3d-viewer.stories.ts @@ -1,9 +1,11 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; -import { addRenderBodies } from "../../../.storybook/utils"; +import { Story } from "@storybook/marko"; +import { tagToString } from "../../common/storybook/storybook-code-source"; +import { addRenderBodies } from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./index.marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); export default { @@ -150,7 +152,7 @@ export default { }, }, }, -}; +} ; export const Default = Template.bind({}); Default.args = { diff --git a/src/components/ebay-alert-dialog/alert-dialog.stories.ts b/src/components/ebay-alert-dialog/alert-dialog.stories.ts index 3cbf0396f..60edc70ec 100644 --- a/src/components/ebay-alert-dialog/alert-dialog.stories.ts +++ b/src/components/ebay-alert-dialog/alert-dialog.stories.ts @@ -1,9 +1,11 @@ -import { addRenderBodies } from "../../../.storybook/utils"; +import { Story } from "@storybook/marko"; +import { addRenderBodies } from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./examples/default.marko"; +import type { Input } from "./index.marko"; import code from "./examples/default.marko?raw"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -87,7 +89,7 @@ Default.args = { renderBody: `OK`, }, renderBody: `You must acknowledge this alert to continue.`, -}; +} as any; Default.parameters = { docs: { source: { diff --git a/src/components/ebay-alert-dialog/test/test.browser.js b/src/components/ebay-alert-dialog/test/test.browser.js index 2801293d6..fbd2947b0 100644 --- a/src/components/ebay-alert-dialog/test/test.browser.js +++ b/src/components/ebay-alert-dialog/test/test.browser.js @@ -9,9 +9,9 @@ import { } from "vitest"; import { render, fireEvent, waitFor, cleanup } from "@marko/testing-library"; import { composeStories } from "@storybook/marko"; -import { addRenderBodies } from "../../../../.storybook/utils"; import { fastAnimations } from "../../../common/test-utils/browser"; import * as stories from "../alert-dialog.stories"; // import all stories from the stories file +import { addRenderBodies } from "../../../common/storybook/utils"; const { Default } = composeStories(stories); beforeAll(() => fastAnimations.start()); diff --git a/src/components/ebay-area-chart/area-chart.stories-ignore.ts b/src/components/ebay-area-chart/area-chart.stories-ignore.ts index 15f99afe4..4ba576e1c 100644 --- a/src/components/ebay-area-chart/area-chart.stories-ignore.ts +++ b/src/components/ebay-area-chart/area-chart.stories-ignore.ts @@ -1,10 +1,12 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; -import { addRenderBodies } from "../../../.storybook/utils"; +import { tagToString } from "../../common/storybook/storybook-code-source"; +import { addRenderBodies } from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./index.marko"; import sampleSeriesData from "./examples/data.json"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -70,7 +72,7 @@ export const Standard = Template.bind({}); Standard.args = { title: "Single series sample area chart", description: "this chart displays 30 days of sample values", - series: sampleSeriesData.slice(0, 1), + series: sampleSeriesData.slice(0, 1) as any, }; Standard.parameters = { docs: { @@ -85,7 +87,7 @@ TwoSeries.args = { title: "Two series sample area chart", description: "this chart displays 30 days of values for sample1 and sample2", - series: sampleSeriesData.slice(0, 2), + series: sampleSeriesData.slice(0, 2) as any, }; TwoSeries.parameters = { docs: { @@ -100,7 +102,7 @@ ThreeSeries.args = { title: "Three series sample area chart", description: "this chart displays 30 days of values for sample1, sample2 and sample3", - series: sampleSeriesData.slice(0, 3), + series: sampleSeriesData.slice(0, 3) as any, }; ThreeSeries.parameters = { docs: { @@ -115,7 +117,7 @@ FourSeries.args = { title: "Four series sample area chart", description: "this chart displays 30 days of values for sample1, sample2, sample3, and sample4", - series: sampleSeriesData.slice(0, 4), + series: sampleSeriesData.slice(0, 4) as any, }; FourSeries.parameters = { docs: { @@ -130,7 +132,7 @@ FiveSeries.args = { title: "Five series sample area chart", description: "this chart displays 30 days of values for sample1, sample2, sample3, sample4, and sample5", - series: sampleSeriesData, + series: sampleSeriesData as any, }; FiveSeries.parameters = { docs: { diff --git a/src/components/ebay-avatar/avatar.stories.ts b/src/components/ebay-avatar/avatar.stories.ts index ecbf5837a..cce89bc3a 100644 --- a/src/components/ebay-avatar/avatar.stories.ts +++ b/src/components/ebay-avatar/avatar.stories.ts @@ -1,14 +1,16 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import { addRenderBodies, buildExtensionTemplate, -} from "../../../.storybook/utils"; +} from "../../common/storybook/utils"; import avatar from "./index.marko"; import Readme from "./README.md"; import imageTemplate from "./examples/image.marko"; import imageTemplateCode from "./examples/image.marko?raw"; +import { Story } from "@storybook/marko"; +import type { Input } from "./index.marko"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); diff --git a/src/components/ebay-avatar/test/test.server.js b/src/components/ebay-avatar/test/test.server.js index 9f4a11de3..cd24b45ed 100644 --- a/src/components/ebay-avatar/test/test.server.js +++ b/src/components/ebay-avatar/test/test.server.js @@ -3,9 +3,9 @@ import { describe, it } from "vitest"; import { composeStories } from "@storybook/marko"; import { snapshotHTML } from "../../../common/test-utils/snapshots"; import * as stories from "../avatar.stories"; // import all stories from the stories file +import { addRenderBodies } from "../../../common/storybook/utils"; const { Default, WithImage, SignedOut } = composeStories(stories); const htmlSnap = snapshotHTML(__dirname); -import { addRenderBodies } from "../../../../.storybook/utils"; describe("avatar", () => { it("renders defaults", async () => { diff --git a/src/components/ebay-badge/badge.stories.ts b/src/components/ebay-badge/badge.stories.ts index a1ad3af2c..aca7df7e9 100644 --- a/src/components/ebay-badge/badge.stories.ts +++ b/src/components/ebay-badge/badge.stories.ts @@ -1,8 +1,9 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; -import badge from "./index.marko"; +import { Story } from "@storybook/marko"; +import { tagToString } from "../../common/storybook/storybook-code-source"; +import badge, { type Input } from "./index.marko"; import Readme from "./README.md"; -const Template = (args) => ({ input: args }); +const Template: Story = (args) => ({ input: args }); export default { title: "graphics & icons/ebay-badge", diff --git a/src/components/ebay-badge/examples/menu.marko b/src/components/ebay-badge/examples/menu.marko index 8b610128f..629e2a824 100644 --- a/src/components/ebay-badge/examples/menu.marko +++ b/src/components/ebay-badge/examples/menu.marko @@ -1,5 +1,5 @@ - <@item badgeNumber="5" aria-label="item 1 (5 unread items)">item 1 - <@item badgeNumber="23" aria-label="item 2 (23 unread items)">item 2 + <@item badgeNumber=5 aria-label="item 1 (5 unread items)">item 1 + <@item badgeNumber=23 aria-label="item 2 (23 unread items)">item 2 <@item>item 3 diff --git a/src/components/ebay-bar-chart/bar-chart.stories-ignore.ts b/src/components/ebay-bar-chart/bar-chart.stories-ignore.ts index cc6b33dd8..365c0d4e2 100644 --- a/src/components/ebay-bar-chart/bar-chart.stories-ignore.ts +++ b/src/components/ebay-bar-chart/bar-chart.stories-ignore.ts @@ -1,9 +1,11 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; -import { addRenderBodies } from "../../../.storybook/utils"; +import { tagToString } from "../../common/storybook/storybook-code-source"; +import { addRenderBodies } from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./index.marko"; +import type { Input } from "./component"; import sampleSeriesData from "./examples/data.json"; -const Template = (args) => ({ +import { Story } from "@storybook/marko"; +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -75,7 +77,7 @@ export default { }, }; -function getSeriesData(series, days) { +function getSeriesData(series: number, days: number): any { return sampleSeriesData.slice(0, series).map((s) => ({ ...s, data: s.data.slice(0, days), diff --git a/src/components/ebay-breadcrumbs/breadcrumbs.stories.ts b/src/components/ebay-breadcrumbs/breadcrumbs.stories.ts index 9c4c89ec8..30c234b8f 100644 --- a/src/components/ebay-breadcrumbs/breadcrumbs.stories.ts +++ b/src/components/ebay-breadcrumbs/breadcrumbs.stories.ts @@ -1,5 +1,5 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; -import { addRenderBodies } from "../../../.storybook/utils"; +import { tagToString } from "../../common/storybook/storybook-code-source"; +import { addRenderBodies } from "../../common/storybook/utils"; import Component from "./index.marko"; import breadcrumb2 from "./examples/last-page-as-current.marko"; import breadcrumb3 from "./examples/last-page-as-parent.marko"; @@ -9,10 +9,11 @@ import breadcrumb2Code from "./examples/last-page-as-current.marko?raw"; import breadcrumb3Code from "./examples/last-page-as-parent.marko?raw"; import breadcrumb4Code from "./examples/page-custom-attrs.marko?raw"; import breadcrumb5Code from "./examples/buttons.marko?raw"; - +import type { Input } from "./component"; import Readme from "./README.md"; +import { Story } from "@storybook/marko"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -93,7 +94,7 @@ heading.args = { href: "https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906", renderBody: "Smart Watch Bands", }, - ], + ] as any, }; heading.parameters = { diff --git a/src/components/ebay-button/button.stories.ts b/src/components/ebay-button/button.stories.ts index 5e8d6add0..468eacc93 100644 --- a/src/components/ebay-button/button.stories.ts +++ b/src/components/ebay-button/button.stories.ts @@ -1,14 +1,15 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import { addRenderBodies, buildExtensionTemplate, -} from "../../../.storybook/utils"; -import button from "./index.marko"; +} from "../../common/storybook/utils"; +import button, { type Input } from "./index.marko"; import Readme from "./README.md"; import ExpandButtonTemplate from "./examples/expand-button.marko"; import ExpandButtonTemplateCode from "./examples/expand-button.marko?raw"; +import { Story } from "@storybook/marko"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); // const Template = args =({ input: withRenderBody(args) }) @@ -211,7 +212,7 @@ Standard.args = { transparent: false, fixedHeight: false, truncate: false, -}; +} as any; Standard.parameters = { docs: { diff --git a/src/components/ebay-calendar/calendar.stories.ts b/src/components/ebay-calendar/calendar.stories.ts index 3f793d032..233e6d959 100644 --- a/src/components/ebay-calendar/calendar.stories.ts +++ b/src/components/ebay-calendar/calendar.stories.ts @@ -1,16 +1,18 @@ import { addRenderBodies, buildExtensionTemplate, -} from "../../../.storybook/utils"; -import { tagToString } from "../../../.storybook/storybook-code-source"; +} from "../../common/storybook/utils"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; import Component from "./index.marko"; +import type { Input } from "./component"; import WithLinksTemplate from "./examples/links.marko"; import WithLinksTemplateCode from "./examples/links.marko?raw"; import WithSpecificLinksTemplate from "./examples/linkMap.marko"; import WithSpecificLinksTemplateCode from "./examples/linkMap.marko?raw"; +import { Story } from "@storybook/marko"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); diff --git a/src/components/ebay-carousel/carousel.stories.ts b/src/components/ebay-carousel/carousel.stories.ts index ec8849d8d..3c5378179 100644 --- a/src/components/ebay-carousel/carousel.stories.ts +++ b/src/components/ebay-carousel/carousel.stories.ts @@ -1,9 +1,6 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; import { - addRenderBodies, buildExtensionTemplate, -} from "../../../.storybook/utils"; - +} from "../../common/storybook/utils"; import carousel from "./index.marko"; import Readme from "./README.md"; import continiousTemplate from "./examples/continuous.marko"; diff --git a/src/components/ebay-carousel/examples/autoplay.marko b/src/components/ebay-carousel/examples/autoplay.marko index b3c82b36a..7b60d6731 100644 --- a/src/components/ebay-carousel/examples/autoplay.marko +++ b/src/components/ebay-carousel/examples/autoplay.marko @@ -33,14 +33,14 @@ export interface Input { on-slide("emit", "slide") on-play("emit", "play") on-pause("emit", "pause")> - <@item style={ width: 400 } class="demo2-card">Card 1 - <@item style={ width: 400 } class="demo2-card">Card 2 - <@item style={ width: 400 } class="demo2-card">Card 3 - <@item style={ width: 400 } class="demo2-card">Card 4 - <@item style={ width: 400 } class="demo2-card">Card 5 - <@item style={ width: 400 } class="demo2-card">Card 6 - <@item style={ width: 400 } class="demo2-card">Card 7 - <@item style={ width: 400 } class="demo2-card">Card 8 - <@item style={ width: 400 } class="demo2-card">Card 9 - <@item style={ width: 400 } class="demo2-card">Card 10 + <@item style={ width: "400px" } class="demo2-card">Card 1 + <@item style={ width: "400px" } class="demo2-card">Card 2 + <@item style={ width: "400px" } class="demo2-card">Card 3 + <@item style={ width: "400px" } class="demo2-card">Card 4 + <@item style={ width: "400px" } class="demo2-card">Card 5 + <@item style={ width: "400px" } class="demo2-card">Card 6 + <@item style={ width: "400px" } class="demo2-card">Card 7 + <@item style={ width: "400px" } class="demo2-card">Card 8 + <@item style={ width: "400px" } class="demo2-card">Card 9 + <@item style={ width: "400px" } class="demo2-card">Card 10 diff --git a/src/components/ebay-carousel/examples/continuous-image-treatment.marko b/src/components/ebay-carousel/examples/continuous-image-treatment.marko index 1eb20d25d..41680c0a8 100644 --- a/src/components/ebay-carousel/examples/continuous-image-treatment.marko +++ b/src/components/ebay-carousel/examples/continuous-image-treatment.marko @@ -24,7 +24,6 @@ export interface Input { - <@item style={ width: 400 } class="demo-card"> + <@item style={ width: "400px" } class="demo-card"> Additional Item - <@item style={ width: 400 } class="demo-card"> + <@item style={ width: "400px" } class="demo-card"> Additional Item 2 diff --git a/src/components/ebay-carousel/examples/continuous.marko b/src/components/ebay-carousel/examples/continuous.marko index 2024f7f6f..7a97ccc22 100644 --- a/src/components/ebay-carousel/examples/continuous.marko +++ b/src/components/ebay-carousel/examples/continuous.marko @@ -28,14 +28,14 @@ export interface Input { on-previous("emit", "previous") on-scroll("emit", "scroll") on-slide("emit", "slide")> - <@item style={ width: 400 } class="demo-card">Card 1 - <@item style={ width: 400 } class="demo-card">Card 2 - <@item style={ width: 400 } class="demo-card">Card 3 - <@item style={ width: 400 } class="demo-card">Card 4 - <@item style={ width: 400 } class="demo-card">Card 5 - <@item style={ width: 400 } class="demo-card">Card 6 - <@item style={ width: 400 } class="demo-card">Card 7 - <@item style={ width: 400 } class="demo-card">Card 8 - <@item style={ width: 400 } class="demo-card">Card 9 - <@item style={ width: 400 } class="demo-card">Card 10 + <@item style={ width: "400px" } class="demo-card">Card 1 + <@item style={ width: "400px" } class="demo-card">Card 2 + <@item style={ width: "400px" } class="demo-card">Card 3 + <@item style={ width: "400px" } class="demo-card">Card 4 + <@item style={ width: "400px" } class="demo-card">Card 5 + <@item style={ width: "400px" } class="demo-card">Card 6 + <@item style={ width: "400px" } class="demo-card">Card 7 + <@item style={ width: "400px" } class="demo-card">Card 8 + <@item style={ width: "400px" } class="demo-card">Card 9 + <@item style={ width: "400px" } class="demo-card">Card 10 diff --git a/src/components/ebay-carousel/examples/discrete-controlled.marko b/src/components/ebay-carousel/examples/discrete-controlled.marko index cbfc0f832..30e538609 100644 --- a/src/components/ebay-carousel/examples/discrete-controlled.marko +++ b/src/components/ebay-carousel/examples/discrete-controlled.marko @@ -1,3 +1,5 @@ +import type { Input as CarouselInput } from ""; + export interface Input { items: number; index: number; @@ -12,12 +14,13 @@ export interface State { } class { + declare state: State; onCreate() { this.state = { index: 0 } } - onMove({visibleIndexes}) { + onMove: CarouselInput["on-move"] = ({visibleIndexes}) => { this.state.index = visibleIndexes[0]; } } @@ -41,14 +44,14 @@ class { on-next("emit", "next") on-previous("emit", "previous") on-move("onMove")> - <@item style={ width: 400 } class="demo2-card">Card 1 - <@item style={ width: 400 } class="demo2-card">Card 2 - <@item style={ width: 400 } class="demo2-card">Card 3 - <@item style={ width: 400 } class="demo2-card">Card 4 - <@item style={ width: 400 } class="demo2-card">Card 5 - <@item style={ width: 400 } class="demo2-card">Card 6 - <@item style={ width: 400 } class="demo2-card">Card 7 - <@item style={ width: 400 } class="demo2-card">Card 8 - <@item style={ width: 400 } class="demo2-card">Card 9 - <@item style={ width: 400 } class="demo2-card">Card 10 + <@item style={ width: "400px" } class="demo2-card">Card 1 + <@item style={ width: "400px" } class="demo2-card">Card 2 + <@item style={ width: "400px" } class="demo2-card">Card 3 + <@item style={ width: "400px" } class="demo2-card">Card 4 + <@item style={ width: "400px" } class="demo2-card">Card 5 + <@item style={ width: "400px" } class="demo2-card">Card 6 + <@item style={ width: "400px" } class="demo2-card">Card 7 + <@item style={ width: "400px" } class="demo2-card">Card 8 + <@item style={ width: "400px" } class="demo2-card">Card 9 + <@item style={ width: "400px" } class="demo2-card">Card 10 diff --git a/src/components/ebay-carousel/examples/discrete.marko b/src/components/ebay-carousel/examples/discrete.marko index 1bd92ec47..5d93ee805 100644 --- a/src/components/ebay-carousel/examples/discrete.marko +++ b/src/components/ebay-carousel/examples/discrete.marko @@ -27,14 +27,14 @@ export interface Input { on-previous("emit", "previous") on-scroll("emit", "scroll") on-slide("emit", "slide")> - <@item style={ width: 400 } class="demo2-card">Card 1 - <@item style={ width: 400 } class="demo2-card">Card 2 - <@item style={ width: 400 } class="demo2-card">Card 3 - <@item style={ width: 400 } class="demo2-card">Card 4 - <@item style={ width: 400 } class="demo2-card">Card 5 - <@item style={ width: 400 } class="demo2-card">Card 6 - <@item style={ width: 400 } class="demo2-card">Card 7 - <@item style={ width: 400 } class="demo2-card">Card 8 - <@item style={ width: 400 } class="demo2-card">Card 9 - <@item style={ width: 400 } class="demo2-card">Card 10 + <@item style={ width: "400px" } class="demo2-card">Card 1 + <@item style={ width: "400px" } class="demo2-card">Card 2 + <@item style={ width: "400px" } class="demo2-card">Card 3 + <@item style={ width: "400px" } class="demo2-card">Card 4 + <@item style={ width: "400px" } class="demo2-card">Card 5 + <@item style={ width: "400px" } class="demo2-card">Card 6 + <@item style={ width: "400px" } class="demo2-card">Card 7 + <@item style={ width: "400px" } class="demo2-card">Card 8 + <@item style={ width: "400px" } class="demo2-card">Card 9 + <@item style={ width: "400px" } class="demo2-card">Card 10 diff --git a/src/components/ebay-character-count/character-count.stories.ts b/src/components/ebay-character-count/character-count.stories.ts index 0a40b9569..27fc08ed4 100644 --- a/src/components/ebay-character-count/character-count.stories.ts +++ b/src/components/ebay-character-count/character-count.stories.ts @@ -1,16 +1,18 @@ import { addRenderBodies, buildExtensionTemplate, -} from "../../../.storybook/utils"; -import { tagToString } from "../../../.storybook/storybook-code-source"; +} from "../../common/storybook/utils"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; import Component from "./index.marko"; +import type { Input } from "./component"; import InFieldTemplate from "./examples/in-field.marko"; import InFieldCode from "./examples/in-field.marko?raw"; import CustomTextTemplate from "./examples/custom-text.marko"; import CustomTextCode from "./examples/custom-text.marko?raw"; +import { Story } from "@storybook/marko"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); diff --git a/src/components/ebay-character-count/examples/custom-text.marko b/src/components/ebay-character-count/examples/custom-text.marko index 3c1e372b9..4f938fb59 100644 --- a/src/components/ebay-character-count/examples/custom-text.marko +++ b/src/components/ebay-character-count/examples/custom-text.marko @@ -1,4 +1,8 @@ -$ const { max = 120, clippedText } = input; +export interface Input { + max?: number; +} + +$ const { max = 120 } = input; class { + declare state: { + inputValue: string; + inputAriaLive: Marko.AriaAttributes["aria-live"]; + charCount: number; + }; onCreate() { this.state = { inputValue: "", @@ -35,12 +44,20 @@ class { charCount: 0 }; } - onTextChange({ originalEvent: e }) { - this.state.inputValue = e.target.value; + onTextChange({ value }: { value: string }) { + this.state.inputValue = value; } - onCharCountChange({ count, inputAriaLive }) { - this.state.inputAriaLive = inputAriaLive; - this.state.charCount = count; - this.emit('change', {count, inputAriaLive}) + onCharCountChange(e?: { + count: number; + inputAriaLive: Marko.AriaAttributes["aria-live"]; + }) { + if (e) { + this.state.inputAriaLive = e.inputAriaLive; + this.state.charCount = e.count; + this.emit("change", { + count: e.count, + inputAriaLive: e.inputAriaLive, + }); + } } } diff --git a/src/components/ebay-character-count/examples/in-field.marko b/src/components/ebay-character-count/examples/in-field.marko index 5bea09942..58879606a 100644 --- a/src/components/ebay-character-count/examples/in-field.marko +++ b/src/components/ebay-character-count/examples/in-field.marko @@ -1,3 +1,7 @@ +export interface Input { + max?: number; + clippedText?: string; +} $ const { max = 120, clippedText } = input; @@ -30,17 +34,29 @@ $ const { max = 120, clippedText } = input; class { + declare state: { + inputValue: string; + inputAriaLive: Marko.AriaAttributes["aria-live"]; + }; onCreate() { this.state = { inputValue: "", inputAriaLive: null, }; } - onTextChange({ originalEvent: e }) { - this.state.inputValue = e.target.value; + onTextChange({ value }: { value: string }) { + this.state.inputValue = value; } - onCharCountChange({ count, inputAriaLive }) { - this.state.inputAriaLive = inputAriaLive; - this.emit('change', {count, inputAriaLive}) + onCharCountChange(e?: { + count: number; + inputAriaLive: Marko.AriaAttributes["aria-live"]; + }) { + if (e) { + this.state.inputAriaLive = e.inputAriaLive; + this.emit("change", { + count: e.count, + inputAriaLive: e.inputAriaLive, + }); + } } } diff --git a/src/components/ebay-checkbox/checkbox.stories.ts b/src/components/ebay-checkbox/checkbox.stories.ts index 733462440..273f8e815 100644 --- a/src/components/ebay-checkbox/checkbox.stories.ts +++ b/src/components/ebay-checkbox/checkbox.stories.ts @@ -1,4 +1,4 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; import Checkbox from "./index.marko"; import GroupTemplate from "./examples/group.marko"; @@ -7,8 +7,10 @@ import DisabledTemplate from "./examples/DisabledWithLabel.marko"; import GroupCode from "./examples/group.marko?raw"; import WithLabelCode from "./examples/WithLabel.marko?raw"; import DisabledCode from "./examples/DisabledWithLabel.marko?raw"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component-browser"; -const Template = (args) => ({ input: args }); +const Template: Story = (args) => ({ input: args }); export default { title: "form input/ebay-checkbox", @@ -88,7 +90,7 @@ export default { }, }; -export const WithLabel = (args) => ({ +export const WithLabel: Story = (args) => ({ input: args, component: WithLabelTemplate, }); @@ -104,7 +106,7 @@ WithLabel.parameters = { }, }; -export const Disabled = (args) => ({ +export const Disabled: Story = (args) => ({ input: args, component: DisabledTemplate, }); @@ -120,7 +122,7 @@ Disabled.parameters = { }, }; -export const Group = (args) => ({ +export const Group: Story = (args) => ({ input: args, component: GroupTemplate, }); diff --git a/src/components/ebay-chip/chip.stories.ts b/src/components/ebay-chip/chip.stories.ts index 6119f255c..4c3727553 100644 --- a/src/components/ebay-chip/chip.stories.ts +++ b/src/components/ebay-chip/chip.stories.ts @@ -1,9 +1,10 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; -import { addRenderBodies } from "../../../.storybook/utils"; +import { Story } from "@storybook/marko"; +import { tagToString } from "../../common/storybook/storybook-code-source"; +import { addRenderBodies } from "../../common/storybook/utils"; import Readme from "./README.md"; -import Component from "./index.marko"; +import Component, { type Input } from "./index.marko"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -43,8 +44,8 @@ export default { export const Default = Template.bind({}); Default.args = { - renderBody: "chip text", -}; + renderBody: "chip text" as any, +} ; Default.parameters = { docs: { source: { @@ -55,7 +56,7 @@ Default.parameters = { export const WithDelete = Template.bind({}); WithDelete.args = { - renderBody: "chip text", + renderBody: "chip text" as any, a11yDeleteButtonText: "Delete", }; WithDelete.parameters = { diff --git a/src/components/ebay-chips-combobox/chips-combobox.stories.ts b/src/components/ebay-chips-combobox/chips-combobox.stories.ts index 45f96ac7e..3e85b743b 100644 --- a/src/components/ebay-chips-combobox/chips-combobox.stories.ts +++ b/src/components/ebay-chips-combobox/chips-combobox.stories.ts @@ -1,8 +1,4 @@ -import { - addRenderBodies, - buildExtensionTemplate, -} from "../../../.storybook/utils"; -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { buildExtensionTemplate } from "../../common/storybook/utils"; import Readme from "./README.md"; import Combobox from "./index.marko"; import DefaultTemplate from "./examples/default.marko"; @@ -10,9 +6,6 @@ import DefaultCode from "./examples/default.marko?raw"; import SelectedTemplate from "./examples/selected.marko"; import SelectedCode from "./examples/selected.marko?raw"; -const Template = (args) => ({ - input: addRenderBodies(args), -}); export default { title: "form input/ebay-chips-combobox", diff --git a/src/components/ebay-combobox/combobox.stories.ts b/src/components/ebay-combobox/combobox.stories.ts index 68acaa1c9..fc7f47982 100644 --- a/src/components/ebay-combobox/combobox.stories.ts +++ b/src/components/ebay-combobox/combobox.stories.ts @@ -1,14 +1,16 @@ import { addRenderBodies, buildExtensionTemplate, -} from "../../../.storybook/utils"; -import { tagToString } from "../../../.storybook/storybook-code-source"; +} from "../../common/storybook/utils"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; import Combobox from "./index.marko"; +import type { Input } from "./component"; import SearchFilteringTemplate from "./examples/search-filtering.marko"; import SearchFilteringTemplateCode from "./examples/search-filtering.marko?raw"; +import { Story } from "@storybook/marko"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -172,7 +174,7 @@ FloatingLabel.args = { { text: "Basic Offer 4" }, ], floatingLabel: "Default Label", -}; +} as any; FloatingLabel.parameters = { docs: { source: { @@ -200,7 +202,7 @@ Isolated.args = { { text: "Basic Offer 3", value: "5" }, { text: "Basic Offer 4", value: "6" }, ], -}; +} as any; Isolated.parameters = { docs: { source: { diff --git a/src/components/ebay-combobox/component.ts b/src/components/ebay-combobox/component.ts index 854dfad09..4ee2111dc 100644 --- a/src/components/ebay-combobox/component.ts +++ b/src/components/ebay-combobox/component.ts @@ -27,10 +27,10 @@ interface ComboboxInput extends Omit, `on${string}`> { autocomplete?: "list" | "none"; "list-selection"?: "manual" | "automatic"; "floating-label"?: boolean; - button?: Marko.Input<"button"> & { + button?: Marko.Input<"button"> & Marko.AttrTag<{ htmlAttributes?: Record; renderBody?: Marko.Body; - }; + }>; options?: Marko.AttrTag; "chevron-size"?: "large"; "on-focus"?: (event: ComboboxEvent) => void; diff --git a/src/components/ebay-combobox/examples/floating-label.marko b/src/components/ebay-combobox/examples/floating-label.marko index e61268f7a..aaa6059c2 100644 --- a/src/components/ebay-combobox/examples/floating-label.marko +++ b/src/components/ebay-combobox/examples/floating-label.marko @@ -1,4 +1,4 @@ - + <@option text="August Campaign"/> <@option text="4th of July Sale (paused)"/> <@option text="Basic Offer"/> diff --git a/src/components/ebay-combobox/examples/search-filtering.marko b/src/components/ebay-combobox/examples/search-filtering.marko index ecbf92b75..c8adc29e2 100644 --- a/src/components/ebay-combobox/examples/search-filtering.marko +++ b/src/components/ebay-combobox/examples/search-filtering.marko @@ -1,45 +1,71 @@ -import countryList from './data.json'; +import countryList from "./data.json"; +import type { AttrStringOrNumber, AttrClass } from "marko/tags-html"; +import type { Input as ComboboxInput } from ""; class { + declare state: { + options: Array<{ + code: string; + name: string; + }>; + autocompleteOption: "list" | "none"; + value: AttrStringOrNumber; + }; + timeout: any; onCreate() { this.state = { options: countryList, - autocompleteOption: 'none', - value: '', + autocompleteOption: "none", + value: "", }; } - async inputChange({ currentInputValue }, { el, index, selected }) { - this.state.autocompleteOption = 'none'; - this.state.value = currentInputValue; - const options = await this.searchCountry(currentInputValue); + async inputChange(e: { + currentInputValue: AttrStringOrNumber; + options?: Marko.AttrTag<{ + text: string; + value?: string; + class?: AttrClass; + sticky?: boolean; + }>; + }) { + this.state.autocompleteOption = "none"; + this.state.value = e.currentInputValue; + const options = await this.searchCountry(e.currentInputValue); this.state.options = options; - this.state.autocompleteOption = 'list'; + this.state.autocompleteOption = "list"; } - async searchCountry(currentInputValue) { + async searchCountry(currentInputValue: AttrStringOrNumber): Promise< + Array<{ + code: string; + name: string; + }> + > { return new Promise((resolve) => { clearTimeout(this.timeout); this.timeout = setTimeout(() => { const filtered = countryList .filter((country) => - country.name.toLowerCase().startsWith(currentInputValue.toLowerCase()) + country.name + .toLowerCase() + .startsWith(`${currentInputValue}`.toLowerCase()), ) .slice(0, 10); resolve(filtered); }, 500); }); } - selected(el) { - console.log('selected', el); + selected: ComboboxInput["on-select"] = (e) => { + console.log("selected", e); } } <@option data-id=option.code text=option.name/> diff --git a/src/components/ebay-confirm-dialog/confirm-dialog.stories.ts b/src/components/ebay-confirm-dialog/confirm-dialog.stories.ts index 5d45984e6..fc2b3bedd 100644 --- a/src/components/ebay-confirm-dialog/confirm-dialog.stories.ts +++ b/src/components/ebay-confirm-dialog/confirm-dialog.stories.ts @@ -1,9 +1,11 @@ -import { addRenderBodies } from "../../../.storybook/utils"; +import { Story } from "@storybook/marko"; +import { addRenderBodies } from "../../common/storybook/utils"; import Readme from "./README.md"; import Confirm from "./examples/default.marko"; import code from "./examples/default.marko?raw"; +import type { Input } from "./index.marko"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -118,7 +120,7 @@ Default.args = { renderBody: `Cancel`, }, renderBody: `You will permanently lose this address.`, -}; +} as any; Default.parameters = { docs: { source: { diff --git a/src/components/ebay-confirm-dialog/examples/default.marko b/src/components/ebay-confirm-dialog/examples/default.marko index 6ef7770a1..7a3a762fc 100644 --- a/src/components/ebay-confirm-dialog/examples/default.marko +++ b/src/components/ebay-confirm-dialog/examples/default.marko @@ -1,4 +1,7 @@ +import type { Input as ConfirmDialogInput } from ""; + export interface Input { + open?: boolean; renderBody?: Marko.Body; header: { renderBody?: Marko.Body; @@ -38,18 +41,21 @@ $ const { Open Confirm Dialog class { - onInput(input) { + declare state: { + open?: boolean; + } + onInput(input: Input) { this.state = { open: input.open }; } openDialog() { this.state.open = true; } - closeDialog(ev) { + closeDialog: ConfirmDialogInput["on-reject"] = (e: Event) => { this.state.open = false; - this.emit('reject', ev); + this.emit('reject', e); } - success(ev) { + success: ConfirmDialogInput["on-confirm"] = (e) => { this.state.open = false; - this.emit('confirm', ev); + this.emit('confirm', e); } } diff --git a/src/components/ebay-confirm-dialog/test/test.browser.js b/src/components/ebay-confirm-dialog/test/test.browser.js index 5048d5f6e..0dbb45fe0 100644 --- a/src/components/ebay-confirm-dialog/test/test.browser.js +++ b/src/components/ebay-confirm-dialog/test/test.browser.js @@ -9,9 +9,9 @@ import { } from "vitest"; import { composeStories } from "@storybook/marko"; import { render, fireEvent, waitFor, cleanup } from "@marko/testing-library"; -import { addRenderBodies } from "../../../../.storybook/utils"; import { fastAnimations } from "../../../common/test-utils/browser"; import * as stories from "../confirm-dialog.stories"; // import all stories from the stories file +import { addRenderBodies } from "../../../common/storybook/utils"; const { Default } = composeStories(stories); beforeAll(() => fastAnimations.start()); diff --git a/src/components/ebay-cta-button/cta-button.stories.ts b/src/components/ebay-cta-button/cta-button.stories.ts index a2fd7c243..f1515978c 100644 --- a/src/components/ebay-cta-button/cta-button.stories.ts +++ b/src/components/ebay-cta-button/cta-button.stories.ts @@ -1,13 +1,14 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { Story } from "@storybook/marko"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; -import Cta from "./index.marko"; +import Cta, { type Input } from "./index.marko"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: { ...args, - renderBody(out) { + renderBody: function(out: any) { out.html(args.renderBody); - }, + } as any, }, }); @@ -50,7 +51,7 @@ Standard.args = { renderBody: "CTA button", href: "http://www.ebay.com", size: "regular", -}; +} as any; Standard.parameters = { docs: { diff --git a/src/components/ebay-date-textbox/date-textbox.stories.ts b/src/components/ebay-date-textbox/date-textbox.stories.ts index d97bb245c..d0de2579a 100644 --- a/src/components/ebay-date-textbox/date-textbox.stories.ts +++ b/src/components/ebay-date-textbox/date-textbox.stories.ts @@ -1,8 +1,8 @@ import { addRenderBodies, buildExtensionTemplate, -} from "../../../.storybook/utils"; -import { tagToString } from "../../../.storybook/storybook-code-source"; +} from "../../common/storybook/utils"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; import Component from "./index.marko"; import LocalizedTemplate from "./examples/localized.marko"; @@ -11,8 +11,10 @@ import WithClearTemplate from "./examples/with-clear.marko"; import WithClearTemplateCode from "./examples/with-clear.marko?raw"; import InField from "./examples/in-field.marko"; import InFieldCode from "./examples/in-field.marko?raw"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); diff --git a/src/components/ebay-date-textbox/examples/in-field.marko b/src/components/ebay-date-textbox/examples/in-field.marko index 9555d217a..87ff215a9 100644 --- a/src/components/ebay-date-textbox/examples/in-field.marko +++ b/src/components/ebay-date-textbox/examples/in-field.marko @@ -1,4 +1,7 @@ class { + declare state: { + invalid: boolean + } onCreate() { this.state = { invalid: false, diff --git a/src/components/ebay-date-textbox/examples/localized.marko b/src/components/ebay-date-textbox/examples/localized.marko index 43620cb69..096e9a92d 100644 --- a/src/components/ebay-date-textbox/examples/localized.marko +++ b/src/components/ebay-date-textbox/examples/localized.marko @@ -7,7 +7,6 @@ a11yRangeStartText="Reeks begin" a11yInRangeText="Binne bereik" a11yRangeEndText="Reeks einde" - localizeFormat on-change("emit", "change") ...input > diff --git a/src/components/ebay-date-textbox/examples/with-clear.marko b/src/components/ebay-date-textbox/examples/with-clear.marko index 75000d4ea..de26bd1fe 100644 --- a/src/components/ebay-date-textbox/examples/with-clear.marko +++ b/src/components/ebay-date-textbox/examples/with-clear.marko @@ -1,24 +1,37 @@ +export interface Input { + range?: boolean; +} + class { + declare state: { + value?: string; + rangeEnd?: string; + } onCreate() { this.state = { - value: null, + value: undefined, rangeEnd: undefined }; } - handleChange({ selected, rangeStart, rangeEnd }) { - if (selected) { - this.state.value = selected; + handleChange(e: { selected: string | null } + | { rangeStart: string | null; rangeEnd: string | null }) { + if ("selected" in e && e.selected) { + this.state.value = e.selected; } else { - this.state.value = rangeStart; - this.state.rangeEnd = rangeEnd; + if ("rangeStart" in e && e.rangeStart) { + this.state.value = e.rangeStart; + } + if ("rangeEnd" in e && e.rangeEnd) { + this.state.rangeEnd = e.rangeEnd; + } } } clear() { - this.state.value = null; + this.state.value = undefined; if (this.input.range) { - this.state.rangeEnd = null; + this.state.rangeEnd = undefined; } } } diff --git a/src/components/ebay-details/details.stories.ts b/src/components/ebay-details/details.stories.ts index 0f3a1252e..7b09c7c9d 100644 --- a/src/components/ebay-details/details.stories.ts +++ b/src/components/ebay-details/details.stories.ts @@ -1,13 +1,15 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { Story } from "@storybook/marko"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; import Details from "./index.marko"; +import type { Input } from "./component-browser"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: { ...args, - renderBody(out) { + renderBody: function(out: any) { out.html(args.renderBody); - }, + } as any, }, }); @@ -86,7 +88,7 @@ export default { export const Standard = Template.bind({}); Standard.args = { - 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.`, + 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.` as any, text: "Show me the details!", size: "regular", open: false, diff --git a/src/components/ebay-donut-chart/donut-chart.stories.ts b/src/components/ebay-donut-chart/donut-chart.stories.ts index 9b10f0b2a..f738c0c0c 100644 --- a/src/components/ebay-donut-chart/donut-chart.stories.ts +++ b/src/components/ebay-donut-chart/donut-chart.stories.ts @@ -1,5 +1,5 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; -import { addRenderBodies } from "../../../.storybook/utils"; +import { tagToString } from "../../common/storybook/storybook-code-source"; +import { addRenderBodies } from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./index.marko"; @@ -7,8 +7,10 @@ import WithAttrTagsTemplate from "./examples/with-attr-tags.marko"; import WithAttrTagsCode from "./examples/with-attr-tags.marko?raw"; import { data } from "./examples/data.json"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -187,7 +189,7 @@ NoMetrics.args = { highchartsDescription: "Donut chart description", }; -export const WithAttributeTags = (args) => ({ +export const WithAttributeTags: Story = (args) => ({ input: args, component: WithAttrTagsTemplate, }); diff --git a/src/components/ebay-drawer-dialog/drawer-dialog.stories.ts b/src/components/ebay-drawer-dialog/drawer-dialog.stories.ts index ab0d567dd..b1949a25a 100644 --- a/src/components/ebay-drawer-dialog/drawer-dialog.stories.ts +++ b/src/components/ebay-drawer-dialog/drawer-dialog.stories.ts @@ -1,9 +1,11 @@ -import { addRenderBodies } from "../../../.storybook/utils"; +import { Story } from "@storybook/marko"; +import { addRenderBodies } from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./examples/default.marko"; import code from "./examples/default.marko?raw"; import withFooter from "./examples/withFooter.marko"; import withFooterCode from "./examples/withFooter.marko?raw"; +import type { Input } from "./component"; export default { title: "dialogs/ebay-drawer-dialog", @@ -124,7 +126,7 @@ export default { }, }; -export const Standard = (args) => ({ +export const Standard: Story = (args) => ({ input: addRenderBodies(args), }); Standard.args = { @@ -134,7 +136,7 @@ Standard.args = { renderBody: `Body Content`, a11yMinimizeText: "Minimize Drawer", a11yMaximizeText: "Maximize Drawer", -}; +} as any; Standard.parameters = { docs: { source: { @@ -143,7 +145,7 @@ Standard.parameters = { }, }; -export const WithFooter = (args) => ({ +export const WithFooter: Story = (args) => ({ component: withFooter, input: addRenderBodies(args), }); @@ -154,7 +156,7 @@ WithFooter.args = { renderBody: `Body Content`, a11yMinimizeText: "Minimize Drawer", a11yMaximizeText: "Maximize Drawer", -}; +} as any; WithFooter.parameters = { docs: { source: { diff --git a/src/components/ebay-drawer-dialog/examples/default.marko b/src/components/ebay-drawer-dialog/examples/default.marko index e3e35faee..57b97e5fd 100644 --- a/src/components/ebay-drawer-dialog/examples/default.marko +++ b/src/components/ebay-drawer-dialog/examples/default.marko @@ -14,6 +14,9 @@ export interface Input { Open drawer class { + declare state: { + open: boolean; + }; onCreate() { this.state = { open: false }; } diff --git a/src/components/ebay-drawer-dialog/examples/lots-of-text.marko b/src/components/ebay-drawer-dialog/examples/lots-of-text.marko index eb81bd3bb..86ed3dd9f 100644 --- a/src/components/ebay-drawer-dialog/examples/lots-of-text.marko +++ b/src/components/ebay-drawer-dialog/examples/lots-of-text.marko @@ -45,6 +45,9 @@ Open drawer class { + declare state: { + open: boolean; + }; onCreate() { this.state = { open: false }; } diff --git a/src/components/ebay-drawer-dialog/examples/no-handle.marko b/src/components/ebay-drawer-dialog/examples/no-handle.marko index 5b5213d0e..1e6ee6d49 100644 --- a/src/components/ebay-drawer-dialog/examples/no-handle.marko +++ b/src/components/ebay-drawer-dialog/examples/no-handle.marko @@ -13,6 +13,9 @@ Open drawer class { + declare state: { + open: boolean; + }; onCreate() { this.state = { open: false }; } diff --git a/src/components/ebay-drawer-dialog/test/test.browser.js b/src/components/ebay-drawer-dialog/test/test.browser.js index e5badcdf6..9f4a7f1e7 100644 --- a/src/components/ebay-drawer-dialog/test/test.browser.js +++ b/src/components/ebay-drawer-dialog/test/test.browser.js @@ -10,8 +10,8 @@ import { } from "vitest"; import { render, fireEvent, waitFor, cleanup } from "@marko/testing-library"; import { fastAnimations } from "../../../common/test-utils/browser"; -import { addRenderBodies } from "../../../../.storybook/utils"; import * as stories from "../drawer-dialog.stories"; // import all stories from the stories file +import { addRenderBodies } from "../../../common/storybook/utils"; const { Standard } = composeStories(stories); beforeAll(() => fastAnimations.start()); diff --git a/src/components/ebay-education-notice/education-notice.stories.ts b/src/components/ebay-education-notice/education-notice.stories.ts index e2c5ae15a..820ecb329 100644 --- a/src/components/ebay-education-notice/education-notice.stories.ts +++ b/src/components/ebay-education-notice/education-notice.stories.ts @@ -1,8 +1,8 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import { addRenderBodies, buildExtensionTemplate, -} from "../../../.storybook/utils"; +} from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./index.marko"; import withFooter from "./examples/with-footer.marko"; @@ -14,8 +14,10 @@ import ProminentIconTemplateCode from "./examples/prominent-icon.marko?raw"; import withDismiss from "./examples/with-dismiss.marko"; import withDismissCode from "./examples/with-dismiss.marko?raw"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -113,7 +115,7 @@ Default.args = { renderBody: "Education notice title", }, renderBody: "

Education notice info. Things you need to know.

", -}; +} as any; Default.parameters = { docs: { source: { diff --git a/src/components/ebay-eek/eek.stories.ts b/src/components/ebay-eek/eek.stories.ts index fa92e0fe3..5ec6c3873 100644 --- a/src/components/ebay-eek/eek.stories.ts +++ b/src/components/ebay-eek/eek.stories.ts @@ -1,6 +1,6 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; -import eek from "./index.marko"; +import eek, { type Input } from "./index.marko"; import example1 from "./examples/A+++.marko"; import example2 from "./examples/A++.marko"; import example3 from "./examples/A+.marko"; @@ -11,6 +11,7 @@ import example2Code from "./examples/A++.marko?raw"; import example3Code from "./examples/A+.marko?raw"; import example4Code from "./examples/A.marko?raw"; import example5Code from "./examples/invalid.marko?raw"; +import { Story } from "@storybook/marko"; export default { title: "graphics & icons/ebay-eek", @@ -39,7 +40,7 @@ export default { }, }; -export const Default = (args) => ({ input: args }); +export const Default: Story = (args) => ({ input: args }); Default.args = { max: "A+++", min: "E", diff --git a/src/components/ebay-fake-link/fake-link.stories.ts b/src/components/ebay-fake-link/fake-link.stories.ts index e12868db2..d4e10563a 100644 --- a/src/components/ebay-fake-link/fake-link.stories.ts +++ b/src/components/ebay-fake-link/fake-link.stories.ts @@ -1,13 +1,15 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { Story } from "@storybook/marko"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import component from "./index.marko"; import Readme from "./README.md"; +import type { Input } from "./component-browser"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: { ...args, - renderBody(out) { + renderBody: function(out: any) { out.html(args.renderBody); - }, + } as any, }, }); @@ -88,7 +90,7 @@ export default { export const Standard = Template.bind({}); Standard.args = { - renderBody: "Fake-Link", + renderBody: "Fake-Link" as any, disabled: false, }; diff --git a/src/components/ebay-fake-menu-button/component.ts b/src/components/ebay-fake-menu-button/component.ts index 890fcd5cd..7dfa21dd9 100644 --- a/src/components/ebay-fake-menu-button/component.ts +++ b/src/components/ebay-fake-menu-button/component.ts @@ -16,16 +16,17 @@ interface FakeMenuButtonInput extends Omit, `on${string}`> { priority?: "primary" | "secondary" | "delete" | "tertiary" | "none"; borderless?: boolean; transparent?: boolean; - icon?: Marko.Renderable; + icon?: Marko.Renderable | Marko.AttrTag<{ renderBody: Marko.Body }>; "a11y-text"?: AttrString; disabled?: boolean; "no-toggle-icon"?: boolean; - label?: { renderBody?: Marko.Body }; + label?: Marko.AttrTag<{ renderBody?: Marko.Body }>; "text-align"?: "center"; type?: FakeMenuInput["type"]; reverse?: boolean; "fix-width"?: boolean; items?: Marko.AttrTag; + separator?: Marko.AttrTag<{}>; "collapse-on-select"?: boolean; "on-expand"?: (event: MenuEvent) => void; "on-collapse"?: (event: MenuEvent) => void; diff --git a/src/components/ebay-fake-menu-button/fake-menu-button.stories.ts b/src/components/ebay-fake-menu-button/fake-menu-button.stories.ts index 9dc5638b5..ecb7e3d1f 100644 --- a/src/components/ebay-fake-menu-button/fake-menu-button.stories.ts +++ b/src/components/ebay-fake-menu-button/fake-menu-button.stories.ts @@ -1,8 +1,8 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import { addRenderBodies, buildExtensionTemplate, -} from "../../../.storybook/utils"; +} from "../../common/storybook/utils"; import Readme from "./README.md"; import IconTemplate from "./examples/icon-with-text.marko"; import IconTemplateCode from "./examples/icon-with-text.marko?raw"; @@ -12,8 +12,10 @@ import SeparatorTemplate from "./examples/separator.marko"; import SeparatorTemplateCode from "./examples/separator.marko?raw"; import Component from "./index.marko"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -211,7 +213,7 @@ Standard.args = { renderBody: `item 3`, href: "https://www.ebay.com", }, - ], + ] as any, text: `eBay Menu`, }; Standard.parameters = { diff --git a/src/components/ebay-fake-menu/fake-menu.stories.ts b/src/components/ebay-fake-menu/fake-menu.stories.ts index 6ecf44c6a..eabe30c78 100644 --- a/src/components/ebay-fake-menu/fake-menu.stories.ts +++ b/src/components/ebay-fake-menu/fake-menu.stories.ts @@ -1,8 +1,8 @@ import { addRenderBodies, buildExtensionTemplate, -} from "../../../.storybook/utils"; -import { tagToString } from "../../../.storybook/storybook-code-source"; +} from "../../common/storybook/utils"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; import Component from "./index.marko"; import ItemMatchesTemplate from "./examples/item-matches-url.marko"; @@ -11,8 +11,10 @@ import SpritesTemplate from "./examples/sprites.marko"; import SpritesTemplateCode from "./examples/sprites.marko?raw"; import SeparatorTemplate from "./examples/separator.marko"; import SeparatorTemplateCode from "./examples/separator.marko?raw"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -142,7 +144,7 @@ Standard.args = { renderBody: `item 3`, href: "https://www.ebay.com", }, - ], + ] as any, }; Standard.parameters = { docs: { diff --git a/src/components/ebay-fake-tabs/fake-tabs.stories.ts b/src/components/ebay-fake-tabs/fake-tabs.stories.ts index f8c402285..3aa653d18 100644 --- a/src/components/ebay-fake-tabs/fake-tabs.stories.ts +++ b/src/components/ebay-fake-tabs/fake-tabs.stories.ts @@ -1,9 +1,10 @@ -import { addRenderBodies } from "../../../.storybook/utils"; -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { addRenderBodies } from "../../common/storybook/utils"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; -import Component from "./index.marko"; +import Component, { type Input } from "./index.marko"; +import { Story } from "@storybook/marko"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -61,7 +62,7 @@ Standard.args = { }, ], renderBody: `Lorum ipsom dolor`, -}; +} as any; Standard.parameters = { docs: { source: { diff --git a/src/components/ebay-file-input/examples/with-mock-uploads.marko b/src/components/ebay-file-input/examples/with-mock-uploads.marko index a7f56a779..59dd08444 100644 --- a/src/components/ebay-file-input/examples/with-mock-uploads.marko +++ b/src/components/ebay-file-input/examples/with-mock-uploads.marko @@ -1,4 +1,4 @@ -import type { FileInputEvent } from "../component-browser"; +import type { FileInputEvent } from "../component"; static async function mockFetch() { await new Promise((resolve) => setTimeout(resolve, Math.random() * 5000)); return `https://fakeurl.com/${Math.random().toString(36).substring(7)}`; diff --git a/src/components/ebay-file-input/examples/with-preview-cards.marko b/src/components/ebay-file-input/examples/with-preview-cards.marko index 381e231fa..e711bd654 100644 --- a/src/components/ebay-file-input/examples/with-preview-cards.marko +++ b/src/components/ebay-file-input/examples/with-preview-cards.marko @@ -1,4 +1,4 @@ -import type { FileInputEvent } from "../component-browser"; +import type { FileInputEvent } from "../component"; class { declare state: { files: File[]; diff --git a/src/components/ebay-file-input/file-input.stories.ts b/src/components/ebay-file-input/file-input.stories.ts index 2349ff46d..b1cf5149f 100644 --- a/src/components/ebay-file-input/file-input.stories.ts +++ b/src/components/ebay-file-input/file-input.stories.ts @@ -1,5 +1,3 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; -import { addRenderBodies } from "../../../.storybook/utils"; import Readme from "./README.md"; import component from "./index.marko"; import DefaultTemplate from "./examples/default.marko"; @@ -8,10 +6,8 @@ import WithPreviewCardsTemplate from "./examples/with-preview-cards.marko"; import WithPreviewCardsCode from "./examples/with-preview-cards.marko?raw"; import WithMockUploadsTemplate from "./examples/with-mock-uploads.marko"; import WithMockUploadsCode from "./examples/with-mock-uploads.marko?raw"; - -const Template = (args) => ({ - input: addRenderBodies(args), -}); +import { Story } from "@storybook/marko"; +import type { Input } from "./component"; export default { title: "form input/ebay-file-input", @@ -57,7 +53,7 @@ export default { }, }; -export const Default = (args) => ({ +export const Default: Story = (args) => ({ input: args, component: DefaultTemplate, }); @@ -73,7 +69,7 @@ Default.parameters = { }, }; -export const WithPreviewCards = (args) => ({ +export const WithPreviewCards: Story = (args) => ({ input: args, component: WithPreviewCardsTemplate, }); @@ -89,7 +85,7 @@ WithPreviewCards.parameters = { }, }; -export const WithMockUploads = (args) => ({ +export const WithMockUploads: Story = (args) => ({ input: args, component: WithMockUploadsTemplate, }); diff --git a/src/components/ebay-file-preview-card-group/file-preview-card-group.stories.ts b/src/components/ebay-file-preview-card-group/file-preview-card-group.stories.ts index 64d3585a1..4f21c03ba 100644 --- a/src/components/ebay-file-preview-card-group/file-preview-card-group.stories.ts +++ b/src/components/ebay-file-preview-card-group/file-preview-card-group.stories.ts @@ -1,9 +1,10 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; -import { addRenderBodies } from "../../../.storybook/utils"; +import { Story } from "@storybook/marko"; +import { addRenderBodies } from "../../common/storybook/utils"; import Readme from "./README.md"; import component from "./index.marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -104,7 +105,7 @@ Default.args = { { file: { ...frogImage }, }, - ], + ] as any, }; export const ManyCards = Template.bind({}); @@ -113,5 +114,5 @@ ManyCards.args = { deleteText: "Delete", card: [...Array(35)].map(() => ({ file: { ...frogImage }, - })), + })) as any, }; diff --git a/src/components/ebay-file-preview-card/file-preview-card.stories.ts b/src/components/ebay-file-preview-card/file-preview-card.stories.ts index e2b4ee8c7..e5333bbac 100644 --- a/src/components/ebay-file-preview-card/file-preview-card.stories.ts +++ b/src/components/ebay-file-preview-card/file-preview-card.stories.ts @@ -1,9 +1,11 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; -import { addRenderBodies } from "../../../.storybook/utils"; +import { Story } from "@storybook/marko"; +import { tagToString } from "../../common/storybook/storybook-code-source"; +import { addRenderBodies } from "../../common/storybook/utils"; import Readme from "./README.md"; import component from "./index.marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -166,7 +168,7 @@ Video.args = { src: "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4", }, labelText: "10:30:21", -}; +} as any; Video.parameters = { docs: { diff --git a/src/components/ebay-filter-menu-button/filter-menu-button.stories.ts b/src/components/ebay-filter-menu-button/filter-menu-button.stories.ts index 62c60bd88..0d5e8a5a5 100644 --- a/src/components/ebay-filter-menu-button/filter-menu-button.stories.ts +++ b/src/components/ebay-filter-menu-button/filter-menu-button.stories.ts @@ -1,9 +1,11 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; -import { addRenderBodies } from "../../../.storybook/utils"; +import { Story } from "@storybook/marko"; +import { tagToString } from "../../common/storybook/storybook-code-source"; +import { addRenderBodies } from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./index.marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -168,7 +170,7 @@ Default.args = { }, ], a11yText: "filter menu button a11y text", -}; +} as any; Default.parameters = { docs: { source: { @@ -199,7 +201,7 @@ WithFooter.args = { renderBody: "Apply", a11yFooterText: "footer button a11y text", }, -}; +} as any; WithFooter.parameters = { docs: { source: { diff --git a/src/components/ebay-filter-menu-button/test/test.browser.js b/src/components/ebay-filter-menu-button/test/test.browser.js index 88c2ffd99..ef277efd2 100644 --- a/src/components/ebay-filter-menu-button/test/test.browser.js +++ b/src/components/ebay-filter-menu-button/test/test.browser.js @@ -3,7 +3,7 @@ import { composeStories } from "@storybook/marko"; import { render, fireEvent, cleanup } from "@marko/testing-library"; import * as stories from "../filter-menu-button.stories"; import { pressKey } from "../../../common/test-utils/browser"; -import { addRenderBodies } from "../../../../.storybook/utils"; +import { addRenderBodies } from "../../../common/storybook/utils"; const { Default, WithFooter } = composeStories(stories); diff --git a/src/components/ebay-filter-menu/filter-menu.stories.ts b/src/components/ebay-filter-menu/filter-menu.stories.ts index 6b2a6f488..3e0f06383 100644 --- a/src/components/ebay-filter-menu/filter-menu.stories.ts +++ b/src/components/ebay-filter-menu/filter-menu.stories.ts @@ -1,9 +1,11 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; -import { addRenderBodies } from "../../../.storybook/utils"; +import { Story } from "@storybook/marko"; +import { tagToString } from "../../common/storybook/storybook-code-source"; +import { addRenderBodies } from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./index.marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -146,7 +148,7 @@ Standard.args = { renderBody: "Apply", a11yFooterText: "a11y text for footer button", }, -}; +} as any; Standard.parameters = { docs: { source: { diff --git a/src/components/ebay-filter-menu/test/test.browser.js b/src/components/ebay-filter-menu/test/test.browser.js index cf64819c5..acd8494b9 100644 --- a/src/components/ebay-filter-menu/test/test.browser.js +++ b/src/components/ebay-filter-menu/test/test.browser.js @@ -3,7 +3,7 @@ import { composeStories } from "@storybook/marko"; import { render, fireEvent, cleanup } from "@marko/testing-library"; import * as stories from "../filter-menu.stories"; import { pressKey } from "../../../common/test-utils/browser"; -import { addRenderBodies } from "../../../../.storybook/utils"; +import { addRenderBodies } from "../../../common/storybook/utils"; const { Standard } = composeStories(stories); diff --git a/src/components/ebay-filter/filter.stories.ts b/src/components/ebay-filter/filter.stories.ts index 929490bf8..b5d26aca5 100644 --- a/src/components/ebay-filter/filter.stories.ts +++ b/src/components/ebay-filter/filter.stories.ts @@ -1,9 +1,11 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; -import { addRenderBodies } from "../../../.storybook/utils"; +import { Story } from "@storybook/marko"; +import { tagToString } from "../../common/storybook/storybook-code-source"; +import { addRenderBodies } from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./index.marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -56,7 +58,7 @@ export default { export const Standard = Template.bind({}); Standard.args = { - renderBody: `text`, + renderBody: `text` as any, useAriaPressed: true, }; Standard.parameters = { diff --git a/src/components/ebay-flag/flag.stories.ts b/src/components/ebay-flag/flag.stories.ts index f11c3423e..7e2fd3ae8 100644 --- a/src/components/ebay-flag/flag.stories.ts +++ b/src/components/ebay-flag/flag.stories.ts @@ -1,7 +1,8 @@ +import { Story } from "@storybook/marko"; import Readme from "./README.md"; import fixed from "./examples/all.marko"; import code from "./examples/all.marko?raw"; -import component from "./index.marko"; +import component, { type Input } from "./index.marko"; export default { title: "graphics & icons/ebay-flag", @@ -20,7 +21,7 @@ export default { }, }, }; -export const Default = (args) => ({ +export const Default: Story = (args) => ({ input: args, component: fixed, }); diff --git a/src/components/ebay-fullscreen-dialog/fullsceen-dialog.stories.ts b/src/components/ebay-fullscreen-dialog/fullsceen-dialog.stories.ts index d3f381963..8f48f9f11 100644 --- a/src/components/ebay-fullscreen-dialog/fullsceen-dialog.stories.ts +++ b/src/components/ebay-fullscreen-dialog/fullsceen-dialog.stories.ts @@ -1,9 +1,11 @@ -import { addRenderBodies } from "../../../.storybook/utils"; +import { Story } from "@storybook/marko"; +import { addRenderBodies } from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./examples/default.marko"; import code from "./examples/default.marko?raw"; +import type { Input } from "./index.marko"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -99,7 +101,7 @@ Default.args = { renderBody: `Footer Text`, }, slideFrom: null, -}; +} as any; Default.parameters = { docs: { diff --git a/src/components/ebay-fullscreen-dialog/test/test.browser.js b/src/components/ebay-fullscreen-dialog/test/test.browser.js index 3493c673c..067ae74fd 100644 --- a/src/components/ebay-fullscreen-dialog/test/test.browser.js +++ b/src/components/ebay-fullscreen-dialog/test/test.browser.js @@ -9,9 +9,9 @@ import { expect, } from "vitest"; import { composeStories } from "@storybook/marko"; -import { addRenderBodies } from "../../../../.storybook/utils"; import { fastAnimations } from "../../../common/test-utils/browser"; import * as stories from "../fullsceen-dialog.stories"; // import all stories from the stories file +import { addRenderBodies } from "../../../common/storybook/utils"; const { Default } = composeStories(stories); beforeAll(() => fastAnimations.start()); diff --git a/src/components/ebay-icon-button/icon-button.stories.ts b/src/components/ebay-icon-button/icon-button.stories.ts index d415d35bb..950e76e74 100644 --- a/src/components/ebay-icon-button/icon-button.stories.ts +++ b/src/components/ebay-icon-button/icon-button.stories.ts @@ -1,9 +1,11 @@ -import { addRenderBodies } from "../../../.storybook/utils"; +import { Story } from "@storybook/marko"; +import { addRenderBodies } from "../../common/storybook/utils"; import component from "./examples/icon-button.marko"; import code from "./examples/icon-button.marko?raw"; import Readme from "./README.md"; +import { Input } from "./component-browser"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); // const Template = args =({ input: withRenderBody(args) }) diff --git a/src/components/ebay-icon/icon.stories.ts b/src/components/ebay-icon/icon.stories.ts index 54b4ba3cf..a4d6cbfc7 100644 --- a/src/components/ebay-icon/icon.stories.ts +++ b/src/components/ebay-icon/icon.stories.ts @@ -1,12 +1,14 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { Story } from "@storybook/marko"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; import Component from "./examples/all.marko"; +import type { Input } from "./component-browser"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: { ...args, renderBody: args.renderBody - ? (out) => { + ? (out: any) => { out.html(args.renderBody); } : null, diff --git a/src/components/ebay-image-placeholder/image-placeholder.stories.ts b/src/components/ebay-image-placeholder/image-placeholder.stories.ts index 6fff7bf3b..b76be7fa4 100644 --- a/src/components/ebay-image-placeholder/image-placeholder.stories.ts +++ b/src/components/ebay-image-placeholder/image-placeholder.stories.ts @@ -1,4 +1,4 @@ -import { buildExtensionTemplate } from "../../../.storybook/utils"; +import { buildExtensionTemplate } from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./index.marko"; import DefaultTemplate from "./examples/default.marko"; diff --git a/src/components/ebay-infotip/examples/modal-programatic.marko b/src/components/ebay-infotip/examples/modal-programatic.marko index 1a524be22..79e4f035c 100644 --- a/src/components/ebay-infotip/examples/modal-programatic.marko +++ b/src/components/ebay-infotip/examples/modal-programatic.marko @@ -15,7 +15,7 @@ class { <@content>This is some important info diff --git a/src/components/ebay-infotip/infotip.stories.ts b/src/components/ebay-infotip/infotip.stories.ts index 9dd1274b0..c2d82a4a0 100644 --- a/src/components/ebay-infotip/infotip.stories.ts +++ b/src/components/ebay-infotip/infotip.stories.ts @@ -1,4 +1,4 @@ -import { buildExtensionTemplate } from "../../../.storybook/utils"; +import { buildExtensionTemplate } from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./index.marko"; import DefaultTemplate from "./examples/default.marko"; diff --git a/src/components/ebay-inline-notice/inline-notice.stories.ts b/src/components/ebay-inline-notice/inline-notice.stories.ts index 822b91e91..5419fc9c2 100644 --- a/src/components/ebay-inline-notice/inline-notice.stories.ts +++ b/src/components/ebay-inline-notice/inline-notice.stories.ts @@ -1,4 +1,4 @@ -import { buildExtensionTemplate } from "../../../.storybook/utils"; +import { buildExtensionTemplate } from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./index.marko"; import DefaultTemplate from "./examples/default.marko"; diff --git a/src/components/ebay-lightbox-dialog/examples/default.marko b/src/components/ebay-lightbox-dialog/examples/default.marko index 7635ab041..0df0aeace 100644 --- a/src/components/ebay-lightbox-dialog/examples/default.marko +++ b/src/components/ebay-lightbox-dialog/examples/default.marko @@ -1,4 +1,5 @@ export interface Input { + open: boolean; header: { renderBody: Marko.Body; } @@ -11,6 +12,9 @@ $ const { } = input; class { + declare state: { + open: boolean + } onInput(input: Input) { this.state = { open: input.open }; } @@ -20,7 +24,7 @@ class { openDialog() { this.state.open = true; } - closeDialog(e) { + closeDialog(e: Event) { this.state.open = false; this.emit("close", e); } diff --git a/src/components/ebay-lightbox-dialog/examples/focus.marko b/src/components/ebay-lightbox-dialog/examples/focus.marko index 0c98c94e9..62b259da4 100644 --- a/src/components/ebay-lightbox-dialog/examples/focus.marko +++ b/src/components/ebay-lightbox-dialog/examples/focus.marko @@ -17,7 +17,10 @@ Open Dialog class { - onInput(input) { + declare state: { + open: boolean; + } + onInput(input: { open: boolean }) { this.state = { open: input.open }; } onCreate() { @@ -26,7 +29,7 @@ class { openDialog() { this.state.open = true; } - closeDialog(e) { + closeDialog(e: Event) { this.state.open = false; this.emit("close", e); } diff --git a/src/components/ebay-lightbox-dialog/examples/scrolling.marko b/src/components/ebay-lightbox-dialog/examples/scrolling.marko index 082da528e..db078f617 100644 --- a/src/components/ebay-lightbox-dialog/examples/scrolling.marko +++ b/src/components/ebay-lightbox-dialog/examples/scrolling.marko @@ -1,5 +1,8 @@ class { - onInput(input) { + declare state: { + open: boolean + } + onInput(input: { open: boolean }) { this.state = { open: input.open }; } onCreate() { @@ -8,7 +11,7 @@ class { openDialog() { this.state.open = true; } - closeDialog(e) { + closeDialog(e: Event) { this.state.open = false; this.emit("close", e); } diff --git a/src/components/ebay-lightbox-dialog/examples/with-footer.marko b/src/components/ebay-lightbox-dialog/examples/with-footer.marko index 4b6634faa..ec23df903 100644 --- a/src/components/ebay-lightbox-dialog/examples/with-footer.marko +++ b/src/components/ebay-lightbox-dialog/examples/with-footer.marko @@ -29,7 +29,12 @@ Open Dialog class { - onInput(input) { + declare state: { + open: boolean; + }; + onInput(input: { + open: boolean; + }) { this.state = { open: input.open }; } onCreate() { @@ -38,7 +43,7 @@ class { openDialog() { this.state.open = true; } - closeDialog(e) { + closeDialog(e: Event) { this.state.open = false; this.emit("close", e); } diff --git a/src/components/ebay-lightbox-dialog/examples/with-prev-button.marko b/src/components/ebay-lightbox-dialog/examples/with-prev-button.marko index b622f86cd..13d0d4f17 100644 --- a/src/components/ebay-lightbox-dialog/examples/with-prev-button.marko +++ b/src/components/ebay-lightbox-dialog/examples/with-prev-button.marko @@ -25,7 +25,10 @@ Open Dialog class { - onInput(input) { + declare state: { + open: boolean; + } + onInput(input: { open: boolean }) { this.state = { open: input.open }; } onCreate() { @@ -34,7 +37,7 @@ class { openDialog() { this.state.open = true; } - closeDialog(e) { + closeDialog(e: Event) { this.state.open = false; this.emit("close", e); } diff --git a/src/components/ebay-lightbox-dialog/lightbox-dialog.stories.ts b/src/components/ebay-lightbox-dialog/lightbox-dialog.stories.ts index e5a264546..4000f70cd 100644 --- a/src/components/ebay-lightbox-dialog/lightbox-dialog.stories.ts +++ b/src/components/ebay-lightbox-dialog/lightbox-dialog.stories.ts @@ -1,7 +1,7 @@ import { addRenderBodies, buildExtensionTemplate, -} from "../../../.storybook/utils"; +} from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./examples/default.marko"; import code from "./examples/default.marko?raw"; @@ -11,8 +11,10 @@ import WithPrevButtonTemplate from "./examples/with-prev-button.marko"; import WithPrevButtonCode from "./examples/with-prev-button.marko?raw"; import WithFooterTemplate from "./examples/with-footer.marko"; import WithFooterCode from "./examples/with-footer.marko?raw"; +import { Story } from "@storybook/marko"; +import type { Input } from "./index.marko"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -171,7 +173,7 @@ Default.args = { a11yCloseText: "Close dialog", a11yMinimizeText: "Minimize Dialog", a11yMaximizeText: "Maximize Dialog", -}; +} as any; Default.parameters = { docs: { @@ -196,7 +198,7 @@ Expressive.args = { bannerImgPosition: "top", a11yMinimizeText: "Minimize Dialog", a11yMaximizeText: "Maximize Dialog", -}; +} as any; Expressive.parameters = { docs: { diff --git a/src/components/ebay-lightbox-dialog/test/test.browser.js b/src/components/ebay-lightbox-dialog/test/test.browser.js index 822888582..6c24108f7 100644 --- a/src/components/ebay-lightbox-dialog/test/test.browser.js +++ b/src/components/ebay-lightbox-dialog/test/test.browser.js @@ -9,9 +9,9 @@ import { } from "vitest"; import { composeStories } from "@storybook/marko"; import { render, fireEvent, waitFor, cleanup } from "@marko/testing-library"; -import { addRenderBodies } from "../../../../.storybook/utils"; import { fastAnimations } from "../../../common/test-utils/browser"; import * as stories from "../lightbox-dialog.stories"; // import all stories from the stories file +import { addRenderBodies } from "../../../common/storybook/utils"; const { Default, WithPrevButton } = composeStories(stories); beforeAll(() => fastAnimations.start()); diff --git a/src/components/ebay-line-chart/line-chart.stories.ts b/src/components/ebay-line-chart/line-chart.stories.ts index 95c22562d..fa8536aaa 100644 --- a/src/components/ebay-line-chart/line-chart.stories.ts +++ b/src/components/ebay-line-chart/line-chart.stories.ts @@ -1,10 +1,12 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; -import { addRenderBodies } from "../../../.storybook/utils"; +import { tagToString } from "../../common/storybook/storybook-code-source"; +import { addRenderBodies } from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./index.marko"; import sampleSeriesData from "./examples/data.json"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -109,7 +111,7 @@ Standard.args = { { data: sampleSeriesData[0].data, }, - ], + ] as any, title: "standard line graph with single series", description: "sample line graph description", }; @@ -130,7 +132,7 @@ TrendAutoPositive.args = { trend: true, title: "positive trend graph", description: "standard line graph with single series the tend set to true", -}; +} as any; TrendAutoPositive.parameters = { docs: { @@ -144,7 +146,7 @@ export const TrendSetPositive = Template.bind({}); TrendSetPositive.args = { series: { data: sampleSeriesData[3].data, - }, + } as any, trend: "positive", title: "forced positive trend graph", description: @@ -167,7 +169,7 @@ TrendAutoNegative.args = { trend: true, title: "negative trend graph", description: "standard line graph with single series the tend set to true", -}; +} as any; TrendAutoNegative.parameters = { docs: { @@ -181,7 +183,7 @@ export const TrendSetNegative = Template.bind({}); TrendSetNegative.args = { series: { data: sampleSeriesData[1].data, - }, + } as any, trend: "negative", title: "forced negative trend graph", description: @@ -200,7 +202,7 @@ export const TrendSetNeutral = Template.bind({}); TrendSetNeutral.args = { series: { data: sampleSeriesData[0].data, - }, + } as any, trend: "neutral", }; @@ -222,7 +224,7 @@ TwoSeries.args = { data: sampleSeriesData[1].data, }, ], -}; +} as any; TwoSeries.parameters = { docs: { @@ -243,7 +245,7 @@ TwoSeriesWithPlotPoints.args = { }, ], plotPoints: true, -}; +} as any; TwoSeriesWithPlotPoints.parameters = { docs: { @@ -266,7 +268,7 @@ ThreeSeries.args = { data: sampleSeriesData[2].data, }, ], -}; +} as any; ThreeSeries.parameters = { docs: { @@ -290,7 +292,7 @@ ThreeSeriesWithPlotPoints.args = { }, ], plotPoints: true, -}; +} as any; ThreeSeriesWithPlotPoints.parameters = { docs: { @@ -316,7 +318,7 @@ FourSeries.args = { data: sampleSeriesData[3].data, }, ], -}; +} as any; FourSeries.parameters = { docs: { @@ -343,7 +345,7 @@ FourSeriesWithPlotPoints.args = { }, ], plotPoints: true, -}; +} as any; FourSeriesWithPlotPoints.parameters = { docs: { @@ -372,7 +374,7 @@ FiveSeries.args = { data: sampleSeriesData[4].data, }, ], -}; +} as any; FiveSeries.parameters = { docs: { @@ -402,7 +404,7 @@ FiveSeriesWithPlotPoints.args = { }, ], plotPoints: true, -}; +} as any; FiveSeriesWithPlotPoints.parameters = { docs: { diff --git a/src/components/ebay-list/list.stories.ts b/src/components/ebay-list/list.stories.ts index 170030371..f3d94849e 100644 --- a/src/components/ebay-list/list.stories.ts +++ b/src/components/ebay-list/list.stories.ts @@ -1,4 +1,3 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; import Readme from "./README.md"; import Component from "./index.marko"; import StaticTemplate from "./examples/static.marko"; @@ -7,17 +6,8 @@ import InteractiveTemplate from "./examples/interactive.marko"; import InteractiveTemplateCode from "./examples/interactive.marko?raw"; import WithSeparatorTemplate from "./examples/with-separator.marko"; import WithSeparatorTemplateCode from "./examples/with-separator.marko?raw"; - -const Template = (args) => ({ - input: { - ...args, - renderBody: args.renderBody - ? (out) => { - out.html(args.renderBody); - } - : null, - }, -}); +import { Story } from "@storybook/marko"; +import type { Input } from "./component-browser"; export default { title: "building blocks/ebay list", @@ -81,7 +71,7 @@ export default { }, }; -export const Static = (args) => ({ +export const Static: Story = (args) => ({ input: args, component: StaticTemplate, }); @@ -94,7 +84,7 @@ Static.parameters = { }, }; -export const Interactive = (args) => ({ +export const Interactive: Story = (args) => ({ input: args, component: InteractiveTemplate, }); @@ -107,7 +97,7 @@ Interactive.parameters = { }, }; -export const WithSeparator = (args) => ({ +export const WithSeparator: Story = (args) => ({ input: args, component: WithSeparatorTemplate, }); diff --git a/src/components/ebay-listbox-button/listbox-button.stories.ts b/src/components/ebay-listbox-button/listbox-button.stories.ts index 0bc517e9b..2fead3ab3 100644 --- a/src/components/ebay-listbox-button/listbox-button.stories.ts +++ b/src/components/ebay-listbox-button/listbox-button.stories.ts @@ -1,16 +1,18 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import { addRenderBodies, buildExtensionTemplate, -} from "../../../.storybook/utils"; +} from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./index.marko"; import WithDescriptionTemplate from "./examples/with-description.marko"; import WithDescriptionTemplateCode from "./examples/with-description.marko?raw"; import WithErrorTemplate from "./examples/with-error.marko"; import WithErrorTemplateCode from "./examples/with-error.marko?raw"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -167,7 +169,7 @@ Default.args = { value: "3", text: "Option 3", }, - ], + ] as any, }; Default.parameters = { docs: { diff --git a/src/components/ebay-listbox/listbox.stories.ts b/src/components/ebay-listbox/listbox.stories.ts index 4fa131f89..4c04424ac 100644 --- a/src/components/ebay-listbox/listbox.stories.ts +++ b/src/components/ebay-listbox/listbox.stories.ts @@ -1,14 +1,16 @@ import { addRenderBodies, buildExtensionTemplate, -} from "../../../.storybook/utils"; -import { tagToString } from "../../../.storybook/storybook-code-source"; +} from "../../common/storybook/utils"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; import Component from "./index.marko"; import WithDescriptionTemplate from "./examples/with-description.marko"; import WithDescriptionTemplateCode from "./examples/with-description.marko?raw"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -96,7 +98,7 @@ Standard.args = { value: "3", text: "Option 3", }, - ], + ] as any, }; Standard.parameters = { docs: { diff --git a/src/components/ebay-menu-button/component.ts b/src/components/ebay-menu-button/component.ts index b2d54766b..4c75a153b 100644 --- a/src/components/ebay-menu-button/component.ts +++ b/src/components/ebay-menu-button/component.ts @@ -35,9 +35,9 @@ interface MenuButtonInput disabled?: boolean; split?: string; "no-toggle-icon"?: boolean; - label?: { + label?: Marko.AttrTag<{ renderBody?: Marko.Body; - }; + }>; "prefix-label"?: AttrString; icon?: Marko.AttrTag<{ renderBody?: Marko.Body }>; text?: AttrString; diff --git a/src/components/ebay-menu-button/menu-button.stories.ts b/src/components/ebay-menu-button/menu-button.stories.ts index 61b31d0d3..7a421a7fc 100644 --- a/src/components/ebay-menu-button/menu-button.stories.ts +++ b/src/components/ebay-menu-button/menu-button.stories.ts @@ -1,8 +1,8 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import { addRenderBodies, buildExtensionTemplate, -} from "../../../.storybook/utils"; +} from "../../common/storybook/utils"; import Readme from "./README.md"; import BadgedTemplate from "./examples/badged-items.marko"; import BadgedTemplateCode from "./examples/badged-items.marko?raw"; @@ -15,8 +15,10 @@ import SeparatorTemplateCode from "./examples/separator.marko?raw"; import PrefixLabelTemplate from "./examples/prefix-label.marko"; import PrefixLabelTemplateCode from "./examples/prefix-label.marko?raw"; import Component from "./index.marko"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -223,7 +225,7 @@ Default.args = { { renderBody: `item 3`, }, - ], + ] as any, text: `eBay Menu`, }; Default.parameters = { diff --git a/src/components/ebay-menu-button/test/test.browser.js b/src/components/ebay-menu-button/test/test.browser.js index bc5a41b22..fb4c02b3f 100644 --- a/src/components/ebay-menu-button/test/test.browser.js +++ b/src/components/ebay-menu-button/test/test.browser.js @@ -3,7 +3,7 @@ import { composeStories } from "@storybook/marko"; import { render, fireEvent, cleanup } from "@marko/testing-library"; import { pressKey } from "../../../common/test-utils/browser"; import * as stories from "../menu-button.stories"; // import all stories from the stories file -import { addRenderBodies } from "../../../../.storybook/utils"; +import { addRenderBodies } from "../../../common/storybook/utils"; const { Default } = composeStories(stories); diff --git a/src/components/ebay-menu/examples/sprites.marko b/src/components/ebay-menu/examples/sprites.marko index 48abb0865..531b5a3bd 100644 --- a/src/components/ebay-menu/examples/sprites.marko +++ b/src/components/ebay-menu/examples/sprites.marko @@ -11,7 +11,6 @@

Wait 2 seconds for the typeahead to reset and then try typing again to reset the search.

({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -121,7 +123,7 @@ Default.args = { { renderBody: `item 3`, }, - ], + ] as any, }; Default.parameters = { docs: { diff --git a/src/components/ebay-menu/test/__snapshots__/test.server.js.snap b/src/components/ebay-menu/test/__snapshots__/test.server.js.snap index 68e9a17a9..8a26d20c4 100644 --- a/src/components/ebay-menu/test/__snapshots__/test.server.js.snap +++ b/src/components/ebay-menu/test/__snapshots__/test.server.js.snap @@ -848,7 +848,6 @@ exports[`menu > renders with sprites version 1`] = ` "   renders with typeahead 1`] = `    ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -118,7 +120,7 @@ Basic.args = { & Security code

`, -}; +} as any; Basic.parameters = { docs: { source: { @@ -127,7 +129,7 @@ Basic.parameters = { }, }; -export const WithAction = (args) => ({ +export const WithAction: Story = (args) => ({ input: args, component: withAction, }); @@ -137,7 +139,7 @@ WithAction.args = { a11yDismissText: "", status: null, icon: null, -}; +} as any; WithAction.parameters = { docs: { @@ -147,7 +149,7 @@ WithAction.parameters = { }, }; -export const WithDismiss = (args) => ({ +export const WithDismiss: Story = (args) => ({ input: args, component: withDismiss, }); @@ -158,7 +160,7 @@ WithDismiss.args = { a11yDismissText: "Dismiss Notice", status: "information", icon: null, -}; +} as any; WithDismiss.parameters = { docs: { diff --git a/src/components/ebay-pagination/examples/buttons-interactive.marko b/src/components/ebay-pagination/examples/buttons-interactive.marko index 498979681..10353fb59 100644 --- a/src/components/ebay-pagination/examples/buttons-interactive.marko +++ b/src/components/ebay-pagination/examples/buttons-interactive.marko @@ -1,3 +1,5 @@ +import type { Input as PaginationInput } from ""; + static const SIZE = 15; class { @@ -8,16 +10,16 @@ class { onCreate() { this.state = { current: 0 }; } - handlePrev(e) { + handlePrev: PaginationInput["on-previous"] = (e) => { this.state.current = Math.max(this.state.current - 1, 0); this.emit("previous", e); } - handleNext(e) { + handleNext: PaginationInput["on-next"] = (e) => { this.state.current = Math.min(this.state.current + 1, SIZE); this.emit("next", e); } - handleSelect({ index }, e) { - this.state.current = index; + handleSelect(e: { index: number }) { + this.state.current = e.index; this.emit("select", e); } } diff --git a/src/components/ebay-pagination/examples/hidden-pages.marko b/src/components/ebay-pagination/examples/hidden-pages.marko index 18caf0fd3..fa46edd2d 100644 --- a/src/components/ebay-pagination/examples/hidden-pages.marko +++ b/src/components/ebay-pagination/examples/hidden-pages.marko @@ -1,3 +1,4 @@ +import type { Input as PaginationInput } from ""; static const SIZE = 15; class { @@ -8,16 +9,16 @@ class { onCreate() { this.state = { current: 0 }; } - handlePrev(e) { + handlePrev: PaginationInput["on-previous"] = (e) => { this.state.current = Math.max(this.state.current - 1, 0); this.emit("previous", e); } - handleNext(e) { + handleNext: PaginationInput["on-next"] = (e) => { this.state.current = Math.min(this.state.current + 1, SIZE); this.emit("next", e); } - handleSelect({ value }, e) { - this.state.current = parseInt(value, 10); + handleSelect(e: { value: string }) { + this.state.current = parseInt(e.value, 10); this.emit("select", e); } } diff --git a/src/components/ebay-pagination/pagination.stories.ts b/src/components/ebay-pagination/pagination.stories.ts index c9ac38f7a..3443a3c4c 100644 --- a/src/components/ebay-pagination/pagination.stories.ts +++ b/src/components/ebay-pagination/pagination.stories.ts @@ -1,11 +1,13 @@ -import { addRenderBodies } from "../../../.storybook/utils"; -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { addRenderBodies } from "../../common/storybook/utils"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; import Component from "./index.marko"; import interactiveTemplate from "./examples/buttons-interactive.marko"; import interactiveCode from "./examples/buttons-interactive.marko?raw"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -178,7 +180,7 @@ Links.args = { href: "#", disabled: true, }, - ], + ] as any, }; Links.parameters = { docs: { @@ -232,7 +234,7 @@ Buttons.args = { type: "next", disabled: true, }, - ], + ] as any, }; Buttons.parameters = { docs: { @@ -242,7 +244,7 @@ Buttons.parameters = { }, }; -export const Interactive = (args) => ({ +export const Interactive: Story = (args) => ({ component: interactiveTemplate, input: addRenderBodies(args), }); diff --git a/src/components/ebay-panel-dialog/panel-dialog.stories.ts b/src/components/ebay-panel-dialog/panel-dialog.stories.ts index 303e46fc4..0203b3aa3 100644 --- a/src/components/ebay-panel-dialog/panel-dialog.stories.ts +++ b/src/components/ebay-panel-dialog/panel-dialog.stories.ts @@ -1,15 +1,17 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { Story } from "@storybook/marko"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; import Component from "./examples/default.marko"; +import type { Input } from "./index.marko"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: { ...args, - renderBody: args.renderBody - ? (out) => { + renderBody: (args.renderBody + ? (out: any) => { out.html(args.renderBody); } - : null, + : null) as any, }, }); diff --git a/src/components/ebay-panel-dialog/test/test.browser.js b/src/components/ebay-panel-dialog/test/test.browser.js index a9274c88a..c121bd910 100644 --- a/src/components/ebay-panel-dialog/test/test.browser.js +++ b/src/components/ebay-panel-dialog/test/test.browser.js @@ -9,9 +9,9 @@ import { } from "vitest"; import { render, fireEvent, waitFor, cleanup } from "@marko/testing-library"; import { composeStories } from "@storybook/marko"; -import { addRenderBodies } from "../../../../.storybook/utils"; import { fastAnimations } from "../../../common/test-utils/browser"; import * as stories from "../panel-dialog.stories"; // import all stories from the stories file +import { addRenderBodies } from "../../../common/storybook/utils"; const { Default } = composeStories(stories); beforeAll(() => fastAnimations.start()); diff --git a/src/components/ebay-phone-input/phone-input.stories.ts b/src/components/ebay-phone-input/phone-input.stories.ts index ddc677c57..ff4475387 100644 --- a/src/components/ebay-phone-input/phone-input.stories.ts +++ b/src/components/ebay-phone-input/phone-input.stories.ts @@ -1,8 +1,4 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; -import { - addRenderBodies, - buildExtensionTemplate, -} from "../../../.storybook/utils"; +import { buildExtensionTemplate } from "../../common/storybook/utils"; import button from "./index.marko"; import Readme from "./README.md"; import DefaultTemplate from "./examples/default.marko"; @@ -10,10 +6,6 @@ import DefaultTemplateCode from "./examples/default.marko?raw"; import LocalizationTemplate from "./examples/localization.marko"; import LocalizationTemplateCode from "./examples/localization.marko?raw"; -const Template = (args) => ({ - input: addRenderBodies(args), -}); - export default { title: "form input/ebay-phone-input", component: button, diff --git a/src/components/ebay-progress-bar-expressive/progress-bar-expressive.stories.ts b/src/components/ebay-progress-bar-expressive/progress-bar-expressive.stories.ts index 8524e9b61..ecbfc8b1b 100644 --- a/src/components/ebay-progress-bar-expressive/progress-bar-expressive.stories.ts +++ b/src/components/ebay-progress-bar-expressive/progress-bar-expressive.stories.ts @@ -1,8 +1,8 @@ import { addRenderBodies, buildExtensionTemplate, -} from "../../../.storybook/utils"; -import { tagToString } from "../../../.storybook/storybook-code-source"; +} from "../../common/storybook/utils"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; import Component from "./index.marko"; import { @@ -19,8 +19,10 @@ import MediumTextTemplate from "./examples/medium-text.marko"; import MediumTextTemplateCode from "./examples/medium-text.marko?raw"; import MessagesTemplate from "./examples/messages.marko"; import MessagesTemplateCode from "./examples/messages.marko?raw"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -87,7 +89,7 @@ export const Default = buildExtensionTemplate( export const WithSingleMessage = Template.bind({}); WithSingleMessage.args = { - messages: [{ renderBody: "We're processing your order" }], + messages: [{ renderBody: "We're processing your order" }] as any, }; WithSingleMessage.parameters = { docs: { @@ -117,7 +119,7 @@ WithLongMessage.args = { duration: 2500, }, { renderBody: "That's okay!" }, - ], + ] as any, }; WithLongMessage.parameters = { docs: { diff --git a/src/components/ebay-progress-bar/progress-bar.stories.ts b/src/components/ebay-progress-bar/progress-bar.stories.ts index a3f8ba3a2..956f896f3 100644 --- a/src/components/ebay-progress-bar/progress-bar.stories.ts +++ b/src/components/ebay-progress-bar/progress-bar.stories.ts @@ -1,15 +1,16 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { Story } from "@storybook/marko"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; -import Component from "./index.marko"; +import Component, { type Input } from "./index.marko"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: { ...args, - renderBody: args.renderBody - ? (out) => { + renderBody: (args.renderBody + ? (out: any) => { out.html(args.renderBody); } - : null, + : null) as any, }, }); diff --git a/src/components/ebay-progress-spinner/progress-spinner.stories.ts b/src/components/ebay-progress-spinner/progress-spinner.stories.ts index 334c12869..652d75e6d 100644 --- a/src/components/ebay-progress-spinner/progress-spinner.stories.ts +++ b/src/components/ebay-progress-spinner/progress-spinner.stories.ts @@ -1,15 +1,16 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { Story } from "@storybook/marko"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; -import Component from "./index.marko"; +import Component, { type Input } from "./index.marko"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: { ...args, - renderBody: args.renderBody - ? (out) => { + renderBody: (args.renderBody + ? (out: any) => { out.html(args.renderBody); } - : null, + : null) as any, }, }); diff --git a/src/components/ebay-progress-stepper/progress-stepper.stories.ts b/src/components/ebay-progress-stepper/progress-stepper.stories.ts index 185943f9c..9b487520a 100644 --- a/src/components/ebay-progress-stepper/progress-stepper.stories.ts +++ b/src/components/ebay-progress-stepper/progress-stepper.stories.ts @@ -1,9 +1,10 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; -import { addRenderBodies } from "../../../.storybook/utils"; +import { Story } from "@storybook/marko"; +import { tagToString } from "../../common/storybook/storybook-code-source"; +import { addRenderBodies } from "../../common/storybook/utils"; import Readme from "./README.md"; -import Component from "./index.marko"; +import Component, { type Input } from "./index.marko"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -118,7 +119,7 @@ InProgress.args = { title: { renderBody: "Delivered" }, renderBody: "July 6th", }, - ], + ] as any, a11yHeadingTag: "", a11yHeadingText: "Shipment progress", }; @@ -153,7 +154,7 @@ Blocked.args = { title: { renderBody: "Delivered" }, renderBody: "July 6th", }, - ], + ] as any, defaultState: "attention", a11yHeadingTag: "", a11yHeadingText: "Shipment progress, shipment is blocked", diff --git a/src/components/ebay-radio/radio.stories.ts b/src/components/ebay-radio/radio.stories.ts index 618f10e8b..a6803b9ef 100644 --- a/src/components/ebay-radio/radio.stories.ts +++ b/src/components/ebay-radio/radio.stories.ts @@ -1,4 +1,4 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; import Component from "./index.marko"; import groupTemplate from "./examples/grouped-radio.marko"; @@ -7,15 +7,17 @@ import DisabledTemplate from "./examples/disabled-with-label.marko"; import groupCode from "./examples/grouped-radio.marko?raw"; import WithLabelCode from "./examples/with-label.marko?raw"; import DisabledCode from "./examples/disabled-with-label.marko?raw"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component-browser"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: { ...args, - renderBody: args.renderBody - ? (out) => { + renderBody: (args.renderBody + ? (out: any) => { out.html(args.renderBody); } - : null, + : null) as any, }, }); @@ -75,7 +77,7 @@ export default { }, }; -export const WithLabel = (args) => ({ +export const WithLabel: Story = (args) => ({ input: args, component: WithLabelTemplate, }); @@ -88,7 +90,7 @@ WithLabel.parameters = { }, }; -export const Disabled = (args) => ({ +export const Disabled: Story = (args) => ({ input: args, component: DisabledTemplate, }); @@ -101,14 +103,14 @@ Disabled.parameters = { }, }; -export const Group = (args) => ({ +export const Group: Story = (args) => ({ input: { ...args, - renderBody: args.renderBody - ? (out) => { + renderBody: (args.renderBody + ? (out: any) => { out.html(args.renderBody); } - : null, + : null) as any, }, component: groupTemplate, }); @@ -120,7 +122,7 @@ Group.parameters = { }, }; -export const Isolated = Template.bind({}); +export const Isolated: any = Template.bind({}); Isolated.args = {}; Isolated.component = Component; Isolated.parameters = { diff --git a/src/components/ebay-section-notice/section-notice.stories.ts b/src/components/ebay-section-notice/section-notice.stories.ts index a9a08cf2a..450fec283 100644 --- a/src/components/ebay-section-notice/section-notice.stories.ts +++ b/src/components/ebay-section-notice/section-notice.stories.ts @@ -1,18 +1,18 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import { addRenderBodies, buildExtensionTemplate, -} from "../../../.storybook/utils"; +} from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./index.marko"; import withAction from "./examples/with-action.marko"; import withActionCode from "./examples/with-action.marko?raw"; -import withIcon from "./examples/with-icon.marko"; -import withIconCode from "./examples/with-icon.marko?raw"; import withDismiss from "./examples/with-dismiss.marko"; import withDismissCode from "./examples/with-dismiss.marko?raw"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -106,7 +106,7 @@ Basic.args = { a11yText: "attention", status: "attention", a11yRoleDescription: "Notice", - renderBody: "

Section notice info. Things you need to know.

", + renderBody: "

Section notice info. Things you need to know.

" as any, }; Basic.parameters = { docs: { @@ -123,8 +123,8 @@ WithTitle.args = { a11yRoleDescription: "Notice", title: { renderBody: "Section notice title", - }, - renderBody: "

Section notice info. Things you need to know.

", + } as any, + renderBody: "

Section notice info. Things you need to know.

" as any, }; WithTitle.parameters = { diff --git a/src/components/ebay-section-title/examples/small.marko b/src/components/ebay-section-title/examples/small.marko deleted file mode 100644 index 8da4a4a9e..000000000 --- a/src/components/ebay-section-title/examples/small.marko +++ /dev/null @@ -1,3 +0,0 @@ - - Today's Deals - All With Free Shipping - diff --git a/src/components/ebay-section-title/index.marko b/src/components/ebay-section-title/index.marko index e2cd1433d..8df029250 100644 --- a/src/components/ebay-section-title/index.marko +++ b/src/components/ebay-section-title/index.marko @@ -8,7 +8,7 @@ static interface SectionTitleInput extends Omit, `on${string} href?: string; subtitle?: Marko.AttrTag, `on${string}`>>; info?: Marko.AttrTag, `on${string}`>>; - overflow?: Omit, `on${string}`>; + overflow?: Marko.AttrTag, `on${string}`>>; } export interface Input extends WithNormalizedProps {} diff --git a/src/components/ebay-section-title/section-title.stories.ts b/src/components/ebay-section-title/section-title.stories.ts index 7bed210d6..2ee5b81df 100644 --- a/src/components/ebay-section-title/section-title.stories.ts +++ b/src/components/ebay-section-title/section-title.stories.ts @@ -1,13 +1,14 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; -import { addRenderBodies } from "../../../.storybook/utils"; +import { tagToString } from "../../common/storybook/storybook-code-source"; +import { addRenderBodies } from "../../common/storybook/utils"; import Readme from "./README.md"; -import Component from "./index.marko"; +import Component, { type Input } from "./index.marko"; import overflowComponent from "./examples/overflow.marko"; import overflowComponentCode from "./examples/overflow.marko?raw"; import buttonSeeAllComponent from "./examples/save-see-all.marko"; import buttonSeeAllComponentCode from "./examples/save-see-all.marko?raw"; +import { Story } from "@storybook/marko"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -73,8 +74,8 @@ export default { export const Standard = Template.bind({}); Standard.args = { - title: { renderBody: `Todays Best Deals` }, - subtitle: { renderBody: `with free shipping!` }, + title: { renderBody: `Todays Best Deals` } as any, + subtitle: { renderBody: `with free shipping!` } as any, }; Standard.parameters = { diff --git a/src/components/ebay-segmented-buttons/examples/controlled.marko b/src/components/ebay-segmented-buttons/examples/controlled.marko index b27a6a8a1..3b505cf21 100644 --- a/src/components/ebay-segmented-buttons/examples/controlled.marko +++ b/src/components/ebay-segmented-buttons/examples/controlled.marko @@ -9,7 +9,7 @@ class { selected: 0, }; } - selectItem({ index }) { + selectItem({ index }: { index: number }) { this.state.selected = index; } } diff --git a/src/components/ebay-segmented-buttons/segmented-buttons.stories.ts b/src/components/ebay-segmented-buttons/segmented-buttons.stories.ts index 71c1146d7..edc1a8d81 100644 --- a/src/components/ebay-segmented-buttons/segmented-buttons.stories.ts +++ b/src/components/ebay-segmented-buttons/segmented-buttons.stories.ts @@ -1,14 +1,15 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import { addRenderBodies, buildExtensionTemplate, -} from "../../../.storybook/utils"; -import button from "./index.marko"; +} from "../../common/storybook/utils"; +import button, { type Input } from "./index.marko"; import Readme from "./README.md"; import WithIconsTemplate from "./examples/with-icons.marko"; import WithIconsTemplateCode from "./examples/with-icons.marko?raw"; +import { Story } from "@storybook/marko"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -95,7 +96,7 @@ Default.args = { renderBody: `Q4`, value: "quarter4", }, - ], + ] as any, }; Default.parameters = { diff --git a/src/components/ebay-select/examples/external-label.marko b/src/components/ebay-select/examples/external-label.marko index de1c1336e..c35aaacd5 100644 --- a/src/components/ebay-select/examples/external-label.marko +++ b/src/components/ebay-select/examples/external-label.marko @@ -1,11 +1,21 @@ +export interface Input { + options: Array<{ + value: string, + text: string + }>; +} + class { + declare state: { + selected: number | null + } onCreate() { this.state = { selected: null } } - handleChange({ index }) { + handleChange({ index }: { index: number }) { this.state.selected = index; } } diff --git a/src/components/ebay-select/select.stories.ts b/src/components/ebay-select/select.stories.ts index 0b7ee21e3..eaac16d54 100644 --- a/src/components/ebay-select/select.stories.ts +++ b/src/components/ebay-select/select.stories.ts @@ -1,4 +1,4 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; import Component from "./index.marko"; import WithLabelTemplate from "./examples/external-label.marko"; @@ -7,15 +7,17 @@ import DisabledTemplate from "./examples/disabled-with-label.marko"; import WithLabelCode from "./examples/external-label.marko?raw"; import InFormCode from "./examples/in-form.marko"; import DisabledCode from "./examples/disabled-with-label.marko"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: { ...args, - renderBody: args.renderBody - ? (out) => { + renderBody: (args.renderBody + ? (out: any) => { out.html(args.renderBody); } - : null, + : null) as any, }, }); @@ -110,7 +112,7 @@ Floating.args = { text: "option 3", value: "option 3", }, - ], + ] as any, }; Floating.parameters = { docs: { @@ -122,7 +124,7 @@ Floating.parameters = { }, }; -export const ExternalLabel = (args) => ({ +export const ExternalLabel: Story = (args) => ({ input: args, component: WithLabelTemplate, }); @@ -153,10 +155,10 @@ ExternalLabel.args = { text: "option 3", value: "option 3", }, - ], + ] as any, }; -export const Disabled = (args) => ({ +export const Disabled: Story = (args) => ({ input: args, component: DisabledTemplate, }); @@ -169,7 +171,7 @@ Disabled.parameters = { }, }; -export const InForm = (args) => ({ +export const InForm: Story = (args) => ({ input: args, component: InFormTemplate, }); diff --git a/src/components/ebay-signal/signal.stories.ts b/src/components/ebay-signal/signal.stories.ts index df637a264..5b9f20da1 100644 --- a/src/components/ebay-signal/signal.stories.ts +++ b/src/components/ebay-signal/signal.stories.ts @@ -1,15 +1,16 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { Story } from "@storybook/marko"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; -import Component from "./index.marko"; +import Component, { type Input } from "./index.marko"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: { ...args, - renderBody: args.renderBody - ? (out) => { + renderBody: (args.renderBody + ? (out: any) => { out.html(args.renderBody); } - : null, + : null) as any, }, }); @@ -34,7 +35,7 @@ export default { }; export const Standard = Template.bind({}); Standard.args = { - renderBody: `Signal Text`, + renderBody: `Signal Text` as any, }; Standard.parameters = { diff --git a/src/components/ebay-skeleton/examples/composite.marko b/src/components/ebay-skeleton/examples/composite.marko index e9340c14a..806836f5f 100644 --- a/src/components/ebay-skeleton/examples/composite.marko +++ b/src/components/ebay-skeleton/examples/composite.marko @@ -12,7 +12,7 @@
- +
diff --git a/src/components/ebay-skeleton/examples/text-multiline.marko b/src/components/ebay-skeleton/examples/text-multiline.marko index ac6acb90e..9fbaf8e13 100644 --- a/src/components/ebay-skeleton/examples/text-multiline.marko +++ b/src/components/ebay-skeleton/examples/text-multiline.marko @@ -5,6 +5,6 @@
- +
diff --git a/src/components/ebay-skeleton/examples/tile.marko b/src/components/ebay-skeleton/examples/tile.marko index 747630fc1..750bba5f0 100644 --- a/src/components/ebay-skeleton/examples/tile.marko +++ b/src/components/ebay-skeleton/examples/tile.marko @@ -11,6 +11,6 @@
- +
diff --git a/src/components/ebay-skeleton/examples/withContent.marko b/src/components/ebay-skeleton/examples/withContent.marko index 1e0cfb7e4..01174e618 100644 --- a/src/components/ebay-skeleton/examples/withContent.marko +++ b/src/components/ebay-skeleton/examples/withContent.marko @@ -1,11 +1,17 @@ class { + declare state: { + isLoading: boolean; + data: string | null; + error?: unknown; + }; onCreate() { this.state = { isLoading: true, data: null, + error: undefined, }; } - async getData() { + async getData(): Promise { return new Promise((resolve, reject) => { setTimeout(() => resolve("Button"), 2000); }); diff --git a/src/components/ebay-skeleton/skeleton.stories.ts b/src/components/ebay-skeleton/skeleton.stories.ts index ec9f998f6..e6280683a 100644 --- a/src/components/ebay-skeleton/skeleton.stories.ts +++ b/src/components/ebay-skeleton/skeleton.stories.ts @@ -1,9 +1,9 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import { addRenderBodies, buildExtensionTemplate, -} from "../../../.storybook/utils"; -import Component from "./index.marko"; +} from "../../common/storybook/utils"; +import Component, { type Input } from "./index.marko"; import Readme from "./README.md"; import avatarTemplate from "./examples/avatar.marko"; import avatarCode from "./examples/avatar.marko?raw"; @@ -25,8 +25,9 @@ import withContentTemplate from "./examples/withContent.marko"; import withContentCode from "./examples/withContent.marko?raw"; import compositeTemplate from "./examples/composite.marko"; import compositeCode from "./examples/composite.marko?raw"; +import { Story } from "@storybook/marko"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -82,7 +83,7 @@ export default { export const Default = Template.bind({}); Default.args = { style: "width: 220px", - renderBody: `
`, + renderBody: `
` as any, }; Default.parameters = { docs: { diff --git a/src/components/ebay-skeleton/test/__snapshots__/test.server.js.snap b/src/components/ebay-skeleton/test/__snapshots__/test.server.js.snap index ee2470c27..9b7e4d624 100644 --- a/src/components/ebay-skeleton/test/__snapshots__/test.server.js.snap +++ b/src/components/ebay-skeleton/test/__snapshots__/test.server.js.snap @@ -80,8 +80,7 @@ exports[`skeleton > renders tile 1`] = ` class="skeleton__image custom-image" />  
 
 diff --git a/src/components/ebay-snackbar-dialog/snackbar-dialog.stories.ts b/src/components/ebay-snackbar-dialog/snackbar-dialog.stories.ts index e47f0d70e..088102515 100644 --- a/src/components/ebay-snackbar-dialog/snackbar-dialog.stories.ts +++ b/src/components/ebay-snackbar-dialog/snackbar-dialog.stories.ts @@ -1,26 +1,11 @@ import Readme from "./README.md"; import component from "./index.marko"; -import { - addRenderBodies, - buildExtensionTemplate, -} from "../../../.storybook/utils"; - +import { buildExtensionTemplate } from "../../common/storybook/utils"; import defaultTemplate from "./examples/default.marko"; import defaultTemplateCode from "./examples/default.marko?raw"; import withActionTemplate from "./examples/action.marko"; import withActionTemplateCode from "./examples/action.marko?raw"; -const Template = (args) => ({ - input: { - ...args, - renderBody: args.renderBody - ? (out) => { - out.html(args.renderBody); - } - : null, - }, -}); - export default { title: "dialogs/ebay-snackbar-dialog", component, diff --git a/src/components/ebay-spark-line/spark-line.stories-ignore.ts b/src/components/ebay-spark-line/spark-line.stories-ignore.ts index 169eed915..57a1891d5 100644 --- a/src/components/ebay-spark-line/spark-line.stories-ignore.ts +++ b/src/components/ebay-spark-line/spark-line.stories-ignore.ts @@ -1,10 +1,12 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; -import { addRenderBodies } from "../../../.storybook/utils"; +import { tagToString } from "../../common/storybook/storybook-code-source"; +import { addRenderBodies } from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./index.marko"; import * as sampleData from "./examples/data.json"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -46,7 +48,7 @@ Basic.parameters = { }; export const Positive = Template.bind({}); -Positive.args = sampleData.positive; +Positive.args = sampleData.positive as any; Positive.parameters = { docs: { @@ -57,7 +59,7 @@ Positive.parameters = { }; export const Negative = Template.bind({}); -Negative.args = sampleData.negative; +Negative.args = sampleData.negative as any; Negative.parameters = { docs: { diff --git a/src/components/ebay-split-button/split-button.stories.ts b/src/components/ebay-split-button/split-button.stories.ts index 499f69666..01d192aaf 100644 --- a/src/components/ebay-split-button/split-button.stories.ts +++ b/src/components/ebay-split-button/split-button.stories.ts @@ -1,9 +1,11 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; -import { addRenderBodies } from "../../../.storybook/utils"; +import { Story } from "@storybook/marko"; +import { tagToString } from "../../common/storybook/storybook-code-source"; +import { addRenderBodies } from "../../common/storybook/utils"; import button from "./index.marko"; import Readme from "./README.md"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), // input: { // ...args, @@ -207,7 +209,7 @@ export default { export const Standard = Template.bind({}); Standard.args = { - renderBody: "Button", + renderBody: "Button" as any, a11yMenuText: "Menu", items: [ { @@ -219,7 +221,7 @@ Standard.args = { { renderBody: `item 3`, }, - ], + ] as any, }; Standard.parameters = { diff --git a/src/components/ebay-star-rating-select/examples/default.marko b/src/components/ebay-star-rating-select/examples/default.marko index 1ced9ebf1..3d6b58ae9 100644 --- a/src/components/ebay-star-rating-select/examples/default.marko +++ b/src/components/ebay-star-rating-select/examples/default.marko @@ -8,7 +8,7 @@ class { value: 0 }; } - handleStarChange({value}) { + handleStarChange({value}: { value: number }) { this.state.value = value; } diff --git a/src/components/ebay-star-rating-select/examples/fieldset.marko b/src/components/ebay-star-rating-select/examples/fieldset.marko index c14743678..34af29502 100644 --- a/src/components/ebay-star-rating-select/examples/fieldset.marko +++ b/src/components/ebay-star-rating-select/examples/fieldset.marko @@ -1,6 +1,6 @@ export interface Input { value: number; - a11yStarText: string; + a11yStarText: [string, string, string, string, string]; } class {} diff --git a/src/components/ebay-star-rating-select/star-rating-select.stories.ts b/src/components/ebay-star-rating-select/star-rating-select.stories.ts index 5e166b2bd..4e6e64ac4 100644 --- a/src/components/ebay-star-rating-select/star-rating-select.stories.ts +++ b/src/components/ebay-star-rating-select/star-rating-select.stories.ts @@ -1,17 +1,19 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; import Component from "./index.marko"; import FieldsetTemplate from "./examples/fieldset.marko"; import FieldsetCode from "./examples/fieldset.marko?raw"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: { ...args, - renderBody: args.renderBody - ? (out) => { + renderBody: (args.renderBody + ? (out: any) => { out.html(args.renderBody); } - : null, + : null) as any, }, }); @@ -94,7 +96,7 @@ Isolated.parameters = { }, }; -export const Fieldset = (args) => ({ +export const Fieldset: Story = (args) => ({ input: args, component: FieldsetTemplate, }); diff --git a/src/components/ebay-star-rating/star-rating.stories.ts b/src/components/ebay-star-rating/star-rating.stories.ts index e71f56e3e..b2dbb512a 100644 --- a/src/components/ebay-star-rating/star-rating.stories.ts +++ b/src/components/ebay-star-rating/star-rating.stories.ts @@ -1,17 +1,18 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { Story } from "@storybook/marko"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; import fixed from "./examples/all.marko"; import code from "./examples/all.marko?raw"; -import component from "./index.marko"; +import component, { type Input } from "./index.marko"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: { ...args, - renderBody: args.renderBody - ? (out) => { + renderBody: (args.renderBody + ? (out: any) => { out.html(args.renderBody); } - : null, + : null) as any, }, }); @@ -51,7 +52,7 @@ DynamicStars.parameters = { }, }; -export const FixedStars = (args) => ({ +export const FixedStars: Story = (args) => ({ input: args, component: fixed, }); diff --git a/src/components/ebay-switch/switch.stories.ts b/src/components/ebay-switch/switch.stories.ts index e03359373..e93f7c904 100644 --- a/src/components/ebay-switch/switch.stories.ts +++ b/src/components/ebay-switch/switch.stories.ts @@ -1,12 +1,14 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import type { Story } from "@storybook/marko"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; import Component from "./index.marko"; +import type { Input } from "./component-browser"; import WithLabelTemplate from "./examples/with-label.marko"; import DisabledTemplate from "./examples/disabled-with-label.marko"; import WithLabelCode from "./examples/with-label.marko?raw"; import DisabledCode from "./examples/disabled-with-label.marko?raw"; -const Template = (args) => ({ input: args }); +const Template: Story = (args) => ({ input: args }); export default { title: "form input/ebay-switch", @@ -18,7 +20,6 @@ export default { }, }, }, - argTypes: { onChange: { action: "on-change", @@ -31,9 +32,9 @@ export default { }, }, }, -}; +} ; -export const WithLabel = (args) => ({ +export const WithLabel: Story = (args) => ({ input: args, component: WithLabelTemplate, }); @@ -46,7 +47,7 @@ WithLabel.parameters = { }, }; -export const Disabled = (args) => ({ +export const Disabled: Story = (args) => ({ input: args, component: DisabledTemplate, }); diff --git a/src/components/ebay-table/examples/sort-client-side.marko b/src/components/ebay-table/examples/sort-client-side.marko index 5673dadea..59010280a 100644 --- a/src/components/ebay-table/examples/sort-client-side.marko +++ b/src/components/ebay-table/examples/sort-client-side.marko @@ -1,14 +1,14 @@ import data from "./data.json"; -import { type TableSort } from "../component"; +import type { Input as TableInput } from ""; class { declare state: { - sorted: Record; + sorted: Record; data: typeof data; }; onCreate() { this.state = { sorted: {}, data }; } - onSort(event: { sorted: Record }, ...params: any) { + onSort: TableInput["on-sort"] = (event) => { this.state.sorted = event.sorted; this.state.data = [...data].sort((a, b) => { if (this.state.sorted.listPriceCol === "asc") { @@ -32,7 +32,7 @@ class { } return 0; }); - this.emit("sort", event, ...params); + this.emit("sort", event); } } diff --git a/src/components/ebay-table/examples/sort.marko b/src/components/ebay-table/examples/sort.marko index f46b689d8..0c60a7540 100644 --- a/src/components/ebay-table/examples/sort.marko +++ b/src/components/ebay-table/examples/sort.marko @@ -1,15 +1,15 @@ import data from "./data.json"; -import { type TableSort } from "../component"; +import type { Input as TableInput } from ""; class { declare state: { - sorted: Record; + sorted: Record; }; onCreate() { this.state = { sorted: { sellerCol: "asc" } }; } - onSort(event: { sorted: Record }, ...params: any) { + onSort: TableInput["on-sort"] = (event) => { this.state.sorted = event.sorted; - this.emit("sort", event, ...params); + this.emit("sort", event); } } diff --git a/src/components/ebay-table/table.stories.ts b/src/components/ebay-table/table.stories.ts index 829d708d6..05d82aa69 100644 --- a/src/components/ebay-table/table.stories.ts +++ b/src/components/ebay-table/table.stories.ts @@ -1,4 +1,4 @@ -import { buildExtensionTemplate } from "../../../.storybook/utils"; +import { buildExtensionTemplate } from "../../common/storybook/utils"; import table from "./index.marko"; import Readme from "./README.md"; import defaultTemplate from "./examples/default.marko"; @@ -128,7 +128,7 @@ export default { }, }, }, -}; +} ; export const Default = buildExtensionTemplate(defaultTemplate, defaultCode); export const TableDensity = buildExtensionTemplate( diff --git a/src/components/ebay-tabs/tabs.stories.ts b/src/components/ebay-tabs/tabs.stories.ts index 93ba3ff9a..fc6871a09 100644 --- a/src/components/ebay-tabs/tabs.stories.ts +++ b/src/components/ebay-tabs/tabs.stories.ts @@ -1,9 +1,11 @@ -import { addRenderBodies } from "../../../.storybook/utils"; -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { addRenderBodies } from "../../common/storybook/utils"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; import Component from "./index.marko"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -65,7 +67,7 @@ Standard.args = { { renderBody: `panel three`, }, - ], + ] as any, tabs: [ { renderBody: `Tab 1`, @@ -76,7 +78,7 @@ Standard.args = { { renderBody: `Tab 3`, }, - ], + ] as any, }; Standard.parameters = { docs: { diff --git a/src/components/ebay-textbox/examples/both-icons.marko b/src/components/ebay-textbox/examples/both-icons.marko index 9af147493..a1a57e3d2 100644 --- a/src/components/ebay-textbox/examples/both-icons.marko +++ b/src/components/ebay-textbox/examples/both-icons.marko @@ -1,12 +1,15 @@ import type { TextboxEvent } from "../component-browser"; class { + declare state: { + value: string + } onCreate() { this.state = { value: "", }; } - change({ value, originalEvent }) { + change({ value, originalEvent }: { value: string, originalEvent: Event }) { this.state.value = value; this.emit('change', originalEvent); } diff --git a/src/components/ebay-textbox/textbox.stories.ts b/src/components/ebay-textbox/textbox.stories.ts index 9b2ecc889..e4b9d0001 100644 --- a/src/components/ebay-textbox/textbox.stories.ts +++ b/src/components/ebay-textbox/textbox.stories.ts @@ -1,4 +1,4 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; import Component from "./index.marko"; import WithLabelTemplate from "./examples/external-label.marko"; @@ -17,15 +17,17 @@ import WithBothIconsCode from "./examples/both-icons.marko?raw"; import WithPostfixIconCode from "./examples/postfix-icon.marko?raw"; import WithPrefixIconCode from "./examples/prefix-icon.marko?raw"; import FullyDecoratedCode from "./examples/fully-decorated.marko?raw"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component-browser"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: { ...args, - renderBody: args.renderBody - ? (out) => { + renderBody: (args.renderBody + ? (out: any) => { out.html(args.renderBody); } - : null, + : null) as any, }, }); @@ -228,7 +230,7 @@ export default { }, }; -export const WithLabel = (args) => ({ +export const WithLabel: Story = (args) => ({ input: args, component: WithLabelTemplate, }); @@ -241,7 +243,7 @@ WithLabel.parameters = { }, }; -export const Disabled = (args) => ({ +export const Disabled: Story = (args) => ({ input: args, component: DisabledTemplate, }); @@ -254,7 +256,7 @@ Disabled.parameters = { }, }; -export const FloatingLabel = (args) => ({ +export const FloatingLabel: Story = (args) => ({ input: args, component: FloatingLabelTemplate, }); @@ -267,7 +269,7 @@ FloatingLabel.parameters = { }, }; -export const FloatingLabelAutocomplete = (args) => ({ +export const FloatingLabelAutocomplete: Story = (args) => ({ input: args, component: FloatingLabelAutocompleteTemplate, }); @@ -290,7 +292,7 @@ Isolated.parameters = { }, }; -export const PrefixIcon = (args) => ({ +export const PrefixIcon: Story = (args) => ({ input: args, component: WithPrefixIcon, }); @@ -303,7 +305,7 @@ PrefixIcon.parameters = { }, }; -export const PostfixIcon = (args) => ({ +export const PostfixIcon: Story = (args) => ({ input: args, component: WithPostfixIcon, }); @@ -316,7 +318,7 @@ PostfixIcon.parameters = { }, }; -export const BothIcons = (args) => ({ +export const BothIcons: Story = (args) => ({ input: args, component: WithBothIcons, }); @@ -329,7 +331,7 @@ BothIcons.parameters = { }, }; -export const FullyDecorated = (args) => ({ +export const FullyDecorated: Story = (args) => ({ input: args, component: FullyDecoratedTemplate, }); diff --git a/src/components/ebay-toast-dialog/test/test.browser.js b/src/components/ebay-toast-dialog/test/test.browser.js index 59ca4b851..a271d48db 100644 --- a/src/components/ebay-toast-dialog/test/test.browser.js +++ b/src/components/ebay-toast-dialog/test/test.browser.js @@ -9,9 +9,9 @@ import { expect, } from "vitest"; import { composeStories } from "@storybook/marko"; -import { addRenderBodies } from "../../../../.storybook/utils"; import { fastAnimations } from "../../../common/test-utils/browser"; import * as stories from "../toast-dialog.stories"; // import all stories from the stories file +import { addRenderBodies } from "../../../common/storybook/utils"; const { Default } = composeStories(stories); beforeAll(() => fastAnimations.start()); diff --git a/src/components/ebay-toast-dialog/toast-dialog.stories.ts b/src/components/ebay-toast-dialog/toast-dialog.stories.ts index 5dce62116..10b301afd 100644 --- a/src/components/ebay-toast-dialog/toast-dialog.stories.ts +++ b/src/components/ebay-toast-dialog/toast-dialog.stories.ts @@ -1,17 +1,19 @@ +import { Story } from "@storybook/marko"; import Readme from "./README.md"; import Component from "./examples/default.marko"; import code from "./examples/default.marko?raw"; +import type { Input } from "./index.marko"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: { ...args, spread: null, - ...args.spread, - renderBody: args.renderBody - ? (out) => { + ...(args as any).spread, + renderBody: (args.renderBody + ? (out: any) => { out.html(args.renderBody); } - : null, + : null) as any, }, }); diff --git a/src/components/ebay-toggle-button-group/examples/controlled.marko b/src/components/ebay-toggle-button-group/examples/controlled.marko index 9581be885..44d968823 100644 --- a/src/components/ebay-toggle-button-group/examples/controlled.marko +++ b/src/components/ebay-toggle-button-group/examples/controlled.marko @@ -14,12 +14,15 @@ $ const titles = ["Option 1", "Option 2", "Option 3"]; class { + declare state: { + pressed: number[] + }; onCreate() { this.state = { pressed: [], }; } - handleChange({ pressed }) { + handleChange({ pressed }: { pressed: number[] }) { this.state.pressed = pressed; } clearSelection() { diff --git a/src/components/ebay-toggle-button-group/toggle-button-group.stories.ts b/src/components/ebay-toggle-button-group/toggle-button-group.stories.ts index 083d8b34a..3d736542c 100644 --- a/src/components/ebay-toggle-button-group/toggle-button-group.stories.ts +++ b/src/components/ebay-toggle-button-group/toggle-button-group.stories.ts @@ -1,8 +1,8 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import { addRenderBodies, buildExtensionTemplate, -} from "../../../.storybook/utils"; +} from "../../common/storybook/utils"; import Readme from "./README.md"; import component from "./index.marko"; import withIconsTemplate from "./examples/icons.marko"; @@ -15,8 +15,10 @@ import externalLabelTemplate from "./examples/externalLabel.marko"; import externalLabelCode from "./examples/externalLabel.marko?raw"; import columnsTemplate from "./examples/columns.marko"; import columnsCode from "./examples/columns.marko?raw"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -116,7 +118,7 @@ Default.args = { { renderBody: "Button 4" }, { renderBody: "Button 5" }, { renderBody: "Button 6" }, - ], + ] as any, }; Default.parameters = { diff --git a/src/components/ebay-toggle-button/examples/with-image.marko b/src/components/ebay-toggle-button/examples/with-image.marko index 7dc33fcb8..f594785ff 100644 --- a/src/components/ebay-toggle-button/examples/with-image.marko +++ b/src/components/ebay-toggle-button/examples/with-image.marko @@ -1,3 +1,9 @@ +export interface Input { + src: string, + alt: string, + fillPlacement: string +} + $ const { src, alt, fillPlacement, ...buttonInput } = input Title diff --git a/src/components/ebay-toggle-button/toggle-button.stories.ts b/src/components/ebay-toggle-button/toggle-button.stories.ts index e7d854c02..cec9c6b28 100644 --- a/src/components/ebay-toggle-button/toggle-button.stories.ts +++ b/src/components/ebay-toggle-button/toggle-button.stories.ts @@ -1,5 +1,5 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; -import { addRenderBodies } from "../../../.storybook/utils"; +import { tagToString } from "../../common/storybook/storybook-code-source"; +import { addRenderBodies } from "../../common/storybook/utils"; import Readme from "./README.md"; import component from "./index.marko"; import WithIconTemplate from "./examples/with-icon.marko"; @@ -8,8 +8,10 @@ import WithImageTemplate from "./examples/with-image.marko"; import WithImageCode from "./examples/with-image.marko?raw"; import MultilineSubtitleTemplate from "./examples/multiline-subtitle.marko"; import MultilineSubtitleCode from "./examples/multiline-subtitle.marko?raw"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -108,7 +110,7 @@ export default { export const Default = Template.bind({}); Default.args = { - renderBody: "Title", + renderBody: "Title" as any, }; Default.parameters = { @@ -119,7 +121,7 @@ Default.parameters = { }, }; -export const WithIcon = (args) => ({ +export const WithIcon: Story = (args) => ({ input: args, component: WithIconTemplate, }); @@ -132,7 +134,7 @@ WithIcon.parameters = { }, }; -export const WithImage = (args) => ({ +export const WithImage: Story = (args) => ({ input: args, component: WithImageTemplate, }); @@ -140,7 +142,7 @@ WithImage.args = { layoutType: "gallery", src: "https://cloudfront.slrlounge.com/wp-content/uploads/2012/07/01-SLRLounge-Holding-Standing-Wrong.jpg", fillPlacement: "top", -}; +} as any; WithImage.parameters = { docs: { source: { @@ -149,7 +151,7 @@ WithImage.parameters = { }, }; -export const MultilineSubtitle = (args) => ({ +export const MultilineSubtitle: Story = (args) => ({ input: args, component: MultilineSubtitleTemplate, }); diff --git a/src/components/ebay-tooltip/examples/pointer-with-custom-location.marko b/src/components/ebay-tooltip/examples/pointer-with-custom-location.marko index a8d63e6b2..629ed5d38 100644 --- a/src/components/ebay-tooltip/examples/pointer-with-custom-location.marko +++ b/src/components/ebay-tooltip/examples/pointer-with-custom-location.marko @@ -1,4 +1,4 @@ - + <@host> View options diff --git a/src/components/ebay-tooltip/tooltip.stories.ts b/src/components/ebay-tooltip/tooltip.stories.ts index 1c3a824a7..b74293007 100644 --- a/src/components/ebay-tooltip/tooltip.stories.ts +++ b/src/components/ebay-tooltip/tooltip.stories.ts @@ -1,11 +1,13 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; -import { addRenderBodies } from "../../../.storybook/utils"; +import { tagToString } from "../../common/storybook/storybook-code-source"; +import { addRenderBodies } from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./index.marko"; import buttonComponent from "./examples/icon-button-host.marko"; import code from "./examples/icon-button-host.marko?raw"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -120,7 +122,7 @@ Standard.args = { content: { renderBody: `

Use Access Key 'S' to display settings.

`, }, -}; +} as any; Standard.parameters = { docs: { @@ -130,9 +132,9 @@ Standard.parameters = { }, }; -export const buttonHost = (args) => ({ +export const buttonHost: Story = (args, context) => ({ // eslint-disable-next-line new-cap - input: Template(args).input, + input: Template(args, context).input, component: buttonComponent, }); buttonHost.parameters = { controls: { exclude: /./ } }; diff --git a/src/components/ebay-tourtip/examples/withFooter.marko b/src/components/ebay-tourtip/examples/withFooter.marko index ff13145fc..156a732a2 100644 --- a/src/components/ebay-tourtip/examples/withFooter.marko +++ b/src/components/ebay-tourtip/examples/withFooter.marko @@ -1,5 +1,3 @@ -import type { Input as TourtipInput } from "" - <@host>

diff --git a/src/components/ebay-tourtip/tourtip.stories.ts b/src/components/ebay-tourtip/tourtip.stories.ts index c00e77c99..9e4d88fba 100644 --- a/src/components/ebay-tourtip/tourtip.stories.ts +++ b/src/components/ebay-tourtip/tourtip.stories.ts @@ -1,10 +1,12 @@ -import { addRenderBodies } from "../../../.storybook/utils"; +import { addRenderBodies } from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./index.marko"; import example1 from "./examples/default.marko?raw"; import withFooterCode from "./examples/withFooter.marko?raw"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: addRenderBodies(args), }); @@ -144,7 +146,7 @@ Standard.args = { renderBody: `

This new feature was added.

`, }, a11yCloseText: "close", -}; +} as any; Standard.parameters = { docs: { source: { @@ -175,7 +177,7 @@ withFooter.args = { renderBody: '', }, -}; +} as any; withFooter.parameters = { docs: { source: { diff --git a/src/components/ebay-tri-state-checkbox/tri-state-checkbox.stories.ts b/src/components/ebay-tri-state-checkbox/tri-state-checkbox.stories.ts index 2dfcc8724..688b384a7 100644 --- a/src/components/ebay-tri-state-checkbox/tri-state-checkbox.stories.ts +++ b/src/components/ebay-tri-state-checkbox/tri-state-checkbox.stories.ts @@ -1,4 +1,4 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; import Component from "./index.marko"; import mixedImplementationComponent from "./examples/mixed-implementation.marko"; @@ -6,15 +6,17 @@ import WithLabelTemplate from "./examples/with-label.marko"; import DisabledTemplate from "./examples/disabled-with-label.marko"; import WithLabelCode from "./examples/with-label.marko?raw"; import DisabledCode from "./examples/disabled-with-label.marko?raw"; +import { Story } from "@storybook/marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: { ...args, - renderBody: args.renderBody - ? (out) => { + renderBody: (args.renderBody + ? (out: any) => { out.html(args.renderBody); } - : null, + : null) as any, }, }); @@ -81,7 +83,7 @@ export default { }, }; -export const WithLabel = (args) => ({ +export const WithLabel: Story = (args) => ({ input: args, component: WithLabelTemplate, }); @@ -94,7 +96,7 @@ WithLabel.parameters = { }, }; -export const Disabled = (args) => ({ +export const Disabled: Story = (args) => ({ input: args, component: DisabledTemplate, }); @@ -107,7 +109,7 @@ Disabled.parameters = { }, }; -export const mixedImplementation = Template.bind({}); +export const mixedImplementation: any = Template.bind({}); mixedImplementation.component = mixedImplementationComponent; export const Isolated = Template.bind({}); diff --git a/src/components/ebay-video/video.stories.ts b/src/components/ebay-video/video.stories.ts index 6be834ed5..c9651b8e3 100644 --- a/src/components/ebay-video/video.stories.ts +++ b/src/components/ebay-video/video.stories.ts @@ -1,15 +1,17 @@ -import { tagToString } from "../../../.storybook/storybook-code-source"; +import { Story } from "@storybook/marko"; +import { tagToString } from "../../common/storybook/storybook-code-source"; import Readme from "./README.md"; import Component from "./index.marko"; +import type { Input } from "./component"; -const Template = (args) => ({ +const Template: Story = (args) => ({ input: { ...args, - renderBody: args.renderBody - ? (out) => { + renderBody: (args.renderBody + ? (out: any) => { out.html(args.renderBody); } - : null, + : null) as any, }, }); @@ -233,7 +235,7 @@ Standard.args = { src: "https://ir.ebaystatic.com/cr/v/c1/ebayui/video/v1/playlist.mpd", type: "dash", }, - ], + ] as any, }; Standard.parameters = { docs: { @@ -257,7 +259,7 @@ ios.args = { src: "https://ir.ebaystatic.com/cr/v/c1/ebayui/video/v1/playlist.mpd", type: "dash", }, - ], + ] as any, shakaConfig: { streaming: { lowLatencyMode: true, @@ -284,7 +286,7 @@ mp4.args = { { src: "https://ir.ebaystatic.com/cr/v/c1/ebayui/video/v1/video.mp4", }, - ], + ] as any, }; mp4.parameters = { docs: { diff --git a/tsconfig.json b/tsconfig.json index c40331797..14d14179c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,11 +1,6 @@ { "include": ["src", "src/**/*.json"], - "exclude": [ - "**/*.stories.ts", - "**/*.stories-ignore.ts", - "**/test/*", - "**/examples/*" - ], + "exclude": ["**/test/*"], "compilerOptions": { "allowSyntheticDefaultImports": true, "esModuleInterop": true, @@ -21,6 +16,7 @@ "skipLibCheck": true, "strict": true, "target": "ES2015", + "types": ["vite/client", "mdx"], "tsBuildInfoFile": "dist/tsconfig.tsbuildinfo" } } From a41ae2928ea9301a6bda8ca5dbce835519777b99 Mon Sep 17 00:00:00 2001 From: Goutham Ponnada Date: Fri, 8 Nov 2024 11:24:52 -0800 Subject: [PATCH 2/8] feat(carousel): respect reduced-motion during autoplay (#2319) --- .changeset/plenty-tips-perform.md | 5 +++++ src/common/dom/index.ts | 14 ++++++++++++++ src/components/ebay-carousel/README.md | 4 ++++ src/components/ebay-carousel/component.ts | 6 ++++++ .../ebay-progress-bar-expressive/component.ts | 5 +---- .../ebay-progress-bar-expressive/index.marko | 2 +- 6 files changed, 31 insertions(+), 5 deletions(-) create mode 100644 .changeset/plenty-tips-perform.md diff --git a/.changeset/plenty-tips-perform.md b/.changeset/plenty-tips-perform.md new file mode 100644 index 000000000..e3482bcad --- /dev/null +++ b/.changeset/plenty-tips-perform.md @@ -0,0 +1,5 @@ +--- +"@ebay/ebayui-core": minor +--- + +feat(carousel): respect reduced-motion during autoplay diff --git a/src/common/dom/index.ts b/src/common/dom/index.ts index 2e8b60709..a45ac11f0 100644 --- a/src/common/dom/index.ts +++ b/src/common/dom/index.ts @@ -14,3 +14,17 @@ export function getMaxWidth(el: HTMLElement) { el.style.width = width; return result; } + +/** + * Determines if the user has requested reduced motion in their system preferences. + * + * This function checks the `prefers-reduced-motion` media query to see if the user + * has indicated that they prefer reduced motion. This can be useful for improving + * accessibility by disabling animations or transitions for users who may be sensitive + * to motion. + * + * @returns {boolean} `true` if the user prefers reduced motion, `false` otherwise. + */ +export const useReducedMotion = + typeof window !== "undefined" && + window.matchMedia("(prefers-reduced-motion: reduce)").matches; diff --git a/src/components/ebay-carousel/README.md b/src/components/ebay-carousel/README.md index 1c7960a4e..063fb76c2 100644 --- a/src/components/ebay-carousel/README.md +++ b/src/components/ebay-carousel/README.md @@ -19,3 +19,7 @@ Descrete or Continuious carousel component. Can show items as a slide or various When scrolling items, focusable elements that are not visible in the carousel should not be tabbable by default. When the carousel scrolls, it then removes the tabindex to allow the item to be focusable. In order to preserve the tabindex on an item, pass `data-carousel-tabindex="-1"` attribute to a given focusable element in order to default to that tabindex instead of removing the tabindex when the item is visible. + +## Reduced motion + +The carousel doesnot autoplay by respecting the `prefers-reduced-motion` media query. Toggle your reduced motion settings to view autoplay example with the default behavior and reduced motion behavior. diff --git a/src/components/ebay-carousel/component.ts b/src/components/ebay-carousel/component.ts index 7a47c62ea..34073a561 100644 --- a/src/components/ebay-carousel/component.ts +++ b/src/components/ebay-carousel/component.ts @@ -6,6 +6,7 @@ import { processHtmlAttributes } from "../../common/html-attributes"; import { onScrollDebounced as onScroll } from "./utils/on-scroll-debounced"; import { scrollTransition } from "./utils/scroll-transition"; import type { WithNormalizedProps } from "../../global"; +import { useReducedMotion } from "../../common/dom"; type Direction = typeof LEFT | typeof RIGHT; // Used for carousel slide direction. @@ -517,6 +518,11 @@ class Carousel extends Marko.Component { }); this.skipScrolling = false; + // If user had reduced motion turned on in OS settings, pause autoplay. + if(useReducedMotion) { + this.state.paused = true; + } + if (isNativeScrolling(this.listEl)) { config.nativeScrolling = true; this.once( diff --git a/src/components/ebay-progress-bar-expressive/component.ts b/src/components/ebay-progress-bar-expressive/component.ts index 128a2dcaa..fa073c0ab 100644 --- a/src/components/ebay-progress-bar-expressive/component.ts +++ b/src/components/ebay-progress-bar-expressive/component.ts @@ -1,9 +1,6 @@ import { AttrString } from "marko/tags-html"; import type { WithNormalizedProps } from "../../global"; - -export const useReducedMotion = - typeof window !== "undefined" && - window.matchMedia("(prefers-reduced-motion: reduce)").matches; +import { useReducedMotion } from "../../common/dom"; export const messageDurationStandard = 1500; export const messageDurationReducedMotionMultiplier = 1.5; diff --git a/src/components/ebay-progress-bar-expressive/index.marko b/src/components/ebay-progress-bar-expressive/index.marko index 302533eb0..dfa68f7ea 100644 --- a/src/components/ebay-progress-bar-expressive/index.marko +++ b/src/components/ebay-progress-bar-expressive/index.marko @@ -1,5 +1,5 @@ import { processHtmlAttributes } from "../../common/html-attributes"; -import { useReducedMotion } from "./component"; +import { useReducedMotion } from "../../common/dom"; $ const { a11yText = "Loading...", class: inputClass, From 60ebb196d8dc0f1a2bf443d62c1dedab33987a61 Mon Sep 17 00:00:00 2001 From: UDAY556 <68552791+UDAY556@users.noreply.github.com> Date: Tue, 12 Nov 2024 16:38:50 -0800 Subject: [PATCH 3/8] fix: add locale for ebay-video controls/buttons (#2324) --- .changeset/great-ants-watch.md | 5 +++++ src/components/ebay-video/component.ts | 7 +++++++ 2 files changed, 12 insertions(+) create mode 100644 .changeset/great-ants-watch.md diff --git a/.changeset/great-ants-watch.md b/.changeset/great-ants-watch.md new file mode 100644 index 000000000..7073f5f5b --- /dev/null +++ b/.changeset/great-ants-watch.md @@ -0,0 +1,5 @@ +--- +"@ebay/ebayui-core": patch +--- + +Added localization for ebay-video component diff --git a/src/components/ebay-video/component.ts b/src/components/ebay-video/component.ts index 46138adaa..5ecb0011c 100644 --- a/src/components/ebay-video/component.ts +++ b/src/components/ebay-video/component.ts @@ -273,6 +273,13 @@ class Video extends Marko.Component { this.input.reportText || "", ); + if (document?.documentElement?.lang) { + this.ui + .getControls() + .getLocalization() + .changeLocale([document.documentElement.lang]); + } + // eslint-disable-next-line no-undef,new-cap shaka.ui.Controls.registerElement( "report", From 73ff807fa1d9989ece78b9c5482d40b4351e2f49 Mon Sep 17 00:00:00 2001 From: Goutham Ponnada Date: Mon, 18 Nov 2024 05:30:24 -0800 Subject: [PATCH 4/8] fix(combobox): added viewAllOptions control (#2320) --- .changeset/mighty-buckets-tan.md | 5 ++++ .../ebay-combobox/combobox.stories.ts | 5 ++++ src/components/ebay-combobox/component.ts | 18 ++++-------- .../ebay-combobox/test/test.browser.js | 28 +++++++++++++++++++ 4 files changed, 44 insertions(+), 12 deletions(-) create mode 100644 .changeset/mighty-buckets-tan.md diff --git a/.changeset/mighty-buckets-tan.md b/.changeset/mighty-buckets-tan.md new file mode 100644 index 000000000..a4f012e4b --- /dev/null +++ b/.changeset/mighty-buckets-tan.md @@ -0,0 +1,5 @@ +--- +"@ebay/ebayui-core": minor +--- + +fix(combobox): added viewAllOptions control diff --git a/src/components/ebay-combobox/combobox.stories.ts b/src/components/ebay-combobox/combobox.stories.ts index fc7f47982..43c45418e 100644 --- a/src/components/ebay-combobox/combobox.stories.ts +++ b/src/components/ebay-combobox/combobox.stories.ts @@ -55,6 +55,11 @@ export default { description: "default is `automatic`; available values are `automatic`, `manual`. If set to automatic will automatically fill in the input with the currently highlighted item when using the up/down keys.", }, + viewAllOptions: { + type: "boolean", + control: { type: "boolean" }, + description: "Filters listbox options based on user input", + }, "floating-label": { control: { type: "text" }, description: diff --git a/src/components/ebay-combobox/component.ts b/src/components/ebay-combobox/component.ts index 4ee2111dc..09bc6f131 100644 --- a/src/components/ebay-combobox/component.ts +++ b/src/components/ebay-combobox/component.ts @@ -27,6 +27,7 @@ interface ComboboxInput extends Omit, `on${string}`> { autocomplete?: "list" | "none"; "list-selection"?: "manual" | "automatic"; "floating-label"?: boolean; + "view-all-options"?: boolean; button?: Marko.Input<"button"> & Marko.AttrTag<{ htmlAttributes?: Record; renderBody?: Marko.Body; @@ -49,7 +50,6 @@ export interface Input extends WithNormalizedProps {} interface State { currentValue: Input["value"]; - viewAllOptions: boolean; } export default class Combobox extends Marko.Component { @@ -117,14 +117,7 @@ export default class Combobox extends Marko.Component { } handleExpand() { - if (this.state.viewAllOptions) { - this.setSelectedView(); - } else { - this.state.viewAllOptions = true; - this.once("update", () => { - this.setSelectedView(); - }); - } + this.setSelectedView(); this.emit("expand"); } @@ -179,7 +172,6 @@ export default class Combobox extends Marko.Component { // We force the expander open just in case. this.expand(); }); - this.state.viewAllOptions = false; this._emitComboboxEvent("input-change"); }); @@ -233,7 +225,6 @@ export default class Combobox extends Marko.Component { this.lastValue = input.value; this.state = { currentValue: this.lastValue, - viewAllOptions: (this.state && this.state.viewAllOptions) || true, }; if (this.expander) { this.expandedChange = input.expanded !== this.expanded; @@ -356,7 +347,10 @@ export default class Combobox extends Marko.Component { } _getVisibleOptions() { - if (this.autocomplete === "none" || this.state.viewAllOptions) { + if ( + this.autocomplete === "none" || + (this.input.viewAllOptions ?? true) + ) { return [...(this.input.options ?? [])]; } diff --git a/src/components/ebay-combobox/test/test.browser.js b/src/components/ebay-combobox/test/test.browser.js index d499cd97d..819394eba 100644 --- a/src/components/ebay-combobox/test/test.browser.js +++ b/src/components/ebay-combobox/test/test.browser.js @@ -239,6 +239,34 @@ describe("given the combobox with 3 items and 2 selected", () => { } }); +describe("given the combobox with 6 items and view all options false", () => { + beforeEach(async () => { + component = await render(Isolated, { + value: Isolated.args.options[2].text, + viewAllOptions: false, + }); + }); + + describe("when the input receives focus", () => { + beforeEach(async () => { + await fireEvent.focus(component.getByRole("combobox")); + }); + + it("then it should expand the combobox", () => { + expect(component.getByRole("combobox")).toHaveAttribute( + "aria-expanded", + "true", + ); + }); + + it("then should show filtered options with first one active", () => { + const options = component.getAllByRole("option"); + expect(options.length).to.equal(4); + expect(options[0]).toHaveClass("combobox__option--active"); + }); + }); +}); + describe("given the combobox with 3 items set to manual selection", () => { beforeEach(async () => { component = await render(Isolated, { From 9ebb7c92885b3beef4266639513297e8af74cdd0 Mon Sep 17 00:00:00 2001 From: Luke LaValva Date: Fri, 22 Nov 2024 10:28:27 -0800 Subject: [PATCH 5/8] feat(filter-menu): add search header --- .changeset/famous-peas-own.md | 5 + .../ebay-filter-menu-button/component.ts | 4 + .../examples/data.json | 974 ++++++++++++++++++ .../examples/with-search.marko | 48 + .../filter-menu-button.stories.ts | 47 +- .../ebay-filter-menu-button/index.marko | 9 +- .../test/__snapshots__/test.server.js.snap | 24 +- src/components/ebay-filter-menu/component.ts | 34 +- .../ebay-filter-menu/examples/data.json | 974 ++++++++++++++++++ .../examples/with-search.marko | 47 + .../ebay-filter-menu/filter-menu.stories.ts | 50 +- src/components/ebay-filter-menu/index.marko | 25 +- .../test/__snapshots__/test.server.js.snap | 30 +- 13 files changed, 2233 insertions(+), 38 deletions(-) create mode 100644 .changeset/famous-peas-own.md create mode 100644 src/components/ebay-filter-menu-button/examples/data.json create mode 100644 src/components/ebay-filter-menu-button/examples/with-search.marko create mode 100644 src/components/ebay-filter-menu/examples/data.json create mode 100644 src/components/ebay-filter-menu/examples/with-search.marko diff --git a/.changeset/famous-peas-own.md b/.changeset/famous-peas-own.md new file mode 100644 index 000000000..60e93e4da --- /dev/null +++ b/.changeset/famous-peas-own.md @@ -0,0 +1,5 @@ +--- +"@ebay/ebayui-core": minor +--- + +Search header for filter menu & filter menu button diff --git a/src/components/ebay-filter-menu-button/component.ts b/src/components/ebay-filter-menu-button/component.ts index cabc4713e..d318eed07 100644 --- a/src/components/ebay-filter-menu-button/component.ts +++ b/src/components/ebay-filter-menu-button/component.ts @@ -34,11 +34,15 @@ interface FilterMenuButtonInput "form-method"?: string; disabled?: boolean; "a11y-text"?: AttrString; + "search-header-value"?: string; + "search-header-placeholder-text"?: AttrString; + "a11y-search-header-clear-text"?: AttrString; "on-expand"?: () => void; "on-change"?: (event: FilterMenuButtonEvent) => void; "on-collapse"?: (event: FilterMenuButtonEvent) => void; "on-footer-click"?: (event: FilterMenuButtonEvent) => void; "on-form-submit"?: (event: FilterMenuButtonEvent) => void; + "on-search-change"?: (value: string) => void; } export interface Input extends WithNormalizedProps {} diff --git a/src/components/ebay-filter-menu-button/examples/data.json b/src/components/ebay-filter-menu-button/examples/data.json new file mode 100644 index 000000000..6de354b55 --- /dev/null +++ b/src/components/ebay-filter-menu-button/examples/data.json @@ -0,0 +1,974 @@ +[ + { + "name": "Afghanistan", + "code": "AF" + }, + { + "name": "ÅlandIslands", + "code": "AX" + }, + { + "name": "Albania", + "code": "AL" + }, + { + "name": "Algeria", + "code": "DZ" + }, + { + "name": "AmericanSamoa", + "code": "AS" + }, + { + "name": "AndorrA", + "code": "AD" + }, + { + "name": "Angola", + "code": "AO" + }, + { + "name": "Anguilla", + "code": "AI" + }, + { + "name": "Antarctica", + "code": "AQ" + }, + { + "name": "Antiguaand Barbuda", + "code": "AG" + }, + { + "name": "Argentina", + "code": "AR" + }, + { + "name": "Armenia", + "code": "AM" + }, + { + "name": "Aruba", + "code": "AW" + }, + { + "name": "Australia", + "code": "AU" + }, + { + "name": "Austria", + "code": "AT" + }, + { + "name": "Azerbaijan", + "code": "AZ" + }, + { + "name": "Bahamas", + "code": "BS" + }, + { + "name": "Bahrain", + "code": "BH" + }, + { + "name": "Bangladesh", + "code": "BD" + }, + { + "name": "Barbados", + "code": "BB" + }, + { + "name": "Belarus", + "code": "BY" + }, + { + "name": "Belgium", + "code": "BE" + }, + { + "name": "Belize", + "code": "BZ" + }, + { + "name": "Benin", + "code": "BJ" + }, + { + "name": "Bermuda", + "code": "BM" + }, + { + "name": "Bhutan", + "code": "BT" + }, + { + "name": "Bolivia", + "code": "BO" + }, + { + "name": "Bosniaand Herzegovina", + "code": "BA" + }, + { + "name": "Botswana", + "code": "BW" + }, + { + "name": "BouvetIsland", + "code": "BV" + }, + { + "name": "Brazil", + "code": "BR" + }, + { + "name": "BritishIndian Ocean Territory", + "code": "IO" + }, + { + "name": "BruneiDarussalam", + "code": "BN" + }, + { + "name": "Bulgaria", + "code": "BG" + }, + { + "name": "BurkinaFaso", + "code": "BF" + }, + { + "name": "Burundi", + "code": "BI" + }, + { + "name": "Cambodia", + "code": "KH" + }, + { + "name": "Cameroon", + "code": "CM" + }, + { + "name": "Canada", + "code": "CA" + }, + { + "name": "CapeVerde", + "code": "CV" + }, + { + "name": "CaymanIslands", + "code": "KY" + }, + { + "name": "CentralAfrican Republic", + "code": "CF" + }, + { + "name": "Chad", + "code": "TD" + }, + { + "name": "Chile", + "code": "CL" + }, + { + "name": "China", + "code": "CN" + }, + { + "name": "ChristmasIsland", + "code": "CX" + }, + { + "name": "Cocos(Keeling) Islands", + "code": "CC" + }, + { + "name": "Colombia", + "code": "CO" + }, + { + "name": "Comoros", + "code": "KM" + }, + { + "name": "Congo", + "code": "CG" + }, + { + "name": "Congo The Democratic Republic of the", + "code": "CD" + }, + { + "name": "CookIslands", + "code": "CK" + }, + { + "name": "CostaRica", + "code": "CR" + }, + { + "name": "CoteD'Ivoire", + "code": "CI" + }, + { + "name": "Croatia", + "code": "HR" + }, + { + "name": "Cuba", + "code": "CU" + }, + { + "name": "Cyprus", + "code": "CY" + }, + { + "name": "CzechRepublic", + "code": "CZ" + }, + { + "name": "Denmark", + "code": "DK" + }, + { + "name": "Djibouti", + "code": "DJ" + }, + { + "name": "Dominica", + "code": "DM" + }, + { + "name": "DominicanRepublic", + "code": "DO" + }, + { + "name": "Ecuador", + "code": "EC" + }, + { + "name": "Egypt", + "code": "EG" + }, + { + "name": "ElSalvador", + "code": "SV" + }, + { + "name": "EquatorialGuinea", + "code": "GQ" + }, + { + "name": "Eritrea", + "code": "ER" + }, + { + "name": "Estonia", + "code": "EE" + }, + { + "name": "Ethiopia", + "code": "ET" + }, + { + "name": "FalklandIslands (Malvinas)", + "code": "FK" + }, + { + "name": "FaroeIslands", + "code": "FO" + }, + { + "name": "Fiji", + "code": "FJ" + }, + { + "name": "Finland", + "code": "FI" + }, + { + "name": "France", + "code": "FR" + }, + { + "name": "FrenchGuiana", + "code": "GF" + }, + { + "name": "FrenchPolynesia", + "code": "PF" + }, + { + "name": "FrenchSouthern Territories", + "code": "TF" + }, + { + "name": "Gabon", + "code": "GA" + }, + { + "name": "Gambia", + "code": "GM" + }, + { + "name": "Georgia", + "code": "GE" + }, + { + "name": "Germany", + "code": "DE" + }, + { + "name": "Ghana", + "code": "GH" + }, + { + "name": "Gibraltar", + "code": "GI" + }, + { + "name": "Greece", + "code": "GR" + }, + { + "name": "Greenland", + "code": "GL" + }, + { + "name": "Grenada", + "code": "GD" + }, + { + "name": "Guadeloupe", + "code": "GP" + }, + { + "name": "Guam", + "code": "GU" + }, + { + "name": "Guatemala", + "code": "GT" + }, + { + "name": "Guernsey", + "code": "GG" + }, + { + "name": "Guinea", + "code": "GN" + }, + { + "name": "GuineaBissau", + "code": "GW" + }, + { + "name": "Guyana", + "code": "GY" + }, + { + "name": "Haiti", + "code": "HT" + }, + { + "name": "HeardIsland and Mcdonald Islands", + "code": "HM" + }, + { + "name": "HolySee (Vatican City State)", + "code": "VA" + }, + { + "name": "Honduras", + "code": "HN" + }, + { + "name": "HongKong", + "code": "HK" + }, + { + "name": "Hungary", + "code": "HU" + }, + { + "name": "Iceland", + "code": "IS" + }, + { + "name": "India", + "code": "IN" + }, + { + "name": "Indonesia", + "code": "ID" + }, + { + "name": "Iran Islamic Republic Of", + "code": "IR" + }, + { + "name": "Iraq", + "code": "IQ" + }, + { + "name": "Ireland", + "code": "IE" + }, + { + "name": "Isleof Man", + "code": "IM" + }, + { + "name": "Israel", + "code": "IL" + }, + { + "name": "Italy", + "code": "IT" + }, + { + "name": "Jamaica", + "code": "JM" + }, + { + "name": "Japan", + "code": "JP" + }, + { + "name": "Jersey", + "code": "JE" + }, + { + "name": "Jordan", + "code": "JO" + }, + { + "name": "Kazakhstan", + "code": "KZ" + }, + { + "name": "Kenya", + "code": "KE" + }, + { + "name": "Kiribati", + "code": "KI" + }, + { + "name": "Korea Democratic People'S Republic of", + "code": "KP" + }, + { + "name": "Korea Republic of", + "code": "KR" + }, + { + "name": "Kuwait", + "code": "KW" + }, + { + "name": "Kyrgyzstan", + "code": "KG" + }, + { + "name": "LaoPeopleS Democratic Republic", + "code": "LA" + }, + { + "name": "Latvia", + "code": "LV" + }, + { + "name": "Lebanon", + "code": "LB" + }, + { + "name": "Lesotho", + "code": "LS" + }, + { + "name": "Liberia", + "code": "LR" + }, + { + "name": "LibyanArab Jamahiriya", + "code": "LY" + }, + { + "name": "Liechtenstein", + "code": "LI" + }, + { + "name": "Lithuania", + "code": "LT" + }, + { + "name": "Luxembourg", + "code": "LU" + }, + { + "name": "Macao", + "code": "MO" + }, + { + "name": "Macedonia The Former Yugoslav Republic of", + "code": "MK" + }, + { + "name": "Madagascar", + "code": "MG" + }, + { + "name": "Malawi", + "code": "MW" + }, + { + "name": "Malaysia", + "code": "MY" + }, + { + "name": "Maldives", + "code": "MV" + }, + { + "name": "Mali", + "code": "ML" + }, + { + "name": "Malta", + "code": "MT" + }, + { + "name": "MarshallIslands", + "code": "MH" + }, + { + "name": "Martinique", + "code": "MQ" + }, + { + "name": "Mauritania", + "code": "MR" + }, + { + "name": "Mauritius", + "code": "MU" + }, + { + "name": "Mayotte", + "code": "YT" + }, + { + "name": "Mexico", + "code": "MX" + }, + { + "name": "Micronesia Federated States of", + "code": "FM" + }, + { + "name": "Moldova Republic of", + "code": "MD" + }, + { + "name": "Monaco", + "code": "MC" + }, + { + "name": "Mongolia", + "code": "MN" + }, + { + "name": "Montserrat", + "code": "MS" + }, + { + "name": "Morocco", + "code": "MA" + }, + { + "name": "Mozambique", + "code": "MZ" + }, + { + "name": "Myanmar", + "code": "MM" + }, + { + "name": "Namibia", + "code": "NA" + }, + { + "name": "Nauru", + "code": "NR" + }, + { + "name": "Nepal", + "code": "NP" + }, + { + "name": "Netherlands", + "code": "NL" + }, + { + "name": "NetherlandsAntilles", + "code": "AN" + }, + { + "name": "NewCaledonia", + "code": "NC" + }, + { + "name": "NewZealand", + "code": "NZ" + }, + { + "name": "Nicaragua", + "code": "NI" + }, + { + "name": "Niger", + "code": "NE" + }, + { + "name": "Nigeria", + "code": "NG" + }, + { + "name": "Niue", + "code": "NU" + }, + { + "name": "NorfolkIsland", + "code": "NF" + }, + { + "name": "NorthernMariana Islands", + "code": "MP" + }, + { + "name": "Norway", + "code": "NO" + }, + { + "name": "Oman", + "code": "OM" + }, + { + "name": "Pakistan", + "code": "PK" + }, + { + "name": "Palau", + "code": "PW" + }, + { + "name": "PalestinianTerritory Occupied", + "code": "PS" + }, + { + "name": "Panama", + "code": "PA" + }, + { + "name": "PapuaNew Guinea", + "code": "PG" + }, + { + "name": "Paraguay", + "code": "PY" + }, + { + "name": "Peru", + "code": "PE" + }, + { + "name": "Philippines", + "code": "PH" + }, + { + "name": "Pitcairn", + "code": "PN" + }, + { + "name": "Poland", + "code": "PL" + }, + { + "name": "Portugal", + "code": "PT" + }, + { + "name": "PuertoRico", + "code": "PR" + }, + { + "name": "Qatar", + "code": "QA" + }, + { + "name": "Reunion", + "code": "RE" + }, + { + "name": "Romania", + "code": "RO" + }, + { + "name": "RussianFederation", + "code": "RU" + }, + { + "name": "RWANDA", + "code": "RW" + }, + { + "name": "SaintHelena", + "code": "SH" + }, + { + "name": "SaintKitts and Nevis", + "code": "KN" + }, + { + "name": "SaintLucia", + "code": "LC" + }, + { + "name": "SaintPierre and Miquelon", + "code": "PM" + }, + { + "name": "SaintVincent and the Grenadines", + "code": "VC" + }, + { + "name": "Samoa", + "code": "WS" + }, + { + "name": "SanMarino", + "code": "SM" + }, + { + "name": "SaoTome and Principe", + "code": "ST" + }, + { + "name": "SaudiArabia", + "code": "SA" + }, + { + "name": "Senegal", + "code": "SN" + }, + { + "name": "Serbiaand Montenegro", + "code": "CS" + }, + { + "name": "Seychelles", + "code": "SC" + }, + { + "name": "SierraLeone", + "code": "SL" + }, + { + "name": "Singapore", + "code": "SG" + }, + { + "name": "Slovakia", + "code": "SK" + }, + { + "name": "Slovenia", + "code": "SI" + }, + { + "name": "SolomonIslands", + "code": "SB" + }, + { + "name": "Somalia", + "code": "SO" + }, + { + "name": "SouthAfrica", + "code": "ZA" + }, + { + "name": "SouthGeorgia and the South Sandwich Islands", + "code": "GS" + }, + { + "name": "Spain", + "code": "ES" + }, + { + "name": "SriLanka", + "code": "LK" + }, + { + "name": "Sudan", + "code": "SD" + }, + { + "name": "Suriname", + "code": "SR" + }, + { + "name": "Svalbardand Jan Mayen", + "code": "SJ" + }, + { + "name": "Swaziland", + "code": "SZ" + }, + { + "name": "Sweden", + "code": "SE" + }, + { + "name": "Switzerland", + "code": "CH" + }, + { + "name": "SyrianArab Republic", + "code": "SY" + }, + { + "name": "Taiwan Province of China", + "code": "TW" + }, + { + "name": "Tajikistan", + "code": "TJ" + }, + { + "name": "Tanzania United Republic of", + "code": "TZ" + }, + { + "name": "Thailand", + "code": "TH" + }, + { + "name": "TimorLeste", + "code": "TL" + }, + { + "name": "Togo", + "code": "TG" + }, + { + "name": "Tokelau", + "code": "TK" + }, + { + "name": "Tonga", + "code": "TO" + }, + { + "name": "Trinidadand Tobago", + "code": "TT" + }, + { + "name": "Tunisia", + "code": "TN" + }, + { + "name": "Turkey", + "code": "TR" + }, + { + "name": "Turkmenistan", + "code": "TM" + }, + { + "name": "Turksand Caicos Islands", + "code": "TC" + }, + { + "name": "Tuvalu", + "code": "TV" + }, + { + "name": "Uganda", + "code": "UG" + }, + { + "name": "Ukraine", + "code": "UA" + }, + { + "name": "UnitedArab Emirates", + "code": "AE" + }, + { + "name": "UnitedKingdom", + "code": "GB" + }, + { + "name": "United States", + "code": "US" + }, + { + "name": "United States Minor Outlying Islands", + "code": "UM" + }, + { + "name": "Uruguay", + "code": "UY" + }, + { + "name": "Uzbekistan", + "code": "UZ" + }, + { + "name": "Vanuatu", + "code": "VU" + }, + { + "name": "Venezuela", + "code": "VE" + }, + { + "name": "VietNam", + "code": "VN" + }, + { + "name": "VirginIslands British", + "code": "VG" + }, + { + "name": "VirginIslands U.S.", + "code": "VI" + }, + { + "name": "Wallisand Futuna", + "code": "WF" + }, + { + "name": "WesternSahara", + "code": "EH" + }, + { + "name": "Yemen", + "code": "YE" + }, + { + "name": "Zambia", + "code": "ZM" + }, + { + "name": "Zimbabwe", + "code": "ZW" + } +] diff --git a/src/components/ebay-filter-menu-button/examples/with-search.marko b/src/components/ebay-filter-menu-button/examples/with-search.marko new file mode 100644 index 000000000..68bdd9152 --- /dev/null +++ b/src/components/ebay-filter-menu-button/examples/with-search.marko @@ -0,0 +1,48 @@ +import countries from "./data.json"; +import type { Input as FilterMenuButtonInput } from ""; +class { + declare state: { + checkedCodes: { [code: string]: boolean }; + visibleCountries: typeof countries; + }; + + onCreate() { + this.state = { + checkedCodes: {}, + visibleCountries: countries, + }; + } + + handleSearchChange(value: string) { + const searchTerm = value.toLowerCase(); + this.state.visibleCountries = countries.filter(({ name }) => + name.toLowerCase().includes(searchTerm), + ); + } + + handleChange({ + index, + currentChecked, + }: Parameters>[0]) { + if (index === undefined) return; + this.state.checkedCodes = { + ...this.state.checkedCodes, + [this.state.visibleCountries[index].code]: !!currentChecked, + }; + } +} + + + + <@item value=code checked=state.checkedCodes[code]> + ${name} + + + diff --git a/src/components/ebay-filter-menu-button/filter-menu-button.stories.ts b/src/components/ebay-filter-menu-button/filter-menu-button.stories.ts index 0d5e8a5a5..a7eac7723 100644 --- a/src/components/ebay-filter-menu-button/filter-menu-button.stories.ts +++ b/src/components/ebay-filter-menu-button/filter-menu-button.stories.ts @@ -1,9 +1,14 @@ import { Story } from "@storybook/marko"; import { tagToString } from "../../common/storybook/storybook-code-source"; -import { addRenderBodies } from "../../common/storybook/utils"; +import { + addRenderBodies, + buildExtensionTemplate, +} from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./index.marko"; import type { Input } from "./component"; +import WithSearchTemplate from "./examples/with-search.marko"; +import WithSearchCode from "./examples/with-search.marko?raw"; const Template: Story = (args) => ({ input: addRenderBodies(args), @@ -63,6 +68,20 @@ export default { category: "@attribute tags", }, }, + searchHeaderValue: { + control: { type: "text" }, + description: + "optional value override for the input in the search header", + }, + searchHeaderPlaceholderText: { + control: { type: "text" }, + description: + "enables the search header and populates placeholder text. `a11y-search-header-clear-text` is required if this is enabled.", + }, + a11ySearchHeaderClearText: { + control: { type: "text" }, + description: "a11y text for the search header clear button", + }, formName: { control: { type: "text" }, description: "forms `name` attribute", @@ -92,6 +111,12 @@ export default { description: "the items value (returned in emitted events when checked)", }, + footer: { + name: "@footer", + table: { + category: "@attribute tags", + }, + }, onCollapse: { action: "on-collapse", description: "Triggered on menu collapse", @@ -122,7 +147,7 @@ export default { }, }, }, - footerClick: { + "onFooter-click": { action: "on-footer-click", description: "Triggered on footer clicked", table: { @@ -132,7 +157,7 @@ export default { }, }, }, - formSubmit: { + "onForm-submit": { action: "on-form-submit", description: 'when using `variant="form"`, and form is submitted (emits current checked state)', @@ -143,10 +168,14 @@ export default { }, }, }, - footer: { - name: "@footer", + "onSearch-change": { + action: "on-search-change", + description: "Triggered when the search input updates", table: { - category: "@attribute tags", + category: "Events", + defaultValue: { + summary: "{ checked, originalEvent }", + }, }, }, }, @@ -209,3 +238,9 @@ WithFooter.parameters = { }, }, }; + +export const WithSearch = buildExtensionTemplate( + WithSearchTemplate, + WithSearchCode, + {}, +); diff --git a/src/components/ebay-filter-menu-button/index.marko b/src/components/ebay-filter-menu-button/index.marko index 668f648cd..7527a1551 100644 --- a/src/components/ebay-filter-menu-button/index.marko +++ b/src/components/ebay-filter-menu-button/index.marko @@ -13,6 +13,9 @@ $ const { formAction, formMethod, items, + searchHeaderValue, + searchHeaderPlaceholderText, + a11ySearchHeaderClearText, type: inputType, ...htmlInput } = input; @@ -46,10 +49,14 @@ $ const { formMethod=formMethod footerText=footerText a11yFooterText=a11yFooterText + searchHeaderValue=searchHeaderValue + searchHeaderPlaceholderText=searchHeaderPlaceholderText + a11ySearchHeaderClearText=a11ySearchHeaderClearText on-keydown("handleMenuKeydown") on-change("handleMenuChange") on-form-submit("handleFormSubmit") - on-footer-click("handleFooterButtonClick")> + on-footer-click("handleFooterButtonClick") + on-search-change("emit", "search-change")> <@item ...item checked=component.isChecked(i)/> diff --git a/src/components/ebay-filter-menu-button/test/__snapshots__/test.server.js.snap b/src/components/ebay-filter-menu-button/test/__snapshots__/test.server.js.snap index c99fb3229..c91cb3ecd 100644 --- a/src/components/ebay-filter-menu-button/test/__snapshots__/test.server.js.snap +++ b/src/components/ebay-filter-menu-button/test/__snapshots__/test.server.js.snap @@ -49,9 +49,10 @@ exports[`filter-menu > passes through additional html attributes 1`] = ` - +  +" +`; + +exports[`ccd > renders ccd with custom a11y 1`] = ` +" +  +  +  +  +  +  +  +  +  +  +  +  +  +  +  +  +  +  +  +  +  + 
 + 1000 - 2000 + 
 + 
 + W + 
 +  +  +  +" +`; + +exports[`ccd > renders ccd with usbpd included 1`] = ` +" +  +  +  +  +  +  +  +  +  +  +  +  +  + 
 + 1000 - 2000 + 
 + 
 + W + 
 +  +  +  +" +`; + +exports[`ccd > renders default ccd 1`] = ` +" +  +  +  +  +  +  +  +  +  +  +  +  +  + 
 + 1000 - 2000 + 
 + 
 + W + 
 +  +  +  +" +`; diff --git a/src/components/ebay-ccd/test/test.server.js b/src/components/ebay-ccd/test/test.server.js new file mode 100644 index 000000000..26349e7be --- /dev/null +++ b/src/components/ebay-ccd/test/test.server.js @@ -0,0 +1,42 @@ +import { describe, it } from "vitest"; +import { testPassThroughAttributes } from "../../../common/test-utils/server"; +import { composeStories } from "@storybook/marko"; +import { snapshotHTML } from "../../../common/test-utils/snapshots"; +import * as stories from "../ccd.stories"; // import all stories from the stories file +const { Default } = composeStories(stories); +const htmlSnap = snapshotHTML(__dirname); + +describe("ccd", () => { + it("renders default ccd", async () => { + await htmlSnap(Default); + }); + + it("renders ccd with charger included", async () => { + await htmlSnap(Default, { chargerIcon: "included" }); + }); + + it("renders ccd with charger not included", async () => { + await htmlSnap(Default, { chargerIcon: "not-included" }); + }); + + it("renders ccd with usbpd included", async () => { + await htmlSnap(Default, { secondary: "usbpd" }); + }); + + it("renders ccd with charger included and usbpd", async () => { + await htmlSnap(Default, { + chargerIcon: "included", + secondary: "usbpd", + }); + }); + + it("renders ccd with custom a11y", async () => { + await htmlSnap(Default, { + chargerIcon: "included", + secondary: "usbpd", + a11yText: "custom text", + }); + }); + + testPassThroughAttributes(Default); +}); diff --git a/src/components/ebay-icon/icons/ebay-ccd-charger-included-icon/index.marko b/src/components/ebay-icon/icons/ebay-ccd-charger-included-icon/index.marko new file mode 100644 index 000000000..1a8be7381 --- /dev/null +++ b/src/components/ebay-icon/icons/ebay-ccd-charger-included-icon/index.marko @@ -0,0 +1,5 @@ +import { symbol } from "./symbol"; + +import type { Input as IconInput } from "../../component-browser" +export type Input = Omit; + diff --git a/src/components/ebay-icon/icons/ebay-ccd-charger-included-icon/marko-tag.json b/src/components/ebay-icon/icons/ebay-ccd-charger-included-icon/marko-tag.json new file mode 100644 index 000000000..0109d5328 --- /dev/null +++ b/src/components/ebay-icon/icons/ebay-ccd-charger-included-icon/marko-tag.json @@ -0,0 +1,16 @@ +{ + "template": "./index.marko", + "attribute-groups": ["html-attributes"], + "@*": { + "targetProperty": null, + "type": "expression" + }, + "@html-attributes": "expression", + "@a11y-text": "string", + "@a11y-variant": "string", + "@no-skin-classes": "boolean", + "@_def": "expression", + "@role": "never", + "@aria-labelledby": "never", + "description": "[view documentation](https://ebay.github.io/ebayui-core/?path=/story/graphics-icons-ebay-icon)" +} diff --git a/src/components/ebay-icon/icons/ebay-ccd-charger-included-icon/symbol.ts b/src/components/ebay-icon/icons/ebay-ccd-charger-included-icon/symbol.ts new file mode 100644 index 000000000..d04186e16 --- /dev/null +++ b/src/components/ebay-icon/icons/ebay-ccd-charger-included-icon/symbol.ts @@ -0,0 +1,4 @@ +export function symbol() { + // eslint-disable-next-line max-len,quotes + return ''; +} diff --git a/src/components/ebay-icon/icons/ebay-ccd-charger-not-included-icon/index.marko b/src/components/ebay-icon/icons/ebay-ccd-charger-not-included-icon/index.marko new file mode 100644 index 000000000..8abfdd7d8 --- /dev/null +++ b/src/components/ebay-icon/icons/ebay-ccd-charger-not-included-icon/index.marko @@ -0,0 +1,5 @@ +import { symbol } from "./symbol"; + +import type { Input as IconInput } from "../../component-browser" +export type Input = Omit; + diff --git a/src/components/ebay-icon/icons/ebay-ccd-charger-not-included-icon/marko-tag.json b/src/components/ebay-icon/icons/ebay-ccd-charger-not-included-icon/marko-tag.json new file mode 100644 index 000000000..0109d5328 --- /dev/null +++ b/src/components/ebay-icon/icons/ebay-ccd-charger-not-included-icon/marko-tag.json @@ -0,0 +1,16 @@ +{ + "template": "./index.marko", + "attribute-groups": ["html-attributes"], + "@*": { + "targetProperty": null, + "type": "expression" + }, + "@html-attributes": "expression", + "@a11y-text": "string", + "@a11y-variant": "string", + "@no-skin-classes": "boolean", + "@_def": "expression", + "@role": "never", + "@aria-labelledby": "never", + "description": "[view documentation](https://ebay.github.io/ebayui-core/?path=/story/graphics-icons-ebay-icon)" +} diff --git a/src/components/ebay-icon/icons/ebay-ccd-charger-not-included-icon/symbol.ts b/src/components/ebay-icon/icons/ebay-ccd-charger-not-included-icon/symbol.ts new file mode 100644 index 000000000..34856d965 --- /dev/null +++ b/src/components/ebay-icon/icons/ebay-ccd-charger-not-included-icon/symbol.ts @@ -0,0 +1,4 @@ +export function symbol() { + // eslint-disable-next-line max-len,quotes + return ''; +} diff --git a/src/components/ebay-icon/icons/ebay-ccd-top-icon/index.marko b/src/components/ebay-icon/icons/ebay-ccd-top-icon/index.marko new file mode 100644 index 000000000..9d2f4c3a3 --- /dev/null +++ b/src/components/ebay-icon/icons/ebay-ccd-top-icon/index.marko @@ -0,0 +1,5 @@ +import { symbol } from "./symbol"; + +import type { Input as IconInput } from "../../component-browser" +export type Input = Omit; + diff --git a/src/components/ebay-icon/icons/ebay-ccd-top-icon/marko-tag.json b/src/components/ebay-icon/icons/ebay-ccd-top-icon/marko-tag.json new file mode 100644 index 000000000..0109d5328 --- /dev/null +++ b/src/components/ebay-icon/icons/ebay-ccd-top-icon/marko-tag.json @@ -0,0 +1,16 @@ +{ + "template": "./index.marko", + "attribute-groups": ["html-attributes"], + "@*": { + "targetProperty": null, + "type": "expression" + }, + "@html-attributes": "expression", + "@a11y-text": "string", + "@a11y-variant": "string", + "@no-skin-classes": "boolean", + "@_def": "expression", + "@role": "never", + "@aria-labelledby": "never", + "description": "[view documentation](https://ebay.github.io/ebayui-core/?path=/story/graphics-icons-ebay-icon)" +} diff --git a/src/components/ebay-icon/icons/ebay-ccd-top-icon/symbol.ts b/src/components/ebay-icon/icons/ebay-ccd-top-icon/symbol.ts new file mode 100644 index 000000000..a30edee99 --- /dev/null +++ b/src/components/ebay-icon/icons/ebay-ccd-top-icon/symbol.ts @@ -0,0 +1,4 @@ +export function symbol() { + // eslint-disable-next-line max-len,quotes + return ''; +} From baade147a795ea23827b8b3cfc9ab9c784cc6fbc Mon Sep 17 00:00:00 2001 From: LuLaValva Date: Mon, 25 Nov 2024 14:15:28 -0800 Subject: [PATCH 7/8] fix(date-textbox): recalculate num months on open --- src/components/ebay-date-textbox/component.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/ebay-date-textbox/component.ts b/src/components/ebay-date-textbox/component.ts index 11a87c633..e5c1ac002 100644 --- a/src/components/ebay-date-textbox/component.ts +++ b/src/components/ebay-date-textbox/component.ts @@ -64,10 +64,6 @@ class DateTextbox extends Marko.Component { secondSelected: null, popover: false, }; - - if (typeof document !== "undefined") { - this.calculateNumMonths(); - } } onMount() { @@ -119,6 +115,7 @@ class DateTextbox extends Marko.Component { } openPopover() { + this.calculateNumMonths(); this.state.popover = true; } From 8c49f256ae5ad4f8a0696231a2b572e9424b069a Mon Sep 17 00:00:00 2001 From: Arthur Khachatryan Date: Mon, 25 Nov 2024 19:25:32 -0800 Subject: [PATCH 8/8] chore(deps): upgraded Skin to new release --- package-lock.json | 11 ++++++----- package.json | 2 +- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 32aa45329..ad0effc95 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,7 +37,7 @@ "@commitlint/cli": "^19", "@commitlint/config-conventional": "^19", "@ebay/browserslist-config": "^2.10.0", - "@ebay/skin": "~18.4.0", + "@ebay/skin": "~18.5.0", "@google/model-viewer": "3.5.0", "@marko/compiler": "^5.37.23", "@marko/prettyprint": "^3.0.1", @@ -2691,10 +2691,11 @@ "license": "MIT" }, "node_modules/@ebay/skin": { - "version": "18.4.0", - "resolved": "https://registry.npmjs.org/@ebay/skin/-/skin-18.4.0.tgz", - "integrity": "sha512-zqrc/eSc0kCe/EitMA8OwkKs4/GKGRtumkm98EcOeOd+4t6eltujagzZuqoujUldkurjFg4isZIncJEV/Lqdow==", - "dev": true + "version": "18.5.0", + "resolved": "https://registry.npmjs.org/@ebay/skin/-/skin-18.5.0.tgz", + "integrity": "sha512-j7nYSZTMLoX28rwxMTd66jKQJW2XfGjo01Uo5RPow6SDZht7f9mwyF/Op8Y9G0VKmcnoRDXxAKX81nqBZNWBhg==", + "dev": true, + "license": "MIT" }, "node_modules/@esbuild/aix-ppc64": { "version": "0.23.1", diff --git a/package.json b/package.json index b5168de74..a1695efbd 100644 --- a/package.json +++ b/package.json @@ -78,7 +78,7 @@ "@commitlint/cli": "^19", "@commitlint/config-conventional": "^19", "@ebay/browserslist-config": "^2.10.0", - "@ebay/skin": "~18.4.0", + "@ebay/skin": "~18.5.0", "@google/model-viewer": "3.5.0", "@marko/compiler": "^5.37.23", "@marko/prettyprint": "^3.0.1",