@ebay/skin 18.0.0-next.0 → 18.0.1

package/src/sass/fullscreen-dialog/stories/fullscreen-dialog.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Skin/Fullscreen Dialog" };
+export default { title: "Skin/Fullscreen Dialog (DEPRECATED)" };
 
 export const closeButton = () => `
 <div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog" role="dialog">

package/src/sass/icon/icon.scss

@@ -80,4 +80,13 @@ svg {
     &.icon--disabled {
         filter: var(--color-icon-disabled-filter);
     }
+    &.icon--attention-filled {
+        @include color-token(color-foreground-attention);
+    }
+    &.icon--confirmation-filled {
+        @include color-token(color-foreground-confirmation);
+    }
+    &.icon--information-filled {
+        @include color-token(color-foreground-information);
+    }
 }

package/src/sass/lightbox-dialog/lightbox-dialog.scss

@@ -191,7 +191,7 @@ button.icon-btn.lightbox-dialog__prev {
 }
 
 [dir="rtl"] {
-    button.icon-btn.lightbox-dialog__prev .icon--chevron-left-16 {
+    button.icon-btn.lightbox-dialog__prev .icon--16 {
         transform: rotate(180deg);
     }
 }

package/src/sass/select/select.scss

@@ -31,7 +31,7 @@ span.select {
     vertical-align: middle;
 }
 
-.select svg.icon--chevron-down-12 {
+.select svg.icon--12 {
     height: 100%;
     pointer-events: none;
     position: absolute;

package/src/sass/textbox/stories/icon.stories.js

@@ -88,8 +88,10 @@ export const fullyDecorated = () => `
     <span>$</span>
     <input class="textbox__control" type="text" placeholder="placeholder text" />
     <span>%</span>
-    <svg class="icon icon--mail-24" width="16" height="16" aria-hidden="true">
-        <use href="#icon-mail-24"></use>
-    </svg>
+    <button class="icon-btn icon-btn--transparent icon-btn--small" type="button" aria-label="Mail">
+        <svg class="icon icon--mail-16" width="16" height="16" aria-hidden="true">
+            <use href="#icon-mail-16"></use>
+        </svg>
+    </button>
 </span>
 `;

package/src/sass/toggle-button/toggle-button.scss

@@ -166,7 +166,7 @@
 }
 
 .toggle-button--list-layout .toggle-button__image-container,
-.toggle-button--list-layout .toggle-button__content {
+.toggle-button--list-layout .toggle-button__content:not(:only-child) {
     align-self: self-start;
 }
 

package/src/sass/toggle-button-group/stories/list-layout.stories.js

@@ -1,5 +1,138 @@
 export default { title: "Skin/Toggle Button Group/List Layout" };
 
+export const titleOnly = () => `
+<div class="toggle-button-group toggle-button-group--list-layout">
+    <ul aria-label="Buttons">
+        <li>
+            <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">Title</span>
+                </span>
+            </button>
+        </li>
+        <li>
+            <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">Title</span>
+                </span>
+            </button>
+        </li>
+        <li>
+            <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">Title</span>
+                </span>
+            </button>
+        </li>
+        <li>
+            <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">Title</span>
+                </span>
+            </button>
+        </li>
+        <li>
+            <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">Title</span>
+                </span>
+            </button>
+        </li>
+    </ul>
+</div>
+`;
+
+export const titlaSubtitle = () => `
+<div class="toggle-button-group toggle-button-group--list-layout">
+    <ul aria-label="Buttons">
+        <li>
+            <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">Title</span>
+                    <span class="toggle-button__subtitle">Subtitle</span>
+                </span>
+            </button>
+        </li>
+        <li>
+            <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">Title</span>
+                    <span class="toggle-button__subtitle">Subtitle</span>
+                </span>
+            </button>
+        </li>
+        <li>
+            <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">Title</span>
+                    <span class="toggle-button__subtitle">Subtitle</span>
+                </span>
+            </button>
+        </li>
+        <li>
+            <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">Title</span>
+                    <span class="toggle-button__subtitle">Subtitle</span>
+                </span>
+            </button>
+        </li>
+        <li>
+            <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">Title</span>
+                    <span class="toggle-button__subtitle">Subtitle</span>
+                </span>
+            </button>
+        </li>
+    </ul>
+</div>
+`;
+
+export const mixedContent = () => `
+<div class="toggle-button-group toggle-button-group--list-layout">
+    <ul aria-label="Buttons">
+        <li>
+            <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">Title</span>
+                    <span class="toggle-button__subtitle">Subtitle</span>
+                </span>
+            </button>
+        </li>
+        <li>
+            <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">Title</span>
+                </span>
+            </button>
+        </li>
+        <li>
+            <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">Title</span>
+                </span>
+            </button>
+        </li>
+        <li>
+            <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">Title</span>
+                    <span class="toggle-button__subtitle">Subtitle</span>
+                </span>
+            </button>
+        </li>
+        <li>
+            <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">Title</span>
+                </span>
+            </button>
+        </li>
+    </ul>
+</div>
+`;
+
 export const _320container = () => `
 <div style="width: 320px; border: 1px dashed orange;">
     <div class="toggle-button-group toggle-button-group--list-layout">

package/src/sass/toggle-button-group/toggle-button-group.scss

@@ -91,7 +91,7 @@
 }
 
 .toggle-button-group--list-layout .toggle-button__image-container,
-.toggle-button-group--list-layout .toggle-button__content {
+.toggle-button-group--list-layout .toggle-button__content:not(:only-child) {
     align-self: flex-start;
 }
 

package/src/sass/variables/variables.less

@@ -0,0 +1,70 @@
+// Responsive Breakpoints
+// The first breakpoint simply indicates minimum support level. It should not be used with media queries.
+// Mobile-first means the default layout applies to mobile and there should be no mimimums even though
+// most mobile devices would be higher in screen width than the smallest viewport width.
+
+// The variables with underscores are to be considered constants. They can be read, but should not be modified.
+@_screen-size-XS: 320px;
+@_screen-size-SM: 512px;
+@_screen-size-MD: 768px;
+@_screen-size-LG: 1024px;
+@_screen-size-XL: 1280px;
+@_screen-size-XL2: 1440px;
+@_screen-size-XL3: 1680px;
+@_screen-size-XL4: 1920px;
+
+@_page-grid-max-width: 1584px;
+@_page-grid-number-cols-small: 8;
+@_page-grid-number-cols-large: 16;
+@_page-grid-outside-margins-small: 16px;
+@_page-grid-outside-margins-large: 32px;
+@_page-grid-outside-margins-max: 48px;
+@_page-grid-column-gaps-small: var(--spacing-100);
+@_page-grid-column-gaps-large: var(--spacing-200);
+@_page-grid-row-gaps-small: var(--spacing-100);
+@_page-grid-row-gaps-large: var(--spacing-200);
+
+@marketsans-url: "https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/";
+@marketsans-fontname: "Market Sans";
+@marketsans-filename-regular: "MarketSans-Regular-WebS";
+@marketsans-filename-bold: "MarketSans-SemiBold-WebS";
+
+@font-family-default: @marketsans-fontname, Arial, sans-serif;
+// TODO: remove these in next major version
+@font-weight-regular: 500;
+@font-weight-bold: 700;
+
+@font-size-12: 0.75rem;
+@font-size-14: 0.875rem;
+@font-size-16: 1rem;
+@font-size-18: 1.125rem; // secret size
+@font-size-20: 1.25rem;
+@font-size-24: 1.5rem;
+@font-size-30: 1.875rem;
+@font-size-36: 2.25rem;
+@font-size-46: 2.875rem;
+@font-size-64: 4rem;
+
+@spacing-25: @spacing-100 * 0.25;
+@spacing-50: @spacing-100 * 0.5;
+@spacing-75: @spacing-100 * 0.75;
+@spacing-100: 8px;
+@spacing-125: @spacing-100 * 1.25;
+@spacing-150: @spacing-100 * 1.5;
+@spacing-200: @spacing-100 * 2;
+@spacing-250: @spacing-100 * 2.5;
+@spacing-300: @spacing-100 * 3;
+@spacing-400: @spacing-100 * 4;
+@spacing-450: @spacing-100 * 4.5;
+@spacing-600: @spacing-100 * 6;
+@spacing-700: @spacing-100 * 7;
+@spacing-800: @spacing-100 * 8;
+
+@font-size-giant-3: @font-size-46;
+@font-size-giant-2: @font-size-36;
+@font-size-giant-1: @font-size-30;
+@font-size-large-2: @font-size-24;
+@font-size-large-1: @font-size-20;
+@font-size-medium: @font-size-16;
+@font-size-regular: @font-size-14;
+@font-size-small: @font-size-12;

package/.changeset/bright-kiwis-repeat.md

@@ -1,5 +0,0 @@
----
-"@ebay/skin": major
----
-
-refactor: removed all duplicate icon classes and added icon--{nn} classes

package/.changeset/chilled-games-stare.md

@@ -1,5 +0,0 @@
----
-"@ebay/skin": patch
----
-
-feat: added sass support and removed less support

package/.changeset/gold-radios-reply.md

@@ -1,5 +0,0 @@
----
-"@ebay/skin": major
----
-
-chore: removed deprecations

package/.changeset/light-lions-explode.md

@@ -1,5 +0,0 @@
----
-"@ebay/skin": major
----
-
-tokens: added tokens, colors, deprecations

package/.changeset/pre.json

@@ -1,15 +0,0 @@
-{
-    "mode": "pre",
-    "tag": "next",
-    "initialVersions": {
-        "@ebay/skin": "17.5.0"
-    },
-    "changesets": [
-        "bright-kiwis-repeat",
-        "chilled-games-stare",
-        "gold-radios-reply",
-        "light-lions-explode",
-        "ten-rockets-double",
-        "wild-donkeys-attack"
-    ]
-}

package/.changeset/ten-rockets-double.md

@@ -1,5 +0,0 @@
----
-"@ebay/skin": minor
----
-
-feat(donut-chart): new module

package/.changeset/wild-donkeys-attack.md

@@ -1,5 +0,0 @@
----
-"@ebay/skin": major
----
-
-toggle-button-group: reworked responsiveness and added equal button heights