Merge pull request #1434 from cozy/bar-title

docs/styleguide.config.js

@@ -7,7 +7,10 @@ module.exports = {
   sections: [
     {
       name: 'Bar',
-      components: () => ['../react/BarButton/index.jsx']
+      components: () => [
+        '../react/BarButton/index.jsx',
+        '../react/BarTitle/index.jsx'
+      ]
     },
     {
       name: 'Basics',

react/BarTitle/Readme.md

@@ -0,0 +1,23 @@
+Used to display a title in the Cozy Bar.
+
+### Usage
+
+```jsx static
+import { useBreakpoints } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+
+const MyPage = () => {
+  const { isMobile } = useBreakpoints()
+  return (
+    <BarCenter>
+      {isMobile ? <BarTitle>My transactions</BarTitle> : null }
+    </BarCenter>
+  )
+}
+```
+
+
+### Display
+
+```
+<BarTitle>My transactions</BarTitle>
+```

react/BarTitle/index.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import styles from './styles.styl'
+
+const BarTitle = ({ children }) => {
+  return <h1 className={styles.BarTitle}>{children}</h1>
+}
+
+export default BarTitle

react/BarTitle/styles.styl

@@ -0,0 +1,8 @@
+@require 'settings/typography.styl'
+
+.BarTitle
+  margin 0
+  height 3rem
+  display flex
+  align-items center
+  font-size $bar-font-size

stylus/settings/typography.styl

@@ -7,6 +7,7 @@
 
 $h1-font-size=rem(24)
 $h2-font-size=rem(20)
+$bar-font-size=rem(18)
 $h3-font-size=rem(18)
 $h4-font-size=rem(16)
 $text-font-size=rem(16)