playbook_ui 6.1.0 → 7.0.0.pre.alpha2

data/app/pb_kits/playbook/pb_table/_table_row.jsx

@@ -1,23 +1,41 @@
 /* @flow */
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type TableRowPropTypes = {
-  children: Array<React.ReactNode> | React.ReactNode,
-  className: String,
-  sideHighlightColor: String,
+  aria?: object,
+  children: array<React.ReactNode> | React.ReactNode,
+  className: string,
+  data?: object,
+  id?: string,
+  sideHighlightColor: string,
 }
 
 const TableRow = (props: TableRowPropTypes) => {
-  const { children, className, sideHighlightColor = 'windows' } = props
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    id,
+    sideHighlightColor = 'windows',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const sideHighlightClass =
     sideHighlightColor != '' ? `side_highlight_${sideHighlightColor}` : null
-  const tableRowCss = buildCss('pb_table_row_kit', sideHighlightClass)
+  const classes = classnames(buildCss('pb_table_row_kit', sideHighlightClass), globalProps(props), className)
 
   return (
-    <tr className={classnames(tableRowCss, className, globalProps(props))}>
+    <tr
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       {children}
     </tr>
   )

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

@@ -12,8 +12,6 @@ module Playbook
                   default: "md"
       prop :single_line, type: Playbook::Props::Boolean,
                          default: false
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
       prop :disable_hover, type: Playbook::Props::Boolean,
                            default: false
       prop :data_table, type: Playbook::Props::Boolean,
@@ -35,9 +33,9 @@ module Playbook
 
     private
 
-      def dark_class
-        dark ? "dark" : nil
-      end
+      def dark_class	
+        dark ? "table-dark" : nil	
+      end	
 
       def data_table_class
         data_table ? "data_table" : nil

data/app/pb_kits/playbook/pb_text_input/_text_input.html.erb

@@ -16,6 +16,7 @@
       <%= tag(:input,
           class: "text_input",
           data: object.validation_data,
+          disabled: object.disabled,
           id: object.id,
           name: object.name,
           pattern: object.validation_pattern,

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

@@ -11,31 +11,33 @@ import {
 
 type TextInputProps = {
   aria?: object,
-  className: String,
-  dark: boolean,
+  className: string,
   data?: object,
-  error?: String,
-  id?: String,
-  name: String,
-  label: String,
+  disabled?: boolean,
+  error?: string,
+  id?: string,
+  name: string,
+  label: string,
   onChange: (String) => void,
-  placeholder: String,
-  type: String,
-  value: String | number,
+  placeholder: string,
+  required?: boolean,
+  type: string,
+  value: string | number,
   children: Node,
 }
 
 const TextInput = ({
   aria = {},
   className,
-  dark = false,
   data = {},
+  disabled,
   error,
   id,
   name,
   label,
   onChange = () => {},
   placeholder,
+  required,
   type = 'text',
   value,
   children = null,
@@ -44,9 +46,10 @@ const TextInput = ({
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames([
-    `pb_text_input_kit${dark === true ? '_dark' : ''}`,
+    'pb_text_input_kit',
     className,
     error ? 'error' : null,
+    globalProps(props),
   ])
 
   return (
@@ -57,26 +60,26 @@ const TextInput = ({
     >
       <Caption
           className="pb_text_input_kit_label"
-          dark={dark}
           text={label}
       />
-      <div className={classnames('text_input_wrapper', globalProps(props))}>
+      <div className="text_input_wrapper">
         <If condition={children}>
           {children}
           <Else />
           <input
               {...props}
               className="text_input"
+              disabled={disabled}
               id={id}
               name={name}
               onChange={onChange}
               placeholder={placeholder}
+              required={required}
               type={type}
               value={value}
           />
           <If condition={error}>
             <Body
-                dark={dark}
                 status="negative"
                 text={error}
             />

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

@@ -17,7 +17,7 @@
       @include pb_body_light;
     }
 
-    > input:first-child {
+    input {
       @include pb_textarea_light;
       @include pb_title_4;
       overflow: hidden;
@@ -30,7 +30,7 @@
     }
   }
 
-  &[class*=_dark] {
+  &.dark {
     .text_input_wrapper {
       margin-bottom: 1rem;
 
@@ -38,7 +38,7 @@
         @include pb_body_light_dark;
       }
 
-      > input:first-child {
+      input {
         @include pb_textarea_dark;
         @include pb_title_4;
         @include pb_title_dark;
@@ -54,7 +54,7 @@
 
     &.error {
       .text_input_wrapper {
-        > input:first-child {
+        input {
           border-color: $error_dark;
         }
       }
@@ -66,7 +66,7 @@
       [class*=pb_body_kit] {
         margin-top: $space_xs / 2;
       }
-      > input:first-child {
+      input {
         border-color: $error;
       }
     }

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter last name", disabled: true }) %>

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import { TextInput } from '../../'
+
+class TextInputDisabled extends React.Component {
+  render() {
+    return (
+      <div>
+        <TextInput
+            disabled
+            label="Last Name"
+            placeholder="Enter last name"
+        />
+      </div>
+    )
+  }
+}
+
+export default TextInputDisabled

data/app/pb_kits/playbook/pb_text_input/docs/example.yml

@@ -5,10 +5,12 @@ examples:
   - text_input_error: With Error
   - text_input_dark_error: Dark With Error
   - text_input_custom: Custom
+  - text_input_disabled: Disabled
   react:
   - text_input_default: Default
   - text_input_dark: Dark
   - text_input_error: With Error
   - text_input_dark_error: Dark With Error
   - text_input_custom: Custom
+  - text_input_disabled: Disabled
 

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

@@ -3,3 +3,4 @@ export { default as TextInputDark } from './_text_input_dark.jsx'
 export { default as TextInputDarkError } from './_text_input_dark_error.jsx'
 export { default as TextInputCustom } from './_text_input_custom.jsx'
 export { default as TextInputError } from './_text_input_error.jsx'
+export { default as TextInputDisabled } from './_text_input_disabled.jsx'

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -7,8 +7,6 @@ module Playbook
 
       partial "pb_text_input/text_input"
 
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
       prop :error
@@ -23,7 +21,7 @@ module Playbook
       prop :value
 
       def classname
-        generate_classname("pb_text_input_kit", dark_class) + error_class
+        generate_classname("pb_text_input_kit") + error_class
       end
 
       def validation_message
@@ -45,10 +43,6 @@ module Playbook
       def error_class
         error ? " error" : ""
       end
-
-      def dark_class
-        dark ? "dark" : nil
-      end
     end
   end
 end

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

@@ -7,19 +7,20 @@ import type { InputCallback } from '../types.js'
 import { globalProps } from '../utilities/globalProps.js'
 
 type TextareaProps = {
-  className?: String,
-  children?: Array<React.ReactChild>,
-  data?: String,
-  error?: String,
-  id?: String,
-  object?: String,
-  method?: String,
-  label?: String,
-  placeholder?: String,
-  value?: String,
-  name?: String,
-  rows?: Number,
-  dark?: Boolean,
+  className?: string,
+  children?: array<React.ReactChild>,
+  data?: string,
+  disabled?: boolean,
+  error?: string,
+  id?: string,
+  object?: string,
+  method?: string,
+  label?: string,
+  placeholder?: string,
+  value?: string,
+  name?: string,
+  required?: boolean,
+  rows?: number,
   resize: 'none' | 'both' | 'horizontal' | 'vertical',
   onChange?: InputCallback<HTMLTextAreaElement>,
 }
@@ -27,25 +28,25 @@ type TextareaProps = {
 const Textarea = ({
   className,
   children,
-  dark = false,
+  disabled,
   resize = 'none',
   error,
   label,
   name,
   onChange = () => {},
   placeholder,
+  required,
   rows = 4,
   value,
   ...props
 }: TextareaProps) => {
-  const textareaClass = `pb_textarea_kit${dark ? '_dark' : ''}`
   const errorClass = error ? 'error' : null
-  const resizeClass = ` resize_${resize}`
+  const resizeClass = `resize_${resize}`
+  const classes = classnames('pb_textarea_kit', className, errorClass, resizeClass, globalProps(props))
 
   return (
-    <div className={classnames(textareaClass, className, errorClass, resizeClass, globalProps(props))}>
+    <div className={classes}>
       <Caption
-          dark={dark}
           text={label}
       />
       <If condition={children}>
@@ -53,16 +54,17 @@ const Textarea = ({
         <Else />
         <textarea
             {...props}
-            className={textareaClass}
+            className="pb_textarea_kit"
+            disabled={disabled}
             name={name}
             onChange={onChange}
             placeholder={placeholder}
+            required={required}
             rows={rows}
             value={value}
         />
         <If condition={error}>
           <Body
-              dark={dark}
               status="negative"
               text={error}
           />

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

@@ -40,9 +40,7 @@
     overflow: auto;
   }
 
-
-
-  &[class*=_dark] {
+  &.dark {
     textarea::placeholder {
       @include pb_body_light_dark;
     }

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

@@ -27,7 +27,6 @@ const TextareaDark = () => {
           placeholder="Placeholder text"
           value="Default value text"
       />
-
     </div>
   )
 }

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

@@ -12,7 +12,6 @@ const TextareaDarkError = () => {
           placeholder="Placeholder text"
           value="Default value text"
       />
-
     </div>
   )
 }

data/app/pb_kits/playbook/pb_textarea/textarea.rb

@@ -7,8 +7,6 @@ module Playbook
 
       partial "pb_textarea/textarea"
 
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
       prop :error
       prop :object
       prop :label
@@ -23,15 +21,11 @@ module Playbook
       prop :value
 
       def classname
-        generate_classname("pb_textarea_kit", dark_class) + error_class + resize_class
+        generate_classname("pb_textarea_kit") + error_class + resize_class
       end
 
     private
 
-      def dark_class
-        dark ? "dark" : nil
-      end
-
       def error_class
         error ? " error" : ""
       end

data/app/pb_kits/playbook/pb_time/_time.jsx

@@ -10,24 +10,24 @@ import { globalProps } from '../utilities/globalProps.js'
 import { Body, Icon, Title  } from '../'
 
 type TimeProps = {
-  align?: 'left" | "center' | 'right',
-  className?: String | Array<String>,
-  data?: String,
-  date: String,
-  id?: String,
-  showTimezone?: Boolean,
+  align?: 'left' | 'center' | 'right',
+  className?: string | array<string>,
+  data?: string,
+  date: string,
+  id?: string,
   size?: 'lg' | 'sm' | 'xs',
+  timeZone?: string,
 }
 
 const Time = (props: TimeProps) => {
-  const { align, className, date, showTimezone, size } = props
+  const { align, className, date, size, timeZone } = props
   const classes = classnames(
     className,
     buildCss('pb_time_kit', align, size),
     globalProps(props)
   )
 
-  const dateTimestamp = new DateTime({ value: date })
+  const dateTimestamp = new DateTime({ value: date, zone: timeZone })
 
   return (
     <div className={classes}>
@@ -53,7 +53,9 @@ const Time = (props: TimeProps) => {
                   text={dateTimestamp.toTimeWithMeridian()}
               />
             </If>
-            { showTimezone && <span className="pb_time_timezone">{dateTimestamp.toTimezone()}</span> }
+            <If condition={timeZone !== undefined}>
+              <span className="pb_time_timezone">{dateTimestamp.toTimezone()}</span>
+            </If>
           </span>
         </time>
       </span>