@comicrelief/component-library 7.40.0 → 7.42.0

package/dist/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.style.js

@@ -8,7 +8,7 @@ exports.TextItalic = exports.DropdownList = exports.DropdownItemSelectable = exp
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
-var _size = require("../../../theme/shared/size");
+var _allBreakpoints = require("../../../theme/shared/allBreakpoints");
 var _Text = _interopRequireDefault(require("../Text/Text"));
 const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "TextInputWithDropdownstyle__Container",
@@ -17,7 +17,7 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
 const Dropdown = exports.Dropdown = _styledComponents.default.div.withConfig({
   displayName: "TextInputWithDropdownstyle__Dropdown",
   componentId: "sc-1s4bv7m-1"
-})(["", " font-family:", ";position:absolute;left:0;max-height:300px;overflow:auto;background-color:", ";border:1px solid;margin-top:-1px;width:100%;@media (min-width:", "){max-width:500px;}"], (0, _zIndex.default)('high'), _ref => {
+})(["", " font-family:", ";position:absolute;left:0;max-height:300px;overflow:auto;background-color:", ";border:1px solid;margin-top:-1px;width:100%;@media (min-width:", "px){max-width:500px;}"], (0, _zIndex.default)('high'), _ref => {
   let {
     theme
   } = _ref;
@@ -27,7 +27,7 @@ const Dropdown = exports.Dropdown = _styledComponents.default.div.withConfig({
     theme
   } = _ref2;
   return theme.color('white');
-}, _size.screen.small);
+}, _allBreakpoints.sizes.M);
 const DropdownList = exports.DropdownList = _styledComponents.default.ul.withConfig({
   displayName: "TextInputWithDropdownstyle__DropdownList",
   componentId: "sc-1s4bv7m-2"

package/dist/components/Molecules/Banner/Banner.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
-var _size = require("../../../theme/shared/size");
+var _allBreakpoints = require("../../../theme/shared/allBreakpoints");
 const Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Banner__Wrapper",
   componentId: "sc-14ows70-0"
@@ -22,7 +22,7 @@ const Wrapper = _styledComponents.default.div.withConfig({
 const Container = _styledComponents.default.div.withConfig({
   displayName: "Banner__Container",
   componentId: "sc-14ows70-1"
-})(["text-align:center;padding:calc(", " * 2) ", ";margin:0 auto;max-width:", ";@media ", "{padding:", " ", ";}@media ", "{padding:", " ", ";}"], (0, _spacing.default)('m'), (0, _spacing.default)('m'), _size.screen.large, _ref2 => {
+})(["text-align:center;padding:calc(", " * 2) ", ";margin:0 auto;max-width:", "px;@media ", "{padding:", " ", ";}@media ", "{padding:", " ", ";}"], (0, _spacing.default)('m'), (0, _spacing.default)('m'), _allBreakpoints.sizes.XL, _ref2 => {
   let {
     theme
   } = _ref2;

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

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactResponsive = require("react-responsive");
-var _size = require("../../../theme/shared/size");
+var _allBreakpoints = require("../../../theme/shared/allBreakpoints");
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _Form = _interopRequireDefault(require("./Form/Form"));
@@ -53,7 +53,7 @@ const Donate = _ref => {
     monthlyOtherAmountText: monthlyOther
   } = _ref;
   let isDesktop = (0, _reactResponsive.useMediaQuery)({
-    query: "(min-width: ".concat(_size.screen.medium, ")")
+    query: "(min-width: ".concat(_allBreakpoints.sizes.L, "px)")
   });
 
   // To let us store any updated override, and force a re-render

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

@@ -9,7 +9,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Link = _interopRequireDefault(require("../../../Atoms/Link/Link"));
 var _hideVisually = _interopRequireDefault(require("../../../../theme/shared/hideVisually"));
 var _zIndex = _interopRequireDefault(require("../../../../theme/shared/zIndex"));
-var _size = require("../../../../theme/shared/size");
 const NavLinkClass = (0, _styledComponents.default)(_Link.default).withConfig({
   displayName: "Navstyle__NavLinkClass",
   componentId: "sc-1ss3uk2-0"
@@ -31,15 +30,20 @@ const NavLinkClass = (0, _styledComponents.default)(_Link.default).withConfig({
 const Nav = exports.Nav = _styledComponents.default.nav.withConfig({
   displayName: "Navstyle__Nav",
   componentId: "sc-1ss3uk2-1"
-})(["display:", ";width:100%;position:absolute;top:75px;left:0;", ";@media (min-width:", "){width:50%;right:0;left:inherit;}@media ", "{", ";position:relative;top:0;display:block;margin:0 10px;width:auto;height:100%;}> h2{", ";}"], _ref3 => {
+})(["display:", ";width:100%;position:absolute;top:75px;left:0;", ";@media ", "{width:50%;right:0;left:inherit;}@media ", "{", ";position:relative;top:0;display:block;margin:0 10px;width:auto;height:100%;}> h2{", ";}"], _ref3 => {
   let {
     isExpandable
   } = _ref3;
   return isExpandable ? 'block' : 'none';
-}, (0, _zIndex.default)('higher'), _size.screen.small, _ref4 => {
+}, (0, _zIndex.default)('higher'), _ref4 => {
   let {
     theme
   } = _ref4;
+  return theme.allBreakpoints('M');
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.allBreakpoints('Nav');
 }, (0, _zIndex.default)('medium'), _hideVisually.default);
 
@@ -49,25 +53,25 @@ const Nav = exports.Nav = _styledComponents.default.nav.withConfig({
 const SubNavMenu = exports.SubNavMenu = _styledComponents.default.ul.withConfig({
   displayName: "Navstyle__SubNavMenu",
   componentId: "sc-1ss3uk2-2"
-})(["display:", ";padding:0;position:relative;list-style:none outside;left:0;top:0;flex-direction:column;justify-content:center;align-items:center;background-color:", ";@media ", "{display:none;display:", ";top:90px;position:absolute;padding:0 0 20px;width:250px;height:auto;}"], _ref5 => {
+})(["display:", ";padding:0;position:relative;list-style:none outside;left:0;top:0;flex-direction:column;justify-content:center;align-items:center;background-color:", ";@media ", "{display:none;display:", ";top:90px;position:absolute;padding:0 0 20px;width:250px;height:auto;}"], _ref6 => {
   let {
     isSubMenuOpen
-  } = _ref5;
+  } = _ref6;
   return isSubMenuOpen ? 'flex' : 'none';
-}, _ref6 => {
+}, _ref7 => {
   let {
     theme
-  } = _ref6;
+  } = _ref7;
   return theme.color('deep_violet_dark');
-}, _ref7 => {
+}, _ref8 => {
   let {
     theme
-  } = _ref7;
+  } = _ref8;
   return theme.allBreakpoints('Nav');
-}, _ref8 => {
+}, _ref9 => {
   let {
     isKeyPressed
-  } = _ref8;
+  } = _ref9;
   return isKeyPressed ? 'flex' : 'none';
 });
 
@@ -77,15 +81,15 @@ const SubNavMenu = exports.SubNavMenu = _styledComponents.default.ul.withConfig(
 const SubNavItem = exports.SubNavItem = _styledComponents.default.li.withConfig({
   displayName: "Navstyle__SubNavItem",
   componentId: "sc-1ss3uk2-3"
-})(["padding:0;height:100%;width:100%;:hover{background-color:", ";span{border-bottom:0;padding-bottom:2px;color:", ";}}"], _ref9 => {
+})(["padding:0;height:100%;width:100%;:hover{background-color:", ";span{border-bottom:0;padding-bottom:2px;color:", ";}}"], _ref10 => {
   let {
     theme
-  } = _ref9;
+  } = _ref10;
   return theme.color('deep_violet_light');
-}, _ref10 => {
+}, _ref11 => {
   let {
     theme
-  } = _ref10;
+  } = _ref11;
   return theme.color('white');
 });
 
@@ -95,10 +99,10 @@ const SubNavItem = exports.SubNavItem = _styledComponents.default.li.withConfig(
 const SubNavLink = exports.SubNavLink = (0, _styledComponents.default)(NavLinkClass).withConfig({
   displayName: "Navstyle__SubNavLink",
   componentId: "sc-1ss3uk2-4"
-})(["padding:14px 14px 7px 21px;color:", ";height:auto;position:relative;"], _ref11 => {
+})(["padding:14px 14px 7px 21px;color:", ";height:auto;position:relative;"], _ref12 => {
   let {
     theme
-  } = _ref11;
+  } = _ref12;
   return theme.color('white');
 });
 
@@ -108,25 +112,25 @@ const SubNavLink = exports.SubNavLink = (0, _styledComponents.default)(NavLinkCl
 const SubNavLinkUnderline = exports.SubNavLinkUnderline = (0, _styledComponents.default)(SubNavLink).withConfig({
   displayName: "Navstyle__SubNavLinkUnderline",
   componentId: "sc-1ss3uk2-5"
-})(["padding:26px 21px;::after{content:'';position:absolute;width:14px;border-bottom:2px solid ", ";left:12px;top:auto;bottom:10px;margin:0 10px;}@media ", "{::before{display:block;position:absolute;content:'';left:34px;width:10px;height:10px;border:11px solid transparent;border-bottom-color:", ";top:-22px;}:hover::before{border-bottom-color:", ";}}"], _ref12 => {
-  let {
-    theme
-  } = _ref12;
-  return theme.color('white');
-}, _ref13 => {
+})(["padding:26px 21px;::after{content:'';position:absolute;width:14px;border-bottom:2px solid ", ";left:12px;top:auto;bottom:10px;margin:0 10px;}@media ", "{::before{display:block;position:absolute;content:'';left:34px;width:10px;height:10px;border:11px solid transparent;border-bottom-color:", ";top:-22px;}:hover::before{border-bottom-color:", ";}}"], _ref13 => {
   let {
     theme
   } = _ref13;
-  return theme.allBreakpoints('Nav');
+  return theme.color('white');
 }, _ref14 => {
   let {
     theme
   } = _ref14;
-  return theme.color('deep_violet_dark');
+  return theme.allBreakpoints('Nav');
 }, _ref15 => {
   let {
     theme
   } = _ref15;
+  return theme.color('deep_violet_dark');
+}, _ref16 => {
+  let {
+    theme
+  } = _ref16;
   return theme.color('deep_violet_light');
 });
 
@@ -136,20 +140,20 @@ const SubNavLinkUnderline = exports.SubNavLinkUnderline = (0, _styledComponents.
 const NavMenu = exports.NavMenu = _styledComponents.default.ul.withConfig({
   displayName: "Navstyle__NavMenu",
   componentId: "sc-1ss3uk2-6"
-})(["background-color:", ";list-style:none outside;padding:0;margin:0;@media ", "{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;background-color:", ";}"], _ref16 => {
+})(["background-color:", ";list-style:none outside;padding:0;margin:0;@media ", "{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;background-color:", ";}"], _ref17 => {
   let {
     theme
-  } = _ref16;
+  } = _ref17;
   return theme.color('grey_extra_light');
-}, _ref17 => {
+}, _ref18 => {
   let {
     theme
-  } = _ref17;
+  } = _ref18;
   return theme.allBreakpoints('Nav');
-}, _ref18 => {
+}, _ref19 => {
   let {
     theme
-  } = _ref18;
+  } = _ref19;
   return theme.color('white');
 });
 
@@ -159,15 +163,15 @@ const NavMenu = exports.NavMenu = _styledComponents.default.ul.withConfig({
 const NavLink = exports.NavLink = (0, _styledComponents.default)(NavLinkClass).withConfig({
   displayName: "Navstyle__NavLink",
   componentId: "sc-1ss3uk2-7"
-})(["display:flex;gap:4px;font-family:", ";@media ", "{padding:10px 0;height:auto;:focus + ", "{display:flex;}}"], _ref19 => {
+})(["display:flex;gap:4px;font-family:", ";@media ", "{padding:10px 0;height:auto;:focus + ", "{display:flex;}}"], _ref20 => {
   let {
     theme
-  } = _ref19;
+  } = _ref20;
   return theme.fontFamilies(theme.font.regular);
-}, _ref20 => {
+}, _ref21 => {
   let {
     theme
-  } = _ref20;
+  } = _ref21;
   return theme.allBreakpoints('Nav');
 }, SubNavMenu);
 
@@ -177,20 +181,20 @@ const NavLink = exports.NavLink = (0, _styledComponents.default)(NavLinkClass).w
 const NavItem = exports.NavItem = _styledComponents.default.li.withConfig({
   displayName: "Navstyle__NavItem",
   componentId: "sc-1ss3uk2-8"
-})(["", ";position:relative;font-weight:700;:hover{li{span{border-bottom:none;padding-bottom:0;}}}li{span{border-bottom:none;padding-bottom:0;}:hover{span{border-bottom:none;padding-bottom:0;}}}:hover{background-color:", ";}@media ", "{margin:0 4px;padding:25px 5px;:hover > ", ",:focus-within > ", "{visibility:visible;opacity:1;display:flex;}:hover{background-color:transparent;", ";span{border-bottom:2px solid ", ";padding-bottom:2px;}", "{display:flex;flex-direction:column;}}}"], (0, _zIndex.default)('medium'), _ref21 => {
+})(["", ";position:relative;font-weight:700;:hover{li{span{border-bottom:none;padding-bottom:0;}}}li{span{border-bottom:none;padding-bottom:0;}:hover{span{border-bottom:none;padding-bottom:0;}}}:hover{background-color:", ";}@media ", "{margin:0 4px;padding:25px 5px;:hover > ", ",:focus-within > ", "{visibility:visible;opacity:1;display:flex;}:hover{background-color:transparent;", ";span{border-bottom:2px solid ", ";padding-bottom:2px;}", "{display:flex;flex-direction:column;}}}"], (0, _zIndex.default)('medium'), _ref22 => {
   let {
     theme
-  } = _ref21;
+  } = _ref22;
   return theme.color('teal_light');
-}, _ref22 => {
+}, _ref23 => {
   let {
     theme
-  } = _ref22;
+  } = _ref23;
   return theme.allBreakpoints('Nav');
-}, SubNavMenu, SubNavMenu, (0, _zIndex.default)('high'), _ref23 => {
+}, SubNavMenu, SubNavMenu, (0, _zIndex.default)('high'), _ref24 => {
   let {
     theme
-  } = _ref23;
+  } = _ref24;
   return theme.color('black');
 }, SubNavMenu);
 const ChevronWrapper = exports.ChevronWrapper = _styledComponents.default.div.withConfig({

package/dist/index.js

@@ -334,6 +334,12 @@ Object.defineProperty(exports, "allBreakpoints", {
     return _allBreakpoints.default;
   }
 });
+Object.defineProperty(exports, "allContainers", {
+  enumerable: true,
+  get: function () {
+    return _allContainers.default;
+  }
+});
 Object.defineProperty(exports, "allowListed", {
   enumerable: true,
   get: function () {
@@ -422,6 +428,7 @@ var _spacing = _interopRequireDefault(require("./theme/shared/spacing"));
 var _breakpoint = _interopRequireDefault(require("./theme/shared/breakpoint"));
 var _allBreakpoints = _interopRequireDefault(require("./theme/shared/allBreakpoints"));
 var _size = require("./theme/shared/size");
+var _allContainers = _interopRequireDefault(require("./theme/shared/allContainers"));
 var _Text = _interopRequireDefault(require("./components/Atoms/Text/Text"));
 var _Logo = _interopRequireDefault(require("./components/Atoms/Logo/Logo"));
 var _Picture = _interopRequireDefault(require("./components/Atoms/Picture/Picture"));

package/dist/theme/shared/allBreakpoints.js

@@ -4,6 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.sizes = exports.default = void 0;
+/**
+ * For usage and examples see utils.md
+ */
+
 const sizes = exports.sizes = {
   S: 0,
   M: 740,

package/dist/theme/shared/allContainers.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-const container = {
+const allContainers = {
   small: '880px',
   medium: '1200px',
   large: '1440px'
 };
-var _default = exports.default = container;
+var _default = exports.default = allContainers;

package/package.json

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

package/src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.style.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 import spacing from '../../../theme/shared/spacing';
 import zIndex from '../../../theme/shared/zIndex';
-import { screen } from '../../../theme/shared/size';
+import { sizes } from '../../../theme/shared/allBreakpoints';
 import Text from '../Text/Text';
 
 const Container = styled.div`
@@ -21,7 +21,7 @@ const Dropdown = styled.div`
   margin-top: -1px;
   width: 100%;
 
-  @media (min-width: ${screen.small}) {
+  @media (min-width: ${sizes.M}px) {
     max-width: 500px;
   }
 `;

package/src/components/Molecules/Banner/Banner.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 import spacing from '../../../theme/shared/spacing';
-import { screen } from '../../../theme/shared/size';
+import { sizes } from '../../../theme/shared/allBreakpoints';
 
 const Wrapper = styled.div`
   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
@@ -13,7 +13,7 @@ const Container = styled.div`
   text-align: center;
   padding: calc(${spacing('m')} * 2) ${spacing('m')};
   margin: 0 auto;
-  max-width: ${screen.large};
+  max-width: ${sizes.XL}px;
 
   @media ${({ theme }) => theme.allBreakpoints('M')} {
     padding: ${spacing('xl')} ${spacing('l')};

package/src/components/Molecules/Promo/Promo.style.js

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import container from '../../../theme/shared/allContainers';
+import allContainers from '../../../theme/shared/allContainers';
 import spacing from '../../../theme/shared/spacing';
 import zIndex from '../../../theme/shared/zIndex';
 
@@ -37,7 +37,7 @@ const Container = styled.div`
 
 const Wrapper = styled.div`
   width: 100%;
-  max-width: ${container.medium};
+  max-width: ${allContainers.medium};
   height: 100%;
   left: 0;
   right: 0;

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

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 import spacing from '../../../theme/shared/spacing';
-import container from '../../../theme/shared/allContainers';
+import allContainers from '../../../theme/shared/allContainers';
 import zIndex from '../../../theme/shared/zIndex';
 import playIcon from './assets/video--play-icon.svg';
 import playIconHover from './assets/video--play-icon__hover.svg';
@@ -68,7 +68,7 @@ const Copy = styled.div`
     : css`
           @media ${({ theme }) => theme.allBreakpoints('M')} {
             width: 100%;
-            max-width ${container.small};
+            max-width ${allContainers.small};
             padding: ${spacing('xl')};
           }
           margin: auto;

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import PropTypes from 'prop-types';
 
-import { screen } from '../../../theme/shared/size';
+import { sizes } from '../../../theme/shared/allBreakpoints';
 import Text from '../../Atoms/Text/Text';
 import Picture from '../../Atoms/Picture/Picture';
 import Form from './Form/Form';
@@ -53,7 +53,7 @@ const Donate = ({
   monthlyChooseAmountText: monthlyChoose,
   monthlyOtherAmountText: monthlyOther
 }) => {
-  let isDesktop = useMediaQuery({ query: `(min-width: ${screen.medium})` });
+  let isDesktop = useMediaQuery({ query: `(min-width: ${sizes.L}px)` });
 
   // To let us store any updated override, and force a re-render
   const [overrideValue, setOverrideValue] = useState(null);

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 import zIndex from '../../../theme/shared/zIndex';
-import container from '../../../theme/shared/allContainers';
+import allContainers from '../../../theme/shared/allContainers';
 import spacing from '../../../theme/shared/spacing';
 
 const HeaderWrapper = styled.header.attrs(() => ({
@@ -23,7 +23,7 @@ const InnerWrapper = styled.div`
   height: 100%;
   padding: 0 12px;
   cursor: pointer;
-  max-width: ${container.large};
+  max-width: ${allContainers.large};
 
   @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     margin: 0 auto;

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

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 import Link from '../../../Atoms/Link/Link';
 import hideVisually from '../../../../theme/shared/hideVisually';
 import zIndex from '../../../../theme/shared/zIndex';
-import { screen } from '../../../../theme/shared/size';
 
 const NavLinkClass = styled(Link)`
   display: inline-block;
@@ -32,7 +31,7 @@ const Nav = styled.nav`
   left: 0;
   ${zIndex('higher')};
 
-  @media (min-width: ${screen.small}) {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     width: 50%;
     right: 0;
     left: inherit;

package/src/index.js

@@ -11,6 +11,7 @@ export { default as spacing } from './theme/shared/spacing';
 export { default as breakpoint } from './theme/shared/breakpoint';
 export { default as allBreakpoints } from './theme/shared/allBreakpoints';
 export { media, screen, container } from './theme/shared/size';
+export { default as allContainers } from './theme/shared/allContainers';
 
 /* Atoms */
 export { default as Text } from './components/Atoms/Text/Text';

package/src/theme/shared/allBreakpoints.js

@@ -1,3 +1,7 @@
+/**
+ * For usage and examples see utils.md
+ */
+
 export const sizes = {
   S: 0,
   M: 740,

package/src/theme/shared/allContainers.js

@@ -1,7 +1,7 @@
-const container = {
+const allContainers = {
   small: '880px',
   medium: '1200px',
   large: '1440px'
 };
 
-export default container;
+export default allContainers;