Merge f59872f into 71b938a

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- `header-force-center` block, for forcing centering on header.
 
 ## [2.19.0] - 2019-05-28
 ### Added

manifest.json

@@ -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"
+}

react/ForceCenter.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const CenterContainer = ({ children }) => (
+  <div
+    className="absolute left-0 right-0 flex justify-center z-1"
+    style={{ pointerEvents: 'none' }}
+  >
+    <div style={{ pointerEvents: 'all' }}>{children}</div>
+  </div>
+)
+
+export default CenterContainer

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": "*"
   }
 }