RubyGems - playbook_ui - Versions diffs - 6.0.1.pre.alpha3 → 6.1.0.pre.alpha1 - Mend

playbook_ui 6.0.1.pre.alpha3 → 6.1.0.pre.alpha1

Files changed (180) hide show

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

@@ -4,7 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { Body, Caption } from '../'
 import type { InputCallback } from '../types.js'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 type TextareaProps = {
   className?: String,
@@ -43,7 +43,7 @@ const Textarea = ({
   const resizeClass = ` resize_${resize}`
   return (
-    <div className={classnames(textareaClass, className, errorClass, resizeClass, spacing(props))}>
+    <div className={classnames(textareaClass, className, errorClass, resizeClass, globalProps(props))}>
       <Caption
           dark={dark}
           text={label}

data/app/pb_kits/playbook/pb_textarea/_textarea.scss CHANGED

@@ -1,10 +1,11 @@
 @import "../pb_body/body_mixins";
 @import "./textarea_mixin";
 @import "../pb_title/title_mixin";
+@import "../tokens/spacing";
 [class^=pb_textarea_kit] {
   margin-bottom: $space_sm;
-  .pb_textarea_kit_label {
+  [class^=pb_caption_kit] {
     margin-bottom: $space_xs;
     display: block;
   }

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

@@ -1,21 +1,64 @@
+/* @flow */
 import React from 'react'
-import PropTypes from 'prop-types'
+import classnames from 'classnames'
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string,
-}
+import DateTime from '../pb_kit/dateTime.js'
+import { buildCss } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+import { Body, Icon, Title  } from '../'
-class Time extends React.Component {
-  render() {
-    return (
-      <div className="pb_time">
-        <span>{'TIME CONTENT'}</span>
-      </div>
-    )
-  }
+type TimeProps = {
+  align?: 'left" | "center' | 'right',
+  className?: String | Array<String>,
+  data?: String,
+  date: String,
+  id?: String,
+  showTimezone?: Boolean,
+  size?: 'lg' | 'sm' | 'xs',
 }
-Time.propTypes = propTypes
+const Time = (props: TimeProps) => {
+  const { align, className, date, showTimezone, size } = props
+  const classes = classnames(
+    className,
+    buildCss('pb_time_kit', align, size),
+    globalProps(props)
+  )
+  const dateTimestamp = new DateTime({ value: date })
+  return (
+    <div className={classes}>
+      <span className="pb_body_kit">
+        <If condition={size === 'sm'}>
+          <Icon
+              fixedWidth
+              icon="clock"
+          />
+          {' '}
+        </If>
+        <time dateTime={date}>
+          <span>
+            <If condition={size !== 'lg'}>
+              <Body
+                  tag="span"
+                  text={dateTimestamp.toTimeWithMeridian()}
+              />
+              <Else />
+              <Title
+                  size={3}
+                  tag="span"
+                  text={dateTimestamp.toTimeWithMeridian()}
+              />
+            </If>
+            { showTimezone && <span className="pb_time_timezone">{dateTimestamp.toTimezone()}</span> }
+          </span>
+        </time>
+      </span>
+    </div>
+  )
+}
 export default Time

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

@@ -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 ADDED

@@ -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 ADDED

@@ -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 ADDED

@@ -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 ADDED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

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

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

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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>