playbook_ui 3.1.0 → 3.2.0

data/app/pb_kits/playbook/pb_progress_pills/docs/index.js

@@ -1,3 +1,3 @@
-export {default as ProgressPillsDefault} from './_progress_pills_default.jsx';
-export {default as ProgressPillsStatus} from './_progress_pills_status.jsx';
-export {default as ProgressPillsDark} from './_progress_pills_dark.jsx';
+export { default as ProgressPillsDefault } from './_progress_pills_default.jsx'
+export { default as ProgressPillsStatus } from './_progress_pills_status.jsx'
+export { default as ProgressPillsDark } from './_progress_pills_dark.jsx'

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx

@@ -1,21 +1,21 @@
-import React from 'react';
-import PropTypes from "prop-types";
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const propTypes = {
   className: PropTypes.string,
-  id: PropTypes.string
-};
+  id: PropTypes.string,
+}
 
 class ProgressSimple extends React.Component {
   render() {
     return (
       <div className="pb_progress_simple">
-        <span>PROGRESS SIMPLE CONTENT</span>
+        <span>{'PROGRESS SIMPLE CONTENT'}</span>
       </div>
     )
   }
 }
 
-ProgressSimple.propTypes = propTypes;
+ProgressSimple.propTypes = propTypes
 
-export default ProgressSimple;
+export default ProgressSimple

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_default.jsx

@@ -1,10 +1,9 @@
-import React from "react"
-import {ProgressSimple} from "../../"
+import React from 'react'
 
-function ProgressSimpleDefault() {
+const ProgressSimpleDefault = () => {
   return (
-    <h1>{`Coming Soon...`}</h1>
+    <h1>{'Coming Soon...'}</h1>
   )
 }
 
-export default ProgressSimpleDefault;
+export default ProgressSimpleDefault

data/app/pb_kits/playbook/pb_progress_simple/docs/index.js

@@ -1 +1 @@
-export {default as ProgressSimpleDefault} from './_progress_simple_default.jsx';
+export { default as ProgressSimpleDefault } from './_progress_simple_default.jsx'

data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx

@@ -7,22 +7,23 @@ import Caption from '../pb_caption/_caption.jsx'
 type SectionSeparatorProps = {
   className: String,
   text: String,
-  variant?: 'card' | 'background'
-};
+  variant?: 'card' | 'background',
+}
 
 const SectionSeparator = ({
   className,
   text,
-  variant = 'card'
+  variant = 'card',
 }: SectionSeparatorProps) => {
-
   const css = classnames([`pb_section_separator_kit_${variant}`, className])
 
-  return (<div className={css}>
-    <span>
-      <Caption text={text}/>
-    </span>
-  </div>)
+  return (
+    <div className={css}>
+      <span>
+        <Caption text={text} />
+      </span>
+    </div>
+  )
 }
 
 export default SectionSeparator

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx

@@ -1,9 +1,9 @@
-import React from "react"
-import {SectionSeparator} from "../../"
+import React from 'react'
+import { SectionSeparator } from '../../'
 
-function SectionSeparatorLine() {
+const SectionSeparatorLine = () => {
   return (
-    <SectionSeparator/>
+    <SectionSeparator />
   )
 }
 

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx

@@ -1,9 +1,9 @@
-import React from "react"
-import {SectionSeparator} from "../../"
+import React from 'react'
+import { SectionSeparator } from '../../'
 
-function SectionSeparatorText() {
+const SectionSeparatorText = () => {
   return (
-    <SectionSeparator text="Title Separator"/>
+    <SectionSeparator text="Title Separator" />
   )
 }
 

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.jsx

@@ -1,9 +1,10 @@
-import React from "react"
-import {SectionSeparator} from "../../"
+import React from 'react'
+import { SectionSeparator } from '../../'
 
-function SectionSeparatorTextBackground() {
+const SectionSeparatorTextBackground = () => {
   return (
-    <SectionSeparator text="Title Separator"
+    <SectionSeparator
+        text="Title Separator"
         variant="background"
     />
   )

data/app/pb_kits/playbook/pb_section_separator/docs/index.js

@@ -1,3 +1,3 @@
-export {default as SectionSeparatorLine} from './_section_separator_line.jsx'
-export {default as SectionSeparatorText} from './_section_separator_text.jsx'
-export {default as SectionSeparatorTextBackground} from './_section_separator_text_background.jsx'
+export { default as SectionSeparatorLine } from './_section_separator_line.jsx'
+export { default as SectionSeparatorText } from './_section_separator_text.jsx'
+export { default as SectionSeparatorTextBackground } from './_section_separator_text_background.jsx'

data/app/pb_kits/playbook/pb_select/_select.jsx

@@ -1,18 +1,16 @@
 /* @flow */
-/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
 import React from 'react'
-import classnames from 'classnames'
 
 import {
   Caption,
   Icon,
-} from "../"
+} from '../'
 
 import {
   buildAriaProps,
-  buildDataProps,
   buildCss,
+  buildDataProps,
 } from '../utilities/props'
 
 type SelectProps = {
@@ -34,36 +32,33 @@ type SelectProps = {
   multiple?: Boolean,
 }
 
-
-const optionsArray = ({options=[]}: SelectProps) => {
+const optionsArray = ({ options = [] }: SelectProps) => {
   return options.map((optionObject, index) => {
     return (
       <option
-        value={optionObject.value}
-        selected={optionObject.selected}
-        disabled={optionObject.disabled}
-      >{optionObject.valueText || optionObject.value}</option>
-    );
+          disabled={optionObject.disabled}
+          key={index}
+          selected={optionObject.selected}
+          value={optionObject.value}
+      >
+        {optionObject.valueText || optionObject.value}
+      </option>
+    )
   })
 }
 
-const Select = ( props: SelectProps) => {
-
+const Select = (props: SelectProps) => {
   const {
-    className,
     children,
     label,
-    value,
-    dark=false,
+    dark = false,
     name,
-    id,
     options,
-    includeBlank,
     blankSelection,
-    required=false,
-    disabled=false,
-    multiple=false,
-    onChange=() => {},
+    required = false,
+    disabled = false,
+    multiple = false,
+    onChange = () => {},
     aria = {},
     data = {},
   } = props
@@ -74,37 +69,54 @@ const Select = ( props: SelectProps) => {
   })
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const optionsList = optionsArray({options})
+  const optionsList = optionsArray({ options })
 
   return (
-    <div {...ariaProps} {...dataProps} className={css}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={css}
+    >
       <If condition={label}>
-        <label className='pb_select_kit_label' htmlFor={name}>
-          <Caption text={label} dark={dark}/>
+        <label
+            className="pb_select_kit_label"
+            htmlFor={name}
+        >
+          <Caption
+              dark={dark}
+              text={label}
+          />
         </label>
       </If>
-      <label className='pb_select_kit_wrapper' htmlFor={name}>
+      <label
+          className="pb_select_kit_wrapper"
+          htmlFor={name}
+      >
         <If condition={children}>
           {children}
-        <Else/>
+          <Else />
           <select
-            name={name}
-            id={name}
-            disabled={disabled}
-            required={required}
-            multiple={multiple}
-            onChange={onChange}>
+              disabled={disabled}
+              id={name}
+              multiple={multiple}
+              name={name}
+              onChange={onChange}
+              required={required}
+          >
             <If condition={blankSelection}>
               <option value="">{blankSelection}</option>
             </If>
             {optionsList}
           </select>
         </If>
-        <Icon icon="angle-down" className='pb_select_kit_caret' fixedWidth />
+        <Icon
+            className="pb_select_kit_caret"
+            fixedWidth
+            icon="angle-down"
+        />
       </label>
     </div>
   )
 }
 
-
 export default Select

data/app/pb_kits/playbook/pb_select/docs/_select_blank.jsx

@@ -1,14 +1,14 @@
 import React from 'react'
-import {Select} from '../../'
+import { Select } from '../../'
 
-function SelectBlank() {
+const SelectBlank = () => {
   return (
     <div>
       <Select
-        label='Where do you live'
-        name='location'
-        blankSelection='Select One...'
-        options={[
+          blankSelection="Select One..."
+          label="Where do you live"
+          name="location"
+          options={[
           {
             value: 'USA',
           },

data/app/pb_kits/playbook/pb_select/docs/_select_custom_select.jsx

@@ -1,15 +1,18 @@
 import React from 'react'
-import {Select} from '../../'
+import { Select } from '../../'
 
-function SelectCustomSelect() {
+const SelectCustomSelect = () => {
   return (
     <div>
-      <Select label='Favorite Holiday'>
-        <select name="holiday" id="holiday">
-          <option value="1">Christmas</option>
-          <option value="2">Thanksgiving</option>
-          <option value="3">Halloween</option>
-          <option value="4">Fourth of July</option>
+      <Select label="Favorite Holiday">
+        <select
+            id="holiday"
+            name="holiday"
+        >
+          <option value="1">{'Christmas'}</option>
+          <option value="2">{'Thanksgiving'}</option>
+          <option value="3">{'Halloween'}</option>
+          <option value="4">{'Fourth of July'}</option>
         </select>
       </Select>
     </div>

data/app/pb_kits/playbook/pb_select/docs/_select_dark.jsx

@@ -1,14 +1,14 @@
 import React from 'react'
-import {Select} from '../../'
+import { Select } from '../../'
 
-function SelectDark() {
+const SelectDark = () => {
   return (
     <div>
       <Select
-        label='Favorite Food'
-        name='food'
-        dark
-        options={[
+          dark
+          label="Favorite Food"
+          name="food"
+          options={[
           {
             value: '1',
             valueText: 'Burgers',

data/app/pb_kits/playbook/pb_select/docs/_select_default.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
-import {Select} from '../../'
+import { Select } from '../../'
 
-function SelectDefault() {
+const SelectDefault = () => {
   return (
     <div>
       <Select
-        label='Favorite Food'
-        name='food'
-        options={[
+          label="Favorite Food"
+          name="food"
+          options={[
           {
             value: '1',
             valueText: 'Burgers',

data/app/pb_kits/playbook/pb_select/docs/_select_disabled.jsx

@@ -1,14 +1,14 @@
 import React from 'react'
-import {Select} from '../../'
+import { Select } from '../../'
 
-function SelectDisabled() {
+const SelectDisabled = () => {
   return (
     <div>
       <Select
-        label='Favorite Dessert'
-        disabled
-        name='dessert'
-        options={[
+          disabled
+          label="Favorite Dessert"
+          name="dessert"
+          options={[
           {
             value: 'Apple Pie',
           },

data/app/pb_kits/playbook/pb_select/docs/_select_disabled_options.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
-import {Select} from '../../'
+import { Select } from '../../'
 
-function SelectDisabledOptions() {
+const SelectDisabledOptions = () => {
   return (
     <div>
       <Select
-        label='Favorite Coffee'
-        name='coffee'
-        options={[
+          label="Favorite Coffee"
+          name="coffee"
+          options={[
           {
             value: '1',
             disabled: true,

data/app/pb_kits/playbook/pb_select/docs/_select_required.jsx

@@ -1,15 +1,14 @@
 import React from 'react'
-import {Select} from '../../'
+import { Select } from '../../'
 
-function SelectRequired() {
+const SelectRequired = () => {
   return (
     <div>
       <Select
-        label='Which shoe do you tie first?'
-        required
-        name='shoe'
-        blankSelection='Select One...'
-        options={[
+          blankSelection="Select One..."
+          label="Which shoe do you tie first?"
+          name="shoe"
+          options={[
           {
             value: 'Left',
           },
@@ -20,6 +19,7 @@ function SelectRequired() {
             value: 'I go without laces',
           },
         ]}
+          required
       />
     </div>
   )