@ebay/skin 14.1.0 → 14.1.3

package/scripts/generate-bundle.js

@@ -14,16 +14,22 @@ const cleanCSSInstance = new CleanCSS({
 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');
 
 // The list of directories in the dist to pull
-const dsList = ['ds4', 'ds6'];
+const tokensList = [
+    ['evo-core', 'evo-light'],
+    ['ds4-core', 'ds4-light'],
+];
+const tokensDirList = ['evo', 'ds4'];
 
 /**
  * Main Processing class. Holds info about args passed and ds version
  */
 class CssProcesser {
-    constructor(dsVersion, args) {
-        this.dsVersion = dsVersion;
+    constructor(tokensFile, tokensDir, args) {
+        this.tokensFile = tokensFile;
+        this.tokensDir = tokensDir;
         this.args = args;
         this.processed = [];
         this.skipped = [];
@@ -52,10 +58,11 @@ class CssProcesser {
 
     getDistCss() {
         return new Promise((resolve, reject) => {
-            glob(`${currentDir}/dist/**/${this.dsVersion}/**/*.css`, (err, files) => {
+            glob(`${currentDir}/dist/**/*.css`, (err, files) => {
                 if (err) {
                     return reject(err);
                 }
+                console.log(files);
                 resolve(files);
             });
         });
@@ -80,6 +87,18 @@ class CssProcesser {
         return this.wrap(cssContents);
     }
 
+    rewrapRoot(cssContents) {
+        const root = rootMatch.exec(cssContents);
+        if (root && root[1]) {
+            // Add newroot
+            const newContents = cssContents.replace(rootMatch, '');
+            return `${this.classDef} ${root[1]}
+      ${this.wrap(newContents)}
+     `;
+        }
+        return this.wrap(cssContents);
+    }
+
     /**
      * Generates a raw less file for given css file
      * @param {*} file
@@ -87,8 +106,10 @@ class CssProcesser {
     generateRawLess(file) {
         const fileName = path.basename(file, '.css');
         if (this.args.modules.length > 0 && this.args.modules.indexOf(fileName) === -1) {
-            this.skipped.push(fileName);
-            return '';
+            if (this.tokensFile.indexOf(fileName) === -1) {
+                this.skipped.push(fileName);
+                return '';
+            }
         }
         this.processed.push(fileName);
 
@@ -99,6 +120,9 @@ class CssProcesser {
             if (fileName === 'global') {
                 return this.rewrapBody(cssContents);
             }
+            if (this.tokensFile.indexOf(fileName) > -1) {
+                return this.rewrapRoot(cssContents);
+            }
             return this.wrap(cssContents);
         }
         return `@import (inline) "${file}";`;
@@ -109,23 +133,23 @@ class CssProcesser {
             const compiled = files.map((file) => this.generateRawLess(file)).join('\n');
             const processed = this.processed;
             const skipped = this.skipped;
-            const dsVersion = this.dsVersion;
+            const tokensFile = this.tokensFile;
 
             if (this.args.modules.length > 0 || this.args.verbose) {
-                console.log(`Processed ${processed.length} modules for ${dsVersion}`);
+                console.log(`Processed ${processed.length} modules for ${tokensFile}`);
             }
             if (this.args.verbose) {
-                console.log(`Modules processed: ${processed.join(',')} for ${dsVersion}`);
+                console.log(`Modules processed: ${processed.join(',')} for ${tokensFile}`);
 
-                console.log(`Skipped ${skipped.length} modules for ${dsVersion}`);
-                console.log(`Modules skipped: ${skipped.join(',')} for ${dsVersion}`);
+                console.log(`Skipped ${skipped.length} modules for ${tokensFile}`);
+                console.log(`Modules skipped: ${skipped.join(',')} for ${tokensFile}`);
             }
             resolve(compiled);
         });
     }
 
     generateLESS() {
-        return this.getDistCss(this.dsVersion).then((files) => this.processFiles(files));
+        return this.getDistCss(this.tokensFile).then((files) => this.processFiles(files));
     }
 
     compileLess(raw) {
@@ -133,24 +157,24 @@ class CssProcesser {
     }
 
     writeAllFiles(raw) {
-        const cdnPath = getCDNPath(this.args.name, this.dsVersion);
+        const cdnPath = getCDNPath(this.args.name);
         rimraf.sync(cdnPath);
         return makeDir(cdnPath).then(() =>
             writeFile(
-                `${cdnPath}/skin.${this.minify ? 'min.' : ''}css`,
+                `${cdnPath}/skin-${this.tokensDir}.${this.minify ? 'min.' : ''}css`,
                 `/* autoprefixer: off */\n${raw}\n/* autoprefixer: on */`
             )
         );
     }
 }
 
-function getCDNPath(bundle, dsVersion) {
-    return `${currentDir}/_cdn/${bundle}/v${pkg.version}/${dsVersion}`;
+function getCDNPath(bundle) {
+    return `${currentDir}/_cdn/${bundle}/v${pkg.version}`;
 }
 
 /**
  * Runs the compilation of less
- * @param {*} res The response with dsVersion and raw css/less
+ * @param {*} res The response with tokensFile and raw css/less
  * @param {*} plugin The given plugin to run the render with
  */
 /**
@@ -200,8 +224,8 @@ function runCSSBuild(name, args) {
     prebuild()
         .then(() =>
             Promise.all(
-                dsList.map((ds) => {
-                    const cssProcesser = new CssProcesser(ds, args);
+                tokensList.map((token, index) => {
+                    const cssProcesser = new CssProcesser(token, tokensDirList[index], args);
                     return cssProcesser.run();
                 })
             )
@@ -218,11 +242,11 @@ Please upload the ./_cdn/${args.name}/v${pkg.version} directory to CDN
 
 async function listBundles(argv) {
     await prebuild();
-    dsList.forEach((dsVersion) => {
-        const cssProcesser = new CssProcesser(dsVersion, argv);
+    tokensList.forEach((tokensFile) => {
+        const cssProcesser = new CssProcesser(tokensFile, argv);
         cssProcesser.getDistCss().then((files) => {
             console.log(`======================`);
-            console.log(`${dsVersion} - modules avaiable`);
+            console.log(`${tokensFile} - modules avaiable`);
             console.log(`======================`);
             files.forEach((file) => {
                 console.log(path.basename(file, '.css'));

package/src/less/button/button.less

@@ -52,6 +52,13 @@ a.fake-btn--borderless {
     }
 }
 
+button.btn--borderless[disabled],
+a.fake-btn--borderless[disabled],
+button.btn--borderless[aria-disabled="true"],
+a.fake-btn--borderless[aria-disabled="true"] {
+    border-color: transparent;
+}
+
 button.btn--slim,
 a.fake-btn--slim {
     height: @button-height-small;

package/src/less/button/stories/button/borderless.stories.js

@@ -0,0 +1,28 @@
+export default { title: 'Button/Borderless' };
+
+export const base = () => `<button class="btn btn--borderless">
+    <span class="btn__cell">
+        <span class="btn__text">Button</span>
+        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
+            <use xlink:href="#icon-dropdown"></use>
+        </svg>
+    </span>
+</button>`;
+
+export const disabled = () => `<button class="btn btn--borderless" disabled="true">
+    <span class="btn__cell">
+        <span class="btn__text">Button</span>
+        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
+            <use xlink:href="#icon-dropdown"></use>
+        </svg>
+    </span>
+</button>`;
+
+export const ariaDisabled = () => `<button class="btn btn--borderless" aria-disabled="true">
+    <span class="btn__cell">
+        <span class="btn__text">Button</span>
+        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
+            <use xlink:href="#icon-dropdown"></use>
+        </svg>
+    </span>
+</button>`;

package/src/less/floating-label/floating-label.less

@@ -14,16 +14,16 @@ div.floating-label {
 }
 
 label.floating-label__label {
-    .background-color-token(floating-label-background-color, color-background-secondary);
     .color-token(floating-label-color, color-foreground-primary);
+
+    background-color: transparent;
     display: inline-block;
     left: 16px;
     overflow: hidden;
-    padding-top: 3px;
     pointer-events: none;
     position: absolute;
     text-overflow: ellipsis;
-    top: -3px;
+    top: 0;
     transform: scale(0.75, 0.75) translate(0, 2px);
     transform-origin: left;
     white-space: nowrap;
@@ -32,7 +32,6 @@ label.floating-label__label {
 }
 
 label.floating-label__label--focus {
-    .background-color-token(floating-label-focus-background-color, color-background-primary);
     color: var(--color-background-inverse);
 }
 
@@ -55,7 +54,6 @@ label.floating-label__label--animate {
 }
 
 label.floating-label__label--disabled {
-    .background-color-token(floating-label-disabled-background-color, color-background-secondary);
     .color-token(floating-label-disabled-color, color-foreground-disabled);
 }
 

package/src/less/select/select.less

@@ -54,10 +54,15 @@ span.select {
     width: auto;
 
     &:focus {
+        background-color: transparent;
         text-decoration: underline;
     }
 }
 
+.select select:focus {
+    .background-color-token(select-focus-background-color, color-background-primary);
+}
+
 .select select:focus:not(:read-only) {
     .background-color-token(select-focus-background-color, color-background-primary);
     .border-color-token(select-focus-border-color, color-stroke-default);

package/src/less/select/stories/floating-label.stories.js

@@ -0,0 +1,66 @@
+export default { title: 'Select/Select/Floating Label' };
+
+export const defaultLabel = () => `
+<span class="floating-label">
+    <label class="floating-label__label" for="select-01">Choose Option</label>
+    <span class="select">
+        <select id="select-01">
+            <option value="1">Option 1 with long text</option>
+            <option value="2">Option 2</option>
+            <option value="3">Option 3</option>
+        </select>
+        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
+            <use xlink:href="#icon-dropdown"></use>
+        </svg>
+    </span>
+</span>
+`;
+
+export const selectedOption = () => `
+<span class="floating-label">
+    <label class="floating-label__label floating-label__label--inline" for="select-01">Here are your options</label>
+    <span class="select">
+        <select id="select-01">
+            <option value=""></option>
+            <option value="1">Option 1 with long text</option>
+            <option value="2">Option 2</option>
+            <option value="3">Option 3</option>
+        </select>
+        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
+            <use xlink:href="#icon-dropdown"></use>
+        </svg>
+    </span>
+</span>
+`;
+
+export const errorState = () => `
+<span class="floating-label">
+    <label class="floating-label__label floating-label__label--invalid" for="select-03">Choose Option</label>
+    <span class="select">
+        <select id="select-03" aria-invalid="true">
+            <option value="1">Option 1 with long text</option>
+            <option value="2">Option 2</option>
+            <option value="3">Option 3</option>
+        </select>
+        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
+            <use xlink:href="#icon-dropdown"></use>
+        </svg>
+    </span>
+</span>
+`;
+
+export const disabled = () => `
+<span class="floating-label">
+    <label class="floating-label__label" for="select-03">Choose Option</label>
+    <span class="select">
+        <select disabled>
+            <option value="1">Option 1</option>
+            <option value="2">Option 2 can't pick</option>
+            <option value="3">Option 3</option>
+        </select>
+        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
+            <use xlink:href="#icon-dropdown"></use>
+        </svg>
+    </span>
+</span>
+`;

package/src/less/textbox/textbox.less

@@ -71,6 +71,8 @@ textarea.textbox__control {
     &[readonly] {
         background-color: transparent;
         border: none;
+        padding-left: 0;
+        padding-right: 0;
     }
 
     &[aria-invalid="true"] {
@@ -133,6 +135,12 @@ textarea.textbox__control:not(:read-only):focus {
     outline: 0;
 }
 
+input.textbox__control[readonly]:focus,
+textarea.textbox__control[readonly]:focus {
+    outline: 0;
+    text-decoration: underline;
+}
+
 .textbox > svg:first-child {
     left: @spacing-200;
 

package/src/less/toast-dialog/stories/toast-dialog.stories.js

@@ -5,9 +5,9 @@ export const primaryAction = () => `
     <div class="toast-dialog__window">
         <div class="toast-dialog__header">
             <h2>User Privacy Preferences</h2>
-            <button class="icon-btn toast-dialog__close" type="button" aria-label="Close notification dialog">
-                <svg class="icon icon--close" focusable="false" height="24" width="24">
-                    <use xlink:href="#icon-close"></use>
+            <button class="icon-btn icon-btn--transparent toast-dialog__close" type="button" aria-label="Close notification dialog">
+                <svg class="icon icon--close icon--close-small" focusable="false">
+                    <use href="#icon-close-small"></use>
                 </svg>
             </button>
         </div>
@@ -27,9 +27,9 @@ export const secondaryAction = () => `
     <div class="toast-dialog__window">
         <div class="toast-dialog__header">
             <h2>User Privacy Preferences</h2>
-            <button class="icon-btn toast-dialog__close" type="button" aria-label="Close notification dialog">
-                <svg class="icon icon--close" focusable="false" height="24" width="24">
-                    <use xlink:href="#icon-close"></use>
+            <button class="icon-btn icon-btn--transparent toast-dialog__close" type="button" aria-label="Close notification dialog">
+                <svg class="icon icon--close icon--close-small" focusable="false">
+                    <use href="#icon-close-small"></use>
                 </svg>
             </button>
         </div>
@@ -51,9 +51,9 @@ export const RTL = () => `
         <div class="toast-dialog__window">
             <div class="toast-dialog__header">
                 <h2>User Privacy Preferences</h2>
-                <button style="margin-right: 140px;" class="icon-btn toast-dialog__close" type="button" aria-label="Close notification dialog">
-                    <svg class="icon icon--close" focusable="false" height="24" width="24">
-                        <use xlink:href="#icon-close"></use>
+                <button class="icon-btn icon-btn--transparent toast-dialog__close" type="button" aria-label="Close notification dialog">
+                    <svg class="icon icon--close icon--close-small" focusable="false">
+                        <use href="#icon-close-small"></use>
                     </svg>
                 </button>
             </div>

package/src/tokens/evo-light.css

@@ -4,7 +4,7 @@
     --color-background-disabled: var(--color-neutral-3);
     --color-background-inverse: var(--color-neutral-6);
     --color-background-attention: var(--color-red-4);
-    --color-background-confirmation: var(--color-green-4);
+    --color-background-confirmation: var(--color-green-6);
     --color-background-information: var(--color-blue-4);
     --color-background-accent: var(--color-blue-4);
     --color-background-invalid: var(--color-red-1);