@ebay/skin 16.1.0 → 16.2.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",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -27,8 +27,8 @@
         "build:jekyll": "bundler exec jekyll build --incremental --config docs/_config.yml,docs/_config.localhost.yml",
         "build:site": "npm run copy:svgToDocs && npm run build:jekyll",
         "build:storybook": "npm run copy:assetsToStorybook && npm run build:storybook:ds6",
-        "build:storybook:ds4": "cross-env STORYBOOK_DS=4 build-storybook -o ./docs/ds4/storybook",
-        "build:storybook:ds6": "cross-env STORYBOOK_DS=6 build-storybook -o ./docs/storybook",
+        "build:storybook:ds4": "cross-env STORYBOOK_DS=4 storybook build -o ./docs/ds4/storybook",
+        "build:storybook:ds6": "cross-env STORYBOOK_DS=6 storybook build -o ./docs/storybook",
         "clean": "rimraf _cdn _site .cache .tmp .jekyll npm-debug.log.* .DS_Store",
         "compileModule": "npx gulp compileModule --name $NAME",
         "bundle": "npm run bundle:js && npm run bundle:css",
@@ -49,32 +49,31 @@
         "verify": "node scripts verify",
         "version": "node scripts/jekyll-config && npm run build:storybook && npm run build && git add -A dist docs",
         "transpile": "babel docs/src/js --out-dir docs/_babel",
-        "build:snapshots": "npm run copy:assetsToStorybook && cross-env STORYBOOK_DS=6 build-storybook -o ./.storybook-percy",
+        "build:snapshots": "npm run copy:assetsToStorybook && cross-env STORYBOOK_DS=6 storybook build -o ./.storybook-percy",
         "snapshots": "npm run build:snapshots && npx gulp runSnapshots --stories $STORIES",
         "snapshots:dry": "npm run build:snapshots && npx gulp runSnapshots --dry yes --stories $STORIES",
         "snapshots:execute": "npm run build:snapshots && percy storybook ./.storybook-percy --include",
         "snapshots:execute:dry": "percy storybook ./.storybook-percy --dry-run --include",
         "snapshots:all": "npm run build:snapshots && percy storybook ./.storybook-percy --include '.*'",
         "snapshots:all:dry": "npm run build:snapshots && percy storybook --dry-run ./.storybook-percy --include '.*'",
-        "storybook": "npm run copy:assetsToStorybook && cross-env STORYBOOK_DS=6 start-storybook -s ."
+        "storybook": "npm run copy:assetsToStorybook && cross-env STORYBOOK_DS=6 storybook dev -c .storybook"
     },
     "devDependencies": {
-        "@babel/cli": "^7.20.7",
-        "@babel/core": "^7.21.4",
-        "@babel/preset-env": "^7.21.4",
-        "@commitlint/cli": "^17.5.1",
-        "@commitlint/config-conventional": "^17.4.2",
-        "@ebay/browserslist-config": "^2.4.1",
-        "@percy/cli": "^1.21.0",
-        "@percy/storybook": "^4.3.4",
-        "@storybook/builder-webpack5": "^6.5.16",
-        "@storybook/html": "^6.5.16",
-        "@storybook/manager-webpack5": "^6.5.16",
+        "@babel/cli": "^7.21.5",
+        "@babel/core": "^7.21.8",
+        "@babel/preset-env": "^7.21.5",
+        "@commitlint/cli": "^17.6.3",
+        "@commitlint/config-conventional": "^17.6.3",
+        "@ebay/browserslist-config": "^2.6.0",
+        "@percy/cli": "^1.24.1",
+        "@percy/storybook": "^4.3.6",
+        "@storybook/html": "^7.0.12",
+        "@storybook/html-webpack5": "^7.0.12",
         "babel-loader": "^9.1.2",
-        "browser-sync": "^2.29.1",
+        "browser-sync": "^2.29.3",
         "btoa": "^1",
         "cross-env": "^7",
-        "eslint": "^8.37.0",
+        "eslint": "^8.40.0",
         "eslint-config-ebay": "^1",
         "eslint-config-prettier": "^8",
         "eslint-plugin-prettier": "^4",
@@ -85,11 +84,11 @@
         "gulp-rename": "^2",
         "husky": "^8.0.3",
         "jekyll": "^3.0.0-beta1",
-        "jsdom": "^21.1.0",
+        "jsdom": "^22.0.0",
         "less-loader": "^11.1.0",
         "less-plugin-autoprefix": "^2",
         "less-plugin-clean-css": "^1.5.1",
-        "lint-staged": "^13.0.2",
+        "lint-staged": "^13.2.2",
         "makeup-alert-dialog": "~0.2.0",
         "makeup-combobox": "~0.3.0",
         "makeup-confirm-dialog": "~0.2.0",
@@ -113,24 +112,25 @@
         "makeup-snackbar-dialog": "0.1.0",
         "makeup-switch": "~0.2.0",
         "makeup-toast-dialog": "0.1.0",
-        "mkdirp": "^2",
+        "mkdirp": "^3",
         "ncp": "^2",
         "npm-run-all": "^4",
         "postcss-less": "^6.0.0",
-        "postcss-loader": "^7.0.2",
-        "prettier": "^2.8.7",
-        "rimraf": "^4",
-        "stylelint": "^15.4.0",
-        "stylelint-config-standard": "^32",
+        "postcss-loader": "^7.3.0",
+        "prettier": "^2.8.8",
+        "rimraf": "^5",
+        "storybook": "^7.0.12",
+        "stylelint": "^15.6.2",
+        "stylelint-config-standard": "^33",
         "stylelint-no-unsupported-browser-features": "^6.0.1",
         "stylelint-order": "^6",
         "stylelint-prettier": "^3",
         "svgo": "^3.0.1",
-        "webpack": "^5.78.0",
-        "webpack-cli": "^5.0.1",
+        "webpack": "^5.83.0",
+        "webpack-cli": "^5.1.1",
         "winston": "^3.8.2",
         "xmlserializer": "^0.6.1",
-        "yargs": "^17.6.2"
+        "yargs": "^17.7.2"
     },
     "keywords": [
         "eBay",

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;
+}