@comicrelief/component-library 7.12.0 → 7.12.2

package/dist/components/Molecules/Accordion/Accordion.js

@@ -33,12 +33,14 @@ var Container = _styledComponents.default.div.withConfig({
   return theme.color('white');
 });
 
-var ChevAnima = (0, _styledComponents.keyframes)(["0%{margin-top:0rem;}50%{margin-top:0.5rem;}100%{margin-top:0rem;}"]);
+var ChevronKeyframes = (0, _styledComponents.keyframes)(["0%{margin-top:0rem;}50%{margin-top:0.5rem;}100%{margin-top:0rem;}"]);
 
 var Button = _styledComponents.default.button.withConfig({
   displayName: "Accordion__Button",
   componentId: "sc-19u0s0h-1"
-})(["display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;transition:bottom 0.1s linear;cursor:pointer;&:focus,&:hover{color:inherit;outline:none;> div{animation-name:", ";animation-duration:0.4s;}}padding:", ";@media ", "{padding:", " ", ";}"], ChevAnima, (0, _spacing.default)('l'), function (_ref2) {
+})(["display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;transition:bottom 0.1s linear;cursor:pointer;&:focus,&:hover{color:inherit;outline:none;> div{animation-name:", ";animation-duration:0.4s;}}padding:", ";@media ", "{padding:", " ", ";}"], function (props) {
+  return props.ChevronKeyframes;
+}, (0, _spacing.default)('l'), function (_ref2) {
   var theme = _ref2.theme;
   return theme.breakpoint('small');
 }, (0, _spacing.default)('l'), (0, _spacing.default)('lg'));
@@ -78,7 +80,8 @@ var Accordion = function Accordion(_ref6) {
 
   return /*#__PURE__*/_react.default.createElement(Container, rest, /*#__PURE__*/_react.default.createElement(Button, {
     onClick: handleOpen,
-    "aria-expanded": isOpen ? 'true' : 'false'
+    "aria-expanded": isOpen ? 'true' : 'false',
+    ChevronKeyframes: ChevronKeyframes
   }, title, /*#__PURE__*/_react.default.createElement(Icon, null, /*#__PURE__*/_react.default.createElement(_index.Chevron, {
     colour: "black",
     direction: isOpen ? 'up' : 'down'

package/dist/components/Molecules/SingleMessage/SingleMessage.js

@@ -58,7 +58,7 @@ var SingleMessage = function SingleMessage(_ref) {
   var _useState5 = (0, _react.useState)(false),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
       onPlay = _useState6[0],
-      setonPlay = _useState6[1];
+      setOnPlay = _useState6[1];
 
   var _useState7 = (0, _react.useState)(false),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
@@ -118,7 +118,7 @@ var SingleMessage = function SingleMessage(_ref) {
   }, [hasVideo, isInitialised, uniqueID, videoID, onPlay]);
 
   var handlePlay = function handlePlay(thisUniqueID) {
-    setonPlay(true); // Trigger play and update video state
+    setOnPlay(true); // Trigger play and update video state
 
     var thisVideoID = "".concat(thisUniqueID, "__video");
     setTimeout(function () {

package/dist/components/Molecules/SingleMessageDS/SingleMessageDs.md

@@ -154,6 +154,7 @@ import Download from '../../Atoms/Icons/Download';
       imageLow={defaultData.image}
       imageLeft={true}
       images={defaultData.images}
+      subtitle="subTitle"
     >
       <Text tag='p'>
         Whatever you’ve got planned, the Sport Relief shop has everything you need
@@ -179,10 +180,11 @@ import Download from '../../Atoms/Icons/Download';
       images={defaultData.images}
       youTubeId="faz0JeBB41M"
       imageLeft={true}
+      subtitle="subTitle"
     >
       <Text tag='p'>
         Some text and stuff.
       </Text>
     </SingleMessageDs>
 </div>;
-```
+```

package/dist/components/Molecules/VideoBanner/VideoBanner.md

@@ -1,5 +1,5 @@
 ```js
-const poster = require('../../../styleguide/assets/poster.png');
+import poster from '../../../styleguide/assets/poster.png';
 const src =
   'https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4';
 

package/dist/components/Organisms/Donate/Form/PopUpComponent.js

@@ -30,8 +30,10 @@ var fadeOpen = (0, _styledComponents.keyframes)(["0%{opacity:0;max-height:0px;di
 var StyledPopUp = _styledComponents.default.div.withConfig({
   displayName: "PopUpComponent__StyledPopUp",
   componentId: "sc-1d7imlo-0"
-})(["display:grid;overflow:hidden;max-height:350px;opacity:1;animation:0.4s ", " ease;", " background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;", "{width:450px;margin-right:auto;margin-left:auto;}"], fadeOpen, function (props) {
-  return props.isClosed && (0, _styledComponents.css)(["animation:", "s ", " ease forwards;"], closeDuration, fadeClose);
+})(["display:grid;overflow:hidden;max-height:350px;opacity:1;animation:0.4s ", " ease;", " background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;", "{width:450px;margin-right:auto;margin-left:auto;}"], function (props) {
+  return props.fadeOpen;
+}, function (props) {
+  return props.isClosed && (0, _styledComponents.css)(["animation:", "s ", " ease forwards;"], closeDuration, props.fadeClose);
 }, function (_ref) {
   var theme = _ref.theme;
   return theme.color('blue_light');
@@ -69,7 +71,9 @@ var PopUpComponent = function PopUpComponent(_ref3) {
   };
 
   return /*#__PURE__*/_react.default.createElement(StyledPopUp, {
-    isClosed: isClosed
+    isClosed: isClosed,
+    fadeOpen: fadeOpen,
+    fadeClose: fadeClose
   }, /*#__PURE__*/_react.default.createElement(Button, {
     onClick: function onClick() {
       return handleCloser();

package/dist/components/Organisms/Header/Header.style.js

@@ -52,14 +52,11 @@ exports.Brand = Brand;
 var MetaIcons = _styledComponents.default.div.withConfig({
   displayName: "Headerstyle__MetaIcons",
   componentId: "sc-11ghppe-3"
-})(["width:auto;display:flex;align-items:center;> div{height:35px;width:auto;display:inline-block;> a{height:inherit;width:inherit;margin-left:", ";img{padding:5px;height:inherit;width:inherit;}}}@media ", "{position:relative;display:flex;align-items:center;background-color:", ";margin-right:0px;right:0px;}"], function (_ref4) {
+})(["width:auto;display:flex;align-items:center;> div{height:35px;width:auto;display:inline-block;> a{height:inherit;width:inherit;margin-left:0.5rem;img{padding:5px;height:inherit;width:inherit;}}}@media ", "{position:relative;display:flex;align-items:center;background-color:", ";margin-right:0px;right:0px;}"], function (_ref4) {
   var theme = _ref4.theme;
-  return theme.fontSize('xxs');
+  return theme.breakpoint('nav');
 }, function (_ref5) {
   var theme = _ref5.theme;
-  return theme.breakpoint('nav');
-}, function (_ref6) {
-  var theme = _ref6.theme;
   return theme.color('white');
 });
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.12.0",
+  "version": "7.12.2",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Molecules/Accordion/Accordion.js

@@ -11,7 +11,7 @@ const Container = styled.div`
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
 `;
 
-const ChevAnima = keyframes`
+const ChevronKeyframes = keyframes`
  0% { margin-top: 0rem; }
  50% { margin-top: 0.5rem; }
  100% { margin-top: 0rem; }
@@ -32,7 +32,7 @@ const Button = styled.button`
     color: inherit; // text was flashing white on focus on safari without this.
     outline: none;
     > div {
-      animation-name: ${ChevAnima};
+      animation-name: ${props => props.ChevronKeyframes};
       animation-duration: 0.4s;
     }
   }
@@ -82,7 +82,7 @@ const Accordion = ({
 
   return (
     <Container {...rest}>
-      <Button onClick={handleOpen} aria-expanded={isOpen ? 'true' : 'false'}>
+      <Button onClick={handleOpen} aria-expanded={isOpen ? 'true' : 'false'} ChevronKeyframes={ChevronKeyframes}>
         {title}
         <Icon>
           <Chevron colour="black" direction={isOpen ? 'up' : 'down'} />

package/src/components/Molecules/SingleMessage/SingleMessage.js

@@ -39,7 +39,7 @@ const SingleMessage = ({
   // States to track video status
   const [isInitialised, setIsInitialised] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
-  const [onPlay, setonPlay] = useState(false);
+  const [onPlay, setOnPlay] = useState(false);
   const [isBuffering, setIsBuffering] = useState(false);
   const [uniqueID, setUniqueID] = useState(null);
   const [hasParentID, setHasParentID] = useState(false);
@@ -97,7 +97,7 @@ const SingleMessage = ({
   }, [hasVideo, isInitialised, uniqueID, videoID, onPlay]);
 
   const handlePlay = thisUniqueID => {
-    setonPlay(true);
+    setOnPlay(true);
     // Trigger play and update video state
     const thisVideoID = `${thisUniqueID}__video`;
 

package/src/components/Molecules/SingleMessageDS/SingleMessageDs.md

@@ -154,6 +154,7 @@ import Download from '../../Atoms/Icons/Download';
       imageLow={defaultData.image}
       imageLeft={true}
       images={defaultData.images}
+      subtitle="subTitle"
     >
       <Text tag='p'>
         Whatever you’ve got planned, the Sport Relief shop has everything you need
@@ -179,10 +180,11 @@ import Download from '../../Atoms/Icons/Download';
       images={defaultData.images}
       youTubeId="faz0JeBB41M"
       imageLeft={true}
+      subtitle="subTitle"
     >
       <Text tag='p'>
         Some text and stuff.
       </Text>
     </SingleMessageDs>
 </div>;
-```
+```

package/src/components/Molecules/VideoBanner/VideoBanner.md

@@ -1,5 +1,5 @@
 ```js
-const poster = require('../../../styleguide/assets/poster.png');
+import poster from '../../../styleguide/assets/poster.png';
 const src =
   'https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4';
 

package/src/components/Organisms/Donate/Form/PopUpComponent.js

@@ -38,9 +38,9 @@ const StyledPopUp = styled.div`
   overflow: hidden;
   max-height: 350px;
   opacity: 1;
-  animation: 0.4s ${fadeOpen} ease;
+  animation: 0.4s ${props => props.fadeOpen} ease;
   ${props => props.isClosed && css`
-    animation: ${closeDuration}s ${fadeClose} ease forwards;
+    animation: ${closeDuration}s ${props.fadeClose} ease forwards;
   `}
   background-color: ${({ theme }) => theme.color('blue_light')};
   box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
@@ -92,7 +92,7 @@ const PopUpComponent = ({ PopUpText, setPopOpen }) => {
   };
 
   return (
-    <StyledPopUp isClosed={isClosed}>
+    <StyledPopUp isClosed={isClosed} fadeOpen={fadeOpen} fadeClose={fadeClose}>
       <Button onClick={() => handleCloser()} aria-label="Close">
         <img src={CloseCross} alt="Close cross icon" />
       </Button>

package/src/components/Organisms/Header/Header.style.js

@@ -62,7 +62,7 @@ const MetaIcons = styled.div`
     > a {
       height: inherit;
       width: inherit;
-      margin-left: ${({ theme }) => theme.fontSize('xxs')};
+      margin-left: 0.5rem;
 
       img {
         padding: 5px;