@financial-times/n-myft-ui 38.0.0 → 38.0.2
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/.toolkitstate/ci.json +2 -2
- package/components/concept-list/main.scss +1 -1
- package/components/jsx/follow-plus-instant-alerts/main.scss +19 -12
- package/components/jsx/preferences-modal/main.scss +84 -67
- package/mixins/lozenge/_themes.scss +36 -26
- package/mixins/lozenge/_toggle-icon.scss +0 -1
- package/mixins/lozenge/main.scss +13 -14
- package/myft/README.md +1 -7
- package/package.json +2 -2
package/.toolkitstate/ci.json
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
.concept-list__title {
|
|
2
|
-
|
|
3
2
|
line-height: var(--o3-font-lineheight-metric2-0);
|
|
4
3
|
font-size: var(--o3-font-size-metric2-0);
|
|
5
4
|
font-family: var(--o3-font-family-metric);
|
|
@@ -39,6 +38,7 @@
|
|
|
39
38
|
flex: 2;
|
|
40
39
|
|
|
41
40
|
&:hover {
|
|
41
|
+
color: #45413e; // Fallback color for browsers that do not support color-mix
|
|
42
42
|
color: color-mix(in srgb, var(--o3-color-palette-black) 73%, var(--o3-color-palette-paper));
|
|
43
43
|
text-decoration: underline;
|
|
44
44
|
}
|
|
@@ -1,15 +1,5 @@
|
|
|
1
1
|
@import '../../../mixins/lozenge/main.scss';
|
|
2
2
|
|
|
3
|
-
@mixin bellOffIcon($color, $background) {
|
|
4
|
-
background-color: color-mix(in srgb, $background 60%, $color);
|
|
5
|
-
mask-image: var(--o3-icon-notification-mute);
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
@mixin bellOnIcon($color) {
|
|
9
|
-
mask-image: var(--o3-icon-notification);
|
|
10
|
-
background-color: $color;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
3
|
@mixin chevronIcon($icon-name, $color) {
|
|
14
4
|
--icon-size: 12px;
|
|
15
5
|
mask-repeat: no-repeat;
|
|
@@ -30,11 +20,28 @@
|
|
|
30
20
|
|
|
31
21
|
@include withTheme($theme) {
|
|
32
22
|
&.n-myft-follow-button--instant-alerts[aria-pressed='true']::before {
|
|
33
|
-
|
|
23
|
+
// Fallback colours for browsers that do not support color-mix
|
|
24
|
+
@if $theme == standard {
|
|
25
|
+
background-color: #d69fb1; // Fallback color for standard theme
|
|
26
|
+
} @else if $theme == inverse {
|
|
27
|
+
background-color: #666666; // Fallback color for inverse theme
|
|
28
|
+
} @else if $theme == opinion {
|
|
29
|
+
background-color: #9dafc2; // Fallback color for opinion theme
|
|
30
|
+
} @else if $theme == monochrome {
|
|
31
|
+
background-color: #666666; // Fallback color for monochrome theme
|
|
32
|
+
} @else if $theme == inverse-monochrome {
|
|
33
|
+
background-color: #999999; // Fallback color for inverse-monochrome theme
|
|
34
|
+
} @else if $theme == alphaville {
|
|
35
|
+
background-color: #aebcc9; // Fallback color for alphaville theme
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
background-color: color-mix(in srgb, getThemeColor(text) 60%, getThemeColor(background));
|
|
39
|
+
mask-image: var(--o3-icon-notification-mute);
|
|
34
40
|
}
|
|
35
41
|
|
|
36
42
|
&.n-myft-follow-button--instant-alerts--on[aria-pressed='true']::before {
|
|
37
|
-
|
|
43
|
+
background-color: getThemeColor(text);
|
|
44
|
+
mask-image: var(--o3-icon-notification);
|
|
38
45
|
}
|
|
39
46
|
|
|
40
47
|
&.n-myft-follow-button--instant-alerts[aria-pressed='true']::after {
|
|
@@ -2,103 +2,120 @@
|
|
|
2
2
|
@include oForms();
|
|
3
3
|
|
|
4
4
|
.n-myft-ui__preferences-modal {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
5
|
+
display: none;
|
|
6
|
+
visibility: hidden;
|
|
7
|
+
position: absolute;
|
|
8
|
+
color: var(--o3-color-palette-black);
|
|
9
|
+
background-color: var(--o3-color-palette-white-80);
|
|
10
|
+
border-radius: 10px;
|
|
11
|
+
border: 2px solid var(--o3-color-palette-black-5);
|
|
12
|
+
width: 275px;
|
|
13
|
+
text-transform: none;
|
|
14
|
+
z-index: 9999999;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.n-myft-ui__preferences-modal__content {
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
position: relative;
|
|
19
|
+
margin: 20px 20px 24px;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
.n-myft-ui__preferences-modal__checkbox__message {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
font-style: normal;
|
|
24
|
+
font-weight: var(--o3-font-weight-semibold);
|
|
25
|
+
line-height: var(--o3-font-lineheight-metric2-negative-1);
|
|
26
|
+
font-size: var(--o3-font-size-metric2-negative-1);
|
|
27
|
+
font-family: var(--o3-font-family-metric);
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.n-myft-ui__preferences-modal__text {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
31
|
+
font-style: normal;
|
|
32
|
+
font-weight: var(--o3-font-weight-regular);
|
|
33
|
+
line-height: var(--o3-font-lineheight-metric2-negative-2);
|
|
34
|
+
font-size: var(--o3-font-size-metric2-negative-2);
|
|
35
|
+
font-family: var(--o3-font-family-metric);
|
|
36
|
+
margin-bottom: 0;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
.n-myft-ui__preferences-modal__remove-button {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
40
|
+
margin-top: 20px;
|
|
41
|
+
height: 32px;
|
|
42
|
+
width: 100%;
|
|
43
|
+
border-radius: 20px;
|
|
44
|
+
border: 2px solid var(--o3-color-palette-black-20);
|
|
45
|
+
background-color: var(--o3-color-palette-white-80);
|
|
46
|
+
font-style: normal;
|
|
47
|
+
font-weight: var(--o3-font-weight-regular);
|
|
48
|
+
line-height: var(--o3-font-lineheight-metric2-negative-2);
|
|
49
|
+
font-size: var(--o3-font-size-metric2-negative-2);
|
|
50
|
+
font-family: var(--o3-font-family-metric);
|
|
51
|
+
color: var(--o3-color-palette-black-80);
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
.n-myft-ui__preferences-modal__remove-button:not([disabled]):hover,
|
|
55
55
|
.n-myft-ui__preferences-modal__remove-button:not([disabled]):focus {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
56
|
+
border: 2px solid var(--o3-color-palette-claret-60);
|
|
57
|
+
background-color: #ebc4c3; // Fallback color for browsers that do not support color-mix
|
|
58
|
+
background-color: color-mix(
|
|
59
|
+
in srgb,
|
|
60
|
+
var(--o3-color-palette-claret-60) 20%,
|
|
61
|
+
var(--o3-color-palette-paper)
|
|
62
|
+
);
|
|
63
|
+
color: var(--o3-color-palette-claret-60);
|
|
59
64
|
}
|
|
60
65
|
|
|
61
66
|
.n-myft-ui__preferences-modal__remove-button:disabled {
|
|
62
|
-
|
|
67
|
+
opacity: 0.5;
|
|
63
68
|
}
|
|
64
69
|
|
|
65
70
|
.n-myft-ui__preferences-modal--show {
|
|
66
|
-
|
|
67
|
-
|
|
71
|
+
display: block;
|
|
72
|
+
visibility: visible;
|
|
68
73
|
}
|
|
69
74
|
|
|
70
75
|
// reference to the color/BG color of the error message
|
|
71
76
|
// components/o-message/src/scss/_brand.scss#L21 in origami
|
|
72
77
|
.n-myft-ui__preferences-modal-error {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
78
|
+
display: block;
|
|
79
|
+
font-style: normal;
|
|
80
|
+
font-weight: var(--o3-font-weight-regular);
|
|
81
|
+
line-height: var(--o3-font-lineheight-metric2-negative-2);
|
|
82
|
+
font-size: var(--o3-font-size-metric2-negative-2);
|
|
83
|
+
font-family: var(--o3-font-family-metric);
|
|
84
|
+
color: #b30000; // Fallback color for browsers that do not support color-mix
|
|
85
|
+
color: color-mix(in srgb, var(--o3-color-palette-black) 12.5%, var(--o3-color-palette-crimson));
|
|
86
|
+
background-color: #fad9ce; // Fallback color for browsers that do not support color-mix
|
|
87
|
+
background-color: color-mix(
|
|
88
|
+
in srgb,
|
|
89
|
+
var(--o3-color-palette-crimson) 10%,
|
|
90
|
+
var(--o3-color-palette-paper)
|
|
91
|
+
);
|
|
92
|
+
text-align: left;
|
|
93
|
+
padding: 8px 12px;
|
|
94
|
+
margin-top: 16px;
|
|
84
95
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
96
|
+
// use opacity to enforce CSS transition
|
|
97
|
+
opacity: 1;
|
|
98
|
+
transition: opacity 0.5s;
|
|
88
99
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
100
|
+
a {
|
|
101
|
+
font-style: normal;
|
|
102
|
+
font-weight: var(--o3-font-weight-semibold);
|
|
103
|
+
line-height: var(--o3-font-lineheight-metric2-negative-2);
|
|
104
|
+
font-size: var(--o3-font-size-metric2-negative-2);
|
|
105
|
+
font-family: var(--o3-font-family-metric);
|
|
106
|
+
color: #b30000; // Fallback color for browsers that do not support color-mix
|
|
107
|
+
color: color-mix(in srgb, var(--o3-color-palette-black) 12.5%, var(--o3-color-palette-crimson));
|
|
108
|
+
text-decoration-color: #b30000; // Fallback color for browsers that do not support color-mix
|
|
109
|
+
text-decoration-color: color-mix(
|
|
110
|
+
in srgb,
|
|
111
|
+
var(--o3-color-palette-black) 12.5%,
|
|
112
|
+
var(--o3-color-palette-crimson)
|
|
113
|
+
);
|
|
114
|
+
}
|
|
98
115
|
}
|
|
99
116
|
|
|
100
117
|
.n-myft-ui__preferences-modal-error:empty {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
118
|
+
opacity: 0;
|
|
119
|
+
padding: 0;
|
|
120
|
+
margin-top: 0;
|
|
104
121
|
}
|
|
@@ -1,58 +1,68 @@
|
|
|
1
|
+
// We can't have overriding CSS properties in this file because this is a Sass variable where its properties are being extracted with the function getThemeColor().
|
|
2
|
+
// The variables with color-mix are left commented to indicate where those hex colors come from.
|
|
1
3
|
$myft-lozenge-themes: (
|
|
2
4
|
standard: (
|
|
3
|
-
toggle-button-theme: (
|
|
4
|
-
'color': 'claret',
|
|
5
|
-
),
|
|
6
5
|
background: var(--o3-color-palette-claret),
|
|
7
6
|
text: var(--o3-color-palette-white),
|
|
8
7
|
highlight: var(--o3-color-palette-claret-50),
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
// Using hex codes instead of color-mix to support iOS 14
|
|
9
|
+
// pressed-highlight: color-mix(in srgb, var(--o3-color-palette-claret) 15%, transparent),
|
|
10
|
+
pressed-highlight: #990f3d26,
|
|
11
|
+
// disabled: color-mix(in srgb, var(--o3-color-palette-black) 50%, transparent),
|
|
12
|
+
disabled: #00000080,
|
|
11
13
|
),
|
|
12
14
|
inverse: (
|
|
13
|
-
toggle-button-theme: 'inverse',
|
|
14
15
|
background: var(--o3-color-palette-white),
|
|
15
16
|
text: var(--o3-color-palette-black),
|
|
16
|
-
highlight: color-mix(in srgb, white 80%, transparent),
|
|
17
|
-
pressed-highlight: color-mix(in srgb, var(--o3-color-palette-white) 20%, transparent),
|
|
18
|
-
disabled: color-mix(in srgb, var(--o3-color-palette-white) 50%, transparent),
|
|
19
17
|
mix-blend-mode: lighten,
|
|
18
|
+
// Using hex codes instead of color-mix to support iOS 14
|
|
19
|
+
// highlight: color-mix(in srgb, var(--o3-color-palette-white) 80%, transparent),
|
|
20
|
+
highlight: #ffffffcc,
|
|
21
|
+
// pressed-highlight: color-mix(in srgb, var(--o3-color-palette-white) 15%, transparent),
|
|
22
|
+
pressed-highlight: #ffffff26,
|
|
23
|
+
// disabled: color-mix(in srgb, var(--o3-color-palette-white) 50%, transparent),
|
|
24
|
+
disabled: #ffffff7f,
|
|
20
25
|
),
|
|
21
26
|
opinion: (
|
|
22
|
-
toggle-button-theme: (
|
|
23
|
-
'color': 'oxford-40',
|
|
24
|
-
),
|
|
25
27
|
background: var(--o3-color-palette-oxford-40),
|
|
26
28
|
text: var(--o3-color-palette-white),
|
|
27
29
|
highlight: var(--o3-color-palette-oxford-30),
|
|
28
|
-
|
|
29
|
-
|
|
30
|
+
// Using hex codes instead of color-mix to support iOS 14
|
|
31
|
+
// pressed-highlight: color-mix(in srgb, var(--o3-color-palette-oxford-40) 15%, transparent),
|
|
32
|
+
pressed-highlight: #0A386626,
|
|
33
|
+
// disabled: color-mix(in srgb, var(--o3-color-palette-black) 50%, transparent),
|
|
34
|
+
disabled: #00000080,
|
|
30
35
|
),
|
|
31
36
|
monochrome: (
|
|
32
|
-
toggle-button-theme: 'inverse',
|
|
33
37
|
background: var(--o3-color-palette-white),
|
|
34
38
|
text: var(--o3-color-palette-black),
|
|
35
39
|
highlight: var(--o3-color-palette-white-80),
|
|
36
|
-
|
|
37
|
-
|
|
40
|
+
// Using hex codes instead of color-mix to support iOS 14
|
|
41
|
+
// pressed-highlight: color-mix(in srgb, var(--o3-color-palette-white) 15%, transparent),
|
|
42
|
+
pressed-highlight: #ffffff26,
|
|
43
|
+
// disabled: color-mix(in srgb, var(--o3-color-palette-white) 50%, transparent),
|
|
44
|
+
disabled: #ffffff7f,
|
|
38
45
|
),
|
|
39
46
|
inverse-monochrome: (
|
|
40
|
-
toggle-button-theme: (
|
|
41
|
-
'color': 'black',
|
|
42
|
-
),
|
|
43
47
|
background: var(--o3-color-palette-black),
|
|
44
48
|
text: var(--o3-color-palette-white),
|
|
45
49
|
highlight: var(--o3-color-palette-black-80),
|
|
46
|
-
|
|
47
|
-
|
|
50
|
+
// Using rgba instead of color-mix to support iOS 14
|
|
51
|
+
// pressed-highlight: color-mix(in srgb, var(--o3-color-palette-black) 15%, transparent),
|
|
52
|
+
pressed-highlight: #00000026,
|
|
53
|
+
// disabled: color-mix(in srgb, var(--o3-color-palette-black) 50%, transparent),
|
|
54
|
+
disabled: rgba(var(--o3-color-palette-black), 0.5),
|
|
48
55
|
),
|
|
49
56
|
alphaville: (
|
|
50
|
-
toggle-button-theme: 'inverse',
|
|
51
57
|
background: var(--o3-color-palette-white),
|
|
52
58
|
text: var(--o3-color-palette-matisse-blue),
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
59
|
+
// Using hex codes instead of color-mix to support iOS 14
|
|
60
|
+
// highlight: color-mix(in srgb, var(--o3-color-palette-white) 80%, transparent),
|
|
61
|
+
highlight: #FFFFFFCC,
|
|
62
|
+
// pressed-highlight: color-mix(in srgb, var(--o3-color-palette-white) 15%, transparent),
|
|
63
|
+
pressed-highlight: #ffffff26,
|
|
64
|
+
// disabled: color-mix(in srgb, var(--o3-color-palette-white) 50%, transparent),
|
|
65
|
+
disabled: #ffffff7f,
|
|
56
66
|
),
|
|
57
67
|
);
|
|
58
68
|
|
package/mixins/lozenge/main.scss
CHANGED
|
@@ -22,6 +22,14 @@
|
|
|
22
22
|
color: getThemeColor(background);
|
|
23
23
|
border: 1px solid getThemeColor(background);
|
|
24
24
|
background-color: transparent;
|
|
25
|
+
|
|
26
|
+
&:hover,
|
|
27
|
+
&:focus {
|
|
28
|
+
background-color: getThemeColor(pressed-highlight);
|
|
29
|
+
border-color: getThemeColor(background);
|
|
30
|
+
color: getThemeColor(background);
|
|
31
|
+
}
|
|
32
|
+
|
|
25
33
|
&[disabled]:hover,
|
|
26
34
|
&[disabled] {
|
|
27
35
|
background: transparent;
|
|
@@ -37,13 +45,6 @@
|
|
|
37
45
|
border: 1px solid getThemeColor(background);
|
|
38
46
|
color: getThemeColor(background);
|
|
39
47
|
|
|
40
|
-
&:hover,
|
|
41
|
-
&:focus {
|
|
42
|
-
background-color: getThemeColor(pressed-highlight);
|
|
43
|
-
border-color: getThemeColor(background);
|
|
44
|
-
color: getThemeColor(background);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
48
|
@include commonMyftLozengeStyles;
|
|
48
49
|
}
|
|
49
50
|
}
|
|
@@ -66,7 +67,7 @@
|
|
|
66
67
|
min-height: 28px;
|
|
67
68
|
min-width: 60px;
|
|
68
69
|
|
|
69
|
-
&[aria-pressed=
|
|
70
|
+
&[aria-pressed='true'] {
|
|
70
71
|
color: getThemeColor(text);
|
|
71
72
|
background-color: getThemeColor(background);
|
|
72
73
|
border-color: getThemeColor(background);
|
|
@@ -81,18 +82,16 @@
|
|
|
81
82
|
|
|
82
83
|
@if getThemeColor(mix-blend-mode) {
|
|
83
84
|
mix-blend-mode: getThemeColor(mix-blend-mode);
|
|
85
|
+
background-color: rgba(
|
|
86
|
+
getThemeColor(highlight),
|
|
87
|
+
0.7
|
|
88
|
+
); // Fallback color for browsers that do not support color-mix
|
|
84
89
|
background-color: color-mix(in srgb, getThemeColor(highlight) 85%, transparent);
|
|
85
90
|
} @else {
|
|
86
91
|
background-color: getThemeColor(highlight);
|
|
87
92
|
}
|
|
88
93
|
}
|
|
89
94
|
}
|
|
90
|
-
&:hover,
|
|
91
|
-
&:focus {
|
|
92
|
-
background-color: getThemeColor(pressed-highlight);
|
|
93
|
-
border-color: getThemeColor(background);
|
|
94
|
-
color: getThemeColor(background);
|
|
95
|
-
}
|
|
96
95
|
|
|
97
96
|
@include commonMyftLozengeStyles;
|
|
98
97
|
padding: 0 var(--o3-spacing-3xs);
|
package/myft/README.md
CHANGED
|
@@ -13,16 +13,10 @@ Client-side module to handle display of generic myft ui e.g. add to myft buttons
|
|
|
13
13
|
|
|
14
14
|
The templates require a _conceptId_ variable. You can also override the button text by providing a _buttonText_ property.
|
|
15
15
|
|
|
16
|
-
You can require different versions of the button as below:
|
|
17
|
-
{{> n-myft-ui/components/follow version='3'}}
|
|
18
|
-
|
|
19
16
|
You can require different variants of the button as below:
|
|
20
|
-
{{> n-myft-ui/components/follow-button/follow-button variant='
|
|
17
|
+
{{> n-myft-ui/components/follow-button/follow-button variant='primary'}}
|
|
21
18
|
{{> n-myft-ui/components/follow-button/follow-button variant='inverse'}}
|
|
22
19
|
|
|
23
|
-
You can require different sizes of the button as below:
|
|
24
|
-
{{> n-myft-ui/components/follow-button/follow-button size="big" variant='standout'}}
|
|
25
|
-
|
|
26
20
|
### Save for later
|
|
27
21
|
|
|
28
22
|
{{>n-ui/myft/components/save-for-later/save-for-later contentId=id}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@financial-times/n-myft-ui",
|
|
3
|
-
"version": "38.0.
|
|
3
|
+
"version": "38.0.2",
|
|
4
4
|
"description": "Client side component for interaction with myft",
|
|
5
5
|
"main": "server.js",
|
|
6
6
|
"scripts": {
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
"@financial-times/o3-editorial-typography": "^3.0.2",
|
|
115
115
|
"@financial-times/o3-foundation": "^3.0.0",
|
|
116
116
|
"next-myft-client": "^13.0.0",
|
|
117
|
-
"react": "
|
|
117
|
+
"react": "17.x || 18.x"
|
|
118
118
|
},
|
|
119
119
|
"dependencies": {
|
|
120
120
|
"date-fns": "2.30.0",
|