playbook_ui 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.title2665

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

@@ -0,0 +1,23 @@
+<%= pb_rails("date_picker", props: {
+  label: "Unformatted Date Object",
+  default_date: Date.today,
+  picker_id: "date-picker-anti-pattern1"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  label: "Date Object Without Time - Displays Yesterday's Date",
+  default_date: Date.today.to_datetime.utc.iso8601,
+  picker_id: "date-picker-anti-pattern2"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  label: "Unformatted DateTime Object",
+  default_date: DateTime.current,
+  picker_id: "date-picker-anti-pattern3"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  label: "String Conversion Without ISO Formatting",
+  default_date: DateTime.current.utc.to_s,
+  picker_id: "date-picker-anti-pattern5"
+}) %>

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

@@ -0,0 +1 @@
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-default"}) %>

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

@@ -0,0 +1,14 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerDefault = (props) => (
+  <div>
+    <DatePicker
+        pickerId="date-picker-default"
+        {...props}
+    />
+  </div>
+)
+
+export default DatePickerDefault

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

@@ -0,0 +1,23 @@
+<%= pb_rails("date_picker", props: {
+  default_date: "07/25/2020",
+  label: "Default Date String",
+  picker_id: "date-picker-default-date1"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  default_date: DateTime.current.utc.iso8601,
+  label: "Default Date Dynamic",
+  picker_id: "date-picker-default-date2"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
+  label: "Default Date Range",
+  mode: "range",
+  picker_id: "date-picker-default-date3"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  label: "Default Behavior",
+  picker_id: "date-picker-default-date4"
+}) %>

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

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerDefaultDate = (props) => (
+  <div>
+    <DatePicker
+        defaultDate="07/31/2020"
+        label="Default Date String"
+        pickerId="date-picker-default-date1"
+        {...props}
+    />
+    <DatePicker
+        defaultDate={new Date().fp_incr(1)}
+        label="Default Date Dynamic"
+        pickerId="date-picker-default-date2"
+        {...props}
+    />
+    <DatePicker
+        defaultDate={[new Date(), new Date().fp_incr(7)]}
+        label="Default Date Range"
+        mode="range"
+        pickerId="date-picker-default-date3"
+        {...props}
+    />
+    <DatePicker
+        label="Default Behavior"
+        pickerId="date-picker-default-date4"
+        {...props}
+    />
+  </div>
+)
+
+export default DatePickerDefaultDate

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

@@ -0,0 +1,5 @@
+The `defaultDate`/`default_date` prop has a null or empty string value by default.  You can pass an ISO date string (preferred rails method) or date object (preferred JS method) if you want a default value on page load.  Use Ruby UTC DateTime objects and convert them to ISO date strings with `DateTime.now.utc.iso8601`.  
+
+If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor).  See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
+
+

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

@@ -0,0 +1,43 @@
+<%= pb_rails("date_picker", props: {
+  disable_date: [(DateTime.current + 1.day).utc.iso8601],
+  label: "Disable Single Date",
+  picker_id: "single-disabled-date"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  disable_date: [(DateTime.current + 1.day).utc.iso8601, (DateTime.current + 2.day).utc.iso8601],
+  label: "Disable Multiple Dates",
+  picker_id: "multiple-disabled-dates"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  disable_range: [
+          {
+            from: DateTime.current.utc.iso8601,
+            to: (DateTime.current + 7.day).utc.iso8601,
+          },
+        ],
+  label: "Disable Single Range",
+  picker_id: "single-date-range"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  disable_range: [
+          {
+            from: (DateTime.current + 1.day).utc.iso8601,
+            to: (DateTime.current + 2.day).utc.iso8601,
+          },
+          {
+            from: (DateTime.current + 7.day).utc.iso8601,
+            to: (DateTime.current + 14.day).utc.iso8601,
+          },
+        ],
+  label: "Disable Multiple Ranges",
+  picker_id: "multiple-date-ranges"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  disable_weekdays: ['Sunday', 'Saturday'],
+  label: "Disable Specific Weekdays",
+  picker_id: "disabled-weekdays"
+}) %>

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

@@ -0,0 +1,54 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerDisabled = (props) => (
+  <div>
+    <DatePicker
+        disableDate={[new Date().fp_incr(1)]}
+        label="Disable Single Date"
+        pickerId="single-disabled-date"
+        {...props}
+    />
+    <DatePicker
+        disableDate={[new Date().fp_incr(1), new Date().fp_incr(3)]}
+        label="Disable Multiple Dates"
+        pickerId="multiple-disabled-dates"
+        {...props}
+    />
+    <DatePicker
+        disableRange={[
+          {
+            from: new Date().fp_incr(1),
+            to: new Date().fp_incr(7),
+          },
+        ]}
+        label="Disable Single Range"
+        pickerId="single-date-range"
+        {...props}
+    />
+    <DatePicker
+        disableRange={[
+          {
+            from: new Date().fp_incr(1),
+            to: new Date().fp_incr(3),
+          },
+          {
+            from: new Date().fp_incr(7),
+            to: new Date().fp_incr(14),
+          },
+        ]}
+        label="Disable Multiple Ranges"
+        pickerId="multiple-date-ranges"
+        {...props}
+    />
+    <DatePicker
+        disableWeekdays={['Sunday', 'Saturday']}
+        label="Disable Specific Weekdays"
+        pickerId="disabled-weekdays"
+        {...props}
+    />
+  </div>
+)
+
+export default DatePickerDisabled

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

@@ -0,0 +1,4 @@
+<%= pb_rails("date_picker", props: { 
+  error: "Invalid date. Please pick a valid date.",
+  picker_id: "date-picker-error"
+}) %>

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

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerError = (props) => (
+  <div>
+    <DatePicker
+        error="Invalid date. Please pick a valid date."
+        pickerId="date-picker-error"
+        {...props}
+    />
+  </div>
+)
+
+export default DatePickerError

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

@@ -0,0 +1,27 @@
+<%= pb_rails("button", props: { id: "close-btn", margin_right: "sm", text: "Close" }) %>
+<%= pb_rails("button", props: { id: "clear-btn", margin_right: "sm", text: "Clear" }) %>
+<%= pb_rails("button", props: { id: "today-btn", text: "Today" }) %>
+<%= pb_rails("date_picker", props: {
+  hide_label: true,
+  margin_top: "sm",
+  picker_id: "fp-methods"
+}) %>
+
+<%= javascript_tag do %>
+  window.addEventListener("DOMContentLoaded", () => {
+    const fp = document.querySelector("#fp-methods")._flatpickr
+    const closeBtn = document.querySelector("#close-btn")
+    const clearBtn = document.querySelector("#clear-btn")
+    const todayBtn = document.querySelector("#today-btn")
+
+    closeBtn.addEventListener("click", () => {
+      fp.close()
+    })
+    clearBtn.addEventListener("click", () => {
+      fp.clear()
+    })
+    todayBtn.addEventListener("click", () => {
+      fp.setDate(new Date(), true)
+    })
+  })
+<% end %>

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

@@ -0,0 +1,47 @@
+import React, { useEffect } from 'react'
+
+import DatePicker from '../_date_picker'
+
+import Button from '../../pb_button/_button'
+
+const DatePickerFlatpickrMethods = () => {
+  let fpInstance
+  useEffect(() => {
+    fpInstance = document.querySelector('#fp-methods')._flatpickr
+  }, [])
+  const clickHandlerClear = () => {
+    fpInstance.clear()
+  }
+  const clickHandlerClose = () => {
+    fpInstance.close()
+  }
+  const clickHandlerToday = () => {
+    fpInstance.setDate(new Date(), true)
+  }
+
+  return (
+    <div>
+      <Button
+          marginRight="sm"
+          onClick={clickHandlerClose}
+          text="Close"
+      />
+      <Button
+          marginRight="sm"
+          onClick={clickHandlerClear}
+          text="Clear"
+      />
+      <Button
+          onClick={clickHandlerToday}
+          text="Today"
+      />
+      <DatePicker
+          hideLabel
+          marginTop="sm"
+          pickerId="fp-methods"
+      />
+    </div>
+  )
+}
+
+export default DatePickerFlatpickrMethods

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

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

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

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerFormat = (props) => (
+  <div>
+    <DatePicker
+        defaultDate={new Date()}
+        format="m-d-Y"
+        pickerId="date-picker-format1"
+        {...props}
+    />
+    <DatePicker
+        defaultDate={new Date()}
+        format="m/d/y"
+        pickerId="date-picker-format2"
+        {...props}
+    />
+    <DatePicker
+        defaultDate={new Date()}
+        format="n-j-y"
+        pickerId="date-picker-format3"
+        {...props}
+    />
+    <DatePicker
+        defaultDate={new Date()}
+        format="Y-d-m"
+        pickerId="date-picker-format4"
+        {...props}
+    />
+  </div>
+)
+
+export default DatePickerFormat

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

@@ -0,0 +1 @@
+A full list of formatting tokens, i.e. `"m/d/Y"` can be found [here](https://flatpickr.js.org/formatting/).

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

@@ -0,0 +1,4 @@
+<%= pb_rails("date_picker", props: { 
+  hide_icon: true, 
+  picker_id: "date-picker-hide-icon" 
+}) %>

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

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerHideIcon = (props) => (
+  <div>
+    <DatePicker
+        hideIcon
+        pickerId="date-picker-hide-icon"
+        {...props}
+    />
+  </div>
+)
+
+export default DatePickerHideIcon

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

@@ -0,0 +1,37 @@
+<%= pb_rails("date_picker", props: {
+  label: "onChange",
+  picker_id: "date-picker-hooks-onchange"
+}) %>
+
+<%= javascript_tag do %>
+  window.addEventListener("DOMContentLoaded", () => {
+    <%# Access flatpickr instance with picker id and assign it a variable %>
+    const fp = document.querySelector("#date-picker-hooks-onchange")._flatpickr
+
+    <%# Define Hook %>
+    const changeHook = () => {
+      alert('date changed')
+    }
+    <%# Push one or more hooks to onChange config array %>
+    fp.config.onChange.push(changeHook)
+  })
+<% end %>
+
+<%= pb_rails("date_picker", props: {
+  label: "onOpen",
+  picker_id: "date-picker-hooks-onopen"
+}) %>
+
+<%= javascript_tag do %>
+  window.addEventListener("DOMContentLoaded", () => {
+    <%# Access flatpickr instance with picker id and assign it a variable %>
+    const fp = document.querySelector("#date-picker-hooks-onopen")._flatpickr
+
+    <%# Define Hook %>
+    const openHook = () => {
+      alert('calendar opened')
+    }
+    <%# Push one or more hooks to onOpen config array %>
+    fp.config.onOpen.push(openHook)
+  })
+<% end %>

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

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerHooks = (props) => {
+  // Define hooks
+  const changeHook = () => {
+    alert('date changed')
+  }
+  const openHook = () => {
+    alert('calendar opened')
+  }
+
+  // Access flatpickr instances with picker ids and assign them variables
+  window.addEventListener('DOMContentLoaded', () => {
+    const fpChange = document.querySelector('#date-picker-hooks-onchange')._flatpickr
+    const fpOpen = document.querySelector('#date-picker-hooks-onopen')._flatpickr
+
+    // Push one or more hooks to flatpickr instance's Event config arrays
+    fpChange.config.onChange.push(changeHook)
+    fpOpen.config.onOpen.push(openHook)
+  })
+
+  return (
+    <div>
+      <DatePicker
+          label="onChange"
+          pickerId="date-picker-hooks-onchange"
+          {...props}
+      />
+      <DatePicker
+          label="onOpen"
+          pickerId="date-picker-hooks-onopen"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DatePickerHooks

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

@@ -0,0 +1 @@
+You can find a full list of flatpickr events and hooks in their [documentation](https://flatpickr.js.org/events/).

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

@@ -0,0 +1,17 @@
+<%= pb_rails("date_picker", props: {
+  classname: "inline-date-picker",
+  hide_icon: true,
+  inline: true,
+  picker_id: "date-picker-inline"
+}) %>
+
+<%= javascript_tag do %>
+  window.addEventListener("DOMContentLoaded", (event) => {
+    const fpInline = document.querySelector("#date-picker-inline")._flatpickr
+    <!-- Display the angle-down icon when a date has been selected -->
+    const showAngleDownHandler = () => {
+      document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
+    }
+    fpInline.config.onChange.push(showAngleDownHandler)
+  })
+<% end %>

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

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerInline = (props) => {
+  const showAngleDownHandler = (dateSelected) => {
+    if (dateSelected) {
+      document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
+    }
+  }
+
+  return (
+    <div>
+      <DatePicker
+          className="inline-date-picker"
+          hideIcon
+          inLine
+          onChange={showAngleDownHandler}
+          pickerId="date-picker-inline"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DatePickerInline

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

@@ -0,0 +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",
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  label: "Custom Placeholder",
+  picker_id: "date-picker-input2",
+  placeholder: "custom-placeholder",
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  label: "Blank Placeholder",
+  picker_id: "date-picker-input3",
+  placeholder: ""
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  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

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerInput = (props) => (
+  <div>
+    <DatePicker
+        inputAria={{ label: 'input-field' }}
+        inputData={{ key: 'value', key2: 'value2' }}
+        label="Aria, Name, and Data Attributes"
+        name="date-field"
+        pickerId="date-picker-input1"
+        {...props}
+    />
+    <DatePicker
+        label="Custom Placeholder"
+        pickerId="date-picker-input2"
+        placeholder="custom-placeholder"
+        {...props}
+    />
+    <DatePicker
+        label="Blank Placeholder"
+        pickerId="date-picker-input3"
+        placeholder=""
+        {...props}
+    />
+    <DatePicker
+        disableInput
+        label="Disable Input"
+        pickerId="date-picker-input4"
+        placeholder="Disabled Input"
+        {...props}
+    />
+  </div>
+)
+
+export default DatePickerInput

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

@@ -0,0 +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.
+
+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_label.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("date_picker", props: {
+  label: "Your Label Here",
+  picker_id: "date-picker-label"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  hide_label: true,
+  picker_id: "date-picker-hide-label"
+}) %>

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

@@ -0,0 +1,20 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerLabel = (props) => (
+  <div>
+    <DatePicker
+        label="Your Label Here"
+        pickerId="date-picker-label"
+        {...props}
+    />
+    <DatePicker
+        hideLabel
+        pickerId="date-picker-hide-label"
+        {...props}
+    />
+  </div>
+)
+
+export default DatePickerLabel

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

@@ -0,0 +1 @@
+Default label prop is `"Date Picker"`.  To remove the label set the `hideLabel` prop in React or the `hide_label` prop in Rails to `true`.

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

@@ -0,0 +1,14 @@
+<%= pb_rails("date_picker", props: {
+  label: "Dynamic dates",
+  max_date: (DateTime.current + 1.day).utc.iso8601,
+  min_date: (DateTime.current - 1.day).utc.iso8601,
+  picker_id: "date-picker-min-max1"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  format: "m/d/Y",
+  label: "Absolute formatted dates",
+  max_date: "10/20/2020",
+  min_date: "10/10/2020",
+  picker_id: "date-picker-min-max2"
+}) %>

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

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerMinMax = (props) => (
+  <div>
+    <DatePicker
+        label="Dynamic dates using flatpickr increment function"
+        maxDate={new Date().fp_incr(3)}
+        minDate={new Date().fp_incr(-3)}
+        pickerId="date-picker-min-max1"
+        {...props}
+    />
+    <DatePicker
+        format="m/d/Y"
+        label="Absolute formatted dates"
+        maxDate="10/20/2020"
+        minDate="10/10/2020"
+        pickerId="date-picker-min-max2"
+        {...props}
+    />
+  </div>
+)
+
+export default DatePickerMinMax