playbook_ui 6.2.0 → 7.0.0.pre.alpha3

data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx

@@ -5,19 +5,21 @@ const RadioDefault = () => {
   return (
     <div>
       <Radio
+          defaultChecked
           label="Power"
           name="Group2"
           value="Power"
       />
       <br />
       <Radio
-          checked
+          defaultChecked={false}
           label="Nitro"
           name="Group2"
           value="Nitro"
       />
       <br />
       <Radio
+          defaultChecked={false}
           label="Google"
           name="Group2"
           value="Google"

data/app/pb_kits/playbook/pb_radio/radio.rb

@@ -13,8 +13,6 @@ module Playbook
 
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
       prop :error, type: Playbook::Props::Boolean,
                    default: false
       prop :name, type: Playbook::Props::String,
@@ -23,9 +21,9 @@ module Playbook
                   default: "Radio Text"
       prop :value, type: Playbook::Props::String,
                    default: "radio_text"
-      prop :object
+
       def classname
-        generate_classname("pb_radio_kit", dark_class) + error_class
+        generate_classname("pb_radio_kit") + error_class
       end
 
       def input
@@ -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_select/_select.html.erb

@@ -4,13 +4,13 @@
   class: object.classname) do %>
   <% if object.label %>
     <label class="pb_select_kit_label" for="<%= object.name %>">
-      <%= pb_rails("caption", props: { text: object.label, dark: object.dark, }) %>
+      <%= pb_rails("caption", props: { text: object.label }) %>
     </label>
   <% end %>
   <label class="<%= object.select_wrapper_class %>" for="<%= object.name %>">
     <% if object.children %>
       <%= capture(&object.children) %>
-      <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
+      <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
     <% else %>
       <%= select_tag(
         object.name,
@@ -28,7 +28,7 @@
         include_blank: object.include_blank,
       )
       %>
-      <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
+      <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
     <% end %>
     <%= pb_rails("icon", props: { icon: "angle-down", fixed_width: true, classname: "pb_select_kit_caret"}) %>
   </label>

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

@@ -29,7 +29,6 @@ type SelectProps = {
   blankSelection?: string,
   children?: React.Node,
   className?: string,
-  dark?: boolean,
   data?: object,
   disabled?: boolean,
   error?: string,
@@ -58,7 +57,7 @@ const Select = ({
   aria = {},
   blankSelection,
   children,
-  dark = false,
+  className,
   data = {},
   disabled = false,
   error,
@@ -71,17 +70,18 @@ const Select = ({
   value,
   ...props
 }: SelectProps) => {
-  const errorClass = error ? ' error' : ''
-  const css = classnames(buildCss('pb_select', { dark }) + errorClass, globalProps(props))
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const optionsList = createOptions(options)
 
+  const classes = classnames(buildCss('pb_select'), globalProps(props), className)
+  const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
+
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={css}
+        className={classes}
     >
       <If condition={label}>
         <label
@@ -89,13 +89,12 @@ const Select = ({
             htmlFor={name}
         >
           <Caption
-              dark={dark}
               text={label}
           />
         </label>
       </If>
       <label
-          className="pb_select_kit_wrapper"
+          className={selectWrapperClass}
           htmlFor={name}
       >
         <If condition={children}>
@@ -119,7 +118,6 @@ const Select = ({
         </If>
         <If condition={error}>
           <Body
-              dark={dark}
               status="negative"
               text={error}
           />

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

@@ -53,7 +53,7 @@
     transform: translateY(-50%);
     pointer-events: none;
   }
-  &[class*=_dark] {
+  &.dark {
     select {
       @include pb_textarea_dark;
       @include pb_title_4;

data/app/pb_kits/playbook/pb_select/select.rb

@@ -12,7 +12,6 @@ module Playbook
       partial "pb_select/select"
 
       prop :blank_selection
-      prop :dark, type: Playbook::Props::Boolean, default: false
       prop :disabled, type: Playbook::Props::Boolean, default: false
       prop :error
       prop :include_blank
@@ -24,7 +23,7 @@ module Playbook
       prop :required, type: Playbook::Props::Boolean, default: false
 
       def classname
-        generate_classname("pb_select", dark_class)
+        generate_classname("pb_select")
       end
 
       def select_wrapper_class
@@ -58,10 +57,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_selectable_card/_selectable_card.jsx

@@ -54,8 +54,8 @@ const SelectableCard = ({
   const classes = classnames(buildCss('pb_selectable_card_kit',
     { 'checked': checked,
       'disabled': disabled,
-      'enabled': !disabled },
-    className), globalProps(props))
+      'enabled': !disabled }),
+  globalProps(props), className)
 
   const displayIcon = () => {
     if (icon === true) {

data/app/pb_kits/playbook/pb_table/_table.html.erb

@@ -1,8 +1,9 @@
 <%= content_tag(:div) do %>
   <%= content_tag(:table,
-      id: object.id,
+      aria: object.aria,
+      class: object.classname,
       data: object.data,
-      class: object.classname) do %>
+      id: object.id) do %>
     <%= capture(&object.children) %>
   <% end %>
 <% end %>

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

@@ -2,15 +2,19 @@
 
 import React, { type Node } from 'react'
 import classnames from 'classnames'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type TableProps = {
+  aria?: object,
   children: array<Node> | Node,
   className: string,
   container: boolean,
-  dark: boolean,
+  dark?: boolean,
+  data?: object,
   dataTable: boolean,
   disableHover: boolean,
+  id?: string,
   responsive: "collapse" | "scroll" | "none",
   singleLine: boolean,
   size: "sm" | "md" | "lg",
@@ -18,19 +22,27 @@ type TableProps = {
 
 const Table = (props: TableProps) => {
   const {
+    aria = {},
     children,
     className,
     container = true,
-    dark = false,
+    dark,
+    data = {},
     dataTable = false,
     disableHover = false,
+    id,
     responsive = 'collapse',
     singleLine = false,
     size = 'sm',
   } = props
 
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+
   return (
     <table
+        {...ariaProps}
+        {...dataProps}
         className={classnames(
         className,
         'pb_table',
@@ -45,6 +57,7 @@ const Table = (props: TableProps) => {
         },
         globalProps(props)
       )}
+        id={id}
     >
       {children}
     </table>

data/app/pb_kits/playbook/pb_table/_table_row.html.erb

@@ -1,6 +1,7 @@
 <%= content_tag(:tr,
-    id: object.id,
+    aria: object.aria,
+    class: object.classname,
     data: object.data,
-    class: object.classname) do %>
+    id: object.id) do %>
   <%= capture(&object.children) %>
 <% end %>

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 = {
+  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.scss

@@ -17,7 +17,7 @@
       @include pb_body_light;
     }
 
-    > input:first-child {
+    input {
       @include pb_textarea_light;
       @include pb_title_4;
       overflow: hidden;
@@ -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_time/_time.jsx

@@ -10,24 +10,24 @@ import { globalProps } from '../utilities/globalProps.js'
 import { Body, Icon, Title  } from '../'
 
 type TimeProps = {
-  align?: 'left" | "center' | 'right',
+  align?: 'left' | 'center' | 'right',
   className?: string | array<string>,
   data?: string,
   date: string,
   id?: string,
-  showTimezone?: boolean,
   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>

data/app/pb_kits/playbook/pb_time/docs/_time_dark.jsx

@@ -12,14 +12,12 @@ const TimeDark = () => {
       <Time
           dark
           date={new Date()}
-          showTimezone
           size="lg"
       />
       <br />
       <Time
           dark
           date={new Date()}
-          showTimezone
       />
     </div>
   )

data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx

@@ -6,19 +6,17 @@ const TimeDefault = () => {
     <div>
       <Time
           date={new Date()}
-          showTimezone
           size="lg"
+          timeZone="America/New_York"
       />
       <br />
       <Time
           date={new Date().getTime()}
-          showTimezone
           size="sm"
       />
       <br />
       <Time
           date="2012-08-02T09:49:29Z"
-          showTimezone
           size="xs"
       />
     </div>