@comicrelief/component-library 8.74.1 → 8.75.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.
Files changed (60) hide show
  1. package/README.md +12 -0
  2. package/dist/index.cjs.js +578 -572
  3. package/dist/index.es.js +5423 -5367
  4. package/dist/style.css +1 -1
  5. package/package.json +1 -1
  6. package/src/components/Atoms/AmbientVideo/AmbientVideo.js +4 -3
  7. package/src/components/Atoms/Button/Button.js +1 -1
  8. package/src/components/Atoms/Button/Button.test.js +1 -0
  9. package/src/components/Atoms/ButtonWithStates/ButtonWithStates.js +2 -2
  10. package/src/components/Atoms/Confetti/Confetti.js +1 -1
  11. package/src/components/Atoms/Icons/IconsExample.jsx +2 -1
  12. package/src/components/Atoms/Icons/Post.js +37 -0
  13. package/src/components/Atoms/Icons/index.js +1 -0
  14. package/src/components/Atoms/Icons/post.svg +3 -0
  15. package/src/components/Atoms/Pagination/Pagination.js +1 -0
  16. package/src/components/Atoms/Pagination/__snapshots__/Pagination.test.js.snap +110 -0
  17. package/src/components/Atoms/Picture/Picture.js +4 -0
  18. package/src/components/Atoms/Picture/Picture.test.js +4 -0
  19. package/src/components/Atoms/SocialIcons/SocialIcons.js +2 -2
  20. package/src/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap +15 -0
  21. package/src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.js +6 -1
  22. package/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap +12 -0
  23. package/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js +4 -0
  24. package/src/components/Molecules/Box/__snapshots__/Box.test.js.snap +2 -0
  25. package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.js +4 -2
  26. package/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap +40 -0
  27. package/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.js +2 -1
  28. package/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap +6 -0
  29. package/src/components/Molecules/Card/Card.js +3 -1
  30. package/src/components/Molecules/Card/__snapshots__/Card.test.js.snap +8 -0
  31. package/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap +4 -0
  32. package/src/components/Molecules/Countdown/Countdown.js +5 -5
  33. package/src/components/Molecules/Descriptor/Descriptor.test.js +221 -221
  34. package/src/components/Molecules/DoubleCopy/DoubleCopy.js +3 -3
  35. package/src/components/Molecules/DoubleCopy/DoubleCopy.test.js +3 -0
  36. package/src/components/Molecules/EmailSignUp/EmailSignUp.js +8 -7
  37. package/src/components/Molecules/HeroBanner/__snapshots__/HeroBanner.test.js.snap +8 -0
  38. package/src/components/Molecules/PartnerLink/PartnerLink.test.js +2 -0
  39. package/src/components/Molecules/PictureOrVideo/__snapshots__/PictureOrVideo.test.js.snap +10 -0
  40. package/src/components/Molecules/Promo/__snapshots__/Promo.test.js.snap +4 -0
  41. package/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap +2 -0
  42. package/src/components/Molecules/SearchResult/__snapshots__/SearchResult.test.js.snap +8 -0
  43. package/src/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap +12 -0
  44. package/src/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap +2 -0
  45. package/src/components/Molecules/StatsSlice/StatsSlice.js +2 -1
  46. package/src/components/Molecules/StatsSlice/_StatNode.js +7 -6
  47. package/src/components/Molecules/StatsSlice/__snapshots__/StatsSlice.test.js.snap +28 -0
  48. package/src/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap +2 -0
  49. package/src/components/Organisms/DynamicGallery/DynamicGallery.js +4 -3
  50. package/src/components/Organisms/DynamicGallery/_DynamicGalleryColumn.js +4 -2
  51. package/src/components/Organisms/DynamicGallery/_Lightbox.js +11 -8
  52. package/src/components/Organisms/DynamicGallery/__snapshots__/DynamicGallery.test.js.snap +56 -10
  53. package/src/components/Organisms/EmailBanner/__snapshots__/EmailBanner.test.js.snap +8 -0
  54. package/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap +2 -0
  55. package/src/components/Organisms/Footer/__snapshots__/Footer.test.js.snap +5 -0
  56. package/src/components/Organisms/FooterNew/__snapshots__/FooterNew.test.js.snap +62 -22
  57. package/src/components/Organisms/Membership/Membership.test.js +2 -0
  58. package/src/docs/InstallationDoc.jsx +3 -0
  59. package/src/index.js +2 -0
  60. package/src/theme/shared/global.css +0 -1
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- @import"https://fonts.googleapis.com/css?family=Anton%7CMontserrat:400,500,600,700&display=swap";@font-face{font-family:Founders-GroteskXCondensed-Bold;src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskX-CondensedWeb-Bold.eot);src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskX-CondensedWeb-Bold.woff2) format("woff2"),url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskX-CondensedWeb-Bold.woff) format("woff");font-display:fallback}@font-face{font-family:Founders-Grotesk-Semibold;src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Semibold.eot);src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Semibold.woff2) format("woff2"),url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Semibold.woff) format("woff");font-display:fallback}@font-face{font-family:Founders-Grotesk-Regular;src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Regular.eot);src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Regular.woff2) format("woff2"),url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Regular.woff) format("woff");font-display:fallback}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{margin:0;padding:0;-webkit-font-smoothing:antialiased}h1,h2{text-transform:uppercase;font-family:Anton,Impact,sans-serif}h1,h2,h3,h4,h5,h6,p{word-break:break-word;margin:0 0 1rem}h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child h6:last-child,p:last-child{margin-bottom:0}h2,h3,h4,h5,h6,p,a,button{font-family:inherit}p,a,button{margin-top:0}p+h1,p+h2{margin-top:2rem}table{border-collapse:collapse;border-spacing:0;word-break:normal}table td{padding:10px}.ls-blur-up-is-loading{visibility:hidden}.ls-blur-up-img{position:absolute;top:0;left:0;width:100%;height:100%;display:block;font-family:"blur-up: auto","object-fit: cover";-o-object-fit:cover;object-fit:cover}.ls-blur-up-img{filter:blur(10px);opacity:1;transition:opacity 1s,filter 1.5s}.ls-blur-up-img.ls-inview.ls-original-loaded{opacity:0;filter:blur(5px)}a{color:inherit}a:hover,a:focus{text-decoration:none}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:flex;height:2em;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports (outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports (outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:flex;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}.rsg--content-3,.rsg--content-3 div[data-preview=HeroBanner]{padding:0}.range-slider{touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;cursor:pointer;display:block;position:relative;width:100%;height:8px;background:#ddd;border-radius:4px}.range-slider[data-vertical]{height:100%;width:8px}.range-slider[data-disabled]{opacity:.5;cursor:not-allowed}.range-slider .range-slider__thumb{position:absolute;z-index:3;top:50%;width:24px;height:24px;transform:translate(-50%,-50%);border-radius:50%;background:#2196f3}.range-slider .range-slider__thumb:focus-visible{outline:0;box-shadow:0 0 0 6px #2196f380}.range-slider[data-vertical] .range-slider__thumb{left:50%}.range-slider .range-slider__thumb[data-disabled]{z-index:2}.range-slider .range-slider__range{position:absolute;z-index:1;transform:translateY(-50%);top:50%;width:100%;height:100%;background:#51adf6}.range-slider[data-vertical] .range-slider__range{left:50%;transform:translate(-50%)}.range-slider input[type=range]{-webkit-appearance:none;pointer-events:none;position:absolute;z-index:2;top:0;left:0;width:0;height:0;background-color:transparent}.range-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none}.range-slider input[type=range]::-moz-range-thumb{width:0;height:0;border:0}.range-slider input[type=range]:focus{outline:0}.buttonBack___1mlaL,.buttonFirst___2rhFr,.buttonLast___2yuh0,.buttonNext___2mOCa,.buttonNext___3Lm3s,.dot___3c3SI{cursor:pointer}.image___xtQGH{display:block;width:100%;height:100%}.spinner___27VUp{position:absolute;top:calc(50% - 15px);left:calc(50% - 15px);width:30px;height:30px;animation-name:spin___S3UuE;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;border:4px solid #a9a9a9;border-top-color:#000;border-radius:30px}@keyframes spin___S3UuE{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.container___2O72F{position:relative;overflow:hidden;height:100%;width:100%}.overlay___IV4qY{position:absolute;top:0;left:0;bottom:0;right:0;opacity:0;cursor:zoom-in;transition:opacity .3s,transform .3s}.hover___MYy31,.loading___1pvNI,.zoom___3kqYk{opacity:1}.imageLoadingSpinnerContainer___3UIPD{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#f4f4f4}.slide___3-Nqo{position:relative;display:block;box-sizing:border-box;height:0;margin:0;list-style-type:none}.slide___3-Nqo:focus{outline:none!important}.slideHorizontal___1NzNV{float:left}[dir=rtl] .slideHorizontal___1NzNV{direction:rtl;transform:scaleX(-1)}.slideInner___2mfX9{position:absolute;top:0;left:0;width:100%;height:100%}.focusRing___1airF{position:absolute;top:5px;right:5px;bottom:5px;left:5px;pointer-events:none;outline-width:5px;outline-style:solid;outline-color:Highlight}@media (-webkit-min-device-pixel-ratio:0){.focusRing___1airF{outline-style:auto;outline-color:-webkit-focus-ring-color}}.horizontalSlider___281Ls{position:relative;overflow:hidden}.horizontalSlider___281Ls:not(.touchDisabled___2qs4y){touch-action:pan-y pinch-zoom}[dir=rtl] .horizontalSlider___281Ls{direction:ltr;transform:scaleX(-1)}.horizontalSliderTray___1L-0W{overflow:hidden;width:100%}.verticalSlider___34ZFD{position:relative;overflow:hidden}.verticalSliderTray___267D8{overflow:hidden}.verticalTray___12Key{float:left}.verticalSlideTrayWrap___2nO7o{overflow:hidden}.sliderTray___-vHFQ{display:block;list-style:none;padding:0;margin:0}.sliderAnimation___300FY{transition:transform .5s;transition-timing-function:cubic-bezier(.645,.045,.355,1);will-change:transform}.masterSpinnerContainer___1Z6hB{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#f4f4f4}
1
+ @font-face{font-family:Founders-GroteskXCondensed-Bold;src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskX-CondensedWeb-Bold.eot);src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskX-CondensedWeb-Bold.woff2) format("woff2"),url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskX-CondensedWeb-Bold.woff) format("woff");font-display:fallback}@font-face{font-family:Founders-Grotesk-Semibold;src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Semibold.eot);src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Semibold.woff2) format("woff2"),url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Semibold.woff) format("woff");font-display:fallback}@font-face{font-family:Founders-Grotesk-Regular;src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Regular.eot);src:url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Regular.woff2) format("woff2"),url(https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Regular.woff) format("woff");font-display:fallback}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{margin:0;padding:0;-webkit-font-smoothing:antialiased}h1,h2{text-transform:uppercase;font-family:Anton,Impact,sans-serif}h1,h2,h3,h4,h5,h6,p{word-break:break-word;margin:0 0 1rem}h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child h6:last-child,p:last-child{margin-bottom:0}h2,h3,h4,h5,h6,p,a,button{font-family:inherit}p,a,button{margin-top:0}p+h1,p+h2{margin-top:2rem}table{border-collapse:collapse;border-spacing:0;word-break:normal}table td{padding:10px}.ls-blur-up-is-loading{visibility:hidden}.ls-blur-up-img{position:absolute;top:0;left:0;width:100%;height:100%;display:block;font-family:"blur-up: auto","object-fit: cover";-o-object-fit:cover;object-fit:cover}.ls-blur-up-img{filter:blur(10px);opacity:1;transition:opacity 1s,filter 1.5s}.ls-blur-up-img.ls-inview.ls-original-loaded{opacity:0;filter:blur(5px)}a{color:inherit}a:hover,a:focus{text-decoration:none}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:flex;height:2em;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports (outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports (outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:flex;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}.rsg--content-3,.rsg--content-3 div[data-preview=HeroBanner]{padding:0}.range-slider{touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;cursor:pointer;display:block;position:relative;width:100%;height:8px;background:#ddd;border-radius:4px}.range-slider[data-vertical]{height:100%;width:8px}.range-slider[data-disabled]{opacity:.5;cursor:not-allowed}.range-slider .range-slider__thumb{position:absolute;z-index:3;top:50%;width:24px;height:24px;transform:translate(-50%,-50%);border-radius:50%;background:#2196f3}.range-slider .range-slider__thumb:focus-visible{outline:0;box-shadow:0 0 0 6px #2196f380}.range-slider[data-vertical] .range-slider__thumb{left:50%}.range-slider .range-slider__thumb[data-disabled]{z-index:2}.range-slider .range-slider__range{position:absolute;z-index:1;transform:translateY(-50%);top:50%;width:100%;height:100%;background:#51adf6}.range-slider[data-vertical] .range-slider__range{left:50%;transform:translate(-50%)}.range-slider input[type=range]{-webkit-appearance:none;pointer-events:none;position:absolute;z-index:2;top:0;left:0;width:0;height:0;background-color:transparent}.range-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none}.range-slider input[type=range]::-moz-range-thumb{width:0;height:0;border:0}.range-slider input[type=range]:focus{outline:0}.buttonBack___1mlaL,.buttonFirst___2rhFr,.buttonLast___2yuh0,.buttonNext___2mOCa,.buttonNext___3Lm3s,.dot___3c3SI{cursor:pointer}.image___xtQGH{display:block;width:100%;height:100%}.spinner___27VUp{position:absolute;top:calc(50% - 15px);left:calc(50% - 15px);width:30px;height:30px;animation-name:spin___S3UuE;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;border:4px solid #a9a9a9;border-top-color:#000;border-radius:30px}@keyframes spin___S3UuE{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.container___2O72F{position:relative;overflow:hidden;height:100%;width:100%}.overlay___IV4qY{position:absolute;top:0;left:0;bottom:0;right:0;opacity:0;cursor:zoom-in;transition:opacity .3s,transform .3s}.hover___MYy31,.loading___1pvNI,.zoom___3kqYk{opacity:1}.imageLoadingSpinnerContainer___3UIPD{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#f4f4f4}.slide___3-Nqo{position:relative;display:block;box-sizing:border-box;height:0;margin:0;list-style-type:none}.slide___3-Nqo:focus{outline:none!important}.slideHorizontal___1NzNV{float:left}[dir=rtl] .slideHorizontal___1NzNV{direction:rtl;transform:scaleX(-1)}.slideInner___2mfX9{position:absolute;top:0;left:0;width:100%;height:100%}.focusRing___1airF{position:absolute;top:5px;right:5px;bottom:5px;left:5px;pointer-events:none;outline-width:5px;outline-style:solid;outline-color:Highlight}@media (-webkit-min-device-pixel-ratio:0){.focusRing___1airF{outline-style:auto;outline-color:-webkit-focus-ring-color}}.horizontalSlider___281Ls{position:relative;overflow:hidden}.horizontalSlider___281Ls:not(.touchDisabled___2qs4y){touch-action:pan-y pinch-zoom}[dir=rtl] .horizontalSlider___281Ls{direction:ltr;transform:scaleX(-1)}.horizontalSliderTray___1L-0W{overflow:hidden;width:100%}.verticalSlider___34ZFD{position:relative;overflow:hidden}.verticalSliderTray___267D8{overflow:hidden}.verticalTray___12Key{float:left}.verticalSlideTrayWrap___2nO7o{overflow:hidden}.sliderTray___-vHFQ{display:block;list-style:none;padding:0;margin:0}.sliderAnimation___300FY{transition:transform .5s;transition-timing-function:cubic-bezier(.645,.045,.355,1);will-change:transform}.masterSpinnerContainer___1Z6hB{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#f4f4f4}
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": "8.74.1",
4
+ "version": "8.75.0",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.es.js",
7
7
  "files": [
@@ -72,7 +72,7 @@ const AmbientVideo = ({
72
72
  const VideoWrapper = showPlayPause ? WrapperWithHover : Wrapper;
73
73
 
74
74
  return (
75
- <VideoWrapper>
75
+ <VideoWrapper data-testid="AmbientVideoWrapper">
76
76
  <StyledVideo
77
77
  ref={videoRef}
78
78
  poster={effectivePoster}
@@ -83,6 +83,7 @@ const AmbientVideo = ({
83
83
  onEnded={handleEnded}
84
84
  onPlay={handlePlay}
85
85
  onPause={handlePause}
86
+ data-testid="AmbientVideo"
86
87
  >
87
88
  {mobileSrc ? (
88
89
  <source src={mobileSrc} type="video/mp4" media={belowLBreakpointMediaString} />
@@ -100,8 +101,8 @@ const AmbientVideo = ({
100
101
  <ReducedMotionFallback>Video playback not supported</ReducedMotionFallback>
101
102
  )}
102
103
  {showPlayPause && (
103
- <PlayPauseButton type="button" onClick={handlePlayPauseClick} aria-label={isPlaying ? 'Pause' : 'Play'} data-play-pause={isPlaying ? 'pause' : 'play'}>
104
- <PlayPauseIcon $icon={normaliseSrc(isPlaying ? PauseIcon : PlayIcon)} aria-hidden />
104
+ <PlayPauseButton type="button" onClick={handlePlayPauseClick} aria-label={isPlaying ? 'Pause' : 'Play'} data-play-pause={isPlaying ? 'pause' : 'play'} data-testid="PlayPauseButton">
105
+ <PlayPauseIcon $icon={normaliseSrc(isPlaying ? PauseIcon : PlayIcon)} aria-hidden data-testid="PlayPauseIcon" />
105
106
  </PlayPauseButton>
106
107
  )}
107
108
  </VideoWrapper>
@@ -11,7 +11,7 @@ const Button = React.forwardRef(({
11
11
  buttonType = buttonTypes.PRIMARY,
12
12
  ...rest
13
13
  }, ref) => (
14
- <StyledButton {...rest} as={wrapper ? 'span' : 'button'} ref={ref} $fullWidth={fullWidth} $color={color} $buttonType={buttonType}>
14
+ <StyledButton {...rest} as={wrapper ? 'span' : 'button'} ref={ref} $fullWidth={fullWidth} $color={color} $buttonType={buttonType} data-testid="Button">
15
15
  {children}
16
16
  </StyledButton>
17
17
  ));
@@ -77,6 +77,7 @@ it('renders a standard styled link correctly', () => {
77
77
 
78
78
  <button
79
79
  className="c0"
80
+ data-testid="Button"
80
81
  type="submit"
81
82
  >
82
83
  A standard link
@@ -39,9 +39,9 @@ const ButtonWithStates = React.forwardRef(({
39
39
  }, []);
40
40
 
41
41
  return (
42
- <ButtonWithDisabledState ref={ref} disabled={disabled} {...rest}>
42
+ <ButtonWithDisabledState ref={ref} disabled={disabled} {...rest} data-testid="ButtonWithStates">
43
43
  {loading ? loadingText : children}
44
- <LoaderContainer ref={getLoaderColour} $withMargin={loading}>
44
+ <LoaderContainer ref={getLoaderColour} $withMargin={loading} data-testid="LoaderContainer">
45
45
  <ScaleLoader height={16} width={2} loading={loading} color={loaderColour} />
46
46
  </LoaderContainer>
47
47
  </ButtonWithDisabledState>
@@ -91,7 +91,7 @@ export default function Confetti({ trigger, duration = 3000 }) {
91
91
 
92
92
  return (
93
93
  <>
94
- <ReactCanvasConfetti onInit={getInstance} style={canvasStyles} />
94
+ <ReactCanvasConfetti onInit={getInstance} style={canvasStyles} data-testid="Confetti" />
95
95
  </>
96
96
  );
97
97
  }
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import styled from 'styled-components';
3
- import { Arrow, AtSign, Chevron, CtaArrow, Download, External, Favourite, Internal } from './index';
3
+ import { Arrow, AtSign, Chevron, CtaArrow, Download, External, Favourite, Internal, Post } from './index';
4
4
  import Cross from './Cross';
5
5
  import Curve from './Curve';
6
6
  import { ExampleContainer } from '../../../demos/SharedStyles';
@@ -48,6 +48,7 @@ export default function IconsExample() {
48
48
  ['Internal', <Internal size={48} colour="black" />],
49
49
  ['AtSign', <AtSign size={48} colour="black" />],
50
50
  ['Cross', <Cross size={48} colour="black" />],
51
+ ['Post', <Post size={48} colour="black" />],
51
52
  ].map(([name, icon]) => (
52
53
  <IconCard key={name}>
53
54
  {icon}
@@ -0,0 +1,37 @@
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import styled, { withTheme } from 'styled-components';
4
+
5
+ const StyledSVG = styled.svg`
6
+ fill: ${({ mobileColour, colour, theme }) => (mobileColour ? theme.color(mobileColour) : theme.color(colour))};
7
+
8
+ @media ${({ theme }) => theme.allBreakpoints('L')} {
9
+ fill: ${({ colour, theme }) => (colour ? theme.color(colour) : theme.color('white'))};
10
+ }
11
+ `;
12
+
13
+ const Post = ({
14
+ colour = 'white', mobileColour = null, theme, size = 24, ...rest
15
+ }) => (
16
+ <StyledSVG
17
+ {...rest}
18
+ width={size}
19
+ height={size}
20
+ fill={theme.color(colour)}
21
+ colour={colour}
22
+ mobileColour={mobileColour}
23
+ xmlns="http://www.w3.org/2000/svg"
24
+ viewBox="0 0 24 24"
25
+ >
26
+ <path d="M23.404 5.91909C23.439 5.84409 23.4635 5.76309 23.479 5.67859C23.4825 5.65859 23.4875 5.63909 23.4895 5.61909C23.4915 5.60459 23.496 5.59109 23.497 5.57659C23.503 5.49709 23.497 5.41959 23.4855 5.34359C23.483 5.32809 23.4785 5.31409 23.475 5.29859C23.456 5.20659 23.4265 5.11859 23.3835 5.03709C23.381 5.03209 23.381 5.02659 23.378 5.02159C23.377 5.02009 23.3755 5.01859 23.3745 5.01709C23.3275 4.93259 23.267 4.85759 23.198 4.79009C23.185 4.77709 23.1725 4.76459 23.159 4.75259C23.0895 4.69109 23.013 4.63909 22.928 4.59859C22.916 4.59309 22.9035 4.58909 22.8915 4.58409C22.812 4.55009 22.7275 4.52609 22.6385 4.51359C22.626 4.51159 22.6145 4.50809 22.602 4.50709C22.593 4.50609 22.585 4.50309 22.576 4.50259L3.07601 3.00259C2.67651 2.97059 2.28551 3.19009 2.10401 3.55559C1.92301 3.92059 1.98201 4.35959 2.25251 4.66409L5.35251 8.15159L1.29051 9.02209C0.881009 9.11009 0.569009 9.44409 0.509509 9.85909C0.450509 10.2741 0.656509 10.6816 1.02551 10.8801L7.10151 14.1521L8.01551 19.1786C8.08201 19.5446 8.34601 19.8431 8.70101 19.9541C8.80001 19.9851 8.90051 20.0001 9.00001 20.0001C9.26101 20.0001 9.51651 19.8976 9.70701 19.7071L23.207 6.20709C23.2175 6.19659 23.2225 6.18209 23.233 6.17109C23.294 6.10509 23.349 6.03309 23.391 5.95159C23.396 5.94109 23.399 5.93009 23.404 5.91909ZM5.39301 5.18709L15.544 5.96809L7.60051 7.67009L5.39301 5.18709ZM9.64251 16.9436L8.98401 13.3211C8.93001 13.0221 8.74201 12.7636 8.47401 12.6196L4.36751 10.4081L19.3985 7.18709L9.64251 16.9436ZM3.00101 18.0001C2.63401 18.0001 2.28101 17.7976 2.10551 17.4471C1.85851 16.9531 2.05851 16.3526 2.55301 16.1051L4.55301 15.1051C5.04801 14.8571 5.64801 15.0586 5.89501 15.5526C6.14201 16.0466 5.94201 16.6471 5.44751 16.8946L3.44751 17.8946C3.30351 17.9666 3.15101 18.0001 3.00101 18.0001ZM6.70701 18.2931C7.09751 18.6836 7.09751 19.3166 6.70701 19.7071L4.70701 21.7071C4.51151 21.9026 4.25601 22.0001 4.00001 22.0001C3.74401 22.0001 3.48851 21.9026 3.29301 21.7071C2.90251 21.3166 2.90251 20.6836 3.29301 20.2931L5.29301 18.2931C5.68351 17.9026 6.31651 17.9026 6.70701 18.2931Z" />
27
+ </StyledSVG>
28
+ );
29
+
30
+ Post.propTypes = {
31
+ colour: PropTypes.string,
32
+ mobileColour: PropTypes.string,
33
+ size: PropTypes.number,
34
+ theme: PropTypes.objectOf(PropTypes.shape).isRequired
35
+ };
36
+
37
+ export default withTheme(Post);
@@ -6,3 +6,4 @@ export { default as Chevron } from './Chevron';
6
6
  export { default as Arrow } from './Arrow';
7
7
  export { default as AtSign } from './AtSign';
8
8
  export { default as CtaArrow } from './CtaArrow';
9
+ export { default as Post } from './Post';
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M23.404 5.91909C23.439 5.84409 23.4635 5.76309 23.479 5.67859C23.4825 5.65859 23.4875 5.63909 23.4895 5.61909C23.4915 5.60459 23.496 5.59109 23.497 5.57659C23.503 5.49709 23.497 5.41959 23.4855 5.34359C23.483 5.32809 23.4785 5.31409 23.475 5.29859C23.456 5.20659 23.4265 5.11859 23.3835 5.03709C23.381 5.03209 23.381 5.02659 23.378 5.02159C23.377 5.02009 23.3755 5.01859 23.3745 5.01709C23.3275 4.93259 23.267 4.85759 23.198 4.79009C23.185 4.77709 23.1725 4.76459 23.159 4.75259C23.0895 4.69109 23.013 4.63909 22.928 4.59859C22.916 4.59309 22.9035 4.58909 22.8915 4.58409C22.812 4.55009 22.7275 4.52609 22.6385 4.51359C22.626 4.51159 22.6145 4.50809 22.602 4.50709C22.593 4.50609 22.585 4.50309 22.576 4.50259L3.07601 3.00259C2.67651 2.97059 2.28551 3.19009 2.10401 3.55559C1.92301 3.92059 1.98201 4.35959 2.25251 4.66409L5.35251 8.15159L1.29051 9.02209C0.881009 9.11009 0.569009 9.44409 0.509509 9.85909C0.450509 10.2741 0.656509 10.6816 1.02551 10.8801L7.10151 14.1521L8.01551 19.1786C8.08201 19.5446 8.34601 19.8431 8.70101 19.9541C8.80001 19.9851 8.90051 20.0001 9.00001 20.0001C9.26101 20.0001 9.51651 19.8976 9.70701 19.7071L23.207 6.20709C23.2175 6.19659 23.2225 6.18209 23.233 6.17109C23.294 6.10509 23.349 6.03309 23.391 5.95159C23.396 5.94109 23.399 5.93009 23.404 5.91909ZM5.39301 5.18709L15.544 5.96809L7.60051 7.67009L5.39301 5.18709ZM9.64251 16.9436L8.98401 13.3211C8.93001 13.0221 8.74201 12.7636 8.47401 12.6196L4.36751 10.4081L19.3985 7.18709L9.64251 16.9436ZM3.00101 18.0001C2.63401 18.0001 2.28101 17.7976 2.10551 17.4471C1.85851 16.9531 2.05851 16.3526 2.55301 16.1051L4.55301 15.1051C5.04801 14.8571 5.64801 15.0586 5.89501 15.5526C6.14201 16.0466 5.94201 16.6471 5.44751 16.8946L3.44751 17.8946C3.30351 17.9666 3.15101 18.0001 3.00101 18.0001ZM6.70701 18.2931C7.09751 18.6836 7.09751 19.3166 6.70701 19.7071L4.70701 21.7071C4.51151 21.9026 4.25601 22.0001 4.00001 22.0001C3.74401 22.0001 3.48851 21.9026 3.29301 21.7071C2.90251 21.3166 2.90251 20.6836 3.29301 20.2931L5.29301 18.2931C5.68351 17.9026 6.31651 17.9026 6.70701 18.2931Z" fill="#222222"/>
3
+ </svg>
@@ -114,6 +114,7 @@ const Pagination = ({
114
114
  colorOnHover={colorOnHover}
115
115
  backgroundColorOnHover={backgroundColorOnHover}
116
116
  {...restProps}
117
+ data-testid="Pagination"
117
118
  />
118
119
  );
119
120
  };