module.exports = /* eslint-disable */ [{"name":"EyeIcon","description":"SVG Eye Icon","code":"import React from 'react';\r\n\r\n/** SVG Eye Icon */\r\nfunction EyeIcon() {\r\n  // Attribution: Fabián Alexis at https://commons.wikimedia.org/wiki/File:Antu_view-preview.svg\r\n  return (\r\n    <svg width=\"16\" height=\"16\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 22 22\">\r\n      <g transform=\"matrix(.02146 0 0 .02146 1 1)\" fill=\"#4d4d4d\">\r\n        <path d=\"m466.07 161.53c-205.6 0-382.8 121.2-464.2 296.1-2.5 5.3-2.5 11.5 0 16.9 81.4 174.9 258.6 296.1 464.2 296.1 205.6 0 382.8-121.2 464.2-296.1 2.5-5.3 2.5-11.5 0-16.9-81.4-174.9-258.6-296.1-464.2-296.1m0 514.7c-116.1 0-210.1-94.1-210.1-210.1 0-116.1 94.1-210.1 210.1-210.1 116.1 0 210.1 94.1 210.1 210.1 0 116-94.1 210.1-210.1 210.1\" />\r\n        <circle cx=\"466.08\" cy=\"466.02\" r=\"134.5\" />\r\n      </g>\r\n    </svg>\r\n  )\r\n}\r\n\r\nexport default EyeIcon;","examples":[{"name":"Example","description":"","code":"import React from 'react';\r\nimport EyeIcon from 'ps-react/EyeIcon';\r\n\r\nexport default function EyeIconExample() {\r\n  return <EyeIcon />;\r\n}"}]},{"name":"HelloWorld","description":"A super lame component that says Hello with a custom message.","props":{"message":{"type":{"name":"string"},"required":false,"description":"Message to display","defaultValue":{"value":"'World'","computed":false}}},"code":"import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\n/** A super lame component that says Hello with a custom message. */\r\nfunction HelloWorld({message}) {\r\n  return <div>Hello {message}</div>\r\n}\r\n\r\nHelloWorld.propTypes = {\r\n  /** Message to display */\r\n  message: PropTypes.string\r\n};\r\n\r\nHelloWorld.defaultProps = {\r\n  message: 'World'\r\n};\r\n\r\nexport default HelloWorld;","examples":[{"name":"ExampleHelloWorld","description":"Custom message","code":"import React from 'react';\r\nimport HelloWorld from 'ps-react/HelloWorld';\r\n\r\n/** Custom message */\r\nexport default function ExampleHelloWorld() {\r\n  return <HelloWorld message=\"Pluralsight viewers!\" />\r\n}"}]},{"name":"Label","description":"Label with required field display, htmlFor, and block styling","props":{"htmlFor":{"type":{"name":"string"},"required":true,"description":"HTML ID for associated input"},"label":{"type":{"name":"string"},"required":true,"description":"Label text"},"required":{"type":{"name":"bool"},"required":false,"description":"Display asterisk after label if true"}},"code":"import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\n/** Label with required field display, htmlFor, and block styling */\r\nfunction Label({htmlFor, label, required}) {\r\n  return (\r\n    <label style={{display: 'block'}} htmlFor={htmlFor}>\r\n      {label} { required && <span style={{color: 'red'}}> *</span> }\r\n    </label>\r\n  )\r\n}\r\n\r\nLabel.propTypes = {\r\n  /** HTML ID for associated input */\r\n  htmlFor: PropTypes.string.isRequired,\r\n\r\n  /** Label text */\r\n  label: PropTypes.string.isRequired,\r\n\r\n  /** Display asterisk after label if true */\r\n  required: PropTypes.bool\r\n};\r\n\r\nexport default Label;","examples":[{"name":"ExampleOptional","description":"Optional label","code":"import React from 'react';\r\nimport Label from 'ps-react/Label';\r\n\r\n/** Optional label */\r\nexport default function ExampleOptional() {\r\n  return <Label htmlFor=\"test\" label=\"test\" />\r\n}"},{"name":"ExampleRequired","description":"Required label","code":"import React from 'react';\r\nimport Label from 'ps-react/Label';\r\n\r\n/** Required label */\r\nexport default function ExampleRequired() {\r\n  return <Label htmlFor=\"test\" label=\"test\" required />\r\n}"}]},{"name":"PasswordInput","description":"Password input with integrated label, quality tips, and show password toggle.","props":{"htmlId":{"type":{"name":"string"},"required":true,"description":"Unique HTML ID. Used for tying label to HTML input. Handy hook for automated testing."},"name":{"type":{"name":"string"},"required":true,"description":"Input name. Recommend setting this to match object's property so a single change handler can be used by convention."},"value":{"type":{"name":"any"},"required":false,"description":"Password value"},"label":{"type":{"name":"string"},"required":false,"description":"Input label","defaultValue":{"value":"'Password'","computed":false}},"onChange":{"type":{"name":"func"},"required":true,"description":"Function called when password input value changes"},"maxLength":{"type":{"name":"number"},"required":false,"description":"Max password length accepted","defaultValue":{"value":"50","computed":false}},"placeholder":{"type":{"name":"string"},"required":false,"description":"Placeholder displayed when no password is entered"},"showVisibilityToggle":{"type":{"name":"bool"},"required":false,"description":"Set to true to show the toggle for displaying the currently entered password","defaultValue":{"value":"false","computed":false}},"quality":{"type":{"name":"number"},"required":false,"description":"Display password quality visually via ProgressBar, accepts a number between 0 and 100"},"error":{"type":{"name":"string"},"required":false,"description":"Validation error to display"}},"code":"import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport ProgressBar from '../ProgressBar';\r\nimport EyeIcon from '../EyeIcon';\r\nimport TextInput from '../TextInput';\r\n\r\n/** Password input with integrated label, quality tips, and show password toggle. */\r\nclass PasswordInput extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      showPassword: false\r\n    }\r\n  }\r\n\r\n  toggleShowPassword = event => {\r\n    this.setState(prevState => {\r\n      return { showPassword: !prevState.showPassword };\r\n    });\r\n    if (event) event.preventDefault();\r\n  }\r\n\r\n  render() {\r\n    const { htmlId, value, label, error, onChange, placeholder, maxLength, showVisibilityToggle, quality, ...props } = this.props;\r\n    const { showPassword } = this.state;\r\n\r\n    return (\r\n      <TextInput\r\n        htmlId={htmlId}\r\n        label={label}\r\n        placeholder={placeholder}\r\n        type={showPassword ? 'text' : 'password'}\r\n        onChange={onChange}\r\n        value={value}\r\n        maxLength={maxLength}\r\n        error={error}\r\n        required\r\n        {...props}>\r\n        {\r\n          showVisibilityToggle &&\r\n          <a\r\n            href=\"\"\r\n            onClick={this.toggleShowPassword}\r\n            style={{ marginLeft: 5 }}>\r\n            <EyeIcon />\r\n          </a>\r\n        }\r\n        {\r\n          value.length > 0 && quality && <ProgressBar percent={quality} width={130} />\r\n        }\r\n      </TextInput>\r\n    );\r\n  }\r\n}\r\n\r\nPasswordInput.propTypes = {\r\n  /** Unique HTML ID. Used for tying label to HTML input. Handy hook for automated testing. */\r\n  htmlId: PropTypes.string.isRequired,\r\n\r\n  /** Input name. Recommend setting this to match object's property so a single change handler can be used by convention.*/\r\n  name: PropTypes.string.isRequired,\r\n\r\n  /** Password value */\r\n  value: PropTypes.any,\r\n\r\n  /** Input label */\r\n  label: PropTypes.string,\r\n\r\n  /** Function called when password input value changes */\r\n  onChange: PropTypes.func.isRequired,\r\n\r\n  /** Max password length accepted */\r\n  maxLength: PropTypes.number,\r\n\r\n  /** Placeholder displayed when no password is entered */\r\n  placeholder: PropTypes.string,\r\n\r\n  /** Set to true to show the toggle for displaying the currently entered password */\r\n  showVisibilityToggle: PropTypes.bool,\r\n\r\n  /** Display password quality visually via ProgressBar, accepts a number between 0 and 100 */\r\n  quality: PropTypes.number,\r\n\r\n  /** Validation error to display */\r\n  error: PropTypes.string\r\n};\r\n\r\nPasswordInput.defaultProps = {\r\n  maxLength: 50,\r\n  showVisibilityToggle: false,\r\n  label: 'Password'\r\n};\r\n\r\nexport default PasswordInput;","examples":[{"name":"ExampleAllFeatures","description":"All features enabled","code":"import React from 'react';\r\nimport PasswordInput from 'ps-react/PasswordInput';\r\n\r\n/** All features enabled */\r\nclass ExampleAllFeatures extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n\r\n    this.state = {\r\n      password: ''\r\n    };\r\n  }\r\n\r\n  getQuality() {\r\n    const length = this.state.password.length;\r\n    return length > 10 ? 100 : length * 10;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div>\r\n        <PasswordInput\r\n          htmlId=\"password-input-example-all-features\"\r\n          name=\"password\"\r\n          onChange={ event => this.setState({ password: event.target.value })}\r\n          value={this.state.password}\r\n          minLength={8}\r\n          placeholder=\"Enter password\"\r\n          showVisibilityToggle\r\n          quality={this.getQuality()}\r\n          {...this.props} />\r\n      </div>\r\n    )\r\n  }\r\n}\r\n\r\nexport default ExampleAllFeatures;"}]},{"name":"ProgressBar","description":"","props":{"percent":{"type":{"name":"number"},"required":true,"description":"Percent of progress completed"},"width":{"type":{"name":"number"},"required":true,"description":"Bar width"},"height":{"type":{"name":"number"},"required":false,"description":"Bar height","defaultValue":{"value":"5","computed":false}}},"code":"import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nclass ProgressBar extends React.Component {\r\n  getColor = (percent) => {\r\n    if (this.props.percent === 100) return 'green';\r\n    return this.props.percent > 50 ? 'lightgreen' : 'red';\r\n  }\r\n\r\n  getWidthAsPercentOfTotalWidth = () => {\r\n    return parseInt(this.props.width * (this.props.percent / 100), 10);\r\n  }\r\n\r\n  render() {\r\n    const {percent, width, height} = this.props;\r\n    return (\r\n      <div style={{border: 'solid 1px lightgray', width: width}}>\r\n        <div style={{\r\n          width: this.getWidthAsPercentOfTotalWidth(),\r\n          height,\r\n          backgroundColor: this.getColor(percent)\r\n        }} />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\nProgressBar.propTypes = {\r\n  /** Percent of progress completed */\r\n  percent: PropTypes.number.isRequired,\r\n\r\n  /** Bar width */\r\n  width: PropTypes.number.isRequired,\r\n\r\n  /** Bar height */\r\n  height: PropTypes.number\r\n};\r\n\r\nProgressBar.defaultProps = {\r\n  height: 5\r\n};\r\n\r\nexport default ProgressBar;","examples":[{"name":"Example100Percent","description":"100% progress and height 20px","code":"import React from 'react';\r\nimport ProgressBar from 'ps-react/ProgressBar';\r\n\r\n/** 100% progress and height 20px */\r\nexport default function Example100Percent() {\r\n  return <ProgressBar percent={100} width={150} height={20} />\r\n}"},{"name":"Example10Percent","description":"10% progress","code":"import React from 'react';\r\nimport ProgressBar from 'ps-react/ProgressBar';\r\n\r\n/** 10% progress */\r\nexport default function Example10Percent() {\r\n  return <ProgressBar percent={10} width={150} />\r\n}"},{"name":"Example70Percent","description":"70% progress","code":"import React from 'react';\r\nimport ProgressBar from 'ps-react/ProgressBar';\r\n\r\n/** 70% progress */\r\nexport default function Example70Percent() {\r\n  return <ProgressBar percent={70} width={150} />\r\n}"}]},{"name":"RegistrationForm","description":"Registration form with built-in validation.","props":{"confirmationMessage":{"type":{"name":"string"},"required":false,"description":"Message displayed upon successful submission","defaultValue":{"value":"\"Thanks for registering!\"","computed":false}},"onSubmit":{"type":{"name":"func"},"required":true,"description":"Called when form is submitted"},"minPasswordLength":{"type":{"name":"number"},"required":false,"description":"Minimum password length","defaultValue":{"value":"8","computed":false}}},"code":"import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport TextInput from '../TextInput';\r\nimport PasswordInput from '../PasswordInput';\r\n\r\n/** Registration form with built-in validation. */\r\nclass RegistrationForm extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n\r\n    this.state = {\r\n      user: {\r\n        email: '',\r\n        password: ''\r\n      },\r\n      errors: {},\r\n      submitted: false,\r\n    };\r\n  }\r\n\r\n  onChange = (event) => {\r\n    const user = this.state.user;\r\n    user[event.target.name] = event.target.value;\r\n    this.setState({user});\r\n  }\r\n\r\n  // Returns a number from 0 to 100 that represents password quality.\r\n  // For simplicity, just returning % of min length entered.\r\n  // Could enhance with checks for number, special char, unique characters, etc.\r\n  passwordQuality(password) {\r\n    if (!password) return null;\r\n    if (password.length >= this.props.minPasswordLength) return 100;\r\n    const percentOfMinLength = parseInt(password.length/this.props.minPasswordLength * 100, 10);\r\n    return percentOfMinLength;\r\n  }\r\n\r\n  validate({email, password}) {\r\n    const errors = {};\r\n    const {minPasswordLength} = this.props;\r\n\r\n    if (!email) errors.email = 'Email required.';\r\n    if (password.length < minPasswordLength) errors.password = `Password must be at least ${minPasswordLength} characters.`;\r\n\r\n    this.setState({errors});\r\n    const formIsValid = Object.getOwnPropertyNames(errors).length === 0;\r\n    return formIsValid;\r\n  }\r\n\r\n  onSubmit = () => {\r\n    const {user} = this.state;\r\n    const formIsValid = this.validate(user);\r\n    if (formIsValid) {\r\n      this.props.onSubmit(user);\r\n      this.setState({submitted: true});\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const {errors, submitted} = this.state;\r\n    const {email, password} = this.state.user;\r\n\r\n    return (\r\n      submitted ?\r\n      <h2>{this.props.confirmationMessage}</h2> :\r\n      <div>\r\n        <TextInput\r\n          htmlId=\"registration-form-email\"\r\n          name=\"email\"\r\n          onChange={this.onChange}\r\n          label=\"Email\"\r\n          value={email}\r\n          error={errors.email}\r\n          required />\r\n\r\n        <PasswordInput\r\n          htmlId=\"registration-form-password\"\r\n          name=\"password\"\r\n          value={password}\r\n          onChange={this.onChange}\r\n          quality={this.passwordQuality(password)}\r\n          showVisibilityToggle\r\n          maxLength={50}\r\n          error={errors.password} />\r\n\r\n        <input type=\"submit\" value=\"Register\" onClick={this.onSubmit} />\r\n      </div>\r\n    )\r\n  }\r\n}\r\n\r\nRegistrationForm.propTypes = {\r\n  /** Message displayed upon successful submission */\r\n  confirmationMessage: PropTypes.string,\r\n\r\n  /** Called when form is submitted */\r\n  onSubmit: PropTypes.func.isRequired,\r\n\r\n  /** Minimum password length */\r\n  minPasswordLength: PropTypes.number\r\n}\r\n\r\nRegistrationForm.defaultProps = {\r\n  confirmationMessage: \"Thanks for registering!\",\r\n  minPasswordLength: 8\r\n};\r\n\r\nexport default RegistrationForm;","examples":[{"name":"ExampleRegistrationForm","description":"","code":"import React from 'react';\r\nimport RegistrationForm from 'ps-react/RegistrationForm';\r\n\r\nexport default class ExampleRegistrationForm extends React.Component {\r\n  onSubmit = (user) => {\r\n    console.log(user);\r\n  }\r\n\r\n  render() {\r\n    return <RegistrationForm onSubmit={this.onSubmit} />\r\n  }\r\n}"}]},{"name":"Switch","description":"Switch component","props":{"htmlId":{"type":{"name":"string"},"required":true,"description":"HTML ID for associated input"},"name":{"type":{"name":"string"},"required":false,"description":"Name"},"checked":{"type":{"name":"bool"},"required":false,"description":"Checked","defaultValue":{"value":"false","computed":false}},"disabled":{"type":{"name":"bool"},"required":false,"description":"Is control disabled","defaultValue":{"value":"false","computed":false}},"rounded":{"type":{"name":"bool"},"required":false,"description":"Is control rounded","defaultValue":{"value":"true","computed":false}},"onSwitch":{"type":{"name":"func"},"required":false,"description":"Function to call onSwitch"}},"code":"import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\n\r\n/** Switch component */\r\nconst Switch = props => {\r\n    const handleChange = e => {\r\n        const radio = e.target;\r\n        if (radio !== undefined) {\r\n            const value = radio.checked;\r\n            if (props.onSwitch !== undefined)\r\n                props.onSwitch(props.name, value);\r\n        }\r\n    };\r\n\r\n    const { htmlId, name, checked, disabled, rounded } = props;\r\n\r\n    return (\r\n        <label className=\"switch\">\r\n            <input id={htmlId} name={name} type=\"checkbox\" onChange={handleChange} disabled={disabled} checked={checked}></input>\r\n            <span className={classNames('slider', { 'round': rounded })}></span>\r\n        </label>\r\n    );\r\n};\r\n\r\nSwitch.propTypes = {\r\n    /** HTML ID for associated input */\r\n    htmlId: PropTypes.string.isRequired,\r\n\r\n    /** Name */\r\n    name: PropTypes.string,\r\n        \r\n    /** Checked */\r\n    checked: PropTypes.bool,\r\n    \r\n    /** Is control disabled */\r\n    disabled: PropTypes.bool,\r\n    \r\n    /** Is control rounded */\r\n    rounded: PropTypes.bool,\r\n\r\n    /** Function to call onSwitch */\r\n    onSwitch: PropTypes.func\r\n};\r\n\r\nSwitch.defaultProps = {\r\n    checked: false,\r\n    disabled: false,\r\n    rounded: true\r\n}\r\n\r\nexport default Switch;","examples":[{"name":"ExampleRoundedSwitch","description":"Rounded Switch","code":"import React from 'react';\r\nimport Switch from 'ps-react/Switch';\r\n\r\n/** Rounded Switch */\r\nexport default class ExampleRoundedSwitch extends React.Component {\r\n    constructor(props) {\r\n        super(props);\r\n\r\n        this.state = {\r\n            checked: true\r\n        };\r\n    }\r\n\r\n    onSwitch = (propsName, value) => {\r\n        debugger;\r\n        this.setState({ checked: value })\r\n    }\r\n\r\n    render() {\r\n        return (\r\n        <Switch\r\n            htmlId=\"example-switch\"\r\n            name=\"hasValue\"\r\n            checked={this.state.checked}\r\n            onSwitch={this.onSwitch}\r\n        />\r\n        )\r\n    }\r\n}"},{"name":"ExampleSwitch","description":"Switch","code":"import React from 'react';\r\nimport Switch from 'ps-react/Switch';\r\n\r\n/** Switch */\r\nexport default class ExampleSwitch extends React.Component {\r\n    constructor(props) {\r\n        super(props);\r\n\r\n        this.state = {\r\n            checked: false\r\n        };\r\n    }\r\n\r\n    onSwitch = (propsName, value) => {\r\n        debugger;\r\n        this.setState({ checked: value })\r\n    }\r\n\r\n    render() {\r\n        return (\r\n        <Switch\r\n            htmlId=\"example-switch\"\r\n            name=\"hasValue\"\r\n            checked={this.state.checked}\r\n            rounded={false}\r\n            onSwitch={this.onSwitch}\r\n        />\r\n        )\r\n    }\r\n}"}]},{"name":"TextInput","description":"Text input with integrated label to enforce consistency in layout, error display, label placement, and required field marker.","props":{"htmlId":{"type":{"name":"string"},"required":true,"description":"Unique HTML ID. Used for tying label to HTML input. Handy hook for automated testing."},"name":{"type":{"name":"string"},"required":true,"description":"Input name. Recommend setting this to match object's property so a single change handler can be used."},"label":{"type":{"name":"string"},"required":true,"description":"Input label"},"type":{"type":{"name":"enum","value":[{"value":"'text'","computed":false},{"value":"'number'","computed":false},{"value":"'password'","computed":false}]},"required":false,"description":"Input type","defaultValue":{"value":"\"text\"","computed":false}},"required":{"type":{"name":"bool"},"required":false,"description":"Mark label with asterisk if set to true","defaultValue":{"value":"false","computed":false}},"onChange":{"type":{"name":"func"},"required":true,"description":"Function to call onChange"},"placeholder":{"type":{"name":"string"},"required":false,"description":"Placeholder to display when empty"},"value":{"type":{"name":"any"},"required":false,"description":"Value"},"error":{"type":{"name":"string"},"required":false,"description":"String to display when error occurs"},"children":{"type":{"name":"node"},"required":false,"description":"Child component to display next to the input"}},"code":"import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Label from '../Label';\r\n\r\n/** Text input with integrated label to enforce consistency in layout, error display, label placement, and required field marker. */\r\nfunction TextInput({htmlId, name, label, type = \"text\", required = false, onChange, placeholder, value, error, children, ...props}) {\r\n  return (\r\n    <div style={{marginBottom: 16}}>\r\n      <Label htmlFor={htmlId} label={label} required={required} />\r\n      <input\r\n        id={htmlId}\r\n        type={type}\r\n        name={name}\r\n        placeholder={placeholder}\r\n        value={value}\r\n        onChange={onChange}\r\n        style={error && {border: 'solid 1px red'}}\r\n        {...props}/>\r\n        {children}\r\n      {error && <div className=\"error\" style={{color: 'red'}}>{error}</div>}\r\n    </div>\r\n  );\r\n};\r\n\r\nTextInput.propTypes = {\r\n  /** Unique HTML ID. Used for tying label to HTML input. Handy hook for automated testing. */\r\n  htmlId: PropTypes.string.isRequired,\r\n\r\n  /** Input name. Recommend setting this to match object's property so a single change handler can be used. */\r\n  name: PropTypes.string.isRequired,\r\n\r\n  /** Input label */\r\n  label: PropTypes.string.isRequired,\r\n\r\n  /** Input type */\r\n  type: PropTypes.oneOf(['text', 'number', 'password']),\r\n\r\n  /** Mark label with asterisk if set to true */\r\n  required: PropTypes.bool,\r\n\r\n  /** Function to call onChange */\r\n  onChange: PropTypes.func.isRequired,\r\n\r\n  /** Placeholder to display when empty */\r\n  placeholder: PropTypes.string,\r\n\r\n  /** Value */\r\n  value: PropTypes.any,\r\n\r\n  /** String to display when error occurs */\r\n  error: PropTypes.string,\r\n\r\n  /** Child component to display next to the input */\r\n  children: PropTypes.node\r\n};\r\n\r\nexport default TextInput;","examples":[{"name":"ExampleError","description":"Required TextBox with error","code":"import React from 'react';\r\nimport TextInput from 'ps-react/TextInput';\r\n\r\n/** Required TextBox with error */\r\nexport default class ExampleError extends React.Component {\r\n  render() {\r\n    return (\r\n      <TextInput\r\n        htmlId=\"example-optional\"\r\n        label=\"First Name\"\r\n        name=\"firstname\"\r\n        onChange={() => {}}\r\n        required\r\n        error=\"First name is required.\"\r\n       />\r\n    )\r\n  }\r\n}"},{"name":"ExampleOptional","description":"Optional TextBox","code":"import React from 'react';\r\nimport TextInput from 'ps-react/TextInput';\r\n\r\n/** Optional TextBox */\r\nexport default class ExampleOptional extends React.Component {\r\n  render() {\r\n    return (\r\n      <TextInput\r\n        htmlId=\"example-optional\"\r\n        label=\"First Name\"\r\n        name=\"firstname\"\r\n        onChange={() => {}}\r\n       />\r\n    )\r\n  }\r\n}"}]},{"name":"TextInputBEM","description":"Text input with integrated label to enforce consistency in layout, error display, label placement, and required field marker.","props":{"htmlId":{"type":{"name":"string"},"required":true,"description":"Unique HTML ID. Used for tying label to HTML input. Handy hook for automated testing."},"name":{"type":{"name":"string"},"required":true,"description":"Input name. Recommend setting this to match object's property so a single change handler can be used."},"label":{"type":{"name":"string"},"required":true,"description":"Input label"},"type":{"type":{"name":"enum","value":[{"value":"'text'","computed":false},{"value":"'number'","computed":false},{"value":"'password'","computed":false}]},"required":false,"description":"Input type","defaultValue":{"value":"\"text\"","computed":false}},"required":{"type":{"name":"bool"},"required":false,"description":"Mark label with asterisk if set to true","defaultValue":{"value":"false","computed":false}},"onChange":{"type":{"name":"func"},"required":true,"description":"Function to call onChange"},"placeholder":{"type":{"name":"string"},"required":false,"description":"Placeholder to display when empty"},"value":{"type":{"name":"any"},"required":false,"description":"Value"},"error":{"type":{"name":"string"},"required":false,"description":"String to display when error occurs"},"children":{"type":{"name":"node"},"required":false,"description":"Child component to display next to the input"}},"code":"import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Label from '../Label';\r\n\r\n/** Text input with integrated label to enforce consistency in layout, error display, label placement, and required field marker. */\r\nfunction TextInput({htmlId, name, label, type = \"text\", required = false, onChange, placeholder, value, error, children, ...props}) {\r\n  return (\r\n    <div className=\"textinput\">\r\n      <Label htmlFor={htmlId} label={label} required={required} />\r\n      <input\r\n        id={htmlId}\r\n        type={type}\r\n        name={name}\r\n        placeholder={placeholder}\r\n        value={value}\r\n        onChange={onChange}\r\n        className={error && 'textinput__input--state-error'}\r\n        {...props}/>\r\n        {children}\r\n      {error && <div className=\"textinput__error\">{error}</div>}\r\n    </div>\r\n  );\r\n};\r\n\r\nTextInput.propTypes = {\r\n  /** Unique HTML ID. Used for tying label to HTML input. Handy hook for automated testing. */\r\n  htmlId: PropTypes.string.isRequired,\r\n\r\n  /** Input name. Recommend setting this to match object's property so a single change handler can be used. */\r\n  name: PropTypes.string.isRequired,\r\n\r\n  /** Input label */\r\n  label: PropTypes.string.isRequired,\r\n\r\n  /** Input type */\r\n  type: PropTypes.oneOf(['text', 'number', 'password']),\r\n\r\n  /** Mark label with asterisk if set to true */\r\n  required: PropTypes.bool,\r\n\r\n  /** Function to call onChange */\r\n  onChange: PropTypes.func.isRequired,\r\n\r\n  /** Placeholder to display when empty */\r\n  placeholder: PropTypes.string,\r\n\r\n  /** Value */\r\n  value: PropTypes.any,\r\n\r\n  /** String to display when error occurs */\r\n  error: PropTypes.string,\r\n\r\n  /** Child component to display next to the input */\r\n  children: PropTypes.node\r\n};\r\n\r\nexport default TextInput;","examples":[{"name":"ExampleError","description":"Required TextBox with error","code":"import React from 'react';\r\nimport TextInputBEM from 'ps-react/TextInputBEM';\r\n\r\n/** Required TextBox with error */\r\nexport default class ExampleError extends React.Component {\r\n  render() {\r\n    return (\r\n      <TextInputBEM\r\n        htmlId=\"example-optional\"\r\n        label=\"First Name\"\r\n        name=\"firstname\"\r\n        onChange={() => {}}\r\n        required\r\n        error=\"First name is required.\"\r\n       />\r\n    )\r\n  }\r\n}"}]},{"name":"TextInputCSSModules","description":"Text input with integrated label to enforce consistency in layout, error display, label placement, and required field marker.","props":{"htmlId":{"type":{"name":"string"},"required":true,"description":"Unique HTML ID. Used for tying label to HTML input. Handy hook for automated testing."},"name":{"type":{"name":"string"},"required":true,"description":"Input name. Recommend setting this to match object's property so a single change handler can be used."},"label":{"type":{"name":"string"},"required":true,"description":"Input label"},"type":{"type":{"name":"enum","value":[{"value":"'text'","computed":false},{"value":"'number'","computed":false},{"value":"'password'","computed":false}]},"required":false,"description":"Input type","defaultValue":{"value":"\"text\"","computed":false}},"required":{"type":{"name":"bool"},"required":false,"description":"Mark label with asterisk if set to true","defaultValue":{"value":"false","computed":false}},"onChange":{"type":{"name":"func"},"required":true,"description":"Function to call onChange"},"placeholder":{"type":{"name":"string"},"required":false,"description":"Placeholder to display when empty"},"value":{"type":{"name":"any"},"required":false,"description":"Value"},"error":{"type":{"name":"string"},"required":false,"description":"String to display when error occurs"},"children":{"type":{"name":"node"},"required":false,"description":"Child component to display next to the input"}},"code":"import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Label from '../Label';\r\nimport styles from './textInput.css';\r\n\r\n/** Text input with integrated label to enforce consistency in layout, error display, label placement, and required field marker. */\r\nfunction TextInput({htmlId, name, label, type = \"text\", required = false, onChange, placeholder, value, error, children, ...props}) {\r\n  return (\r\n    <div className={styles.fieldset}>\r\n      <Label htmlFor={htmlId} label={label} required={required} />\r\n      <input\r\n        id={htmlId}\r\n        type={type}\r\n        name={name}\r\n        placeholder={placeholder}\r\n        value={value}\r\n        onChange={onChange}\r\n        className={error && styles.inputError}\r\n        {...props}/>\r\n        {children}\r\n      {error && <div className={styles.error}>{error}</div>}\r\n    </div>\r\n  );\r\n};\r\n\r\nTextInput.propTypes = {\r\n  /** Unique HTML ID. Used for tying label to HTML input. Handy hook for automated testing. */\r\n  htmlId: PropTypes.string.isRequired,\r\n\r\n  /** Input name. Recommend setting this to match object's property so a single change handler can be used. */\r\n  name: PropTypes.string.isRequired,\r\n\r\n  /** Input label */\r\n  label: PropTypes.string.isRequired,\r\n\r\n  /** Input type */\r\n  type: PropTypes.oneOf(['text', 'number', 'password']),\r\n\r\n  /** Mark label with asterisk if set to true */\r\n  required: PropTypes.bool,\r\n\r\n  /** Function to call onChange */\r\n  onChange: PropTypes.func.isRequired,\r\n\r\n  /** Placeholder to display when empty */\r\n  placeholder: PropTypes.string,\r\n\r\n  /** Value */\r\n  value: PropTypes.any,\r\n\r\n  /** String to display when error occurs */\r\n  error: PropTypes.string,\r\n\r\n  /** Child component to display next to the input */\r\n  children: PropTypes.node\r\n};\r\n\r\nexport default TextInput;","examples":[]},{"name":"TextInputStyledComponents","description":"Text input with integrated label to enforce consistency in layout, error display, label placement, and required field marker.","props":{"htmlId":{"type":{"name":"string"},"required":true,"description":"Unique HTML ID. Used for tying label to HTML input. Handy hook for automated testing."},"name":{"type":{"name":"string"},"required":true,"description":"Input name. Recommend setting this to match object's property so a single change handler can be used."},"label":{"type":{"name":"string"},"required":true,"description":"Input label"},"type":{"type":{"name":"enum","value":[{"value":"'text'","computed":false},{"value":"'number'","computed":false},{"value":"'password'","computed":false}]},"required":false,"description":"Input type","defaultValue":{"value":"\"text\"","computed":false}},"required":{"type":{"name":"bool"},"required":false,"description":"Mark label with asterisk if set to true","defaultValue":{"value":"false","computed":false}},"onChange":{"type":{"name":"func"},"required":true,"description":"Function to call onChange"},"placeholder":{"type":{"name":"string"},"required":false,"description":"Placeholder to display when empty"},"value":{"type":{"name":"any"},"required":false,"description":"Value"},"error":{"type":{"name":"string"},"required":false,"description":"String to display when error occurs"},"children":{"type":{"name":"node"},"required":false,"description":"Child component to display next to the input"}},"code":"import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Label from '../Label';\r\nimport styled from 'styled-components';\r\n\r\n/** Text input with integrated label to enforce consistency in layout, error display, label placement, and required field marker. */\r\nfunction TextInput({htmlId, name, label, type = \"text\", required = false, onChange, placeholder, value, error, children, ...props}) {\r\n  const Error = styled.div`\r\n    color: red;\r\n  `\r\n\r\n  const Input = styled.input`\r\n    border: ${error && 'solid 1px red'};\r\n    display: block;\r\n  `;\r\n\r\n  const Fieldset = styled.div`\r\n    margin-bottom: 16px;\r\n  `;\r\n\r\n  return (\r\n    <Fieldset>\r\n      <Label htmlFor={htmlId} label={label} required={required} />\r\n      <Input\r\n        id={htmlId}\r\n        type={type}\r\n        name={name}\r\n        placeholder={placeholder}\r\n        value={value}\r\n        onChange={onChange}\r\n        {...props}/>\r\n        {children}\r\n      {error && <Error>{error}</Error>}\r\n    </Fieldset>\r\n  );\r\n};\r\n\r\nTextInput.propTypes = {\r\n  /** Unique HTML ID. Used for tying label to HTML input. Handy hook for automated testing. */\r\n  htmlId: PropTypes.string.isRequired,\r\n\r\n  /** Input name. Recommend setting this to match object's property so a single change handler can be used. */\r\n  name: PropTypes.string.isRequired,\r\n\r\n  /** Input label */\r\n  label: PropTypes.string.isRequired,\r\n\r\n  /** Input type */\r\n  type: PropTypes.oneOf(['text', 'number', 'password']),\r\n\r\n  /** Mark label with asterisk if set to true */\r\n  required: PropTypes.bool,\r\n\r\n  /** Function to call onChange */\r\n  onChange: PropTypes.func.isRequired,\r\n\r\n  /** Placeholder to display when empty */\r\n  placeholder: PropTypes.string,\r\n\r\n  /** Value */\r\n  value: PropTypes.any,\r\n\r\n  /** String to display when error occurs */\r\n  error: PropTypes.string,\r\n\r\n  /** Child component to display next to the input */\r\n  children: PropTypes.node\r\n};\r\n\r\nexport default TextInput;","examples":[{"name":"ExampleError","description":"Required TextBox with error","code":"import React from 'react';\r\nimport TextInputStyledComponents from 'ps-react/TextInputStyledComponents';\r\n\r\n/** Required TextBox with error */\r\nexport default class ExampleError extends React.Component {\r\n  render() {\r\n    return (\r\n      <TextInputStyledComponents\r\n        htmlId=\"example-optional\"\r\n        label=\"First Name\"\r\n        name=\"firstname\"\r\n        onChange={() => {}}\r\n        required\r\n        error=\"First name is required.\"\r\n       />\r\n    )\r\n  }\r\n}"}]},{"name":"Toggle","description":"Toggle component","props":{"htmlId":{"type":{"name":"string"},"required":true,"description":"HTML ID for associated input"},"name":{"type":{"name":"string"},"required":false,"description":"Name"},"items":{"type":{"name":"array"},"required":true,"description":"Items"},"checked":{"type":{"name":"string"},"required":false,"description":"Checked"},"disabled":{"type":{"name":"bool"},"required":false,"description":"Is control disabled"},"onToggle":{"type":{"name":"func"},"required":false,"description":"Function to call onToggle"}},"code":"import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\n\r\n/** Toggle component */\r\nconst Toggle = props => {\r\n    const handleClick = e => {\r\n        const radio = e.target;\r\n        if (radio !== undefined) {\r\n            const value = radio.value;\r\n            if (props.onToggle !== undefined)\r\n                props.onToggle(props.name, value);\r\n        }\r\n    };\r\n\r\n    const { items, checked, disabled } = props;\r\n\r\n    const radioItems = items.map((item, i) => {\r\n        let value;\r\n        let label;\r\n\r\n        if (typeof item === 'string') {\r\n            value = item.toUpperCase();\r\n            label = value;\r\n        } else {\r\n            value = item.value.toUpperCase();\r\n            label = item.label.toUpperCase();\r\n        }\r\n\r\n        const isChecked = value === (checked ? checked.toUpperCase() : '');\r\n\r\n        return (\r\n            <label key={i} className={classNames('control-label', { active: isChecked, 'radio-toggle-indicator': isChecked })}>\r\n                <input type=\"radio\" onClick={handleClick} disabled={disabled} value={value} />\r\n                <span>{label}</span>\r\n            </label>\r\n        );\r\n    });\r\n\r\n    return (\r\n        <div className={classNames('radio-toggle', { disabled })}>\r\n            {radioItems}\r\n        </div>\r\n    );\r\n};\r\n\r\nToggle.propTypes = {\r\n    /** HTML ID for associated input */\r\n    htmlId: PropTypes.string.isRequired,\r\n\r\n    /** Name */\r\n    name: PropTypes.string,\r\n    \r\n    /** Items */\r\n    items: PropTypes.array.isRequired,\r\n    \r\n    /** Checked */\r\n    checked: PropTypes.string,\r\n    \r\n    /** Is control disabled */\r\n    disabled: PropTypes.bool,\r\n    \r\n    /** Function to call onToggle */\r\n    onToggle: PropTypes.func\r\n};\r\n\r\nexport default Toggle;","examples":[{"name":"ExampleToggle","description":"Optional TextBox","code":"import React from 'react';\r\nimport Toggle from 'ps-react/Toggle';\r\n\r\n/** Optional TextBox */\r\nexport default class ExampleToggle extends React.Component {\r\n    constructor(props) {\r\n        super(props);\r\n\r\n        this.state = {\r\n            checked: 'YES'\r\n        };\r\n    }\r\n\r\n    onToggle = (propsName, value) => {\r\n        this.setState({ checked: value })\r\n    }\r\n\r\n    render() {\r\n        return (\r\n        <Toggle\r\n            htmlId=\"example-toggle\"\r\n            name=\"hasValue\"\r\n            items={[ \"YES\", \"NO\" ]}\r\n            checked={this.state.checked}\r\n            onToggle={this.onToggle}\r\n        />\r\n        )\r\n    }\r\n}"}]}]