@ebay/skin 15.1.0-0 → 15.1.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/.stylelintrc +1 -0
- package/_cdn/skin/{v15.1.0-0 → v15.1.0}/skin-default.min.css +2 -2
- package/_cdn/skin/{v15.1.0-0 → v15.1.0}/skin-full.min.css +2 -2
- package/_cdn/skin/{v15.1.0-0 → v15.1.0}/skin-headless.min.css +2 -2
- package/_cdn/skin/{v15.1.0-0 → v15.1.0}/skin-legacy.min.css +2 -2
- package/dist/drawer-dialog/drawer-dialog.css +1 -1
- package/dist/section-notice/section-notice.css +43 -16
- package/dist/tourtip/tourtip.css +5 -5
- package/dist/variables/variables.less +1 -0
- package/package.json +12 -12
- package/src/less/drawer-dialog/drawer-dialog.less +1 -1
- package/src/less/mixins/private/bubble-mixins.less +6 -6
- package/src/less/mixins/private/dialog-mixins.less +2 -2
- package/src/less/section-notice/section-notice.less +51 -16
- package/src/less/section-notice/stories/rtl.stories.js +66 -0
- package/src/less/section-notice/stories/section-notice.stories.js +43 -0
- package/src/less/section-notice/stories/test.stories.js +24 -0
- package/src/less/tourtip/tourtip.less +5 -5
- package/src/less/variables/variables.less +1 -0
|
@@ -2,22 +2,25 @@
|
|
|
2
2
|
background-color: var(--section-notice-default-background-color, var(--color-background-secondary));
|
|
3
3
|
border-radius: var(--section-notice-border-radius, var(--border-radius-50));
|
|
4
4
|
font-size: 0.875rem;
|
|
5
|
-
justify-content: flex-start;
|
|
6
5
|
margin: 8px 0;
|
|
7
6
|
padding: 16px;
|
|
8
7
|
}
|
|
9
8
|
div[role="region"].section-notice,
|
|
10
9
|
section.section-notice {
|
|
11
|
-
display:
|
|
10
|
+
display: grid;
|
|
11
|
+
grid-template-columns: 32px auto auto auto;
|
|
12
12
|
}
|
|
13
13
|
span[role="region"].section-notice {
|
|
14
|
-
display:
|
|
14
|
+
display: grid;
|
|
15
15
|
}
|
|
16
16
|
.section-notice__title {
|
|
17
17
|
font-size: 0.875rem;
|
|
18
18
|
font-weight: normal;
|
|
19
19
|
margin: 0;
|
|
20
20
|
}
|
|
21
|
+
.section-notice__cta a {
|
|
22
|
+
white-space: nowrap;
|
|
23
|
+
}
|
|
21
24
|
/* legacy version with separate bold heading */
|
|
22
25
|
.section-notice__title:not(:only-child) {
|
|
23
26
|
font-weight: bold;
|
|
@@ -38,28 +41,36 @@ span[role="region"].section-notice {
|
|
|
38
41
|
.section-notice a:hover {
|
|
39
42
|
color: var(--section-notice-foreground-color, var(--color-foreground-primary));
|
|
40
43
|
}
|
|
44
|
+
.section-notice .icon {
|
|
45
|
+
vertical-align: top;
|
|
46
|
+
}
|
|
41
47
|
.section-notice__header {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
padding-right:
|
|
48
|
+
grid-column: 1;
|
|
49
|
+
grid-row: 1;
|
|
50
|
+
height: 16px;
|
|
51
|
+
padding-right: 16px;
|
|
46
52
|
}
|
|
47
|
-
.section-notice__main
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
justify-content: center;
|
|
53
|
+
.section-notice__main {
|
|
54
|
+
grid-column: 2;
|
|
55
|
+
grid-row: 1;
|
|
56
|
+
padding-right: 16px;
|
|
52
57
|
}
|
|
53
58
|
.section-notice__footer {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
width: auto;
|
|
59
|
+
grid-column: 4;
|
|
60
|
+
grid-row: 1;
|
|
61
|
+
justify-self: end;
|
|
58
62
|
}
|
|
59
63
|
.section-notice__main p {
|
|
60
64
|
font-size: 0.875rem;
|
|
61
65
|
margin: 0;
|
|
62
66
|
}
|
|
67
|
+
p.section-notice__cta {
|
|
68
|
+
grid-column: 2;
|
|
69
|
+
grid-row: 2;
|
|
70
|
+
justify-self: start;
|
|
71
|
+
margin-right: 16px;
|
|
72
|
+
margin-top: 16px;
|
|
73
|
+
}
|
|
63
74
|
/* support legacy 6.5 notice with heading + paragaphs */
|
|
64
75
|
.section-notice__main .section-notice__title ~ p {
|
|
65
76
|
margin: 4px 0 0;
|
|
@@ -71,6 +82,14 @@ span[role="region"].section-notice {
|
|
|
71
82
|
flex-wrap: nowrap;
|
|
72
83
|
margin: 16px 0;
|
|
73
84
|
}
|
|
85
|
+
p.section-notice__cta {
|
|
86
|
+
grid-column: 4;
|
|
87
|
+
grid-row: 1;
|
|
88
|
+
justify-self: end;
|
|
89
|
+
margin-bottom: 0;
|
|
90
|
+
margin-top: 0;
|
|
91
|
+
padding-right: 16px;
|
|
92
|
+
}
|
|
74
93
|
.section-notice__footer {
|
|
75
94
|
margin-top: 0;
|
|
76
95
|
padding-left: 16px;
|
|
@@ -81,8 +100,16 @@ span[role="region"].section-notice {
|
|
|
81
100
|
padding-right: 0;
|
|
82
101
|
}
|
|
83
102
|
[dir="rtl"] .section-notice__footer {
|
|
103
|
+
justify-self: start;
|
|
84
104
|
margin-left: initial;
|
|
85
105
|
margin-right: auto;
|
|
86
106
|
padding-left: initial;
|
|
87
107
|
padding-right: 0;
|
|
88
108
|
}
|
|
109
|
+
[dir="rtl"] .section-notice__main {
|
|
110
|
+
padding-right: 0;
|
|
111
|
+
}
|
|
112
|
+
[dir="rtl"] p.page-notice__cta {
|
|
113
|
+
margin-left: 16px;
|
|
114
|
+
padding-left: 16px;
|
|
115
|
+
}
|
package/dist/tourtip/tourtip.css
CHANGED
|
@@ -8,7 +8,7 @@ span.tourtip {
|
|
|
8
8
|
display: inline-block;
|
|
9
9
|
}
|
|
10
10
|
.tourtip__overlay {
|
|
11
|
-
border-radius: var(--bubble-border-radius, var(--border-radius-
|
|
11
|
+
border-radius: var(--bubble-border-radius, var(--border-radius-100));
|
|
12
12
|
filter: var(--bubble-filter);
|
|
13
13
|
font-size: 14px;
|
|
14
14
|
max-width: 344px;
|
|
@@ -20,7 +20,7 @@ span.tourtip {
|
|
|
20
20
|
position: absolute;
|
|
21
21
|
}
|
|
22
22
|
.tourtip__mask {
|
|
23
|
-
border-radius: var(--bubble-border-radius, var(--border-radius-
|
|
23
|
+
border-radius: var(--bubble-border-radius, var(--border-radius-100));
|
|
24
24
|
position: relative;
|
|
25
25
|
z-index: 1;
|
|
26
26
|
background-color: var(--tourtip-background-color, var(--color-background-primary));
|
|
@@ -31,7 +31,7 @@ span.tourtip__mask {
|
|
|
31
31
|
}
|
|
32
32
|
.tourtip__cell {
|
|
33
33
|
display: flex;
|
|
34
|
-
padding:
|
|
34
|
+
padding: 16px;
|
|
35
35
|
word-break: break-word;
|
|
36
36
|
flex-wrap: wrap;
|
|
37
37
|
}
|
|
@@ -136,9 +136,9 @@ button.tourtip__close > svg {
|
|
|
136
136
|
top: 12px;
|
|
137
137
|
}
|
|
138
138
|
.tourtip__heading {
|
|
139
|
-
font-size:
|
|
139
|
+
font-size: 1.25rem;
|
|
140
140
|
font-weight: bold;
|
|
141
|
-
margin: 0 0
|
|
141
|
+
margin: 0 0 8px;
|
|
142
142
|
}
|
|
143
143
|
span.tourtip__heading {
|
|
144
144
|
display: block;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ebay/skin",
|
|
3
3
|
"description": "Skin - CSS modules that represent the brand eBay",
|
|
4
|
-
"version": "15.1.0
|
|
4
|
+
"version": "15.1.0",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "./index.js",
|
|
7
7
|
"maintainers": [
|
|
@@ -59,13 +59,13 @@
|
|
|
59
59
|
},
|
|
60
60
|
"devDependencies": {
|
|
61
61
|
"@babel/cli": "^7.18.10",
|
|
62
|
-
"@babel/core": "^7.19.
|
|
63
|
-
"@babel/preset-env": "^7.19.
|
|
62
|
+
"@babel/core": "^7.19.6",
|
|
63
|
+
"@babel/preset-env": "^7.19.4",
|
|
64
64
|
"@commitlint/cli": "^17.1.2",
|
|
65
65
|
"@commitlint/config-conventional": "^17.1.0",
|
|
66
66
|
"@ebay/browserslist-config": "^2.4.1",
|
|
67
|
-
"@percy/cli": "^1.
|
|
68
|
-
"@percy/storybook": "^4.3.
|
|
67
|
+
"@percy/cli": "^1.11.0",
|
|
68
|
+
"@percy/storybook": "^4.3.4",
|
|
69
69
|
"@storybook/builder-webpack5": "^6.5.12",
|
|
70
70
|
"@storybook/html": "^6.5.12",
|
|
71
71
|
"@storybook/manager-webpack5": "^6.5.12",
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"browser-sync": "^2.27.10",
|
|
74
74
|
"btoa": "^1",
|
|
75
75
|
"cross-env": "^7",
|
|
76
|
-
"eslint": "^8.
|
|
76
|
+
"eslint": "^8.25.0",
|
|
77
77
|
"eslint-config-ebay": "^1",
|
|
78
78
|
"eslint-config-prettier": "^8",
|
|
79
79
|
"eslint-plugin-prettier": "^4",
|
|
@@ -84,8 +84,8 @@
|
|
|
84
84
|
"gulp-rename": "^2",
|
|
85
85
|
"husky": "^8.0.1",
|
|
86
86
|
"jekyll": "^3.0.0-beta1",
|
|
87
|
-
"jsdom": "^20.0.
|
|
88
|
-
"less-loader": "^11.
|
|
87
|
+
"jsdom": "^20.0.1",
|
|
88
|
+
"less-loader": "^11.1.0",
|
|
89
89
|
"less-plugin-autoprefix": "^2",
|
|
90
90
|
"less-plugin-clean-css": "^1.5.1",
|
|
91
91
|
"lint-staged": "^13.0.2",
|
|
@@ -121,10 +121,10 @@
|
|
|
121
121
|
"postcss-loader": "^7.0.0",
|
|
122
122
|
"prettier": "^2.7.1",
|
|
123
123
|
"rimraf": "^3",
|
|
124
|
-
"stylelint": "^14.
|
|
124
|
+
"stylelint": "^14.14.0",
|
|
125
125
|
"stylelint-config-prettier": "^9",
|
|
126
|
-
"stylelint-config-standard": "^
|
|
127
|
-
"stylelint-no-unsupported-browser-features": "^
|
|
126
|
+
"stylelint-config-standard": "^29",
|
|
127
|
+
"stylelint-no-unsupported-browser-features": "^6.0.1",
|
|
128
128
|
"stylelint-order": "^5",
|
|
129
129
|
"stylelint-prettier": "^2",
|
|
130
130
|
"svgo": "^2.7.0",
|
|
@@ -132,7 +132,7 @@
|
|
|
132
132
|
"webpack-cli": "^4.10.0",
|
|
133
133
|
"winston": "^3.8.2",
|
|
134
134
|
"xmlserializer": "^0.6.1",
|
|
135
|
-
"yargs": "^17.
|
|
135
|
+
"yargs": "^17.6.0"
|
|
136
136
|
},
|
|
137
137
|
"keywords": [
|
|
138
138
|
"eBay",
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
.bubble() {
|
|
9
|
-
.border-radius-token(bubble-border-radius, border-radius-
|
|
8
|
+
.bubble(@border-radius-value: border-radius-50) {
|
|
9
|
+
.border-radius-token(bubble-border-radius, @border-radius-value);
|
|
10
10
|
|
|
11
11
|
filter: var(--bubble-filter);
|
|
12
12
|
font-size: 14px;
|
|
@@ -17,8 +17,8 @@
|
|
|
17
17
|
z-index: 1;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
.bubble-mask() {
|
|
21
|
-
.border-radius-token(bubble-border-radius, border-radius-
|
|
20
|
+
.bubble-mask(@border-radius-value: border-radius-50) {
|
|
21
|
+
.border-radius-token(bubble-border-radius, @border-radius-value);
|
|
22
22
|
position: relative;
|
|
23
23
|
z-index: 1;
|
|
24
24
|
}
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
// creates basic layout
|
|
31
|
-
.bubble-cell() {
|
|
31
|
+
.bubble-cell(@tourtip-spacing: @spacing-100 @spacing-200) {
|
|
32
32
|
display: flex;
|
|
33
|
-
padding: @
|
|
33
|
+
padding: @tourtip-spacing;
|
|
34
34
|
word-break: break-word;
|
|
35
35
|
}
|
|
36
36
|
|
|
@@ -46,11 +46,11 @@
|
|
|
46
46
|
max-width: calc(100% - 32px);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
.dialog-header-content() {
|
|
49
|
+
.dialog-header-content(@top-margin: @spacing-200) {
|
|
50
50
|
display: flex;
|
|
51
51
|
// Fix for Safari not honoring min-height
|
|
52
52
|
flex-shrink: 0;
|
|
53
|
-
margin: @
|
|
53
|
+
margin: @top-margin @spacing-200 0;
|
|
54
54
|
position: relative;
|
|
55
55
|
|
|
56
56
|
h1,
|
|
@@ -5,18 +5,19 @@
|
|
|
5
5
|
.background-color-token(section-notice-default-background-color, color-background-secondary);
|
|
6
6
|
.border-radius-token(section-notice-border-radius, border-radius-50);
|
|
7
7
|
font-size: @font-size-14;
|
|
8
|
-
justify-content: flex-start;
|
|
9
8
|
margin: 8px 0;
|
|
10
9
|
padding: 16px;
|
|
11
10
|
}
|
|
12
11
|
|
|
13
12
|
div[role="region"].section-notice,
|
|
14
13
|
section.section-notice {
|
|
15
|
-
display:
|
|
14
|
+
display: grid;
|
|
15
|
+
// provide explicit structure up front, create loose markup model
|
|
16
|
+
grid-template-columns: 32px auto auto auto;
|
|
16
17
|
}
|
|
17
18
|
|
|
18
19
|
span[role="region"].section-notice {
|
|
19
|
-
display:
|
|
20
|
+
display: grid;
|
|
20
21
|
}
|
|
21
22
|
|
|
22
23
|
.section-notice__title {
|
|
@@ -25,6 +26,11 @@ span[role="region"].section-notice {
|
|
|
25
26
|
margin: 0;
|
|
26
27
|
}
|
|
27
28
|
|
|
29
|
+
// force links with text having more than one word to remain on same line
|
|
30
|
+
.section-notice__cta a {
|
|
31
|
+
white-space: nowrap;
|
|
32
|
+
}
|
|
33
|
+
|
|
28
34
|
/* legacy version with separate bold heading */
|
|
29
35
|
.section-notice__title:not(:only-child) {
|
|
30
36
|
font-weight: bold;
|
|
@@ -50,25 +56,27 @@ span[role="region"].section-notice {
|
|
|
50
56
|
.color-token(section-notice-foreground-color, color-foreground-primary);
|
|
51
57
|
}
|
|
52
58
|
|
|
59
|
+
.section-notice .icon {
|
|
60
|
+
vertical-align: top;
|
|
61
|
+
}
|
|
62
|
+
|
|
53
63
|
.section-notice__header {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
padding-right: @spacing-
|
|
64
|
+
grid-column: 1;
|
|
65
|
+
grid-row: 1;
|
|
66
|
+
height: @spacing-200;
|
|
67
|
+
padding-right: @spacing-200;
|
|
58
68
|
}
|
|
59
69
|
|
|
60
|
-
.section-notice__main
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
justify-content: center;
|
|
70
|
+
.section-notice__main {
|
|
71
|
+
grid-column: 2;
|
|
72
|
+
grid-row: 1;
|
|
73
|
+
padding-right: @spacing-200;
|
|
65
74
|
}
|
|
66
75
|
|
|
67
76
|
.section-notice__footer {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
width: auto;
|
|
77
|
+
grid-column: 4;
|
|
78
|
+
grid-row: 1;
|
|
79
|
+
justify-self: end;
|
|
72
80
|
}
|
|
73
81
|
|
|
74
82
|
.section-notice__main p {
|
|
@@ -76,6 +84,14 @@ span[role="region"].section-notice {
|
|
|
76
84
|
margin: 0;
|
|
77
85
|
}
|
|
78
86
|
|
|
87
|
+
p.section-notice__cta {
|
|
88
|
+
grid-column: 2;
|
|
89
|
+
grid-row: 2;
|
|
90
|
+
justify-self: start;
|
|
91
|
+
margin-right: @spacing-200;
|
|
92
|
+
margin-top: @spacing-200;
|
|
93
|
+
}
|
|
94
|
+
|
|
79
95
|
/* support legacy 6.5 notice with heading + paragaphs */
|
|
80
96
|
.section-notice__main .section-notice__title ~ p {
|
|
81
97
|
margin: @spacing-50 0 0;
|
|
@@ -90,6 +106,15 @@ span[role="region"].section-notice {
|
|
|
90
106
|
margin: @spacing-200 0;
|
|
91
107
|
}
|
|
92
108
|
|
|
109
|
+
p.section-notice__cta {
|
|
110
|
+
grid-column: 4;
|
|
111
|
+
grid-row: 1;
|
|
112
|
+
justify-self: end;
|
|
113
|
+
margin-bottom: 0;
|
|
114
|
+
margin-top: 0;
|
|
115
|
+
padding-right: @spacing-200;
|
|
116
|
+
}
|
|
117
|
+
|
|
93
118
|
.section-notice__footer {
|
|
94
119
|
margin-top: 0;
|
|
95
120
|
padding-left: @spacing-200;
|
|
@@ -103,9 +128,19 @@ span[role="region"].section-notice {
|
|
|
103
128
|
}
|
|
104
129
|
|
|
105
130
|
.section-notice__footer {
|
|
131
|
+
justify-self: start;
|
|
106
132
|
margin-left: initial;
|
|
107
133
|
margin-right: auto;
|
|
108
134
|
padding-left: initial;
|
|
109
135
|
padding-right: 0;
|
|
110
136
|
}
|
|
137
|
+
|
|
138
|
+
.section-notice__main {
|
|
139
|
+
padding-right: 0;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
p.page-notice__cta {
|
|
143
|
+
margin-left: 16px;
|
|
144
|
+
padding-left: 16px;
|
|
145
|
+
}
|
|
111
146
|
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
export default { title: 'Section Notice/RTL' };
|
|
2
|
+
|
|
3
|
+
export const confirmationWithButton = () => `
|
|
4
|
+
<div dir="rtl">
|
|
5
|
+
<section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
|
|
6
|
+
<div class="page-notice__header">
|
|
7
|
+
<svg class="icon icon--confirmation-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Confirmation">
|
|
8
|
+
<use href="#icon-confirmation-filled-small"></use>
|
|
9
|
+
</svg>
|
|
10
|
+
</div>
|
|
11
|
+
<div class="page-notice__main">
|
|
12
|
+
<h2 class="page-notice__title">You have opted into eBay Pay</h2>
|
|
13
|
+
</div>
|
|
14
|
+
<div class="page-notice__footer">
|
|
15
|
+
<button class="fake-link">Dismiss</button>
|
|
16
|
+
</div>
|
|
17
|
+
</section>
|
|
18
|
+
</div>
|
|
19
|
+
`;
|
|
20
|
+
|
|
21
|
+
export const dismissableWithTitle = () => `
|
|
22
|
+
<div dir="rtl">
|
|
23
|
+
<section class="page-notice page-notice--information" role="region" aria-label="Information">
|
|
24
|
+
<div class="page-notice__header">
|
|
25
|
+
<svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
|
|
26
|
+
<use href="#icon-information-filled-small"></use>
|
|
27
|
+
</svg>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="page-notice__main">
|
|
30
|
+
<h3 class="page-notice__title">Notice Title</h3>
|
|
31
|
+
<p>Opt into eBay payments before Jan 12th to pay no selling fees.</p>
|
|
32
|
+
</div>
|
|
33
|
+
<p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
|
|
34
|
+
<div class="page-notice__footer">
|
|
35
|
+
<button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
|
|
36
|
+
<svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="14" width="14">
|
|
37
|
+
<use href="#icon-close-small"></use>
|
|
38
|
+
</svg>
|
|
39
|
+
</a>
|
|
40
|
+
</div>
|
|
41
|
+
</section>
|
|
42
|
+
</div>
|
|
43
|
+
`;
|
|
44
|
+
|
|
45
|
+
export const dismissableWithoutTitle = () => `
|
|
46
|
+
<div dir="rtl">
|
|
47
|
+
<section class="page-notice page-notice--information" role="region" aria-label="Information">
|
|
48
|
+
<div class="page-notice__header">
|
|
49
|
+
<svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
|
|
50
|
+
<use href="#icon-information-filled-small"></use>
|
|
51
|
+
</svg>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="page-notice__main">
|
|
54
|
+
<h3 class="page-notice__title">Opt into eBay payments before Jan 12th to pay no selling fees.</h3>
|
|
55
|
+
</div>
|
|
56
|
+
<p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
|
|
57
|
+
<div class="page-notice__footer">
|
|
58
|
+
<button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
|
|
59
|
+
<svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="14" width="14">
|
|
60
|
+
<use href="#icon-close-small"></use>
|
|
61
|
+
</svg>
|
|
62
|
+
</a>
|
|
63
|
+
</div>
|
|
64
|
+
</section>
|
|
65
|
+
</div>
|
|
66
|
+
`;
|
|
@@ -141,3 +141,46 @@ export const informationWithLink = () => `
|
|
|
141
141
|
</div>
|
|
142
142
|
</div>
|
|
143
143
|
`;
|
|
144
|
+
|
|
145
|
+
export const dismissableWithTitle = () => `
|
|
146
|
+
<section class="section-notice section-notice--information" role="region" aria-label="Information">
|
|
147
|
+
<div class="section-notice__header">
|
|
148
|
+
<svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
|
|
149
|
+
<use href="#icon-information-filled-small"></use>
|
|
150
|
+
</svg>
|
|
151
|
+
</div>
|
|
152
|
+
<div class="section-notice__main">
|
|
153
|
+
<h3 class="section-notice__title">Notice Title</h3>
|
|
154
|
+
<p>Opt into eBay payments before Jan 12th to pay no selling fees.</p>
|
|
155
|
+
</div>
|
|
156
|
+
<p class="section-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
|
|
157
|
+
<div class="section-notice__footer">
|
|
158
|
+
<button aria-label="Dismiss notification" class="fake-link section-notice__dismiss">
|
|
159
|
+
<svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="10" width="10">
|
|
160
|
+
<use href="#icon-close"></use>
|
|
161
|
+
</svg>
|
|
162
|
+
</a>
|
|
163
|
+
</div>
|
|
164
|
+
</section>
|
|
165
|
+
`;
|
|
166
|
+
|
|
167
|
+
export const dismissableWithoutTitle = () => `
|
|
168
|
+
<section class="section-notice section-notice--information" role="region" aria-label="Information">
|
|
169
|
+
<div class="section-notice__header">
|
|
170
|
+
<svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
|
|
171
|
+
<use href="#icon-information-filled-small"></use>
|
|
172
|
+
</svg>
|
|
173
|
+
</div>
|
|
174
|
+
<div class="section-notice__main">
|
|
175
|
+
<h3 class="section-notice__title">Opt into eBay payments before Jan 12th to pay no selling fees.</h3>
|
|
176
|
+
</div>
|
|
177
|
+
<p class="section-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
|
|
178
|
+
<div class="section-notice__footer">
|
|
179
|
+
<button aria-label="Dismiss notification" class="fake-link section-notice__dismiss">
|
|
180
|
+
<svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="10" width="10">
|
|
181
|
+
<use href="#icon-close"></use>
|
|
182
|
+
</svg>
|
|
183
|
+
</a>
|
|
184
|
+
</div>
|
|
185
|
+
</section>
|
|
186
|
+
`;
|
|
@@ -18,6 +18,30 @@ export const RTL = () => `
|
|
|
18
18
|
</div>
|
|
19
19
|
`;
|
|
20
20
|
|
|
21
|
+
export const RTLDismissable = () => `
|
|
22
|
+
<div dir="rtl">
|
|
23
|
+
<section class="page-notice page-notice--information" role="region" aria-label="Information">
|
|
24
|
+
<div class="page-notice__header">
|
|
25
|
+
<svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
|
|
26
|
+
<use href="#icon-information-filled-small"></use>
|
|
27
|
+
</svg>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="page-notice__main">
|
|
30
|
+
<h3 class="page-notice__title">Notice Title</h3>
|
|
31
|
+
<p>Opt into eBay payments before Jan 12th to pay no selling fees.</p>
|
|
32
|
+
</div>
|
|
33
|
+
<p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
|
|
34
|
+
<div class="page-notice__footer">
|
|
35
|
+
<button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
|
|
36
|
+
<svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="14" width="14">
|
|
37
|
+
<use href="#icon-close-small"></use>
|
|
38
|
+
</svg>
|
|
39
|
+
</a>
|
|
40
|
+
</div>
|
|
41
|
+
</section>
|
|
42
|
+
</div>
|
|
43
|
+
`;
|
|
44
|
+
|
|
21
45
|
export const longText = () => `
|
|
22
46
|
<div class="section-notice section-notice--confirmation" role="region">
|
|
23
47
|
<div class="section-notice__header" role="region" aria-roledescription="Notice">
|
|
@@ -11,14 +11,14 @@ span.tourtip {
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.tourtip__overlay {
|
|
14
|
-
.bubble();
|
|
14
|
+
.bubble(@border-radius-value: border-radius-100);
|
|
15
15
|
|
|
16
16
|
display: none;
|
|
17
17
|
position: absolute;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
.tourtip__mask {
|
|
21
|
-
.bubble-mask();
|
|
21
|
+
.bubble-mask(@border-radius-value: border-radius-100);
|
|
22
22
|
.background-color-token(tourtip-background-color, color-background-primary);
|
|
23
23
|
.color-token(tourtip-foreground-color, color-foreground-primary);
|
|
24
24
|
}
|
|
@@ -28,7 +28,7 @@ span.tourtip__mask {
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.tourtip__cell {
|
|
31
|
-
.bubble-cell();
|
|
31
|
+
.bubble-cell(@tourtip-spacing: @spacing-200);
|
|
32
32
|
|
|
33
33
|
flex-wrap: wrap;
|
|
34
34
|
|
|
@@ -114,9 +114,9 @@ button.tourtip__close > svg {
|
|
|
114
114
|
}
|
|
115
115
|
|
|
116
116
|
.tourtip__heading {
|
|
117
|
-
font-size:
|
|
117
|
+
font-size: @font-size-20;
|
|
118
118
|
font-weight: bold;
|
|
119
|
-
margin: 0 0 @spacing-
|
|
119
|
+
margin: 0 0 @spacing-100;
|
|
120
120
|
}
|
|
121
121
|
|
|
122
122
|
span.tourtip__heading {
|