@ebay/skin 16.1.0 → 16.2.0-0

package/dist/segmented-buttons/segmented-buttons.css

@@ -0,0 +1,62 @@
+.segmented-buttons {
+  border: 1px solid var(--color-stroke-default);
+  border-radius: 24px;
+  max-width: 720px;
+  min-width: 215px;
+  padding: 4px;
+}
+.segmented-buttons > ul {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.segmented-buttons > ul > li {
+  display: flex;
+  flex: 1;
+}
+.segmented-buttons > ul > li:not(:first-child) {
+  margin-left: 8px;
+}
+.segmented-buttons__button {
+  background-color: transparent;
+  border: none;
+  border-radius: var(--btn-border-radius, calc(40px / 2));
+  font-size: 0.875rem;
+  min-height: 40px;
+  padding: 8px 16px;
+  width: 100%;
+}
+.segmented-buttons__button-cell {
+  align-items: center;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+.segmented-buttons__button svg.icon {
+  align-self: center;
+}
+.segmented-buttons__button svg.icon:first-child {
+  margin-right: 8px;
+}
+.segmented-buttons__button svg.icon:last-child {
+  margin-left: 8px;
+}
+.segmented-buttons__button svg.icon:only-child {
+  margin: 0;
+}
+.segmented-buttons__button[aria-current] {
+  background-color: var(--color-foreground-primary);
+  color: var(--color-foreground-on-inverse);
+}
+.segmented-buttons__button:not([aria-current]):active {
+  background-color: var(--color-state-primary-active);
+}
+.segmented-buttons__button:not([aria-current]):hover,
+.segmented-buttons__button:not([aria-current]):focus {
+  background-color: var(--color-state-primary-hover);
+}
+[dir="rtl"] .segmented-buttons > ul > li:not(:first-child) {
+  margin-left: 0;
+  margin-right: 8px;
+}

package/dist/svg/icon/icon-avatar-signed-out.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+    <circle cx="20" cy="20" r="20" fill="var(--color-background-secondary, #F7F7F7)"/>
+    <circle cx="20" cy="17.5" r="8.333" fill="var(--color-foreground-secondary, #707070)"/>
+    <path d="M7.67 35.748c2-4.84 6.767-8.248 12.33-8.248s10.33 3.407 12.33 8.249A19.914 19.914 0 0 1 20 40a19.914 19.914 0 0 1-12.33-4.252Z" fill="var(--color-foreground-secondary, #707070)"/>
+</svg>

package/dist/svg/icons.svg

@@ -380,6 +380,24 @@
       d="M11 0a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0V1a1 1 0 0 1 1-1ZM2.293 2.293a1 1 0 0 1 1.414 0l2 2a1 1 0 0 1-1.414 1.414l-2-2a1 1 0 0 1 0-1.414Zm15 1a1 1 0 1 1 1.414 1.414l-2 2a1 1 0 1 1-1.414-1.414l2-2ZM9.916 9.209l-.707.707 2.73 2.73.707-.706-2.73-2.73Zm4.144 4.145-.706.707 7.73 7.73.707-.707-7.73-7.73ZM8.855 7.442a1.5 1.5 0 0 1 2.121 0l12.582 12.582a1.5 1.5 0 0 1 0 2.12l-1.413 1.415a1.5 1.5 0 0 1-2.122 0L7.441 10.977a1.5 1.5 0 0 1 0-2.122l1.414-1.413ZM0 11a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1Zm6.707 4.293a1 1 0 0 1 0 1.414l-2 2a1 1 0 0 1-1.414-1.414l2-2a1 1 0 0 1 1.414 0Z"
     />
   </symbol>
+  <symbol viewBox="0 0 40 40" id="icon-avatar-signed-out">
+    <circle
+      cx="20"
+      cy="20"
+      r="20"
+      fill="var(--color-background-secondary, #F7F7F7)"
+    />
+    <circle
+      cx="20"
+      cy="17.5"
+      r="8.333"
+      fill="var(--color-foreground-secondary, #707070)"
+    />
+    <path
+      d="M7.67 35.748c2-4.84 6.767-8.248 12.33-8.248s10.33 3.407 12.33 8.249A19.914 19.914 0 0 1 20 40a19.914 19.914 0 0 1-12.33-4.252Z"
+      fill="var(--color-foreground-secondary, #707070)"
+    />
+  </symbol>
   <symbol viewBox="0 0 24 24" id="icon-bag-24">
     <path
       d="M17.996 6.775A6 6 0 0 0 6 7v2H4a1 1 0 0 0-.986.836l-2 12A1 1 0 0 0 2 23h20a1 1 0 0 0 .986-1.164l-2-12A1 1 0 0 0 20 9h-2V7l-.004-.225ZM16 11v2l.007.117A1 1 0 0 0 18 13v-2h1.153l1.667 10H3.18l1.667-10H6v2l.007.117A1 1 0 0 0 8 13v-2h8Zm0-2H8V7l.005-.2A4 4 0 0 1 16 7v2Z"

package/dist/tokens/evo-light.css

@@ -71,4 +71,18 @@
     --color-data-viz-tooltip-shadow-secondary: #0000002b;
     --color-scrim-image: rgba(0, 0, 0, 0.04);
     --color-scrim-background: rgba(0, 0, 0, 0.32);
+    --color-marketing-lime-foreground-4: var(--color-lime-7);
+    --color-marketing-lime-background-4: var(--color-lime-4);
+    --color-marketing-green-foreground-3: var(--color-green-7);
+    --color-marketing-green-background-3: var(--color-green-3);
+    --color-marketing-teal-foreground-3: var(--color-teal-7);
+    --color-marketing-teal-background-3: var(--color-teal-3);
+    --color-marketing-teal-foreground-5: var(--color-neutral-0);
+    --color-marketing-teal-background-5: var(--color-teal-5);
+    --color-marketing-yellow-foreground-3: var(--color-yellow-7);
+    --color-marketing-yellow-background-3: var(--color-yellow-3);
+    --color-marketing-orange-foreground-3: var(--color-orange-7);
+    --color-marketing-orange-background-3: var(--color-orange-3);
+    --color-marketing-magenta-foreground-4: var(--color-neutral-0);
+    --color-marketing-magenta-background-4: var(--color-magenta-4);
 }

package/dist/variables/variables.less

@@ -43,6 +43,7 @@
 @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;

package/index.browser.json

@@ -1,6 +1,7 @@
 {
   "dependencies": [
     "require: ./alert-dialog.js",
+    "require: ./avatar.js",
     "require: ./badge.js",
     "require: ./breadcrumbs.js",
     "require: ./button.js",
@@ -43,6 +44,7 @@
     "require: ./radio.js",
     "require: ./section-notice.js",
     "require: ./section-title.js",
+    "require: ./segmented-buttons.js",
     "require: ./select.js",
     "require: ./signal.js",
     "require: ./snackbar-dialog.js",

package/index.css

@@ -1,4 +1,5 @@
 @import "./alert-dialog.css";
+@import "./avatar.css";
 @import "./badge.css";
 @import "./breadcrumbs.css";
 @import "./button.css";
@@ -41,6 +42,7 @@
 @import "./radio.css";
 @import "./section-notice.css";
 @import "./section-title.css";
+@import "./segmented-buttons.css";
 @import "./select.css";
 @import "./signal.css";
 @import "./snackbar-dialog.css";

package/index.js

@@ -1,4 +1,5 @@
 require('./alert-dialog.js');
+require('./avatar.js');
 require('./badge.js');
 require('./breadcrumbs.js');
 require('./button.js');
@@ -41,6 +42,7 @@ require('./progress-stepper.js');
 require('./radio.js');
 require('./section-notice.js');
 require('./section-title.js');
+require('./segmented-buttons.js');
 require('./select.js');
 require('./signal.js');
 require('./snackbar-dialog.js');

package/index.mjs

@@ -1,4 +1,5 @@
 import './alert-dialog.css';
+import './avatar.css';
 import './badge.css';
 import './breadcrumbs.css';
 import './button.css';
@@ -41,6 +42,7 @@ import './progress-stepper.css';
 import './radio.css';
 import './section-notice.css';
 import './section-title.css';
+import './segmented-buttons.css';
 import './select.css';
 import './signal.css';
 import './snackbar-dialog.css';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "16.1.0",
+    "version": "16.2.0-0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [

package/segmented-buttons.browser.json

@@ -0,0 +1 @@
+{ "dependencies": ["require: ./segmented-buttons.js"] }

package/segmented-buttons.css

@@ -0,0 +1 @@
+@import "./dist/segmented-buttons/segmented-buttons.css";

package/segmented-buttons.js

@@ -0,0 +1 @@
+require('./dist/segmented-buttons/segmented-buttons.css');

package/segmented-buttons.mjs

@@ -0,0 +1 @@
+import './dist/segmented-buttons/segmented-buttons.css';

package/src/less/avatar/avatar.less

@@ -0,0 +1,111 @@
+@import "../variables/variables.less";
+
+.avatar {
+    align-items: center;
+    background-color: var(--color-marketing-teal-background-5);
+    border-radius: 50%;
+    color: var(--color-marketing-teal-foreground-5);
+    display: inline-flex;
+    font-size: @font-size-large-2;
+    font-weight: @font-weight-bold;
+    height: 48px;
+    justify-content: center;
+    line-height: 48px;
+    overflow: hidden;
+    width: 48px;
+}
+.avatar > svg {
+    height: 100%;
+    width: 100%;
+}
+
+.avatar > img {
+    height: 48px;
+    object-fit: cover;
+    width: 48px;
+}
+
+.avatar--teal {
+    background-color: var(--color-marketing-teal-background-5);
+    color: var(--color-marketing-teal-foreground-5);
+}
+
+.avatar--light-teal {
+    background-color: var(--color-marketing-teal-background-3);
+    color: var(--color-marketing-teal-foreground-3);
+}
+
+.avatar--green {
+    background-color: var(--color-marketing-green-background-3);
+    color: var(--color-marketing-green-foreground-3);
+}
+
+.avatar--lime {
+    background-color: var(--color-marketing-lime-background-4);
+    color: var(--color-marketing-lime-foreground-4);
+}
+
+.avatar--yellow {
+    background-color: var(--color-marketing-yellow-background-3);
+    color: var(--color-marketing-yellow-foreground-3);
+}
+
+.avatar--orange {
+    background-color: var(--color-marketing-orange-background-3);
+    color: var(--color-marketing-orange-foreground-3);
+}
+
+.avatar--magenta {
+    background-color: var(--color-marketing-magenta-background-4);
+    color: var(--color-marketing-magenta-foreground-4);
+}
+
+.avatar--32,
+.avatar--32 > img {
+    font-size: @font-size-medium;
+    height: 32px;
+    line-height: 32px;
+    width: 32px;
+}
+.avatar--40,
+.avatar--40 > img {
+    font-size: @font-size-large-1;
+    height: 40px;
+    line-height: 40px;
+    width: 40px;
+}
+.avatar--48,
+.avatar--48 > img {
+    font-size: @font-size-large-2;
+    height: 48px;
+    line-height: 48px;
+    width: 48px;
+}
+.avatar--56,
+.avatar--56 > img {
+    font-size: @font-size-giant-1;
+    height: 56px;
+    line-height: 56px;
+    width: 56px;
+}
+.avatar--64,
+.avatar--64 > img {
+    font-size: @font-size-giant-2;
+    height: 64px;
+    line-height: 64px;
+    width: 64px;
+}
+.avatar--96,
+.avatar--96 > img {
+    font-size: @font-size-giant-3;
+    height: 96px;
+    line-height: 96px;
+    width: 96px;
+}
+.avatar--128,
+.avatar--128 > img {
+    font-size: @font-size-64;
+    height: 128px;
+    line-height: 128px;
+    width: 128px;
+}

package/src/less/avatar/stories/avatar.stories.js

@@ -0,0 +1,265 @@
+export default { title: "Avatar" };
+
+export const base = () => /* HTML */ ` <div class="avatar">E</div> `;
+
+export const variations = () => /* HTML */ `
+    <div class="avatar avatar--teal" role="img" aria-label="Signed-in as Zed">
+        Z
+    </div>
+    <div
+        class="avatar avatar--light-teal"
+        role="img"
+        aria-label="Signed-in as Awesome Jack"
+    >
+        A
+    </div>
+    <div class="avatar avatar--green" aria-label="Signed-in as Bob">B</div>
+    <div class="avatar avatar--lime" aria-label="Signed-in as Carol12345">
+        C
+    </div>
+    <div class="avatar avatar--yellow" aria-label="Signed-in as DogLover">
+        D
+    </div>
+    <div class="avatar avatar--orange" aria-label="Signed-in as FooBar">F</div>
+    <div class="avatar avatar--magenta" aria-label="Signed-in as Goolio">G</div>
+`;
+
+export const withImage = () => /* HTML */ `
+    <div class="avatar" role="img" aria-label="Signed-in as Doggy">
+        <img
+            src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png"
+            alt="profile pic"
+        />
+    </div>
+    <div class="avatar avatar--128" role="img" aria-label="Signed-in as Doggy">
+        <img
+            src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png"
+            alt="profile pic"
+        />
+    </div>
+`;
+
+export const signedOut = () => /* HTML */ `
+    <div class="avatar" role="img" aria-label="Signed-Out">
+        <svg class="icon" focusable="false" aria-hidden="true">
+            <use href="#icon-avatar-signed-out"></use>
+        </svg>
+    </div>
+`;
+
+export const sizes = () => /* HTML */ `
+    <div>
+        <div
+            class="avatar avatar--32"
+            role="img"
+            aria-label="Signed-in as Harry Potter"
+        >
+            H
+        </div>
+        <div
+            class="avatar avatar--40"
+            role="img"
+            aria-label="Signed-in as Igquana"
+        >
+            I
+        </div>
+        <div
+            class="avatar avatar--48"
+            role="img"
+            aria-label="Signed-in as Josh123"
+        >
+            J
+        </div>
+        <div
+            class="avatar avatar--56"
+            role="img"
+            aria-label="Signed-in as KoolGuy"
+        >
+            K
+        </div>
+        <div class="avatar avatar--64" role="img" aria-label="Signed-in as Leo">
+            L
+        </div>
+        <div class="avatar avatar--96" role="img" aria-label="Signed-in as Me">
+            M
+        </div>
+        <div
+            class="avatar avatar--128"
+            role="img"
+            aria-label="Signed-in as Noir"
+        >
+            N
+        </div>
+    </div>
+`;
+
+export const sizesProfilePic = () => /* HTML */ `
+    <div>
+        <div
+            class="avatar avatar--32"
+            role="img"
+            aria-label="Signed-in as Doggy"
+        >
+            <img
+                src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png"
+                alt="profile pic"
+            />
+        </div>
+        <div
+            class="avatar avatar--40"
+            role="img"
+            aria-label="Signed-in as Doggy"
+        >
+            <img
+                src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png"
+                alt="profile pic"
+            />
+        </div>
+        <div
+            class="avatar avatar--48"
+            role="img"
+            aria-label="Signed-in as Doggy"
+        >
+            <img
+                src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png"
+                alt="profile pic"
+            />
+        </div>
+        <div
+            class="avatar avatar--56"
+            role="img"
+            aria-label="Signed-in as Doggy"
+        >
+            <img
+                src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png"
+                alt="profile pic"
+            />
+        </div>
+        <div
+            class="avatar avatar--64"
+            role="img"
+            aria-label="Signed-in as Doggy"
+        >
+            <img
+                src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png"
+                alt="profile pic"
+            />
+        </div>
+        <div
+            class="avatar avatar--96"
+            role="img"
+            aria-label="Signed-in as Doggy"
+        >
+            <img
+                src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png"
+                alt="profile pic"
+            />
+        </div>
+        <div
+            class="avatar avatar--128"
+            role="img"
+            aria-label="Signed-in as Doggy"
+        >
+            <img
+                src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png"
+                alt="profile pic"
+            />
+        </div>
+    </div>
+`;
+
+export const sizesIcon = () => /* HTML */ `
+    <div>
+        <div class="avatar avatar--32" role="img" aria-label="Signed-Out">
+            <svg class="icon" focusable="false" aria-hidden="true">
+                <use href="#icon-avatar-signed-out"></use>
+            </svg>
+        </div>
+        <div class="avatar avatar--40" role="img" aria-label="Signed-Out">
+            <svg class="icon" focusable="false" aria-hidden="true">
+                <use href="#icon-avatar-signed-out"></use>
+            </svg>
+        </div>
+        <div class="avatar avatar--48" role="img" aria-label="Signed-Out">
+            <svg class="icon" focusable="false" aria-hidden="true">
+                <use href="#icon-avatar-signed-out"></use>
+            </svg>
+        </div>
+        <div class="avatar avatar--56" role="img" aria-label="Signed-Out">
+            <svg class="icon" focusable="false" aria-hidden="true">
+                <use href="#icon-avatar-signed-out"></use>
+            </svg>
+        </div>
+        <div class="avatar avatar--64" role="img" aria-label="Signed-Out">
+            <svg class="icon" focusable="false" aria-hidden="true">
+                <use href="#icon-avatar-signed-out"></use>
+            </svg>
+        </div>
+        <div class="avatar avatar--96" role="img" aria-label="Signed-Out">
+            <svg class="icon" focusable="false" aria-hidden="true">
+                <use href="#icon-avatar-signed-out"></use>
+            </svg>
+        </div>
+        <div class="avatar avatar--128" role="img" aria-label="Signed-Out">
+            <svg class="icon" focusable="false" aria-hidden="true">
+                <use href="#icon-avatar-signed-out"></use>
+            </svg>
+        </div>
+    </div>
+`;
+
+export const combinations = () => /* HTML */ `
+    <div style="display: grid; grid-gap: 10px">
+        <div
+            class="avatar avatar--32"
+            role="img"
+            aria-label="Signed-in as Omega"
+        >
+            O
+        </div>
+        <div class="avatar avatar--40" role="img" aria-label="Signed-out">
+            <svg class="icon" focusable="false" aria-hidden="true">
+                <use href="#icon-avatar-signed-out"></use>
+            </svg>
+        </div>
+        <div
+            class="avatar avatar--48 avatar--green"
+            role="img"
+            aria-label="Signed-in as Queen"
+        >
+            Q
+        </div>
+        <div
+            class="avatar avatar--56"
+            role="img"
+            aria-label="Signed-in as Doggy"
+        >
+            <img
+                src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile.png"
+                alt="profile pic"
+            />
+        </div>
+        <div
+            class="avatar avatar--64"
+            role="img"
+            aria-label="Signed-in as Ryan"
+        >
+            R
+        </div>
+        <div
+            class="avatar avatar--96 avatar--magenta"
+            role="img"
+            aria-label="Signed-in as Sam"
+        >
+            S
+        </div>
+        <div
+            class="avatar avatar--128"
+            role="img"
+            aria-label="Signed-in as Turner"
+        >
+            T
+        </div>
+        <div></div>
+    </div>
+`;

package/src/less/bundles/skin-headless.less

@@ -3,6 +3,7 @@
 @import "../global/global.less";
 @import "../utility/utility.less";
 @import "../alert-dialog/alert-dialog.less";
+@import "../avatar/avatar.less";
 @import "../badge/badge.less";
 @import "../breadcrumbs/breadcrumbs.less";
 @import "../button/button.less";
@@ -44,6 +45,7 @@
 @import "../radio/radio.less";
 @import "../section-notice/section-notice.less";
 @import "../section-title/section-title.less";
+@import "../segmented-buttons/segmented-buttons.less";
 @import "../select/select.less";
 @import "../snackbar-dialog/snackbar-dialog.less";
 @import "../split-button/split-button.less";

package/src/less/button/button.less

@@ -64,6 +64,8 @@ a.fake-btn--fluid {
 .btn__cell,
 .fake-btn__cell {
     .btn-cell-base();
+    .btn-cell-fixed-height();
+    .btn-cell-truncated();
 
     justify-content: center;
 }

package/src/less/cta-button/cta-button.less

@@ -39,6 +39,8 @@ a.cta-btn--fluid {
 
 span.cta-btn__cell {
     .btn-cell-base();
+    .btn-cell-fixed-height();
+    .btn-cell-truncated();
 
     justify-content: center;
 }

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

@@ -70,11 +70,15 @@
     align-items: center;
     display: flex;
     width: 100%;
+}
 
+.btn-cell-fixed-height() {
     &--fixed-height {
         .btn-fixed-height();
     }
+}
 
+.btn-cell-truncated() {
     &--truncated {
         .btn-fixed-height();
     }