RubyGems - playbook_ui_docs - Versions diffs - 13.13.0.pre.alpha.play10821727 → 13.14.0 - Mend

playbook_ui_docs 13.13.0.pre.alpha.play10821727 → 13.14.0

Files changed (31) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 35c56e2a4b3b6299db72d06c655394f738ee06b8819686170e7b1003821dc7b5
-  data.tar.gz: 685c6d4b6e6edcff3638e10a75299c4de46d2bbdecb23fba4ddb523b4b2bd8fc
+  metadata.gz: ae66a431cc3ef3ddddbd1d0479c92ea5996e44026af6aacf0c3d18865b2b42fe
+  data.tar.gz: 899040ce814bb100a8d516608d0c2b84f6aea8d9fd255fb9bee50f9efc13ab12
 SHA512:
-  metadata.gz: 77597fa100e9b095f7a928d9c68bd41fbb60b00f093918f3377469aa810b56e51cabb94b43574f5cb2e0e52540a2564e95b8b57649a4227eb5465f1bb45ac91d
-  data.tar.gz: da6c4be237f832a65ae6f14ee59c82cfb403e41d83595ed4ba135980ad03b6b7c8918c46e93f4b8c0efa4370c579d3b4040211c56c548f8acb43875995f22072
+  metadata.gz: b04fbded230599366f60305a9af71d4deaee0b6980b0d1c35707e63fb9329290911726c0602e161afba16260e43592a568aafb9cc57e87d913ab87edf879c91c
+  data.tar.gz: 6098eded31a46ffe0d185a0417c9b4db65a9eed2c6055302e19669d9afd8d52e536261c9722d4e764f6cfaf0b9bad05e6da34fe439125f213ceb36ad791bd38d

data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx CHANGED Viewed

@@ -57,7 +57,7 @@ const CardBackground = (props) => {
           background="product_1_background"
           marginBottom="sm"
           {...props}
-      >
+        >
         <Body
             dark
             text="Product 1 Background"
@@ -69,12 +69,11 @@ const CardBackground = (props) => {
       <Card
           background="product_7_highlight"
           marginBottom="sm"
-          {...props}
-      >
+          {...props} >
         <Body
             dark
-            text="Product 7 Highlight"
-        />
+            text="Product 7 Highlight"
+          />
       </Card>

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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'

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx CHANGED Viewed

@@ -49,18 +49,15 @@ const DialogFullHeight = () => {
       <Flex wrap>
         <Button id="sm"
             marginRight="md"
-            onClick={toggleHeaderSeparatorDialog}
-        >
+            onClick={toggleHeaderSeparatorDialog}>
           {"Small Dialog"}
         </Button>
         <Button marginRight="md"
-            onClick={toggleFooterSeparatorDialog}
-        >
+            onClick={toggleFooterSeparatorDialog}>
           {"Medium Dialog"}
         </Button>
         <Button marginRight="md"
-            onClick={toggleBothSeparatorsDialog}
-        >
+            onClick={toggleBothSeparatorsDialog}>
           {"Large Dialog"}
         </Button>
       </Flex>
@@ -92,8 +89,7 @@ const DialogFullHeight = () => {
             <Dialog.Footer>
               <Button onClick={toggle}>{"Send My Issue"}</Button>
               <Button onClick={toggle}
-                  variant="link"
-              >
+                  variant="link">
                 {"Back"}
               </Button>
             </Dialog.Footer>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx CHANGED Viewed

@@ -48,18 +48,15 @@ const DialogFullHeightPlacement = () => {
       <Flex wrap>
         <Button id="sm"
             marginRight="md"
-            onClick={toggleHeaderSeparatorDialog}
-        >
+            onClick={toggleHeaderSeparatorDialog}>
           {"Left Dialog"}
         </Button>
         <Button marginRight="xl"
-            onClick={toggleFooterSeparatorDialog}
-        >
+            onClick={toggleFooterSeparatorDialog}>
           {"Center Dialog"}
         </Button>
         <Button marginRight="xl"
-            onClick={toggleBothSeparatorsDialog}
-        >
+            onClick={toggleBothSeparatorsDialog}>
           {"Right Dialog"}
         </Button>
       </Flex>
@@ -91,8 +88,7 @@ const DialogFullHeightPlacement = () => {
             <Dialog.Footer>
               <Button onClick={toggle}>{"Send My Issue"}</Button>
               <Button onClick={toggle}
-                  variant="link"
-              >
+                  variant="link">
                 {"Back"}
               </Button>
             </Dialog.Footer>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx CHANGED Viewed

@@ -16,12 +16,10 @@ const DialogScrollable = () => {
   return (
     <>
       <Button marginRight="md"
-          onClick={toggleDialog1}
-      >{'Open Dialog'}
+          onClick={toggleDialog1}>{'Open Dialog'}
       </Button>
       <Button marginRight="md"
-          onClick={toggleDialog2}
-      >{'Open Full Height Dialog'}
+          onClick={toggleDialog2}>{'Open Full Height Dialog'}
       </Button>
       <Dialog
           cancelButton="Cancel"

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx CHANGED Viewed

@@ -84,7 +84,7 @@ const DialogStatus = () => {
       <Flex
           rowGap="xs"
           wrap
-      >
+        >
         <Button
             marginRight="md"
             onClick={toggleDefaultAlert}

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_background_options.html.erb ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ <%= pb_rails("star_rating", props: { rating: 3, background_type: "fill", padding_bottom: "xs" }) %>
2	+ <%= pb_rails("star_rating", props: { rating: 3, background_type: "outline", padding_bottom: "xs" }) %>

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_background_options.jsx ADDED Viewed

@@ -0,0 +1,25 @@
+import React from 'react'
+import StarRating from '../_star_rating'
+const StarRatingBackgroundOptions = (props) => (
+  <>
+    <StarRating
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+    <StarRating
+        backgroundType='outline'
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+  </>
+)
+export default StarRatingBackgroundOptions

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_color_options.html.erb ADDED Viewed

@@ -0,0 +1,3 @@
+<%= pb_rails("star_rating", props: { rating: 3, padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, color_option: "primary", padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, color_option: "subtle", padding_bottom: "xs" }) %>

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_color_options.jsx ADDED Viewed

@@ -0,0 +1,31 @@
+import React from 'react'
+import StarRating from '../_star_rating'
+const StarRatingColorOptions = (props) => (
+  <>
+    <StarRating
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+    <StarRating
+        colorOption='primary'
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+    <StarRating
+        colorOption='subtle'
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+  </>
+)
+export default StarRatingColorOptions

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.html.erb CHANGED Viewed

@@ -1,13 +1,11 @@
-<%= pb_rails("star_rating") %>
+<%= pb_rails("star_rating", props: { padding_bottom: "xs" }) %>
-<br>
+<%= pb_rails("star_rating", props: { rating: 0.9, padding_bottom: "xs" }) %>
-<%= pb_rails("star_rating", props: { rating: 3 }) %>
+<%= pb_rails("star_rating", props: { rating: 1.5, padding_bottom: "xs" }) %>
-<br>
+<%= pb_rails("star_rating", props: { rating: 3, padding_bottom: "xs" }) %>
-<%= pb_rails("star_rating", props: { rating: 1.5 }) %>
+<%= pb_rails("star_rating", props: { rating: 4.2, padding_bottom: "xs" }) %>
-<br>
-<%= pb_rails("star_rating", props: { rating: 5 }) %>
+<%= pb_rails("star_rating", props: { rating: 5, padding_bottom: "xs" }) %>

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx CHANGED Viewed

@@ -4,25 +4,38 @@ import StarRating from '../_star_rating'
 const StarRatingDefault = (props) => (
   <>
-    <StarRating />
+    <StarRating
+        paddingBottom="xs"
+        {...props}
+    />
-    <br />
     <StarRating
-        rating={3}
+        paddingBottom="xs"
+        rating={0.9}
         {...props}
     />
-    <br />
     <StarRating
+        paddingBottom="xs"
         rating={1.5}
         {...props}
     />
-    <br />
+    <StarRating
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+    <StarRating
+        paddingBottom="xs"
+        rating={4.2}
+        {...props}
+    />
     <StarRating
+        paddingBottom="xs"
         rating={5}
         {...props}
     />

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.html.erb CHANGED Viewed

@@ -1 +1,4 @@
-<%= pb_rails("star_rating", props: { rating: 3.5, hide_rating: true }) %>
+<%= pb_rails("star_rating", props: { rating: 3, padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 2.8, layout_option: "number", padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, layout_option: "number", padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 1, layout_option: "onestar", padding_bottom: "xs" }) %>

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx CHANGED Viewed

@@ -3,13 +3,38 @@ import React from 'react'
 import StarRating from '../_star_rating'
 const StarRatingHide = (props) => (
+  <>
-  <StarRating
-      hideRating
-      rating={3.5}
-      {...props}
-  />
+    <StarRating
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+    <StarRating
+        layoutOption={"number"}
+        paddingBottom="xs"
+        rating={2.8}
+        {...props}
+    />
+    <StarRating
+        layoutOption={"number"}
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+    <StarRating
+        layoutOption={"onestar"}
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+  </>
 )
 export default StarRatingHide

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.html.erb ADDED Viewed

@@ -0,0 +1,6 @@
+<%= pb_rails("star_rating", props: { rating: 3, denominator: 3, padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, denominator: 4, padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, denominator: 6, padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, denominator: 7, padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, denominator: 8, padding_bottom: "xs" }) %>

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.jsx ADDED Viewed

@@ -0,0 +1,58 @@
+import React from 'react'
+import StarRating from '../_star_rating'
+const StarRatingNumberConfig = (props) => (
+  <>
+    <StarRating
+        denominator={3}
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+    <StarRating
+        denominator={4}
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+    <StarRating
+        denominator={5}
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+    <StarRating
+        denominator={6}
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+    <StarRating
+        denominator={7}
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+    <StarRating
+        denominator={8}
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+  </>
+)
+export default StarRatingNumberConfig

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.html.erb ADDED Viewed

@@ -0,0 +1,16 @@
+<%= pb_rails("star_rating", props: { rating: 3, size: "xs", padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, size: "sm", padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, size: "md", padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, size: "lg", padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, size: "lg", layout_option: "number", padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, size: "lg", layout_option: "onestar", padding_bottom: "xs" }) %>

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.jsx ADDED Viewed

@@ -0,0 +1,60 @@
+import React from 'react'
+import StarRating from '../_star_rating'
+const StarRatingSizeOptions = (props) => (
+  <>
+    <StarRating
+        paddingBottom="xs"
+        rating={3}
+        size="xs"
+        {...props}
+    />
+    <StarRating
+        paddingBottom="xs"
+        rating={3}
+        size="sm"
+        {...props}
+    />
+    <StarRating
+        paddingBottom="xs"
+        rating={3}
+        size="md"
+        {...props}
+    />
+    <StarRating
+        paddingBottom="xs"
+        rating={3}
+        size="lg"
+        {...props}
+    />
+    <StarRating
+        layoutOption="number"
+        paddingBottom="xs"
+        rating={3}
+        size="lg"
+        {...props}
+    />
+    <StarRating
+        layoutOption="onestar"
+        paddingBottom="xs"
+        rating={3}
+        size="lg"
+        {...props}
+    />
+  </>
+)
+export default StarRatingSizeOptions

data/app/pb_kits/playbook/pb_star_rating/docs/example.yml CHANGED Viewed

@@ -1,9 +1,16 @@
 examples:
   rails:
-  - star_rating_default: Default
-  - star_rating_hide: Hide Rating Value
+    - star_rating_default: Default
+    - star_rating_color_options: Color Options
+    - star_rating_background_options: Background Options
+    - star_rating_hide: Layout Options
+    - star_rating_number_config: Number Config
+    - star_rating_size_options: Size Options
   react:
-  - star_rating_default: Default
-  - star_rating_hide: Hide Rating Value
+    - star_rating_default: Default
+    - star_rating_color_options: Color Options
+    - star_rating_background_options: Background Options
+    - star_rating_hide: Layout Options
+    - star_rating_number_config: Number Config
+    - star_rating_size_options: Size Options