playbook_ui 7.1.1.pre.alpha1 → 7.3.0.pre.alpha2

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

@@ -2,12 +2,11 @@ import React from 'react'
 import ProgressStep from '../_progress_step.jsx'
 import ProgressStepItem from '../_progress_step_item.jsx'
 
-const ProgressStepVertical = (props) => (
+const ProgressStepVertical = () => (
   <div>
     <ProgressStep
         icon
         orientation="vertical"
-        {...props}
     >
       <ProgressStepItem status="complete" />
       <ProgressStepItem status="active" />
@@ -16,10 +15,7 @@ const ProgressStepVertical = (props) => (
 
     <br />
 
-    <ProgressStep
-        orientation="vertical"
-        {...props}
-    >
+    <ProgressStep orientation="vertical">
       <ProgressStepItem status="complete" />
       <ProgressStepItem status="active" />
       <ProgressStepItem status="inactive" />
@@ -27,10 +23,7 @@ const ProgressStepVertical = (props) => (
 
     <br />
 
-    <ProgressStep
-        orientation="vertical"
-        {...props}
-    >
+    <ProgressStep orientation="vertical">
       <ProgressStepItem status="complete">
         {'Child'}
       </ProgressStepItem>

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

@@ -15,11 +15,8 @@ module Playbook
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default tracker],
                      default: "default"
-      prop :color, type: Playbook::Props::Enum,
-                     values: %w[primary info],
-                     default: "primary"
       def classname
-        generate_classname("pb_progress_step_kit", orientation, icon_class, variant_class, color_class)
+        generate_classname("pb_progress_step_kit", orientation, icon_class, variant_class)
       end
 
     private
@@ -34,13 +31,6 @@ module Playbook
           "tracker"
         end
       end
-
-      def color_class
-        case color
-        when "info"
-          "info"
-        end
-      end
     end
   end
 end

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

@@ -8,7 +8,7 @@ module Playbook
       partial "pb_progress_step/progress_step_item"
 
       prop :status, type: Playbook::Props::Enum,
-                    values: %w[complete active inactive hidden],
+                    values: %w[complete active inactive],
                     default: "inactive"
 
       def classname

data/app/pb_kits/playbook/pb_radio/_radio.html.erb

@@ -9,7 +9,7 @@
     <% if object.children %>
       <%= capture(&object.children) %>
     <% else %>
-      <%= radio_button_tag object.name, object.value, object.selected, object.input_options %>
+      <%= radio_button_tag object.name, object.value, object.selected %>
     <% end %>
 
     <span class="pb_radio_button"></span>

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

@@ -4,7 +4,6 @@ examples:
   - radio_default: Default
   - radio_custom: Custom
   - radio_error: With Error
-  - radio_options: With Options
 
   react:
   - radio_default: Default

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

@@ -15,8 +15,6 @@ module Playbook
                      default: false
       prop :error, type: Playbook::Props::Boolean,
                    default: false
-      prop :input_options, type: Playbook::Props::Hash,
-                           default: {}
       prop :name, type: Playbook::Props::String,
                   default: "radio_name"
       prop :text, type: Playbook::Props::String,
@@ -28,6 +26,10 @@ module Playbook
         generate_classname("pb_radio_kit") + error_class
       end
 
+      def input
+        check_box_tag(name, value, checked)
+      end
+
       def selected
         "checked" if checked == true
       end

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

@@ -30,7 +30,7 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
   const themeStyle = dark === true ? '_dark' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, themeStyle), globalProps(props), className)
+  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, themeStyle), className, globalProps(props))
 
   return (
 

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

@@ -11,7 +11,7 @@
     appearance: none;
     cursor: pointer;
     box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
-    padding-right: $space_xl;
+    padding-right: $space_lg;
     @media (hover:hover) {
       &:hover, &:active, &:focus {
         background-color: $focus_input_light;

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

@@ -33,9 +33,9 @@ const StatChange = (props: StatChangeProps) => {
     <If condition={value}>
       <div
           className={classnames(
+          className,
           buildCss('pb_stat_change_kit', status),
-          globalProps(props),
-          className
+          globalProps(props)
         )}
           id={id}
       >

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

@@ -21,11 +21,11 @@ const StatValue = (props: StatValueProps) => {
   } = props
 
   const displayValue = function(value) {
-    if (value || value === 0) {
+    if (value) {
       return (
         <Title
             size={1}
-            text={`${value}`}
+            text={value}
         />
       )
     }
@@ -44,7 +44,7 @@ const StatValue = (props: StatValueProps) => {
 
   return (
     <div
-        className={classnames('pb_stat_value_kit', globalProps(props), className)}
+        className={classnames('pb_stat_value_kit', className, globalProps(props))}
         id={id}
     >
       <div className="pb_stat_value_wrapper">

data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.jsx

@@ -3,12 +3,7 @@ import { StatValue } from '../../'
 
 const StatValueDefault = () => {
   return (
-    <>
-      <StatValue value={1048} />
-      <br />
-      <br />
-      <StatValue value={0} />
-    </>
+    <StatValue value={1048} />
   )
 }
 

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

@@ -44,6 +44,7 @@ const Table = (props: TableProps) => {
         {...ariaProps}
         {...dataProps}
         className={classnames(
+        className,
         'pb_table',
         `table-${size}`,
         `table-responsive-${responsive}`,
@@ -54,8 +55,7 @@ const Table = (props: TableProps) => {
           'single-line': singleLine,
           'no-hover': disableHover,
         },
-        globalProps(props),
-        className
+        globalProps(props)
       )}
         id={id}
     >

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

@@ -10,12 +10,6 @@ examples:
     - table_single_line: Force Single Line
     - table_data_table: Data Table
     - table_responsive_table: Responsive Tables
-    - table_one_action: Table with 1 Action
-    - table_two_actions: Table with 2 Actions
-    - table_two_plus_actions: Table with 2+ Actions
-    - table_action_middle: Table with Actions in the Middle
-    - table_icon_buttons: Table with Icon Buttons
-
  
   react:
     - table_sm: Small
@@ -28,9 +22,3 @@ examples:
     - table_single_line: Force Single Line
     - table_data_table: Data Table
     - table_responsive_table: Responsive Tables
-    - table_one_action: Table with 1 Action
-    - table_two_actions: Table with 2 Actions
-    - table_two_plus_actions: Table with 2+ Actions
-    - table_action_middle: Table with Actions in the Middle
-    - table_icon_buttons: Table with Icon Buttons
-

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

@@ -8,9 +8,3 @@ export { default as TableResponsiveTable } from './_table_responsive_table.jsx'
 export { default as TableDisableHover } from './_table_disable_hover.jsx'
 export { default as TableSingleLine } from './_table_single_line.jsx'
 export { default as TableMultiline } from './_table_multiline.jsx'
-export { default as TableOneAction } from './_table_one_action.jsx'
-export { default as TableTwoActions } from './_table_two_actions.jsx'
-export { default as TableTwoPlusActions } from './_table_two_plus_actions.jsx'
-export { default as TableActionMiddle } from './_table_action_middle.jsx'
-export { default as TableIconButtons } from './_table_icon_buttons.jsx'
-

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

@@ -50,9 +50,9 @@ const TextInput = (props: TextInputProps) => {
   const dataProps = buildDataProps(data)
   const css = classnames([
     'pb_text_input_kit',
+    className,
     error ? 'error' : null,
     globalProps(props),
-    className,
   ])
 
   return (

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

@@ -42,7 +42,7 @@ const Textarea = ({
 }: TextareaProps) => {
   const errorClass = error ? 'error' : null
   const resizeClass = `resize_${resize}`
-  const classes = classnames('pb_textarea_kit', errorClass, resizeClass, globalProps(props), className)
+  const classes = classnames('pb_textarea_kit', className, errorClass, resizeClass, globalProps(props))
 
   return (
     <div className={classes}>

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

@@ -24,9 +24,9 @@ type TimeProps = {
 const Time = (props: TimeProps) => {
   const { align, className, date, showIcon, size, timeZone } = props
   const classes = classnames(
+    className,
     buildCss('pb_time_kit', align, size),
-    globalProps(props),
-    className
+    globalProps(props)
   )
 
   const dateTimestamp = new DateTime({ value: date, zone: timeZone })

data/app/pb_kits/playbook/pb_time/docs/_time_timezone.html.erb

@@ -23,8 +23,7 @@
 <br>
 
 <h4>West Coast</h4>
-<%= pb_rails("time", props: {
-  show_timezone: true,
+ <%= pb_rails("time", props: {
   time: Time.now,
   timezone: "America/Los_Angeles"
 }) %>

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx

@@ -78,7 +78,7 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
 
   return (
     <div
-        className={classnames('pb_time_range_inline_kit_' + alignment, globalProps(props), className)}
+        className={classnames('pb_time_range_inline_kit_' + alignment, className, globalProps(props))}
     >
       <div className="pb_time_range_inline_wrapper">
         <If condition={size == 'xs'}>

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss

@@ -22,14 +22,14 @@
     display: flex;
     align-items: center;
     [class*=pb_time_range_inline_arrow] {
-      margin-left: $space_xs/2;
-      margin-right: $space_xs/2;
+      margin-left: 4px;
+      margin-right: 4px;
     }
     [class*=pb_time_range_inline_timezone] {
-      margin-left: $space_xs/2;
+      margin-left: 4px;
     }
     [class*=pb_time_range_inline_icon] {
-      margin-right: $space_xs/2;
+      margin-right: 4px;
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx

@@ -26,11 +26,11 @@ type TimeStackedProps = {
 const TimeStacked = (props: TimeStackedProps) => {
   const { className, dark = false, date, tag = 'body' } = props
   const classes = classnames(
+    className,
     buildCss('pb_time_stacked_kit', {
-      dark,
+      dark: dark,
     }),
-    globalProps(props),
-    className
+    globalProps(props)
   )
 
   const tagClasses = classnames(buildCss('pb_time_stacked_kit', tag))

data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx

@@ -24,7 +24,7 @@ const Timestamp = (props: TimestampProps) => {
   return (
     <div
         {...dataProps}
-        className={classnames(pbCss, globalProps(props), className)}
+        className={classnames(className, pbCss, globalProps(props))}
         id={id}
     >
       <Caption

data/app/pb_kits/playbook/pb_title/_title.jsx

@@ -32,11 +32,7 @@ const Title = (props: TitleProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_title_kit', size, variant),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_title_kit', size, variant), className, globalProps(props))
   const Tag = `${tag}`
 
   return (

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

@@ -34,11 +34,7 @@ const TitleCount = (props: TitleCountProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
-  const css = classnames(
-    buildCss('pb_title_count_kit', align, size),
-    globalProps(props),
-    className
-  )
+  const css = classnames(buildCss('pb_title_count_kit', align, size), className, globalProps(props))
 
   const formatCount = count.toLocaleString()
 

data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx

@@ -10,11 +10,11 @@ import { buildCss, buildDataProps } from '../utilities/props'
 
 type TitleDetailProps = {
   align?: "left" | "center" | "right",
-  className?: string,
+  className?: String,
   data?: object,
-  detail: string,
-  id?: string,
-  title: string,
+  detail: String,
+  id?: String,
+  title: String,
 }
 
 const TitleDetail = (props: TitleDetailProps) => {
@@ -25,7 +25,7 @@ const TitleDetail = (props: TitleDetailProps) => {
   return (
     <div
         {...dataProps}
-        className={classnames(pbCss, globalProps(props), className)}
+        className={classnames(className, pbCss, globalProps(props))}
         id={id}
     >
       <Title

data/app/pb_kits/playbook/pb_toggle/_toggle.jsx

@@ -34,7 +34,7 @@ const Toggle = ({
   id,
   name,
   onChange = () => {},
-  size = 'sm',
+  size = 'md',
   value,
   ...props
 }: Props) => {
@@ -47,13 +47,13 @@ const Toggle = ({
         on: checked,
         off: !checked,
       }
-    ))
+    ), className)
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(css, globalProps(props), className)}
+        className={classnames(css, globalProps(props))}
         id={id}
     >
       <label className="pb_toggle_wrapper">

data/app/pb_kits/playbook/pb_toggle/_toggle.scss

@@ -2,53 +2,55 @@
 
 $color_checkbox_success: $data_1;
 $color_checkbox_default: $border_light;
-$transition: .2s ease-in-out;
+$transition: .2s cubic-bezier(0.95, 0.05, 0.795, 0.035);
+$toggle_sizes: (
+  "sm": 50px,
+  "md": 60px,
+);
 
 [class^=pb_toggle_kit] {
   position: relative;
-  $width: 44px;
-  $height: $width/2;
-  $border_success: 3px solid $color_checkbox_success;
-  $border_default: 3px solid $color_checkbox_default;
 
+  @each $name, $size in $toggle_sizes {
+    &[class*=_#{$name}] {
 
-  .pb_toggle_wrapper {
-    .pb_toggle_control {
-      cursor: pointer;
-      transition: $transition;
-      width: $width;
-      height: $height;
-      display: block;
-      border-radius: $height;
-      border: $border_default;
-      position: relative;
-      box-sizing: content-box;
-      &:after {
-        transition: $transition;
-        content: "";
-        width: $width/2 - 4px;
-        height: $height - 4px;
-        background-color: $color_checkbox_default;
-        border-radius: 50%;
-        position: absolute;
-        top: 2px;
-        left: 2px;
-      }
-      &:hover {
-        border: $border_success;
-        &:after{
-          background-color: $color_checkbox_success;
+      $width: $size;
+      $height: $width/2;
+
+      .pb_toggle_wrapper {
+        .pb_toggle_control {
+          cursor: pointer;
+          transition: $transition;
+          width: $width;
+          height: $height;
+          display: block;
+          border-radius: $height;
+          border: 3px solid $color_checkbox_default;
+          background-color: $color_checkbox_default;
+          position: relative;
+          box-sizing: content-box;
+          &:after {
+            transition: $transition;
+            content: "";
+            width: $width/2;
+            height: $height;
+            display: block;
+            background-color: $white;
+            border-radius: 50%;
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
         }
-      }
-    }
-    input {
-      display: none;
-      &:checked + .pb_toggle_control {
-        border: $border_success;
-        background-color: $color_checkbox_success;
-        &:after{
-          left: $width/2 + 2px;
-          background-color: $white;
+        input {
+          display: none;
+          &:checked + .pb_toggle_control {
+            border-color: $color_checkbox_success;
+            background-color: $color_checkbox_success;
+            &:after{
+              left: $width/2;
+            }
+          }
         }
       }
     }