Merge 4538d57 into 71b938a

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [2.20.0] - 2019-06-04
+### Added
+- `header-force-center` block, for forcing centering on header.
+
 ## [2.19.0] - 2019-05-28
 ### Added
 - Support for `localeSwitcher`.

manifest.json

@@ -1,7 +1,7 @@
 {
   "vendor": "vtex",
   "name": "store-header",
-  "version": "2.19.0",
+  "version": "2.20.0",
   "title": "VTEX Store Header",
   "defaultLocale": "pt-BR",
   "description": "The VTEX Store Header component",
@@ -30,5 +30,6 @@
     "vtex.rich-text": "0.x",
     "vtex.store-drawer": "0.x",
     "vtex.locale-switcher": "0.x"
-  }
+  },
+  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
 }

package.json

@@ -5,5 +5,8 @@
     "eslint-config-vtex-react": "^4.0.0",
     "prettier": "^1.16.4",
     "typescript": "^3.4.1"
+  },
+  "dependencies": {
+    "@vtex/css-handles": "^1.1.0"
   }
 }

react/ForceCenter.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { generateBlockClass } from '@vtex/css-handles'
+import styles from './components/ForceCenter.css'
+
+const ForceCenter = ({ children, blockClass }) => (
+  <div
+    className={generateBlockClass(
+      `${generateBlockClass(
+        styles.forceCenter,
+        blockClass
+      )} absolute left-0 right-0 flex justify-center z-1`
+    )}
+    style={{ pointerEvents: 'none' }}
+  >
+    <div style={{ pointerEvents: 'all' }}>{children}</div>
+  </div>
+)
+
+export default ForceCenter

react/components/ForceCenter.css

@@ -0,0 +1 @@
+.forceCenter {}

react/components/Row.tsx

@@ -19,14 +19,21 @@ const Row: FunctionComponent<Props & BlockClass> = ({
   inverted,
   blockClass,
 }) => {
-  const content = <div className={`${styles.headerRowContainer} w-100 flex items-center`}>{children}</div>
+  const content = (
+    <div className={`${styles.headerRowContainer} w-100 flex items-center`}>
+      {children}
+    </div>
+  )
 
   return (
     <StickyRow sticky={sticky}>
       <div className={generateBlockClass(styles.headerRow, blockClass)}>
         <div
           className={classNames(
-            `${generateBlockClass(styles.headerRowBackground, blockClass)} w-100`,
+            `${generateBlockClass(
+              styles.headerRowBackground,
+              blockClass
+            )} w-100`,
             inverted
               ? 'bg-base--inverted c-on-base--inverted'
               : 'bg-base c-on-base'

store/interfaces.json

@@ -57,7 +57,8 @@
       "user-address",
       "header-spacer",
       "rich-text",
-      "drawer"
+      "drawer",
+      "header-force-center"
     ],
     "component": "Row",
     "composition": "children"
@@ -103,5 +104,10 @@
   },
   "unstable--header-border": {
     "component": "Border"
+  },
+  "header-force-center": {
+    "component": "ForceCenter",
+    "composition": "children",
+    "allowed": "*"
   }
 }

yarn.lock

@@ -45,6 +45,11 @@
     lodash.unescape "4.0.1"
     semver "5.5.0"
 
+"@vtex/css-handles@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@vtex/css-handles/-/css-handles-1.1.0.tgz#c49998230e7b1576bef4ea6125471137a54c6c86"
+  integrity sha512-GP5ONxBimQoKRIW8WjUCI5/HU13JdMTxPw1aoumWcDv3ycUu13IR8HzzIuTM+iFZE9ctvGZfVCq9FXqQ747yNw==
+
 acorn-jsx@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.0.1.tgz#32a064fd925429216a09b141102bfdd185fae40e"