@ebay/skin 16.1.0 → 16.2.0-0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.storybook/preview-head.html +18 -0
- package/_cdn/skin/v16.2.0-0/skin-default.min.css +6 -0
- package/_cdn/skin/v16.2.0-0/skin-full.min.css +6 -0
- package/_cdn/skin/v16.2.0-0/skin-headless.min.css +6 -0
- package/_cdn/skin/v16.2.0-0/skin-legacy.min.css +6 -0
- package/avatar.browser.json +1 -0
- package/avatar.css +1 -0
- package/avatar.js +1 -0
- package/avatar.mjs +1 -0
- package/dist/avatar/avatar.css +100 -0
- package/dist/legacy-tokens/ds4-light.css +14 -0
- package/dist/segmented-buttons/segmented-buttons.css +62 -0
- package/dist/svg/icon/icon-avatar-signed-out.svg +5 -0
- package/dist/svg/icons.svg +18 -0
- package/dist/tokens/evo-light.css +14 -0
- package/dist/variables/variables.less +1 -0
- package/index.browser.json +2 -0
- package/index.css +2 -0
- package/index.js +2 -0
- package/index.mjs +2 -0
- package/package.json +1 -1
- package/segmented-buttons.browser.json +1 -0
- package/segmented-buttons.css +1 -0
- package/segmented-buttons.js +1 -0
- package/segmented-buttons.mjs +1 -0
- package/src/less/avatar/avatar.less +111 -0
- package/src/less/avatar/stories/avatar.stories.js +265 -0
- package/src/less/bundles/skin-headless.less +2 -0
- package/src/less/button/button.less +2 -0
- package/src/less/cta-button/cta-button.less +2 -0
- package/src/less/mixins/private/button-mixins.less +4 -0
- package/src/less/segmented-buttons/segmented-buttons.less +69 -0
- package/src/less/segmented-buttons/stories/segmented-buttons.stories.js +100 -0
- package/src/less/variables/variables.less +1 -0
- package/src/svg/icon/icon-avatar-signed-out.svg +5 -0
- package/src/svg/icons.svg +18 -0
- package/src/tokens/evo-light.css +14 -0
- package/svg.svg +18 -0
- package/_cdn/skin/v16.1.0/skin-default.min.css +0 -6
- package/_cdn/skin/v16.1.0/skin-full.min.css +0 -6
- package/_cdn/skin/v16.1.0/skin-headless.min.css +0 -6
- package/_cdn/skin/v16.1.0/skin-legacy.min.css +0 -6
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
@import "../variables/variables.less";
|
|
2
|
+
@import "../mixins/private/button-mixins.less";
|
|
3
|
+
|
|
4
|
+
.segmented-buttons {
|
|
5
|
+
border: 1px solid var(--color-stroke-default);
|
|
6
|
+
border-radius: 24px;
|
|
7
|
+
max-width: 720px;
|
|
8
|
+
min-width: 215px;
|
|
9
|
+
padding: 4px;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.segmented-buttons > ul {
|
|
13
|
+
display: flex;
|
|
14
|
+
list-style: none;
|
|
15
|
+
margin: 0;
|
|
16
|
+
padding: 0;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.segmented-buttons > ul > li {
|
|
20
|
+
display: flex;
|
|
21
|
+
flex: 1;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.segmented-buttons > ul > li:not(:first-child) {
|
|
25
|
+
margin-left: 8px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.segmented-buttons__button {
|
|
29
|
+
background-color: transparent;
|
|
30
|
+
border: none;
|
|
31
|
+
border-radius: var(--btn-border-radius, calc(@button-height-small / 2));
|
|
32
|
+
font-size: @font-size-regular;
|
|
33
|
+
min-height: @button-height-small;
|
|
34
|
+
padding: 8px 16px;
|
|
35
|
+
width: 100%;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.segmented-buttons__button-cell {
|
|
39
|
+
.btn-cell-base();
|
|
40
|
+
|
|
41
|
+
justify-content: center;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.segmented-buttons__button svg.icon {
|
|
45
|
+
.btn-icon-base();
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.segmented-buttons__button[aria-current] {
|
|
49
|
+
background-color: var(--color-foreground-primary);
|
|
50
|
+
color: var(--color-foreground-on-inverse);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.segmented-buttons__button:not([aria-current]) {
|
|
54
|
+
&:active {
|
|
55
|
+
background-color: var(--color-state-primary-active);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
&:hover,
|
|
59
|
+
&:focus {
|
|
60
|
+
background-color: var(--color-state-primary-hover);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
[dir="rtl"] {
|
|
65
|
+
.segmented-buttons > ul > li:not(:first-child) {
|
|
66
|
+
margin-left: 0;
|
|
67
|
+
margin-right: 8px;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
export default { title: "Segmented Buttons" };
|
|
2
|
+
export const base = () => `
|
|
3
|
+
<div class="segmented-buttons">
|
|
4
|
+
<ul>
|
|
5
|
+
<li><button type="button" class="segmented-buttons__button" aria-current="true">Day</button></li>
|
|
6
|
+
<li><button type="button" class="segmented-buttons__button">Month</button></li>
|
|
7
|
+
<li><button type="button" class="segmented-buttons__button">Year</button></li>
|
|
8
|
+
</ul>
|
|
9
|
+
</div>
|
|
10
|
+
`;
|
|
11
|
+
|
|
12
|
+
export const shortItems = () => `
|
|
13
|
+
<div class="segmented-buttons">
|
|
14
|
+
<ul>
|
|
15
|
+
<li><button type="button" class="segmented-buttons__button">Q1</button></li>
|
|
16
|
+
<li><button type="button" class="segmented-buttons__button" aria-current="true">Q2</button></li>
|
|
17
|
+
<li><button type="button" class="segmented-buttons__button">Q3</button></li>
|
|
18
|
+
<li><button type="button" class="segmented-buttons__button">Q4</button></li>
|
|
19
|
+
</ul>
|
|
20
|
+
</div>
|
|
21
|
+
`;
|
|
22
|
+
|
|
23
|
+
export const withIcons = () => `
|
|
24
|
+
<div class="segmented-buttons">
|
|
25
|
+
<ul>
|
|
26
|
+
<li>
|
|
27
|
+
<button type="button" aria-current="true" class="segmented-buttons__button">
|
|
28
|
+
<span class="segmented-buttons__button-cell">
|
|
29
|
+
<svg aria-hidden="true" class="icon icon--full-view-24" focusable="false" height="16" width="16">
|
|
30
|
+
<use href="#icon-full-view-24"></use>
|
|
31
|
+
</svg>
|
|
32
|
+
<span>Desktop</span>
|
|
33
|
+
</span>
|
|
34
|
+
</button>
|
|
35
|
+
</li>
|
|
36
|
+
<li>
|
|
37
|
+
<button type="button" class="segmented-buttons__button">
|
|
38
|
+
<span class="segmented-buttons__button-cell">
|
|
39
|
+
<svg aria-hidden="true" class="icon icon--mobile-24" focusable="false" height="16" width="16">
|
|
40
|
+
<use href="#icon-mobile-24"></use>
|
|
41
|
+
</svg>
|
|
42
|
+
<span>Mobile</span>
|
|
43
|
+
</span>
|
|
44
|
+
</button>
|
|
45
|
+
</li>
|
|
46
|
+
</ul>
|
|
47
|
+
</div>
|
|
48
|
+
`;
|
|
49
|
+
|
|
50
|
+
export const inContainer = () => `
|
|
51
|
+
<div style="width: 300px;">
|
|
52
|
+
<div class="segmented-buttons">
|
|
53
|
+
<ul>
|
|
54
|
+
<li><button type="button" class="segmented-buttons__button">Q1</button></li>
|
|
55
|
+
<li><button type="button" class="segmented-buttons__button">Q2</button></li>
|
|
56
|
+
<li><button type="button" class="segmented-buttons__button" aria-current="true">Q3</button></li>
|
|
57
|
+
<li><button type="button" class="segmented-buttons__button">Q4</button></li>
|
|
58
|
+
</ul>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
`;
|
|
62
|
+
|
|
63
|
+
export const inheritFontSize = () => `
|
|
64
|
+
<div style="font-size: 300%">
|
|
65
|
+
<div class="segmented-buttons">
|
|
66
|
+
<ul>
|
|
67
|
+
<li><button type="button" class="segmented-buttons__button">Q1</button></li>
|
|
68
|
+
<li><button type="button" class="segmented-buttons__button">Q2</button></li>
|
|
69
|
+
<li><button type="button" class="segmented-buttons__button" aria-current="true">Q3</button></li>
|
|
70
|
+
<li><button type="button" class="segmented-buttons__button">Q4</button></li>
|
|
71
|
+
</ul>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
`;
|
|
75
|
+
|
|
76
|
+
export const inheritColors = () => `
|
|
77
|
+
<div style="color:red;">
|
|
78
|
+
<div class="segmented-buttons">
|
|
79
|
+
<ul>
|
|
80
|
+
<li><button type="button" class="segmented-buttons__button">Q1</button></li>
|
|
81
|
+
<li><button type="button" class="segmented-buttons__button">Q2</button></li>
|
|
82
|
+
<li><button type="button" class="segmented-buttons__button" aria-current="true">Q3</button></li>
|
|
83
|
+
<li><button type="button" class="segmented-buttons__button">Q4</button></li>
|
|
84
|
+
</ul>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
`;
|
|
88
|
+
|
|
89
|
+
export const rtl = () => `
|
|
90
|
+
<div dir="rtl">
|
|
91
|
+
<div class="segmented-buttons">
|
|
92
|
+
<ul>
|
|
93
|
+
<li><button type="button" class="segmented-buttons__button">Q1</button></li>
|
|
94
|
+
<li><button type="button" class="segmented-buttons__button">Q2</button></li>
|
|
95
|
+
<li><button type="button" class="segmented-buttons__button" aria-current="true">Q3</button></li>
|
|
96
|
+
<li><button type="button" class="segmented-buttons__button">Q4</button></li>
|
|
97
|
+
</ul>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
`;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
|
|
2
|
+
<circle cx="20" cy="20" r="20" fill="var(--color-background-secondary, #F7F7F7)"/>
|
|
3
|
+
<circle cx="20" cy="17.5" r="8.333" fill="var(--color-foreground-secondary, #707070)"/>
|
|
4
|
+
<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)"/>
|
|
5
|
+
</svg>
|
package/src/svg/icons.svg
CHANGED
|
@@ -380,6 +380,24 @@
|
|
|
380
380
|
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"
|
|
381
381
|
/>
|
|
382
382
|
</symbol>
|
|
383
|
+
<symbol viewBox="0 0 40 40" id="icon-avatar-signed-out">
|
|
384
|
+
<circle
|
|
385
|
+
cx="20"
|
|
386
|
+
cy="20"
|
|
387
|
+
r="20"
|
|
388
|
+
fill="var(--color-background-secondary, #F7F7F7)"
|
|
389
|
+
/>
|
|
390
|
+
<circle
|
|
391
|
+
cx="20"
|
|
392
|
+
cy="17.5"
|
|
393
|
+
r="8.333"
|
|
394
|
+
fill="var(--color-foreground-secondary, #707070)"
|
|
395
|
+
/>
|
|
396
|
+
<path
|
|
397
|
+
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"
|
|
398
|
+
fill="var(--color-foreground-secondary, #707070)"
|
|
399
|
+
/>
|
|
400
|
+
</symbol>
|
|
383
401
|
<symbol viewBox="0 0 24 24" id="icon-bag-24">
|
|
384
402
|
<path
|
|
385
403
|
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/src/tokens/evo-light.css
CHANGED
|
@@ -71,4 +71,18 @@
|
|
|
71
71
|
--color-data-viz-tooltip-shadow-secondary: #0000002b;
|
|
72
72
|
--color-scrim-image: rgba(0, 0, 0, 0.04);
|
|
73
73
|
--color-scrim-background: rgba(0, 0, 0, 0.32);
|
|
74
|
+
--color-marketing-lime-foreground-4: var(--color-lime-7);
|
|
75
|
+
--color-marketing-lime-background-4: var(--color-lime-4);
|
|
76
|
+
--color-marketing-green-foreground-3: var(--color-green-7);
|
|
77
|
+
--color-marketing-green-background-3: var(--color-green-3);
|
|
78
|
+
--color-marketing-teal-foreground-3: var(--color-teal-7);
|
|
79
|
+
--color-marketing-teal-background-3: var(--color-teal-3);
|
|
80
|
+
--color-marketing-teal-foreground-5: var(--color-neutral-0);
|
|
81
|
+
--color-marketing-teal-background-5: var(--color-teal-5);
|
|
82
|
+
--color-marketing-yellow-foreground-3: var(--color-yellow-7);
|
|
83
|
+
--color-marketing-yellow-background-3: var(--color-yellow-3);
|
|
84
|
+
--color-marketing-orange-foreground-3: var(--color-orange-7);
|
|
85
|
+
--color-marketing-orange-background-3: var(--color-orange-3);
|
|
86
|
+
--color-marketing-magenta-foreground-4: var(--color-neutral-0);
|
|
87
|
+
--color-marketing-magenta-background-4: var(--color-magenta-4);
|
|
74
88
|
}
|
package/svg.svg
CHANGED
|
@@ -380,6 +380,24 @@
|
|
|
380
380
|
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"
|
|
381
381
|
/>
|
|
382
382
|
</symbol>
|
|
383
|
+
<symbol viewBox="0 0 40 40" id="icon-avatar-signed-out">
|
|
384
|
+
<circle
|
|
385
|
+
cx="20"
|
|
386
|
+
cy="20"
|
|
387
|
+
r="20"
|
|
388
|
+
fill="var(--color-background-secondary, #F7F7F7)"
|
|
389
|
+
/>
|
|
390
|
+
<circle
|
|
391
|
+
cx="20"
|
|
392
|
+
cy="17.5"
|
|
393
|
+
r="8.333"
|
|
394
|
+
fill="var(--color-foreground-secondary, #707070)"
|
|
395
|
+
/>
|
|
396
|
+
<path
|
|
397
|
+
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"
|
|
398
|
+
fill="var(--color-foreground-secondary, #707070)"
|
|
399
|
+
/>
|
|
400
|
+
</symbol>
|
|
383
401
|
<symbol viewBox="0 0 24 24" id="icon-bag-24">
|
|
384
402
|
<path
|
|
385
403
|
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"
|