@ebay/skin 15.1.1 → 15.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/.percy.yml +1 -1
- package/_cdn/skin/v15.2.0-0/skin-default.min.css +6 -0
- package/_cdn/skin/v15.2.0-0/skin-full.min.css +6 -0
- package/_cdn/skin/v15.2.0-0/skin-headless.min.css +6 -0
- package/_cdn/skin/v15.2.0-0/skin-legacy.min.css +6 -0
- package/dist/breadcrumbs/breadcrumbs.css +49 -22
- package/dist/cta-button/cta-button.css +13 -1
- package/dist/global/global.css +2 -2
- package/dist/icon-button/icon-button.css +11 -2
- package/dist/link/link.css +7 -7
- package/dist/mixins/typography-mixins.less +1 -1
- package/dist/pagination/pagination.css +0 -1
- package/dist/panel-dialog/panel-dialog.css +4 -0
- package/dist/snackbar-dialog/snackbar-dialog.css +5 -0
- package/dist/tokens/evo-core.css +1 -1
- package/dist/typography/typography.css +1 -1
- package/package.json +16 -16
- package/src/less/breadcrumbs/breadcrumbs.less +86 -52
- package/src/less/breadcrumbs/stories/button-overflow.stories.js +138 -0
- package/src/less/breadcrumbs/stories/link-overflow.stories.js +145 -0
- package/src/less/cta-button/cta-button.less +12 -2
- package/src/less/cta-button/stories/dimensions.stories.js +23 -0
- package/src/less/global/global.less +2 -2
- package/src/less/icon-button/icon-button.less +13 -2
- package/src/less/link/link.less +3 -6
- package/src/less/mixins/private/button-mixins.less +1 -0
- package/src/less/mixins/public/typography-mixins.less +1 -1
- package/src/less/pagination/pagination.less +0 -1
- package/src/less/panel-dialog/panel-dialog.less +7 -1
- package/src/less/panel-dialog/stories/panel-dialog.stories.js +86 -0
- package/src/less/snackbar-dialog/snackbar-dialog.less +7 -0
- package/src/tokens/evo-core.css +1 -1
- package/.storybook-percy/209.584439d336fd0eefb84a.manager.bundle.js +0 -2
- package/.storybook-percy/209.584439d336fd0eefb84a.manager.bundle.js.LICENSE.txt +0 -97
- package/.storybook-percy/229.6d094e9f2f362ea5b26e.manager.bundle.js +0 -1
- package/.storybook-percy/295.7da06599fa9d266b688b.manager.bundle.js +0 -1
- package/.storybook-percy/51.abd9945baf009cbd1bce.manager.bundle.js +0 -2
- package/.storybook-percy/51.abd9945baf009cbd1bce.manager.bundle.js.LICENSE.txt +0 -8
- package/.storybook-percy/551.1d556f0f1b92b6c7eb00.manager.bundle.js +0 -1
- package/.storybook-percy/701.f399e7b2.iframe.bundle.js +0 -2
- package/.storybook-percy/701.f399e7b2.iframe.bundle.js.LICENSE.txt +0 -29
- package/.storybook-percy/774.e0479623.iframe.bundle.js +0 -2
- package/.storybook-percy/774.e0479623.iframe.bundle.js.LICENSE.txt +0 -16
- package/.storybook-percy/807.8d205f2e8a202498173e.manager.bundle.js +0 -2
- package/.storybook-percy/807.8d205f2e8a202498173e.manager.bundle.js.LICENSE.txt +0 -31
- package/.storybook-percy/897.86e8496e5647c51ee7cb.manager.bundle.js +0 -2
- package/.storybook-percy/897.86e8496e5647c51ee7cb.manager.bundle.js.LICENSE.txt +0 -12
- package/.storybook-percy/935.3db88e4082ddd65d75d0.manager.bundle.js +0 -1
- package/.storybook-percy/favicon.ico +0 -0
- package/.storybook-percy/iframe.html +0 -423
- package/.storybook-percy/index.html +0 -59
- package/.storybook-percy/main.266ca197388a4c026123.manager.bundle.js +0 -1
- package/.storybook-percy/main.73718cd6.iframe.bundle.js +0 -1
- package/.storybook-percy/project.json +0 -1
- package/.storybook-percy/runtime~main.1528902b.iframe.bundle.js +0 -1
- package/.storybook-percy/runtime~main.79f19946a278ccc26ffb.manager.bundle.js +0 -1
- package/_cdn/skin/v15.1.1/skin-default.min.css +0 -6
- package/_cdn/skin/v15.1.1/skin-full.min.css +0 -6
- package/_cdn/skin/v15.1.1/skin-headless.min.css +0 -6
- package/_cdn/skin/v15.1.1/skin-legacy.min.css +0 -6
- package/dist/svg/icon/icon-star-empty.svg +0 -5
- package/dist/svg/icon/icon-star-full.svg +0 -5
- package/dist/svg/icon/icon-star-half.svg +0 -9
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export default { title: 'CTA Button/Dimensions' };
|
|
2
|
+
|
|
3
|
+
export const large = () => `
|
|
4
|
+
<a class="cta-btn cta-btn--large" href="http://www.ebay.com">
|
|
5
|
+
<span class="cta-btn__cell">
|
|
6
|
+
<span>Link</span>
|
|
7
|
+
<svg class="icon icon--cta" focusable="false" height="8" width="8" aria-hidden="true">
|
|
8
|
+
<use xlink:href="#icon-cta"></use>
|
|
9
|
+
</svg>
|
|
10
|
+
</span>
|
|
11
|
+
</a>
|
|
12
|
+
`;
|
|
13
|
+
|
|
14
|
+
export const largeFixedWidthTruncated = () => `
|
|
15
|
+
<a style="width: 200px;" class="cta-btn cta-btn--large cta-btn--truncated" href="http://www.ebay.com">
|
|
16
|
+
<span class="cta-btn__cell">
|
|
17
|
+
<span>Link with a lot of text that should wrap</span>
|
|
18
|
+
<svg class="icon icon--cta" focusable="false" height="8" width="8" aria-hidden="true">
|
|
19
|
+
<use xlink:href="#icon-cta"></use>
|
|
20
|
+
</svg>
|
|
21
|
+
</span>
|
|
22
|
+
</a>
|
|
23
|
+
`;
|
|
@@ -19,13 +19,13 @@ legend {
|
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
a {
|
|
22
|
-
.color-token(link-foreground-color-default, color-foreground-
|
|
22
|
+
.color-token(link-foreground-color-default, color-foreground-primary);
|
|
23
23
|
|
|
24
24
|
&:visited {
|
|
25
25
|
.color-token(link-foreground-color-visited, color-foreground-visited);
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
&:hover {
|
|
29
|
-
color
|
|
29
|
+
.color-token(link-foreground-color-visited, color-foreground-visited);
|
|
30
30
|
}
|
|
31
31
|
}
|
|
@@ -19,7 +19,6 @@ a.icon-link {
|
|
|
19
19
|
font-family: inherit;
|
|
20
20
|
height: 40px;
|
|
21
21
|
margin: 0;
|
|
22
|
-
min-width: 40px;
|
|
23
22
|
padding: 0;
|
|
24
23
|
vertical-align: text-bottom;
|
|
25
24
|
width: 40px;
|
|
@@ -27,7 +26,7 @@ a.icon-link {
|
|
|
27
26
|
> svg {
|
|
28
27
|
.fill-token(icon-button-icon-foreground-color, color-foreground-primary);
|
|
29
28
|
|
|
30
|
-
max-width:
|
|
29
|
+
max-width: 75%;
|
|
31
30
|
position: relative; // Safari centering
|
|
32
31
|
}
|
|
33
32
|
|
|
@@ -45,6 +44,18 @@ a.icon-link {
|
|
|
45
44
|
}
|
|
46
45
|
}
|
|
47
46
|
|
|
47
|
+
button.icon-btn.icon-btn--small,
|
|
48
|
+
a.icon-link.icon-link--small {
|
|
49
|
+
height: 32px;
|
|
50
|
+
width: 32px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
button.icon-btn.icon-btn--large,
|
|
54
|
+
a.icon-link.icon-link--large {
|
|
55
|
+
height: 48px;
|
|
56
|
+
width: 48px;
|
|
57
|
+
}
|
|
58
|
+
|
|
48
59
|
button.icon-btn--transparent,
|
|
49
60
|
a.icon-link--transparent {
|
|
50
61
|
background-color: transparent;
|
package/src/less/link/link.less
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
@import "../variables/variables.less";
|
|
2
2
|
@import "../mixins/private/token-mixins.less";
|
|
3
3
|
|
|
4
|
-
a.nav-link
|
|
4
|
+
a.nav-link,
|
|
5
|
+
a.standalone-link {
|
|
5
6
|
.color-token(nav-link-foreground-color, color-foreground-primary);
|
|
6
7
|
text-decoration: none;
|
|
7
8
|
|
|
@@ -19,7 +20,7 @@ a.nav-link {
|
|
|
19
20
|
button.fake-link {
|
|
20
21
|
background-color: transparent;
|
|
21
22
|
border: 0;
|
|
22
|
-
.color-token(fake-link-foreground-color, color-foreground-
|
|
23
|
+
.color-token(fake-link-foreground-color, color-foreground-primary);
|
|
23
24
|
font-family: inherit;
|
|
24
25
|
font-size: inherit;
|
|
25
26
|
padding: 0;
|
|
@@ -28,8 +29,4 @@ button.fake-link {
|
|
|
28
29
|
&[disabled] {
|
|
29
30
|
.color-token(fake-link-foreground-disabled-color, color-foreground-disabled);
|
|
30
31
|
}
|
|
31
|
-
|
|
32
|
-
&:hover:not(:disabled) {
|
|
33
|
-
color: var(--color-state-accent-hover);
|
|
34
|
-
}
|
|
35
32
|
}
|
|
@@ -4,8 +4,11 @@
|
|
|
4
4
|
|
|
5
5
|
.panel-dialog[role="dialog"] {
|
|
6
6
|
.dialog-base();
|
|
7
|
-
|
|
8
7
|
flex-direction: column;
|
|
8
|
+
|
|
9
|
+
// need to override base as panel dialog is the only one to scroll the content only
|
|
10
|
+
/* stylelint-disable-next-line declaration-block-no-duplicate-properties */
|
|
11
|
+
overflow-y: hidden;
|
|
9
12
|
}
|
|
10
13
|
|
|
11
14
|
.panel-dialog__window {
|
|
@@ -33,6 +36,9 @@
|
|
|
33
36
|
|
|
34
37
|
.panel-dialog__main {
|
|
35
38
|
.dialog-body-content();
|
|
39
|
+
|
|
40
|
+
height: 1px;
|
|
41
|
+
overflow-y: auto;
|
|
36
42
|
}
|
|
37
43
|
|
|
38
44
|
.panel-dialog__footer {
|
|
@@ -116,3 +116,89 @@ export const panelEndSecondaryButton = () => `
|
|
|
116
116
|
</div>
|
|
117
117
|
</div>
|
|
118
118
|
`;
|
|
119
|
+
|
|
120
|
+
export const panelScroll = () => `
|
|
121
|
+
<div aria-labelledby="panel-title" aria-modal="true" class="panel-dialog" role="dialog">
|
|
122
|
+
<div class="panel-dialog__window">
|
|
123
|
+
<div class="panel-dialog__header">
|
|
124
|
+
<h2 id="panel-title">Scrolling Panel</h2>
|
|
125
|
+
<button class="icon-btn panel-dialog__close" type="button" aria-label="Close Dialog">
|
|
126
|
+
<svg class="icon icon--close-small" aria-hidden="true">
|
|
127
|
+
<use xlink:href="#icon-close-small"></use>
|
|
128
|
+
</svg>
|
|
129
|
+
</button>
|
|
130
|
+
</div>
|
|
131
|
+
<div class="panel-dialog__main">
|
|
132
|
+
<h3>Heading</h3>
|
|
133
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
|
|
134
|
+
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
|
|
135
|
+
<h3>Heading</h3>
|
|
136
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
|
|
137
|
+
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
|
|
138
|
+
<h3>Heading</h3>
|
|
139
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
|
|
140
|
+
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
|
|
141
|
+
<h3>Heading</h3>
|
|
142
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
|
|
143
|
+
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
|
|
144
|
+
<h3>Heading</h3>
|
|
145
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
|
|
146
|
+
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
|
|
147
|
+
<h3>Heading</h3>
|
|
148
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
|
|
149
|
+
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
|
|
150
|
+
<h3>Heading</h3>
|
|
151
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
|
|
152
|
+
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
|
|
153
|
+
<h3>Heading</h3>
|
|
154
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
|
|
155
|
+
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
`;
|
|
160
|
+
|
|
161
|
+
export const panelScrollWithFooter = () => `
|
|
162
|
+
<div aria-labelledby="panel-title" aria-modal="true" class="panel-dialog" role="dialog">
|
|
163
|
+
<div class="panel-dialog__window">
|
|
164
|
+
<div class="panel-dialog__header">
|
|
165
|
+
<h2 id="panel-title">Scrolling Panel with Footer</h2>
|
|
166
|
+
<button class="icon-btn panel-dialog__close" type="button" aria-label="Close Dialog">
|
|
167
|
+
<svg class="icon icon--close-small" aria-hidden="true">
|
|
168
|
+
<use xlink:href="#icon-close-small"></use>
|
|
169
|
+
</svg>
|
|
170
|
+
</button>
|
|
171
|
+
</div>
|
|
172
|
+
<div class="panel-dialog__main">
|
|
173
|
+
<h3>Heading</h3>
|
|
174
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
|
|
175
|
+
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
|
|
176
|
+
<h3>Heading</h3>
|
|
177
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
|
|
178
|
+
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
|
|
179
|
+
<h3>Heading</h3>
|
|
180
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
|
|
181
|
+
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
|
|
182
|
+
<h3>Heading</h3>
|
|
183
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
|
|
184
|
+
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
|
|
185
|
+
<h3>Heading</h3>
|
|
186
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
|
|
187
|
+
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
|
|
188
|
+
<h3>Heading</h3>
|
|
189
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
|
|
190
|
+
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
|
|
191
|
+
<h3>Heading</h3>
|
|
192
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
|
|
193
|
+
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
|
|
194
|
+
<h3>Heading</h3>
|
|
195
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
|
|
196
|
+
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
|
|
197
|
+
</div>
|
|
198
|
+
<div class="panel-dialog__footer">
|
|
199
|
+
<button class="btn btn--primary">Submit</button>
|
|
200
|
+
<button class="btn">Cancel</button>
|
|
201
|
+
</div>
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
`;
|
|
@@ -65,6 +65,7 @@
|
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
.snackbar-dialog__actions .fake-link {
|
|
68
|
+
.color-token(snackbar-dialog-foreground-color, color-foreground-on-inverse);
|
|
68
69
|
text-decoration: none;
|
|
69
70
|
|
|
70
71
|
&::first-letter {
|
|
@@ -72,6 +73,12 @@
|
|
|
72
73
|
}
|
|
73
74
|
}
|
|
74
75
|
|
|
76
|
+
// this needs to be super specific to override base fake-link
|
|
77
|
+
.snackbar-dialog__actions button.fake-link:hover:not(:disabled) {
|
|
78
|
+
.color-token(snackbar-dialog-foreground-color, color-foreground-on-inverse);
|
|
79
|
+
text-decoration: underline;
|
|
80
|
+
}
|
|
81
|
+
|
|
75
82
|
@media (min-width: 601px) {
|
|
76
83
|
.snackbar-dialog {
|
|
77
84
|
bottom: 20px;
|
package/src/tokens/evo-core.css
CHANGED