Merge pull request #198 from vtex/feature/page-header

Add pageheader
vtex · Jul 4, 2018 · c02b689 · c02b689
2 parents c151035 + fd61c48
commit c02b689
Show file tree

Hide file tree

Showing 33 changed files with 79 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,7 +7,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
-## [5.1.0] - 2018-7-3
+## [5.2.0] - 2018-07-04
+
+### Added
+
+- **PageHeader**
 
 ## [5.1.0] - 2018-07-03
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vtex/styleguide",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "scripts": {
     "test": "react-scripts test --env=jsdom",
     "test:codemod": "jest codemod",

diff --git a/react/components/PageHeader/README.md b/react/components/PageHeader/README.md
@@ -0,0 +1,18 @@
+Default
+
+```js
+<PageHeader title="Invoices" />
+```
+
+With back link
+
+```js
+<PageHeader
+  title="Invoice"
+  backLabel="Back"
+  backUrl="http://wikipedia.com"
+  backClick={e => {
+    console.log(e)
+  }}
+/>
+```
diff --git a/react/components/PageHeader/index.js b/react/components/PageHeader/index.js
@@ -0,0 +1,55 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+
+import ArrowBack from '../icon/ArrowBack'
+import Button from '../Button'
+
+class PageHeader extends PureComponent {
+  handleClick = e => {
+    this.props.backClick && this.props.backClick(e)
+  }
+
+  render() {
+    const { backLabel } = this.props
+
+    return (
+      <div className="bg-near-white pa5">
+        {backLabel && (
+          <Button
+            size="small"
+            variation="tertiary"
+            neutral
+            onClick={this.handleClick}
+          >
+            <span
+              className="flex align-baseline relative"
+              style={{ marginLeft: '-16px' }}
+            >
+              <span className="mr3">
+                <ArrowBack color="currentColor" />
+              </span>
+
+              {backLabel}
+            </span>
+          </Button>
+        )}
+
+        <div
+          className={`near-black f2 fw6 mt2 mb7 ${
+            backLabel ? 'mt2' : 'mb2 mt8'
+          }`}
+        >
+          {this.props.title}
+        </div>
+      </div>
+    )
+  }
+}
+
+PageHeader.propTypes = {
+  title: PropTypes.string.isRequired,
+  backLabel: PropTypes.string,
+  backClick: PropTypes.func,
+}
+
+export default PageHeader
diff --git a/styleguide-visual/Alert_2_desktop.png b/styleguide-visual/Alert_2_desktop.png
diff --git a/styleguide-visual/Badge_2_desktop.png b/styleguide-visual/Badge_2_desktop.png
diff --git a/styleguide-visual/Button_1_desktop.png b/styleguide-visual/Button_1_desktop.png
diff --git a/styleguide-visual/Button_2_desktop.png b/styleguide-visual/Button_2_desktop.png
diff --git a/styleguide-visual/Button_3_desktop.png b/styleguide-visual/Button_3_desktop.png
diff --git a/styleguide-visual/Button_5_desktop.png b/styleguide-visual/Button_5_desktop.png
diff --git a/styleguide-visual/Button_6_desktop.png b/styleguide-visual/Button_6_desktop.png
diff --git a/styleguide-visual/Card_1_desktop.png b/styleguide-visual/Card_1_desktop.png
diff --git a/styleguide-visual/Card_2_desktop.png b/styleguide-visual/Card_2_desktop.png
diff --git a/styleguide-visual/Checkbox_1_desktop.png b/styleguide-visual/Checkbox_1_desktop.png
diff --git a/styleguide-visual/Checkbox_2_desktop.png b/styleguide-visual/Checkbox_2_desktop.png
diff --git a/styleguide-visual/Dropdown_2_desktop.png b/styleguide-visual/Dropdown_2_desktop.png
diff --git a/styleguide-visual/Dropdown_3_desktop.png b/styleguide-visual/Dropdown_3_desktop.png
diff --git a/styleguide-visual/EmptyState_1_desktop.png b/styleguide-visual/EmptyState_1_desktop.png
diff --git a/styleguide-visual/EmptyState_2_desktop.png b/styleguide-visual/EmptyState_2_desktop.png
diff --git a/styleguide-visual/Icons_1_desktop.png b/styleguide-visual/Icons_1_desktop.png
diff --git a/styleguide-visual/Input_2_desktop.png b/styleguide-visual/Input_2_desktop.png
diff --git a/styleguide-visual/Input_3_desktop.png b/styleguide-visual/Input_3_desktop.png
diff --git a/styleguide-visual/PageHeader_1_desktop.png b/styleguide-visual/PageHeader_1_desktop.png
diff --git a/styleguide-visual/PageHeader_2_desktop.png b/styleguide-visual/PageHeader_2_desktop.png
diff --git a/styleguide-visual/RadioGroup_2_desktop.png b/styleguide-visual/RadioGroup_2_desktop.png
diff --git a/styleguide-visual/RadioGroup_3_desktop.png b/styleguide-visual/RadioGroup_3_desktop.png
diff --git a/styleguide-visual/Spinner_1_desktop.png b/styleguide-visual/Spinner_1_desktop.png
diff --git a/styleguide-visual/Spinner_2_desktop.png b/styleguide-visual/Spinner_2_desktop.png
diff --git a/styleguide-visual/Table_2_desktop.png b/styleguide-visual/Table_2_desktop.png
diff --git a/styleguide-visual/Tabs_1_desktop.png b/styleguide-visual/Tabs_1_desktop.png
diff --git a/styleguide-visual/Toggle_1_desktop.png b/styleguide-visual/Toggle_1_desktop.png
diff --git a/styleguide-visual/Toggle_2_desktop.png b/styleguide-visual/Toggle_2_desktop.png
diff --git a/styleguide-visual/Toggle_3_desktop.png b/styleguide-visual/Toggle_3_desktop.png