playbook_ui 7.0.0.pre.alpha10 → 7.0.0.pre.alpha15

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

@@ -1,3 +1,5 @@
 The date picker is built with the text input kit.  Text input props you pass to the date picker kit will be forwarded to the input, with a few exceptions.  The `value` attribute is automatically handled and bound to whatever date string is contained by the input field.  You cannot pass a custom value prop.  `id` props passed to the date picker kit will be assigned to it's parent/wrapper div.  The `pickerId` prop is passed directly to the input and is required to instatiate the date picker.
 
-You must use `inputAria` or `input_aria` and `inputData` or `input_data` props if you wish to pass data or aria attributes to the text input kit.  If you use `data` or `aria` props they will be passed to the date picker kit itself instead.  Also be aware the default behavior of text input aria and data props is to pass those props to attributes on the wrapping div not on the input itself.
+You must use `inputAria` or `input_aria` and `inputData` or `input_data` props if you wish to pass data or aria attributes to the text input kit.  If you use `data` or `aria` props they will be passed to the date picker kit itself instead.  Also be aware the default behavior of text input aria and data props is to pass those props to attributes on the wrapping div not on the input itself.
+
+The placeholder prop has a default string value: "Select Date".  You can replace this with your own string or an empty string if you'd prefer it blank.

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/_date_picker_range.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("date_picker", props: {
+  default_date: [(Date.today).httpdate, (Date.today + 7).httpdate],
   mode: "range",
   picker_id: "date-picker-range"
 }) %>

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

@@ -4,6 +4,7 @@ import { DatePicker } from '../../'
 const DatePickerRange = () => (
   <div>
     <DatePicker
+        defaultDate={[new Date(), new Date().fp_incr(6)]}
         mode="range"
         pickerId="date-picker-range"
     />

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

@@ -12,9 +12,7 @@ examples:
   - date_picker_min_max: Min Max
   - date_picker_error: Error
   - date_picker_hooks: Hooks
-  # - date_picker_allow_input: Allow Input
   - date_picker_year_range: Year Range
-  - date_picker_dark: Dark
   
   
   react:
@@ -23,13 +21,12 @@ 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
   - date_picker_min_max: Min Max
   - date_picker_error: Error
   - date_picker_hooks: Hooks
-  # - date_picker_allow_input: Allow Input
   - date_picker_year_range: Year Range
-  - date_picker_dark: Dark
   

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

@@ -3,12 +3,11 @@ 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'
 export { default as DatePickerMinMax } from './_date_picker_min_max.jsx'
 export { default as DatePickerError } from './_date_picker_error.jsx'
 export { default as DatePickerHooks } from './_date_picker_hooks.jsx'
-// export { default as DatePickerAllowInput } from './_date_picker_allow_input.jsx'
 export { default as DatePickerYearRange } from './_date_picker_year_range.jsx'
-export { default as DatePickerDark } from './_date_picker_dark.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,8 +24,16 @@
   <%= 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.date_picker :example_date_picker1, props: { default_date: "blank" } %>
+  <%= 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_picker_1, props: { default_date: "blank", label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -28,7 +28,7 @@
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
-  <%= form.date_picker :example_date_picker2, props: { default_date: 'blank', required: true } %>
+  <%= form.date_picker :example_date_picker_2, props: { default_date: 'blank', label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -14,8 +14,8 @@
     :example_text_area,
     :example_select_field,
     :example_collection_select_field,
-    :example_checkbox_field
-    :example_date_picker_field1
+    :example_checkbox_field,
+    :example_date_picker_field_1
 
 
     def self.model_name
@@ -52,7 +52,7 @@
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { label: true } %>
   <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true } %>
-  <%= form.date_picker :example_date_picker_field1, props: { default_date: 'blank' } %>
+  <%= form.date_picker :example_date_picker_field_1, props: { default_date: 'blank', label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -14,8 +14,8 @@
     :example_text_area,
     :example_select_field,
     :example_collection_select_field,
-    :example_checkbox_field
-    :example_date_picker_field2
+    :example_checkbox_field,
+    :example_date_picker_field_2
 
 
     def self.model_name
@@ -52,7 +52,7 @@
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { required: true, blank_selection: "Select One...", label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { required: true, blank_selection: "Select One...", label: true } %>
   <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true, required: true } %>
-  <%= form.date_picker :example_date_picker_field2, props: { default_date: 'blank', required: true } %>
+  <%= form.date_picker :example_date_picker_field_2, props: { default_date: 'blank', label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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/form_builder/date_picker_field.rb

@@ -8,6 +8,7 @@ module Playbook
           prefix = @object_name
           html_attribute_name = "#{prefix}[#{name}]"
           html_id = "#{prefix}_#{name}"
+          props[:label] = @template.label(@object_name, name) if props[:label] == true
 
           props[:name] = html_attribute_name
           props[:picker_id] = html_id

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}

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx

@@ -40,12 +40,12 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
 
   const classes = (className, dark) =>
     classnames(
-      className,
       {
         'pb_home_address_street': !dark,
         'pb_home_address_street_dark': dark,
       },
-      globalProps(props)
+      globalProps(props),
+      className
     )
   return (
     <div className={classes(className, dark)}>

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'