Add text statuses to toggle, hide popover from the outside

src/scripts/Popover.js

@@ -26,9 +26,9 @@ PopoverBody.propTypes = {
 export default class Popover extends React.Component {
   constructor(props) {
     super();
-
+    const hidden = props.hidden || props.defaultHidden;
     this.state = {
-      hidden: props.hidden,
+      hidden,
     };
 
     this.documentClick = this.documentClick.bind(this);
@@ -43,12 +43,16 @@ export default class Popover extends React.Component {
       document.addEventListener('click', this.documentClick);
     }
   }
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.hidden !== this.state.hidden) {
+      this.setState({ hidden: nextProps.hidden });
+    }
+  }
   componentWillUnmount() {
     if (this.props.trigger) {
       document.removeEventListener('click', this.documentClick);
     }
   }
-
   onMouseEnter() {
     this.isMouseEntered = true;
   }
@@ -126,6 +130,7 @@ const POPOVER_THEMES = ['info', 'success', 'warning', 'error'];
 Popover.propTypes = {
   position: PropTypes.oneOf(POPOVER_POSITIONS),
   hidden: PropTypes.bool,
+  defaultHidden: PropTypes.bool,
   theme: PropTypes.oneOf(POPOVER_THEMES),
   tooltip: PropTypes.bool,
   children: PropTypes.node,
@@ -136,5 +141,5 @@ Popover.propTypes = {
 };
 
 Popover.defaultProps = {
-  hidden: true,
+  defaultHidden: true,
 };

src/scripts/Toggle.js

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import FormElement from './FormElement';
 
 export default class Toggle extends Component {
-  renderToggle({ className, label, ...props }) {
+  renderToggle({ className, statusOn, statusOff, statusDisabled, disabled, label, ...props }) {
     const toggleClassNames = classnames(className, 'slds-checkbox--toggle slds-grid');
     return (
       <label className={ toggleClassNames }>
@@ -20,8 +20,8 @@ export default class Toggle extends Component {
           aria-live='assertive'
         >
           <span className='slds-checkbox--faux' />
-          <span className='slds-checkbox--on'>Enabled</span>
-          <span className='slds-checkbox--off'>Disabled</span>
+          <span className='slds-checkbox--on'>{!disabled && statusOn}</span>
+          <span className='slds-checkbox--off'>{disabled === true ? statusDisabled : statusOff}</span>
         </span>
       </label>
     );
@@ -56,4 +56,8 @@ Toggle.propTypes = {
   ]),
   checked: PropTypes.bool,
   defaultChecked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  statusOn: PropTypes.string,
+  statusOff: PropTypes.string,
+  statusDisabled: PropTypes.string,
 };

stories/ToggleStories.js

@@ -12,6 +12,9 @@ storiesOf('Toggle', module)
       checked={ boolean('checked') }
       disabled={ boolean('disabled') }
       onChange={ action('change') }
+      statusOn={ text('status on', 'Enabled')}
+      statusOff={ text('status Off', 'Disabled')}
+      statusDisabled={text('status disabled')}
     />
   ))
   .addWithInfo('Default', 'Toggle control', () => (