playbook_ui 6.0.1.pre.alpha6 → 6.1.0.pre.alpha4

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

@@ -5,6 +5,14 @@
 @import "../pb_title/title";
 
 [class^=pb_time_kit] {
+  &[class*=_center]  {
+    text-align: center;
+  }
+
+  &[class*=_right]  {
+    text-align: right;
+  }
+
   [class^=pb_body] {
     font-weight: $bold !important;
   }
@@ -25,4 +33,13 @@
       color: $text-lt-light;
     }
   }
+
+  &.dark {
+    & > * [class^=pb_title_kit] {
+      color: $text_dk_default;
+    }
+    & > * [class^=pb_body_kit] {
+      color: $text_dk_light;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_time/docs/_time_align.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import Time from '../_time.jsx'
+
+const TimeAlign = () => {
+  return (
+    <div>
+      <Time
+          date={new Date()}
+          size="lg"
+      />
+      <br />
+      <Time
+          align="center"
+          date={new Date()}
+          size="lg"
+      />
+      <br />
+      <Time
+          align="right"
+          date={new Date()}
+          size="lg"
+      />
+    </div>
+  )
+}
+
+export default TimeAlign

data/app/pb_kits/playbook/pb_time/docs/_time_dark.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import Time from '../_time.jsx'
+
+const TimeDark = () => {
+  return (
+    <div>
+      <Time
+          dark
+          date={new Date()}
+      />
+      <br />
+      <Time
+          dark
+          date={new Date()}
+          showTimezone
+          size="lg"
+      />
+      <br />
+      <Time
+          dark
+          date={new Date()}
+          showTimezone
+      />
+    </div>
+  )
+}
+
+export default TimeDark

data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import Time from '../_time.jsx'
+
+const TimeDefault = () => {
+  return (
+    <div>
+      <Time
+          date={new Date()}
+          showTimezone
+          size="lg"
+      />
+      <br />
+      <Time
+          date={new Date().getTime()}
+          showTimezone
+          size="sm"
+      />
+      <br />
+      <Time
+          date="2012-08-02T09:49:29Z"
+          showTimezone
+          size="xs"
+      />
+    </div>
+  )
+}
+
+export default TimeDefault

data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import Time from '../_time.jsx'
+
+const TimeStamp = () => {
+  return (
+    <div>
+      <Time
+          date={new Date()}
+          showTimezone
+          size="sm"
+      />
+
+      <br />
+
+      <Time
+          date={new Date().getTime()}
+          showTimezone
+          size="sm"
+      />
+
+      <br />
+
+      <Time
+          date="2012-08-02T15:49:29Z"
+          showTimezone
+          size="sm"
+      />
+    </div>
+  )
+}
+
+export default TimeStamp

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

@@ -5,3 +5,7 @@ examples:
   - time_timestamp: Timestamp Values
 
   react:
+  - time_default: Sizes
+  - time_timestamp: Timestamp Values
+  - time_align: Alignment
+  - time_dark: Dark

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

@@ -0,0 +1,4 @@
+export { default as TimeDefault } from './_time_default.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'

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

@@ -9,11 +9,10 @@ type TitleProps = {
   aria?: object,
   children?: Array<React.ReactNode> | React.ReactNode,
   className?: String,
-  dark?: Boolean,
   data?: object,
   id?: String,
   size?: 1 | 2 | 3 | 4,
-  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div",
+  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: String,
   variant?: null | "primary",
 }
@@ -23,7 +22,6 @@ const Title = (props: TitleProps) => {
     aria = {},
     children,
     className,
-    dark = false,
     data = {},
     id,
     size = 3,
@@ -32,10 +30,9 @@ const Title = (props: TitleProps) => {
     variant = null,
   } = props
 
-  const themeStyle = dark === true ? 'dark' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_title_kit', size, themeStyle, variant), className, globalProps(props))
+  const classes = classnames(buildCss('pb_title_kit', size, variant), className, globalProps(props))
   const Tag = `${tag}`
 
   return (

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

@@ -18,7 +18,7 @@
     @include pb_title_4;
   }
 
-  &[class*=_dark] {
+  &.dark {
     @include pb_title_dark;
   }
 

data/app/pb_kits/playbook/pb_title/title.rb

@@ -7,8 +7,6 @@ module Playbook
 
       partial "pb_title/title"
 
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
       prop :size, type: Playbook::Props::Enum,
                   values: [1, 2, 3, 4],
                   default: 3
@@ -21,13 +19,7 @@ module Playbook
                      default: nil
 
       def classname
-        generate_classname("pb_title_kit", size, dark_class, variant)
-      end
-
-    private
-
-      def dark_class
-        dark ? "dark" : nil
+        generate_classname("pb_title_kit", size, variant)
       end
     end
   end

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

@@ -8,59 +8,67 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
-  noop,
 } from '../utilities/props'
 
 import { globalProps } from '../utilities/globalProps.js'
 
 type Props = {
-  aria: object,
-  checked: boolean,
-  data: object,
-  onChange: InputCallback<HTMLInputElement>,
-  onCheck: InputCallback<HTMLInputElement>,
-  onUncheck: InputCallback<HTMLInputElement>,
-  size: "sm" | "md",
+  aria?: object,
+  checked?: Boolean,
+  children?: React.Node,
+  className?: String,
+  data?: object,
+  id?: String,
+  name?: String,
+  onChange?: InputCallback<HTMLInputElement>,
+  size?: "sm" | "md",
+  value?: String,
 }
 
 const Toggle = ({
   aria = {},
   checked = false,
+  children,
+  className,
   data = {},
-  onChange = noop,
-  onCheck = noop,
-  onUncheck = noop,
+  id,
+  name,
+  onChange = () => {},
   size = 'md',
+  value,
   ...props
 }: Props) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const handleChange = (event) => {
-    onChange(event)
-    event.target.checked ? onCheck(event) : onUncheck(event)
-  }
-
-  const css = buildCss({
-    'pb_toggle_kit': true,
-    [size]: true,
-    on: checked,
-    off: !checked,
-  })
+  const css = classnames(
+    buildCss('pb_toggle_kit',
+      size,
+      {
+        on: checked,
+        off: !checked,
+      }
+    ), className)
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
         className={classnames(css, globalProps(props))}
+        id={id}
     >
       <label className="pb_toggle_wrapper">
-        <input
-            {...props}
-            checked={checked}
-            onChange={handleChange}
-            type="checkbox"
-        />
-
+        <If condition={children}>
+          {children}
+          <Else />
+          <input
+              {...props}
+              defaultChecked={checked}
+              name={name}
+              onChange={onChange}
+              type="checkbox"
+              value={value}
+          />
+        </If>
         <div className="pb_toggle_control" />
       </label>
     </div>

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.jsx

@@ -0,0 +1,31 @@
+// @flow
+
+import React, { useState } from 'react'
+import { Toggle } from '../..'
+
+const ToggleCustom = () => {
+  const [choice, setChoice] = useState(false)
+
+  const handleOnChange = ({ target }) => {
+    setChoice(target.value = !choice)
+  }
+
+  return (
+    <>
+      <Toggle
+          checked={choice}
+          size="sm"
+      >
+        <input
+            className="my custom checkbox"
+            name="custom checkbox"
+            onChange={handleOnChange}
+            type="checkbox"
+            value="ABC"
+        />
+      </Toggle>
+    </>
+  )
+}
+
+export default ToggleCustom

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.html.erb

@@ -2,21 +2,21 @@
 
 <br>
 
-<%= pb_rails("caption", props: { text: "Male" }) %>
+<%= pb_rails("caption", props: { text: "Walk" }) %>
 <%= pb_rails("toggle", props: { size: "sm" }) do %>
-  <input type="radio" name="gender" value="male">
+  <input type="radio" name="modes of transportation" value="walk">
 <% end %>
 
 <br/>
 
-<%= pb_rails("caption", props: { text: "Female" }) %>
+<%= pb_rails("caption", props: { text: "Bike" }) %>
 <%= pb_rails("toggle", props: { size: "sm" }) do %>
-  <input type="radio" name="gender" value="female">
+  <input type="radio" name="modes of transportation" value="bike">
 <% end %>
 
 <br/>
 
-<%= pb_rails("caption", props: { text: "Other" }) %>
+<%= pb_rails("caption", props: { text: "Ride" }) %>
 <%= pb_rails("toggle", props: { size: "sm" }) do %>
-  <input type="radio" name="gender" value="other">
+  <input type="radio" name="modes of transportation" value="ride">
 <% end %>

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx

@@ -0,0 +1,72 @@
+// @flow
+
+import React, { useState } from 'react'
+import { Caption, Title, Toggle } from '../..'
+
+const ToggleCustomRadio = () => {
+  const [choice, setChoice] = useState('walk')
+
+  const handleOnChange = ({ target }) => {
+    setChoice(target.value)
+  }
+
+  return (
+    <>
+      <Title
+          size={4}
+          text="Select one option:"
+      />
+
+      <br />
+
+      <Caption
+          text="Walk"
+      />
+      <Toggle
+          checked={choice}
+          size="sm"
+      >
+        <input
+            name="modes of transportation"
+            onChange={handleOnChange}
+            type="radio"
+            value="walk"
+        />
+      </Toggle>
+
+      <br />
+
+      <Caption
+          text="Bike"
+      />
+      <Toggle
+          size="sm"
+      >
+        <input
+            name="modes of transportation"
+            onChange={handleOnChange}
+            type="radio"
+            value="bike"
+        />
+      </Toggle>
+
+      <br />
+
+      <Caption
+          text="Ride"
+      />
+      <Toggle
+          size="sm"
+      >
+        <input
+            name="modes of transportation"
+            onChange={handleOnChange}
+            type="radio"
+            value="ride"
+        />
+      </Toggle>
+    </>
+  )
+}
+
+export default ToggleCustomRadio