playbook_ui_docs 13.13.0.pre.alpha.PLAY1090csstokens1675 → 13.13.0.pre.alpha.play10221678

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5bb0a545b88b6360207fb88113d4ae35088a1e63d3ddbada1ee3cb64abc34383
-  data.tar.gz: 5a635feff777a5f8b00b08c7e7447bdf7ae60feeef59d810626f8ed269fe7624
+  metadata.gz: 8ed5f092b2d08dbaa2e7a36c3fcfd931e2f5cfe26d35fd553789bb029c620e63
+  data.tar.gz: 947c21a797f7c633cf6b1982acdc408f782e68d761ae1ec8fa0938ff07883b14
 SHA512:
-  metadata.gz: b79ac876ba8cc0b4f7e13c6a6c2a4802b1975fadf31e86ceb7ff0d2e872980147ef773be6d542b11d098fdb592a2ba7dda24db85195d6aaabd3080d9ffcaa933
-  data.tar.gz: 6b7d6a9e0f18fe844c5046776271286c96f80ddbb0a5ca3b4990a698717025732c9046263c87a0e65b886d9b665273ad087484935ef970766b2d68a4dd94459f
+  metadata.gz: 44d1f4c358ffb7f2b5ff5f44a913d1a669a1afdfaea4114a3abac63d4a8b61b0a25ca357242cbde6183f93e53658c71da36558927cc026611350885c8de339d6
+  data.tar.gz: 96a590487494497046d5dbd904863d109a6a770ec6a38de8d443495162040e340cf097ef3a7b8153b6b1a40ef618346b236db0b92f202759a362c92e9d4c342a

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

@@ -0,0 +1,29 @@
+<%= pb_rails("date_picker", props: {
+  allow_input: true,
+  custom_quick_pick_dates: {
+    dates: [
+      # Allow Playbook to handle the logic...
+      {
+        label: "Last 15 months",
+        value: {
+          timePeriod: "months",
+          amount: 15,
+        },
+      },
+      # Or, be explicit with an exact date range for more control...
+      {
+        label: "First Week of June 2022",
+        value: ["06/01/2022", "06/07/2022"],
+      },
+    ],
+  },
+  end_date_id: "quick-pick-end-date",
+  end_date_name: "quick-pick-end-date",
+  mode: "range",
+  picker_id: "date-picker-quick-pick-custom",
+  placeholder: "mm/dd/yyyy to mm/dd/yyyy",
+  selection_type: "quickpick",
+  start_date_id: "quick-pick-start-date",
+  start_date_name: "quick-pick-start-date"
+}) %>
+

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

@@ -0,0 +1,34 @@
+import React from "react"
+import DatePicker from "../_date_picker"
+
+const DatePickerQuickPickCustom = (props) => (
+  <>
+   <DatePicker
+       allowInput
+       customQuickPickDates={{
+        dates: [
+          // Allow Playbook to handle the logic...
+          {
+            label: "Last 15 months",
+            value: {
+              timePeriod: "months",
+              amount: 15,
+            },
+          },
+          // Or, be explicit with an exact date range for more control...
+          {
+            label: "First Week of June 2022",
+            value: ["06/01/2022", "06/07/2022"],
+          },
+        ],
+      }}
+       mode='range'
+       pickerId='date-picker-quick-pick-custom-override'
+       placeholder='mm/dd/yyyy to mm/dd/yyyy'
+       selectionType='quickpick'
+       {...props}
+   />
+  </>
+)
+
+export default DatePickerQuickPickCustom

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

@@ -0,0 +1,7 @@
+The customQuickPickDates/custom_quick_pick_dates prop allows for the user/dev to define their own quick pick dates. 
+The prop accepts an object with two key/value pairs: dates & override (separate doc example below).
+
+The dates property accepts an array of objects. Each object in the array has label and value properties. The label is what will be displayed in the UI of the dropdown menu. The value property is just the date that is going to be passed to the datepicker. The value property can be an array of two strings that represent a range, allowing for the dev to be extremely specific. Additionally, the dates array allows for a clean, simple API under that automatically converts dates in a common vernacular. 
+
+The timePeriod property accepts "days", "weeks", "months", "quarters" or "years", representing past time periods. 
+The amount property accepts any number.

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

@@ -0,0 +1,28 @@
+<%= pb_rails("date_picker", props: {
+  allow_input: true,
+  custom_quick_pick_dates: {
+    override: false,
+    dates: [
+      {
+        label: "Last 15 months",
+        value: {
+          timePeriod: "months",
+          amount: 15,
+        },
+      },
+      {
+        label: "First Week of June 2022",
+        value: ["06/01/2022", "06/07/2022"],
+      },
+    ],
+  },
+  end_date_id: "quick-pick-end-date",
+  end_date_name: "quick-pick-end-date",
+  mode: "range",
+  picker_id: "date-picker-quick-pick-override",
+  placeholder: "mm/dd/yyyy to mm/dd/yyyy",
+  selection_type: "quickpick",
+  start_date_id: "quick-pick-start-date",
+  start_date_name: "quick-pick-start-date"
+}) %>
+

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

@@ -0,0 +1,34 @@
+import React from "react"
+import DatePicker from "../_date_picker"
+
+const DatePickerQuickPickCustomOverride = (props) => (
+  <>
+    <DatePicker
+        allowInput
+        customQuickPickDates={{
+        override: false,
+        dates: [
+          {
+            label: "Last 15 months",
+            value: {
+              timePeriod: "months",
+              amount: 15,
+            },
+          },
+          {
+            label: "First Week of June 2022",
+            value: ["06/01/2022", "06/07/2022"],
+          },
+        ],
+      }}
+        marginTop='lg'
+        mode='range'
+        pickerId='date-picker-quick-pick-custom'
+        placeholder='mm/dd/yyyy to mm/dd/yyyy'
+        selectionType='quickpick'
+        {...props}
+    />
+  </>
+)
+
+export default DatePickerQuickPickCustomOverride

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

@@ -0,0 +1 @@
+The customQuickPickDates/custom_quick_pick_dates prop allows for an override boolean. The override allows for the user to completely override the quick pick dates that ship with the component. Default of `override` is set to true. If you would like to simply append your dates to the default quick pick dates, set this prop to false explicitly.

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

@@ -1,5 +1,5 @@
-import React from 'react'
-import DatePicker from '../_date_picker'
+import React from "react"
+import DatePicker from "../_date_picker"
 
 const DatePickerQuickPickReact = (props) => (
   <>

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

@@ -10,6 +10,8 @@ examples:
   - date_picker_range: Range
   - date_picker_quick_pick_rails: Range (Quick Pick)
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
+  - date_picker_quick_pick_custom: Custom Quick Pick Dates
+  - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -37,6 +39,8 @@ examples:
   - date_picker_range: Range
   - date_picker_quick_pick_react: Range (Quick Pick)
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
+  - date_picker_quick_pick_custom: Custom Quick Pick Dates
+  - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

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

@@ -22,3 +22,5 @@ export { default as DatePickerAllowInput } from './_date_picker_allow_input'
 export { default as DatePickerQuickPickReact } from './_date_picker_quick_pick_react'
 export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_pick_range_limit'
 export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
+export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
+export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'