playbook_ui 5.3.0.pre.alpha1 → 5.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 456edb4112fd56741c0aca0d3e8bcd4b9709abc6a8245dc635bbb9de8a453476
-  data.tar.gz: d1f53edaa77edf61e3af081c6b4bd6bf4723214a0d99158ddec934aba8974229
+  metadata.gz: 7f4ee46775d0d56664c1a9aca3fe5524b0956af82b1067d79104529064855fae
+  data.tar.gz: 0e36fa5454385af4d344c9cde205c4f9392695f0dbb6e3721eb4447b90871fcd
 SHA512:
-  metadata.gz: 6ddc39e458c5783a6cf0a231399d51b0168a1342fe80ebfba6b8814854c764420e332af64871b8294536d46864f85ab91cd58dd07400df32be10d9cc833fdd0f
-  data.tar.gz: 74656e11978287baba8979c672840258db5410f1e744c5377b9fbe831dcd753b3b03c2b1e48f0c759b959d948f042bcf28debca416747c65278a9a9b76920558
+  metadata.gz: c490cc3202290171c33bff9a68062bf888f0110c02189550eaeafa1f9b3f9e07c3e04ae9bad665aa78095cd5f8f8a9b2564b4dabb0d6b549b0ad11bd12d0c587
+  data.tar.gz: 5ca5802c390a462833194cb94aaaeaf7dccd10e72174a1abc826b17f19b7c028dab3bb0c7c23c2038e458574f942f826e37a1b742949c376135723196309b565

data/app/pb_kits/playbook/_playbook.scss

@@ -26,7 +26,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 +80,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,11 +15,10 @@ kits:
   - checkbox
   - charts_and_graphs:
     - bar_graph
-    - circle_chart
-    - distribution_bar
-    - gauge
     - legend
     - line_graph
+    - distribution_bar
+    - circle_chart
 
   - filter
   - fixed_confirmation_toast

data/app/pb_kits/playbook/index.js

@@ -25,7 +25,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'

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

@@ -38,7 +38,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'
@@ -119,7 +118,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_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/pbChartsLightTheme.js

@@ -124,13 +124,6 @@ const highchartsTheme = {
       fontSize: typography.text_smaller,
     },
   },
-  // specific to gauge
-  // unfilled gauge color
-  pane: {
-    background: {
-      borderColor: colors.border_light,
-    },
-  },
 
   plotOptions: {
     series: {
@@ -151,25 +144,6 @@ const highchartsTheme = {
       threshold: null,
     },
 
-    // GAUGE STYLES
-    solidgauge: {
-      borderColor: colors.primary,
-      borderWidth: 20,
-      radius: 90,
-      innerRadius: '90%',
-      dataLabels: {
-        borderWidth: 0,
-        color: colors.text_lt_default,
-        enabled: true,
-        style: {
-          fontFamily: typography.font_family_base,
-          fontWeight: typography.regular,
-          fontSize: typography.heading_2,
-        },
-        y: -26,
-      },
-    },
-
     // PIE STYLES
     pie: {
       colors: [

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