Merge fe6bc58 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"
+}

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"