@ebay/skin 16.6.0 → 16.7.0-0

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "16.6.0",
+    "version": "16.7.0-0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -75,8 +75,8 @@
         "cross-env": "^7",
         "eslint": "^8.40.0",
         "eslint-config-ebay": "^1",
-        "eslint-config-prettier": "^8",
-        "eslint-plugin-prettier": "^4",
+        "eslint-config-prettier": "^9",
+        "eslint-plugin-prettier": "^5",
         "gulp": "^4",
         "gulp-banner": "~0.1.3",
         "gulp-clean-css": "^4",
@@ -88,7 +88,7 @@
         "less-loader": "^11.1.0",
         "less-plugin-autoprefix": "^2",
         "less-plugin-clean-css": "^1.5.1",
-        "lint-staged": "^13.2.2",
+        "lint-staged": "^14.0.1",
         "makeup-alert-dialog": "~0.2.0",
         "makeup-combobox": "~0.3.0",
         "makeup-confirm-dialog": "~0.2.0",
@@ -117,14 +117,14 @@
         "npm-run-all": "^4",
         "postcss-less": "^6.0.0",
         "postcss-loader": "^7.3.0",
-        "prettier": "^2.8.8",
+        "prettier": "^3.0.2",
         "rimraf": "^5",
-        "storybook": "^7.0.12",
+        "storybook": "~7.1.1",
         "stylelint": "^15.6.2",
-        "stylelint-config-standard": "^33",
-        "stylelint-no-unsupported-browser-features": "^6.0.1",
+        "stylelint-config-standard": "^34",
+        "stylelint-no-unsupported-browser-features": "^7",
         "stylelint-order": "^6",
-        "stylelint-prettier": "^3",
+        "stylelint-prettier": "^4",
         "svgo": "^3.0.1",
         "webpack": "^5.83.0",
         "webpack-cli": "^5.1.1",

package/scripts/generate-bundle.js

@@ -52,7 +52,7 @@ class CssProcesser {
         return this.generateLESS()
             .then((raw) => this.compileLess(raw))
             .then((raw) =>
-                this.minify ? cleanCSSInstance.minify(raw) : { styles: raw }
+                this.minify ? cleanCSSInstance.minify(raw) : { styles: raw },
             )
             .then((raw) => this.writeAllFiles(raw.styles))
             .catch((e) => console.error(e));
@@ -144,21 +144,21 @@ class CssProcesser {
 
             if (this.args.modules.length > 0 || this.args.verbose) {
                 console.log(
-                    `Processed ${processed.length} modules for ${tokensFile}`
+                    `Processed ${processed.length} modules for ${tokensFile}`,
                 );
             }
             if (this.args.verbose) {
                 console.log(
                     `Modules processed: ${processed.join(
-                        ","
-                    )} for ${tokensFile}`
+                        ",",
+                    )} for ${tokensFile}`,
                 );
 
                 console.log(
-                    `Skipped ${skipped.length} modules for ${tokensFile}`
+                    `Skipped ${skipped.length} modules for ${tokensFile}`,
                 );
                 console.log(
-                    `Modules skipped: ${skipped.join(",")} for ${tokensFile}`
+                    `Modules skipped: ${skipped.join(",")} for ${tokensFile}`,
                 );
             }
             resolve(compiled);
@@ -167,7 +167,7 @@ class CssProcesser {
 
     generateLESS() {
         return this.getDistCss(this.tokensFile).then((files) =>
-            this.processFiles(files)
+            this.processFiles(files),
         );
     }
 
@@ -183,8 +183,8 @@ class CssProcesser {
                 `${cdnPath}/skin-${this.tokensDir}.${
                     this.minify ? "min." : ""
                 }css`,
-                `/* autoprefixer: off */\n${raw}\n/* autoprefixer: on */`
-            )
+                `/* autoprefixer: off */\n${raw}\n/* autoprefixer: on */`,
+            ),
         );
     }
 }
@@ -249,11 +249,11 @@ function runCSSBuild(name, args) {
                     const cssProcesser = new CssProcesser(
                         token,
                         tokensDirList[index],
-                        args
+                        args,
                     );
                     return cssProcesser.run();
-                })
-            )
+                }),
+            ),
         )
         .then(() => {
             console.log(`Bundles created successfully!
@@ -267,8 +267,12 @@ Please upload the ./_cdn/${args.name}/v${pkg.version} directory to CDN
 
 async function listBundles(argv) {
     await prebuild();
-    tokensList.forEach((tokensFile) => {
-        const cssProcesser = new CssProcesser(tokensFile, argv);
+    tokensList.forEach((tokensFile, index) => {
+        const cssProcesser = new CssProcesser(
+            tokensFile,
+            tokensDirList[index],
+            argv,
+        );
         cssProcesser.getDistCss().then((files) => {
             console.log(`======================`);
             console.log(`${tokensFile} - modules avaiable`);

package/scripts/generate-images.js

@@ -22,7 +22,7 @@ async function getFiles(dir) {
         dirents.map((dirent) => {
             const res = path.resolve(dir, dirent.name);
             return dirent.isDirectory() ? getFiles(res) : res;
-        })
+        }),
     );
     return Array.prototype.concat(...files);
 }
@@ -53,30 +53,29 @@ async function prefixIcon(fileDir, fileBase) {
                 " > " +
                 config.icons.prefix +
                 "-" +
-                fileBase
+                fileBase,
         );
     });
 }
 
 async function normalizeFiles(svgs) {
     const svgFiles = svgs.filter(
-        (f) => f.endsWith(".svg") && f !== "icons.svg"
+        (f) => f.endsWith(".svg") && f !== "icons.svg",
     );
 
-    svgFiles.map(async (filePath) => {
+    await svgFiles.map(async (filePath) => {
         const fileDir = path.parse(filePath).dir;
         const fileBase = path.parse(filePath).base;
         const data = await fs.promises.readFile(filePath, "utf8");
         const svgJsDom = new JSDOM(data, { contentType: "text/xml" });
         const querySelector = svgJsDom.window.document.querySelector("svg");
-        if (
-            querySelector.hasAttribute("height") ||
-            querySelector.hasAttribute("width")
-        ) {
+
+        querySelector.hasAttribute("height") &&
             querySelector.removeAttribute("height");
+        querySelector.hasAttribute("width") &&
             querySelector.removeAttribute("width");
-            await fs.promises.writeFile(filePath, html2xhtml(svgJsDom, true));
-        }
+
+        await fs.promises.writeFile(filePath, await html2xhtml(svgJsDom, true));
 
         if (
             !fileBase.startsWith("icon-") &&
@@ -104,7 +103,7 @@ class GenerateImages {
     constructor(files, masterIconFile) {
         this.imageList = [];
         this.svgs = files.filter(
-            (f) => f.endsWith(".svg") && f !== "icons.svg"
+            (f) => f.endsWith(".svg") && f !== "icons.svg",
         );
         this.masterIconSymbols = new JSDOM(masterIconFile);
         this.masterDocument = this.masterIconSymbols.window.document;
@@ -138,7 +137,7 @@ class GenerateImages {
         ) {
             this.imageList.push(nameObj.fullName);
         }
-
+        console.log("Processing SVG:", symbol, filename);
         // Need to parse it before pushing
         this.masterList.push(this.processSymbolToSVG(symbol, filename));
 
@@ -173,19 +172,20 @@ class GenerateImages {
             this.svgs.map(async (filePath) => {
                 const filename = path.parse(filePath).name;
                 await this.processSvg(filePath, filename, lessFile);
-            })
+            }),
         );
 
         lessFile.sort(sortMethod);
 
+        const prettierFormat = await prettier.format(
+            [`/* ${genText} */`]
+                .concat(lessFile.map(({ data }) => data))
+                .join("\n"),
+            { parser: "less", tabWidth: 4 },
+        );
         await fs.promises.writeFile(
             `src/less/icon/generated/icon.less`,
-            prettier.format(
-                [`/* ${genText} */`]
-                    .concat(lessFile.map(({ data }) => data))
-                    .join("\n"),
-                { parser: "less", tabWidth: 4 }
-            )
+            prettierFormat,
         );
 
         this.imageList.sort();
@@ -198,16 +198,14 @@ class GenerateImages {
             this.masterDocument.querySelector("svg").appendChild(symbol);
         });
 
-        await fs.promises.writeFile(
-            masterIconPath,
-            html2xhtml(this.masterIconSymbols)
-        );
+        const fileOutput = await html2xhtml(this.masterIconSymbols);
+        await fs.promises.writeFile(masterIconPath, fileOutput);
     }
 }
 
 function stripName(name, mappedPrefix, mappedPostfix) {
     const matcher = new RegExp(
-        `^((?:icon-|program-badge-|star-rating-)?)([\\w-]+?)((?:|-small))$`
+        `^((?:icon-|program-badge-|star-rating-)?)([\\w-]+?)((?:|-small))$`,
     );
     const nameMatch = name.match(matcher);
     if (nameMatch) {

package/scripts/generate-imports/index.js

@@ -9,14 +9,14 @@ const files = fs
     .readdirSync(distDir)
     .filter(
         (filename) =>
-            config.skip.indexOf(filename) === -1 && !config.nested[filename]
+            config.skip.indexOf(filename) === -1 && !config.nested[filename],
     );
 const indexFiles = fs
     .readdirSync(distDir)
     .filter(
         (filename) =>
             config.skip.indexOf(filename) === -1 &&
-            config.skipIndex.indexOf(filename) === -1
+            config.skipIndex.indexOf(filename) === -1,
     );
 
 const { ModuleBuilder } = require("./module-builder");
@@ -47,23 +47,23 @@ async function generateTopLevelFiles() {
         .join("");
     await fs.promises.writeFile(
         path.join(currentDir, "browser.json"),
-        prettier.format(JSON.stringify(browser), { parser: "json" })
+        await prettier.format(JSON.stringify(browser), { parser: "json" }),
     );
     await fs.promises.writeFile(path.join(currentDir, "index.js"), contentJS);
     await fs.promises.writeFile(path.join(currentDir, "index.mjs"), contentMJS);
     await fs.promises.writeFile(path.join(currentDir, "index.css"), contentCSS);
     await fs.promises.writeFile(
         path.join(currentDir, "index.browser.json"),
-        prettier.format(`{ "dependencies": [ ${contentBrowser} ]}`, {
+        await prettier.format(`{ "dependencies": [ ${contentBrowser} ]}`, {
             parser: "json",
-        })
+        }),
     );
 
     // Generate SVGs
     const svgDistDir = path.join(distDir, "svg");
     await fs.promises.copyFile(
         path.join(svgDistDir, "icons.svg"),
-        path.join(currentDir, "svg.svg")
+        path.join(currentDir, "svg.svg"),
     );
 }
 
@@ -81,14 +81,14 @@ const moduleData = [].concat(
         (moduleName) =>
             new ModuleBuilder(moduleName, config, {
                 distDir,
-            })
+            }),
     ),
     Object.keys(config.modules).map(
         (moduleName) =>
             new ModuleBuilder(moduleName, config, {
                 hasBaseModule: false,
                 distDir,
-            })
+            }),
     ),
     Object.keys(config.nested).map(
         (moduleName) =>
@@ -96,8 +96,8 @@ const moduleData = [].concat(
                 isNested: true,
                 distDir,
                 addIndexModules: config.nested[moduleName],
-            })
-    )
+            }),
+    ),
 );
 
 async function generateTopLevel() {

package/scripts/generate-imports/module-builder.js

@@ -64,7 +64,7 @@ class ModuleBuilder {
                 distDir: "",
                 addIndexModules: null,
             },
-            options
+            options,
         );
     }
 
@@ -122,7 +122,7 @@ class ModuleBuilder {
             });
             // Get all modules now in directory
             const moduleList = await fs.promises.readdir(
-                path.join(this.options.distDir, this.moduleName)
+                path.join(this.options.distDir, this.moduleName),
             );
 
             if (this.options.addIndexModules) {
@@ -133,7 +133,7 @@ class ModuleBuilder {
                             this.options.addIndexModules[file],
                             async () => {
                                 await this.writeModuleFiles(file);
-                            }
+                            },
                         );
                     } else {
                         await this.overrideData(
@@ -142,7 +142,7 @@ class ModuleBuilder {
                             async () => {
                                 await this.writeBrowserJSON(file);
                                 await this.writeModuleFiles(file);
-                            }
+                            },
                         );
                     }
                 }
@@ -165,22 +165,22 @@ class ModuleBuilder {
 
     async writeBrowserJSON(currentModule) {
         const additionalRequires = this.additionalModules.map((addFile) =>
-            getBrowserRequireSyntax(addFile)
+            getBrowserRequireSyntax(addFile),
         );
         const filename = currentModule || this.moduleName;
         const requires = additionalRequires.concat(
             this.options.hasBaseModule
                 ? [getBrowserRequireSyntax(filename)]
-                : []
+                : [],
         );
 
         const content = { dependencies: requires };
         return await fs.promises.writeFile(
             getBrowserFileName(
                 filename,
-                this.options.isNested && this.moduleName
+                this.options.isNested && this.moduleName,
             ),
-            prettier.format(JSON.stringify(content), { parser: "json" })
+            await prettier.format(JSON.stringify(content), { parser: "json" }),
         );
     }
 
@@ -197,7 +197,7 @@ class ModuleBuilder {
             this.parseAdditionalModules(getJSRequireSyntax, "js", {
                 modules,
                 filename,
-            })
+            }),
         );
 
         await fs.promises.writeFile(
@@ -205,7 +205,7 @@ class ModuleBuilder {
             this.parseAdditionalModules(getCSSRequireSyntax, "css", {
                 modules,
                 filename,
-            })
+            }),
         );
 
         await fs.promises.writeFile(
@@ -213,16 +213,16 @@ class ModuleBuilder {
             this.parseAdditionalModules(getMJSRequireSyntax, "css", {
                 modules,
                 filename,
-            })
+            }),
         );
     }
 
     parseAdditionalModules(getSyntax, ext, { modules, filename }) {
         const additioanlContent = modules.map((addFile) =>
-            getSyntax(addFile, ext)
+            getSyntax(addFile, ext),
         );
         const content = additioanlContent.concat(
-            filename ? [getSyntax(filename, "css")] : []
+            filename ? [getSyntax(filename, "css")] : [],
         );
         return content.join("");
     }

package/scripts/split-icon.js

@@ -14,7 +14,7 @@ const { html2xhtml2 } = require("./util");
 async function splitter(file, argv) {
     const skinFile = await fs.promises.readFile(
         path.resolve(svgDir, `${file}.svg`),
-        "utf8"
+        "utf8",
     );
 
     const symbols = JSDOM.fragment(skinFile);
@@ -26,9 +26,9 @@ async function splitter(file, argv) {
 
         await fs.promises.writeFile(
             path.resolve(svgDir, "icon", `${symbolId}.svg`),
-            html2xhtml2(symbol)
+            await html2xhtml2(symbol)
                 .replace("<symbol", "<svg")
-                .replace("</symbol>", "</svg>")
+                .replace("</symbol>", "</svg>"),
         );
     }
 }

package/src/less/bundles/skin-headless.less

@@ -10,6 +10,7 @@
 @import "../carousel/carousel.less";
 @import "../calendar/calendar.less";
 @import "../checkbox/checkbox.less";
+@import "../chip/chip.less";
 @import "../combobox/combobox.less";
 @import "../confirm-dialog/confirm-dialog.less";
 @import "../cta-button/cta-button.less";

package/src/less/button/button.less

@@ -468,7 +468,8 @@ button.btn--floating-label .btn__floating-label {
 }
 
 button.btn--floating-label .btn__floating-label--animate {
-    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
+    transition:
+        transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
         bottom 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
 }
 

package/src/less/carousel/carousel.less

@@ -46,7 +46,9 @@
     border: 1px solid;
     .border-color-token(carousel-paddle-border-color, color-stroke-subtle);
     border-radius: 16px;
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+    box-shadow:
+        0 2px 2px 0 rgba(0, 0, 0, 0.24),
+        0 0 2px 0 rgba(0, 0, 0, 0.12);
     display: flex;
     font-size: 18px;
     height: 32px;
@@ -294,7 +296,9 @@ span.carousel__container {
             /* stylelint-enable declaration-block-no-duplicate-properties */
             scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
             scrollbar-width: thin; // Firefox scrollbar
-            transition: border-color 0.5s, scrollbar-color 0.5s,
+            transition:
+                border-color 0.5s,
+                scrollbar-color 0.5s,
                 transform @ebay-carousel-transition-time
                     @ebay-carousel-transition-function;
 

package/src/less/chip/chip.less

@@ -0,0 +1,52 @@
+@import "../variables/variables.less";
+
+.chip {
+    align-items: center;
+    background-color: var(--color-background-tertiary);
+    border-radius: @spacing-400;
+    color: var(--color-foreground-primary);
+    display: inline-flex;
+    font-size: @font-size-14;
+    gap: 2px;
+    justify-content: space-between;
+    max-width: 296px;
+    min-height: @spacing-250;
+    min-width: 32px;
+    padding: 0 @spacing-150;
+}
+
+.chip__text {
+    overflow: hidden;
+    padding: @spacing-75 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+button.chip__button {
+    background-color: transparent;
+    border: none;
+    border-radius: 50px;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    height: @spacing-300;
+    line-height: 0;
+    margin-inline-end: -8px;
+    padding: 0;
+    width: @spacing-300;
+}
+
+button.chip__button:focus-visible {
+    background-color: var(--state-layer-focus);
+    outline-color: var(--color-state-focus-stroke);
+    outline-offset: -2px;
+    outline-style: solid;
+    outline-width: 2px;
+}
+
+button.chip__button:hover {
+    background-color: var(--state-layer-hover);
+}
+
+button.chip__button > svg {
+    fill: var(--color-foreground-on-primary);
+}