playbook_ui 5.2.0.pre.alpha4 → 5.4.0

data/app/pb_kits/playbook/pb_badge/_badge.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_badge/_badge.jsx

@@ -2,26 +2,37 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
 import { spacing } from '../utilities/spacing.js'
 
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
 type BadgeProps = {
+  aria?: object,
   className?: String,
   dark?: Boolean,
+  data?: object,
   id?: String,
-  text?: String,
-  variant?: "success" | "warning" | "error" | "info" | "neutral",
   rounded?: Boolean,
+  text?: String,
+  variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
 }
 const Badge = (props: BadgeProps) => {
   const {
+    aria = {},
     className,
     dark = false,
+    data = {},
     id,
+    rounded = false,
     text,
     variant = 'neutral',
-    rounded = false,
   } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const css = classnames(
     className,
     buildCss('pb_badge_kit', variant, {
@@ -33,6 +44,8 @@ const Badge = (props: BadgeProps) => {
 
   return (
     <div
+        {...ariaProps}
+        {...dataProps}
         className={css}
         id={id}
     >

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(
+    className,
+    buildCss('pb_body_kit', color, status, {
+      dark: dark,
+    }),
+    spacing(props)
+  )
   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_card/_card.jsx

@@ -16,6 +16,7 @@ type CardPropTypes = {
   selected?: Boolean,
   shadow?: "none" | "deep" | "deeper" | "deepest",
   dark?: Boolean,
+  borderNone?: Boolean,
 }
 
 type CardHeaderProps = {
@@ -62,9 +63,11 @@ const Card = (props: CardPropTypes) => {
     highlight = {},
     selected = false,
     shadow = 'none',
+    borderNone = false,
   } = props
   const bodyCSS = buildCss('pb_card_body_kit')
-  const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, {
+  const borderCSS = borderNone == true ? 'border_none' : ''
+  const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, `${borderCSS}`, {
     dark: dark,
     selected,
     deselected: !selected,

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -16,6 +16,10 @@
     }
   }
 
+  &[class*=_border_none] {
+    border-width: 0px;
+  }
+
   [class^=pb_card_header_kit] {
     flex-grow: 0;
     flex-shrink: 0;

data/app/pb_kits/playbook/pb_card/card.rb

@@ -15,6 +15,8 @@ module Playbook
                        default: {}
       prop :dark, type: Playbook::Props::Boolean,
                  default: false
+      prop :border_none, type: Playbook::Props::Boolean,
+                         default: false
 
       def classname
         generate_classname("pb_card_kit",
@@ -22,7 +24,8 @@ module Playbook
                            shadow_class,
                            highlight_position_class,
                            highlight_color_class,
-                           dark_class)
+                           dark_class,
+                           border_class)
       end
 
       def body_padding
@@ -55,6 +58,10 @@ module Playbook
       def dark_class
         dark ? "dark" : nil
       end
+
+      def border_class
+        border_none == true ? "border_none" : nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_card/docs/_card_border_none.html.erb

@@ -0,0 +1,7 @@
+<div class="bg-light-doc-example">
+
+    <%= pb_rails("card", props: { border_none: true })  do %>
+        Card content
+    <% end %>
+    
+</div>

data/app/pb_kits/playbook/pb_card/docs/_card_border_none.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import Card from '../_card.jsx'
+
+const CardBorderNone = () => {
+  return (
+    <div className="bg-light-doc-example">
+
+      <Card borderNone>{'Card content'}</Card>
+
+    </div>
+  )
+}
+
+export default CardBorderNone

data/app/pb_kits/playbook/pb_card/docs/_card_border_none.md

@@ -0,0 +1 @@
+Remove card border <b>only</b> for dashboard cards.

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

@@ -9,6 +9,7 @@ examples:
   - card_shadow: Shadow Size
   - card_content: Content Size
   - card_separator: Separator Card
+  - card_border_none: No Border
   react:
   - card_light: Default
   - card_dark: Dark Cards
@@ -19,3 +20,4 @@ examples:
   - card_shadow: Shadow Size
   - card_content: Content Size
   - card_separator: Separator Card
+  - card_border_none: No Border

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

@@ -7,3 +7,4 @@ export { default as CardShadow } from './_card_shadow.jsx'
 export { default as CardContent } from './_card_content.jsx'
 export { default as CardSeparator } from './_card_separator.jsx'
 export { default as CardDark } from './_card_dark.jsx'
+export { default as CardBorderNone } from './_card_border_none.jsx'

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}