@ebay/skin 14.0.4 → 14.1.0-0

package/src/less/mixins/private/dialog-mixins.less

@@ -1,5 +1,6 @@
 @import "../public/utility-mixins.less";
 
+// Deprecated, remove the gutter sizes next major
 @dialog-small-gutter-size: 16px;
 @dialog-large-gutter-size: 24px;
 @dialog-scrim-color-hide: rgba(17, 24, 32, 0);
@@ -52,7 +53,7 @@
     display: flex;
     // Fix for Safari not honoring min-height
     flex-shrink: 0;
-    margin: @dialog-small-gutter-size (@dialog-small-gutter-size - 8) 0;
+    margin: @spacing-200 @spacing-200 0;
     position: relative;
 
     h1,
@@ -63,18 +64,18 @@
     h6 {
         align-self: center;
         flex: 1 1 auto;
-        margin: 0 8px;
+        margin: 0;
     }
 
     & > :last-child:not(:only-child) {
-        margin-left: 16px;
+        margin-left: @spacing-200;
     }
 }
 
 .dialog-body-content() {
     box-sizing: border-box;
     flex: 1 1 auto;
-    margin: @dialog-small-gutter-size;
+    margin: @spacing-200;
     position: relative;
 
     & > :first-child {
@@ -90,29 +91,31 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    padding: 16px;
+    padding: @spacing-200;
     position: relative;
 
     & > :not(:first-child) {
-        margin-top: 16px;
+        margin-top: @spacing-200;
     }
 }
 
+// Unused, small and large are the same now
 .dialog-header-content-large() {
-    margin: (@dialog-large-gutter-size - 8px) (@dialog-large-gutter-size - 8px) 0;
+    margin: @spacing-200 @spacing-200 0;
 }
 
+// Unused, small and large are the same now
 .dialog-body-content-large() {
-    margin: (@dialog-large-gutter-size - 8px) @dialog-large-gutter-size @dialog-large-gutter-size;
+    margin: @spacing-200;
 }
 
 .dialog-footer-content-large() {
     flex-direction: row;
     justify-content: flex-end;
-    padding: @dialog-large-gutter-size;
+    padding: 0 @spacing-200 @spacing-200;
 
     & > :not(:first-child) {
-        margin-left: @dialog-large-gutter-size;
+        margin-left: @spacing-100;
         margin-top: initial;
     }
 }

package/src/less/page-notice/page-notice.less

@@ -14,11 +14,13 @@
 
 div[role="region"].page-notice,
 section.page-notice {
-    display: flex;
+    display: grid;
+    // provide explicit structure up front, create loose markup model
+    grid-template-columns: 40px auto auto auto;
 }
 
 span[role="region"].page-notice {
-    display: inline-flex;
+    display: grid;
 }
 
 .page-notice__title {
@@ -38,6 +40,15 @@ span[role="region"].page-notice {
     font-weight: bold;
 }
 
+// force links with text having more than one word to remain on same line
+.page-notice__cta a {
+    white-space: nowrap;
+}
+
+.page-notice__dismiss {
+    cursor: pointer;
+}
+
 .page-notice a:hover {
     .color-token(page-notice-color, color-foreground-on-inverse);
 }
@@ -84,24 +95,20 @@ span[role="region"].page-notice {
 }
 
 .page-notice__header {
-    align-items: center;
-    display: flex;
-    justify-content: center;
+    grid-column: 1;
+    grid-row: 1;
     padding-right: @spacing-200;
 }
 
-.page-notice__main,
-.page-notice__footer {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+.page-notice__main {
+    grid-column: 2;
+    grid-row: 1;
+    padding-right: @spacing-200;
 }
 
 .page-notice__footer {
-    flex-shrink: 0;
-    margin-left: auto;
-    padding-left: @spacing-200;
-    width: auto;
+    grid-column: 4;
+    grid-row: 1;
 }
 
 /* support legacy 6.5 notice with heading + paragaphs */
@@ -110,6 +117,14 @@ span[role="region"].page-notice {
     margin: @spacing-50 0 0;
 }
 
+p.page-notice__cta {
+    grid-column: 2;
+    grid-row: 2;
+    justify-self: start;
+    margin-right: @spacing-200;
+    margin-top: @spacing-200;
+}
+
 @media (min-width: 601px) {
     section.page-notice,
     div[role="region"].page-notice {
@@ -117,7 +132,20 @@ span[role="region"].page-notice {
         margin: @spacing-200 0;
     }
 
+    .page-notice__title {
+        margin-top: 4px;
+    }
+
+    p.page-notice__cta {
+        grid-column: 4;
+        grid-row: 1;
+        justify-self: end;
+        margin-top: 0;
+        padding-right: @spacing-200;
+    }
+
     .page-notice__footer {
+        justify-self: end;
         margin-top: 0;
     }
 }

package/src/less/page-notice/stories/page-notice.stories.js

@@ -126,6 +126,49 @@ export const informationWithLink = () => `
 </section>
 `;
 
+export const dismissableWithTitle = () => `
+<section class="page-notice page-notice--information" role="region" aria-label="Information">
+    <div class="page-notice__header">
+        <svg class="icon icon--information-filled" focusable="false" height="24" width="24" role="img" aria-label="Information">
+            <use xlink:href="#icon-information-filled"></use>
+        </svg>
+    </div>
+    <div class="page-notice__main">
+        <h3 class="page-notice__title">Notice Title</h3>
+        <p>Opt into eBay payments before Jan 12th to pay no selling fees.</p>
+    </div>
+    <p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
+    <div class="page-notice__footer">
+        <button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="10" width="10">
+                <use xlink:href="#icon-close"></use>
+            </svg>
+        </a>
+    </div>
+</section>
+`;
+
+export const dismissableWithoutTitle = () => `
+<section class="page-notice page-notice--information" role="region" aria-label="Information">
+    <div class="page-notice__header">
+        <svg class="icon icon--information-filled" focusable="false" height="24" width="24" role="img" aria-label="Information">
+            <use xlink:href="#icon-information-filled"></use>
+        </svg>
+    </div>
+    <div class="page-notice__main">
+        <h3 class="page-notice__title">Opt into eBay payments before Jan 12th to pay no selling fees.</h3>
+    </div>
+    <p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
+    <div class="page-notice__footer">
+        <button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="10" width="10">
+                <use xlink:href="#icon-close"></use>
+            </svg>
+        </a>
+    </div>
+</section>
+`;
+
 export const formErrors = () => `
 <section class="page-notice page-notice--attention" role="region" aria-label="Attention">
     <div class="page-notice__header">

package/src/less/panel-dialog/panel-dialog.less

@@ -14,7 +14,7 @@
     border-right: 1px solid rgba(153, 153, 153, 0.18);
     -webkit-overflow-scrolling: touch;
     overflow-y: auto;
-    width: calc(100% - @spacing-400);
+    width: 100%;
 }
 
 .panel-dialog__window--end {
@@ -35,18 +35,20 @@
     .dialog-body-content();
 }
 
-// deprecated & undocumented, but still used by teams
 .panel-dialog__footer {
     .dialog-footer-content();
 }
 
 // inherits from .icon-btn
-button.panel-dialog__close {
+// Might need to see to add a small icon btn
+button.icon-btn.panel-dialog__close {
     align-self: center;
     border: 0;
-    outline-offset: -@spacing-100;
+    height: 32px;
+    min-width: 32px;
     padding: 0;
     position: relative;
+    width: 32px;
     z-index: 1;
 }
 
@@ -56,6 +58,7 @@ button.panel-dialog__close {
     }
 }
 
+// Deprecated
 .panel-dialog__title--center {
     text-align: center;
 }
@@ -126,19 +129,6 @@ button.panel-dialog__close {
 
 @media (min-width: 601px) {
     .panel-dialog__window {
-        width: calc(88% - @spacing-400);
-    }
-
-    .panel-dialog__header {
-        .dialog-header-content-large();
-    }
-
-    .panel-dialog__main {
-        .dialog-body-content-large();
-    }
-
-    // deprecated & undocumented, but still used by teams
-    .panel-dialog__footer {
-        .dialog-footer-content-large();
+        width: 384px;
     }
 }

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

@@ -6,8 +6,8 @@ export const panelStart = () => `
         <div class="panel-dialog__header">
             <h2 id="panel-title">Left Panel</h2>
             <button class="icon-btn panel-dialog__close" type="button" aria-label="Close Dialog">
-                <svg class="icon icon--close" aria-hidden="true">
-                    <use xlink:href="#icon-close"></use>
+                <svg class="icon icon--close-small" aria-hidden="true">
+                    <use xlink:href="#icon-close-small"></use>
                 </svg>
             </button>
         </div>
@@ -30,8 +30,8 @@ export const RTL = () => `
             <div class="panel-dialog__header">
                 <h2 id="panel-title">Left Panel</h2>
                 <button class="icon-btn panel-dialog__close" type="button" aria-label="Close Dialog">
-                    <svg class="icon icon--close" aria-hidden="true">
-                        <use xlink:href="#icon-close"></use>
+                    <svg class="icon icon--close-small" aria-hidden="true">
+                        <use xlink:href="#icon-close-small"></use>
                     </svg>
                 </button>
             </div>
@@ -52,12 +52,12 @@ export const panelEnd = () => `
 <div aria-labelledby="panel-title" aria-modal="true" class="panel-dialog" role="dialog">
     <div class="panel-dialog__window panel-dialog__window--end">
         <div class="panel-dialog__header">
+            <h2 id="panel-title">Right Panel</h2>
             <button class="icon-btn panel-dialog__close" type="button" aria-label="Close Dialog">
-                <svg class="icon icon--close" aria-hidden="true">
-                    <use xlink:href="#icon-close"></use>
+                <svg class="icon icon--close-small" aria-hidden="true">
+                    <use xlink:href="#icon-close-small"></use>
                 </svg>
             </button>
-            <h2 id="panel-title">Right Panel</h2>
         </div>
         <div class="panel-dialog__main">
             <h3>Heading</h3>
@@ -71,15 +71,37 @@ export const panelEnd = () => `
 </div>
 `;
 
-export const panelEndSecondaryButton = () => `
+export const panelEndWithFooter = () => `
 <div aria-labelledby="panel-title" aria-modal="true" class="panel-dialog" role="dialog">
     <div class="panel-dialog__window panel-dialog__window--end">
         <div class="panel-dialog__header">
+            <h2 id="panel-title">Right Panel</h2>
             <button class="icon-btn panel-dialog__close" type="button" aria-label="Close Dialog">
-                <svg class="icon icon--close" aria-hidden="true">
-                    <use xlink:href="#icon-close"></use>
+                <svg class="icon icon--close-small" aria-hidden="true">
+                    <use xlink:href="#icon-close-small"></use>
                 </svg>
             </button>
+        </div>
+        <div class="panel-dialog__main">
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+        </div>
+        <div class="panel-dialog__footer">
+            <button class="btn btn--primary">Submit</button>
+            <button class="btn">Cancel</button>
+        </div>
+    </div>
+</div>
+`;
+
+export const panelEndSecondaryButton = () => `
+<div aria-labelledby="panel-title" aria-modal="true" class="panel-dialog" role="dialog">
+    <div class="panel-dialog__window panel-dialog__window--end">
+        <div class="panel-dialog__header">
             <h2 id="panel-title">Right Panel</h2>
             <button class="fake-link panel-dialog__close" type="button">Reset</button>
         </div>

package/src/less/progress-stepper/progress-stepper.less

@@ -6,7 +6,7 @@
 @progress-stepper-large-min-width: 120px;
 
 .progress-stepper__items {
-    align-items: start;
+    align-items: flex-start;
     display: flex;
 }
 
@@ -44,6 +44,23 @@ hr.progress-stepper__separator {
     .color-token(progress-stepper-text-color, color-foreground-primary);
 
     font-size: @font-size-12;
+    font-weight: normal;
+}
+
+.progress-stepper__item--upcoming .progress-stepper__text h2,
+.progress-stepper__item--upcoming .progress-stepper__text h3,
+.progress-stepper__item--upcoming .progress-stepper__text h4,
+.progress-stepper__item--upcoming .progress-stepper__text h5,
+.progress-stepper__item--upcoming .progress-stepper__text h6 {
+    .color-token(progress-stepper-text-light-color, color-foreground-secondary);
+}
+
+.progress-stepper__item[aria-current] .progress-stepper__text h2,
+.progress-stepper__item[aria-current] .progress-stepper__text h3,
+.progress-stepper__item[aria-current] .progress-stepper__text h4,
+.progress-stepper__item[aria-current] .progress-stepper__text h5,
+.progress-stepper__item[aria-current] .progress-stepper__text h6 {
+    font-weight: bold;
 }
 
 .progress-stepper__text p {
@@ -58,6 +75,7 @@ hr.progress-stepper__separator {
     width: 24px;
 }
 
+// TODO remove next major version
 .progress-stepper__icon > span[role="img"] {
     align-items: center;
     .border-color-token(progress-stepper-badge-current-border-color, color-background-information);
@@ -85,8 +103,8 @@ hr.progress-stepper__separator--upcoming,
 }
 
 .progress-stepper {
-    margin: @spacing-200 0;
     overflow: auto;
+    padding: @spacing-200 0;
 }
 
 .progress-stepper__item:first-child .progress-stepper__text {
@@ -104,7 +122,7 @@ hr.progress-stepper__separator--upcoming,
 .progress-stepper--vertical .progress-stepper__item {
     align-items: flex-start;
     flex-direction: row;
-    height: 32px;
+    height: 24px;
     width: auto;
 }
 
@@ -143,7 +161,7 @@ hr.progress-stepper__separator--upcoming,
 }
 
 .progress-stepper--vertical .progress-stepper__item .progress-stepper__text {
-    align-self: flex-start;
+    align-self: center;
     margin-left: @spacing-200;
     margin-top: 0;
     text-align: left;
@@ -153,7 +171,7 @@ hr.progress-stepper__separator--upcoming,
 
 .progress-stepper--vertical .progress-stepper__icon {
     display: inline-block;
-    height: 28px;
+    height: 24px;
     margin: inherit;
     width: 24px;
 }
@@ -164,7 +182,7 @@ hr.progress-stepper__separator--upcoming,
     height: 51px;
     margin-bottom: 12px;
     margin-left: 11px;
-    margin-top: -15px;
+    margin-top: -4px;
     min-width: inherit;
     width: 2px;
 }

package/src/less/progress-stepper/stories/progress-stepper.stories.js

@@ -29,7 +29,9 @@ export const base = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div aria-current="step" class="progress-stepper__item progress-stepper__item--current" role="listitem">
             <span class="progress-stepper__icon">
-                <span class="step" role="img" aria-label="3">3</span>
+                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                    <use xlink:href="#icon-stepper-current"></use>
+                </svg>
             </span>
             <span class="progress-stepper__text">
                 <h4>Transit</h4>
@@ -37,9 +39,9 @@ export const base = () => `
             </span>
         </div>
         <hr class="progress-stepper__separator" role="presentation" />
-        <div class="progress-stepper__item" role="listitem">
+        <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
             <span class="progress-stepper__icon">
-                <span class="step" role="img" aria-label="4">4</span>
+                <span role="img" aria-label="upcoming"></span>
             </span>
             <span class="progress-stepper__text">
                 <h4>Delivered</h4>
@@ -105,6 +107,52 @@ export const allSelected = () => `
 `;
 
 export const noneSelected = () => `
+<div class="progress-stepper">
+    <div class="progress-stepper__items  progress-stepper__items--upcoming" role="list">
+        <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
+            <span class="progress-stepper__icon">
+                <span role="img" aria-label="upcoming"></span>
+            </span>
+            <span class="progress-stepper__text">
+                <h4>Started</h4>
+                <p>July 3rd</p>
+            </span>
+        </div>
+        <hr class="progress-stepper__separator" role="presentation" />
+        <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
+            <span class="progress-stepper__icon">
+                <span role="img" aria-label="upcoming"></span>
+            </span>
+            <span class="progress-stepper__text">
+                <h4>Shipped</h4>
+                <p>July 4th</p>
+            </span>
+        </div>
+        <hr class="progress-stepper__separator" role="presentation" />
+        <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
+            <span class="progress-stepper__icon">
+                <span role="img" aria-label="upcoming"></span>
+            </span>
+            <span class="progress-stepper__text">
+                <h4>Transit</h4>
+                <p>July 5th</p>
+            </span>
+        </div>
+        <hr class="progress-stepper__separator" role="presentation" />
+        <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
+            <span class="progress-stepper__icon">
+                <span role="img" aria-label="upcoming"></span>
+            </span>
+            <span class="progress-stepper__text">
+                <h4>Delivered</h4>
+                <p>July 6th</p>
+            </span>
+        </div>
+    </div>
+</div>
+`;
+
+export const numbersNoneSelected = () => `
 <div class="progress-stepper">
     <div class="progress-stepper__items  progress-stepper__items--upcoming" role="list">
         <div class="progress-stepper__item" role="listitem">
@@ -179,7 +227,9 @@ export const RTL = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div aria-current="step" class="progress-stepper__item progress-stepper__item--current" role="listitem">
             <span class="progress-stepper__icon">
-                <span class="step" role="img" aria-label="3">3</span>
+                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                    <use xlink:href="#icon-stepper-current"></use>
+                </svg>
             </span>
             <span class="progress-stepper__text">
                 <h4>Transit</h4>
@@ -187,9 +237,9 @@ export const RTL = () => `
             </span>
         </div>
         <hr class="progress-stepper__separator" role="presentation" />
-        <div class="progress-stepper__item" role="listitem">
+        <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
             <span class="progress-stepper__icon">
-                <span class="step" role="img" aria-label="4">4</span>
+                <span role="img" aria-label="upcoming"></span>
             </span>
             <span class="progress-stepper__text">
                 <h4>Delivered</h4>
@@ -219,7 +269,9 @@ export const vertical = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div aria-current="step" class="progress-stepper__item progress-stepper__item--current" role="listitem">
             <span class="progress-stepper__icon">
-                <span class="step" role="img" aria-label="2">2</span>
+                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                    <use xlink:href="#icon-stepper-current"></use>
+                </svg>
             </span>
             <span class="progress-stepper__text">
                 <h3>Preparing for shipment</h3>
@@ -227,13 +279,50 @@ export const vertical = () => `
             </span>
         </div>
         <hr class="progress-stepper__separator" role="presentation" />
+        <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
+            <span class="progress-stepper__icon">
+                <span role="img" aria-label="upcoming"></span>
+            </span>
+           <span class="progress-stepper__text">
+                <h3>Delivered</h3>
+                <p>Guaranteed Wednesday, October 09.</p>
+            </span>
+        </div>
+    </div>
+</div>
+`;
+
+export const verticalSingleLine = () => `
+<div class="progress-stepper progress-stepper--vertical">
+    <div class="progress-stepper__items" role="list">
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <span class="step" role="img" aria-label="3">3</span>
+                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                    <use xlink:href="#icon-stepper-confirmation"></use>
+                </svg>
+            </span>
+            <span class="progress-stepper__text">
+                <h3>Order placed</h3>
+            </span>
+        </div>
+        <hr class="progress-stepper__separator" role="presentation" />
+        <div aria-current="step" class="progress-stepper__item progress-stepper__item--current" role="listitem">
+            <span class="progress-stepper__icon">
+                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                    <use xlink:href="#icon-stepper-current"></use>
+                </svg>
+            </span>
+            <span class="progress-stepper__text">
+                <h3>Preparing for shipment</h3>
+            </span>
+        </div>
+        <hr class="progress-stepper__separator" role="presentation" />
+        <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
+            <span class="progress-stepper__icon">
+                <span role="img" aria-label="upcoming"></span>
             </span>
             <span class="progress-stepper__text">
                 <h3>Delivered</h3>
-                <p>Guaranteed Wednesday, October 09.</p>
             </span>
         </div>
     </div>
@@ -259,7 +348,9 @@ export const verticalRTL = () => `
             <hr class="progress-stepper__separator" role="presentation" />
             <div aria-current="step" class="progress-stepper__item progress-stepper__item--current" role="listitem">
                 <span class="progress-stepper__icon">
-                    <span class="step" role="img" aria-label="2">2</span>
+                    <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                        <use xlink:href="#icon-stepper-current"></use>
+                    </svg>
                 </span>
                 <span class="progress-stepper__text">
                     <h3>Preparing for shipment</h3>
@@ -267,9 +358,9 @@ export const verticalRTL = () => `
                 </span>
             </div>
             <hr class="progress-stepper__separator" role="presentation" />
-            <div class="progress-stepper__item" role="listitem">
+            <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
                 <span class="progress-stepper__icon">
-                    <span class="step" role="img" aria-label="3">3</span>
+                    <span role="img" aria-label="upcoming"></span>
                 </span>
                 <span class="progress-stepper__text">
                     <h3>Delivered</h3>
@@ -308,11 +399,11 @@ export const infoState = () => `
                 </span>
             </div>
         <hr class="progress-stepper__separator" role="presentation" />
-        <div class="progress-stepper__item" role="listitem">
+        <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
             <span class="progress-stepper__icon">
-                <span class="step" role="img" aria-label="3">3</span>
+                <span role="img" aria-label="upcoming"></span>
             </span>
-            <span class="progress-stepper__text">
+           <span class="progress-stepper__text">
                 <h4>Delivered</h4>
                 <p>July 6th</p>
             </span>
@@ -347,9 +438,9 @@ export const errorState = () => `
             </span>
         </div>
         <hr class="progress-stepper__separator" role="presentation" />
-        <div class="progress-stepper__item" role="listitem">
+        <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
             <span class="progress-stepper__icon">
-                <span class="step" role="img" aria-label="3">3</span>
+                <span role="img" aria-label="upcoming"></span>
             </span>
             <span class="progress-stepper__text">
                 <h4>Delivered</h4>