@ebay/skin 17.5.0-next.0 → 18.0.0-next.0

package/src/{less/switch/switch.less → sass/switch/switch.scss}

@@ -1,5 +1,5 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
 
 .switch {
     box-sizing: border-box;
@@ -18,8 +18,12 @@ span.switch {
 
 span.switch__button {
     align-self: center;
-    .background-color-token(switch-unchecked-background-color, color-background-secondary);
-    .border-color-token(switch-border-color, color-stroke-strong);
+    @include background-color-token(
+        switch-unchecked-background-color,
+        color-background-secondary
+    );
+    @include border-color-token(switch-border-color, color-stroke-strong);
+
     border-radius: 400px;
     border-style: solid;
     border-width: 1px;
@@ -32,8 +36,15 @@ span.switch__button {
     width: 40px;
 
     &::after {
-        .background-color-token(switch-foreground-color, color-background-primary);
-        .border-color-token(switch-foreground-border-color, color-stroke-strong);
+        @include background-color-token(
+            switch-foreground-color,
+            color-background-primary
+        );
+        @include border-color-token(
+            switch-foreground-border-color,
+            color-stroke-strong
+        );
+
         border-radius: 50%;
         border-style: solid;
         border-width: 1px;
@@ -62,17 +73,22 @@ span.switch__control {
     z-index: 1;
 }
 
-// OFF > Track > Disabled
+/* OFF > Track > Disabled */
 input.switch__control[disabled] + span.switch__button,
 span.switch__control[aria-disabled="true"] + span.switch__button {
-    .border-color-token(switch-border-color, color-stroke-disabled);
+    @include border-color-token(switch-border-color, color-stroke-disabled);
 }
 
 input.switch__control {
     opacity: 0;
 
     &:focus + span.switch__button {
-        .outline-token(1px, auto, switch-custom-outline-color, color-foreground-secondary);
+        @include outline-token(
+            1px,
+            auto,
+            switch-custom-outline-color,
+            color-foreground-secondary
+        );
     }
 
     &:focus:not(:focus-visible) + span.switch__button {
@@ -80,32 +96,41 @@ input.switch__control {
     }
 }
 
-// OFF > Knob > Disabled
+/* OFF > Knob > Disabled */
 input.switch__control[disabled] + span.switch__button::after,
 span.switch__control[aria-disabled="true"] + span.switch__button::after {
-    .border-color-token(switch-border-color, color-background-disabled);
+    @include border-color-token(switch-border-color, color-background-disabled);
 }
 
 input.switch__control:not([disabled]):hover + span.switch__button,
 span.switch__control:not([aria-disabled="true"]):hover + span.switch__button,
 input.switch__control:not([disabled]):focus + span.switch__button,
 span.switch__control:not([aria-disabled="true"]):focus + span.switch__button {
-    .background-color-token(switch-unchecked-hover-background-color, color-state-secondary-hover);
+    @include background-color-token(
+        switch-unchecked-hover-background-color,
+        color-state-secondary-hover
+    );
 }
 
-// ON > Track
+/* ON > Track */
 input.switch__control:not([disabled]):checked + span.switch__button,
 span.switch__control:not([aria-disabled="true"])[aria-checked="true"]
     + span.switch__button {
-    .background-color-token(switch-checked-background-color, color-background-accent);
+    @include background-color-token(
+        switch-checked-background-color,
+        color-background-accent
+    );
 }
 
-// ON > Track > Disabled
+/* ON > Track > Disabled */
 input.switch__control[disabled]:checked + span.switch__button,
 span.switch__control[aria-disabled="true"][aria-checked="true"]
     + span.switch__button {
-    .background-color-token(switch-disabled-background-color, color-background-disabled);
-    .border-color-token(switch-border-color, color-background-disabled);
+    @include background-color-token(
+        switch-disabled-background-color,
+        color-background-disabled
+    );
+    @include border-color-token(switch-border-color, color-background-disabled);
 }
 
 span.switch__control:not([aria-disabled="true"]):focus-visible
@@ -122,16 +147,19 @@ span.switch__control:not([aria-disabled="true"])[aria-checked="true"]:hover
 input.switch__control:not([disabled]):checked:focus + span.switch__button,
 span.switch__control:not([aria-disabled="true"])[aria-checked="true"]:focus
     + span.switch__button {
-    .background-color-token(switch-checked-hover-background-color, color-state-accent-hover);
+    @include background-color-token(
+        switch-checked-hover-background-color,
+        color-state-accent-hover
+    );
 }
 
-// ON > Knob
+/* ON > Knob */
 input.switch__control:checked + span.switch__button::after,
 span.switch__control[aria-checked="true"] + span.switch__button::after {
     left: 15px;
 }
 
-// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+/* https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ */
 span.switch__control:focus:not(:focus-visible) {
     outline: 0;
 }

package/src/{less/tabs/tabs.less → sass/tabs/tabs.scss}

@@ -1,5 +1,5 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
 
 .tabs,
 .fake-tabs {
@@ -49,7 +49,11 @@ div.tabs__item[role="tab"] > span {
 
 div.tabs__item[role="tab"] > span,
 li.fake-tabs__item > a {
-    .color-token(tabs-item-foreground-color, color-foreground-secondary);
+    @include color-token(
+        tabs-item-foreground-color,
+        color-foreground-secondary
+    );
+
     display: inline-block;
 
     &::after {
@@ -59,21 +63,24 @@ li.fake-tabs__item > a {
         display: block;
         height: 2px;
         margin-top: var(--spacing-50);
-        position: absolute; // required to avoid focus outline issues
+        position: absolute; /* required to avoid focus outline issues */
         width: 100%;
     }
 }
 
 div.tabs__item[role="tab"][aria-selected="true"] > span,
 li.fake-tabs__item > a[aria-current] {
-    .color-token(tabs-item-selected-foreground-color, color-foreground-primary);
+    @include color-token(
+        tabs-item-selected-foreground-color,
+        color-foreground-primary
+    );
 
     &::after {
         background-color: currentColor;
     }
 }
 
-// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+/* https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ */
 div.tabs__item[role="tab"]:focus,
 li.fake-tabs__item a:focus {
     &:not(:focus-visible) {
@@ -85,7 +92,10 @@ div.tabs__item[role="tab"]:not([aria-selected="true"]):focus > span,
 div.tabs__item[role="tab"]:not([aria-selected="true"]):hover > span,
 li.fake-tabs__item > a:not([aria-current]):focus,
 li.fake-tabs__item > a:not([aria-current]):hover {
-    .color-token(tabs-item-hover-foreground-color, color-foreground-secondary);
+    @include color-token(
+        tabs-item-hover-foreground-color,
+        color-foreground-secondary
+    );
 
     &::after {
         background-color: currentColor;

package/src/{less → sass}/textbox/stories/icon.stories.js

@@ -2,7 +2,7 @@ export default { title: "Skin/Textbox/Icon" };
 
 export const base = () => `
 <span class="textbox">
-    <svg class="icon icon--mail-24" width="16" height="16" aria-hidden="true">
+    <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
         <use href="#icon-mail-24"></use>
     </svg>
     <input class="textbox__control" type="text" placeholder="placeholder text" />
@@ -10,31 +10,31 @@ export const base = () => `
 `;
 
 export const end = () => `
-<span class="textbox textbox--icon-end">
+<span class="textbox">
     <input class="textbox__control" type="text" placeholder="placeholder text" />
-    <svg class="icon icon--mail-24" width="16" height="16" aria-hidden="true">
+    <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
         <use href="#icon-mail-24"></use>
     </svg>
 </span>
 `;
 
 export const dual = () => `
-<span class="textbox textbox--icon-end">
-    <svg class="icon icon--search-24" width="16" height="16" aria-hidden="true">
+<span class="textbox">
+    <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
         <use href="#icon-search-24"></use>
     </svg>
     <input class="textbox__control" type="text" placeholder="placeholder text" />
-    <svg class="icon icon--mail-24" width="16" height="16" aria-hidden="true">
+    <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
         <use href="#icon-mail-24"></use>
     </svg>
 </span>
 `;
 
 export const actionable = () => `
-<span class="textbox textbox--icon-end">
+<span class="textbox">
     <input class="textbox__control" type="text" placeholder="placeholder text" />
     <button class="icon-btn" type="button" aria-label="Choose Contact">
-        <svg aria-hidden="true" class="icon icon--mail-24" width="16" height="16">
+        <svg aria-hidden="true" class="icon icon--24" width="16" height="16">
             <use href="#icon-mail-24"></use>
         </svg>
     </button>
@@ -42,13 +42,13 @@ export const actionable = () => `
 `;
 
 export const dualActionable = () => `
-<span class="textbox textbox--icon-end">
-    <svg class="icon icon--search-24" width="16" height="16" aria-hidden="true">
+<span class="textbox">
+    <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
         <use href="#icon-search-24"></use>
     </svg>
     <input class="textbox__control" type="text" placeholder="placeholder text" />
     <button class="icon-btn" type="button" aria-label="Choose Contact">
-        <svg class="icon icon--mail-24" width="16" height="16" aria-hidden="true">
+        <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
             <use href="#icon-mail-24"></use>
         </svg>
     </button>
@@ -56,10 +56,10 @@ export const dualActionable = () => `
 `;
 
 export const actionableLarge = () => `
-<span class="textbox textbox--icon-end">
-    <input class="textbox__control textbox__control--large" type="text" placeholder="placeholder text" />
+<span class="textbox textbox--large">
+    <input class="textbox__control" type="text" placeholder="placeholder text" />
     <button class="icon-btn" type="button" aria-label="Choose Contact">
-        <svg aria-hidden="true" class="icon icon--mail-24" width="16" height="16">
+        <svg aria-hidden="true" class="icon icon--24" width="16" height="16">
             <use href="#icon-mail-24"></use>
         </svg>
     </button>
@@ -67,15 +67,29 @@ export const actionableLarge = () => `
 `;
 
 export const dualActionableLarge = () => `
-<span class="textbox textbox--icon-end">
-    <svg class="icon icon--search-24" width="16" height="16" aria-hidden="true">
+<span class="textbox textbox--large">
+    <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
         <use href="#icon-search-24"></use>
     </svg>
-    <input class="textbox__control textbox__control--large" type="text" placeholder="placeholder text" />
+    <input class="textbox__control" type="text" placeholder="placeholder text" />
     <button class="icon-btn" type="button" aria-label="Choose Contact">
-        <svg class="icon icon--mail-24" width="16" height="16" aria-hidden="true">
+        <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
             <use href="#icon-mail-24"></use>
         </svg>
     </button>
 </span>
 `;
+
+export const fullyDecorated = () => `
+<span class="textbox">
+    <svg class="icon icon--search-24" width="16" height="16" aria-hidden="true">
+        <use href="#icon-search-24"></use>
+    </svg>
+    <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>
+</span>
+`;

package/src/{less → sass}/textbox/stories/rtl/icon.stories.js

@@ -3,7 +3,7 @@ export default { title: "Skin/Textbox/RTL/Icon" };
 export const base = () => `
 <div dir="rtl">
     <span class="textbox">
-        <svg class="icon icon--mail-24" width="16" height="16" aria-hidden="true">
+        <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
             <use href="#icon-mail-24"></use>
         </svg>
         <input class="textbox__control" type="text" placeholder="placeholder text" />
@@ -13,9 +13,9 @@ export const base = () => `
 
 export const end = () => `
 <div dir="rtl">
-    <span class="textbox textbox--icon-end">
+    <span class="textbox">
         <input class="textbox__control" type="text" placeholder="placeholder text" />
-        <svg class="icon icon--mail-24" width="16" height="16" aria-hidden="true">
+        <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
             <use href="#icon-mail-24"></use>
         </svg>
     </span>
@@ -24,13 +24,13 @@ export const end = () => `
 
 export const dual = () => `
 <div dir="rtl">
-    <span class="textbox textbox--icon-end">
-        <svg class="icon icon--search-24" width="16" height="16" aria-hidden="true">
+    <span class="textbox">
+        <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
             <use href="#icon-search-24"></use>
         </svg>
 
         <input class="textbox__control" type="text" placeholder="placeholder text" />
-        <svg class="icon icon--mail-24" width="16" height="16" aria-hidden="true">
+        <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
             <use href="#icon-mail-24"></use>
         </svg>
     </span>
@@ -39,10 +39,10 @@ export const dual = () => `
 
 export const actionable = () => `
 <div dir="rtl">
-    <span class="textbox textbox--icon-end">
+    <span class="textbox">
         <input class="textbox__control" type="text" placeholder="placeholder text" />
         <button class="icon-btn" type="button" aria-label="Choose Contact">
-            <svg aria-hidden="true" class="icon icon--mail-24" width="16" height="16">
+            <svg aria-hidden="true" class="icon icon--24" width="16" height="16">
                 <use href="#icon-mail-24"></use>
             </svg>
         </button>
@@ -52,17 +52,33 @@ export const actionable = () => `
 
 export const dualActionable = () => `
 <div dir="rtl">
-    <span class="textbox textbox--icon-end">
-        <svg class="icon icon--search-24" width="16" height="16" aria-hidden="true">
+    <span class="textbox">
+        <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
             <use href="#icon-search-24"></use>
         </svg>
 
         <input class="textbox__control" type="text" placeholder="placeholder text" />
         <button class="icon-btn" type="button" aria-label="Choose Contact">
-            <svg class="icon icon--mail-24" width="16" height="16" aria-hidden="true">
+            <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
                 <use href="#icon-mail-24"></use>
             </svg>
         </button>
     </span>
 </div>
 `;
+
+export const fullyDecorated = () => `
+<div dir="rtl">
+    <span class="textbox">
+        <svg class="icon icon--search-24" width="16" height="16" aria-hidden="true">
+            <use href="#icon-search-24"></use>
+        </svg>
+        <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>
+    </span>
+</div>
+`;

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

@@ -0,0 +1,45 @@
+export default { title: "Skin/Textbox/RTL/Base" };
+
+export const singleLine = () => `
+<div dir="rtl">
+    <span class="textbox">
+        <input aria-label="Email Address" class="textbox__control" type="text" placeholder="placeholder text" />
+    </span>
+ </div>
+`;
+
+export const multiLine = () => `
+<div dir="rtl">
+    <span class="textbox">
+        <textarea aria-label="Description" class="textbox__control" placeholder="placeholder text"></textarea>
+    </span>
+</div>
+`;
+
+export const prefix = () => `
+<div dir="rtl">
+    <span class="textbox">
+        <span>$</span>
+        <input class="textbox__control" type="text" placeholder="placeholder text" />
+    </span>
+</div>
+`;
+
+export const suffix = () => `
+<div dir="rtl">
+    <span class="textbox">
+        <input class="textbox__control" type="text" placeholder="placeholder text" />
+        <span>%</span>
+    </span>
+</div>
+`;
+
+export const prefixAndSuffix = () => `
+<div dir="rtl">
+    <span class="textbox">
+        <span>$</span>
+        <input class="textbox__control" type="text" placeholder="placeholder text" />
+        <span>/lb</span>
+    </span>
+</div>
+`;

package/src/{less → sass}/textbox/stories/textbox.stories.js

@@ -47,13 +47,13 @@ export const inheritColor = () => `
 `;
 
 export const error = () => `
-<span class="textbox">
+<span class="textbox textbox--invalid">
     <input class="textbox__control" type="text"  aria-invalid="true" placeholder="placeholder text" />
 </span>
 `;
 
 export const errorWithValue = () => `
-<span class="textbox">
+<span class="textbox textbox--invalid">
     <input class="textbox__control" type="text" placeholder="placeholder text" aria-invalid="true" value="value" />
 </span>
 `;
@@ -69,3 +69,25 @@ export const textSpacing = () => `
     <input aria-label="Email Address" class="textbox__control" type="text" placeholder="placeholder text" />
 </span>
 `;
+
+export const prefix = () => `
+<span class="textbox">
+    <span class="textbox__prefix">$</span>
+    <input class="textbox__control" type="text" placeholder"0.00" />
+</span>
+`;
+
+export const suffix = () => `
+<span class="textbox">
+    <input class="textbox__control" type="text" placeholder="percentage" />
+    <span>%</span>
+</span>
+`;
+
+export const prefixAndSuffix = () => `
+<span class="textbox">
+    <span>$</span>
+    <input class="textbox__control" type="text" placeholder="0.00" />
+    <span>/lb</span>
+</span>
+`;