@ebay/skin 16.0.0 → 16.1.0

package/scripts/generate-bundle.js

@@ -1,27 +1,27 @@
 #!/usr/bin/env node
 /* eslint-disable no-console */
-const glob = require('glob');
-const path = require('path');
-const less = require('less');
-const fs = require('fs');
-const pkg = require('../package.json');
-const rimraf = require('rimraf');
-const CleanCSS = require('clean-css');
+const glob = require("glob");
+const path = require("path");
+const less = require("less");
+const fs = require("fs");
+const pkg = require("../package.json");
+const rimraf = require("rimraf");
+const CleanCSS = require("clean-css");
 const cleanCSSInstance = new CleanCSS({
     advanced: true,
     promise: true,
 });
 const currentDir = path.dirname(__dirname);
-const { exec } = require('child_process');
-const bodyMatch = new RegExp('body ?({(?:.|\\s|\\S)*?})', 'm');
-const rootMatch = new RegExp(':root ?({(?:.|\\s|\\S)*?})', 'm');
+const { exec } = require("child_process");
+const bodyMatch = new RegExp("body ?({(?:.|\\s|\\S)*?})", "m");
+const rootMatch = new RegExp(":root ?({(?:.|\\s|\\S)*?})", "m");
 
 // The list of directories in the dist to pull
 const tokensList = [
-    ['evo-core', 'evo-light'],
-    ['ds4-core', 'ds4-light'],
+    ["evo-core", "evo-light"],
+    ["ds4-core", "ds4-light"],
 ];
-const tokensDirList = ['evo', 'ds4'];
+const tokensDirList = ["evo", "ds4"];
 
 /**
  * Main Processing class. Holds info about args passed and ds version
@@ -34,7 +34,7 @@ class CssProcesser {
         this.processed = [];
         this.skipped = [];
 
-        let classDef = '';
+        let classDef = "";
         const scopeClass = args.scopeClass;
         if (scopeClass) {
             for (let i = 0; i < args.scopeSpecificity; i++) {
@@ -51,7 +51,9 @@ class CssProcesser {
     run() {
         return this.generateLESS()
             .then((raw) => this.compileLess(raw))
-            .then((raw) => (this.minify ? cleanCSSInstance.minify(raw) : { styles: raw }))
+            .then((raw) =>
+                this.minify ? cleanCSSInstance.minify(raw) : { styles: raw }
+            )
             .then((raw) => this.writeAllFiles(raw.styles))
             .catch((e) => console.error(e));
     }
@@ -79,7 +81,7 @@ class CssProcesser {
         const body = bodyMatch.exec(cssContents);
         if (body && body[1]) {
             // Add new body
-            const newContents = cssContents.replace(bodyMatch, '');
+            const newContents = cssContents.replace(bodyMatch, "");
             return `body ${this.classDef} ${body[1]}
       ${this.wrap(newContents)}
      `;
@@ -91,7 +93,7 @@ class CssProcesser {
         const root = rootMatch.exec(cssContents);
         if (root && root[1]) {
             // Add newroot
-            const newContents = cssContents.replace(rootMatch, '');
+            const newContents = cssContents.replace(rootMatch, "");
             return `${this.classDef} ${root[1]}
       ${this.wrap(newContents)}
      `;
@@ -104,11 +106,14 @@ class CssProcesser {
      * @param {*} file
      */
     generateRawLess(file) {
-        const fileName = path.basename(file, '.css');
-        if (this.args.modules.length > 0 && this.args.modules.indexOf(fileName) === -1) {
+        const fileName = path.basename(file, ".css");
+        if (
+            this.args.modules.length > 0 &&
+            this.args.modules.indexOf(fileName) === -1
+        ) {
             if (this.tokensFile.indexOf(fileName) === -1) {
                 this.skipped.push(fileName);
-                return '';
+                return "";
             }
         }
         this.processed.push(fileName);
@@ -117,7 +122,7 @@ class CssProcesser {
             // Need to read file and output
             const cssContents = fs.readFileSync(file).toString();
             // Check if it's global module and change body
-            if (fileName === 'global') {
+            if (fileName === "global") {
                 return this.rewrapBody(cssContents);
             }
             if (this.tokensFile.indexOf(fileName) > -1) {
@@ -130,26 +135,40 @@ class CssProcesser {
 
     processFiles(files) {
         return new Promise((resolve) => {
-            const compiled = files.map((file) => this.generateRawLess(file)).join('\n');
+            const compiled = files
+                .map((file) => this.generateRawLess(file))
+                .join("\n");
             const processed = this.processed;
             const skipped = this.skipped;
             const tokensFile = this.tokensFile;
 
             if (this.args.modules.length > 0 || this.args.verbose) {
-                console.log(`Processed ${processed.length} modules for ${tokensFile}`);
+                console.log(
+                    `Processed ${processed.length} modules for ${tokensFile}`
+                );
             }
             if (this.args.verbose) {
-                console.log(`Modules processed: ${processed.join(',')} for ${tokensFile}`);
+                console.log(
+                    `Modules processed: ${processed.join(
+                        ","
+                    )} for ${tokensFile}`
+                );
 
-                console.log(`Skipped ${skipped.length} modules for ${tokensFile}`);
-                console.log(`Modules skipped: ${skipped.join(',')} for ${tokensFile}`);
+                console.log(
+                    `Skipped ${skipped.length} modules for ${tokensFile}`
+                );
+                console.log(
+                    `Modules skipped: ${skipped.join(",")} for ${tokensFile}`
+                );
             }
             resolve(compiled);
         });
     }
 
     generateLESS() {
-        return this.getDistCss(this.tokensFile).then((files) => this.processFiles(files));
+        return this.getDistCss(this.tokensFile).then((files) =>
+            this.processFiles(files)
+        );
     }
 
     compileLess(raw) {
@@ -161,7 +180,9 @@ class CssProcesser {
         rimraf.sync(cdnPath);
         return makeDir(cdnPath).then(() =>
             writeFile(
-                `${cdnPath}/skin-${this.tokensDir}.${this.minify ? 'min.' : ''}css`,
+                `${cdnPath}/skin-${this.tokensDir}.${
+                    this.minify ? "min." : ""
+                }css`,
                 `/* autoprefixer: off */\n${raw}\n/* autoprefixer: on */`
             )
         );
@@ -182,12 +203,12 @@ function getCDNPath(bundle) {
  */
 function prebuild() {
     return new Promise((resolve, reject) => {
-        console.log('Running build...');
-        exec('npm run build:css', (err) => {
+        console.log("Running build...");
+        exec("npm run build:css", (err) => {
             if (err) {
                 return reject(err);
             }
-            console.log('npm build successful');
+            console.log("npm build successful");
             return resolve();
         });
     });
@@ -225,7 +246,11 @@ function runCSSBuild(name, args) {
         .then(() =>
             Promise.all(
                 tokensList.map((token, index) => {
-                    const cssProcesser = new CssProcesser(token, tokensDirList[index], args);
+                    const cssProcesser = new CssProcesser(
+                        token,
+                        tokensDirList[index],
+                        args
+                    );
                     return cssProcesser.run();
                 })
             )
@@ -249,7 +274,7 @@ async function listBundles(argv) {
             console.log(`${tokensFile} - modules avaiable`);
             console.log(`======================`);
             files.forEach((file) => {
-                console.log(path.basename(file, '.css'));
+                console.log(path.basename(file, ".css"));
             });
         });
     });

package/scripts/generate-images.js

@@ -1,20 +1,20 @@
-'use strict';
-const fs = require('fs');
-const path = require('path');
+"use strict";
+const fs = require("fs");
+const path = require("path");
 const currentDir = path.dirname(__dirname);
-const svgDir = path.resolve(currentDir, 'src', 'svg');
-const svgIconDir = path.resolve(currentDir, 'src', 'svg', 'icon');
-const masterIconPath = path.resolve(svgDir, 'icons.svg');
-const jsdom = require('jsdom');
-const prettier = require('prettier');
+const svgDir = path.resolve(currentDir, "src", "svg");
+const svgIconDir = path.resolve(currentDir, "src", "svg", "icon");
+const masterIconPath = path.resolve(svgDir, "icons.svg");
+const jsdom = require("jsdom");
+const prettier = require("prettier");
 const { JSDOM } = jsdom;
-const configFilePath = path.resolve(currentDir, 'docs', '_data', 'icons.yaml');
-const file = fs.readFileSync(configFilePath, 'utf8');
-const YAML = require('yaml');
+const configFilePath = path.resolve(currentDir, "docs", "_data", "icons.yaml");
+const file = fs.readFileSync(configFilePath, "utf8");
+const YAML = require("yaml");
 const config = YAML.parse(file);
-const { html2xhtml } = require('./util');
-const { query } = require('winston');
-const genText = 'This is a generated file, DO NOT EDIT';
+const { html2xhtml } = require("./util");
+const { query } = require("winston");
+const genText = "This is a generated file, DO NOT EDIT";
 
 async function getFiles(dir) {
     const dirents = await fs.promises.readdir(dir, { withFileTypes: true });
@@ -41,32 +41,48 @@ async function processFilePrefixing(dir) {
 }
 
 async function prefixIcon(fileDir, fileBase) {
-    const renameFrom = fileDir + '/' + fileBase;
-    const renameTo = fileDir + '/' + config.icons.prefix + '-' + fileBase;
+    const renameFrom = fileDir + "/" + fileBase;
+    const renameTo = fileDir + "/" + config.icons.prefix + "-" + fileBase;
 
     await fs.rename(renameFrom, renameTo, (error) => {
         if (error) return console.log(error);
 
-        console.log('Prefixed Icon: ' + fileBase + ' > ' + config.icons.prefix + '-' + fileBase);
+        console.log(
+            "Prefixed Icon: " +
+                fileBase +
+                " > " +
+                config.icons.prefix +
+                "-" +
+                fileBase
+        );
     });
 }
 
 async function normalizeFiles(svgs) {
-    const svgFiles = svgs.filter((f) => f.endsWith('.svg') && f !== 'icons.svg');
+    const svgFiles = svgs.filter(
+        (f) => f.endsWith(".svg") && f !== "icons.svg"
+    );
 
     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.removeAttribute('height');
-            querySelector.removeAttribute('width');
+        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.removeAttribute("height");
+            querySelector.removeAttribute("width");
             await fs.promises.writeFile(filePath, html2xhtml(svgJsDom, true));
         }
 
-        if (!fileBase.startsWith('icon-') && !fileBase.startsWith('star-rating-')) {
+        if (
+            !fileBase.startsWith("icon-") &&
+            !fileBase.startsWith("star-rating-") &&
+            !fileBase.startsWith("image-placeholder")
+        ) {
             await prefixIcon(fileDir, fileBase);
         }
     });
@@ -87,29 +103,33 @@ function sortMethod({ id: a }, { id: b }) {
 class GenerateImages {
     constructor(files, masterIconFile) {
         this.imageList = [];
-        this.svgs = files.filter((f) => f.endsWith('.svg') && f !== 'icons.svg');
+        this.svgs = files.filter(
+            (f) => f.endsWith(".svg") && f !== "icons.svg"
+        );
         this.masterIconSymbols = new JSDOM(masterIconFile);
         this.masterDocument = this.masterIconSymbols.window.document;
         this.masterList = [];
     }
 
     processSymbolToSVG(symbol, name) {
-        const newSVGCode = symbol.outerHTML.replace('<svg', '<symbol').replace('</svg', '</symbol');
+        const newSVGCode = symbol.outerHTML
+            .replace("<svg", "<symbol")
+            .replace("</svg", "</symbol");
 
-        const svgJsDom = new JSDOM(newSVGCode, { contentType: 'text/xml' });
-        const svgFragment = svgJsDom.window.document.querySelector('symbol');
-        svgFragment.setAttribute('id', name);
-        svgFragment.removeAttribute('xmlns');
-        svgFragment.removeAttribute('width');
-        svgFragment.removeAttribute('heightt');
+        const svgJsDom = new JSDOM(newSVGCode, { contentType: "text/xml" });
+        const svgFragment = svgJsDom.window.document.querySelector("symbol");
+        svgFragment.setAttribute("id", name);
+        svgFragment.removeAttribute("xmlns");
+        svgFragment.removeAttribute("width");
+        svgFragment.removeAttribute("heightt");
 
         return svgFragment;
     }
 
     async processSvg(filePath, filename, lessFile) {
-        const data = await fs.promises.readFile(filePath, 'utf8');
+        const data = await fs.promises.readFile(filePath, "utf8");
         const symbols = JSDOM.fragment(data);
-        const symbol = symbols.querySelector('svg');
+        const symbol = symbols.querySelector("svg");
 
         const nameObj = stripName(filename);
         if (config.skipDocs.indexOf(nameObj.simpleName) === -1) {
@@ -122,14 +142,14 @@ class GenerateImages {
         if (config.skip.indexOf(filename) > -1) {
             return;
         }
-        const sizes = symbol.getAttribute('viewBox');
+        const sizes = symbol.getAttribute("viewBox");
 
         if (sizes === null) {
-            console.log('ERROR: viewbox dimensions missing from ' + filename);
+            console.log("ERROR: viewbox dimensions missing from " + filename);
             return;
         }
 
-        const [, , width, height] = sizes.split(' ');
+        const [, , width, height] = sizes.split(" ");
         const id = `${nameObj.prefix}-${nameObj.fullName}`;
         lessFile.push({
             id,
@@ -138,7 +158,7 @@ class GenerateImages {
     }
 
     async run() {
-        const masterSvg = this.masterDocument.querySelector('svg');
+        const masterSvg = this.masterDocument.querySelector("svg");
 
         while (masterSvg.lastChild) {
             masterSvg.removeChild(masterSvg.lastChild);
@@ -158,8 +178,10 @@ class GenerateImages {
         await fs.promises.writeFile(
             `src/less/icon/generated/icon.less`,
             prettier.format(
-                [`/* ${genText} */`].concat(lessFile.map(({ data }) => data)).join('\n'),
-                { parser: 'less', tabWidth: 4 }
+                [`/* ${genText} */`]
+                    .concat(lessFile.map(({ data }) => data))
+                    .join("\n"),
+                { parser: "less", tabWidth: 4 }
             )
         );
 
@@ -170,15 +192,20 @@ class GenerateImages {
 
         this.masterList.sort(sortMethod);
         this.masterList.forEach((symbol) => {
-            this.masterDocument.querySelector('svg').appendChild(symbol);
+            this.masterDocument.querySelector("svg").appendChild(symbol);
         });
 
-        await fs.promises.writeFile(masterIconPath, html2xhtml(this.masterIconSymbols));
+        await fs.promises.writeFile(
+            masterIconPath,
+            html2xhtml(this.masterIconSymbols)
+        );
     }
 }
 
 function stripName(name, mappedPrefix, mappedPostfix) {
-    const matcher = new RegExp(`^((?:icon-|program-badge-|star-rating-)?)([\\w-]+?)((?:|-small))$`);
+    const matcher = new RegExp(
+        `^((?:icon-|program-badge-|star-rating-)?)([\\w-]+?)((?:|-small))$`
+    );
     const nameMatch = name.match(matcher);
     if (nameMatch) {
         const [, prefix, newName, postfix] = nameMatch;
@@ -187,7 +214,7 @@ function stripName(name, mappedPrefix, mappedPostfix) {
             prefix,
             name: newName,
             postfix,
-            simpleName: prefix === 'icon-' ? fullName : `${prefix}${fullName}`,
+            simpleName: prefix === "icon-" ? fullName : `${prefix}${fullName}`,
             fullName,
         };
     }

package/scripts/generate-imports/config.json

@@ -2,9 +2,24 @@
     "modules": {
         "core": ["global", "utility"],
         "combo": ["core", "lightbox-dialog", "form", "progress-spinner"],
-        "form": ["button", "checkbox", "field", "radio", "select", "switch", "textbox"]
+        "form": [
+            "button",
+            "checkbox",
+            "field",
+            "radio",
+            "select",
+            "switch",
+            "textbox"
+        ]
     },
-    "skip": ["mixins", "legacy-tokens", "tokens", "svg", "icon-large", "variables"],
+    "skip": [
+        "mixins",
+        "legacy-tokens",
+        "tokens",
+        "svg",
+        "icon-large",
+        "variables"
+    ],
     "skipIndex": [
         "dark-mode",
         "legacy-textbox",
@@ -44,7 +59,10 @@
         },
         "legacy-tokens": {
             "index": ["ds4-core", "ds4-light"],
-            "legacy-tokens": ["legacy-tokens/ds4-core", "legacy-tokens/ds4-light"]
+            "legacy-tokens": [
+                "legacy-tokens/ds4-core",
+                "legacy-tokens/ds4-light"
+            ]
         }
     }
 }

package/scripts/generate-imports/index.js

@@ -1,21 +1,25 @@
-const fs = require('fs');
-const prettier = require('prettier');
-const path = require('path');
-const config = require('./config.json');
-const { removeFile } = require('../util');
+const fs = require("fs");
+const prettier = require("prettier");
+const path = require("path");
+const config = require("./config.json");
+const { removeFile } = require("../util");
 const currentDir = path.dirname(path.dirname(__dirname));
-const distDir = path.join(currentDir, 'dist');
+const distDir = path.join(currentDir, "dist");
 const files = fs
     .readdirSync(distDir)
-    .filter((filename) => config.skip.indexOf(filename) === -1 && !config.nested[filename]);
+    .filter(
+        (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.skip.indexOf(filename) === -1 &&
+            config.skipIndex.indexOf(filename) === -1
     );
 
-const { ModuleBuilder } = require('./module-builder');
+const { ModuleBuilder } = require("./module-builder");
 
 async function generateTopLevelFiles() {
     const browser = {};
@@ -24,50 +28,52 @@ async function generateTopLevelFiles() {
         .map((item) => {
             return `require('./${item}.js');\n`;
         })
-        .join('');
+        .join("");
     const contentMJS = indexFiles
         .map((item) => {
             return `import './${item}.css';\n`;
         })
-        .join('');
+        .join("");
 
     const contentBrowser = indexFiles
         .map((item) => {
             return `"require: ./${item}.js"`;
         })
-        .join(',');
+        .join(",");
     const contentCSS = indexFiles
         .map((item) => {
             return `@import "./${item}.css";\n`;
         })
-        .join('');
+        .join("");
     await fs.promises.writeFile(
-        path.join(currentDir, 'browser.json'),
-        prettier.format(JSON.stringify(browser), { parser: 'json' })
+        path.join(currentDir, "browser.json"),
+        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.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} ]}`, { parser: 'json' })
+        path.join(currentDir, "index.browser.json"),
+        prettier.format(`{ "dependencies": [ ${contentBrowser} ]}`, {
+            parser: "json",
+        })
     );
 
     // Generate SVGs
-    const svgDistDir = path.join(distDir, 'svg');
+    const svgDistDir = path.join(distDir, "svg");
     await fs.promises.copyFile(
-        path.join(svgDistDir, 'icons.svg'),
-        path.join(currentDir, 'svg.svg')
+        path.join(svgDistDir, "icons.svg"),
+        path.join(currentDir, "svg.svg")
     );
 }
 
 async function cleanTopLevelFiles() {
-    await removeFile(path.join(currentDir, 'browser.json'));
-    await removeFile(path.join(currentDir, 'index.js'));
-    await removeFile(path.join(currentDir, 'index.mjs'));
-    await removeFile(path.join(currentDir, 'index.css'));
-    await removeFile(path.join(currentDir, 'index.browser.json'));
-    await removeFile(path.join(currentDir, 'svg.svg'));
+    await removeFile(path.join(currentDir, "browser.json"));
+    await removeFile(path.join(currentDir, "index.js"));
+    await removeFile(path.join(currentDir, "index.mjs"));
+    await removeFile(path.join(currentDir, "index.css"));
+    await removeFile(path.join(currentDir, "index.browser.json"));
+    await removeFile(path.join(currentDir, "svg.svg"));
 }
 
 const moduleData = [].concat(