playbook_ui 7.0.1.pre.alpha9 → 7.0.1.pre.alpha15

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

@@ -20,8 +20,7 @@ const DatePickerDefaultDate = () => (
         pickerId="date-picker-default-date3"
     />
     <DatePicker
-        defaultDate="blank"
-        label="Blank"
+        label="Default Behavior"
         pickerId="date-picker-default-date4"
     />
   </div>

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

@@ -0,0 +1 @@
+The `defaultDate`/`default_date` prop has a null or empty string value by default.  You can pass a string or date object if you want a default value on page load.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb

@@ -1,19 +1,23 @@
 <%= pb_rails("date_picker", props: {
+  default_date: (Date.today).httpdate,
   format: "m-d-Y",
   picker_id: "date-picker-format1"
 }) %>
 
 <%= pb_rails("date_picker", props: {
+  default_date: (Date.today).httpdate,
   format: "m/d/y",
   picker_id: "date-picker-format2"
 }) %>
 
 <%= pb_rails("date_picker", props: {
+  default_date: (Date.today).httpdate,
   format: "n-j-y",
   picker_id: "date-picker-format3"
 }) %>
 
 <%= pb_rails("date_picker", props: {
+  default_date: (Date.today).httpdate,
   format: "Y-d-m",
   picker_id: "date-picker-format4"
 }) %>

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

@@ -4,18 +4,22 @@ import { DatePicker } from '../../'
 const DatePickerFormat = () => (
   <div>
     <DatePicker
+        defaultDate={new Date()}
         format="m-d-Y"
         pickerId="date-picker-format1"
     />
     <DatePicker
+        defaultDate={new Date()}
         format="m/d/y"
         pickerId="date-picker-format2"
     />
     <DatePicker
+        defaultDate={new Date()}
         format="n-j-y"
         pickerId="date-picker-format3"
     />
     <DatePicker
+        defaultDate={new Date()}
         format="Y-d-m"
         pickerId="date-picker-format4"
     />

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.html.erb

@@ -1,26 +1,26 @@
 <%= pb_rails("date_picker", props: {
   input_aria: { label: "input-field" },
   input_data: { key: "value", key2: "value2" },
+  label: "Aria, Name, and Data Attributes",
   name: "date-field",
   picker_id: "date-picker-input1",
-  type: "date"
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  default_date: "blank",
+  label: "Custom Placeholder",
   picker_id: "date-picker-input2",
-  placeholder: "Select Date",
+  placeholder: "custom-placeholder",
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  default_date: "blank",
-  disable_input: true,
+  label: "Blank Placeholder",
   picker_id: "date-picker-input3",
-  placeholder: "Disabled Input"
+  placeholder: ""
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  dark: true,
-  hide_label: true,
-  picker_id: "date-picker-input4"
+  disable_input: true,
+  label: "Disable Input",
+  picker_id: "date-picker-input4",
+  placeholder: "Disabled Input"
 }) %>

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

@@ -6,25 +6,25 @@ const DatePickerInput = () => (
     <DatePicker
         inputAria={{ label: 'input-field' }}
         inputData={{ key: 'value', key2: 'value2' }}
+        label="Aria, Name, and Data Attributes"
         name="date-field"
         pickerId="date-picker-input1"
-        type="date"
     />
     <DatePicker
-        defaultDate="blank"
+        label="Custom Placeholder"
         pickerId="date-picker-input2"
-        placeholder="Select Date"
+        placeholder="custom-placeholder"
     />
     <DatePicker
-        defaultDate="blank"
-        disableInput
+        label="Blank Placeholder"
         pickerId="date-picker-input3"
-        placeholder="Disabled Input"
+        placeholder=""
     />
     <DatePicker
-        dark
-        hideLabel
+        disableInput
+        label="Disable Input"
         pickerId="date-picker-input4"
+        placeholder="Disabled Input"
     />
   </div>
 )

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_read_only: Read Only
   - 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_read_only: Read Only
   - 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 DatePickerReadOnly } from './_date_picker_read_only.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_picker/sass_partials/_calendar_input_icon.scss

@@ -1,5 +1,6 @@
 // Calendar Icon Styles
 .cal_icon_wrapper {
+  pointer-events: none;
   position: absolute;
   top: $space_md + 2;
   right: 0;

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.html.erb

@@ -2,21 +2,15 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
+    <div class="pb_date_range_inline_wrapper">
+      <% if object.icon == true %>
+        <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: object.size, classname: "pb_date_range_inline_icon" }) }) %>
+      <% end %>
 
-    <%= pb_rails("body", props: { tag: "span", color: "light" }) do %>
-      <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
-    <% end %>
+      <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: object.start_date_display }) %>
 
-    <%= pb_rails("body", props: { tag: "span"}) do %>
-      <%= object.start_date_display %>
-    <% end %>
-
-    <%= pb_rails("body", props: { tag: "span", color: "light" }) do %>
-      <%= pb_rails("icon", props: { icon: "long-arrow-right", fixed_width: true }) %>
-    <% end %>
-
-    <%= pb_rails("body", props: { tag: "span"}) do %>
-      <%= object.end_date_display %>
-    <% end %>
+      <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "long-arrow-right", fixed_width: true, size: object.size, classname: "pb_date_range_inline_arrow"}) }) %>
 
+      <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: object.end_date_display }) %>
+    </div>
 <% end %>

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx

@@ -2,21 +2,30 @@
 
 import React from 'react'
 import DateTime from '../pb_kit/dateTime.js'
-import { Body, Icon } from '../'
+import { Body, Caption, Icon } from '../'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
+import { buildCss } from '../utilities/props'
 
 type DateRangeInlineProps = {
   className?: string,
-  data?: string,
-  endDate?: date,
   id?: string,
+  data?: string,
+  align?: "left" | "center" | "vertical",
+  size?: "sm" | "xs",
+  dark?: boolean,
+  icon?: boolean,
   startDate?: date,
+  endDate?: date
 }
 
-const dateTimestamp = (dateValue) => {
+const dateTimestamp = (dateValue, includeYear) => {
   const date = new DateTime({ value: dateValue })
-  return `${date.toDay()} ${date.toMonth()} ${date.toYear()}`
+  if (includeYear) {
+    return `${date.toMonth()} ${date.toDay()}, ${date.toYear()}`
+  } else {
+    return `${date.toMonth()} ${date.toDay()}`
+  }
 }
 
 const dateTimeIso = (dateValue) => {
@@ -25,41 +34,115 @@ const dateTimeIso = (dateValue) => {
 }
 
 const DateRangeInline = (props: DateRangeInlineProps) => {
-  const { endDate, startDate } = props
+  const {
+    icon = false,
+    dark = false,
+    size = 'sm',
+    align = 'left',
+    startDate,
+    endDate,
+    className,
+  } = props
+
+  const iconContent = () => {
+    return (
+      <If condition={icon}>
+        <Body
+            color="light"
+            tag="span"
+        >
+          <Icon
+              className="pb_date_range_inline_icon"
+              dark={dark}
+              fixedWidth
+              icon="calendar-alt"
+              size={size}
+              tag="span"
+          />
+        </Body>
+      </If>
+    )
+  }
+
+  const dateInCurrentYear = () => {
+    const currentDate = new Date()
+    return startDate.getFullYear() == endDate.getFullYear() && startDate.getFullYear() == currentDate.getFullYear()
+  }
+
+  const dateRangeClasses =  buildCss('pb_date_range_inline_kit', align)
+
+  const renderTime = (date) => {
+    return (
+      <time dateTime={dateTimeIso(date)}>
+        <Choose>
+          <When condition={dateInCurrentYear()}>
+            {` ${dateTimestamp(date, false)} `}
+          </When>
+          <Otherwise>
+            {` ${dateTimestamp(date, true)} `}
+          </Otherwise>
+        </Choose>
+      </time>
+    )
+  }
+
   return (
-    <div className={classnames('pb_date_range_inline', globalProps(props))}>
-      <Body
-          color="light"
-          tag="span"
-      >
-        <Icon
-            fixedWidth
-            icon="calendar-alt"
-        />
-      </Body>
-      <Body tag="span">
-        <time dateTime={dateTimeIso(startDate)}>
-          {` ${dateTimestamp(
-          startDate
-        )} `}
-        </time>
-      </Body>
-      <Body
-          color="light"
-          tag="span"
-      >
-        <Icon
-            fixedWidth
-            icon="long-arrow-right"
-        />
-      </Body>
-      <Body tag="span">
-        <time dateTime={dateTimeIso(endDate)}>
-          {` ${dateTimestamp(
-          endDate
-        )} `}
-        </time>
-      </Body>
+    <div className={classnames(dateRangeClasses, globalProps(props), className)}>
+      <div className="pb_date_range_inline_wrapper">
+        <If condition={size == 'xs'}>
+          {iconContent()}
+          <Caption
+              dark={dark}
+              tag="span"
+          >
+            {renderTime(startDate)}
+          </Caption>
+          <Caption
+              dark={dark}
+              tag="span"
+          >
+            <Icon
+                className="pb_date_range_inline_arrow"
+                fixedWidth
+                icon="long-arrow-right"
+            />
+          </Caption>
+          <Caption
+              dark={dark}
+              tag="span"
+          >
+            {renderTime(endDate)}
+          </Caption>
+        </If>
+
+        <If condition={size == 'sm'}>
+          {iconContent()}
+          <Body
+              dark={dark}
+              tag="span"
+          >
+            {renderTime(startDate)}
+          </Body>
+          <Body
+              color="light"
+              dark={dark}
+              tag="span"
+          >
+            <Icon
+                className="pb_date_range_inline_arrow"
+                dark={dark}
+                fixedWidth
+                icon="long-arrow-right"
+            />
+          </Body>
+          <Body
+              dark={dark}
+              tag="span"
+          >
+            {renderTime(endDate)}
+          </Body>
+        </If>
+      </div>
     </div>
   )
 }