Merge pull request #1022 from cozy/feat/AppTitle

feat: Add AppTitle component

docs/styleguide.config.js

@@ -56,7 +56,8 @@ module.exports = {
         '../react/Well/index.jsx',
         '../react/Infos/index.jsx',
         '../react/ContextHeader/index.jsx',
-        '../react/Filename/index.jsx'
+        '../react/Filename/index.jsx',
+        '../react/AppTitle/index.jsx'
       ]
     },
     {

react/AppTitle/Readme.md

@@ -0,0 +1,8 @@
+Displays the App title in the Cozy Bar
+
+### Default
+
+```
+<AppTitle>Drive</AppTitle>
+```
+

react/AppTitle/index.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import cx from 'classnames'
+import { MainTitle } from '../Text'
+import PropTypes from 'prop-types'
+import styles from './styles.styl'
+
+export const AppTitle = ({ children, className, ...restProps }) => {
+  return (
+    <MainTitle
+      tag="h1"
+      className={cx(styles['c-apptitle'], className)}
+      {...restProps}
+    >
+      {children}
+    </MainTitle>
+  )
+}
+
+AppTitle.propTypes = {
+  className: PropTypes.string
+}
+
+AppTitle.defaultProps = {
+  className: ''
+}
+
+export default AppTitle

react/AppTitle/styles.styl

@@ -0,0 +1,5 @@
+@require '../../stylus/components/apptitle'
+
+.c-apptitle
+    @extend $apptitle
+

react/__snapshots__/examples.spec.jsx.snap

@@ -12,6 +12,12 @@ exports[`ActionMenu should render examples: ActionMenu 2`] = `
 </div>"
 `;
 
+exports[`AppTitle should render examples: AppTitle 1`] = `
+"<div>
+  <h1 class=\\"styles__u-title-h1___fimho styles__c-apptitle___eqV9l\\">Drive</h1>
+</div>"
+`;
+
 exports[`Avatar should render examples: Avatar 1`] = `
 "<div>
   <div class=\\"styles__c-avatar___PpDI-\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">

react/examples.spec.jsx

@@ -21,6 +21,7 @@ testComponent('MuiCozyTheme/Buttons')
 testComponent('MuiCozyTheme/Menus')
 testComponent('MuiCozyTheme/ExpansionPanel')
 testComponent('ActionMenu')
+testComponent('AppTitle')
 testComponent('Avatar')
 testComponent('Badge')
 testComponent('BarButton')

react/index.js

@@ -67,6 +67,7 @@ export { default as Counter } from './Counter'
 export { default as Well } from './Well'
 export { default as Infos } from './Infos'
 export { default as AppIcon } from './AppIcon'
+export { default as AppTitle } from './AppTitle'
 export { default as Filename } from './Filename'
 export { default as Viewer } from './Viewer/ViewerExposer'
 export { default as FileInput } from './FileInput'

react/testFromStyleguidist.js

@@ -15,6 +15,7 @@ import pretty from 'pretty'
  */
 import ActionMenu from './ActionMenu'
 import Alerter from './Alerter'
+import AppTitle from './AppTitle'
 import Avatar from './Avatar'
 import Badge from './Badge'
 import BarButton from './BarButton'
@@ -69,6 +70,7 @@ const testFromStyleguidist = (name, markdown, require) => {
       'content',
       'ActionMenu',
       'Alerter',
+      'AppTitle',
       'Avatar',
       'Badge',
       'BarButton',
@@ -117,6 +119,7 @@ const testFromStyleguidist = (name, markdown, require) => {
       content,
       ActionMenu,
       Alerter,
+      AppTitle,
       Avatar,
       Badge,
       BarButton,

stylus/components/apptitle.styl

@@ -0,0 +1,5 @@
+$apptitle
+    display inline-flex
+    align-items center
+    margin 0
+