@hipay/hipay-material-ui 2.0.0-beta.55 → 2.0.0-beta.57

package/README.md

@@ -1,152 +1,302 @@
-<p align="center">
-  <a href="https://material-ui.com/" rel="noopener" target="_blank"><img width="150" src="https://material-ui.com/static/images/material-ui-logo.svg" alt="Material-UI logo"></a></p>
-</p>
+# Material-UI docs
 
-<h1 align="center">Material-UI</h1>
+Voici la documentation du site HiPay Material-UI.
 
-<div align="center">
+Avant de commencer, il faut vous familiariser avec REACT :
+- https://reactjs.org/
+- https://reactjs.org/docs/optimizing-performance.html
 
-[React](http://facebook.github.io/react/) components that implement [Google's Material Design](https://www.google.com/design/spec/material-design/introduction.html).
+Et connaîtres les [best practices](#best-practices)
 
-[![npm package](https://img.shields.io/npm/v/@material-ui/core/latest.svg)](https://www.npmjs.com/package/@material-ui/core)
-[![npm downloads](https://img.shields.io/npm/dm/@material-ui/core.svg)](https://www.npmjs.com/package/@material-ui/core)
-[![CircleCI](https://img.shields.io/circleci/project/github/mui-org/material-ui/master.svg)](https://circleci.com/gh/mui-org/material-ui/tree/master)
-[![Gitter](https://img.shields.io/badge/gitter-join%20chat-f81a65.svg)](https://gitter.im/callemall/material-ui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-[![Coverage Status](https://img.shields.io/codecov/c/github/mui-org/material-ui/master.svg)](https://codecov.io/gh/mui-org/material-ui/branch/master)
-[![CII Best Practices](https://bestpractices.coreinfrastructure.org/projects/1320/badge)](https://bestpractices.coreinfrastructure.org/projects/1320)
-![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)
-[![Follow on Twitter](https://img.shields.io/twitter/follow/MaterialUI.svg?label=follow+Material-UI)](https://twitter.com/MaterialUI)
-[![PeerDependencies](https://img.shields.io/david/peer/mui-org/material-ui.svg)](https://david-dm.org/mui-org/material-ui?type=peer)
-[![Dependencies](https://img.shields.io/david/mui-org/material-ui.svg)](https://david-dm.org/mui-org/material-ui)
-[![DevDependencies](https://img.shields.io/david/dev/mui-org/material-ui.svg)](https://david-dm.org/mui-org/material-ui?type=dev)
-[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/mui-org/material-ui.svg)](http://isitmaintained.com/project/mui-org/material-ui "Average time to resolve an issue")
 
-</div>
+## Lancer le projet
 
-## Installation
+#### Via docker
 
-Material-UI is available as an [npm package](https://www.npmjs.com/package/@material-ui/core).
+Il faut que sur votre poste soit installé
+- [Docker](https://docs.docker.com/install/linux/docker-ce/ubuntu/)
 
-**[Stable channel v1](https://material-ui.com/)**
+Puis lancez les commandes
 ```sh
-// with npm
-npm install @material-ui/core
+# En mode dev :
+docker-compose -f docker-compose.dev.yml build
+docker-compose -f docker-compose.dev.yml up # -d pour détacher du shell courant
 
-// with yarn
-yarn add @material-ui/core
+# En mode prod :
+docker-compose -f docker-compose.prod.yml build
+docker-compose -f docker-compose.prod.yml up # -d pour détacher du shell courant
 ```
 
-**[v0.x](https://v0.material-ui.com/)** ([Migration to v1](https://material-ui.com/guides/migration-v0x/))
+#### En local
+
+Il faut que sur votre poste soit installés
+- [node](https://nodejs.org/fr/) (minimum version LTS 8.9.4)
+- [npm](https://www.npmjs.com/) (minimum version 5.6.0)
+
+Puis lancez les commandes
+```sh
+npm install
+
+# En mode dev :
+npm start
+# équivaut à
+npm run docs:dev
+
+# En mode prod :
+npm run docs:build
+npm run docs:start
+```
+Le site est dispo à cette URL:
+[http://localhost:3000](http://localhost:3000)
+
+## Best practices
+#### Patterns
+- single "source of truth" / top>down data flow
+https://reactjs.org/docs/lifting-state-up.html
+https://reactjs.org/docs/state-and-lifecycle.html#the-data-flows-down
+
+- classique patterns
+https://reactpatterns.com
+
+- accéder au thème dans un composant (en dehors du style)
+export default withStyles(styles, { withTheme: true })(CellStatus);
+ne plus utiliser la notation
+export default withStyles(styles)(withTheme()(CellStatus));
+
+#### Optimisation
+- Faire attention au Lifecycle ! ne pas introduire de boucle infinie en "updatant" le state d'un composant dans une mauvaise phase. (voir schéma ci-dessous).
+Si le composant à besoin d'accéder à son DOM (pour redéfinir sa taille...), on préfère le gérer en js pur pour ne pas refaire un cycle (voir la gestion des scrolls dans HiTable/HiTable.js ou l'ellipse au milieu dans HiTable/BodyCells/CellText.js )
+<img width="800" src="/static/react-lifecycle.png" alt="react-lifecycle">
+
+- Comprendre la différence entre React.Component & React.PureComponent
+https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81
+
+- Comprendre le principe de réconciliation pour optimiser les ensembles de composants (listes, tableaux...) -> use "key" !
+https://reactjs.org/docs/lists-and-keys.html
+https://reactjs.org/docs/reconciliation.html
+
+- Attention aux refs et aux mutations
+ex: ne pas passer une arrow fonction directement dans les props d'un composant. Même pour y inclure un index ou une valeur contextuelle !
+
+## Contribuer
+
+#### A savoir
+- Notre projet sur JIRA : [PSYCHE - Production](https://jira.hipay.org/secure/RapidBoard.jspa?rapidView=90&projectKey=PSYCHE)
+- Pour ouvrir nos features, nous utilisons [git flow](https://danielkummer.github.io/git-flow-cheatsheet/)
+Après avoir cloner le projet, il faudra lancer la commande `git flow init`  **depuis la master**
+
+```sh
+git clone git@gitlab.hipay.org:backend/hipay-material-ui.git
+git checkout master
+git flow init
+# Tapez "Entrée" pour toutes les questions
+```
+
+- Tous les composants sont dans le dossier /src.
+- Nos composants HiPay doivent être préfixés par "Hi", par exemple HiTable, HiButton...
+- Pour un code bien formatter, on utilise [ESLint - Prettier](#eslint-prettier)
+- Pour activer ESLint sur PHPStorm : File -> Settings -> Languages & Frameworks -> Code Qaulity Tools -> ESLint -> Enable
+
+#### Pour rajouter de la documentation dans les démos
+[Lire ce guide](https://github.com/callemall/material-ui/blob/v1-beta/CONTRIBUTING.md)
+
+#### Pour rajouter des composants dans la liste "API"
+Il faut les rajouter tout en haut du markdown de la page dans la liste des "components:"
+Par exemple sur la page des tableaux : http://localhost:3000/demos/tables
+=> Il faut les rajouter au fichier [hi-table.md](docs/src/pages/demos/hi-table/hi-table.md)
+
+#### Workflow d'une feature
+- S'affecter la tâche JIRA et la passer à "dev in progress" (projet [PSYCHE - Production](https://jira.hipay.org/secure/RapidBoard.jspa?rapidView=90&projectKey=PSYCHE))
+- Ouvrir la feature via git flow
+
+```sh
+git flow feature start PSYCHE-XXX
+```
+
+- Avant de commiter ou pusher, il faut vérifier la [Definition Of Done](https://docs.google.com/spreadsheets/d/1qYanLfy2k_VYuclar3aAWSUo9b3soI48ZCjkKK83Rr0/edit?usp=drive_web&ouid=102268869535987309171)
+- Les [tests unitaires](#tests) doivent passer
+- La [génération des apis](#generation-des-apis) aussi
+- Le code doit être bien formatter : [ESLint - Prettier](#esLint-prettier)
+- Commit - suivant les conventions de rédaction des messages de commit
+- Push
+- Faire la demande de merge request sur la develop
+- La revue se fera par un membre de l'équipe PSYCHE
+
+##### Conventional Changelog
+
+(optionel) installer [commitizen](https://github.com/commitizen/cz-cli) pour s'assurer de commiter selon la convention
 ```sh
-// with npm
-npm install material-ui
+npm install commitizen -g
+```
 
-// with yarn
-yarn add material-ui
+
+Voici un squelette d’exemple de message de commit conventionnel :
 ```
+<type de tâche>(<périmètre>): message court
 
+Description complémentaire/complète
 
-Please note that `@next` will only point to pre-releases; to get the latest stable release use `@latest` instead.
+Référence/action sur un ticket définissant cette tâche
+ ```
 
-## Supporting Material-UI
+ On facilite ainsi la lecture du log d’une part, la génération automatique du changelog (ou release notes) d’autre part
 
-Material-UI is an MIT-licensed open source project. It's an independent project with ongoing development made possible thanks to the support of these awesome [backers](/BACKERS.md). If you'd like to join them, please consider:
-- [Become a backer or sponsor on Patreon](https://www.patreon.com/oliviertassinari).
-- [Become a backer or sponsor on OpenCollective](https://opencollective.com/material-ui).
+Types de tâche:
+- <b>fix</b>  : commit d'une correction de bug. Se traduit en <b>PATCH</b> dans le changelog
+- <b>feat</b> : commit d'une nouvelle feature. Se traduit en <b>MINOR</b> dans le changelog
+- <b>test</b> : commit d'un ajout ou d'une maj de tests
+- <b>docs</b> : commit d'un ajout ou d'une maj de la documentation OU de l'app de démonstration
+- <b>perf</b> : commit concernant l'amélioration des performances
 
-#### What's the difference between Patreon and OpenCollective?
+<b>BREAKING CHANGE</b> : si un commit introduit un BREAKING CHANGE, on doit ajouter le tag BREAKING CHANGE dans le corps du commit. Ce commit peut être de n'importe quel type mais il est préférable qu'il soit lié à une feature. Se traduit en <b>MAJOR</b> dans le changelog
 
-Funds donated via Patreon directly support [Olivier Tassinari](https://github.com/oliviertassinari)'s work on Material-UI.
-Funds donated via OpenCollective are managed transparently and will be used for compensating work and expenses for core team members.
-Your name/logo will receive proper recognition and exposure by donating on either platform.
+Périmètre (optionel): nom du composant, type de tests, page de la doc
 
-### Gold Sponsors
+ Exemple:
+ ```
+ feat(HiTable): add children rows management
 
-Gold Sponsors are those who have pledged $500/month and more to Material-UI.
+Handle children rows as subtable based on the same columns as parents.
 
-via [Patreon](https://www.patreon.com/oliviertassinari)
+PSYCHE-XX
+ ```
 
-<p style="display: flex;">
-  <a href="https://www.creative-tim.com/?utm_source=material-ui&utm_medium=docs&utm_campaign=homepage" rel="noopener" target="_blank"><img width="126" src="https://avatars1.githubusercontent.com/u/20172349?s=378" alt="creative-tim" title="Premium Themes"></a>
-  <a href="https://bitsrc.io" rel="noopener" target="_blank"><img width="96" src="https://avatars1.githubusercontent.com/u/24789812?s=192" alt="bitsrc" title="The fastest way to share code"></a>
-</p>
+## Génération des apis
+```sh
+npm run docs:api
+```
 
-via [OpenCollective](https://opencollective.com/material-ui)
+## Tests
+Tous les composants doivent avoir leur test à côté (fichier .spec.js)
+On utilise [mocha](https://mochajs.org/), [chai](http://chaijs.com/) et [enzyme](http://airbnb.io/enzyme/docs/api/)
 
-<a href="https://opencollective.com/material-ui/tiers/gold-sponsors/0/website" rel="noopener" target="_blank"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/0/avatar.svg" alt="0" /></a>
-<a href="https://opencollective.com/material-ui/tiers/gold-sponsors/1/website" rel="noopener" target="_blank"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/1/avatar.svg" alt="1" /></a>
-<a href="https://opencollective.com/material-ui/tiers/gold-sponsors/2/website" rel="noopener" target="_blank"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/2/avatar.svg" alt="2" /></a>
-<a href="https://opencollective.com/material-ui/tiers/gold-sponsors/3/website" rel="noopener" target="_blank"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/3/avatar.svg" alt="3" /></a>
-<a href="https://opencollective.com/material-ui/tiers/gold-sponsors/4/website" rel="noopener" target="_blank"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/4/avatar.svg" alt="4" /></a>
-<a href="https://opencollective.com/material-ui/tiers/gold-sponsors/5/website" rel="noopener" target="_blank"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/5/avatar.svg" alt="5" /></a>
-<a href="https://opencollective.com/material-ui/tiers/gold-sponsors/6/website" rel="noopener" target="_blank"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/6/avatar.svg" alt="6" /></a>
-<a href="https://opencollective.com/material-ui/tiers/gold-sponsors/7/website" rel="noopener" target="_blank"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/7/avatar.svg" alt="7" /></a>
-<a href="https://opencollective.com/material-ui/tiers/gold-sponsors/8/website" rel="noopener" target="_blank"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/8/avatar.svg" alt="8" /></a>
-<a href="https://opencollective.com/material-ui/tiers/gold-sponsors/9/website" rel="noopener" target="_blank"><img src="https://opencollective.com/material-ui/tiers/gold-sponsors/9/avatar.svg" alt="9" /></a>
+##### Jouer tous les tests
+```sh
+npm run test:unit
+```
 
-### There is more!
+##### Jouer les tests sur un seul composant
+```sh
+yarn run mocha src/AdvancedTable/BodyCells/CellAccount.spec.js
+```
 
-See the full list of [our backers](/BACKERS.md).
+#### Vérifier la couverture de code
+```sh
+npm run test:coverage
+# ou pour avoir le rendu html :
+npm run test:coverage:html
+```
+La couverture de code html se trouvera dans le dossier [coverage](coverage)
 
-## Usage
+#### Calcul de couverture sur un seul composant
+```sh
+yarn cross-env NODE_ENV=test BABEL_ENV=coverage nyc mocha src/HiTable/BodyCells/CellAccount.spec.js  && nyc report -r lcovonly
+```
 
-Here is a quick example to get you started, **it's all you need**:
+## ESLint - Prettier
+Pour le bon formattage des fichiers, on utilise [Prettier](https://prettier.io/docs/en/install.html) avec la conf EsLint
+La conf se trouve dans le fichier [prettier.config.js](prettier.config.js)
+Toutes les options : [https://prettier.io/docs/en/options.html](https://prettier.io/docs/en/options.html)
 
-```jsx
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Button from '@material-ui/core/Button';
+#### Installer prettier en global
+```sh
+yarn global add prettier
+```
 
-function App() {
-  return (
-    <Button variant="raised" color="primary">
-      Hello World
-    </Button>
-  );
-}
+#### Utilisation [voir doc](https://prettier.io/docs/en/cli.html)
 
-ReactDOM.render(<App />, document.querySelector('#app'));
+#### Vérifier le fichier de config utilisé
+```sh
+prettier --find-config-path src/HiForm/HiInput.js
 ```
 
-Yes, it's really all you need to get started as you can see in this live and interactive demo:
+#### Forcer le formatage d'un fichier
+```sh
+prettier --write src/HiForm/HiInput.js
+```
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/4j7m47vlm4)
+## Publish
+Le projet est publié sur un repo privé npm : https://www.npmjs.com/package/@hipay/hipay-material-ui
 
-## Questions
+#### Publier une nouvelle version
 
-For *how-to* questions and other non-issues,
-please use [StackOverflow](http://stackoverflow.com/questions/tagged/material-ui) instead of Github issues.
-There is a StackOverflow tag called "material-ui" that you can use to tag your questions.
+Avoir installé [conventional-changelog-cli](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-cli) pour générer le CHANGELOG à partir des commits git.
+```sh
+npm install -g conventional-changelog-cli
+npm install -g cz-conventional-changelog
+```
 
-## Examples
+1. Changer la version dans packages/hipay-material-ui/package.json
+2. Générer le fichier HI-CHANGELOG.md : ```npm run changelog```
+3. Commiter la release : ```git ci -am "chore(release): VERSION DATE```
+4. Build : ```npm run build```
+5. Publish :
 
-Are you looking for an example project to get started?
-[We host some](https://material-ui.com/getting-started/example-projects/).
+```sh
+cd build
+npm login
+# Username: hipay
+# Password: (voir avec la tribu PSYCHE)
+npm publish
+```
+
+#### [Semantic Versioning](https://semver.org/)
+
+Une version MAJOR.MINOR.PATCH, correspond a:
 
-## Documentation
+- MAJOR version introduisant des évolutions non retro-compatibles (API changes...),
+- MINOR version introduisant des évolutions retro-compatibles, la sortie des versions mineures est basé sur les sprints de la tribu PSYCHE
+- PATCH version corrigeant des bugs
+Des tags additionels peuvent être ajouter selon le contexte (ex: 1.0.0-beta.24).
 
-Check out our [documentation website](https://material-ui.com/).
+En production, chaque releases (MAJOR, MINOR & PATCH) doit faire l'objet d'une communication interne aux tribus utilisatrices.
 
-## Contributing
+Les projets peuvent se baser sur une version MINOR: ```^2.5.0```, ce qui signifient "compatible avec la version 2.5.0".
 
-We'd greatly appreciate any [contribution](/CONTRIBUTING.md) you make. :)
+Ainsi les PATCH seront automatiquement pris en compte.
+L'intégration d'une MINOR doit faire l'objet d'une recette (voir HI-CHANGELOG.md).
+Le passage à une autre MAJOR doit faire l'objet d'une recette (voir HI-CHANGELOG.md BREAKING CHANGE).
 
-## Changelog
+# Si ERR d'authentification
+npm adduser
+admin
+admin123
 
-Recently Updated?
-Please read the [changelog](https://github.com/mui-org/material-ui/releases).
+# pour le premier publish, modifier .npmrc
+vi ~/.npmrc
+# Mettre
+registry=http://jira-nexus.hipay-pos-platform.com:8081/repository/npm-private/
+_auth="YWRtaW46YWRtaW4xMjM="
+```
 
-## Roadmap
+## Troubleshooting
 
-The future plans and high priority features and enhancements can be found in the [ROADMAP.md](https://material-ui.com/discover-more/roadmap/) file.
+### Upgrade node :
+```sh
+sudo npm cache clean -f
+sudo npm install -g n
+sudo n stable
+```
 
-## Thanks
+### Lorsqu'on lance la commande pour générer les apis :
+Erreur : Cannot read property 'name' of undefined
+=> Une props est présente dans les défaultProps mais pas déclarée dans propTypes
 
-[<img src="https://www.browserstack.com/images/mail/browserstack-logo-footer.png" width="120">](https://www.browserstack.com/)
+### Lorsqu'on rajoute une page demo :
+**Cannot read property 'js' of undefined**
+=> dans le fichier markdown du dossier docs/src/pages/demos/[VOTRE-DEMO]/votre-demo.md, la demo pointe sur un fichier qui n'existe pas.
+Ou bien la demo n'existe pas dans le fichier js du dossier pages/demos/votre-demo.js
 
-Thank you to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers.
+**Cannot read property 'toLowerCase' of undefined**
+=> un composant qu'on importe n'est pas exporter. Vérifier le fichier index.js à la racine du dossier du composant en question dans src/
 
-## License
+**Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `SelectSuggestWithLabel`.**
+=> on importe mal un composant, par exemple
+```import { HiFormControl } from 'material-ui/Form';```
+au lieu de
+```import { HiFormControl } from 'hipay-material-ui/HiForm';```
 
-This project is licensed under the terms of the
-[MIT license](/LICENSE).
+### Problème d'import dans front-react
+Attention aux index.js.
+La bonne syntaxe est :
+export { default as MyComponente } from './MyComponente';

package/es/HiBreadcrumb/HiBreadcrumb.js

@@ -9,7 +9,9 @@ class HiBreadcrumb extends React.PureComponent {
     super(...args);
 
     this.handleStep = idx => () => {
-      this.props.handleStep(idx);
+      if (this.props.disableNavigation === false) {
+        this.props.handleStep(idx);
+      }
     };
   }
 
@@ -17,7 +19,8 @@ class HiBreadcrumb extends React.PureComponent {
     const {
       activeStep,
       steps,
-      type
+      type,
+      disableNavigation
     } = this.props;
     return React.createElement(HiStepper, {
       activeStep: activeStep,
@@ -37,7 +40,8 @@ class HiBreadcrumb extends React.PureComponent {
         active: activeStep === index,
         status: step.status,
         notificationNumber: step.notificationNumber,
-        type: type
+        type: type,
+        disableNavigation: disableNavigation
       }, step.label));
     })));
   }
@@ -46,7 +50,8 @@ class HiBreadcrumb extends React.PureComponent {
 
 HiBreadcrumb.defaultProps = {
   activeStep: 0,
-  type: 'back'
+  type: 'back',
+  disableNavigation: false
 };
 HiBreadcrumb.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
@@ -54,6 +59,11 @@ HiBreadcrumb.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   activeStep: PropTypes.number,
 
+  /**
+   * Disable navigation in steps
+   */
+  disableNavigation: PropTypes.bool,
+
   /**
    * The callback function handling the flow from one step to another
    */

package/es/HiBreadcrumb/HiStep.js

@@ -8,6 +8,9 @@ import HiStepContent from './HiStepContent';
 export const styles = () => ({
   lastStep: {
     marginBottom: 40
+  },
+  step: {
+    outline: 'none'
   }
 });
 
@@ -38,7 +41,7 @@ class HiStep extends React.PureComponent {
     return React.createElement("div", {
       role: "button",
       tabIndex: index,
-      className: classNames({
+      className: classNames(classes.step, {
         [classes.lastStep]: isLast && type !== 'back'
       }),
       onClick: onClick,

package/es/HiBreadcrumb/HiStepContent.js

@@ -12,7 +12,6 @@ export const styles = () => ({
   contentContainer: {
     height: 'fit-content',
     maxHeight: 300,
-    maxWidth: 323,
     marginTop: 35,
     marginLeft: 24,
     padding: 24,

package/es/HiBreadcrumb/HiStepLabel.js

@@ -30,11 +30,13 @@ export const styles = theme => ({
     marginLeft: 4,
     fontWeight: theme.typography.fontWeightRegular,
     color: theme.palette.neutral.main,
-    marginBottom: -4,
+    marginBottom: -4
+  }, theme.typography.b2),
+  labelHover: {
     '&:hover': {
       cursor: 'pointer'
     }
-  }, theme.typography.b2),
+  },
   labelContainer: {
     marginBottom: 4
   },
@@ -96,9 +98,10 @@ class HiStepLabel extends React.PureComponent {
       className: classNameProp,
       notificationNumber,
       status,
-      type
+      type,
+      disableNavigation
     } = _this$props,
-          other = _objectWithoutProperties(_this$props, ["active", "children", "classes", "className", "notificationNumber", "status", "type"]);
+          other = _objectWithoutProperties(_this$props, ["active", "children", "classes", "className", "notificationNumber", "status", "type", "disableNavigation"]);
 
     return React.createElement("span", _extends({
       className: classNames(classes.root, classNameProp, {
@@ -118,6 +121,7 @@ class HiStepLabel extends React.PureComponent {
       })
     }, React.createElement("div", {
       className: classNames(classes.label, {
+        [classes.labelHover]: disableNavigation === false,
         [classes.validated]: status === 'validated',
         [classes.refused]: status === 'refused',
         [classes.warning]: status === 'warning',
@@ -167,6 +171,11 @@ HiStepLabel.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   className: PropTypes.string,
 
+  /**
+   * Disable navigation in steps
+   */
+  disableNavigation: PropTypes.bool,
+
   /**
    * The value to be displayed in the HiPin on the right of the label
    */

package/es/HiBreadcrumb/HiStepper.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { withStyles } from '../styles';
 export const styles = () => ({
   root: {
-    width: 340
+    width: '100%'
   }
 });
 

package/es/HiButton/HiButton.js

@@ -62,6 +62,12 @@ export const styles = theme => ({
   },
 
   /* Styles applied to the root element if `variant="[contained | fab]"` and `color="positive"`. */
+  containedPrimary: {
+    '&$disabled': {
+      color: theme.palette.neutral.contrastText,
+      backgroundColor: theme.palette.neutral.main
+    }
+  },
   containedPositive: {
     color: theme.palette.positive.contrastText,
     backgroundColor: theme.palette.positive.main,
@@ -183,6 +189,7 @@ function HiButton(props) {
     [classes.flatNegative]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative',
     [classes.flatMiddle]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle',
     [classes.flatNeutral]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && (color === 'default' || color === 'neutral'),
+    [classes.containedPrimary]: (contained || fab) && color === 'primary',
     [classes.containedPositive]: (contained || fab) && color === 'positive',
     [classes.containedNegative]: (contained || fab) && color === 'negative',
     [classes.containedMiddle]: (contained || fab) && color === 'middle',

package/es/HiCell/CellIcon.js

@@ -36,10 +36,10 @@ class CellIcon extends React.PureComponent {
       className: classes.wrapper,
       title: label
     }, icon && React.createElement(HiIcon, {
-      color: "inherit",
+      color: 'inherit',
       style: {
-        color: color,
-        fontSize: size ? size : 24
+        color,
+        fontSize: size || 24
       },
       className: classes.icon,
       icon: icon
@@ -79,12 +79,12 @@ CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * View (L/M/S)
    */
-  view: PropTypes.oneOf(['l', 'm', 's']),
+  size: PropTypes.number,
 
   /**
    * Icon size
    */
-  size: PropTypes.number
+  view: PropTypes.oneOf(['l', 'm', 's'])
 } : {};
 export default withStyles(styles, {
   name: 'HmuiCellIcon'

package/es/HiCell/CellImage.js

@@ -41,7 +41,8 @@ class CellImage extends React.PureComponent {
       shortLabel,
       view,
       size,
-      fallbackImage
+      fallbackImage,
+      title
     } = this.props;
     if (!path || path === '') return '';
     return React.createElement("div", {
@@ -50,6 +51,7 @@ class CellImage extends React.PureComponent {
     }, React.createElement("img", {
       src: path,
       alt: label,
+      title: title,
       className: classes.img,
       width: size,
       onError: handleError(fallbackImage)
@@ -72,6 +74,11 @@ CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   classes: PropTypes.object,
 
+  /**
+   * Fallback image path
+   */
+  fallbackImage: PropTypes.string,
+
   /**
    * Label
    */
@@ -92,6 +99,11 @@ CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   size: PropTypes.number,
 
+  /**
+   * Title.
+   */
+  title: PropTypes.string,
+
   /**
    * View (L/M/S)
    */