playbook_ui 7.0.0.pre.alpha10 → 7.0.0.pre.alpha11

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/_dashboard_value.jsx

@@ -41,7 +41,11 @@ const DashboardValue = (props: DashboardValueProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_dashboard_value_kit', align), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_dashboard_value_kit', align),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

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_date_picker/_date_picker.jsx

@@ -71,9 +71,9 @@ const DatePicker = (props: DatePickerProps) => {
   const dataProps = buildDataProps(data)
   const classes = classnames(
     buildCss('pb_date_picker_kit'),
-    className,
     globalProps(props),
     error ? 'error' : null,
+    className
   )
 
   useEffect(() => {
@@ -88,6 +88,7 @@ const DatePicker = (props: DatePickerProps) => {
       maxDate: maxDate,
       minDate: minDate,
       mode: mode,
+      onChange: onChange,
       pickerId: pickerId,
       yearRange: yearRange,
     })
@@ -126,7 +127,6 @@ const DatePicker = (props: DatePickerProps) => {
             id={pickerId}
             label={hideLabel ? null : label}
             name={name}
-            onChange={onChange}
             placeholder={placeholder}
             type={type}
         />

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js

@@ -11,6 +11,7 @@ const datePickerHelper = (config) => {
     maxDate,
     minDate,
     mode,
+    onChange,
     pickerId,
     yearRange,
   } = config
@@ -99,6 +100,9 @@ const datePickerHelper = (config) => {
     onClose: [() => {
       window.removeEventListener('resize', calendarResizer)
     }],
+    onChange: [(selectedDates, dateStr) => {
+      onChange(dateStr, selectedDates)
+    }],
     onYearChange: [],
     prevArrow: '<i class="far fa-angle-left"></i>',
     static: true,

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react'
+import { DatePicker, LabelValue } from '../..'
+
+const DatePickerOnChange = () => {
+  const today = new Date()
+  const [dateString, setDateString] = useState(today.toLocaleDateString())
+  const [dateObj, setDateObj] = useState([today])
+
+  const changeHandler = (dateStr, selectedDates) => {
+    setDateString(dateStr)
+    setDateObj(selectedDates)
+  }
+
+  return (
+    <div>
+      <DatePicker
+          defaultDate={dateString}
+          marginBottom="lg"
+          onChange={changeHandler}
+          pickerId="date-picker-onchange"
+      />
+      <LabelValue
+          label="Date Object"
+          marginBottom="lg"
+          value={dateObj[0] ? dateObj[0].toString() : ''}
+      />
+      <LabelValue
+          label="Date String"
+          value={dateString}
+      />
+    </div>
+  )
+}
+export default DatePickerOnChange

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md

@@ -0,0 +1,3 @@
+Your change handler function has access to two arguments: `dateStr` and `selectedDates`.
+
+The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.

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

@@ -23,6 +23,7 @@ examples:
   - date_picker_default_date: Default Date
   - date_picker_input: Input Field
   - date_picker_label: Label
+  - date_picker_on_change: onChange
   - date_picker_range: Range
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates

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

@@ -3,6 +3,7 @@ export { default as DatePickerHideIcon } from './_date_picker_hide_icon.jsx'
 export { default as DatePickerInput } from './_date_picker_input.jsx'
 export { default as DatePickerDefaultDate } from './_date_picker_default_date.jsx'
 export { default as DatePickerLabel } from './_date_picker_label.jsx'
+export { default as DatePickerOnChange } from './_date_picker_on_change.jsx'
 export { default as DatePickerRange } from './_date_picker_range.jsx'
 export { default as DatePickerFormat } from './_date_picker_format.jsx'
 export { default as DatePickerDisabled } from './_date_picker_disabled.jsx'

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx

@@ -18,7 +18,11 @@ type DateRangeStackedProps = {
 
 const DateRangeStacked = (props: DateRangeStackedProps) => {
   const { className, dark = false, endDate, startDate } = props
-  const css = classnames(className, buildCss('pb_date_range_stacked'), globalProps(props))
+  const css = classnames(
+    buildCss('pb_date_range_stacked'),
+    globalProps(props),
+    className
+  )
 
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx

@@ -33,12 +33,12 @@ const DateStacked = (props: DateStackedProps) => {
     size = 'sm',
   } = props
   const classes = classnames(
-    className,
     buildCss('pb_date_stacked_kit', align, size, {
       dark: dark,
       reverse: reverse,
     }),
-    globalProps(props)
+    globalProps(props),
+    className
   )
 
   const currentYear = new Date().getFullYear().toString()

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx

@@ -20,7 +20,11 @@ type DateYearStackedProps = {
 const DateYearStacked = (props: DateYearStackedProps) => {
   const { align = 'left', className, dark = false, date } = props
   const dateTimestamp = new DateTime({ value: date })
-  const css = classnames(className, buildCss('pb_date_year_stacked', align), globalProps(props))
+  const css = classnames(
+    buildCss('pb_date_year_stacked', align),
+    globalProps(props),
+    className
+  )
 
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx

@@ -23,9 +23,9 @@ type FixedConfirmationToastProps = {
 const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   const { className, status = 'neutral', text } = props
   const css = classnames(
-    className,
     `pb_fixed_confirmation_toast_kit_${status}`,
-    globalProps(props)
+    globalProps(props),
+    className
   )
   const icon = iconMap[status]
 

data/app/pb_kits/playbook/pb_flex/_flex.jsx

@@ -51,8 +51,8 @@ const Flex = (props: FlexProps) => {
           reverseClass,
           wrapClass
         ),
-        className,
-        globalProps(props)
+        globalProps(props),
+        className
       )}
     >
       {children}

data/app/pb_kits/playbook/pb_flex/_flex_item.jsx

@@ -18,7 +18,7 @@ const FlexItem = (props: FlexItemPropTypes) => {
 
   return (
     <div
-        className={classnames(buildCss('pb_flex_item_kit', growClass), className, globalProps(props))}
+        className={classnames(buildCss('pb_flex_item_kit', growClass), globalProps(props), className)}
         style={fixedStyle}
     >
       {children}

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

@@ -24,7 +24,15 @@
   <%= 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" },
+    props: { text: "Example Checkbox", label: true },
+    checked_value: "yes",
+    unchecked_value: "no",
+    id: "checkbox-id",
+    name: "checkbox-name",
+    class: "checkbox-class" 
+  %>
   <%= 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_form_pill/_form_pill.jsx

@@ -18,8 +18,9 @@ type FormPillProps = {
 const FormPill = (props: FormPillProps) => {
   const { className, text, name, onClick = () => {}, avatarUrl } = props
   const css = classnames(
-    [`pb_form_pill_kit_${'primary'}`, className],
-    globalProps(props)
+    `pb_form_pill_kit_${'primary'}`,
+    globalProps(props),
+    className
   )
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_gauge/_gauge.jsx

@@ -101,7 +101,7 @@ const Gauge = (props: GaugeProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(css, className, globalProps(props))}
+        className={classnames(css, globalProps(props), className)}
         id={id}
     />
   )

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_highlight/_highlight.jsx

@@ -27,7 +27,7 @@ const Highlight = (props: HighlightProps) => {
     <Highlighter
         autoEscape
         data={data}
-        highlightClassName={classnames(className, globalProps(props))}
+        highlightClassName={classnames(globalProps(props), className)}
         highlightTag="span"
         id={id}
         searchWords={highlightedText}