playbook_ui 3.1.0 → 3.2.0

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

@@ -1,13 +1,13 @@
 import React from 'react'
-import {Select} from '../../'
+import { Select } from '../../'
 
-function SelectValueTextSame() {
+const SelectValueTextSame = () => {
   return (
     <div>
       <Select
-        label='Favorite Sport'
-        name='sports'
-        options={[
+          label="Favorite Sport"
+          name="sports"
+          options={[
           {
             value: 'Football',
           },

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

@@ -1,8 +1,8 @@
-export {default as SelectDefault} from './_select_default.jsx';
-export {default as SelectDark} from './_select_dark.jsx';
-export {default as SelectBlank} from './_select_blank.jsx';
-export {default as SelectDisabledOptions} from './_select_disabled_options.jsx';
-export {default as SelectDisabled} from './_select_disabled.jsx';
-export {default as SelectRequired} from './_select_required.jsx';
-export {default as SelectCustomSelect} from './_select_custom_select.jsx';
-export {default as SelectValueTextSame} from './_select_value_text_same.jsx';
+export { default as SelectDefault } from './_select_default.jsx'
+export { default as SelectDark } from './_select_dark.jsx'
+export { default as SelectBlank } from './_select_blank.jsx'
+export { default as SelectDisabledOptions } from './_select_disabled_options.jsx'
+export { default as SelectDisabled } from './_select_disabled.jsx'
+export { default as SelectRequired } from './_select_required.jsx'
+export { default as SelectCustomSelect } from './_select_custom_select.jsx'
+export { default as SelectValueTextSame } from './_select_value_text_same.jsx'

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx

@@ -1,15 +1,15 @@
+/* @flow */
+
 import React from 'react'
 import classnames from 'classnames'
 import { Icon } from '../'
 
-import type {
-  InputCallback
-} from "../types"
+import { type InputCallback } from '../types'
 
 import {
   buildAriaProps,
-  buildDataProps,
   buildCss,
+  buildDataProps,
   noop,
 } from '../utilities/props'
 
@@ -29,7 +29,7 @@ type Props = {
   onChange: InputCallback,
   text?: String,
   value?: String
-};
+}
 
 const SelectableCard = ({
   aria = {},
@@ -40,7 +40,6 @@ const SelectableCard = ({
   data = {},
   disabled = false,
   icon = false,
-  id = null,
   inputId = null,
   multi = true,
   name,
@@ -51,7 +50,7 @@ const SelectableCard = ({
 }: Props) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  
+
   const css = buildCss({
     'pb_selectable_card_kit': true,
     'checked': checked,
@@ -61,37 +60,43 @@ const SelectableCard = ({
   })
 
   const displayIcon = () => {
-    if(icon === true) {
+    if (icon === true) {
       return (
         <div className="pb_selectable_card_circle">
-          <Icon icon="check" fixedWidth/>
+          <Icon
+              fixedWidth
+              icon="check"
+          />
         </div>
       )
     }
   }
 
-  const inputType = multi === false ? "radio" : "checkbox"
+  const inputType = multi === false ? 'radio' : 'checkbox'
 
   const inputIdPresent = inputId !== null ? inputId : name
 
-
   return (
-    <div {...ariaProps} {...dataProps} className={classnames(css, className)}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classnames(css, className)}
+    >
       <input
           {...props}
-          name={name}
-          value={value}
-          id={inputIdPresent}
-          type={inputType}
           checked={checked}
           disabled={disabled}
+          id={inputIdPresent}
+          name={name}
           onChange={onChange}
+          type={inputType}
+          value={value}
       />
       <label htmlFor={inputIdPresent}>
         { text || children }
         {displayIcon()}
       </label>
     </div>
-  );
-};
-export default SelectableCard;
+  )
+}
+export default SelectableCard

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_block.jsx

@@ -1,48 +1,52 @@
-import React from "react"
+import React from 'react'
 import {
   Body,
   SelectableCard,
-  Title
-} from "../../"
+  Title,
+} from '../../'
 
 class SelectableCardBlock extends React.Component {
   state = {
     block: true,
-    tag: false
+    tag: false,
   }
 
-  handleSelect = event => {
+  handleSelect = (event) => {
     this.setState({
-      [event.target.id]: event.target.checked
+      [event.target.id]: event.target.checked,
     })
   }
 
   render() {
     return (
-      <div class="pb--doc-demo-row">
+      <div className="pb--doc-demo-row">
 
         <SelectableCard
+            checked={this.state.block}
             inputId="block"
             name="block"
+            onChange={this.handleSelect}
             value="block"
-            checked={this.state.block}
-            onChange={this.handleSelect}>
-          <Title text="Block" size={4} />
-          <Body tag="span">This uses block</Body>
+        >
+          <Title
+              size={4}
+              text="Block"
+          />
+          <Body tag="span">{'This uses block'}</Body>
         </SelectableCard>
 
         <SelectableCard
+            checked={this.state.tag}
             inputId="tag"
             name="tag"
-            value="tag"
-            checked={this.state.tag}
             onChange={this.handleSelect}
-            text="This passes text through the tag">
-        </SelectableCard>
+            text="This passes text through the tag"
+            value="tag"
+        />
 
       </div>
     )
   }
 }
 
-export default SelectableCardBlock;
+export default SelectableCardBlock

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_dark.jsx

@@ -1,62 +1,66 @@
-import React from "react"
-import SelectableCard from "../_selectable_card.jsx"
+import React from 'react'
+import SelectableCard from '../_selectable_card.jsx'
 
 class SelectableCardDark extends React.Component {
   state = {
-    selected_with_icon_dark: true,
-    selected_without_icon_dark: true,
-    unselected_dark: false
+    selectedWithIconDark: true,
+    selectedWithoutIconDark: true,
+    unselectedDark: false,
   }
 
-  handleSelect = event => {
+  handleSelect = (event) => {
     this.setState({
-      [event.target.id]: event.target.checked
+      [event.target.id]: event.target.checked,
     })
   }
 
   render() {
     return (
-      <div class="pb--doc-demo-row">
+      <div className="pb--doc-demo-row">
 
         <SelectableCard
+            checked={this.state.selectedWithIconDark}
             dark
-            inputId="selected_with_icon_dark"
-            name="selected_with_icon_dark"
-            value="selected_with_icon_dark"
-            icon={true}
-            checked={this.state.selected_with_icon_dark}
-            onChange={this.handleSelect}>
+            icon
+            inputId="selectedWithIconDark"
+            name="selectedWithIconDark"
+            onChange={this.handleSelect}
+            value="selectedWithIconDark"
+        >
           {'Selected, with icon'}
         </SelectableCard>
 
         <SelectableCard
+            checked={this.state.selectedWithoutIconDark}
             dark
-            inputId="selected_without_icon_dark"
-            name="selected_without_icon_dark"
-            value="selected_without_icon_dark"
             icon={false}
-            checked={this.state.selected_without_icon_dark}
-            onChange={this.handleSelect}>
+            inputId="selectedWithoutIconDark"
+            name="selectedWithoutIconDark"
+            onChange={this.handleSelect}
+            value="selectedWithoutIconDark"
+        >
           {'Selected, without icon'}
         </SelectableCard>
 
         <SelectableCard
+            checked={this.state.unselectedDark}
             dark
-            inputId="unselected_dark"
-            name="unselected_dark"
-            value="unselected_dark"
-            checked={this.state.unselected_dark}
-            onChange={this.handleSelect}>
+            inputId="unselectedDark"
+            name="unselectedDark"
+            onChange={this.handleSelect}
+            value="unselectedDark"
+        >
           {'Unselected'}
         </SelectableCard>
 
         <SelectableCard
             dark
+            disabled
             inputId="disabled_dark"
             name="disabled_dark"
+            onChange={this.handleSelect}
             value="disabled_dark"
-            disabled={true}
-            onChange={this.handleSelect}>
+        >
           {'Unselected'}
         </SelectableCard>
 
@@ -65,4 +69,4 @@ class SelectableCardDark extends React.Component {
   }
 }
 
-export default SelectableCardDark;
+export default SelectableCardDark

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.jsx

@@ -1,62 +1,64 @@
-import React from "react"
-import SelectableCard from "../_selectable_card.jsx"
-import Icon from "../../pb_icon/_icon.jsx"
-
+import React from 'react'
+import SelectableCard from '../_selectable_card.jsx'
 
 class SelectableCardDefault extends React.Component {
   state = {
-    selected_with_icon: true,
-    selected_without_icon: true,
-    unselected: false
+    selectedWithIcon: true,
+    selectedWithoutIcon: true,
+    unselected: false,
   }
 
-  handleSelect = event => {
+  handleSelect = (event) => {
     this.setState({
-      [event.target.id]: event.target.checked
+      [event.target.id]: event.target.checked,
     })
   }
 
   render() {
     return (
-      <div class="pb--doc-demo-row">
+      <div className="pb--doc-demo-row">
 
         <SelectableCard
-            inputId="selected_with_icon"
-            name="selected_with_icon"
-            value="selected_with_icon"
-            icon={true}
-            checked={this.state.selected_with_icon}
-            onChange={this.handleSelect}>
-          {`Selected, with icon`}
+            checked={this.state.selectedWithIcon}
+            icon
+            inputId="selectedWithIcon"
+            name="selectedWithIcon"
+            onChange={this.handleSelect}
+            value="selectedWithIcon"
+        >
+          {'Selected, with icon'}
         </SelectableCard>
 
         <SelectableCard
-            inputId="selected_without_icon"
-            name="selected_without_icon"
-            value="selected_without_icon"
+            checked={this.state.selectedWithoutIcon}
             icon={false}
-            checked={this.state.selected_without_icon}
-            onChange={this.handleSelect}>
-          {`Selected, without icon`}
+            inputId="selectedWithoutIcon"
+            name="selectedWithoutIcon"
+            onChange={this.handleSelect}
+            value="selectedWithoutIcon"
+        >
+          {'Selected, without icon'}
         </SelectableCard>
 
         <SelectableCard
+            checked={this.state.unselected}
             inputId="unselected"
             name="unselected"
+            onChange={this.handleSelect}
             value="unselected"
-            checked={this.state.unselected}
-            onChange={this.handleSelect}>
-          {`Unselected`}
+        >
+          {'Unselected'}
         </SelectableCard>
 
         <SelectableCard
+            checked={this.state.disabled}
+            disabled
             inputId="disabled"
             name="disabled"
+            onChange={this.handleSelect}
             value="disabled"
-            disabled={true}
-            checked={this.state.disabled}
-            onChange={this.handleSelect}>
-          {`Disabled`}
+        >
+          {'Disabled'}
         </SelectableCard>
 
       </div>
@@ -64,4 +66,4 @@ class SelectableCardDefault extends React.Component {
   }
 }
 
-export default SelectableCardDefault;
+export default SelectableCardDefault

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.jsx

@@ -1,54 +1,57 @@
-import React from "react";
-import SelectableCard from "../_selectable_card.jsx";
+import React from 'react'
+import SelectableCard from '../_selectable_card.jsx'
 
 class SelectableCardSingleSelect extends React.Component {
   state = {
-    selected: null
+    selected: null,
   }
 
-  handleSelect = event => {
+  handleSelect = (event) => {
     this.setState({
-      selected: event.target.value
+      selected: event.target.value,
     })
   }
 
   render() {
     return (
-      <div class="pb--doc-demo-row">
+      <div className="pb--doc-demo-row">
 
         <SelectableCard
+            checked={this.state.selected === 'male'}
             inputId="male1"
+            multi={false}
             name="gender"
+            onChange={this.handleSelect.bind(this)}
             value="male"
-            multi={false}
-            checked={this.state.selected === 'male'}
-            onChange={this.handleSelect.bind(this)}>
-          {`Male`}
+        >
+          {'Male'}
         </SelectableCard>
 
         <SelectableCard
+            checked={this.state.selected === 'female'}
             inputId="female1"
+            multi={false}
             name="gender"
+            onChange={this.handleSelect.bind(this)}
             value="female"
-            multi={false}
-            checked={this.state.selected === 'female'}
-            onChange={this.handleSelect.bind(this)}>
-          {`Female`}
+        >
+          {'Female'}
         </SelectableCard>
 
         <SelectableCard
+            checked={this.state.selected === 'other'}
             inputId="other1"
+            multi={false}
             name="gender"
+            onChange={this.handleSelect.bind(this)}
             value="other"
-            multi={false}
-            checked={this.state.selected === 'other'}
-            onChange={this.handleSelect.bind(this)}>
-          {`Other`}
+        >
+          {'Other'}
         </SelectableCard>
-        
+
       </div>
-    );
+    )
   }
 }
 
-export default SelectableCardSingleSelect;
+export default SelectableCardSingleSelect