@comicrelief/component-library 8.50.0 → 8.51.0

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _index = require("../../Atoms/Icons/index");
 const Container = _styledComponents.default.div.withConfig({
@@ -53,6 +54,10 @@ const Copy = _styledComponents.default.div.withConfig({
     return theme.allBreakpoints('M');
   }, (0, _spacing.default)('lg'), contentBottomPadding || (0, _spacing.default)('l'));
 });
+const StyledText = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "Accordion__StyledText",
+  componentId: "sc-19u0s0h-4"
+})(["margin-bottom:0;"]);
 const Accordion = _ref6 => {
   let {
     children,
@@ -69,7 +74,9 @@ const Accordion = _ref6 => {
     "aria-expanded": isOpen ? 'true' : 'false',
     ChevronKeyframes: ChevronKeyframes,
     type: "button"
-  }, title, /*#__PURE__*/_react.default.createElement(Icon, null, /*#__PURE__*/_react.default.createElement(_index.Chevron, {
+  }, /*#__PURE__*/_react.default.createElement(StyledText, {
+    tag: "h3"
+  }, title), /*#__PURE__*/_react.default.createElement(Icon, null, /*#__PURE__*/_react.default.createElement(_index.Chevron, {
     colour: "black",
     direction: isOpen ? 'up' : 'down'
   }))), /*#__PURE__*/_react.default.createElement(Copy, {

package/dist/components/Molecules/Accordion/__snapshots__/Accordion.test.js.snap

@@ -2,6 +2,23 @@
 
 exports[`renders correctly 1`] = `
 .c2 {
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 700;
+  text-transform: inherit;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  font-size: 1.25rem;
+  line-height: 1.5rem;
+}
+
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.c4 {
   font-family: 'Anton',Impact,sans-serif;
   font-weight: 400;
   text-transform: uppercase;
@@ -13,17 +30,17 @@ exports[`renders correctly 1`] = `
   line-height: 1.5rem;
 }
 
-.c2 {
+.c4 {
   font-size: 1.5rem;
   line-height: normal;
 }
 
-.c2 span {
+.c4 span {
   font-size: inherit;
   line-height: inherit;
 }
 
-.c6 {
+.c8 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
   text-transform: inherit;
@@ -35,17 +52,17 @@ exports[`renders correctly 1`] = `
   line-height: 1.25rem;
 }
 
-.c6 {
+.c8 {
   font-size: 1rem;
   line-height: normal;
 }
 
-.c6 span {
+.c8 span {
   font-size: inherit;
   line-height: inherit;
 }
 
-.c4 {
+.c6 {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
@@ -95,7 +112,7 @@ exports[`renders correctly 1`] = `
   animation-duration: 0.4s;
 }
 
-.c3 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -109,7 +126,7 @@ exports[`renders correctly 1`] = `
   align-content: center;
 }
 
-.c5 {
+.c7 {
   overflow: hidden;
   height: 0;
   visibility: none;
@@ -118,36 +135,54 @@ exports[`renders correctly 1`] = `
   padding: 0 2rem;
 }
 
+.c3 {
+  margin-bottom: 0;
+}
+
 @media (min-width:740px) {
   .c2 {
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c2 {
+    font-size: 1.375rem;
+    line-height: 1.625rem;
+  }
+}
+
+@media (min-width:740px) {
+  .c4 {
     font-size: 1.875rem;
     line-height: 1.875rem;
   }
 }
 
 @media (min-width:1024px) {
-  .c2 {
+  .c4 {
     font-size: 2rem;
     line-height: 2rem;
   }
 }
 
 @media (min-width:740px) {
-  .c6 {
+  .c8 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width:1024px) {
-  .c6 {
+  .c8 {
     font-size: 1.125rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width:1024px) {
-  .c4 {
+  .c6 {
     fill: #000000;
   }
 }
@@ -159,7 +194,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c5 {
+  .c7 {
     padding: 0 3rem;
   }
 }
@@ -173,16 +208,20 @@ exports[`renders correctly 1`] = `
     onClick={[Function]}
     type="button"
   >
-    <h2
-      className="c2"
+    <h3
+      className="c2 c3"
     >
-      I am the title
-    </h2>
+      <h2
+        className="c4"
+      >
+        I am the title
+      </h2>
+    </h3>
     <div
-      className="c3"
+      className="c5"
     >
       <svg
-        className="c4"
+        className="c6"
         direction="down"
         fill="#000000"
         height={24}
@@ -197,10 +236,10 @@ exports[`renders correctly 1`] = `
     </div>
   </button>
   <div
-    className="c5"
+    className="c7"
   >
     <p
-      className="c6"
+      className="c8"
     >
       Name, surname, email and billing address We need these to process your payment, create a receipt and send it to you. Establishment information We use this information to understand which institutions (e.g. schools, companies) raise money for us. Your details will be kept safe and never shared with other organisations; see our Privacy Policy for more information
     </p>

package/dist/components/Molecules/ArticleTeaser/ArticleTeaser.js

@@ -147,7 +147,6 @@ const ArticleTeaser = _ref15 => {
     alt = '',
     category = null,
     logoSize = null,
-    family = 'Anton',
     time = null
   } = _ref15;
   return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(Link, {
@@ -172,11 +171,7 @@ const ArticleTeaser = _ref15 => {
     weight: "bold"
   }, date), /*#__PURE__*/_react.default.createElement(Title, {
     time: time,
-    size: "xl",
-    tag: "h3",
-    height: "2rem",
-    weight: "normal",
-    family: family
+    tag: "h3"
   }, title), time && /*#__PURE__*/_react.default.createElement(Time, {
     size: "xs",
     weight: "400",

package/dist/components/Molecules/ArticleTeaser/ArticleTeaser.test.js

@@ -54,14 +54,6 @@ it('renders article teaser correctly', () => {
       line-height: 1.5rem;
     }
 
-    .c10 {
-      font-size: 2rem;
-      line-height: normal;
-      font-family: 'Anton',Impact,sans-serif;
-      font-weight: normal;
-      line-height: 2rem;
-    }
-
     .c10 span {
       font-size: inherit;
       line-height: inherit;
@@ -351,14 +343,6 @@ it('renders press realese correctly', () => {
       line-height: 1.5rem;
     }
 
-    .c10 {
-      font-size: 2rem;
-      line-height: normal;
-      font-family: 'Anton',Impact,sans-serif;
-      font-weight: normal;
-      line-height: 2rem;
-    }
-
     .c10 span {
       font-size: inherit;
       line-height: inherit;

package/dist/components/Molecules/Descriptor/Descriptor.js

@@ -141,11 +141,7 @@ const Descriptor = _ref3 => {
     color: "grey_dark",
     family: "Montserrat"
   }, date), /*#__PURE__*/_react.default.createElement(IconWrapper, null, icons)), /*#__PURE__*/_react.default.createElement(Title, {
-    size: "xl",
-    tag: "h3",
-    height: "2rem",
-    weight: "normal",
-    family: "Anton"
+    tag: "h3"
   }, title), /*#__PURE__*/_react.default.createElement(TagWrapper, null, tagItems), /*#__PURE__*/_react.default.createElement(Description, null, children)));
 };
 var _default = exports.default = Descriptor;

package/dist/components/Molecules/Descriptor/Descriptor.test.js

@@ -52,14 +52,6 @@ it('renders article teaser correctly', () => {
       line-height: 1.5rem;
     }
 
-    .c7 {
-      font-size: 2rem;
-      line-height: normal;
-      font-family: 'Anton',Impact,sans-serif;
-      font-weight: normal;
-      line-height: 2rem;
-    }
-
     .c7 span {
       font-size: inherit;
       line-height: inherit;

package/dist/utils/allowListed.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-const allowList = ['https://giftaid.comicrelief.com', 'https://donation.comicrelief.com', 'https://www.comicrelief.com', 'https://www.sportrelief.com', 'https://app.beapplied.com/org/comic-relief', 'stories.comicrelief.com', 'https://form.typeform.com'];
+const allowList = ['https://giftaid.comicrelief.com', 'https://donation.comicrelief.com', 'https://www.comicrelief.com', 'https://www.sportrelief.com', 'https://app.beapplied.com/org/comic-relief', 'stories.comicrelief.com', 'https://form.typeform.com',
+// Required for the HHoF form:
+'https://interfaces.zapier.com/assets/web-components/zapier-interfaces/zapier-interfaces.esm.js'];
 const allowListed = url => {
   if (url !== undefined && url !== null && allowList.some(v => url.indexOf(v) >= 0)) {
     return true;

package/package.json

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

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

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css, keyframes } from 'styled-components';
+import Text from '../../Atoms/Text/Text';
 
 import spacing from '../../../theme/shared/spacing';
 import { Chevron } from '../../Atoms/Icons/index';
@@ -72,6 +73,10 @@ const Copy = styled.div`
   `)}
 `;
 
+const StyledText = styled(Text)`
+    margin-bottom: 0;
+`;
+
 const Accordion = ({
   children, title, contentBottomPadding, ...rest
 }) => {
@@ -84,7 +89,9 @@ const Accordion = ({
   return (
     <Container {...rest}>
       <Button onClick={handleOpen} aria-expanded={isOpen ? 'true' : 'false'} ChevronKeyframes={ChevronKeyframes} type="button">
-        {title}
+        <StyledText tag="h3">
+          {title}
+        </StyledText>
         <Icon>
           <Chevron colour="black" direction={isOpen ? 'up' : 'down'} />
         </Icon>

package/src/components/Molecules/Accordion/__snapshots__/Accordion.test.js.snap

@@ -2,6 +2,23 @@
 
 exports[`renders correctly 1`] = `
 .c2 {
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 700;
+  text-transform: inherit;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  font-size: 1.25rem;
+  line-height: 1.5rem;
+}
+
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.c4 {
   font-family: 'Anton',Impact,sans-serif;
   font-weight: 400;
   text-transform: uppercase;
@@ -13,17 +30,17 @@ exports[`renders correctly 1`] = `
   line-height: 1.5rem;
 }
 
-.c2 {
+.c4 {
   font-size: 1.5rem;
   line-height: normal;
 }
 
-.c2 span {
+.c4 span {
   font-size: inherit;
   line-height: inherit;
 }
 
-.c6 {
+.c8 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
   text-transform: inherit;
@@ -35,17 +52,17 @@ exports[`renders correctly 1`] = `
   line-height: 1.25rem;
 }
 
-.c6 {
+.c8 {
   font-size: 1rem;
   line-height: normal;
 }
 
-.c6 span {
+.c8 span {
   font-size: inherit;
   line-height: inherit;
 }
 
-.c4 {
+.c6 {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
@@ -95,7 +112,7 @@ exports[`renders correctly 1`] = `
   animation-duration: 0.4s;
 }
 
-.c3 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -109,7 +126,7 @@ exports[`renders correctly 1`] = `
   align-content: center;
 }
 
-.c5 {
+.c7 {
   overflow: hidden;
   height: 0;
   visibility: none;
@@ -118,36 +135,54 @@ exports[`renders correctly 1`] = `
   padding: 0 2rem;
 }
 
+.c3 {
+  margin-bottom: 0;
+}
+
 @media (min-width:740px) {
   .c2 {
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c2 {
+    font-size: 1.375rem;
+    line-height: 1.625rem;
+  }
+}
+
+@media (min-width:740px) {
+  .c4 {
     font-size: 1.875rem;
     line-height: 1.875rem;
   }
 }
 
 @media (min-width:1024px) {
-  .c2 {
+  .c4 {
     font-size: 2rem;
     line-height: 2rem;
   }
 }
 
 @media (min-width:740px) {
-  .c6 {
+  .c8 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width:1024px) {
-  .c6 {
+  .c8 {
     font-size: 1.125rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width:1024px) {
-  .c4 {
+  .c6 {
     fill: #000000;
   }
 }
@@ -159,7 +194,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c5 {
+  .c7 {
     padding: 0 3rem;
   }
 }
@@ -173,16 +208,20 @@ exports[`renders correctly 1`] = `
     onClick={[Function]}
     type="button"
   >
-    <h2
-      className="c2"
+    <h3
+      className="c2 c3"
     >
-      I am the title
-    </h2>
+      <h2
+        className="c4"
+      >
+        I am the title
+      </h2>
+    </h3>
     <div
-      className="c3"
+      className="c5"
     >
       <svg
-        className="c4"
+        className="c6"
         direction="down"
         fill="#000000"
         height={24}
@@ -197,10 +236,10 @@ exports[`renders correctly 1`] = `
     </div>
   </button>
   <div
-    className="c5"
+    className="c7"
   >
     <p
-      className="c6"
+      className="c8"
     >
       Name, surname, email and billing address We need these to process your payment, create a receipt and send it to you. Establishment information We use this information to understand which institutions (e.g. schools, companies) raise money for us. Your details will be kept safe and never shared with other organisations; see our Privacy Policy for more information
     </p>

package/src/components/Molecules/ArticleTeaser/ArticleTeaser.js

@@ -141,7 +141,6 @@ const ArticleTeaser = ({
   alt = '',
   category = null,
   logoSize = null,
-  family = 'Anton',
   time = null
 }) => (
   <Wrapper>
@@ -175,11 +174,7 @@ const ArticleTeaser = ({
         </Date>
         <Title
           time={time}
-          size="xl"
           tag="h3"
-          height="2rem"
-          weight="normal"
-          family={family}
         >
           {title}
         </Title>
@@ -198,7 +193,6 @@ ArticleTeaser.propTypes = {
   image: PropTypes.string,
   imageLow: PropTypes.string,
   logoSize: PropTypes.string,
-  family: PropTypes.string,
   category: PropTypes.string,
   alt: PropTypes.string,
   date: PropTypes.string.isRequired,

package/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js

@@ -54,14 +54,6 @@ it('renders article teaser correctly', () => {
       line-height: 1.5rem;
     }
 
-    .c10 {
-      font-size: 2rem;
-      line-height: normal;
-      font-family: 'Anton',Impact,sans-serif;
-      font-weight: normal;
-      line-height: 2rem;
-    }
-
     .c10 span {
       font-size: inherit;
       line-height: inherit;
@@ -355,14 +347,6 @@ it('renders press realese correctly', () => {
       line-height: 1.5rem;
     }
 
-    .c10 {
-      font-size: 2rem;
-      line-height: normal;
-      font-family: 'Anton',Impact,sans-serif;
-      font-weight: normal;
-      line-height: 2rem;
-    }
-
     .c10 span {
       font-size: inherit;
       line-height: inherit;

package/src/components/Molecules/Descriptor/Descriptor.js

@@ -167,11 +167,7 @@ const Descriptor = ({
           <IconWrapper>{icons}</IconWrapper>
         </Header>
         <Title
-          size="xl"
           tag="h3"
-          height="2rem"
-          weight="normal"
-          family="Anton"
         >
           {title}
         </Title>

package/src/components/Molecules/Descriptor/Descriptor.test.js

@@ -61,14 +61,6 @@ it('renders article teaser correctly', () => {
       line-height: 1.5rem;
     }
 
-    .c7 {
-      font-size: 2rem;
-      line-height: normal;
-      font-family: 'Anton',Impact,sans-serif;
-      font-weight: normal;
-      line-height: 2rem;
-    }
-
     .c7 span {
       font-size: inherit;
       line-height: inherit;

package/src/utils/allowListed.js

@@ -5,7 +5,9 @@ const allowList = [
   'https://www.sportrelief.com',
   'https://app.beapplied.com/org/comic-relief',
   'stories.comicrelief.com',
-  'https://form.typeform.com'
+  'https://form.typeform.com',
+  // Required for the HHoF form:
+  'https://interfaces.zapier.com/assets/web-components/zapier-interfaces/zapier-interfaces.esm.js'
 ];
 
 const allowListed = url => {