twreporter-react-header-components - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

CHANGELOG.md

@@ -0,1 +1,6 @@
+### 1.0.6
+
+- Fix icon style
+- Set default prop pathname of Header
+
 ### 1.0.5
@@ -2,0 +7,0 @@

lib/components/header.js

@@ -750,3 +750,3 @@ 'use strict';
   displayName: 'header__HeaderContainer',
-  componentId: 's1iwjo5u-0'
+  componentId: 's1tt9oyu-0'
 })(['box-sizing:border-box;position:relative;width:100%;']);
@@ -756,3 +756,3 @@
   displayName: 'header__TopRow',
-  componentId: 's1iwjo5u-1'
+  componentId: 's1tt9oyu-1'
 })(['background-color:', ';height:', 'px;'], function (props) {
@@ -766,3 +766,3 @@ return props.isIndex ? _commonVariables.colors.indexBodyBgWhite : (0, _theme.selectBgColor)(props.pageTheme);
   displayName: 'header__TopRowContent',
-  componentId: 's1iwjo5u-2'
+  componentId: 's1tt9oyu-2'
 })(['padding:', ';', ' ', ' box-sizing:border-box;height:', 'px;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;', ' ', ' ', ' margin:0 auto;'], function (props) {
@@ -865,3 +865,3 @@ return !props.isIndex ? (0, _styleUtils.arrayToCssShorthand)(styles.topRowPadding.mobile) : (0, _styleUtils.arrayToCssShorthand)(styles.topRowPadding.index.mobile);
   pageTheme: _propTypes2.default.string,
-  pathName: _propTypes2.default.string.isRequired,
+  pathName: _propTypes2.default.string,
   isIndex: _propTypes2.default.bool
@@ -872,5 +872,6 @@ };
   pageTheme: _configs.pageThemes.bright,
-  isIndex: false
+  isIndex: false,
+  pathName: ''
 };
 
 exports.default = Header;

lib/components/icons.js

@@ -11,3 +11,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n    &:hover {\n      svg {\n        transform: scale(1.7, .5);\n        opacity: 0;\n      }\n      span {\n        transform: scale(1, 1);\n        opacity: 1;\n      }\n    }\n    svg {\n      opacity: 1;\n      transition: transform .3s ease-in-out, opacity .3s ease-in-out;\n      position: absolute;\n      height: 100%;\n      top: 0;\n      left: 30%;\n      z-index: 1;\n    }\n    span {\n      white-space: nowrap;\n      overflow: hidden;\n      color: ', ';\n      font-weight: ', ';\n      opacity: 0;\n      transition: transform .3s ease-in-out, opacity .3s ease-in-out;\n      transform: scale(.4, 1.2);\n      position: absolute;\n      height: 100%;\n      width: 2em;\n      line-height: ', ';\n      vertical-align: middle;\n      top: 0;\n      left: 17%;\n      z-index: 2;\n    }\n  '], ['\n    &:hover {\n      svg {\n        transform: scale(1.7, .5);\n        opacity: 0;\n      }\n      span {\n        transform: scale(1, 1);\n        opacity: 1;\n      }\n    }\n    svg {\n      opacity: 1;\n      transition: transform .3s ease-in-out, opacity .3s ease-in-out;\n      position: absolute;\n      height: 100%;\n      top: 0;\n      left: 30%;\n      z-index: 1;\n    }\n    span {\n      white-space: nowrap;\n      overflow: hidden;\n      color: ', ';\n      font-weight: ', ';\n      opacity: 0;\n      transition: transform .3s ease-in-out, opacity .3s ease-in-out;\n      transform: scale(.4, 1.2);\n      position: absolute;\n      height: 100%;\n      width: 2em;\n      line-height: ', ';\n      vertical-align: middle;\n      top: 0;\n      left: 17%;\n      z-index: 2;\n    }\n  ']),
+var _templateObject = _taggedTemplateLiteral(['\n    svg {\n      opacity: 1;\n      transition: transform .3s ease-in-out, opacity .3s ease-in-out;\n      position: absolute;\n      height: 100%;\n      top: 0;\n      left: 30%;\n      z-index: 1;\n    }\n    span {\n      display: inline;\n      white-space: nowrap;\n      overflow: hidden;\n      color: ', ';\n      font-weight: ', ';\n      opacity: 0;\n      transition: transform .3s ease-in-out, opacity .3s ease-in-out;\n      transform: scale(.4, 1.2);\n      position: absolute;\n      height: 100%;\n      width: 2em;\n      line-height: ', ';\n      vertical-align: middle;\n      top: 0;\n      left: 17%;\n      z-index: 2;\n    }\n    &:hover {\n      svg {\n        transform: scale(1.7, .5);\n        opacity: 0;\n      }\n      span {\n        transform: scale(1, 1);\n        opacity: 1;\n      }\n    }\n  '], ['\n    svg {\n      opacity: 1;\n      transition: transform .3s ease-in-out, opacity .3s ease-in-out;\n      position: absolute;\n      height: 100%;\n      top: 0;\n      left: 30%;\n      z-index: 1;\n    }\n    span {\n      display: inline;\n      white-space: nowrap;\n      overflow: hidden;\n      color: ', ';\n      font-weight: ', ';\n      opacity: 0;\n      transition: transform .3s ease-in-out, opacity .3s ease-in-out;\n      transform: scale(.4, 1.2);\n      position: absolute;\n      height: 100%;\n      width: 2em;\n      line-height: ', ';\n      vertical-align: middle;\n      top: 0;\n      left: 17%;\n      z-index: 2;\n    }\n    &:hover {\n      svg {\n        transform: scale(1.7, .5);\n        opacity: 0;\n      }\n      span {\n        transform: scale(1, 1);\n        opacity: 1;\n      }\n    }\n  ']),
     _templateObject2 = _taggedTemplateLiteral(['\n  display: none;\n  ', '\n'], ['\n  display: none;\n  ', '\n']),
@@ -110,8 +110,9 @@ _templateObject3 = _taggedTemplateLiteral(['\n    display: table-cell;\n  '], ['\n    display: table-cell;\n  ']),
   displayName: 'icons__IconsContainer',
-  componentId: 'eqvo2y-0'
+  componentId: 'xq6kmt-0'
 })(['position:relative;display:table;']);
+
 var IconContainer = _styledComponents2.default.div.withConfig({
   displayName: 'icons__IconContainer',
-  componentId: 'eqvo2y-1'
-})(['font-size:', ';cursor:pointer;display:table-cell;width:', 'em;height:', 'em;line-height:1;vertical-align:middle;text-align:center;position:relative;svg{height:100%;}', ''], _commonVariables.fonts.size.base, styles.iconContainerSize, styles.iconContainerSize, _styleUtils.screen.desktopAbove(_templateObject, _commonVariables.colors.iconAltText, _commonVariables.fonts.weight.bold, styles.iconContainerSize));
+  componentId: 'xq6kmt-1'
+})(['font-size:', ';cursor:pointer;display:table-cell;width:', 'em;height:', 'em;line-height:1;vertical-align:middle;text-align:center;position:relative;svg{height:100%;}span{display:none;}', ''], _commonVariables.fonts.size.base, styles.iconContainerSize, styles.iconContainerSize, _styleUtils.screen.desktopAbove(_templateObject, _commonVariables.colors.iconAltText, _commonVariables.fonts.weight.bold, styles.iconContainerSize));
 
@@ -190,2 +191,12 @@ var DisplayOnDesktop = IconContainer.extend(_templateObject2, function (props) {
           )
+        ),
+        _react2.default.createElement(
+          IconContainer,
+          null,
+          _react2.default.createElement(SearchIcon, null),
+          _react2.default.createElement(
+            'span',
+            null,
+            ICON_ALT_TEXT.SEARCH
+          )
         )
@@ -192,0 +203,0 @@ );

package.json

 {
   "name": "twreporter-react-header-components",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "scripts": {
@@ -5,0 +5,0 @@ "build": "gulp build-package --color",

README.md

@@ -38,5 +38,5 @@ # twreporter-react-header-components
 
-* `isIndex`: (boolean) The Component is used on index page or not.
-* `pageTheme`: (string) The page theme passed by `twreporter-react`. `DARK` or `BRIGHT`.
-* `pathName`: (string) The pathname passed by `twreporter-react`. With format likes `/categories/inforgraphic`, `/photography` .
+* `isIndex`: (boolean) The Component is used on index page or not. (default: `false`)
+* `pageTheme`: (string) The page theme passed by `twreporter-react`. `DARK` or `BRIGHT`. (default: `'BRIGHT'`)
+* `pathName`: (string) The pathname passed by `twreporter-react`. With format likes `/categories/inforgraphic`, `/photography` . (default: `''`)
 
@@ -43,0 +43,0 @@ ## Developement

No alert changes

Improved metrics

Total package byte prevSize

323049

increased by0.15%

Lines of code

1958

increased by0.56%

No dependency changes