playbook_ui 7.0.0.pre.alpha10 → 7.0.0.pre.alpha11

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

@@ -5,8 +5,6 @@ export { default as TableSideHighlight } from './_table_side_highlight.jsx'
 export { default as TableContainer } from './_table_container.jsx'
 export { default as TableDataTable } from './_table_data_table.jsx'
 export { default as TableResponsiveTable } from './_table_responsive_table.jsx'
-export { default as TableDark } from './_table_dark.jsx'
-export { default as TableContainerDark } from './_table_container_dark.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'

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_text_input/docs/example.yml

@@ -1,16 +1,11 @@
 examples:
   rails:
   - 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
   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
-

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

@@ -1,6 +1,4 @@
 export { default as TextInputDefault } from './_text_input_default.jsx'
-export { default as TextInputDark } from './_text_input_dark.jsx'
-export { default as TextInputDarkError } from './_text_input_dark_error.jsx'
 export { default as TextInputCustom } from './_text_input_custom.jsx'
 export { default as TextInputError } from './_text_input_error.jsx'
 export { default as TextInputDisabled } from './_text_input_disabled.jsx'

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', className, errorClass, resizeClass, globalProps(props))
+  const classes = classnames('pb_textarea_kit', errorClass, resizeClass, globalProps(props), className)
 
   return (
     <div className={classes}>

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

@@ -3,17 +3,14 @@ examples:
   rails:
   - textarea_default: Default
   - textarea_custom: Custom Textarea Input
-  - textarea_dark: Dark
   - textarea_resize: Resize
   - textarea_error: Textarea w/ Error
-  - textarea_dark_error: Textarea w/ Error
+
 
 
 
   react:
   - textarea_default: Default
   - textarea_custom: Custom Textarea Input
-  - textarea_dark: Dark
   - textarea_resize: Resize
   - textarea_error: Textarea w/ Error
-  - textarea_dark_error: Textarea w/ Error

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

@@ -1,6 +1,4 @@
 export { default as TextareaDefault } from './_textarea_default.jsx'
 export { default as TextareaResize } from './_textarea_resize.jsx'
 export { default as TextareaCustom } from './_textarea_custom.jsx'
-export { default as TextareaDark } from './_textarea_dark.jsx'
 export { default as TextareaError } from './_textarea_error.jsx'
-export { default as TextareaDarkError } from './_textarea_dark_error.jsx'

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)
+    globalProps(props),
+    className
   )
 
   const dateTimestamp = new DateTime({ value: date, zone: timeZone })

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

@@ -1,11 +1,11 @@
 <%= pb_rails("time", props: {
+  show_timezone: false,
   time: Time.now,
 }) %>
 
 <br>
 
 <%= pb_rails("time", props: {
-  show_timezone: true,
   time: DateTime.now,
   timezone: "America/Chicago"
 }) %>
@@ -15,12 +15,12 @@
 <%= pb_rails("time", props: {
   time: "2012-08-02T15:49:29Z",
   show_icon: true,
+  show_timezone: false,
 }) %>
 
 <br>
 
 <%= pb_rails("time", props: {
-  show_timezone: true,
   time: "2012-08-02T15:49:29Z",
   show_icon: true,
   timezone: "America/Chicago"
@@ -32,12 +32,12 @@
  <%= pb_rails("time", props: {
   time: Time.now,
   size: "md",
+  show_timezone: false,
 }) %>
 
 <br>
 
 <%= pb_rails("time", props: {
-  show_timezone: true,
   size: "md",
   time: DateTime.now,
   timezone: "America/New_York",
@@ -48,6 +48,7 @@
 <%= pb_rails("time", props: {
   show_icon: true,
   size: "md",
+  show_timezone: false,
   time: "2012-08-02T15:49:29Z",
 }) %>
 
@@ -55,7 +56,6 @@
 
 <%= pb_rails("time", props: {
   show_icon: true,
-  show_timezone: true,
   size: "md",
   time: "2012-08-02T15:49:29Z",
   timezone: "America/New_York",

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

@@ -1,17 +1,18 @@
 <%= pb_rails("time", props: {
+  show_timezone: false,
   time: "2012-08-02T15:49:29Z"
 }) %>
 
 <br>
 
 <%= pb_rails("time", props: {
+  show_timezone: false,
   time: DateTime.now
 }) %>
 
 <br>
 
 <%= pb_rails("time", props: {
-  show_timezone: true,
   time: DateTime.now,
   timezone: "America/Chicago",
 }) %>

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

@@ -1,6 +1,5 @@
 <h4>East Coast</h4>
 <%= pb_rails("time", props: {
-  show_timezone: true,
   time: Time.now,
   timezone: "America/New_York"
 }) %>
@@ -9,7 +8,6 @@
 
 <h4>Central</h4>
 <%= pb_rails("time", props: {
-  show_timezone: true,
   time: Time.now,
   timezone: "America/Chicago"
 }) %>
@@ -18,7 +16,6 @@
 
 <h4>Mountain</h4>
 <%= pb_rails("time", props: {
-  show_timezone: true,
   time: Time.now,
   timezone: "America/Denver"
 }) %>
@@ -26,7 +23,7 @@
 <br>
 
 <h4>West Coast</h4>
- <%= pb_rails("time", props: {
+<%= pb_rails("time", props: {
   show_timezone: true,
   time: Time.now,
   timezone: "America/Los_Angeles"
@@ -36,7 +33,6 @@
 
 <h4>Toyko, Japan</h4>
 <%= pb_rails("time", props: {
-  show_timezone: true,
   time: Time.now,
   timezone: "Asia/Tokyo",
 }) %>

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

@@ -6,7 +6,6 @@ examples:
   - time_timestamp: Timestamp Values
   - time_timezone: Handling Timezones
   - time_align: Alignment
-  - time_dark: Dark
 
   react:
   - time_default: Default
@@ -14,4 +13,3 @@ examples:
   - time_timestamp: Timestamp Values
   - time_timezone: Handling Timezones
   - time_align: Alignment
-  - time_dark: Dark

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

@@ -2,5 +2,4 @@ export { default as TimeDefault } from './_time_default.jsx'
 export { default as TimeSizes } from './_time_sizes.jsx'
 export { default as TimeTimestamp } from './_time_timestamp.jsx'
 export { default as TimeAlign } from './_time_align.jsx'
-export { default as TimeDark } from './_time_dark.jsx'
 export { default as TimeTimezone } from './_time_timezone.jsx'

data/app/pb_kits/playbook/pb_time/time.rb

@@ -18,7 +18,7 @@ module Playbook
       prop :show_icon, type: Playbook::Props::Boolean,
                        default: false
       prop :show_timezone, type: Playbook::Props::Boolean,
-                           default: false
+                           default: true
 
       def classname
         # convert deprecated prop values

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, className, globalProps(props))}
+        className={classnames('pb_time_range_inline_kit_' + alignment, globalProps(props), className)}
     >
       <div className="pb_time_range_inline_wrapper">
         <If condition={size == 'xs'}>

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

@@ -2,10 +2,7 @@ examples:
   
   rails:
   - time_range_inline_default: Default
-  - time_range_inline_dark: Dark
   
   
   react:
   - time_range_inline_default: Default
-  - time_range_inline_dark: Dark
-  

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

@@ -1,2 +1 @@
 export { default as TimeRangeInlineDefault } from './_time_range_inline_default.jsx'
-export { default as TimeRangeInlineDark } from './_time_range_inline_dark.jsx'

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)
+    globalProps(props),
+    className
   )
 
   const tagClasses = classnames(buildCss('pb_time_stacked_kit', tag))

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

@@ -3,11 +3,9 @@ examples:
   rails:
   - time_stacked_default: Default
   - time_stacked_caption: With Caption
-  - time_stacked_dark: Dark
+
 
 
   react:
   - time_stacked_default: Default
   - time_stacked_caption: With Caption
-  - time_stacked_dark: Dark
-

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

@@ -1,3 +1,2 @@
 export { default as TimeStackedDefault } from './_time_stacked_default.jsx'
-export { default as TimeStackedDark } from './_time_stacked_dark.jsx'
 export { default as TimeStackedCaption } from './_time_stacked_caption.jsx'

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

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

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

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

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

@@ -2,8 +2,7 @@ examples:
   rails:
   - title_light: Light UI
   - title_variants: Variants
-  - title_dark: Dark UI
+
   react:
   - title_light: Light UI
   - title_variants: Variants
-  - title_dark: Dark UI

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

@@ -1,3 +1,2 @@
 export { default as TitleLight } from './_title_light.jsx'
-export { default as TitleDark } from './_title_dark.jsx'
 export { default as TitleVariants } from './_title_variants.jsx'

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

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

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

@@ -2,11 +2,7 @@ examples:
   rails:
     - title_count_default: Default
     - title_count_align: Align
-    - title_count_dark: Dark
-    - title_count_align_dark: Dark
 
   react:
     - title_count_default: Default
     - title_count_align: Align
-    - title_count_dark: Dark
-    - title_count_align_dark: Dark

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

@@ -1,4 +1,2 @@
 export { default as TitleCountDefault } from './_title_count_default.jsx'
 export { default as TitleCountAlign } from './_title_count_align.jsx'
-export { default as TitleCountDark } from './_title_count_dark.jsx'
-export { default as TitleCountAlignDark } from './_title_count_align_dark.jsx'

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

@@ -25,7 +25,7 @@ const TitleDetail = (props: TitleDetailProps) => {
   return (
     <div
         {...dataProps}
-        className={classnames(className, pbCss, globalProps(props))}
+        className={classnames(pbCss, globalProps(props), className)}
         id={id}
     >
       <Title

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

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

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

@@ -2,55 +2,53 @@
 
 $color_checkbox_success: $data_1;
 $color_checkbox_default: $border_light;
-$transition: .2s cubic-bezier(0.95, 0.05, 0.795, 0.035);
-$toggle_sizes: (
-  "sm": 50px,
-  "md": 60px,
-);
+$transition: .2s ease-in-out;
 
 [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}] {
 
-      $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;
-          }
+  .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;
         }
-        input {
-          display: none;
-          &:checked + .pb_toggle_control {
-            border-color: $color_checkbox_success;
-            background-color: $color_checkbox_success;
-            &:after{
-              left: $width/2;
-            }
-          }
+      }
+    }
+    input {
+      display: none;
+      &:checked + .pb_toggle_control {
+        border: $border_success;
+        background-color: $color_checkbox_success;
+        &:after{
+          left: $width/2 + 2px;
+          background-color: $white;
         }
       }
     }