playbook_ui 7.0.0.pre.alpha9 → 7.0.1.pre.alpha1

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

@@ -1,7 +1,6 @@
 examples:
   rails:
   - card_light: Default
-  - card_dark: Dark Cards
   - card_highlight: Highlight Cards
   - card_header: Header Cards
   - card_selected: Selected
@@ -12,7 +11,6 @@ examples:
   - card_border_none: No Border
   react:
   - card_light: Default
-  - card_dark: Dark Cards
   - card_highlight: Highlight Cards
   - card_header: Header Cards
   - card_selected: Selected

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

@@ -6,5 +6,4 @@ export { default as CardPadding } from './_card_padding.jsx'
 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.scss

@@ -1,10 +1,8 @@
 @import "../tokens/colors";
-@import "../tokens/transition";
 $transition: $transition_cubic;
 
 [class^=pb_checkbox_kit] {
   display: inline-flex;
-  cursor: pointer;
   .pb_checkbox_label {
     padding-left: $space_xs;
     cursor: pointer;
@@ -17,8 +15,7 @@ $transition: $transition_cubic;
     width: 22px;
     border: solid $border_light 2px;
     border-radius: $border_rad_light;
-    transition: background $transition_default ease, border-color $transition_default ease;
-    .check_icon {
+    .check_icon{
       opacity: 0;
       position: relative;
       top: -2px;
@@ -29,10 +26,9 @@ $transition: $transition_cubic;
 
     }
   }
-  @media (hover:hover) {
-    &:hover input ~ .pb_checkbox_checkmark {
-      border-color: $primary_action;
-    }
+
+  &:hover input ~ .pb_checkbox_checkmark {
+    border-color: $primary_action;
   }
 
   input {
@@ -62,10 +58,8 @@ $transition: $transition_cubic;
       border-color: $primary_action;
     }
 
-    @media (hover:hover) {
-      &:hover .pb_checkbox_checkmark {
-        border-color: $primary_action;
-      }
+    &:hover .pb_checkbox_checkmark {
+      border-color: $primary_action;
     }
 
     &.error {

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

@@ -1,10 +1,11 @@
 import React from 'react'
 import { Checkbox } from '../../'
 
-const CheckboxChecked = () => {
+const CheckboxChecked = (props) => {
   return (
     <div>
       <Checkbox
+          {...props}
           checked
           name="checkbox-name"
           text="Checked Checkbox"

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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Checkbox } from '../../'
 
-const CheckboxCustom = () => {
+const CheckboxCustom = (props) => {
   const [checked, setChecked] = useState(false)
 
   const handleOnChange = () => {
@@ -14,7 +14,10 @@ const CheckboxCustom = () => {
       <br />
       <br />
       <div>
-        <Checkbox text="Toggle Me">
+        <Checkbox
+            {...props}
+            text="Toggle Me"
+        >
           <input
               checked={checked}
               name="custom-name"

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

@@ -1,10 +1,11 @@
 import React from 'react'
 import { Checkbox } from '../../'
 
-const CheckboxDefault = () => {
+const CheckboxDefault = (props) => {
   return (
     <div>
       <Checkbox
+          {...props}
           name="default name"
           text="Checkbox label"
           value="default value"

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

@@ -1,10 +1,11 @@
 import React from 'react'
 import { Checkbox } from '../..'
 
-const CheckboxError = () => {
+const CheckboxError = (props) => {
   return (
     <div>
       <Checkbox
+          {...props}
           error
           name="default name"
           text="Checkbox label"

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

@@ -2,15 +2,11 @@ examples:
   rails:
     - checkbox_default: Default
     - checkbox_checked: Load as checked
-    - checkbox_dark: Dark
     - checkbox_custom: Custom Checkbox
     - checkbox_error: Default w/ Error
-    - checkbox_dark_error: Dark w/ Error
 
   react:
   - checkbox_default: Default
   - checkbox_checked: Load as checked
-  - checkbox_dark: Dark
   - checkbox_custom: Custom Checkbox
   - checkbox_error: Default w/ Error
-  - checkbox_dark_error: Dark w/ Error

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

@@ -1,6 +1,4 @@
 export { default as CheckboxDefault } from './_checkbox_default.jsx'
-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/docs/_circle_icon_button_click.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { CircleIconButton } from '../..'
 
-const CircleIconButtonClick = () => (
+const CircleIconButtonClick = (props) => (
   <div>
     <CircleIconButton
+        {...props}
         icon="plus"
         onClick={() => alert('Click!')}
         variant="primary"

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { CircleIconButton } from '../../'
 
-const CircleIconButtonDefault = () => (
+const CircleIconButtonDefault = (props) => (
   <div>
     <CircleIconButton
+        {...props}
         icon="plus"
         variant="primary"
     />
@@ -11,6 +12,7 @@ const CircleIconButtonDefault = () => (
     <br />
 
     <CircleIconButton
+        {...props}
         icon="pen"
         variant="secondary"
     />
@@ -18,6 +20,7 @@ const CircleIconButtonDefault = () => (
     <br />
 
     <CircleIconButton
+        {...props}
         disabled
         icon="times"
     />
@@ -25,6 +28,7 @@ const CircleIconButtonDefault = () => (
     <br />
 
     <CircleIconButton
+        {...props}
         icon="user"
         variant="link"
     />

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { CircleIconButton } from '../../'
 
-const CircleIconButtonLink = () => (
+const CircleIconButtonLink = (props) => (
   <div>
     <CircleIconButton
+        {...props}
         icon="search"
         link="https://google.com"
         variant="primary"
@@ -13,6 +14,7 @@ const CircleIconButtonLink = () => (
     <br />
 
     <CircleIconButton
+        {...props}
         icon="window"
         link="https://google.com"
         newWindow

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

@@ -2,11 +2,9 @@ examples:
   
   rails:
   - circle_icon_button_default: Default
-  - circle_icon_button_dark: Dark
   - circle_icon_button_link: Link
   
   react:
   - circle_icon_button_default: Default
   - circle_icon_button_click: Click Handler
-  - circle_icon_button_dark: Dark
   - circle_icon_button_link: Link

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

@@ -1,4 +1,3 @@
 export { default as CircleIconButtonDefault } from './_circle_icon_button_default.jsx'
 export { default as CircleIconButtonClick } from './_circle_icon_button_click.jsx'
-export { default as CircleIconButtonDark } from './_circle_icon_button_dark.jsx'
 export { default as CircleIconButtonLink } from './_circle_icon_button_link.jsx'

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx

@@ -1,26 +1,31 @@
 import React from 'react'
 import { Contact } from '../../'
 
-const ContactDefault = () => {
+const ContactDefault = (props) => {
   return (
     <div>
       <Contact
+          {...props}
           contactType="cell"
           contactValue="349-185-9988"
       />
       <Contact
+          {...props}
           contactValue="5555555555"
       />
       <Contact
+          {...props}
           contactType="email"
           contactValue="email@example.com"
       />
       <Contact
+          {...props}
           contactType="work"
           contactValue="3245627482"
 
       />
       <Contact
+          {...props}
           contactType="work-cell"
           contactValue="3245627482"
       />

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx

@@ -1,24 +1,28 @@
 import React from 'react'
 import { Contact } from '../../'
 
-const ContactDefault = () => {
+const ContactDefault = (props) => {
   return (
     <div>
       <Contact
+          {...props}
           contactDetail="Cell"
           contactType="cell"
           contactValue="349-185-9988"
       />
       <Contact
+          {...props}
           contactDetail="Home"
           contactValue="5555555555"
       />
       <Contact
+          {...props}
           contactDetail="Work"
           contactType="work"
           contactValue="3245627482"
       />
       <Contact
+          {...props}
           contactDetail="Work-Cell"
           contactType="work-cell"
           contactValue="3245627482"

data/app/pb_kits/playbook/pb_currency/docs/_currency_large.jsx

@@ -1,14 +1,16 @@
 import React from 'react'
 import { Currency } from '../../'
 
-const CurrencyLarge = () => {
+const CurrencyLarge = (props) => {
   return (
     <>
       <Currency
+          {...props}
           amount="2,000.50"
           size="lg"
       />
       <Currency
+          {...props}
           align="center"
           amount="342"
           label="Caption"
@@ -16,6 +18,7 @@ const CurrencyLarge = () => {
           symbol="€"
       />
       <Currency
+          {...props}
           align="right"
           amount="45"
           label="Caption"

data/app/pb_kits/playbook/pb_currency/docs/_currency_medium.jsx

@@ -1,15 +1,17 @@
 import React from 'react'
 import { Currency } from '../../'
 
-const CurrencyMedium = () => {
+const CurrencyMedium = (props) => {
   return (
     <>
       <Currency
+          {...props}
           amount="2,000.50"
           label="Caption"
           size="md"
       />
       <Currency
+          {...props}
           align="center"
           amount="342"
           label="Caption"
@@ -17,6 +19,7 @@ const CurrencyMedium = () => {
           symbol="€"
       />
       <Currency
+          {...props}
           align="right"
           amount="45"
           label="Caption"

data/app/pb_kits/playbook/pb_currency/docs/_currency_small.jsx

@@ -1,15 +1,17 @@
 import React from 'react'
 import { Currency } from '../../'
 
-const CurrencySmall = () => {
+const CurrencySmall = (props) => {
   return (
     <>
       <Currency
+          {...props}
           amount="2,000.50"
           label="Caption"
           size="sm"
       />
       <Currency
+          {...props}
           align="center"
           amount="342"
           label="Caption"
@@ -17,6 +19,7 @@ const CurrencySmall = () => {
           symbol="€"
       />
       <Currency
+          {...props}
           align="right"
           amount="45"
           label="Caption"

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

@@ -4,9 +4,8 @@ examples:
   - currency_small: Small
   - currency_medium: Medium
   - currency_large: Large
-  - currency_dark: Dark
+
   react:
   - currency_small: Small
   - currency_medium: Medium
   - currency_large: Large
-  - currency_dark: Dark

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

@@ -1,4 +1,3 @@
 export { default as CurrencySmall } from './_currency_small.jsx'
 export { default as CurrencyLarge } from './_currency_large.jsx'
 export { default as CurrencyMedium } from './_currency_medium.jsx'
-export { default as CurrencyDark } from './_currency_dark.jsx'

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_align.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import { DashboardValue } from '../../'
 
-const DashboardValueAlign = () => {
+const DashboardValueAlign = (props) => {
   return (
     <div>
       <DashboardValue
+          {...props}
           statChange={{ change: 'decrease', value: '26.1' }}
           statLabel="Top Title Value"
           statValue={{ value: '1,428', unit: 'appts' }}
@@ -14,6 +15,7 @@ const DashboardValueAlign = () => {
       <br />
 
       <DashboardValue
+          {...props}
           align="center"
           statChange={{ change: 'decrease', value: 56.1 }}
           statLabel="Top Title Value"
@@ -24,6 +26,7 @@ const DashboardValueAlign = () => {
       <br />
 
       <DashboardValue
+          {...props}
           align="right"
           statChange={{ change: 'decrease', value: 86 }}
           statLabel="Top Title Value"

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import { DashboardValue } from '../../'
 
-const DashboardValueDefault = () => {
+const DashboardValueDefault = (props) => {
   return (
     <div>
       <DashboardValue
+          {...props}
           statChange={{ change: 'decrease', value: '26.1' }}
           statLabel="Decreased Value"
           statValue={{ value: '1,428', unit: 'appts' }}
@@ -14,6 +15,7 @@ const DashboardValueDefault = () => {
       <br />
 
       <DashboardValue
+          {...props}
           statChange={{ change: 'increase', value: 56.1 }}
           statLabel="Increased Value"
           statValue={{ value: '938', unit: 'homes' }}
@@ -23,6 +25,7 @@ const DashboardValueDefault = () => {
       <br />
 
       <DashboardValue
+          {...props}
           statChange={{ value: 86 }}
           statLabel="Neutral Value"
           statValue={{ value: '261', unit: 'windows' }}