playbook_ui 6.1.0 → 6.4.0

data/app/pb_kits/playbook/pb_source/_source.jsx

@@ -18,11 +18,11 @@ import {
 } from '../'
 
 type SourceProps = {
-  className?: String,
+  className?: string,
   data?: object,
-  hideIcon: Boolean,
-  id?: String,
-  source?: String,
+  hideIcon: boolean,
+  id?: string,
+  source?: string,
   type: "events" | "inbound" | "outbound" | "prospecting" | "referral" | "retail" | "user",
   user: object,
 }

data/app/pb_kits/playbook/pb_star_rating/_star_rating.jsx

@@ -14,13 +14,13 @@ import {
 
 type StarRatingProps = {
   aria?: object,
-  className?: String,
+  className?: string,
   data?: object,
-  fixedWidth?: Boolean,
-  hideRating: Boolean,
-  icon?: String,
-  id?: String,
-  rating: Numeric,
+  fixedWidth?: boolean,
+  hideRating: boolean,
+  icon?: string,
+  id?: string,
+  rating: number,
 }
 
 const StarRating = ({

data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx

@@ -19,9 +19,9 @@ const iconMap = {
 
 type StatChangeProps = {
   change?: "increase" | "decrease" | "neutral",
-  className?: String,
-  id?: String,
-  value?: String | Number,
+  className?: string,
+  id?: string,
+  value?: string | number,
 }
 
 const StatChange = (props: StatChangeProps) => {

data/app/pb_kits/playbook/pb_stat_value/_stat_value.jsx

@@ -6,10 +6,10 @@ import { Title } from '../'
 import { globalProps } from '../utilities/globalProps.js'
 
 type StatValueProps = {
-  className?: String,
-  id?: String,
-  unit?: String,
-  value: String | Number
+  className?: string,
+  id?: string,
+  unit?: string,
+  value: string | number
 }
 
 const StatValue = (props: StatValueProps) => {

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 = {
-  children: Array<Node> | Node,
+  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 = {
-  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/styles/_hover.scss

@@ -19,14 +19,16 @@ $transition-speed: 0.2s;
             transition: all $transition-speed ease;
           }
 
-          &:hover {
-            box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
+          @media (hover:hover) {
+            &:hover {
+              box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
 
-            td {
-              background: $white;
-              border-color: darken($border_light, 10%);
-              border-top-width: 1px;
-              border-top-color: transparent;
+              td {
+                background: $white;
+                border-color: darken($border_light, 10%);
+                border-top-width: 1px;
+                border-top-color: transparent;
+              }
             }
           }
         }
@@ -38,11 +40,12 @@ $transition-speed: 0.2s;
               border-top-color: $border_light;
               border-top-width: 1px;
             }
-
-            &:hover {
-              td {
-                border-top-width: 1px;
-                border-top-color: $border_light;
+            @media (hover:hover) {
+              &:hover {
+                td {
+                  border-top-width: 1px;
+                  border-top-color: $border_light;
+                }
               }
             }
           }

data/app/pb_kits/playbook/pb_table/styles/_mobile.scss

@@ -91,10 +91,12 @@
           }
         }
       }
-      &:hover {
-        tbody {
-          tr {
-            box-shadow: 0 0 0 $white !important;
+      @media (hover:hover) {
+        &:hover {
+          tbody {
+            tr {
+              box-shadow: 0 0 0 $white !important;
+            }
           }
         }
       }

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

@@ -42,10 +42,12 @@ $table-dark-card-bg: $bg_dark;
       &:not(.no-hover) {
         tbody {
           tr {
-            &:hover {
-              td {
-                border-color: $border_dark !important;
-                background: $bg_dark;
+            @media (hover:hover) {
+              &:hover {
+                td {
+                  border-color: $border_dark !important;
+                  background: $bg_dark;
+                }
               }
             }
           }

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