playbook_ui 3.1.0 → 3.2.0

data/app/pb_kits/playbook/pb_table/styles/_table-card.scss

@@ -4,6 +4,7 @@
   &.table-lg {
     &.table-card {
       border-collapse: separate;
+      border-spacing: 0;
       background: $white;
 
       thead {

data/app/pb_kits/playbook/pb_table/table.rb

@@ -16,6 +16,8 @@ module Playbook
                   default: false
       prop :disable_hover, type: Playbook::Props::Boolean,
                            default: false
+      prop :data_table, type: Playbook::Props::Boolean,
+                  default: false
       prop :container, type: Playbook::Props::Boolean,
                        default: true
       prop :text
@@ -23,7 +25,7 @@ module Playbook
       def classname
         generate_classname(
           "pb_table", "table-#{size}", single_line_class, dark_class,
-          disable_hover_class, container_class, separator: " "
+          disable_hover_class, container_class, data_table_class, separator: " "
         )
       end
 
@@ -33,6 +35,10 @@ module Playbook
         dark ? "dark" : nil
       end
 
+      def data_table_class
+        data_table ? "data_table" : nil
+      end
+
       def single_line_class
         single_line ? "single-line" : nil
       end

data/app/pb_kits/playbook/pb_text_input/_text_input.jsx

@@ -1,65 +1,53 @@
 /* @flow */
 
 import React from 'react'
-import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import {Caption} from '../'
-
-const propTypes = {
-  className: PropTypes.string,
-  dark: PropTypes.bool,
-  name: PropTypes.string,
-  label: PropTypes.string,
-  onChange: PropTypes.func,
-  placeholder: PropTypes.string,
-  type: PropTypes.string,
-  value: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number
-  ])
-}
-
-const defaultProps = {
-  onChange: () => {},
-  type: 'text'
+import { Caption } from '../'
+
+type TextInputProps = {
+  className: string,
+  dark: boolean,
+  name: string,
+  label: string,
+  onChange: (string) => void,
+  placeholder: string,
+  type: string,
+  value: string | number,
 }
 
-class TextInput extends React.Component {
-  render() {
-    const {
-      className,
-      dark,
-      name,
-      label,
-      onChange = () => {},
-      placeholder,
-      type,
-      value
-    } = this.props
-
-    const css = classnames([
-      `pb_text_input_kit${dark === true ? '_dark' : ''}`,
-      className,
-    ])
+const TextInput = ({
+  className,
+  dark,
+  name,
+  label,
+  onChange = () => {},
+  placeholder,
+  type = 'text',
+  value,
+}: TextInputProps) => {
+  const css = classnames([
+    `pb_text_input_kit${dark === true ? '_dark' : ''}`,
+    className,
+  ])
 
-    return (
-      <div className={css}>
-        <Caption text={label} dark={dark} />
-        <div className='text_input_wrapper'>
-          <input className='text_input'
-              name={name}
-              onChange={onChange}
-              placeholder={placeholder}
-              type={type}
-              value={value}
-          />
-        </div>
+  return (
+    <div className={css}>
+      <Caption
+          dark={dark}
+          text={label}
+      />
+      <div className="text_input_wrapper">
+        <input
+            className="text_input"
+            name={name}
+            onChange={onChange}
+            placeholder={placeholder}
+            type={type}
+            value={value}
+        />
       </div>
-    )
-  }
+    </div>
+  )
 }
 
-TextInput.propTypes = propTypes
-TextInput.defaultProps = defaultProps
-
 export default TextInput

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -18,7 +18,6 @@
     > input:first-child {
       @include pb_textarea_light;
       overflow: hidden;
-      padding: $space_xs $space_sm;
     }
 
     input:focus {
@@ -37,7 +36,6 @@
       > input:first-child {
         @include pb_textarea_dark;
         overflow: hidden;
-        padding: $space_xs $space_sm;
       }
 
       input:focus {

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_dark.jsx

@@ -1,78 +1,78 @@
-import React from "react"
+import React from 'react'
 import {
   Caption,
   TextInput,
   Title,
-} from "../../"
+} from '../../'
 
 class TextInputDark extends React.Component {
     state = {
-      firstName: ""
+      firstName: '',
     }
 
     render() {
-        const handleOnChange = ({target}) => this.setState({firstName: target.value})
+      const handleOnChange = ({ target }) => this.setState({ firstName: target.value })
 
-        const {
-          firstName,
-        } = this.state
+      const {
+        firstName,
+      } = this.state
 
-        return (
-            <div>
-                <TextInput
-                    label="First Name" 
-                    placeholder="Enter first name" 
-                    value="Timothy Wenhold" 
-                    dark
-                />
-                <TextInput
-                    label="Last Name" 
-                    placeholder="Enter last name" 
-                    dark  
-                />
-                <TextInput
-                    label="Phone Number"
-                    placeholder="Enter phone number"
-                    type="phone"
-                    dark
-                />
-                <TextInput
-                    label="Email Address"
-                    placeholder="Enter email address"
-                    type="email"
-                    dark
-                />
-                <TextInput
-                    label="Zip Code"
-                    placeholder="Enter zip code"
-                    type="number"
-                    dark
-                />
+      return (
+        <div>
+          <TextInput
+              dark
+              label="First Name"
+              placeholder="Enter first name"
+              value="Timothy Wenhold"
+          />
+          <TextInput
+              dark
+              label="Last Name"
+              placeholder="Enter last name"
+          />
+          <TextInput
+              dark
+              label="Phone Number"
+              placeholder="Enter phone number"
+              type="phone"
+          />
+          <TextInput
+              dark
+              label="Email Address"
+              placeholder="Enter email address"
+              type="email"
+          />
+          <TextInput
+              dark
+              label="Zip Code"
+              placeholder="Enter zip code"
+              type="number"
+          />
 
-                <br/>
-                <br/>
+          <br />
+          <br />
 
-                <Title dark>{`Event Handler Props`}</Title>
+          <Title dark>{'Event Handler Props'}</Title>
 
-                <br/>
-                <Caption>{`onChange`}</Caption>
+          <br />
+          <Caption>{'onChange'}</Caption>
 
-                <br/>
+          <br />
 
-                <TextInput
-                    label="First Name"
-                    onChange={handleOnChange}
-                    placeholder="Enter first name"
-                    value={firstName}
-                    dark
-                />
+          <TextInput
+              dark
+              label="First Name"
+              onChange={handleOnChange}
+              placeholder="Enter first name"
+              value={firstName}
+          />
 
-                <If condition={firstName !== ""}>
-                {`First name is: ${firstName}`}
-                </If>
-            </div>
-        )
+          <If condition={firstName !== ''}>
+            {`First name is: ${firstName}`}
+          </If>
+        </div>
+      )
     }
 }
-  
+
 export default TextInputDark

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -1,17 +1,17 @@
-import React from "react"
+import React from 'react'
 import {
   Caption,
   TextInput,
   Title,
-} from "../../"
+} from '../../'
 
 class TextInputDefault extends React.Component {
   state = {
-    firstName: ""
+    firstName: '',
   }
 
   render() {
-    const handleOnChange = ({target}) => this.setState({firstName: target.value})
+    const handleOnChange = ({ target }) => this.setState({ firstName: target.value })
 
     const {
       firstName,
@@ -44,15 +44,15 @@ class TextInputDefault extends React.Component {
             type="number"
         />
 
-        <br/>
-        <br/>
+        <br />
+        <br />
 
-        <Title>{`Event Handler Props`}</Title>
+        <Title>{'Event Handler Props'}</Title>
 
-        <br/>
-        <Caption>{`onChange`}</Caption>
+        <br />
+        <Caption>{'onChange'}</Caption>
 
-        <br/>
+        <br />
 
         <TextInput
             label="First Name"
@@ -61,7 +61,7 @@ class TextInputDefault extends React.Component {
             value={firstName}
         />
 
-        <If condition={firstName !== ""}>
+        <If condition={firstName !== ''}>
           {`First name is: ${firstName}`}
         </If>
       </div>

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

@@ -1,2 +1,2 @@
-export {default as TextInputDefault} from './_text_input_default.jsx';
-export {default as TextInputDark} from './_text_input_dark.jsx';
+export { default as TextInputDefault } from './_text_input_default.jsx'
+export { default as TextInputDark } from './_text_input_dark.jsx'

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx

@@ -1,7 +1,9 @@
+/* @flow */
+
 import React from 'react'
 import classnames from 'classnames'
-import { Caption } from "../"
-import { InputCallback } from '../types.js'
+import { Caption } from '../'
+import { type InputCallback } from '../types.js'
 
 type TextareaProps = {
   className?: String,
@@ -16,45 +18,38 @@ type TextareaProps = {
   name?: String,
   rows?: Number,
   dark?: Boolean,
-  onChange?: InputCallback
+  onChange?: InputCallback,
 }
 
-const textareaCSS =({
-    dark=false,
+const Textarea = ({
+  className,
+  children,
+  label,
+  onChange = () => {},
+  placeholder,
+  value,
+  dark = false,
+  rows = 4,
+  name,
 }: TextareaProps) => {
-  const themeStyle = dark === true ? '_dark' : ''
-  return 'pb_textarea_kit' + themeStyle
-}
-
-const Textarea = ( props: TextareaProps) => {
-
-  const {
-    className,
-    children,
-    label,
-    placeholder,
-    value,
-    dark=false,
-    rows=4,
-    name,
-    onChange = () => {}
-  } = props
+  const textareaClass = `pb_textarea_kit${dark ? '_dark' : ''}`
 
-  const textarea_input = `${textareaCSS(props)}`
-  
   return (
-    <div className={classnames(textareaCSS(props), className)}>
-      <Caption text={label} dark={dark}/>
+    <div className={classnames(textareaClass, className)}>
+      <Caption
+          dark={dark}
+          text={label}
+      />
       <If condition={children}>
         {children}
-      <Else/>
-        <textarea 
-          className={textarea_input} 
-          name={name} 
-          onChange={onChange} 
-          placeholder={placeholder} 
-          rows={rows} 
-          value={value} 
+        <Else />
+        <textarea
+            className={textareaClass}
+            name={name}
+            onChange={onChange}
+            placeholder={placeholder}
+            rows={rows}
+            value={value}
         />
       </If>
     </div>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.jsx

@@ -1,13 +1,17 @@
-import React from "react"
-import {Textarea} from "../../"
+import React from 'react'
+import { Textarea } from '../../'
 
-function TextareaCustom() {
+const TextareaCustom = () => {
   return (
     <div>
       <Textarea label="Label">
-          <textarea class="my_custom_class" name="custom_textarea" rows={4}>
-            {`Content goes here.`} 
-          </textarea>
+        <textarea
+            className="my_custom_class"
+            name="custom_textarea"
+            rows={4}
+        >
+          {'Content goes here.'}
+        </textarea>
       </Textarea>
     </div>
   )