@comicrelief/component-library 7.6.0 → 7.7.0

package/dist/components/Organisms/Footer/Footer.js

@@ -21,18 +21,22 @@ var _SocialIcons = _interopRequireDefault(require("../../Atoms/SocialIcons/Socia
 
 var _Footer = require("./Footer.style");
 
-var _excluded = ["navItems", "footerCopy", "campaign"];
+var _excluded = ["navItems", "footerCopy", "campaign", "additionalLegalLine"];
 
 var Footer = function Footer(_ref) {
   var navItems = _ref.navItems,
       footerCopy = _ref.footerCopy,
       campaign = _ref.campaign,
+      additionalLegalLine = _ref.additionalLegalLine,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Remove white space between words
   var campaignName = campaign.replace(/\s/g, '').toLowerCase();
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Footer.FooterWrapper, Object.assign({
     navItems: true
-  }, rest), /*#__PURE__*/_react.default.createElement(_Footer.InnerWrapper, null, /*#__PURE__*/_react.default.createElement(_Footer.FooterBranding, null, /*#__PURE__*/_react.default.createElement(_Footer.SocialIconWrapper, null, /*#__PURE__*/_react.default.createElement(_SocialIcons.default, {
+  }, rest), /*#__PURE__*/_react.default.createElement(_Footer.InnerWrapper, null, additionalLegalLine && /*#__PURE__*/_react.default.createElement(_Footer.FooterLegalLine, {
+    tag: "p",
+    color: "grey"
+  }, additionalLegalLine), /*#__PURE__*/_react.default.createElement(_Footer.FooterBranding, null, /*#__PURE__*/_react.default.createElement(_Footer.SocialIconWrapper, null, /*#__PURE__*/_react.default.createElement(_SocialIcons.default, {
     campaign: campaignName
   })), /*#__PURE__*/_react.default.createElement(_Footer.Brand, {
     href: "/",
@@ -54,7 +58,8 @@ Footer.defaultProps = {
   navItems: {},
   footerCopy: '',
   campaign: 'Comic Relief',
-  overrideWhiteList: false
+  overrideWhiteList: false,
+  additionalLegalLine: ''
 };
 var _default = Footer;
 exports.default = _default;

package/dist/components/Organisms/Footer/Footer.md

@@ -9,7 +9,19 @@ import footerCopy from './data/footerCopy';
     <Footer navItems={data} footerCopy={footerCopy.copy} campaign="Comic Relief"  />
 
     <p>Overrides whitelist functionality for external usage</p>
-    <Footer navItems={data} footerCopy={footerCopy.copy} campaign="Comic Relief" overrideWhiteList />
+    <Footer 
+      navItems={data} 
+      footerCopy={footerCopy.copy} 
+      campaign="Comic Relief" 
+      overrideWhiteList 
+    />
+    
+    <p>Adding a additionalLegalLine to the top of the footer</p>
+    <Footer 
+      additionalLegalLine="MR. MEN ™ LITTLE MISS ™ © 2022 THOIP (a SANRIO Company). All rights reserved." 
+      navItems={data} 
+      footerCopy={footerCopy.copy} 
+      campaign="Comic Relief" 
+    />
 </>
-
 ```

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Brand = exports.SocialIconWrapper = exports.FooterBranding = exports.FooterCopyright = exports.InnerWrapper = exports.Angle = exports.FooterWrapper = void 0;
+exports.Brand = exports.SocialIconWrapper = exports.FooterBranding = exports.FooterCopyright = exports.FooterLegalLine = exports.InnerWrapper = exports.Angle = exports.FooterWrapper = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -13,6 +13,8 @@ var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 
 var _Link = _interopRequireDefault(require("../../Atoms/Link/Link"));
 
+var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
+
 var FooterWrapper = _styledComponents.default.footer.attrs(function () {
   return {
     role: 'banner'
@@ -46,17 +48,22 @@ var InnerWrapper = _styledComponents.default.div.withConfig({
 }, (0, _spacing.default)('md'), (0, _spacing.default)('xl'));
 
 exports.InnerWrapper = InnerWrapper;
+var FooterLegalLine = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "Footerstyle__FooterLegalLine",
+  componentId: "sc-167xaf5-3"
+})(["text-align:left;margin-top:1rem;"]);
+exports.FooterLegalLine = FooterLegalLine;
 
 var FooterBranding = _styledComponents.default.div.withConfig({
   displayName: "Footerstyle__FooterBranding",
-  componentId: "sc-167xaf5-3"
+  componentId: "sc-167xaf5-4"
 })(["display:flex;margin:", " 0 5rem;justify-content:space-between;align-items:center;"], (0, _spacing.default)('lg'));
 
 exports.FooterBranding = FooterBranding;
 
 var FooterCopyright = _styledComponents.default.div.withConfig({
   displayName: "Footerstyle__FooterCopyright",
-  componentId: "sc-167xaf5-4"
+  componentId: "sc-167xaf5-5"
 })(["display:block;width:100%;height:100%;text-align:left;margin-top:", ";p{font-size:15px;line-height:24px;margin-bottom:5px;@media ", "{font-size:16px;line-height:27px;}}"], (0, _spacing.default)('lg'), function (_ref4) {
   var theme = _ref4.theme;
   return theme.breakpoint('medium');
@@ -65,13 +72,13 @@ var FooterCopyright = _styledComponents.default.div.withConfig({
 exports.FooterCopyright = FooterCopyright;
 var Brand = (0, _styledComponents.default)(_Link.default).withConfig({
   displayName: "Footerstyle__Brand",
-  componentId: "sc-167xaf5-5"
+  componentId: "sc-167xaf5-6"
 })(["color:transparent;border:0;:hover{border:0;}"]);
 exports.Brand = Brand;
 
 var SocialIconWrapper = _styledComponents.default.div.withConfig({
   displayName: "Footerstyle__SocialIconWrapper",
-  componentId: "sc-167xaf5-6"
+  componentId: "sc-167xaf5-7"
 })([""]);
 
 exports.SocialIconWrapper = SocialIconWrapper;

package/dist/components/Organisms/Footer/__snapshots__/Footer.test.js.snap

@@ -558,11 +558,12 @@ exports[`renders correctly 1`] = `
     <div
       className="c1"
     >
+      
       <div
         className="c2"
       >
         <div
-          className="Footerstyle__SocialIconWrapper-sc-167xaf5-6"
+          className="Footerstyle__SocialIconWrapper-sc-167xaf5-7"
         >
           <ul
             className="c3"

package/package.json

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

package/src/components/Atoms/Text/Text.js

@@ -47,22 +47,17 @@ export const BaseText = styled.span`
 const Text = ({
   tag, children, height, weight, family, ...rest
 }) => (
-  <BaseText {...rest} as={tag} height={height} weight={weight} family={family}>
+  <BaseText
+    {...rest}
+    as={tag}
+    height={height}
+    weight={weight}
+    family={family}
+  >
     {children}
   </BaseText>
 );
 
-Text.defaultProps = {
-  family: null,
-  tag: 'span',
-  weight: undefined,
-  height: undefined,
-  uppercase: false,
-  size: 's',
-  color: 'inherit',
-  children: undefined
-};
-
 Text.propTypes = {
   /** Font family */
   family: PropTypes.string,
@@ -85,4 +80,15 @@ Text.propTypes = {
   ])
 };
 
+Text.defaultProps = {
+  family: null,
+  tag: 'span',
+  weight: undefined,
+  height: undefined,
+  uppercase: false,
+  size: 's',
+  color: 'inherit',
+  children: undefined
+};
+
 export default Text;

package/src/components/Organisms/Footer/Footer.js

@@ -8,6 +8,7 @@ import SocialIcons from '../../Atoms/SocialIcons/SocialIcons';
 import {
   FooterWrapper,
   InnerWrapper,
+  FooterLegalLine,
   FooterBranding,
   FooterCopyright,
   SocialIconWrapper,
@@ -15,14 +16,18 @@ import {
 } from './Footer.style';
 
 const Footer = ({
-  navItems, footerCopy, campaign, ...rest
+  navItems, footerCopy, campaign, additionalLegalLine, ...rest
 }) => {
   // Remove white space between words
   const campaignName = campaign.replace(/\s/g, '').toLowerCase();
+
   return (
     <div>
       <FooterWrapper navItems {...rest}>
         <InnerWrapper>
+          {additionalLegalLine
+            && <FooterLegalLine tag="p" color="grey">{additionalLegalLine}</FooterLegalLine>
+          }
           <FooterBranding>
             <SocialIconWrapper>
               <SocialIcons campaign={campaignName} />
@@ -47,14 +52,16 @@ Footer.propTypes = {
   navItems: PropTypes.objectOf(PropTypes.shape),
   footerCopy: PropTypes.string,
   campaign: PropTypes.string,
-  overrideWhiteList: PropTypes.bool
+  overrideWhiteList: PropTypes.bool,
+  additionalLegalLine: PropTypes.string
 };
 
 Footer.defaultProps = {
   navItems: {},
   footerCopy: '',
   campaign: 'Comic Relief',
-  overrideWhiteList: false
+  overrideWhiteList: false,
+  additionalLegalLine: ''
 };
 
 export default Footer;

package/src/components/Organisms/Footer/Footer.md

@@ -9,7 +9,19 @@ import footerCopy from './data/footerCopy';
     <Footer navItems={data} footerCopy={footerCopy.copy} campaign="Comic Relief"  />
 
     <p>Overrides whitelist functionality for external usage</p>
-    <Footer navItems={data} footerCopy={footerCopy.copy} campaign="Comic Relief" overrideWhiteList />
+    <Footer 
+      navItems={data} 
+      footerCopy={footerCopy.copy} 
+      campaign="Comic Relief" 
+      overrideWhiteList 
+    />
+    
+    <p>Adding a additionalLegalLine to the top of the footer</p>
+    <Footer 
+      additionalLegalLine="MR. MEN ™ LITTLE MISS ™ © 2022 THOIP (a SANRIO Company). All rights reserved." 
+      navItems={data} 
+      footerCopy={footerCopy.copy} 
+      campaign="Comic Relief" 
+    />
 </>
-
 ```

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

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import spacing from '../../../theme/shared/spacing';
 import Link from '../../Atoms/Link/Link';
+import Text from '../../Atoms/Text/Text';
 
 const FooterWrapper = styled.footer.attrs(() => ({
   role: 'banner'
@@ -41,6 +42,11 @@ const InnerWrapper = styled.div`
   }
 `;
 
+const FooterLegalLine = styled(Text)`
+  text-align: left;
+  margin-top: 1rem;
+`;
+
 const FooterBranding = styled.div`
   display: flex;
   margin: ${spacing('lg')} 0 5rem;
@@ -81,6 +87,7 @@ export {
   FooterWrapper,
   Angle,
   InnerWrapper,
+  FooterLegalLine,
   FooterCopyright,
   FooterBranding,
   SocialIconWrapper,

package/src/components/Organisms/Footer/__snapshots__/Footer.test.js.snap

@@ -558,11 +558,12 @@ exports[`renders correctly 1`] = `
     <div
       className="c1"
     >
+      
       <div
         className="c2"
       >
         <div
-          className="Footerstyle__SocialIconWrapper-sc-167xaf5-6"
+          className="Footerstyle__SocialIconWrapper-sc-167xaf5-7"
         >
           <ul
             className="c3"