@twreporter/universal-header 2.2.5-rc.0 → 2.2.6

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.2.6](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.6-rc.0...@twreporter/universal-header@2.2.6) (2021-12-27)
+
+**Note:** Version bump only for package @twreporter/universal-header
+
+
+
+
+
+## [2.2.6-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.5...@twreporter/universal-header@2.2.6-rc.0) (2021-12-24)
+
+**Note:** Version bump only for package @twreporter/universal-header
+
+
+
+
+
+## [2.2.5](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.5-rc.1...@twreporter/universal-header@2.2.5) (2021-11-19)
+
+**Note:** Version bump only for package @twreporter/universal-header
+
+
+
+
+
+## [2.2.5-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.5-rc.0...@twreporter/universal-header@2.2.5-rc.1) (2021-11-17)
+
+**Note:** Version bump only for package @twreporter/universal-header
+
+
+
+
+
 ## [2.2.5-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.4...@twreporter/universal-header@2.2.5-rc.0) (2021-11-12)
 
 **Note:** Version bump only for package @twreporter/universal-header

package/lib/components/action-button.js

@@ -17,8 +17,6 @@ var _headerContext = _interopRequireDefault(require("../contexts/header-context"
 
 var _fonts = _interopRequireDefault(require("../constants/fonts"));
 
-var _colors = _interopRequireDefault(require("../constants/colors"));
-
 var _actions = _interopRequireDefault(require("../constants/actions"));
 
 var _links = _interopRequireDefault(require("../utils/links"));
@@ -29,6 +27,8 @@ var _customizedLink = _interopRequireDefault(require("./customized-link"));
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
+var _color = require("@twreporter/core/lib/constants/color");
+
 var _map = _interopRequireDefault(require("lodash/map"));
 
 var _excluded = ["actions", "direction"];
@@ -112,7 +112,7 @@ var ActionContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 }, function (props) {
   return (0, _css.arrayToCssShorthand)(styles.itemMargin[props.direction]);
 }, function (props) {
-  return props.color || _colors["default"].white;
+  return props.color || 'white';
 }, styles.fontSize.desktop, _fonts["default"].weight.bold, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      cursor: default;\n      font-size: ", ";\n    "])), function (props) {
   return styles.fontSize.tablet[props.direction];
 }), _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      cursor: default;\n      font-size: ", ";\n    "])), function (props) {
@@ -123,9 +123,9 @@ var ActionItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "action-button__ActionItem",
   componentId: "sc-4wc24t-2"
 })(["background-color:", ";width:", ";max-width:316px;height:", "px;border-radius:50px;display:flex;align-items:center;justify-content:center;margin:0 auto;&:hover{background-color:", ";}", " ", ""], function (props) {
-  return props.bgColor || _colors["default"].red;
+  return props.bgColor || _color.colorBrand.heavy;
 }, styles.itemWidth.desktop, styles.itemHeight.desktop, function (props) {
-  return props.hoverBgColor || _colors["default"].red;
+  return props.hoverBgColor || _color.colorBrand.heavy;
 }, _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", ";\n  "])), function (props) {
   return styles.itemHeight.tablet[props.direction];
 }, function (props) {

package/lib/components/channels.js

@@ -23,8 +23,6 @@ var _propTypes2 = _interopRequireDefault(require("../constants/prop-types"));
 
 var _channels = _interopRequireDefault(require("../constants/channels"));
 
-var _colors = _interopRequireDefault(require("../constants/colors"));
-
 var _fonts = _interopRequireDefault(require("../constants/fonts"));
 
 var _dropDownMenu = _interopRequireDefault(require("./drop-down-menu"));
@@ -35,6 +33,8 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
 
 var _css = require("@twreporter/core/lib/utils/css");
 
+var _color = require("@twreporter/core/lib/constants/color");
+
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
@@ -140,11 +140,11 @@ var List = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
   displayName: "channels__List",
   componentId: "nu2llv-2"
 })(["height:100%;justify-content:space-between;background-color:", ";user-select:none;box-sizing:border-box;display:flex;flex-direction:", ";flex-wrap:nowrap;align-items:center;list-style-type:none;margin:auto;padding-inline-start:0;border-color:", ";border-width:", ";border-style:solid;"], function (props) {
-  return props.bgColor || _colors["default"].white;
+  return props.bgColor || 'white';
 }, function (props) {
   return props.direction;
 }, function (props) {
-  return props.borderColor || _colors["default"].gray;
+  return props.borderColor || _color.colorGrayscale.gray200;
 }, function (props) {
   return (0, _css.arrayToCssShorthand)(props.borderWidth);
 });

package/lib/components/drop-down-menu.js

@@ -23,6 +23,8 @@ var _propTypes2 = _interopRequireDefault(require("../constants/prop-types"));
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
+var _color = require("@twreporter/core/lib/constants/color");
+
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
@@ -78,7 +80,7 @@ var ViewPort = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var MenuBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "drop-down-menu__MenuBox",
   componentId: "sc-8es5ea-1"
-})(["width:100%;height:100%;box-sizing:border-box;background-color:", ";user-select:none;"], _colors["default"].white);
+})(["width:100%;height:100%;box-sizing:border-box;background-color:", ";user-select:none;"], _color.colorGrayscale.white);
 
 var MenuContent = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
   displayName: "drop-down-menu__MenuContent",
@@ -88,7 +90,7 @@ var MenuContent = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
 var SubMenuBox = /*#__PURE__*/_styledComponents["default"].li.withConfig({
   displayName: "drop-down-menu__SubMenuBox",
   componentId: "sc-8es5ea-3"
-})(["display:flex;box-sizing:border-box;white-space:nowrap;position:relative;margin:0;border-bottom:1px solid #e2e2e2;width:100%;height:", "px;", " a,a:link,a:visited{width:100%;border:0;color:#808080;&:hover{color:", ";background-color:rgba(0,0,0,0.1);}}"], styles.subMenuHeight.mobile, _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", "px;\n  "])), styles.subMenuHeight.desktop), _colors["default"].grayDark);
+})(["display:flex;box-sizing:border-box;white-space:nowrap;position:relative;margin:0;border-bottom:1px solid ", ";width:100%;height:", "px;", " a,a:link,a:visited{width:100%;border:0;color:", ";&:hover{color:", ";background-color:", ";}}"], _color.colorGrayscale.gray200, styles.subMenuHeight.mobile, _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", "px;\n  "])), styles.subMenuHeight.desktop), _color.colorGrayscale.gray600, _color.colorGrayscale.gray900, _colors["default"].gray150);
 
 var SubMenuContent = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   displayName: "drop-down-menu__SubMenuContent",

package/lib/components/search-box.js

@@ -15,13 +15,15 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _fonts = _interopRequireDefault(require("../constants/fonts"));
-
-var _get = _interopRequireDefault(require("lodash/get"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _links = _interopRequireDefault(require("../utils/links"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _fonts = _interopRequireDefault(require("../constants/fonts"));
+
+var _colors = _interopRequireDefault(require("../constants/colors"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -49,6 +51,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
+// assets
 var SearchCancel = function SearchCancel(props) {
   return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("g", {
     fill: "none",
@@ -70,7 +73,8 @@ SearchCancel.defaultProps = {
   height: "29",
   viewBox: "0 0 29 29",
   xmlns: "http://www.w3.org/2000/svg"
-};
+}; // lodash
+
 var _ = {
   get: _get["default"]
 };
@@ -97,7 +101,7 @@ var CellBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var SearchInput = /*#__PURE__*/_styledComponents["default"].input.withConfig({
   displayName: "search-box__SearchInput",
   componentId: "sc-1rne3k3-2"
-})(["width:", "px;max-width:calc(100vw - 870px);margin-right:0.5em;font-size:", ";font-weight:", ";height:", "px;border-radius:58px;border:0;padding:0 1em;&:focus{outline:none;}&::placeholder{font-size:", ";font-weight:", ";color:#8c8c8c;opacity:0.5;letter-spacing:0.7px;}"], styles.inputWidth, _fonts["default"].size.base, _fonts["default"].size.medium, styles.inputHeight, _fonts["default"].size.base, _fonts["default"].size.medium);
+})(["width:", "px;max-width:calc(100vw - 870px);margin-right:0.5em;font-size:", ";font-weight:", ";height:", "px;border-radius:58px;border:0;padding:0 1em;&:focus{outline:none;}&::placeholder{font-size:", ";font-weight:", ";color:", ";opacity:0.5;letter-spacing:0.7px;}"], styles.inputWidth, _fonts["default"].size.base, _fonts["default"].size.medium, styles.inputHeight, _fonts["default"].size.base, _fonts["default"].size.medium, _colors["default"].gray550);
 
 var SearchBox = /*#__PURE__*/function (_React$Component) {
   _inherits(SearchBox, _React$Component);

package/lib/components/slogan.js

@@ -15,12 +15,12 @@ var _headerContext = _interopRequireDefault(require("../contexts/header-context"
 
 var _slogan = _interopRequireDefault(require("../constants/slogan"));
 
-var _colors = _interopRequireDefault(require("../constants/colors"));
-
 var _fonts = _interopRequireDefault(require("../constants/fonts"));
 
 var _theme = _interopRequireDefault(require("../utils/theme"));
 
+var _color = require("@twreporter/core/lib/constants/color");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var style = {
@@ -33,7 +33,7 @@ var SloganContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "slogan__SloganContainer",
   componentId: "sc-1eoofl8-0"
 })(["color:", ";font-size:", ";font-family:", ";display:flex;align-items:center;cursor:default;"], function (props) {
-  return props.color || _colors["default"].grayDark;
+  return props.color || _color.colorGrayscale.gray900;
 }, style.fontSize.desktop, _fonts["default"].family.serif);
 
 var Slogan = function Slogan(_ref) {

package/lib/constants/colors.js

@@ -5,13 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _default = {
-  black: '#000000',
-  grayDark: '#262626',
-  grayLight: '#f1f1f1',
-  gray: '#e2e2e2',
-  photography: '#08192d',
-  brown: '#a67a44',
-  white: '#ffffff',
-  red: '#c40c23'
+  redDark: '#9a1b22',
+  brownDark: '#856236',
+  gray50: 'rgba(255, 255, 255, 0.1)',
+  gray150: 'rgba(0, 0, 0, 0.1)',
+  gray250: 'rgba(128, 128, 128, 0.2)',
+  gray450: 'rgba(128, 128, 128, 0.5)',
+  gray550: '#8c8c8c'
 };
 exports["default"] = _default;

package/lib/utils/theme.js

@@ -11,6 +11,8 @@ var _theme = _interopRequireDefault(require("../constants/theme"));
 
 var _icon = require("./icon");
 
+var _color = require("@twreporter/core/lib/constants/color");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function selectLogoType(theme) {
@@ -92,11 +94,11 @@ function selectChannelTheme(theme) {
     case _theme["default"].photography:
       {
         return {
-          bgColor: _colors["default"].photography,
-          fontColor: '#808080',
-          hoverFontColor: _colors["default"].white,
-          hoverBgColor: 'rgba(255, 255, 255, 0.1)',
-          borderColor: 'rgba(128, 128, 128, 0.2)'
+          bgColor: _color.colorPhoto.dark,
+          fontColor: _color.colorGrayscale.gray600,
+          hoverFontColor: _color.colorGrayscale.white,
+          hoverBgColor: _colors["default"].gray50,
+          borderColor: _colors["default"].gray250
         };
       }
 
@@ -104,21 +106,21 @@ function selectChannelTheme(theme) {
       {
         return {
           bgColor: 'transparent',
-          fontColor: _colors["default"].white,
-          hoverFontColor: _colors["default"].grayDark,
-          hoverBgColor: _colors["default"].white,
-          borderColor: 'rgba(128, 128, 128, 0.2)'
+          fontColor: _color.colorGrayscale.white,
+          hoverFontColor: _color.colorGrayscale.gray900,
+          hoverBgColor: _color.colorGrayscale.white,
+          borderColor: _colors["default"].gray250
         };
       }
 
     case _theme["default"].index:
       {
         return {
-          bgColor: _colors["default"].white,
-          fontColor: '#808080',
-          hoverFontColor: _colors["default"].grayDark,
-          hoverBgColor: 'rgba(0, 0, 0, 0.1)',
-          borderColor: _colors["default"].gray
+          bgColor: _color.colorGrayscale.white,
+          fontColor: _color.colorGrayscale.gray600,
+          hoverFontColor: _color.colorGrayscale.gray900,
+          hoverBgColor: _colors["default"].gray150,
+          borderColor: _color.colorGrayscale.gray200
         };
       }
 
@@ -126,11 +128,11 @@ function selectChannelTheme(theme) {
     default:
       {
         return {
-          bgColor: _colors["default"].grayLight,
-          fontColor: '#808080',
-          hoverFontColor: _colors["default"].grayDark,
-          hoverBgColor: 'rgba(0, 0, 0, 0.1)',
-          borderColor: _colors["default"].gray
+          bgColor: _color.colorGrayscale.gray100,
+          fontColor: _color.colorGrayscale.gray600,
+          hoverFontColor: _color.colorGrayscale.gray900,
+          hoverBgColor: _colors["default"].gray150,
+          borderColor: _color.colorGrayscale.gray200
         };
       }
   }
@@ -141,24 +143,24 @@ function selectHeaderTheme(theme) {
     case _theme["default"].photography:
       {
         return {
-          bgColor: _colors["default"].photography,
-          borderColor: 'rgba(128, 128, 128, 0.2)'
+          bgColor: _color.colorPhoto.dark,
+          borderColor: _colors["default"].gray250
         };
       }
 
     case _theme["default"].transparent:
       {
         return {
-          bgColor: 'rgba(0, 0, 0, 0.1)',
-          borderColor: 'rgba(128, 128, 128, 0.2)'
+          bgColor: _colors["default"].gray150,
+          borderColor: _colors["default"].gray250
         };
       }
 
     case _theme["default"].index:
       {
         return {
-          bgColor: _colors["default"].white,
-          borderColor: _colors["default"].gray
+          bgColor: _color.colorGrayscale.white,
+          borderColor: _color.colorGrayscale.gray200
         };
       }
 
@@ -166,8 +168,8 @@ function selectHeaderTheme(theme) {
     default:
       {
         return {
-          bgColor: _colors["default"].grayLight,
-          borderColor: _colors["default"].gray
+          bgColor: _color.colorGrayscale.gray100,
+          borderColor: _color.colorGrayscale.gray200
         };
       }
   }
@@ -178,18 +180,18 @@ function selectActionButtonTheme(theme) {
     case _theme["default"].photography:
       {
         return {
-          color: _colors["default"].white,
-          bgColor: _colors["default"].brown,
-          hoverBgColor: '#856236'
+          color: _color.colorGrayscale.white,
+          bgColor: _color.colorSupportive.main,
+          hoverBgColor: _colors["default"].brownDark
         };
       }
 
     case _theme["default"].transparent:
       {
         return {
-          color: _colors["default"].brown,
-          bgColor: _colors["default"].white,
-          hoverBgColor: '#d8d8d8'
+          color: _color.colorSupportive.main,
+          bgColor: _color.colorGrayscale.white,
+          hoverBgColor: _color.colorGrayscale.gray300
         };
       }
 
@@ -198,9 +200,9 @@ function selectActionButtonTheme(theme) {
     default:
       {
         return {
-          color: _colors["default"].white,
-          bgColor: _colors["default"].red,
-          hoverBgColor: '#9e1b22'
+          color: _color.colorGrayscale.white,
+          bgColor: _color.colorBrand.heavy,
+          hoverBgColor: _colors["default"].redDark
         };
       }
   }
@@ -211,7 +213,7 @@ function selectHamburgerMenuTheme(theme) {
     case _theme["default"].photography:
       {
         return {
-          bgColor: _colors["default"].photography
+          bgColor: _color.colorPhoto.dark
         };
       }
 
@@ -221,7 +223,7 @@ function selectHamburgerMenuTheme(theme) {
     default:
       {
         return {
-          bgColor: _colors["default"].grayLight
+          bgColor: _color.colorGrayscale.gray100
         };
       }
   }
@@ -232,7 +234,7 @@ function selectHamburgerServiceTheme(theme) {
     case _theme["default"].photography:
       {
         return {
-          borderColor: 'rgba(128, 128, 128, 0.5)'
+          borderColor: _colors["default"].gray450
         };
       }
 
@@ -242,7 +244,7 @@ function selectHamburgerServiceTheme(theme) {
     default:
       {
         return {
-          borderColor: 'rgba(128, 128, 128, 0.2)'
+          borderColor: _colors["default"].gray250
         };
       }
   }
@@ -252,19 +254,19 @@ function selectSloganTheme(theme) {
   switch (theme) {
     case _theme["default"].photography:
       {
-        return '#c9af8e';
+        return _color.colorSupportive.main;
       }
 
     case _theme["default"].transparent:
       {
-        return _colors["default"].white;
+        return _color.colorGrayscale.white;
       }
 
     case _theme["default"].index:
     case _theme["default"].normal:
     default:
       {
-        return _colors["default"].grayDark;
+        return _color.colorGrayscale.gray900;
       }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/universal-header",
-  "version": "2.2.5-rc.0",
+  "version": "2.2.6",
   "description": "Universal header of TWReporter sites",
   "main": "lib/index.js",
   "scripts": {
@@ -18,8 +18,8 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@twreporter/core": "^1.3.1-rc.0",
-    "@twreporter/react-components": "^8.6.3-rc.0",
+    "@twreporter/core": "^1.4.0",
+    "@twreporter/react-components": "^8.7.0",
     "lodash": "^4.17.11",
     "prop-types": "^15.6.2",
     "querystring": "^0.2.0",
@@ -34,5 +34,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "2d394cc1833a19f2698c65f1d9af3bbc71cf2c36"
+  "gitHead": "89fdf1e8005eea6efc14310ad4cb7b21c407ade9"
 }