@hipay/hipay-material-ui 1.0.0-beta.1

package/Progress/LinearProgress.js

@@ -0,0 +1,258 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = undefined;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _warning = require('warning');
+
+var _warning2 = _interopRequireDefault(_warning);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _colorManipulator = require('../styles/colorManipulator');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var TRANSITION_DURATION = 4; // 400ms
+
+var styles = exports.styles = function styles(theme) {
+  return {
+    root: {
+      position: 'relative',
+      overflow: 'hidden',
+      height: 5
+    },
+    colorPrimary: {
+      backgroundColor: (0, _colorManipulator.lighten)(theme.palette.primary.light, 0.6)
+    },
+    colorSecondary: {
+      backgroundColor: (0, _colorManipulator.lighten)(theme.palette.secondary.light, 0.4)
+    },
+    buffer: {
+      backgroundColor: 'transparent'
+    },
+    query: {
+      transform: 'rotate(180deg)'
+    },
+    dashed: {
+      position: 'absolute',
+      marginTop: 0,
+      height: '100%',
+      width: '100%',
+      animation: 'buffer 3s infinite linear'
+    },
+    dashedColorPrimary: {
+      backgroundImage: 'radial-gradient(' + (0, _colorManipulator.lighten)(theme.palette.primary.light, 0.6) + ' 0%, ' + (0, _colorManipulator.lighten)(theme.palette.primary.light, 0.6) + ' 16%, transparent 42%)',
+      backgroundSize: '10px 10px',
+      backgroundPosition: '0px -23px'
+    },
+    dashedColorSecondary: {
+      backgroundImage: 'radial-gradient(' + (0, _colorManipulator.lighten)(theme.palette.secondary.light, 0.4) + ' 0%, ' + (0, _colorManipulator.lighten)(theme.palette.secondary.light, 0.6) + ' 16%, transparent 42%)',
+      backgroundSize: '10px 10px',
+      backgroundPosition: '0px -23px'
+    },
+    bar: {
+      width: '100%',
+      position: 'absolute',
+      left: 0,
+      bottom: 0,
+      top: 0,
+      transition: 'transform 0.2s linear',
+      transformOrigin: 'left'
+    },
+    barColorPrimary: {
+      backgroundColor: theme.palette.primary.main
+    },
+    barColorSecondary: {
+      backgroundColor: theme.palette.secondary.main
+    },
+    bar1Indeterminate: {
+      width: 'auto',
+      willChange: 'left, right',
+      animation: 'mui-indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite'
+    },
+    bar2Indeterminate: {
+      width: 'auto',
+      willChange: 'left, right',
+      animation: 'mui-indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite',
+      animationDelay: '1.15s'
+    },
+    bar1Determinate: {
+      willChange: 'transform',
+      transition: 'transform .' + TRANSITION_DURATION + 's linear'
+    },
+    bar1Buffer: {
+      zIndex: 1,
+      transition: 'transform .' + TRANSITION_DURATION + 's linear'
+    },
+    bar2Buffer: {
+      transition: 'transform .' + TRANSITION_DURATION + 's linear'
+    },
+    // Legends:
+    // || represents the viewport
+    // -  represents a light background
+    // x  represents a dark background
+    '@keyframes mui-indeterminate1': {
+      //  |-----|---x-||-----||-----|
+      '0%': {
+        left: '-35%',
+        right: '100%'
+      },
+      //  |-----|-----||-----||xxxx-|
+      '60%': {
+        left: '100%',
+        right: '-90%'
+      },
+      '100%': {
+        left: '100%',
+        right: '-90%'
+      }
+    },
+    '@keyframes mui-indeterminate2': {
+      //  |xxxxx|xxxxx||-----||-----|
+      '0%': {
+        left: '-200%',
+        right: '100%'
+      },
+      //  |-----|-----||-----||-x----|
+      '60%': {
+        left: '107%',
+        right: '-8%'
+      },
+      '100%': {
+        left: '107%',
+        right: '-8%'
+      }
+    },
+    '@keyframes buffer': {
+      '0%': {
+        opacity: 1,
+        backgroundPosition: '0px -23px'
+      },
+      '50%': {
+        opacity: 0,
+        backgroundPosition: '0px -23px'
+      },
+      '100%': {
+        opacity: 1,
+        backgroundPosition: '-200px -23px'
+      }
+    }
+  };
+};
+
+/**
+ * ## ARIA
+ *
+ * If the progress bar is describing the loading progress of a particular region of a page,
+ * you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`
+ * attribute to `true` on that region until it has finished loading.
+ */
+function LinearProgress(props) {
+  var _classNames, _classNames2, _classNames3, _classNames4;
+
+  var classes = props.classes,
+      classNameProp = props.className,
+      color = props.color,
+      value = props.value,
+      valueBuffer = props.valueBuffer,
+      variant = props.variant,
+      other = (0, _objectWithoutProperties3.default)(props, ['classes', 'className', 'color', 'value', 'valueBuffer', 'variant']);
+
+
+  var className = (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.colorPrimary, color === 'primary'), (0, _defineProperty3.default)(_classNames, classes.colorSecondary, color === 'secondary'), (0, _defineProperty3.default)(_classNames, classes.buffer, variant === 'buffer'), (0, _defineProperty3.default)(_classNames, classes.query, variant === 'query'), _classNames), classNameProp);
+  var dashedClass = (0, _classnames2.default)(classes.dashed, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.dashedColorPrimary, color === 'primary'), (0, _defineProperty3.default)(_classNames2, classes.dashedColorSecondary, color === 'secondary'), _classNames2));
+  var bar1ClassName = (0, _classnames2.default)(classes.bar, (_classNames3 = {}, (0, _defineProperty3.default)(_classNames3, classes.barColorPrimary, color === 'primary'), (0, _defineProperty3.default)(_classNames3, classes.barColorSecondary, color === 'secondary'), (0, _defineProperty3.default)(_classNames3, classes.bar1Indeterminate, variant === 'indeterminate' || variant === 'query'), (0, _defineProperty3.default)(_classNames3, classes.bar1Determinate, variant === 'determinate'), (0, _defineProperty3.default)(_classNames3, classes.bar1Buffer, variant === 'buffer'), _classNames3));
+  var bar2ClassName = (0, _classnames2.default)(classes.bar, (_classNames4 = {}, (0, _defineProperty3.default)(_classNames4, classes.barColorPrimary, color === 'primary' && variant !== 'buffer'), (0, _defineProperty3.default)(_classNames4, classes.colorPrimary, color === 'primary' && variant === 'buffer'), (0, _defineProperty3.default)(_classNames4, classes.barColorSecondary, color === 'secondary' && variant !== 'buffer'), (0, _defineProperty3.default)(_classNames4, classes.colorSecondary, color === 'secondary' && variant === 'buffer'), (0, _defineProperty3.default)(_classNames4, classes.bar2Indeterminate, variant === 'indeterminate' || variant === 'query'), (0, _defineProperty3.default)(_classNames4, classes.bar2Buffer, variant === 'buffer'), _classNames4));
+  var rootProps = {};
+  var inlineStyles = { bar1: {}, bar2: {} };
+
+  if (variant === 'determinate' || variant === 'buffer') {
+    if (value !== undefined) {
+      rootProps['aria-valuenow'] = Math.round(value);
+      inlineStyles.bar1.transform = 'scaleX(' + value / 100 + ')';
+    } else {
+      process.env.NODE_ENV !== "production" ? (0, _warning2.default)(false, 'Material-UI: you need to provide a value property ' + 'when using the determinate or buffer variant of LinearProgress .') : void 0;
+    }
+  }
+  if (variant === 'buffer') {
+    if (valueBuffer !== undefined) {
+      inlineStyles.bar2.transform = 'scaleX(' + (valueBuffer || 0) / 100 + ')';
+    } else {
+      process.env.NODE_ENV !== "production" ? (0, _warning2.default)(false, 'Material-UI: you need to provide a valueBuffer property ' + 'when using the buffer variant of LinearProgress.') : void 0;
+    }
+  }
+
+  return _react2.default.createElement(
+    'div',
+    (0, _extends3.default)({ className: className, role: 'progressbar' }, rootProps, other),
+    variant === 'buffer' ? _react2.default.createElement('div', { className: dashedClass }) : null,
+    _react2.default.createElement('div', { className: bar1ClassName, style: inlineStyles.bar1 }),
+    variant === 'determinate' ? null : _react2.default.createElement('div', { className: bar2ClassName, style: inlineStyles.bar2 })
+  );
+}
+
+LinearProgress.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes2.default.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: _propTypes2.default.string,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: _propTypes2.default.oneOf(['primary', 'secondary']),
+  /**
+   * The value of the progress indicator for the determinate and buffer variants.
+   * Value between 0 and 100.
+   */
+  value: _propTypes2.default.number,
+  /**
+   * The value for the buffer variant.
+   * Value between 0 and 100.
+   */
+  valueBuffer: _propTypes2.default.number,
+  /**
+   * The variant of progress indicator. Use indeterminate or query
+   * when there is no progress value.
+   */
+  variant: _propTypes2.default.oneOf(['determinate', 'indeterminate', 'buffer', 'query'])
+} : {};
+
+LinearProgress.defaultProps = {
+  color: 'primary',
+  variant: 'indeterminate'
+};
+
+exports.default = (0, _withStyles2.default)(styles, { name: 'MuiLinearProgress' })(LinearProgress);

package/Progress/index.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _CircularProgress = require('./CircularProgress');
+
+Object.defineProperty(exports, 'CircularProgress', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_CircularProgress).default;
+  }
+});
+
+var _LinearProgress = require('./LinearProgress');
+
+Object.defineProperty(exports, 'LinearProgress', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_LinearProgress).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/README.md

@@ -0,0 +1,237 @@
+# Material-UI docs
+
+Voici la documentation du site HiPay Material-UI.
+
+Avant de commencer, il faut vous familiariser avec REACT :
+- https://reactjs.org/
+- https://reactjs.org/docs/optimizing-performance.html
+Et connaitres les [best practices](#best-practices)
+
+
+## Lancer le projet
+
+#### Via docker
+Il faut que sur votre poste soit installés
+- [Docker](https://www.docker.com/community-edition) (minimum version 17)
+- [Docker Compose](#https://docs.docker.com/compose/install/) (minimum version 1.13.0)
+
+Puis lancez les commandes
+```sh
+docker-compose build
+docker-compose up -d
+
+# En cas d'erreurs, vérifiez les logs
+docker-compose logs -f
+```
+Le site est dispo à cette URL:
+[http://localhost:3222](http://localhost:3222)
+
+#### 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 + push
+- Faire la demande de merge request sur la develop
+- La revue se fera par un membre de l'équipe PSYCHE
+
+## Génération des apis
+```sh
+npm run docs:api
+```
+
+## 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/)
+
+##### Jouer tous les tests
+```sh
+npm run test:unit
+```
+
+##### Jouer les tests sur un seul composant
+```sh
+yarn run mocha src/AdvancedTable/BodyCells/CellAccount.spec.js
+```
+
+#### 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)
+
+#### 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
+```
+
+## 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)
+
+#### Installer prettier en global
+```sh
+yarn global add prettier
+```
+
+#### Utilisation [voir doc](https://prettier.io/docs/en/cli.html)
+
+#### Vérifier le fichier de config utilisé
+```sh
+prettier --find-config-path src/HiForm/HiInput.js
+```
+
+#### Forcer le formatage d'un fichier
+```sh
+prettier --write src/HiForm/HiInput.js
+```
+
+## Publish
+Le projet est publié sur un repo privé npm : https://www.npmjs.com/package/@vdossantos/hipay-material-ui
+
+Le projet hipay-material-ui n'est plus stocké dans un répôt sur la docker machine dans Nexus
+http://jira-nexus.hipay-pos-platform.com:8081
+
+Aller dans [Browse > npm-private](http://jira-nexus.hipay-pos-platform.com:8081/#browse/browse:npm-private)
+Login: admin
+Mdp : admin123
+
+#### Publier une nouvelle version
+```sh
+npm run build
+
+# Changer la version dans la build/package.json
+
+cd build
+npm publish
+
+# Si ERR d'authenitifcation
+npm adduser
+admin
+admin123
+
+# pour le premier publish, modifier .npmrc
+vi ~/.npmrc
+# Mettre
+registry=http://jira-nexus.hipay-pos-platform.com:8081/repository/npm-private/
+_auth="YWRtaW46YWRtaW4xMjM="
+```
+
+## Troubleshooting
+
+### Upgrade node :
+```sh
+sudo npm cache clean -f
+sudo npm install -g n
+sudo n stable
+```
+
+### 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
+
+### 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
+
+**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/
+
+**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';```
+
+### Problème d'import dans front-react
+Attention aux index.js.
+La bonne syntaxe est :
+export { default as MyComponente } from './MyComponente';

package/Radio/Radio.js

@@ -0,0 +1,155 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = undefined;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _SwitchBase = require('../internal/SwitchBase');
+
+var _SwitchBase2 = _interopRequireDefault(_SwitchBase);
+
+var _RadioButtonChecked = require('../internal/svg-icons/RadioButtonChecked');
+
+var _RadioButtonChecked2 = _interopRequireDefault(_RadioButtonChecked);
+
+var _RadioButtonUnchecked = require('../internal/svg-icons/RadioButtonUnchecked');
+
+var _RadioButtonUnchecked2 = _interopRequireDefault(_RadioButtonUnchecked);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+  return {
+    default: {
+      color: theme.palette.text.secondary
+    },
+    checked: {},
+    checkedPrimary: {
+      color: theme.palette.primary.main
+    },
+    checkedSecondary: {
+      color: theme.palette.secondary.main
+    },
+    disabled: {
+      color: theme.palette.action.disabled
+    }
+  };
+};
+
+var _ref = _react2.default.createElement(_RadioButtonUnchecked2.default, null);
+
+var _ref2 = _react2.default.createElement(_RadioButtonChecked2.default, null);
+
+function Radio(props) {
+  var _classNames;
+
+  var classes = props.classes,
+      color = props.color,
+      other = (0, _objectWithoutProperties3.default)(props, ['classes', 'color']);
+
+  var checkedClass = (0, _classnames2.default)(classes.checked, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.checkedPrimary, color === 'primary'), (0, _defineProperty3.default)(_classNames, classes.checkedSecondary, color === 'secondary'), _classNames));
+
+  return _react2.default.createElement(_SwitchBase2.default, (0, _extends3.default)({
+    type: 'radio',
+    icon: _ref,
+    checkedIcon: _ref2,
+    classes: {
+      default: classes.default,
+      checked: checkedClass,
+      disabled: classes.disabled
+    }
+  }, other));
+}
+
+Radio.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * If `true`, the component is checked.
+   */
+  checked: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.string]),
+  /**
+   * The icon to display when the component is checked.
+   */
+  checkedIcon: _propTypes2.default.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes2.default.object.isRequired,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: _propTypes2.default.oneOf(['primary', 'secondary']),
+  /**
+   * If `true`, the switch will be disabled.
+   */
+  disabled: _propTypes2.default.bool,
+  /**
+   * If `true`, the ripple effect will be disabled.
+   */
+  disableRipple: _propTypes2.default.bool,
+  /**
+   * The icon to display when the component is unchecked.
+   */
+  icon: _propTypes2.default.node,
+  /**
+   * The id of the `input` element.
+   */
+  id: _propTypes2.default.string,
+  /**
+   * Properties applied to the `input` element.
+   */
+  inputProps: _propTypes2.default.object,
+  /**
+   * Use that property to pass a ref callback to the native input component.
+   */
+  inputRef: _propTypes2.default.func,
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback
+   * @param {boolean} checked The `checked` value of the switch
+   */
+  onChange: _propTypes2.default.func,
+  /**
+   * The input component property `type`.
+   */
+  type: _propTypes2.default.string,
+  /**
+   * The value of the component.
+   */
+  value: _propTypes2.default.string
+} : {};
+
+Radio.defaultProps = {
+  color: 'secondary'
+};
+
+exports.default = (0, _withStyles2.default)(styles, { name: 'MuiRadio' })(Radio);