playbook_ui 5.3.0.pre.alpha1 → 5.5.1.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 456edb4112fd56741c0aca0d3e8bcd4b9709abc6a8245dc635bbb9de8a453476
-  data.tar.gz: d1f53edaa77edf61e3af081c6b4bd6bf4723214a0d99158ddec934aba8974229
+  metadata.gz: fa66f8cfafaeec93584b7752d2346a2254f856a2994681b09b50d11af8c3ec80
+  data.tar.gz: bd0dc3b635736355aa8a08e6d5dd27cca89a5cc550852d248eac2603684b58f2
 SHA512:
-  metadata.gz: 6ddc39e458c5783a6cf0a231399d51b0168a1342fe80ebfba6b8814854c764420e332af64871b8294536d46864f85ab91cd58dd07400df32be10d9cc833fdd0f
-  data.tar.gz: 74656e11978287baba8979c672840258db5410f1e744c5377b9fbe831dcd753b3b03c2b1e48f0c759b959d948f042bcf28debca416747c65278a9a9b76920558
+  metadata.gz: 13b87a0f669639bb1921b01688146fcea0e13aa08f1b6c94b214a80d3448a9220081b8df7b9e6610f5820dc4a8e591728d789678caca7ac637f719a0a86b0766
+  data.tar.gz: 4f213af2da0881139ed2689d9cd384757e34fb8a7780963dd139fbcb1b9a5562ba2eeff4fdda10750a4d95eca7694936887fdcddff65a983b09171594df19ed5

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';
@@ -26,7 +27,6 @@
 @import 'pb_form/form';
 @import 'pb_form_pill/form_pill';
 @import 'pb_flex/flex';
-@import 'pb_gauge/gauge';
 @import 'pb_hashtag/hashtag';
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
@@ -81,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
@@ -14,16 +15,16 @@ kits:
   - checkbox
   - charts_and_graphs:
     - bar_graph
-    - circle_chart
-    - distribution_bar
-    - gauge
     - legend
     - line_graph
+    - distribution_bar
+    - circle_chart
 
   - filter
   - 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'
@@ -25,7 +26,6 @@ export FixedConfirmationToast from './pb_fixed_confirmation_toast/_fixed_confirm
 export Flex from './pb_flex/_flex.jsx'
 export FlexItem from './pb_flex/_flex_item.jsx'
 export FormPill from './pb_form_pill/_form_pill.jsx'
-export Gauge from './pb_gauge/_gauge.jsx'
 export Hashtag from './pb_hashtag/_hashtag.jsx'
 export Highlight from './pb_highlight/_highlight.jsx'
 export HomeAddressStreet from './pb_home_address_street/_home_address_street.jsx'
@@ -91,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'
@@ -38,7 +39,6 @@ import * as Filter from 'pb_filter/docs'
 import * as FixedConfirmationToast from 'pb_fixed_confirmation_toast/docs'
 import * as Flex from 'pb_flex/docs'
 import * as FormPill from 'pb_form_pill/docs'
-import * as Gauge from 'pb_gauge/docs'
 import * as Hashtag from 'pb_hashtag/docs'
 import * as Highlight from 'pb_highlight/docs'
 import * as HomeAddressStreet from 'pb_home_address_street/docs'
@@ -108,6 +108,7 @@ WebpackerReact.setup({
   ...Currency,
   ...DashboardValue,
   ...Date,
+  ...DatePicker,
   ...DateRangeInline,
   ...DateRangeStacked,
   ...DateStacked,
@@ -119,7 +120,6 @@ WebpackerReact.setup({
   ...FixedConfirmationToast,
   ...Flex,
   ...FormPill,
-  ...Gauge,
   ...Hashtag,
   ...Highlight,
   ...HomeAddressStreet,

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}