playbook_ui 5.3.0 → 5.5.1.pre.alpha2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bd87d19dffeb68dba4372b1282cf12fcb1cace3acda84f7119a902fc205e7e1f
-  data.tar.gz: e5f41cf298f15483eb5299b27837c83cac6e74e265b446fe6ff819742ff18b48
+  metadata.gz: ab2f9ac761918632d1eedb6ade068e921d1101cde598e9eeab081b4a1a799610
+  data.tar.gz: f7563ad2b7269b8c813488c00b0b1eb62cd33097a4d4573ab3af9d4c1c7e896a
 SHA512:
-  metadata.gz: e7a8e97e476695635a7ca42bbbd831a20b9ff5e48665a7246b723ef2eacdd418864ba2dcec08b602e7fa35362fccf15685e56d91371442a3149ae2eef6d30615
-  data.tar.gz: 6d58ee0d87a24bdf4912e774c4f0ea33480be6007ba5ffd8cd6f2145bd4b27bbbf233a5288f691a3635f445944eccd0f4196c098cfd6e24e7396ed0580999ecc
+  metadata.gz: 83301ae9311c77e7e83eb9ab7e536915735bcb86ff4299d89c236de0e75c66ef868e5e920720f994e61627645a0124fd87ba6355c8a6430e0defe28a83b36708
+  data.tar.gz: a937ba549dcc01ef95cb94b0166c19ae5b1c6bdeae34a80ea6f17cfd8d37a0783e8e57bf1221f5b09fce1ceea7d13f17da177c25d431a31101d80701296c8219

data/app/pb_kits/playbook/_playbook.scss

@@ -14,6 +14,7 @@
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
+@import 'pb_date_picker/date_picker';
 @import 'pb_date_range_inline/date_range_inline';
 @import 'pb_date_range_stacked/date_range_stacked';
 @import 'pb_date_stacked/date_stacked';
@@ -80,4 +81,4 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_weekday_stacked/weekday_stacked';
-@import './utilities/spacing';
+@import './utilities/spacing';

data/app/pb_kits/playbook/data/menu.yml

@@ -2,6 +2,7 @@ samples:
   - dashboards
   - registration
   - filter_table
+  - collection_detail
 
 kits:
   - avatar
@@ -23,6 +24,7 @@ kits:
   - fixed_confirmation_toast
   - flex
   - forms:
+    - date_picker
     - file_upload
     - form
     - form_pill

data/app/pb_kits/playbook/index.js

@@ -13,6 +13,7 @@ export Contact from './pb_contact/_contact.jsx'
 export Currency from './pb_currency/_currency.jsx'
 export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'
 export Date from './pb_date/_date.jsx'
+export DatePicker from './pb_date_picker/_date_picker.jsx'
 export DateRangeInline from './pb_date_range_inline/_date_range_inline.jsx'
 export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
 export DateStacked from './pb_date_stacked/_date_stacked.jsx'
@@ -90,6 +91,7 @@ export dashboardValueSettings from './pb_dashboard_value/dashboardValueSettings'
 
 // Other JS/Plugins
 export pbChart from './plugins/pb_chart.js'
+export datePickerHelper from './pb_date_picker/date_picker_helper.js'
 export PbTypeahead from './pb_typeahead'
 export PbPopover from './pb_popover'
 export PbTable from './pb_table'

data/app/pb_kits/playbook/packs/examples.js

@@ -27,6 +27,7 @@ import * as Contact from 'pb_contact/docs'
 import * as Currency from 'pb_currency/docs'
 import * as DashboardValue from 'pb_dashboard_value/docs'
 import * as Date from 'pb_date/docs'
+import * as DatePicker from 'pb_date_picker/docs'
 import * as DateRangeInline from 'pb_date_range_inline/docs'
 import * as DateRangeStacked from 'pb_date_range_stacked/docs'
 import * as DateStacked from 'pb_date_stacked/docs'
@@ -107,6 +108,7 @@ WebpackerReact.setup({
   ...Currency,
   ...DashboardValue,
   ...Date,
+  ...DatePicker,
   ...DateRangeInline,
   ...DateRangeStacked,
   ...DateStacked,

data/app/pb_kits/playbook/packs/samples.js

@@ -13,7 +13,9 @@ import WebpackerReact from 'webpacker-react'
 import Dashboards from '../../../views/playbook/samples/dashboards/index.jsx'
 import FilterTable from '../../../views/playbook/samples/filter_table/index.jsx'
 import Registration from '../../../views/playbook/samples/registration/index.jsx'
+import CollectionDetail from '../../../views/playbook/samples/collection_detail/index.jsx'
 
 WebpackerReact.setup({ Dashboards })
 WebpackerReact.setup({ FilterTable })
 WebpackerReact.setup({ Registration })
+WebpackerReact.setup({ CollectionDetail })

data/app/pb_kits/playbook/pb_body/_body.html.erb

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

data/app/pb_kits/playbook/pb_body/_body.jsx

@@ -2,50 +2,59 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { Highlight } from '../'
 import { spacing } from '../utilities/spacing.js'
 
 type BodyProps = {
+  aria?: object,
   className?: String,
   children?: Array<React.ReactChild>,
-  color: 'light' | 'lighter',
+  color: 'dark' | 'default' | 'light' | 'lighter' | 'light_dark' | 'lighter_dark',
   dark?: Boolean,
-  status?: 'negative' | 'positive',
-  tag: String,
-  text?: String,
+  data?: object,
+  highlightedText?: Array<String>,
   highlighting?: Boolean,
-  highlightedText?: Array<String>
-}
-
-const bodyCSS = ({
-  color = '',
-  dark = false,
-  status = '',
-
-}: BodyProps) => {
-  const colorStyle = color !== '' ? `_${color}` : ''
-
-  const themeStyle = dark === true ? '_dark' : ''
-
-  const statusStyle = status !== '' ? `_${status}` : ''
-
-  return 'pb_body_kit' + colorStyle + themeStyle + statusStyle
+  id?: String,
+  status?: 'negative' | 'neutral' | 'positive',
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
+  text?: String,
 }
 
 const Body = (props: BodyProps) => {
   const {
+    aria = {},
     className,
     children,
-    text,
-    tag = 'div',
-    highlightedText,
+    color = '',
+    dark = false,
+    data = {},
+    highlightedText = [],
     highlighting = false,
+    id,
+    status = '',
+    tag = 'div',
+    text,
   } = props
 
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss('pb_body_kit', color, status, {
+      dark: dark,
+    }),
+    spacing(props),
+    className
+  )
   const Tag = `${tag}`
 
   return (
-    <Tag className={classnames(bodyCSS(props), className, spacing(props))}>
+    <Tag
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       <If condition={highlighting}>
         <Highlight highlightedText={highlightedText}>{text || children}</Highlight>
         <Else />

data/app/pb_kits/playbook/pb_body/docs/_body_dark.html.erb

@@ -1,6 +1,6 @@
 <%= pb_rails("body", props: {
   text: "I am a body kit",
-  dark: true
+  dark: true,
 }) %>
 
 <%= pb_rails("body", props: {

data/app/pb_kits/playbook/pb_body/docs/_body_dark.jsx

@@ -18,8 +18,6 @@ const BodyDark = () => {
           dark
           text="I am a body kit (Lighter)"
       />
-      <br />
-      <br />
       <Body
           dark
           status="negative"

data/app/pb_kits/playbook/pb_body/docs/_body_light.html.erb

@@ -2,6 +2,7 @@
   text: "I am a body kit"
 }) %>
 
+
 <%= pb_rails("body", props: {
   text: "I am a body kit (Light)",
   color: "light"

data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx

@@ -4,7 +4,9 @@ import { Body } from '../../'
 const BodyLight = () => {
   return (
     <div>
-      <Body text="I am a body kit (Default)" />
+      <Body
+          text="I am a body kit (Default)"
+      />
       <Body
           color="light"
           text="I am a body kit (Light)"
@@ -13,8 +15,6 @@ const BodyLight = () => {
           color="lighter"
           text="I am a body kit (Lighter)"
       />
-      <br />
-      <br />
       <Body
           status="negative"
           text="I am a body kit (Status: negative)"
@@ -23,10 +23,6 @@ const BodyLight = () => {
           status="positive"
           text="I am a body kit (Status: positive)"
       />
-      <Body
-          status="positive"
-          text="I am a body kit (Status: positive)"
-      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -72,6 +72,7 @@ const Button = (props: ButtonPropTypes) => {
   const {
     children,
     className,
+    disabled,
     icon = null,
     id,
     loading = false,
@@ -120,6 +121,7 @@ const Button = (props: ButtonPropTypes) => {
       <button
           {...buttonAria}
           className={css}
+          disabled={disabled}
           id={id}
           onClick={onClick}
           type={htmlType}

data/app/pb_kits/playbook/pb_caption/_caption.scss

@@ -3,11 +3,11 @@
 [class^=pb_caption_kit] {
   @include caption;
 
-  &[class*=_lg] {
+  &[class^=pb_caption_kit_lg] {
     @include caption_lg;
   }
 
-  &[class*=_xs] {
+  &[class^=pb_caption_kit_xs] {
     @include caption_xs;
   }
 

data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb

@@ -1,4 +1,5 @@
-<%= content_tag(:label, id: object.id,
+<%= content_tag(:label, aria: object.aria,
+                        id: object.id,
                         data: object.data,
                         class: object.classname) do %>  
   <% if object.children %>

data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx

@@ -3,13 +3,18 @@
 import React from 'react'
 import Body from '../pb_body/_body.jsx'
 import Icon from '../pb_icon/_icon.jsx'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import classnames from 'classnames'
 import { spacing } from '../utilities/spacing.js'
 
 type CheckboxProps = {
+  aria?: object,
   checked?: Boolean,
+  className?: String,
   dark?: Boolean,
+  data?: object,
   error?: Boolean,
+  id?: String,
   name: String,
   text: String,
   value: String,
@@ -19,9 +24,13 @@ type CheckboxProps = {
 
 const Checkbox = (props: CheckboxProps) => {
   const {
+    aria = {},
     checked = false,
+    className,
     dark = false,
+    data = {},
     error = false,
+    id,
     name = '',
     text = '',
     value = '',
@@ -29,13 +38,17 @@ const Checkbox = (props: CheckboxProps) => {
     onChange = () => {},
   } = props
 
+  const dataProps = buildDataProps(data)
+  const ariaProps = buildAriaProps(aria)
+  const classes = classnames(buildCss('pb_checkbox_kit',
+    { dark: dark, checked: checked, error: error }), className, spacing(props))
+
   return (
     <label
-        className={classnames('pb_checkbox_kit' +
-        (dark === true ? '_dark' : '') +
-        (error === true ? ' error' : ''), spacing(props))
-
-      }
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
     >
       <If condition={children}>
         {children}

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Checkbox } from '../../'
+
+const CheckboxChecked = () => {
+  return (
+    <div>
+      <Checkbox
+          checked
+          name="checkbox-name"
+          text="Checked Checkbox"
+          value="check-box value"
+      />
+    </div>
+  )
+}
+
+export default CheckboxChecked

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

@@ -9,6 +9,7 @@ examples:
 
   react:
   - checkbox_default: Default
+  - checkbox_checked: Load as checked
   - checkbox_dark: Dark
   - checkbox_custom: Custom Checkbox
   - checkbox_error: Default w/ Error

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

@@ -3,3 +3,4 @@ export { default as CheckboxDark } from './_checkbox_dark.jsx'
 export { default as CheckboxCustom } from './_checkbox_custom.jsx'
 export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxDarkError } from './_checkbox_dark_error.jsx'
+export { default as CheckboxChecked } from './_checkbox_checked.jsx'

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.html.erb

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

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx

@@ -2,6 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { Button, Icon } from '../'
 
 import type { Callback } from '../types'
@@ -13,8 +14,10 @@ import {
 import { spacing } from '../utilities/spacing.js'
 
 type CircleIconButtonProps = {
+  aria?: object,
   className?: String,
   dark?: Boolean,
+  data?: object,
   disabled?: Boolean,
   icon: String,
   id?: String,
@@ -27,9 +30,13 @@ type CircleIconButtonProps = {
 
 const CircleIconButton = (props: CircleIconButtonProps) => {
   const {
+    aria = {},
+    className,
     dark,
+    data = {},
     disabled,
     icon,
+    id,
     onClick = noop,
     type,
     link,
@@ -37,8 +44,17 @@ const CircleIconButton = (props: CircleIconButtonProps) => {
     variant,
   } = props
 
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_circle_icon_button_kit'), className, spacing(props))
+
   return (
-    <div className={classnames('pb_circle_icon_button_kit', spacing(props))}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       <Button
           dark={dark}
           disabled={disabled}

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
-    id: object.id,
+    aria: object.aria,
+    class: object.classname,
     data: object.data,
-    class: object.classname) do %>
+    id: object.id) do %>
   <% if object.stat_label.present? %>
     <%= pb_rails("body", props: { color: "light", text: object.stat_label } ) %>
   <% end %>

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx

@@ -2,6 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { spacing } from '../utilities/spacing.js'
 import {
   Body,
@@ -11,7 +12,9 @@ import {
 
 type DashboardValueProps = {
   align?: 'left' | 'center' | 'right',
+  aria?: object,
   className?: String,
+  data?: object,
   id?: String,
   statChange?: {
     change?: String,
@@ -24,27 +27,27 @@ type DashboardValueProps = {
   }
 }
 
-const dashboardValueCSS = ({
-  align = 'left',
-
-}: DashboardValueProps) => {
-  const alignStyle = align !== '' ? `_${align}` : ''
-
-  return 'pb_dashboard_value_kit' + alignStyle
-}
-
 const DashboardValue = (props: DashboardValueProps) => {
   const {
+    align = 'left',
+    aria = {},
     className,
+    data = {},
     id,
-    statChange,
+    statChange = {},
     statLabel,
-    statValue,
+    statValue = {},
   } = props
 
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_dashboard_value_kit', align), className, spacing(props))
+
   return (
     <div
-        className={classnames(dashboardValueCSS(props), className, spacing(props))}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
         id={id}
     >
       <If condition={statLabel}>