chore: updated dev deps and skin

eBay · Apr 23, 2024 · 275bdac · 275bdac
1 parent 7cc0cf6
commit 275bdac
Show file tree

Hide file tree

Showing 63 changed files with 3,558 additions and 2,907 deletions.
diff --git a/.changeset/blue-files-decide.md b/.changeset/blue-files-decide.md
@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": minor
+---
+
+phone-input: new component
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/browserstack.err b/browserstack.err
@@ -0,0 +1 @@
+[object Object]
diff --git a/marko-cli.js b/marko-cli.js
@@ -38,6 +38,14 @@ module.exports = ({ config }) => {
     config.wdioOptions = {
         idleTimeout: 60000,
         timeout: 60000,
+        services: [
+            [
+                "browserstack",
+                {
+                    browserstackLocal: true,
+                },
+            ],
+        ],
         capabilities: [
             {
                 browser: "Chrome",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -75,29 +75,28 @@
         "@commitlint/cli": "^19",
         "@commitlint/config-conventional": "^19",
         "@ebay/browserslist-config": "^2.8.0",
-        "@ebay/skin": "~17.3.0",
-        "@google/model-viewer": "3.4.0",
+        "@ebay/skin": "~17.4.0-next.0",
+        "@google/model-viewer": "3.5.0",
         "@lasso/marko-taglib": "^2.0.6",
-        "@marko/compiler": "^5.35.11",
+        "@marko/compiler": "^5.36.1",
         "@marko/migrate": "^6.0.2",
         "@marko/prettyprint": "^3.0.1",
         "@marko/test": "^10",
         "@marko/testing-library": "^6",
         "@marko/type-check": "^1.1.7",
-        "@marko/vite": "^4.1.3",
+        "@marko/vite": "^4.1.10",
         "@sinonjs/fake-timers": "^11.2.2",
-        "@storybook/addon-a11y": "^8.0.5",
-        "@storybook/addon-docs": "^8.0.5",
-        "@storybook/addon-essentials": "^8.0.5",
-        "@storybook/addon-links": "^8.0.5",
-        "@storybook/addon-storysource": "^8.0.5",
-        "@storybook/builder-webpack5": "^8.0.5",
+        "@storybook/addon-a11y": "^8.0.9",
+        "@storybook/addon-docs": "^8.0.9",
+        "@storybook/addon-essentials": "^8.0.9",
+        "@storybook/addon-links": "^8.0.9",
+        "@storybook/addon-storysource": "^8.0.9",
+        "@storybook/builder-webpack5": "^8.0.9",
         "@storybook/manager-webpack5": "^6.5.16",
         "@storybook/marko": "~9.0.1",
         "@storybook/marko-vite": "^2.0.1",
         "@storybook/mdx2-csf": "^1.1.0",
         "@wdio/browserstack-service": "^7.30.2",
-        "async": "^3.2.5",
         "babel-loader": "^9.1.3",
         "babel-plugin-add-module-exports": "^1.0.4",
         "chai": "4.3.10",
@@ -113,21 +112,21 @@
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-compat": "^4",
         "eslint-plugin-import": "^2.29.1",
-        "eslint-plugin-mocha": "^10.4.1",
+        "eslint-plugin-mocha": "^10.4.3",
         "highcharts": "^10.3.3",
         "html-minifier": "^4.0.0",
         "husky": "^9.0.11",
         "is-travis": "^3.0.0",
-        "lasso": "^4.0.3",
+        "lasso": "^4.0.4",
         "lasso-babel-transform": "^3.1.1",
         "lasso-less": "^4.0.2",
         "lasso-marko": "^4.0.0",
         "less": "^4.2.0",
         "less-loader": "^12",
-        "libphonenumber-js": "^1.10.58",
+        "libphonenumber-js": "^1.10.61",
         "lint-staged": "^15.2.2",
         "lintspaces-cli": "^0.8.0",
-        "marko": "^5.33.14",
+        "marko": "^5.34.2",
         "mocha": "^10",
         "mocha-snap": "^5.0.0",
         "nyc": "^15.1.0",
@@ -136,17 +135,17 @@
         "prettier": "^3.2.5",
         "raw-loader": "^4.0.2",
         "rimraf": "^5.0.5",
-        "shaka-player": "4.7.11",
+        "shaka-player": "4.7.13",
         "sinon": "^17.0.1",
-        "storybook": "^8.0.5",
-        "style-loader": "^3",
+        "storybook": "^8.0.9",
+        "style-loader": "^4",
         "stylelint": "^16.3.1",
         "stylelint-config-standard": "^36",
         "stylelint-prettier": "^5",
         "wdio-chromedriver-service": "^8"
     },
     "peerDependencies": {
-        "@ebay/skin": "~17.3.0",
+        "@ebay/skin": "~17.4.0-next.0",
         "marko": ">= ^4.27.0 || >= ^5.31.12"
     },
     "dependencies": {

diff --git a/scripts/import-svg.js b/scripts/import-svg.js
@@ -18,6 +18,8 @@ import {
 } from "libphonenumber-js/max";
 import examples from "libphonenumber-js/mobile/examples";
 import markoTagJson from "../src/components/ebay-icon/marko-tag.json" assert { type: "json" };
+// const tempIgnore = ["RS", "PE", "SV", "BO", "DO", "EA"];
+const tempIgnore = [];
 
 const require = createRequire(import.meta.url);
 
@@ -242,7 +244,7 @@ $ const {
         const countryMap = twoDititCountries.find(
             (country) => country === name.slice(5).toUpperCase(),
         );
-        if (countryMap) {
+        if (countryMap && tempIgnore.indexOf(countryMap) === -1) {
             text.push(`<else-if(flag === "${countryMap}")>
     <ebay-${name} />
 </else-if>

diff --git a/src/common/mask/index.ts b/src/common/mask/index.ts
@@ -1,4 +1,4 @@
-export default function (input:HTMLInputElement, initialMask:string) {
+export default function (input: HTMLInputElement, initialMask: string) {
     let mask = initialMask;
     const onBeforeInput = () => {
         const { start, end } = getDigitRelativeSelection(input);
@@ -12,7 +12,7 @@ export default function (input:HTMLInputElement, initialMask:string) {
     input.addEventListener("input", onInput);
 
     return {
-        update(newValue:string, newMask:string) {
+        update(newValue: string, newMask: string) {
             mask = newMask;
             updateInputValue(input, mask, newValue);
         },
@@ -21,12 +21,16 @@ export default function (input:HTMLInputElement, initialMask:string) {
             input.removeEventListener("input", onInput);
         },
         get value() {
-            return input.value
-        }
+            return input.value;
+        },
     };
 }
 
-function updateInputValue(input:HTMLInputElement, mask:string, newValue:string) {
+function updateInputValue(
+    input: HTMLInputElement,
+    mask: string,
+    newValue: string,
+) {
     const { start, end } = getDigitRelativeSelection(input);
     const maskedValue = applyMask(newValue, mask);
     const maskLength = maskedValue.length;
@@ -48,7 +52,7 @@ function updateInputValue(input:HTMLInputElement, mask:string, newValue:string)
     input.setSelectionRange(maskedStart ?? maskLength, maskedEnd ?? maskLength);
 }
 
-function getDigitRelativeSelection(target:HTMLInputElement) {
+function getDigitRelativeSelection(target: HTMLInputElement) {
     const rawSelectionStart = target.selectionStart || 0;
     const rawSelectionEnd = target.selectionEnd || 0;
     const value = target.value;
@@ -68,11 +72,11 @@ function getDigitRelativeSelection(target:HTMLInputElement) {
     };
 }
 
-export function stripNonDigits(value:string) {
+export function stripNonDigits(value: string) {
     return value.replace(/\D+/g, "");
 }
 
-function applyMask(value:string, mask:string) {
+function applyMask(value: string, mask: string) {
     const digits = stripNonDigits(value);
     let maskedValue = "";
     let currentDigit = 0;

diff --git a/src/components/ebay-alert-dialog/alert-dialog.stories.ts b/src/components/ebay-alert-dialog/alert-dialog.stories.ts
@@ -78,8 +78,8 @@ export default {
     },
 };
 
-export const Standard = Template.bind({});
-Standard.args = {
+export const Default = Template.bind({});
+Default.args = {
     header: {
         renderBody: `Alert!`,
     },
@@ -88,7 +88,7 @@ Standard.args = {
     },
     renderBody: `You must acknowledge this alert to continue.`,
 };
-Standard.parameters = {
+Default.parameters = {
     docs: {
         source: {
             code,

diff --git a/src/components/ebay-alert-dialog/examples/default.marko b/src/components/ebay-alert-dialog/examples/default.marko
@@ -13,6 +13,7 @@ export interface Input {
     on-open('emit', 'open')
     on-close('emit', 'close')
     on-confirm('closeDialog')
+    ...input
 >
     <@header><${input.header.renderBody}/></@header>
     <@confirm><${input.confirm.renderBody}/></@confirm>

diff --git a/src/components/ebay-alert-dialog/test/test.browser.js b/src/components/ebay-alert-dialog/test/test.browser.js
@@ -1,9 +1,11 @@
 import { expect, use } from "chai";
 import chaiDom from "chai-dom";
 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 template from "..";
-import * as mock from "./mock";
+import * as stories from "../alert-dialog.stories"; // import all stories from the stories file
+const { Default } = composeStories(stories);
 
 use(chaiDom);
 before(fastAnimations.start);
@@ -14,10 +16,8 @@ afterEach(cleanup);
 let component;
 
 describe("given a closed dialog", () => {
-    const input = mock.Dialog;
-
     beforeEach(async () => {
-        component = await render(template, input);
+        component = await render(Default);
     });
 
     it("then it is hidden in the DOM", () => {
@@ -28,7 +28,11 @@ describe("given a closed dialog", () => {
 
     describe("then it is opened", () => {
         beforeEach(async () => {
-            await component.rerender(Object.assign({}, input, { open: true }));
+            await component.rerender(
+                Object.assign({}, addRenderBodies(Default.args), {
+                    open: true,
+                }),
+            );
         });
 
         it("then it is visible in the DOM", async () => {
@@ -40,13 +44,12 @@ describe("given a closed dialog", () => {
 });
 
 describe("given an open dialog", () => {
-    const input = mock.dialogOpen;
     let sibling;
 
     beforeEach(async () => {
         sibling = document.body.appendChild(document.createElement("button"));
         sibling.focus();
-        component = await render(template, input);
+        component = await render(Default, { open: true });
     });
 
     afterEach(() => {

diff --git a/src/components/ebay-alert-dialog/test/test.server.js b/src/components/ebay-alert-dialog/test/test.server.js
@@ -1,7 +1,7 @@
 import { expect, use } from "chai";
 import { render } from "@marko/testing-library";
 import { testPassThroughAttributes } from "../../../common/test-utils/server";
-import template from "..";
+import template from "../index.marko";
 import * as mock from "./mock";
 
 use(require("chai-dom"));

diff --git a/src/components/ebay-calendar/date-utils.ts b/src/components/ebay-calendar/date-utils.ts
@@ -51,6 +51,7 @@ export function offsetISO(iso: DayISO, days: number) {
 }
 
 export function localeOverride(locale?: string) {
-    const defaultLanguage = (typeof navigator !== "undefined") ? navigator.language : 'en-US';
+    const defaultLanguage =
+        typeof navigator !== "undefined" ? navigator.language : "en-US";
     return locale || defaultLanguage;
 }
diff --git a/...p/test/__snapshots__/renders-interactive-close-button-when-label-is-provided.expected.txt b/...p/test/__snapshots__/renders-interactive-close-button-when-label-is-provided.expected.txt
@@ -12,6 +12,7 @@
       [33maria-describedby[39m=[32m"s0-text"[39m
       [33maria-label[39m=[32m"Delete"[39m
       [33mclass[39m=[32m"chip__button"[39m
+      [33mdata-marko[39m=[32m"{\"onclick\":\"emit s0 false 0\"}"[39m
       [33mtype[39m=[32m"button"[39m
     [36m>[39m
       [36m<svg[39m

diff --git a/src/components/ebay-details/test/__snapshots__/renders-as-div-version.expected.txt b/src/components/ebay-details/test/__snapshots__/renders-as-div-version.expected.txt
@@ -42,7 +42,9 @@
         [36m</svg>[39m
       [36m</span>[39m
     [36m</summary>[39m
-    [36m<div>[39m
+    [36m<div[39m
+      [33mdata-marko-key[39m=[32m"4 s0"[39m
+    [36m>[39m
       [0mbody content[0m
     [36m</div>[39m
   [36m</details>[39m

diff --git a/src/components/ebay-details/test/__snapshots__/renders-basic-version.expected.txt b/src/components/ebay-details/test/__snapshots__/renders-basic-version.expected.txt
@@ -42,7 +42,9 @@
         [36m</svg>[39m
       [36m</span>[39m
     [36m</summary>[39m
-    [36m<div>[39m
+    [36m<div[39m
+      [33mdata-marko-key[39m=[32m"4 s0"[39m
+    [36m>[39m
       [0mbody content[0m
     [36m</div>[39m
   [36m</details>[39m

diff --git a/src/components/ebay-details/test/__snapshots__/renders-center-version.expected.txt b/src/components/ebay-details/test/__snapshots__/renders-center-version.expected.txt
@@ -42,7 +42,9 @@
         [36m</svg>[39m
       [36m</span>[39m
     [36m</summary>[39m
-    [36m<div>[39m
+    [36m<div[39m
+      [33mdata-marko-key[39m=[32m"4 s0"[39m
+    [36m>[39m
       [0mbody content[0m
     [36m</div>[39m
   [36m</details>[39m

diff --git a/src/components/ebay-details/test/__snapshots__/renders-in-open-state.expected.txt b/src/components/ebay-details/test/__snapshots__/renders-in-open-state.expected.txt
@@ -42,7 +42,9 @@
         [36m</svg>[39m
       [36m</span>[39m
     [36m</summary>[39m
-    [36m<div>[39m
+    [36m<div[39m
+      [33mdata-marko-key[39m=[32m"4 s0"[39m
+    [36m>[39m
       [0mbody content[0m
     [36m</div>[39m
   [36m</details>[39m

diff --git a/src/components/ebay-details/test/__snapshots__/renders-small-version.expected.txt b/src/components/ebay-details/test/__snapshots__/renders-small-version.expected.txt
@@ -42,7 +42,9 @@
         [36m</svg>[39m
       [36m</span>[39m
     [36m</summary>[39m
-    [36m<div>[39m
+    [36m<div[39m
+      [33mdata-marko-key[39m=[32m"4 s0"[39m
+    [36m>[39m
       [0mbody content[0m
     [36m</div>[39m
   [36m</details>[39m

diff --git a/src/components/ebay-fullscreen-dialog/fullsceen-dialog.stories.ts b/src/components/ebay-fullscreen-dialog/fullsceen-dialog.stories.ts
@@ -88,19 +88,20 @@ export default {
     },
 };
 
-export const Standard = Template.bind({});
-Standard.args = {
+export const Default = Template.bind({});
+Default.args = {
     header: {
         renderBody: `Heading Text`,
     },
+    a11yCloseText: "Close Button",
     renderBody: `Body Content`,
     footer: {
         renderBody: `Footer Text`,
     },
     slideFrom: null,
 };
 
-Standard.parameters = {
+Default.parameters = {
     docs: {
         source: {
             code,

diff --git a/src/components/ebay-fullscreen-dialog/test/__snapshots__/renders-defaults.expected.txt b/src/components/ebay-fullscreen-dialog/test/__snapshots__/renders-defaults.expected.txt
@@ -19,7 +19,7 @@
           [0mHeading Text[0m
         [36m</h2>[39m
         [36m<button[39m
-          [33maria-label[39m=[32m"Close Dialog"[39m
+          [33maria-label[39m=[32m"Close Button"[39m
           [33mclass[39m=[32m"icon-btn fullscreen-dialog__close"[39m
           [33mtype[39m=[32m"button"[39m
         [36m>[39m

diff --git a/src/components/ebay-fullscreen-dialog/test/__snapshots__/renders-open.expected.txt b/src/components/ebay-fullscreen-dialog/test/__snapshots__/renders-open.expected.txt
@@ -18,7 +18,7 @@
           [0mHeading Text[0m
         [36m</h2>[39m
         [36m<button[39m
-          [33maria-label[39m=[32m"Close Dialog"[39m
+          [33maria-label[39m=[32m"Close Button"[39m
           [33mclass[39m=[32m"icon-btn fullscreen-dialog__close"[39m
           [33mtype[39m=[32m"button"[39m
         [36m>[39m