playbook_ui 6.6.1 → 6.7.0.pre.alpha1

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' }}

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -24,7 +24,7 @@
   <%= form.text_area :example_text_area, props: { label: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-  <%= form.check_box :example_checkbox, data: { field1: "value1", field2: "value2" }, props: { text: "Example Checkbox", label: true } %>
+  <%= form.check_box :example_checkbox, data: { field1: "value1", field2: "value2" }, checked_value: "yes", unchecked_value: "no", props: { text: "Example Checkbox", label: true } %>
   <%= form.date_picker :example_date_picker1, props: { default_date: "blank" } %>
 
   <%= form.actions do |action| %>

data/app/pb_kits/playbook/pb_form/form_builder/checkbox_field.rb

@@ -4,13 +4,18 @@ module Playbook
   module PbForm
     module FormBuilder
       module CheckboxField
-        def check_box(name, props: {}, **options, &block)
+        def check_box(name, props: {}, **options)
           label_text = @template.label(@object_name, name) if props[:label] == true
           options[:required] = true if props[:required]
           props[:margin_bottom] = "sm"
           props[:form_spacing] = true
 
-          input = super(name, **options, &block)
+          checked_value = options[:checked_value]
+          unchecked_value = options[:unchecked_value]
+          options.delete(:checked_value)
+          options.delete(:unchecked_value)
+
+          input = super(name, options, checked_value, unchecked_value)
 
           if props[:label]
             @template.pb_rails("caption", props: { text: label_text, margin_bottom: "xs" }) +

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import { Hashtag } from '../../'
 
-const HashtagDefault = () => {
+const HashtagDefault = (props) => {
   return (
     <div>
       <Hashtag
           text="470297"
           type="project"
           url="https://google.com"
+          {...props}
       />
       <br />
       <br />
@@ -15,6 +16,7 @@ const HashtagDefault = () => {
           text="123456"
           type="home"
           url="https://google.com"
+          {...props}
       />
       <br />
       <br />
@@ -22,6 +24,7 @@ const HashtagDefault = () => {
           text="456789"
           type="appointment"
           url="https://google.com"
+          {...props}
       />
       <br />
       <br />
@@ -29,6 +32,7 @@ const HashtagDefault = () => {
           text="654321"
           type="default"
           url="https://google.com"
+          {...props}
       />
     </div>
   )

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

@@ -2,8 +2,6 @@ examples:
 
   rails:
   - hashtag_default: Hashtag Types
-  - hashtag_dark: Dark
 
   react:
   - hashtag_default: Hashtag Types
-  - hashtag_dark: Dark

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

@@ -1,2 +1 @@
 export { default as HashtagDefault } from './_hashtag_default.jsx'
-export { default as HashtagDark } from './_hashtag_dark.jsx'

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { HomeAddressStreet } from '../../'
 
-const HomeAddressStreetEmphasis = () => {
+const HomeAddressStreetEmphasis = (props) => {
   return (
     <div>
       <HomeAddressStreet
@@ -14,6 +14,7 @@ const HomeAddressStreetEmphasis = () => {
           state="PA"
           territory="PHL"
           zipcode="19382"
+          {...props}
       />
       <br />
       <br />
@@ -28,6 +29,7 @@ const HomeAddressStreetEmphasis = () => {
           state="PA"
           territory="PHL"
           zipcode="19382"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_modified.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { HomeAddressStreet } from '../../'
 
-const HomeAddressStreetModified = () => {
+const HomeAddressStreetModified = (props) => {
   return (
     <HomeAddressStreet
         address="70 Prospect Ave"
@@ -9,6 +9,7 @@ const HomeAddressStreetModified = () => {
         state="PA"
         territory="PHL"
         zipcode="19382"
+        {...props}
     />
   )
 }

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

@@ -4,12 +4,10 @@ examples:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
-  - home_address_street_dark: Dark
+
 
 
   react:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
-  - home_address_street_dark: Dark
-

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

@@ -1,4 +1,3 @@
 export { default as HomeAddressStreetDefault } from './_home_address_street_default.jsx'
 export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
 export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
-export { default as HomeAddressStreetDark } from './_home_address_street_dark.jsx'

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

@@ -4,16 +4,10 @@ examples:
   - label_value_default: Default
   - label_value_details: Details
   - label_value_details_examples: Other Examples
-  - label_value_dark: Dark
-  - label_value_details_dark: Details Dark
-  - label_value_details_examples_dark: Other Examples Dark
+
   
   
   react:
   - label_value_default: Default
   - label_value_details: Details
   - label_value_details_examples: Other Examples
-  - label_value_dark: Dark
-  - label_value_details_dark: Details Dark
-  - label_value_details_examples_dark: Other Examples Dark
-

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

@@ -1,7 +1,3 @@
 export { default as LabelValueDefault } from './_label_value_default.jsx'
 export { default as LabelValueDetails } from './_label_value_details.jsx'
 export { default as LabelValueDetailsExamples } from './_label_value_details_examples.jsx'
-
-export { default as LabelValueDark } from './_label_value_dark.jsx'
-export { default as LabelValueDetailsDark } from './_label_value_details_dark.jsx'
-export { default as LabelValueDetailsExamplesDark } from './_label_value_details_examples_dark.jsx'

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

@@ -3,13 +3,9 @@ examples:
   rails:
   - legend_default: Default
   - legend_prefix: With Prefix Text
-  - legend_dark: Dark Mode
-  - legend_dark_prefix: Dark Mode with Prefix Text
+ 
   
   
   react:
   - legend_default: Default
   - legend_prefix: With Prefix Text
-  - legend_dark: Dark Mode
-  - legend_dark_prefix: Dark Mode with Prefix Text
-  

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

@@ -1,4 +1,2 @@
 export { default as LegendDefault } from './_legend_default.jsx'
 export { default as LegendPrefix } from './_legend_prefix.jsx'
-export { default as LegendDark } from './_legend_dark.jsx'
-export { default as LegendDarkPrefix } from './_legend_dark_prefix.jsx'

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

@@ -7,11 +7,7 @@ examples:
   - list_xpadding: Horizontal Padding
   - list_layout_left: Layout Left
   - list_layout_right: Layout Right
-  - list_dark: Dark Default
-  - list_dark_lg: Dark Large
-  - list_dark_ordered: Dark Ordered
-  - list_dark_borderless: Dark Borderless
-  - list_dark_xpadding: Dark Horizontal Padding
+ 
   react:
   - list_default: Default
   - list_lg: Large
@@ -20,9 +16,3 @@ examples:
   - list_xpadding: Horizontal Padding
   - list_layout_left: Layout Left
   - list_layout_right: Layout Right
-  - list_dark: Dark Default
-  - list_dark_lg: Dark Large
-  - list_dark_ordered: Dark Ordered
-  - list_dark_borderless: Dark Borderless
-  - list_dark_xpadding: Dark Horizontal Padding
- 

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

@@ -1,13 +1,7 @@
 export { default as ListDefault } from './_list_default.jsx'
-export { default as ListDark } from './_list_dark.jsx'
 export { default as ListXpadding } from './_list_xpadding.jsx'
-export { default as ListDarkBorderless } from './_list_dark_borderless.jsx'
-export { default as ListDarkLg } from './_list_dark_lg.jsx'
-export { default as ListDarkXpadding } from './_list_dark_xpadding.jsx'
-export { default as ListDarkOrdered } from './_list_dark_ordered.jsx'
 export { default as ListLayoutRight } from './_list_layout_right.jsx'
 export { default as ListLayoutLeft } from './_list_layout_left.jsx'
 export { default as ListLg } from './_list_lg.jsx'
 export { default as ListOrdered } from './_list_ordered.jsx'
 export { default as ListBorderless } from './_list_borderless.jsx'
-

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

@@ -2,10 +2,8 @@ examples:
   
   rails:
   - loading_inline_light: Light
-  - loading_inline_dark: Dark
+
   
   
   react:
   - loading_inline_light: Default
-  - loading_inline_dark: Default
-  

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

@@ -1,2 +1 @@
 export { default as LoadingInlineLight } from './_loading_inline_light.jsx'
-export { default as LoadingInlineDark } from './_loading_inline_dark.jsx'

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

@@ -3,9 +3,8 @@ examples:
   rails:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
-  - multiple_users_dark: Dark
+
 
   react:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
-  - multiple_users_dark: Dark

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

@@ -1,3 +1,2 @@
 export { default as MultipleUsersDefault } from './_multiple_users_default.jsx'
 export { default as MultipleUsersReverse } from './_multiple_users_reverse.jsx'
-export { default as MultipleUsersDark } from './_multiple_users_dark.jsx'

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

@@ -2,8 +2,7 @@ examples:
 
   rails:
   - multiple_users_stacked_default: Default
-  - multiple_users_stacked_dark: Dark
+
 
   react:
   - multiple_users_stacked_default: Default
-  - multiple_users_stacked_dark: Dark

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

@@ -1,2 +1 @@
 export { default as MultipleUsersStackedDefault } from './_multiple_users_stacked_default.jsx'
-export { default as MultipleUsersStackedDark } from './_multiple_users_stacked_dark.jsx'

data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss

@@ -71,4 +71,28 @@ $selector: ".pb_nav_list";
       }
     }
   }
+  &[class*=dark]{
+    [class*=pb_nav_list_kit_item]{
+      [class*=_link]{
+        border-color: rgba($white, $opacity_3);
+      }
+      &[class*=_active] [class*=_link]{
+        border-color: $white;
+        [class*=_text],[class*=_icon]{
+          color: $text_dk_default;
+        }
+      }
+      [class*=_link] {
+        [class*=_text],[class*=_icon]{
+          color: $text_dk_lighter;
+        }
+        &:hover{
+          background-color: rgba($white, $opacity_1);
+          [class*=_icon],[class*=_text] {
+            color: $white;
+          }
+        }
+      }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -136,7 +136,35 @@ $selector: ".pb_nav_list";
     [class*=_active] {
       background-color: $active_light;
     }
+    &[class*=dark]{
+      [class*=_active] {
+      background-color: rgba($white, $opacity_1);
+    }
+    }
   }
 
+  &[class*=dark]{
+    background: tint($bg_dark,10%);
+    [class*=pb_nav_list_kit_item]{
+      border-color: rgba($white, $opacity_1);
+      &[class*=_active] [class*=_link]{
+        border-color: $white;
+        [class*=_text],[class*=_icon]{
+          color: $text_dk_default;
+        }
+      }
+      [class*=_link] {
+        [class*=_text],[class*=_icon]{
+          color: $text_dk_lighter;
+        }
+        &:hover{
+          background-color: rgba($white, $opacity_1);
+          [class*=_icon],[class*=_text] {
+            color: $white;
+          }
+        }
+      }
+    }
+  }
 
 }