playbook_ui 4.17.0.pre.alpha1 → 5.0.1.pre.alpha1

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

@@ -3,14 +3,11 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import {
-  Caption,
-} from '../'
+import { Caption } from '../'
 
-import {
-  buildCss,
-  buildDataProps,
-} from '../utilities/props'
+import { buildCss, buildDataProps } from '../utilities/props'
+
+import { spacing } from '../utilities/spacing.js'
 
 type TimestampProps = {
   id?: String,
@@ -19,19 +16,15 @@ type TimestampProps = {
   text?: String,
 }
 
-const Timestamp = ({
-  id,
-  className,
-  data = {},
-  text,
-}: TimestampProps) => {
+const Timestamp = (props: TimestampProps) => {
+  const { id, className, data = {}, text } = props
   const dataProps = buildDataProps(data)
   const pbCss = buildCss('pb_timestamp_kit')
 
   return (
     <div
         {...dataProps}
-        className={classnames(className, pbCss)}
+        className={classnames(className, pbCss, spacing(props))}
         id={id}
     >
       <Caption

data/app/pb_kits/playbook/pb_title/_title.html.erb

@@ -1,4 +1,5 @@
 <%= content_tag(object.tag, object.text,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) %>

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

@@ -2,41 +2,47 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
 type TitleProps = {
+  aria?: object,
   className?: String,
   children?: Array<React.ReactNode> | React.ReactNode,
   dark?: Boolean,
+  data?: object,
+  id?: String,
   size?: 1 | 2 | 3 | 4,
+  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div",
   text?: String,
-  tag?: 'h1' | 'h2' | 'h3',
-}
-
-const tagCSS = ({
-  dark = false,
-  size = 3,
-}) => {
-  let css = ''
-
-  css += `_${size}`
-  css += dark === true ? '_dark' : ''
-
-  return css
 }
 
 const Title = (props: TitleProps) => {
   const {
-    className,
+    aria = {},
     children,
-    text,
+    className,
+    dark = false,
+    data = {},
+    id,
+    size = 3,
     tag = 'h3',
-  } = props
+    text } = props
 
+  const themeStyle = dark === true ? '_dark' : ''
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_title_kit', size, themeStyle), className, spacing(props))
   const Tag = `${tag}`
 
   return (
-    <Tag className={classnames(`pb_title_kit${tagCSS(props)}`, className)}>
-      { text || children }
+    <Tag
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {text || children}
     </Tag>
   )
 }

data/app/pb_kits/playbook/pb_title/docs/_title_light.html.erb

@@ -2,7 +2,7 @@
 
 <br/>
 
-<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
+<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %> 
 <%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
 <%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>

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

@@ -1,39 +1,60 @@
 /* @flow */
+
 import React from 'react'
+import classnames from 'classnames'
+
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+
 import { Body, Title } from '../'
+import { spacing } from '../utilities/spacing.js'
 
 type TitleCountProps = {
+  align: "center" | "left" | "right",
+  aria?: object,
   className?: String,
-  data?: String,
+  count?: Numeric,
+  data?: object,
   id?: String,
   title?: String,
-  count?: Number,
-  size?: String
-}
+  size?: "lg" | "sm",
+};
+
+const TitleCount = (props: TitleCountProps) => {
+  const {
+    align = 'left',
+    aria = {},
+    className,
+    data = {},
+    count,
+    id,
+    title,
+    size = 'sm' } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
 
-const TitleCount = ({
-  className = 'pb_title_count_kit',
-  data,
-  count,
-  id,
-  title,
-  size,
-}: TitleCountProps) => (
-  <div
-      className={className}
-      data={data}
-      id={id}
-  >
-    <Title
-        className="pb_title_count_text"
-        size={size == 'lg' ? 3 : 4}
-        text={title}
-    />
-    <Body
-        color="light"
-        text={`${count}`}
-    />
-  </div>
-)
+  const css = classnames(buildCss('pb_title_count_kit', align, size), className, spacing(props))
+
+  const formatCount = count.toLocaleString()
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={css}
+        id={id}
+    >
+      <Title
+          className={title !== undefined ? 'pb_title_count_text' : ''}
+          size={size === 'lg' ? 3 : 4}
+          text={title}
+      />
+
+      <Body color="light">
+        <If condition={count}>{formatCount}</If>
+      </Body>
+
+    </div>
+  )
+}
 
 export default TitleCount

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_align.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { TitleCount } from '../../'
+
+const TitleCountAlign = () => {
+  return (
+    <>
+      <TitleCount
+          count={527}
+          title="Remodeling Consultants"
+      />
+
+      <br />
+
+      <TitleCount
+          align="center"
+          count={527}
+          title="Remodeling Consultants"
+      />
+
+      <br />
+
+      <TitleCount
+          align="right"
+          count={527}
+          title="Remodeling Consultants"
+      />
+    </>
+  )
+}
+
+export default TitleCountAlign

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_default.jsx

@@ -5,11 +5,22 @@ const TitleCountDefault = () => {
   return (
     <>
       <TitleCount
-          count={35}
+          count={35.78}
           title="Appointments"
       />
+
+      <br />
+
+      <TitleCount
+          count={7399}
+          size="lg"
+          title="Appointments"
+      />
+
+      <br />
+
       <TitleCount
-          count={35}
+          count={-379503.372}
           size="lg"
           title="Appointments"
       />

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

@@ -1,9 +1,8 @@
 examples:
-
   rails:
-  - title_count_default: Default
-  - title_count_align: Align
-
+    - title_count_default: Default
+    - title_count_align: Align
 
   react:
-  - title_count_default: Default
+    - title_count_default: Default
+    - title_count_align: Align

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

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

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

@@ -2,19 +2,14 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
-import {
-  Body,
-  Title,
-} from '../'
+import { Body, Title } from '../'
 
-import {
-  buildCss,
-  buildDataProps,
-} from '../utilities/props'
+import { buildCss, buildDataProps } from '../utilities/props'
 
 type TitleDetailProps = {
-  align?: 'left' | 'center' | 'right',
+  align?: "left" | "center" | "right",
   className?: String,
   data?: object,
   detail: String,
@@ -22,21 +17,15 @@ type TitleDetailProps = {
   title: String,
 }
 
-const TitleDetail = ({
-  align = 'left',
-  className,
-  data = {},
-  detail,
-  id,
-  title,
-}: TitleDetailProps) => {
+const TitleDetail = (props: TitleDetailProps) => {
+  const { align = 'left', className, data = {}, detail, id, title } = props
   const dataProps = buildDataProps(data)
   const pbCss = buildCss('pb_title_detail_kit', align)
 
   return (
     <div
         {...dataProps}
-        className={classnames(className, pbCss)}
+        className={classnames(className, pbCss, spacing(props))}
         id={id}
     >
       <Title

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

@@ -1,10 +1,8 @@
 // @flow
 
 import React from 'react'
-
-import type {
-  InputCallback,
-} from '../types'
+import classnames from 'classnames'
+import type { InputCallback } from '../types'
 
 import {
   buildAriaProps,
@@ -13,6 +11,8 @@ import {
   noop,
 } from '../utilities/props'
 
+import { spacing } from '../utilities/spacing.js'
+
 type Props = {
   aria: object,
   checked: boolean,
@@ -20,7 +20,7 @@ type Props = {
   onChange: InputCallback<HTMLInputElement>,
   onCheck: InputCallback<HTMLInputElement>,
   onUncheck: InputCallback<HTMLInputElement>,
-  size: 'sm' | 'md',
+  size: "sm" | "md",
 }
 
 const Toggle = ({
@@ -37,23 +37,21 @@ const Toggle = ({
   const dataProps = buildDataProps(data)
   const handleChange = (event) => {
     onChange(event)
-    event.target.checked ?
-      onCheck(event) :
-      onUncheck(event)
+    event.target.checked ? onCheck(event) : onUncheck(event)
   }
 
   const css = buildCss({
     'pb_toggle_kit': true,
     [size]: true,
-    'on': checked,
-    'off': !checked,
+    on: checked,
+    off: !checked,
   })
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={css}
+        className={classnames(css, spacing(props))}
     >
       <label className="pb_toggle_wrapper">
         <input

data/app/pb_kits/playbook/pb_user/_user.jsx

@@ -1,12 +1,9 @@
 /* @flow */
 
 import React from 'react'
-
-import {
-  Avatar,
-  Body,
-  Title,
-} from '../'
+import classnames from 'classnames'
+import { Avatar, Body, Title } from '../'
+import { spacing } from '../utilities/spacing.js'
 
 type UserProps = {
   className?: String,
@@ -14,42 +11,45 @@ type UserProps = {
   name: String,
   territory?: String,
   title?: String,
-  size?: 'sm' | 'md' | 'lg',
-  align?: 'left' | 'center' | 'right',
-  orientation?: 'horiztonal' | 'vertical',
+  size?: "sm" | "md" | "lg",
+  align?: "left" | "center" | "right",
+  orientation?: "horiztonal" | "vertical",
   avatar?: Boolean,
   avatarUrl?: String,
 }
 
-const User = ({
-  name = '',
-  territory = '',
-  title = '',
-  align = 'left',
-  orientation = 'horizontal',
-  size = 'sm',
-  avatar = false,
-  avatarUrl,
-}: UserProps) => (
-  <div className={`pb_user_kit_${align}_${orientation}_${size}`}>
-    <If condition={avatar || avatarUrl}>
-      <Avatar
-          imageUrl={avatarUrl}
-          name={name}
-          size={size}
-      />
-    </If>
+const User = (props: UserProps) => {
+  const {
+    name = '',
+    territory = '',
+    title = '',
+    align = 'left',
+    orientation = 'horizontal',
+    size = 'sm',
+    avatar = false,
+    avatarUrl,
+  } = props
+  return (
+    <div className={classnames(`pb_user_kit_${align}_${orientation}_${size}`, spacing(props))}>
+      <If condition={avatar || avatarUrl}>
+        <Avatar
+            imageUrl={avatarUrl}
+            name={name}
+            size={size}
+        />
+      </If>
 
-    <div className="content_wrapper">
-      <Title
-          size={size == 'lg' ? 3 : 4}
-          text={name}
-      />
-      <Body color="light">
-        {territory == '' ? title : `${territory} • ${title}`}
-      </Body>
+      <div className="content_wrapper">
+        <Title
+            size={size == 'lg' ? 3 : 4}
+            text={name}
+        />
+        <Body color="light">
+          {territory == '' ? title : `${territory} • ${title}`}
+        </Body>
+      </div>
     </div>
-  </div>
-)
+  )
+}
 
 export default User