playbook_ui 6.1.0.pre.alpha3 → 6.2.1

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb

@@ -18,16 +18,4 @@
   <% end %>
 <% end %>
 
-<br /><br />
 
-<%= pb_rails("progress_step", props: {orientation: "horizontal"}) do %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
-      Child
-  <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
-      Child
-  <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
-      Child
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx

@@ -21,18 +21,6 @@ const ProgressStepDefault = () => (
 
     <br />
     <br />
-
-    <ProgressStep>
-      <ProgressStepItem status="complete">
-        {'Child'}
-      </ProgressStepItem>
-      <ProgressStepItem status="active">
-        {'Child'}
-      </ProgressStepItem>
-      <ProgressStepItem status="inactive">
-        {'Child'}
-      </ProgressStepItem>
-    </ProgressStep>
   </div>
 )
 

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

@@ -2,11 +2,13 @@ examples:
   
   rails:
   - progress_step_default: Default
+  - progress_step_child: Child
   - progress_step_vertical: Vertical
   - progress_step_dark: Dark
   
   
   react:
   - progress_step_default: Default
+  - progress_step_child: Child
   - progress_step_vertical: Vertical
   - progress_step_dark: Dark

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

@@ -1,3 +1,4 @@
 export { default as ProgressStepDefault } from './_progress_step_default.jsx'
+export { default as ProgressStepChild } from './_progress_step_child.jsx'
 export { default as ProgressStepVertical } from './_progress_step_vertical.jsx'
 export { default as ProgressStepDark } from './_progress_step_dark.jsx'

data/app/pb_kits/playbook/pb_progress_step/progress_step.rb

@@ -8,7 +8,7 @@ module Playbook
       partial "pb_progress_step/progress_step"
 
       prop :orientation, type: Playbook::Props::Enum,
-                         values: %w[vertical horizontal],
+                         values: %w[vertical horizontal child],
                          default: "horizontal"
       prop :icon, type: Playbook::Props::Boolean,
                   default: false

data/app/pb_kits/playbook/pb_radio/_radio.jsx

@@ -7,18 +7,18 @@ import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
 
 type RadioProps = {
-  className?: String,
-  data?: String,
-  error?: Boolean,
-  id?: String,
-  label: String,
-  name: String,
-  value: String,
-  checked?: Boolean,
-  dark?: Boolean,
-  text: String,
+  className?: string,
+  data?: string,
+  error?: boolean,
+  id?: string,
+  label: string,
+  name: string,
+  value: string,
+  checked?: boolean,
+  dark?: boolean,
+  text: string,
   children?: Node,
-  onChange: (Boolean)=>void,
+  onChange: (boolean)=>void,
 }
 
 const Radio = ({

data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx

@@ -7,12 +7,12 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type SectionSeparatorProps = {
   aria: object,
-  className: String,
-  dark?: Boolean,
+  className: string,
+  dark?: boolean,
   data: object,
-  id: String,
+  id: string,
   orientation?: "horizontal" | "vertical",
-  text: String,
+  text: string,
   variant?: "card" | "background",
 }
 

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx

@@ -17,19 +17,19 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type SelectableCardProps = {
   aria?: object,
-  checked: Boolean,
-  children?: Array<React.ReactChild>,
-  className?: String,
+  checked: boolean,
+  children?: array<React.ReactChild>,
+  className?: string,
   data: object,
-  disabled?: Boolean,
-  icon?: Boolean,
-  id?: String,
-  inputId?: String,
-  multi?: Boolean,
-  name?: String,
+  disabled?: boolean,
+  icon?: boolean,
+  id?: string,
+  inputId?: string,
+  multi?: boolean,
+  name?: string,
   onChange: InputCallback<HTMLInputElement>,
-  text?: String,
-  value?: String,
+  text?: string,
+  value?: string,
 }
 
 const SelectableCard = ({
@@ -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_selectable_card_icon/_selectable_card_icon.jsx

@@ -13,19 +13,19 @@ import {
 
 type SelectableCardIconProps = {
   aria?: Object,
-  checked?: Boolean,
-  checkmark: Boolean,
-  className?: String,
-  dark?: Boolean,
+  checked?: boolean,
+  checkmark: boolean,
+  className?: string,
+  dark?: boolean,
   data?: Object,
-  disabled?: Boolean,
-  icon?: String,
-  inputId?: String,
-  multi?: Boolean,
-  name?: String,
-  titleText?: String,
-  bodyText?: String,
-  value?: String,
+  disabled?: boolean,
+  icon?: string,
+  inputId?: string,
+  multi?: boolean,
+  name?: string,
+  titleText?: string,
+  bodyText?: string,
+  value?: string,
   onChange?: (e) => void,
 }
 

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.jsx

@@ -14,17 +14,17 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type SelectableIconProps = {
   aria?: Object,
-  checked?: Boolean,
-  className?: String,
-  disabled?: Boolean,
+  checked?: boolean,
+  className?: string,
+  disabled?: boolean,
   data?: Object,
-  icon: String,
-  inputId: String,
-  inputs: String,
-  multi?: Boolean,
-  name: String,
-  text: String,
-  value?: String
+  icon: string,
+  inputId: string,
+  inputs: string,
+  multi?: boolean,
+  name: string,
+  text: string,
+  value?: string
 }
 
 const SelectableIcon = ({

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.jsx

@@ -5,7 +5,7 @@ import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
 
 type TableProps = {
-  children: Array<Node> | Node,
+  children: array<Node> | Node,
   className: string,
   container: boolean,
   dark: boolean,

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

@@ -5,9 +5,9 @@ import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type TableRowPropTypes = {
-  children: Array<React.ReactNode> | React.ReactNode,
-  className: String,
-  sideHighlightColor: String,
+  children: array<React.ReactNode> | React.ReactNode,
+  className: string,
+  sideHighlightColor: string,
 }
 
 const TableRow = (props: TableRowPropTypes) => {

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

@@ -30,7 +30,7 @@
     }
   }
 
-  &[class*=_dark] {
+  &.dark {
     .text_input_wrapper {
       margin-bottom: 1rem;
 

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