@comicrelief/component-library 8.52.2 → 8.52.3
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/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.md +1 -0
- package/dist/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap +280 -232
- package/dist/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap +68 -28
- package/dist/components/Molecules/CTA/shared/CTACard.js +1 -1
- package/dist/components/Molecules/CTA/shared/CTACard.style.js +11 -7
- package/package.json +1 -1
- package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.md +1 -0
- package/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap +280 -232
- package/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap +68 -28
- package/src/components/Molecules/CTA/shared/CTACard.js +6 -3
- package/src/components/Molecules/CTA/shared/CTACard.style.js +8 -0
package/dist/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap
CHANGED
|
@@ -32,7 +32,7 @@ exports[`renders correctly with data prop 1`] = `
|
|
|
32
32
|
object-fit: cover;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
.
|
|
35
|
+
.c19 {
|
|
36
36
|
display: inline-block;
|
|
37
37
|
color: #FFFFFF;
|
|
38
38
|
fill: currentColor;
|
|
@@ -85,7 +85,7 @@ exports[`renders correctly with data prop 1`] = `
|
|
|
85
85
|
pointer-events: none;
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
.
|
|
88
|
+
.c18 {
|
|
89
89
|
width: 32px;
|
|
90
90
|
height: 32px;
|
|
91
91
|
border-radius: 50%;
|
|
@@ -107,6 +107,22 @@ exports[`renders correctly with data prop 1`] = `
|
|
|
107
107
|
flex-shrink: 0;
|
|
108
108
|
}
|
|
109
109
|
|
|
110
|
+
.c17 {
|
|
111
|
+
padding-left: 1rem;
|
|
112
|
+
display: -webkit-box;
|
|
113
|
+
display: -webkit-flex;
|
|
114
|
+
display: -ms-flexbox;
|
|
115
|
+
display: flex;
|
|
116
|
+
-webkit-align-items: center;
|
|
117
|
+
-webkit-box-align: center;
|
|
118
|
+
-ms-flex-align: center;
|
|
119
|
+
align-items: center;
|
|
120
|
+
-webkit-box-pack: end;
|
|
121
|
+
-webkit-justify-content: flex-end;
|
|
122
|
+
-ms-flex-pack: end;
|
|
123
|
+
justify-content: flex-end;
|
|
124
|
+
}
|
|
125
|
+
|
|
110
126
|
.c3 {
|
|
111
127
|
display: -webkit-box;
|
|
112
128
|
display: -webkit-flex;
|
|
@@ -305,7 +321,7 @@ exports[`renders correctly with data prop 1`] = `
|
|
|
305
321
|
}
|
|
306
322
|
|
|
307
323
|
@media (min-width:1024px) {
|
|
308
|
-
.
|
|
324
|
+
.c18 {
|
|
309
325
|
background: #222222;
|
|
310
326
|
}
|
|
311
327
|
}
|
|
@@ -500,19 +516,23 @@ exports[`renders correctly with data prop 1`] = `
|
|
|
500
516
|
<div
|
|
501
517
|
className="c17"
|
|
502
518
|
>
|
|
503
|
-
<
|
|
519
|
+
<div
|
|
504
520
|
className="c18"
|
|
505
|
-
fill="none"
|
|
506
|
-
height="13"
|
|
507
|
-
viewBox="0 0 15 13"
|
|
508
|
-
width="15"
|
|
509
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
510
521
|
>
|
|
511
|
-
<
|
|
512
|
-
|
|
513
|
-
fill="
|
|
514
|
-
|
|
515
|
-
|
|
522
|
+
<svg
|
|
523
|
+
className="c19"
|
|
524
|
+
fill="none"
|
|
525
|
+
height="13"
|
|
526
|
+
viewBox="0 0 15 13"
|
|
527
|
+
width="15"
|
|
528
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
529
|
+
>
|
|
530
|
+
<path
|
|
531
|
+
d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
|
|
532
|
+
fill="currentColor"
|
|
533
|
+
/>
|
|
534
|
+
</svg>
|
|
535
|
+
</div>
|
|
516
536
|
</div>
|
|
517
537
|
</div>
|
|
518
538
|
</div>
|
|
@@ -540,7 +560,7 @@ exports[`renders correctly without image 1`] = `
|
|
|
540
560
|
line-height: inherit;
|
|
541
561
|
}
|
|
542
562
|
|
|
543
|
-
.
|
|
563
|
+
.c15 {
|
|
544
564
|
display: inline-block;
|
|
545
565
|
color: #FFFFFF;
|
|
546
566
|
fill: currentColor;
|
|
@@ -576,7 +596,7 @@ exports[`renders correctly without image 1`] = `
|
|
|
576
596
|
pointer-events: none;
|
|
577
597
|
}
|
|
578
598
|
|
|
579
|
-
.
|
|
599
|
+
.c14 {
|
|
580
600
|
width: 32px;
|
|
581
601
|
height: 32px;
|
|
582
602
|
border-radius: 50%;
|
|
@@ -598,6 +618,22 @@ exports[`renders correctly without image 1`] = `
|
|
|
598
618
|
flex-shrink: 0;
|
|
599
619
|
}
|
|
600
620
|
|
|
621
|
+
.c13 {
|
|
622
|
+
padding-left: 1rem;
|
|
623
|
+
display: -webkit-box;
|
|
624
|
+
display: -webkit-flex;
|
|
625
|
+
display: -ms-flexbox;
|
|
626
|
+
display: flex;
|
|
627
|
+
-webkit-align-items: center;
|
|
628
|
+
-webkit-box-align: center;
|
|
629
|
+
-ms-flex-align: center;
|
|
630
|
+
align-items: center;
|
|
631
|
+
-webkit-box-pack: end;
|
|
632
|
+
-webkit-justify-content: flex-end;
|
|
633
|
+
-ms-flex-pack: end;
|
|
634
|
+
justify-content: flex-end;
|
|
635
|
+
}
|
|
636
|
+
|
|
601
637
|
.c3 {
|
|
602
638
|
display: -webkit-box;
|
|
603
639
|
display: -webkit-flex;
|
|
@@ -758,7 +794,7 @@ exports[`renders correctly without image 1`] = `
|
|
|
758
794
|
}
|
|
759
795
|
|
|
760
796
|
@media (min-width:1024px) {
|
|
761
|
-
.
|
|
797
|
+
.c14 {
|
|
762
798
|
background: #222222;
|
|
763
799
|
}
|
|
764
800
|
}
|
|
@@ -922,19 +958,23 @@ exports[`renders correctly without image 1`] = `
|
|
|
922
958
|
<div
|
|
923
959
|
className="c13"
|
|
924
960
|
>
|
|
925
|
-
<
|
|
961
|
+
<div
|
|
926
962
|
className="c14"
|
|
927
|
-
fill="none"
|
|
928
|
-
height="13"
|
|
929
|
-
viewBox="0 0 15 13"
|
|
930
|
-
width="15"
|
|
931
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
932
963
|
>
|
|
933
|
-
<
|
|
934
|
-
|
|
935
|
-
fill="
|
|
936
|
-
|
|
937
|
-
|
|
964
|
+
<svg
|
|
965
|
+
className="c15"
|
|
966
|
+
fill="none"
|
|
967
|
+
height="13"
|
|
968
|
+
viewBox="0 0 15 13"
|
|
969
|
+
width="15"
|
|
970
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
971
|
+
>
|
|
972
|
+
<path
|
|
973
|
+
d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
|
|
974
|
+
fill="currentColor"
|
|
975
|
+
/>
|
|
976
|
+
</svg>
|
|
977
|
+
</div>
|
|
938
978
|
</div>
|
|
939
979
|
</div>
|
|
940
980
|
</div>
|
|
@@ -65,6 +65,6 @@ const CTACard = _ref => {
|
|
|
65
65
|
src: _alt_cta_underline.default,
|
|
66
66
|
alt: "",
|
|
67
67
|
"aria-hidden": "true"
|
|
68
|
-
})), /*#__PURE__*/_react.default.createElement(_CTACard.ArrowIconWrapper, null, /*#__PURE__*/_react.default.createElement(_ArrowIcon.default, null))))));
|
|
68
|
+
})), /*#__PURE__*/_react.default.createElement(_CTACard.ArrowIconOuter, null, /*#__PURE__*/_react.default.createElement(_CTACard.ArrowIconWrapper, null, /*#__PURE__*/_react.default.createElement(_ArrowIcon.default, null)))))));
|
|
69
69
|
};
|
|
70
70
|
var _default = exports.default = CTACard;
|
|
@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.ImageWrapper = exports.CopyAndLinkSection = exports.Copy = exports.CardWrapper = exports.CardLink = exports.CardLabel = exports.CTATextUnderline = exports.CTAText = exports.CTA = exports.ArrowIconWrapper = void 0;
|
|
8
|
+
exports.ImageWrapper = exports.CopyAndLinkSection = exports.Copy = exports.CardWrapper = exports.CardLink = exports.CardLabel = exports.CTATextUnderline = exports.CTAText = exports.CTA = exports.ArrowIconWrapper = exports.ArrowIconOuter = void 0;
|
|
9
9
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
10
10
|
var _animations = require("../../../../theme/shared/animations");
|
|
11
11
|
var _allBreakpoints = require("../../../../theme/shared/allBreakpoints");
|
|
@@ -81,11 +81,15 @@ const ArrowIconWrapper = exports.ArrowIconWrapper = _styledComponents.default.di
|
|
|
81
81
|
} = _ref11;
|
|
82
82
|
return theme.color('grey_4');
|
|
83
83
|
});
|
|
84
|
+
const ArrowIconOuter = exports.ArrowIconOuter = _styledComponents.default.div.withConfig({
|
|
85
|
+
displayName: "CTACardstyle__ArrowIconOuter",
|
|
86
|
+
componentId: "sc-si8xx1-4"
|
|
87
|
+
})(["padding-left:1rem;display:flex;align-items:center;justify-content:flex-end;"]);
|
|
84
88
|
|
|
85
89
|
// Card wrapper link - makes entire card clickable
|
|
86
90
|
const CardLink = exports.CardLink = _styledComponents.default.a.withConfig({
|
|
87
91
|
displayName: "CTACardstyle__CardLink",
|
|
88
|
-
componentId: "sc-si8xx1-
|
|
92
|
+
componentId: "sc-si8xx1-5"
|
|
89
93
|
})(["display:flex;position:relative;flex-direction:column;width:100%;flex:1 1 auto;background:transparent;border-radius:1rem;box-shadow:0 0 1rem rgba(0,0,0,0.15);text-decoration:none;overflow:hidden;cursor:", ";box-sizing:border-box;", " ", ""], _ref12 => {
|
|
90
94
|
let {
|
|
91
95
|
isInteractive
|
|
@@ -129,7 +133,7 @@ const CardLink = exports.CardLink = _styledComponents.default.a.withConfig({
|
|
|
129
133
|
});
|
|
130
134
|
const CardWrapper = exports.CardWrapper = _styledComponents.default.div.withConfig({
|
|
131
135
|
displayName: "CTACardstyle__CardWrapper",
|
|
132
|
-
componentId: "sc-si8xx1-
|
|
136
|
+
componentId: "sc-si8xx1-6"
|
|
133
137
|
})(["width:auto;flex-shrink:0;display:flex;flex-direction:column;align-self:stretch;", " ", " ", " ", ""], _ref20 => {
|
|
134
138
|
let {
|
|
135
139
|
isFullWidth
|
|
@@ -180,7 +184,7 @@ const CardWrapper = exports.CardWrapper = _styledComponents.default.div.withConf
|
|
|
180
184
|
});
|
|
181
185
|
const CopyAndLinkSection = exports.CopyAndLinkSection = _styledComponents.default.div.withConfig({
|
|
182
186
|
displayName: "CTACardstyle__CopyAndLinkSection",
|
|
183
|
-
componentId: "sc-si8xx1-
|
|
187
|
+
componentId: "sc-si8xx1-7"
|
|
184
188
|
})(["width:100%;background:", ";display:flex;flex-direction:column;padding:2rem;flex:1;min-height:0;border-radius:0 0 1rem 1rem;", ""], _ref29 => {
|
|
185
189
|
let {
|
|
186
190
|
theme
|
|
@@ -209,11 +213,11 @@ const CopyAndLinkSection = exports.CopyAndLinkSection = _styledComponents.defaul
|
|
|
209
213
|
});
|
|
210
214
|
const Copy = exports.Copy = _styledComponents.default.div.withConfig({
|
|
211
215
|
displayName: "CTACardstyle__Copy",
|
|
212
|
-
componentId: "sc-si8xx1-
|
|
216
|
+
componentId: "sc-si8xx1-8"
|
|
213
217
|
})(["flex:1;display:flex;flex-direction:column;min-height:0;"]);
|
|
214
218
|
const CardLabel = exports.CardLabel = _styledComponents.default.div.withConfig({
|
|
215
219
|
displayName: "CTACardstyle__CardLabel",
|
|
216
|
-
componentId: "sc-si8xx1-
|
|
220
|
+
componentId: "sc-si8xx1-9"
|
|
217
221
|
})(["font-family:", ";font-size:14px;color:", ";"], _ref34 => {
|
|
218
222
|
let {
|
|
219
223
|
theme
|
|
@@ -227,5 +231,5 @@ const CardLabel = exports.CardLabel = _styledComponents.default.div.withConfig({
|
|
|
227
231
|
});
|
|
228
232
|
const CTA = exports.CTA = _styledComponents.default.div.withConfig({
|
|
229
233
|
displayName: "CTACardstyle__CTA",
|
|
230
|
-
componentId: "sc-si8xx1-
|
|
234
|
+
componentId: "sc-si8xx1-10"
|
|
231
235
|
})(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin-top:auto;padding-top:1rem;"]);
|
package/package.json
CHANGED