playbook_ui 6.2.1 → 6.3.0

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_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_title_count/_title_count.html.erb

@@ -1,10 +1,12 @@
 <%= content_tag(:div,
-    id: object.id,
+    aria: object.aria,
+    class: object.classname,
     data: object.data,
-    class: object.classname) do %>
+    id: object.id) do %>
   <%= pb_rails("title", props: {
+    dark: object.dark,
     size: object.title_size,
     text: object.title,
     classname: "pb_title_count_text" }) if object.title %>
-  <%= pb_rails("body", props: { color: "light" }) { object.format_count } if object.count %>
+  <%= pb_rails("body", props: { color: "light", dark: object.dark }) { object.format_count } if object.count %>
 <% end %>

data/app/pb_kits/playbook/pb_title_count/_title_count.jsx

@@ -13,6 +13,7 @@ type TitleCountProps = {
   aria?: object,
   className?: string,
   count?: Numeric,
+  dark?: boolean,
   data?: object,
   id?: string,
   title?: string,
@@ -24,6 +25,7 @@ const TitleCount = (props: TitleCountProps) => {
     align = 'left',
     aria = {},
     className,
+    dark = false,
     data = {},
     count,
     id,
@@ -45,11 +47,15 @@ const TitleCount = (props: TitleCountProps) => {
     >
       <Title
           className={title !== undefined ? 'pb_title_count_text' : ''}
+          dark={dark}
           size={size === 'lg' ? 3 : 4}
           text={title}
       />
 
-      <Body color="light">
+      <Body
+          color="light"
+          dark={dark}
+      >
         <If condition={count}>{formatCount}</If>
       </Body>
 

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_align_dark.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("title_count", props: {
+  dark: true,
+  title: "Remodeling Consultants",
+  count: 527
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  dark: true,
+  title: "Remodeling Consultants",
+  count: 527,
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  dark: true,
+  title: "Remodeling Consultants",
+  count: 527,
+  align: "right"
+}) %>

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_align_dark.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { TitleCount } from '../../'
+
+const TitleCountAlignDark = () => {
+  return (
+    <>
+      <TitleCount
+          count={527}
+          dark
+          title="Remodeling Consultants"
+      />
+
+      <br />
+
+      <TitleCount
+          align="center"
+          count={527}
+          dark
+          title="Remodeling Consultants"
+      />
+
+      <br />
+
+      <TitleCount
+          align="right"
+          count={527}
+          dark
+          title="Remodeling Consultants"
+      />
+    </>
+  )
+}
+
+export default TitleCountAlignDark

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_dark.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("title_count", props: {
+  title: "Appointments",
+  count: 35.78,
+  dark: true
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  title: "Appointments",
+  count: 7399,
+  size: "lg",
+  dark: true
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  title: "Appointments",
+  count: -379503.3720,
+  size: "lg",
+  dark: true
+}) %>