@comicrelief/component-library 7.35.1 → 7.35.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.
Files changed (5) hide show
  1. package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.style.js +9 -4
  2. package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.test.js +1 -1
  3. package/package.json +1 -1
  4. package/src/components/Organisms/WYMDCarousel/WYMDCarousel.style.js +1 -0
  5. package/src/components/Organisms/WYMDCarousel/WYMDCarousel.test.js +1 -0
package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.style.js CHANGED
@@ -64,19 +64,24 @@ const Including = exports.Including = (0, _styledComponents.default)(_Text.defau
64
64
  const CarouselWrapper = exports.CarouselWrapper = _styledComponents.default.div.withConfig({
65
65
  displayName: "WYMDCarouselstyle__CarouselWrapper",
66
66
  componentId: "sc-115z54p-6"
67
- })(["height:100%;padding:", ";.carousel{position:relative;margin:0 auto;padding-top:", ";@media ", "{padding-top:", ";}button.carousel__back-button,button.carousel__next-button{position:absolute;left:0;top:0;width:33% !important;height:100%;padding:0 !important;box-shadow:none;text-indent:-9999px;background-color:transparent;border:none;&:before{content:'';position:absolute;width:30px;height:30px;top:50%;left:0;transform:translate(0,-50%) rotate(90deg);}&:after{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;transition:opacity 0.2s linear;background:linear-gradient(90deg,rgba(255,255,255,0.95),rgba(255,255,255,0.5),rgba(255,255,255,0));}&:hover{&:after{opacity:0.5;}}@media ", "{width:33.3% !important;&:after{width:100%;}}}button.carousel__next-button{left:auto;right:0;&:before{transform:translate(0,-50%) rotate(-90deg);}&:after{left:auto;right:0;background:linear-gradient(270deg,rgba(255,255,255,0.95),rgba(255,255,255,0.75),rgba(255,255,255,0));}}.wymd-carousel{transition:-webkit-transform ", "s;-o-transition:transform ", "s;transition:transform ", "s;-webkit-transform:", "s;will-change:transform;.last-slide{.image-wrapper:after{content:none;}}.carousel__slide{padding-bottom:", "px !important;@media ", "{padding-bottom:", "px !important;.carousel__inner-slide{> div:first-child{transition:transform ", "s ease;transform:scale(0.5);&:after{transition:transform ", "s ease,width ", "s ease,right ", "s ease;right:calc(-300% - 6px);transform:scale(1);width:300%;}}}&.carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-250% - 6px);transform:scale(1);width:250%;}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{transform:scale(1);&:after{right:calc(-187% - 6px);transform:scale(0.5);width:250%;}}}+ .carousel__slide--visible{> div > div:first-child{transform:scale(0.5);&:after{right:calc(-250% - 6px);transform:scale(1);width:250%;}}}}}}.carousel__inner-slide{text-align:center;display:inline-flex;align-items:center;justify-content:flex-start;flex-direction:column;}}}}"], (0, _spacing.default)('m'), (0, _spacing.default)('l'), _ref6 => {
67
+ })(["height:100%;padding:", ";background-color:", ";.carousel{position:relative;margin:0 auto;padding-top:", ";@media ", "{padding-top:", ";}button.carousel__back-button,button.carousel__next-button{position:absolute;left:0;top:0;width:33% !important;height:100%;padding:0 !important;box-shadow:none;text-indent:-9999px;background-color:transparent;border:none;&:before{content:'';position:absolute;width:30px;height:30px;top:50%;left:0;transform:translate(0,-50%) rotate(90deg);}&:after{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;transition:opacity 0.2s linear;background:linear-gradient(90deg,rgba(255,255,255,0.95),rgba(255,255,255,0.5),rgba(255,255,255,0));}&:hover{&:after{opacity:0.5;}}@media ", "{width:33.3% !important;&:after{width:100%;}}}button.carousel__next-button{left:auto;right:0;&:before{transform:translate(0,-50%) rotate(-90deg);}&:after{left:auto;right:0;background:linear-gradient(270deg,rgba(255,255,255,0.95),rgba(255,255,255,0.75),rgba(255,255,255,0));}}.wymd-carousel{transition:-webkit-transform ", "s;-o-transition:transform ", "s;transition:transform ", "s;-webkit-transform:", "s;will-change:transform;.last-slide{.image-wrapper:after{content:none;}}.carousel__slide{padding-bottom:", "px !important;@media ", "{padding-bottom:", "px !important;.carousel__inner-slide{> div:first-child{transition:transform ", "s ease;transform:scale(0.5);&:after{transition:transform ", "s ease,width ", "s ease,right ", "s ease;right:calc(-300% - 6px);transform:scale(1);width:300%;}}}&.carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-250% - 6px);transform:scale(1);width:250%;}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{transform:scale(1);&:after{right:calc(-187% - 6px);transform:scale(0.5);width:250%;}}}+ .carousel__slide--visible{> div > div:first-child{transform:scale(0.5);&:after{right:calc(-250% - 6px);transform:scale(1);width:250%;}}}}}}.carousel__inner-slide{text-align:center;display:inline-flex;align-items:center;justify-content:flex-start;flex-direction:column;}}}}"], (0, _spacing.default)('m'), _ref6 => {
68
68
  let {
69
69
  theme
70
70
  } = _ref6;
71
- return theme.breakpoint('medium');
72
- }, (0, _spacing.default)('lg'), _ref7 => {
71
+ return theme.color('white');
72
+ }, (0, _spacing.default)('l'), _ref7 => {
73
73
  let {
74
74
  theme
75
75
  } = _ref7;
76
76
  return theme.breakpoint('medium');
77
- }, animationSpeed, animationSpeed, animationSpeed, animationSpeed, props => props.mobileHeight, _ref8 => {
77
+ }, (0, _spacing.default)('lg'), _ref8 => {
78
78
  let {
79
79
  theme
80
80
  } = _ref8;
81
81
  return theme.breakpoint('medium');
82
+ }, animationSpeed, animationSpeed, animationSpeed, animationSpeed, props => props.mobileHeight, _ref9 => {
83
+ let {
84
+ theme
85
+ } = _ref9;
86
+ return theme.breakpoint('medium');
82
87
  }, props => props.desktopHeight, animationSpeed, animationSpeed, animationSpeed, animationSpeed);
package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.test.js CHANGED
@@ -12,5 +12,5 @@ it("renders correctly", () => {
12
12
  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_WYMDCarousel.default, {
13
13
  data: carouselItemsComplete
14
14
  })).toJSON();
15
- expect(tree).toMatchInlineSnapshot("\n .c1 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-weight: bold;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c3 {\n color: #E52630;\n font-size: 1rem;\n line-height: 1rem;\n text-transform: uppercase;\n font-weight: normal;\n font-family: 'Anton',Impact,sans-serif;\n -webkit-letter-spacing: 0.03rem;\n -moz-letter-spacing: 0.03rem;\n -ms-letter-spacing: 0.03rem;\n letter-spacing: 0.03rem;\n }\n\n .c5 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c2 {\n width: 75%;\n margin: 0 auto;\n }\n\n .c2:first-child {\n margin-bottom: 2rem;\n text-align: center;\n font-size: 20px;\n line-height: 23px;\n }\n\n .c4 {\n margin-bottom: 2rem;\n text-align: center;\n font-size: 40px;\n line-height: 40px;\n }\n\n .c6 {\n margin-bottom: 0;\n text-align: center;\n font-size: 14px;\n line-height: 17px;\n }\n\n .c0 {\n height: 100%;\n padding: 1.5rem;\n }\n\n .c0 .carousel {\n position: relative;\n margin: 0 auto;\n padding-top: 2rem;\n }\n\n .c0 .carousel button.carousel__back-button,\n .c0 .carousel button.carousel__next-button {\n position: absolute;\n left: 0;\n top: 0;\n width: 33% !important;\n height: 100%;\n padding: 0 !important;\n box-shadow: none;\n text-indent: -9999px;\n background-color: transparent;\n border: none;\n }\n\n .c0 .carousel button.carousel__back-button:before,\n .c0 .carousel button.carousel__next-button:before {\n content: '';\n position: absolute;\n width: 30px;\n height: 30px;\n top: 50%;\n left: 0;\n -webkit-transform: translate(0,-50%) rotate(90deg);\n -ms-transform: translate(0,-50%) rotate(90deg);\n transform: translate(0,-50%) rotate(90deg);\n }\n\n .c0 .carousel button.carousel__back-button:after,\n .c0 .carousel button.carousel__next-button:after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 50%;\n height: 100%;\n -webkit-transition: opacity 0.2s linear;\n transition: opacity 0.2s linear;\n background: linear-gradient(90deg,rgba(255,255,255,0.95),rgba(255,255,255,0.5),rgba(255,255,255,0));\n }\n\n .c0 .carousel button.carousel__back-button:hover:after,\n .c0 .carousel button.carousel__next-button:hover:after {\n opacity: 0.5;\n }\n\n .c0 .carousel button.carousel__next-button {\n left: auto;\n right: 0;\n }\n\n .c0 .carousel button.carousel__next-button:before {\n -webkit-transform: translate(0,-50%) rotate(-90deg);\n -ms-transform: translate(0,-50%) rotate(-90deg);\n transform: translate(0,-50%) rotate(-90deg);\n }\n\n .c0 .carousel button.carousel__next-button:after {\n left: auto;\n right: 0;\n background: linear-gradient(270deg,rgba(255,255,255,0.95),rgba(255,255,255,0.75),rgba(255,255,255,0));\n }\n\n .c0 .carousel .wymd-carousel {\n -webkit-transition: -webkit-transform 0.5s;\n -webkit-transition: -webkit-transform 0.5s;\n transition: -webkit-transform 0.5s;\n -o-transition: transform 0.5s;\n -webkit-transition: -webkit-transform 0.5s;\n -webkit-transition: transform 0.5s;\n transition: transform 0.5s;\n -webkit-transform: 0.5s;\n will-change: transform;\n }\n\n .c0 .carousel .wymd-carousel .last-slide .image-wrapper:after {\n content: none;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide {\n padding-bottom: 500px !important;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide {\n text-align: center;\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: start;\n -webkit-justify-content: flex-start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-flex-direction: column;\n -ms-flex-direction: column;\n flex-direction: column;\n }\n\n @media (min-width:1024px) {\n .c2:first-child {\n font-size: 21px;\n line-height: 23px;\n }\n }\n\n @media (min-width:740px) {\n .c4 {\n font-size: 60px;\n line-height: 60px;\n }\n }\n\n @media (min-width:1024px) {\n .c4 {\n font-size: 75px;\n line-height: 78px;\n }\n }\n\n @media (min-width:740px) {\n .c6 {\n font-size: 17px;\n line-height: 19px;\n }\n }\n\n @media (min-width:1024px) {\n .c0 .carousel {\n padding-top: 3rem;\n }\n }\n\n @media (min-width:1024px) {\n .c0 .carousel button.carousel__back-button,\n .c0 .carousel button.carousel__next-button {\n width: 33.3% !important;\n }\n\n .c0 .carousel button.carousel__back-button:after,\n .c0 .carousel button.carousel__next-button:after {\n width: 100%;\n }\n }\n\n @media (min-width:1024px) {\n .c0 .carousel .wymd-carousel .carousel__slide {\n padding-bottom: 550px !important;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child {\n -webkit-transition: -webkit-transform 0.5s ease;\n -webkit-transition: transform 0.5s ease;\n transition: transform 0.5s ease;\n -webkit-transform: scale(0.5);\n -ms-transform: scale(0.5);\n transform: scale(0.5);\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child:after {\n -webkit-transition: -webkit-transform 0.5s ease,width 0.5s ease,right 0.5s ease;\n -webkit-transition: transform 0.5s ease,width 0.5s ease,right 0.5s ease;\n transition: transform 0.5s ease,width 0.5s ease,right 0.5s ease;\n right: calc(-300% - 6px);\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n width: 300%;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n right: calc(-250% - 6px);\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n width: 250%;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child {\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n right: calc(-187% - 6px);\n -webkit-transform: scale(0.5);\n -ms-transform: scale(0.5);\n transform: scale(0.5);\n width: 250%;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child {\n -webkit-transform: scale(0.5);\n -ms-transform: scale(0.5);\n transform: scale(0.5);\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child:after {\n right: calc(-250% - 6px);\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n width: 250%;\n }\n }\n\n <div\n className=\"c0 CarouselWrapper\"\n id=\"7zdR84QkZwrTh9NWx2H926\"\n >\n <p\n className=\"c1 c2\"\n color=\"inherit\"\n size=\"s\"\n >\n Over the past two years, we\u2019ve supported\n </p>\n <h1\n className=\"c3 c4\"\n color=\"red\"\n size=\"s\"\n >\n 11.7 million people\n </h1>\n <p\n className=\"c5 c6\"\n color=\"inherit\"\n size=\"s\"\n >\n including...\n </p>\n </div>\n ");
15
+ expect(tree).toMatchInlineSnapshot("\n .c1 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-weight: bold;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c3 {\n color: #E52630;\n font-size: 1rem;\n line-height: 1rem;\n text-transform: uppercase;\n font-weight: normal;\n font-family: 'Anton',Impact,sans-serif;\n -webkit-letter-spacing: 0.03rem;\n -moz-letter-spacing: 0.03rem;\n -ms-letter-spacing: 0.03rem;\n letter-spacing: 0.03rem;\n }\n\n .c5 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c2 {\n width: 75%;\n margin: 0 auto;\n }\n\n .c2:first-child {\n margin-bottom: 2rem;\n text-align: center;\n font-size: 20px;\n line-height: 23px;\n }\n\n .c4 {\n margin-bottom: 2rem;\n text-align: center;\n font-size: 40px;\n line-height: 40px;\n }\n\n .c6 {\n margin-bottom: 0;\n text-align: center;\n font-size: 14px;\n line-height: 17px;\n }\n\n .c0 {\n height: 100%;\n padding: 1.5rem;\n background-color: #FFFFFF;\n }\n\n .c0 .carousel {\n position: relative;\n margin: 0 auto;\n padding-top: 2rem;\n }\n\n .c0 .carousel button.carousel__back-button,\n .c0 .carousel button.carousel__next-button {\n position: absolute;\n left: 0;\n top: 0;\n width: 33% !important;\n height: 100%;\n padding: 0 !important;\n box-shadow: none;\n text-indent: -9999px;\n background-color: transparent;\n border: none;\n }\n\n .c0 .carousel button.carousel__back-button:before,\n .c0 .carousel button.carousel__next-button:before {\n content: '';\n position: absolute;\n width: 30px;\n height: 30px;\n top: 50%;\n left: 0;\n -webkit-transform: translate(0,-50%) rotate(90deg);\n -ms-transform: translate(0,-50%) rotate(90deg);\n transform: translate(0,-50%) rotate(90deg);\n }\n\n .c0 .carousel button.carousel__back-button:after,\n .c0 .carousel button.carousel__next-button:after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 50%;\n height: 100%;\n -webkit-transition: opacity 0.2s linear;\n transition: opacity 0.2s linear;\n background: linear-gradient(90deg,rgba(255,255,255,0.95),rgba(255,255,255,0.5),rgba(255,255,255,0));\n }\n\n .c0 .carousel button.carousel__back-button:hover:after,\n .c0 .carousel button.carousel__next-button:hover:after {\n opacity: 0.5;\n }\n\n .c0 .carousel button.carousel__next-button {\n left: auto;\n right: 0;\n }\n\n .c0 .carousel button.carousel__next-button:before {\n -webkit-transform: translate(0,-50%) rotate(-90deg);\n -ms-transform: translate(0,-50%) rotate(-90deg);\n transform: translate(0,-50%) rotate(-90deg);\n }\n\n .c0 .carousel button.carousel__next-button:after {\n left: auto;\n right: 0;\n background: linear-gradient(270deg,rgba(255,255,255,0.95),rgba(255,255,255,0.75),rgba(255,255,255,0));\n }\n\n .c0 .carousel .wymd-carousel {\n -webkit-transition: -webkit-transform 0.5s;\n -webkit-transition: -webkit-transform 0.5s;\n transition: -webkit-transform 0.5s;\n -o-transition: transform 0.5s;\n -webkit-transition: -webkit-transform 0.5s;\n -webkit-transition: transform 0.5s;\n transition: transform 0.5s;\n -webkit-transform: 0.5s;\n will-change: transform;\n }\n\n .c0 .carousel .wymd-carousel .last-slide .image-wrapper:after {\n content: none;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide {\n padding-bottom: 500px !important;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide {\n text-align: center;\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: start;\n -webkit-justify-content: flex-start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-flex-direction: column;\n -ms-flex-direction: column;\n flex-direction: column;\n }\n\n @media (min-width:1024px) {\n .c2:first-child {\n font-size: 21px;\n line-height: 23px;\n }\n }\n\n @media (min-width:740px) {\n .c4 {\n font-size: 60px;\n line-height: 60px;\n }\n }\n\n @media (min-width:1024px) {\n .c4 {\n font-size: 75px;\n line-height: 78px;\n }\n }\n\n @media (min-width:740px) {\n .c6 {\n font-size: 17px;\n line-height: 19px;\n }\n }\n\n @media (min-width:1024px) {\n .c0 .carousel {\n padding-top: 3rem;\n }\n }\n\n @media (min-width:1024px) {\n .c0 .carousel button.carousel__back-button,\n .c0 .carousel button.carousel__next-button {\n width: 33.3% !important;\n }\n\n .c0 .carousel button.carousel__back-button:after,\n .c0 .carousel button.carousel__next-button:after {\n width: 100%;\n }\n }\n\n @media (min-width:1024px) {\n .c0 .carousel .wymd-carousel .carousel__slide {\n padding-bottom: 550px !important;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child {\n -webkit-transition: -webkit-transform 0.5s ease;\n -webkit-transition: transform 0.5s ease;\n transition: transform 0.5s ease;\n -webkit-transform: scale(0.5);\n -ms-transform: scale(0.5);\n transform: scale(0.5);\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child:after {\n -webkit-transition: -webkit-transform 0.5s ease,width 0.5s ease,right 0.5s ease;\n -webkit-transition: transform 0.5s ease,width 0.5s ease,right 0.5s ease;\n transition: transform 0.5s ease,width 0.5s ease,right 0.5s ease;\n right: calc(-300% - 6px);\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n width: 300%;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n right: calc(-250% - 6px);\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n width: 250%;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child {\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n right: calc(-187% - 6px);\n -webkit-transform: scale(0.5);\n -ms-transform: scale(0.5);\n transform: scale(0.5);\n width: 250%;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child {\n -webkit-transform: scale(0.5);\n -ms-transform: scale(0.5);\n transform: scale(0.5);\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child:after {\n right: calc(-250% - 6px);\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n width: 250%;\n }\n }\n\n <div\n className=\"c0 CarouselWrapper\"\n id=\"7zdR84QkZwrTh9NWx2H926\"\n >\n <p\n className=\"c1 c2\"\n color=\"inherit\"\n size=\"s\"\n >\n Over the past two years, we\u2019ve supported\n </p>\n <h1\n className=\"c3 c4\"\n color=\"red\"\n size=\"s\"\n >\n 11.7 million people\n </h1>\n <p\n className=\"c5 c6\"\n color=\"inherit\"\n size=\"s\"\n >\n including...\n </p>\n </div>\n ");
16
16
  });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@comicrelief/component-library",
3
3
  "author": "Comic Relief Engineering Team",
4
- "version": "7.35.1",
4
+ "version": "7.35.2",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Organisms/WYMDCarousel/WYMDCarousel.style.js CHANGED
@@ -102,6 +102,7 @@ const Including = styled(Text)`
102
102
  const CarouselWrapper = styled.div`
103
103
  height: 100%;
104
104
  padding: ${spacing('m')};
105
+ background-color: ${({ theme }) => theme.color('white')};
105
106
 
106
107
  .carousel {
107
108
  position: relative;
package/src/components/Organisms/WYMDCarousel/WYMDCarousel.test.js CHANGED
@@ -70,6 +70,7 @@ it("renders correctly", () => {
70
70
  .c0 {
71
71
  height: 100%;
72
72
  padding: 1.5rem;
73
+ background-color: #FFFFFF;
73
74
  }
74
75
 
75
76
  .c0 .carousel {