playbook_ui 6.0.1 → 6.1.0.pre.alpha1

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

@@ -4,7 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { Body, Caption, Icon } from '../'
 import DateTime from '../pb_kit/dateTime.js'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 type TimeRangeInlineProps = {
   className?: String,
@@ -78,7 +78,7 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
 
   return (
     <div
-        className={classnames('pb_time_range_inline_kit_' + alignment, className, spacing(props))}
+        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_stacked/_time_stacked.jsx

@@ -6,7 +6,7 @@ import classnames from 'classnames'
 import DateTime from '../pb_kit/dateTime.js'
 import { buildCss } from '../utilities/props'
 import { Body, Caption } from '../'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 const Components = {
   body: Body,
@@ -30,7 +30,7 @@ const TimeStacked = (props: TimeStackedProps) => {
     buildCss('pb_time_stacked_kit', {
       dark: dark,
     }),
-    spacing(props)
+    globalProps(props)
   )
 
   const tagClasses = classnames(buildCss('pb_time_stacked_kit', tag))

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

@@ -7,7 +7,7 @@ import { Caption } from '../'
 
 import { buildCss, buildDataProps } from '../utilities/props'
 
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 type TimestampProps = {
   id?: String,
@@ -24,7 +24,7 @@ const Timestamp = (props: TimestampProps) => {
   return (
     <div
         {...dataProps}
-        className={classnames(className, pbCss, spacing(props))}
+        className={classnames(className, pbCss, globalProps(props))}
         id={id}
     >
       <Caption

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

@@ -3,17 +3,16 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 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, spacing(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_title_count/_title_count.jsx

@@ -6,7 +6,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 import { Body, Title } from '../'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 type TitleCountProps = {
   align: "center" | "left" | "right",
@@ -32,7 +32,7 @@ const TitleCount = (props: TitleCountProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
-  const css = classnames(buildCss('pb_title_count_kit', align, size), className, spacing(props))
+  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

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 import { Body, Title } from '../'
 
@@ -25,7 +25,7 @@ const TitleDetail = (props: TitleDetailProps) => {
   return (
     <div
         {...dataProps}
-        className={classnames(className, pbCss, spacing(props))}
+        className={classnames(className, pbCss, globalProps(props))}
         id={id}
     >
       <Title

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

@@ -8,59 +8,67 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
-  noop,
 } from '../utilities/props'
 
-import { spacing } from '../utilities/spacing.js'
+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, spacing(props))}
+        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

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

@@ -1,11 +1,9 @@
 <%= pb_rails("toggle", props: {
-  size: "sm",
-  checked: false
+  checked: true
 }) %>
 
 <br>
 
 <%= pb_rails("toggle", props: {
-  size: "md",
   checked: false
 }) %>