Add block class to ForceCenter

vtex-apps · Jun 4, 2019 · fe6bc58 · fe6bc58
1 parent d2e3835
commit fe6bc58
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/package.json b/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"
   }
 }
diff --git a/react/ForceCenter.js b/react/ForceCenter.js
@@ -1,8 +1,15 @@
 import React from 'react'
+import { generateBlockClass } from '@vtex/css-handles'
+import styles from './components/ForceCenter.css'
 
-const ForceCenter = ({ children }) => (
+const ForceCenter = ({ children, blockClass }) => (
   <div
-    className="absolute left-0 right-0 flex justify-center z-1"
+    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>

diff --git a/react/components/ForceCenter.css b/react/components/ForceCenter.css
@@ -0,0 +1 @@
+.forceCenter {}
diff --git a/yarn.lock b/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"