@comicrelief/component-library 8.13.1 → 8.13.2

package/dist/components/Organisms/Header2025/Header2025.js

@@ -16,10 +16,12 @@ const Header2025 = _ref => {
     campaign = 'Comic Relief',
     donateButton = null,
     characterLimit = 60,
+    showBoxShadow = false,
     ...rest
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_Header.Header2025Wrapper, Object.assign({
-    navItems: true
+    navItems: true,
+    showBoxShadow: showBoxShadow
   }, rest), /*#__PURE__*/_react.default.createElement(_Header.InnerWrapper, null, /*#__PURE__*/_react.default.createElement(_Header.Brand, null, /*#__PURE__*/_react.default.createElement(_Logos.default, {
     campaign: campaign,
     sizeSm: "50px",

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

@@ -1,11 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InnerWrapper = exports.Header2025Wrapper = exports.Header2025MetaIcons = exports.DonateButtonWrapperTop = exports.ButtonsAndIcons = exports.Brand = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
 var _containers = _interopRequireDefault(require("../../../theme/shared/containers"));
 require("./annoying.css");
@@ -14,7 +15,7 @@ const Header2025Wrapper = exports.Header2025Wrapper = _styledComponents.default.
 })).withConfig({
   displayName: "Header2025style__Header2025Wrapper",
   componentId: "sc-7gs40r-0"
-})(["position:relative;background-color:", ";padding:0;height:75px;@media ", "{height:auto;}"], _ref => {
+})(["position:relative;background-color:", ";padding:0;height:75px;@media ", "{height:auto;}", ";"], _ref => {
   let {
     theme
   } = _ref;
@@ -24,23 +25,33 @@ const Header2025Wrapper = exports.Header2025Wrapper = _styledComponents.default.
     theme
   } = _ref2;
   return theme.allBreakpoints('Nav');
+}, _ref3 => {
+  let {
+    showBoxShadow
+  } = _ref3;
+  return showBoxShadow && (0, _styledComponents.css)(["box-shadow:0 5px 15px 0 ", ";"], _ref4 => {
+    let {
+      theme
+    } = _ref4;
+    return theme.color('grey_4');
+  });
 });
 const InnerWrapper = exports.InnerWrapper = _styledComponents.default.div.withConfig({
   displayName: "Header2025style__InnerWrapper",
   componentId: "sc-7gs40r-1"
-})(["display:flex;align-items:center;height:100%;padding:0 12px;cursor:pointer;max-width:", ";@media ", "{margin:0 auto;}"], _containers.default.large, _ref3 => {
+})(["display:flex;align-items:center;height:100%;padding:0 12px;cursor:pointer;max-width:", ";@media ", "{margin:0 auto;}"], _containers.default.large, _ref5 => {
   let {
     theme
-  } = _ref3;
+  } = _ref5;
   return theme.allBreakpoints('Nav');
 });
 const Brand = exports.Brand = _styledComponents.default.div.withConfig({
   displayName: "Header2025style__Brand",
   componentId: "sc-7gs40r-2"
-})(["", ";margin-right:auto;display:flex;align-items:center;a{border:0;color:transparent;margin-right:25px;img{width:100%;object-fit:contain;}:hover{border:0;}}@media ", "{margin-right:0}"], (0, _zIndex.default)('high'), _ref4 => {
+})(["", ";margin-right:auto;display:flex;align-items:center;a{border:0;color:transparent;margin-right:25px;img{width:100%;object-fit:contain;}:hover{border:0;}}@media ", "{margin-right:0}"], (0, _zIndex.default)('high'), _ref6 => {
   let {
     theme
-  } = _ref4;
+  } = _ref6;
   return theme.allBreakpoints('Nav');
 });
 const DonateButtonWrapperTop = exports.DonateButtonWrapperTop = _styledComponents.default.div.withConfig({
@@ -50,20 +61,20 @@ const DonateButtonWrapperTop = exports.DonateButtonWrapperTop = _styledComponent
 const Header2025MetaIcons = exports.Header2025MetaIcons = _styledComponents.default.div.withConfig({
   displayName: "Header2025style__Header2025MetaIcons",
   componentId: "sc-7gs40r-4"
-})(["display:none;@media ", "{width:auto;align-items:center;> div{height:35px;width:auto;display:inline-block;> a{height:inherit;width:inherit;margin-right:6px;img{padding:5px 7px;height:inherit;width:inherit;}}}position:relative;display:flex;align-items:center;background-color:", ";margin-right:0px;right:0px;}@media ", "{> div > a{margin-right:20px;}}"], _ref5 => {
+})(["display:none;@media ", "{width:auto;align-items:center;> div{height:35px;width:auto;display:inline-block;> a{height:inherit;width:inherit;margin-right:6px;img{padding:5px 7px;height:inherit;width:inherit;}}}position:relative;display:flex;align-items:center;background-color:", ";margin-right:0px;right:0px;}@media ", "{> div > a{margin-right:20px;}}"], _ref7 => {
   let {
     theme
-  } = _ref5;
+  } = _ref7;
   return theme.allBreakpoints('Nav');
-}, _ref6 => {
+}, _ref8 => {
   let {
     theme
-  } = _ref6;
+  } = _ref8;
   return theme.color('white');
-}, _ref7 => {
+}, _ref9 => {
   let {
     theme
-  } = _ref7;
+  } = _ref9;
   return theme.allBreakpoints('NavWide');
 });
 const ButtonsAndIcons = exports.ButtonsAndIcons = _styledComponents.default.div.withConfig({

package/dist/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.style.js

@@ -125,7 +125,7 @@ const SubNavMenu = exports.SubNavMenu = _styledComponents.default.ul.withConfig(
 const SubNavItem = exports.SubNavItem = _styledComponents.default.li.withConfig({
   displayName: "HeaderNav2025style__SubNavItem",
   componentId: "sc-xflhtq-3"
-})(["padding:0;height:100%;width:100%;border-top:1px solid ", ";;position:relative;transition:background-color ", "s ease;&:first-of-type{border-top:none;}span{font-weight:100;}"], _ref18 => {
+})(["padding:0;height:100%;width:100%;border-top:1px solid ", ";;position:relative;transition:background-color ", "s ease;span{font-weight:100;}"], _ref18 => {
   let {
     theme
   } = _ref18;

package/package.json

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

package/src/components/Organisms/Header2025/Header2025.js

@@ -9,9 +9,10 @@ import {
 } from './Header2025.style';
 
 const Header2025 = ({
-  navItems = {}, metaIcons, campaign = 'Comic Relief', donateButton = null, characterLimit = 60, ...rest
+  navItems = {}, metaIcons, campaign = 'Comic Relief', donateButton = null,
+  characterLimit = 60, showBoxShadow = false, ...rest
 }) => (
-  <Header2025Wrapper navItems {...rest}>
+  <Header2025Wrapper navItems showBoxShadow={showBoxShadow} {...rest}>
     <InnerWrapper>
       <Brand>
         <Logos
@@ -56,7 +57,8 @@ Header2025.propTypes = {
   // ... and is supplied separately to allow more render control:
   donateButton: PropTypes.node,
   campaign: PropTypes.string,
-  characterLimit: PropTypes.number
+  characterLimit: PropTypes.number,
+  showBoxShadow: PropTypes.bool
 };
 
 export default Header2025;

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import zIndex from '../../../theme/shared/zIndex';
 import containers from '../../../theme/shared/containers';
@@ -16,6 +16,10 @@ const Header2025Wrapper = styled.header.attrs(() => ({
   @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     height: auto;
   }
+
+  ${({ showBoxShadow }) => showBoxShadow && css`
+    box-shadow: 0 5px 15px 0 ${({ theme }) => theme.color('grey_4')};
+  `};
 `;
 
 const InnerWrapper = styled.div`

package/src/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.style.js

@@ -140,10 +140,6 @@ const SubNavItem = styled.li`
   position: relative;
   transition: background-color ${transitionDuration}s ease;
 
-  &:first-of-type {
-    border-top: none;
-  }
-
   span {
     font-weight: 100;
   }