playbook_ui_docs 13.21.0 → 13.22.0.pre.alpha.pbntr254barchartnegativenumber2640

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import BarGraph from '../_bar_graph'
+
+const chartData = [{
+  name: 'Installation',
+  data: [-475, 400, -1000, 354, -856],
+  threshold: 0
+}, {
+  name: 'Manufacturing',
+  data: [1475, 200, 1000, 654, -656],
+  threshold: 0
+}, 
+{
+  name: 'Sales & Distribution',
+  data: [1270, 100, -1200, 554, 756],
+  threshold: 0
+}]
+
+
+const BarGraphStacked = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="bar-default"
+        legend
+        title="Bar Graph with Negative Numbers"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphStacked

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.html.erb

@@ -0,0 +1,22 @@
+<% data = [{
+    name: 'Installation',
+    data: [1475, 200, 3000, 654, 656],
+  }, 
+  {
+    name: 'Manufacturing',
+    data: [1270, 800, 200, 454, 956],
+  }, {
+    name: 'Sales & Distribution',
+    data: [975, 1600, 1500, 924, 500],
+  }] %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-default",
+    y_axis_min: 0,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    stacking: "normal",
+    title: 'Bar Graph with Stacked Columns',
+    legend: true,
+}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import BarGraph from '../_bar_graph'
+
+const chartData = [{
+  name: 'Installation',
+  data: [1475, 200, 3000, 654, 656],
+}, 
+{
+  name: 'Manufacturing',
+  data: [1270, 800, 200, 454, 956],
+}, {
+  name: 'Sales & Distribution',
+  data: [975, 1600, 1500, 924, 500],
+}]
+
+
+const BarGraphStacked = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number Of Employees"
+        chartData={chartData}
+        id="bar-default"
+        legend
+        stacking="normal"
+        title="Bar Graph with Stacked Columns"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphStacked

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

@@ -9,7 +9,8 @@ examples:
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
   - bar_graph_custom: Custom Overrides
-
+  - bar_graph_stacked: Stacked
+  - bar_graph_negative_numbers: Negative Numbers
 
   react:
   - bar_graph_default: Default
@@ -20,3 +21,5 @@ examples:
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
   - bar_graph_custom: Custom Overrides
+  - bar_graph_stacked: Stacked
+  - bar_graph_negative_numbers: Negative Numbers

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

@@ -6,3 +6,5 @@ export { default as BarGraphHeight } from './_bar_graph_height.jsx'
 export { default as BarGraphSpline } from './_bar_graph_spline.jsx'
 export { default as BarGraphColors } from './_bar_graph_colors.jsx'
 export { default as BarGraphCustom } from './_bar_graph_custom.jsx'
+export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
+export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'

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

@@ -10,13 +10,6 @@
   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

@@ -16,13 +16,6 @@ const DatePickerDefaultDate = (props) => (
         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"

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

@@ -0,0 +1,7 @@
+
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-none", margin_bottom: "none"}) %>
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-xs", margin_bottom: "xs"}) %>
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-sm", margin_bottom: "sm"}) %>
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-md", margin_bottom: "md"}) %>
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-lg", margin_bottom: "lg"}) %>
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-xl", margin_bottom: "xl"}) %>

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

@@ -0,0 +1,41 @@
+
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerMarginBottom = (props) => (
+  <div>
+    <DatePicker
+        marginBottom="none"
+        pickerId="date-picker-none"
+        {...props}
+    />
+    <DatePicker
+        marginBottom="xs"
+        pickerId="date-picker-xs"
+        {...props}
+    />
+    <DatePicker
+        marginBottom="sm"
+        pickerId="date-picker-sm"
+        {...props}
+    />
+    <DatePicker
+        marginBottom="md"
+        pickerId="date-picker-md"
+        {...props}
+    />
+    <DatePicker
+        marginBottom="lg"
+        pickerId="date-picker-lg"
+        {...props}
+    />
+    <DatePicker
+        marginBottom="xl"
+        pickerId="date-picker-xl"
+        {...props}
+    />
+  </div>
+)
+
+export default DatePickerMarginBottom

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

@@ -2,4 +2,11 @@
   default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
   mode: "range",
   picker_id: "date-picker-range"
+}) %>
+
+<%= 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"
 }) %>

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

@@ -10,6 +10,13 @@ const DatePickerRange = (props) => (
         pickerId="date-picker-range"
         {...props}
     />
+    <DatePicker
+        defaultDate={[new Date(), new Date().fp_incr(7)]}
+        label="Default Date Range"
+        mode="range"
+        pickerId="date-picker-default-date3"
+        {...props}
+    />
   </div>
 )
 

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

@@ -7,7 +7,7 @@ examples:
   - date_picker_allow_input: Allow Input
   - date_picker_input: Input Field
   - date_picker_label: Label
-  - date_picker_range: Range
+  # - 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
@@ -20,6 +20,7 @@ examples:
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
   - date_picker_anti_patterns: Anti-Patterns
+  - date_picker_margin_bottom: Margin Bottom
   - date_picker_inline: Inline
   - date_picker_month_and_year: Month & Year Only
   - date_picker_week: Week
@@ -36,7 +37,7 @@ examples:
   - date_picker_label: Label
   - date_picker_on_change: onChange
   - date_picker_on_close: onClose
-  - date_picker_range: Range
+  # - 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
@@ -48,6 +49,7 @@ examples:
   - date_picker_flatpickr_methods: Flatpickr Methods
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
+  - date_picker_margin_bottom: Margin Bottom
   - date_picker_inline: Inline
   - date_picker_month_and_year: Month & Year Only
   - date_picker_week: Week

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

@@ -19,6 +19,7 @@ export { default as DatePickerWeek } from './_date_picker_week.jsx'
 export { default as DatePickerPositions } from './_date_picker_positions.jsx'
 export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
 export { default as DatePickerAllowInput } from './_date_picker_allow_input'
+export { default as DatePickerMarginBottom} from './_date_picker_margin_bottom'
 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'

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -1,6 +1,7 @@
 <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
 
 <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
+  <form>
     <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
         <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
     <% end %>
@@ -12,4 +13,5 @@
 
     <% end %>
     <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
+  </form>
 <% end %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb

@@ -1,5 +1,55 @@
+<%= pb_rails("button", props: { text: "Short Multiline", variant: "secondary", data: { multitoast: "#toast-short" } }) %>
+
 <%= pb_rails("fixed_confirmation_toast", props: {
+  classname: "multitoast-to-hide",
+  closeable: true,
+  id: "toast-short",
   multi_line: true,
-  text: "Scan to Assign Selected Items. Click here to generate report",
+  text: "Multi-line is used when the given text will not fit on one line.",
   status: "tip",
+  vertical: "top",
+  horizontal: "center"
 }) %>
+
+<%= pb_rails("button", props: { text: "Long Multiline", variant: "secondary", data: { multitoast: "#toast-long" } }) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  classname: "multitoast-to-hide",
+  closeable: true,
+  id: "toast-long",
+  multi_line: true,
+  text: "Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.",
+  status: "tip",
+  vertical: "top",
+  horizontal: "center"
+}) %>
+
+
+<script type="text/javascript">
+  const multitoasts = document.querySelectorAll(".multitoast-to-hide")
+  const multibuttons = document.querySelectorAll("button[data-multitoast]")
+
+  const hideMultiToasts = () => {
+    multitoasts.forEach((toast) => {
+      toast.style.display = "none"
+    })
+  }
+
+  multibuttons.forEach((button) => {
+    button.onclick = () => {
+      hideMultiToasts()
+      let toast = document.querySelector(button.getAttribute("data-multitoast"))
+
+      if (toast) {
+        toast.style.display = "flex"
+      }
+    }
+  })
+</script>
+
+<!-- hiding toast on page load -->
+<style>
+  #toast-long, #toast-short {
+    display: none;
+  }
+</style>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx

@@ -1,18 +1,69 @@
-import React from 'react'
+import React, { useState } from 'react'
 
+import Button from '../../pb_button/_button'
 import FixedConfirmationToast from '../_fixed_confirmation_toast'
 
 const FixedConfirmationToastMultiLine = (props) => {
-  return (
-    <div>
-      <FixedConfirmationToast
-          multiLine
-          status="tip"
-          text="Scan to Assign Selected Items. Click here to generate report"
-          {...props}
-      />
-    </div>
-  )
+
+    const [openShort, setOpenShort] = useState(false)
+    const [openLong, setOpenLong] = useState(false)
+
+    const handleClickShort = () => {
+        setOpenShort(true)
+    }
+    const handleClickLong= () => {
+        setOpenLong(true)
+    }
+
+    const handleCloseShort = () => {
+        setOpenShort(false)
+    }
+
+    const handleCloseLong= () => {
+        setOpenLong(false)
+    }
+
+    return (
+        <>
+            <Button
+                onClick={handleClickShort}
+                text="Short Multiline"
+                variant="secondary"
+                {...props}
+            />
+            {' '}
+            <Button
+                onClick={handleClickLong}
+                text="Long Multiline"
+                variant="secondary"
+                {...props}
+            />
+
+            <FixedConfirmationToast
+                closeable 
+                horizontal='center'
+                multiLine
+                onClose={handleCloseShort}
+                open={openShort}
+                status='tip'
+                text='Multi-line is used when the given text will not fit on one line.'
+                vertical='top'
+                {...props}
+            />
+
+            <FixedConfirmationToast
+                closeable
+                horizontal='center'
+                multiLine
+                onClose={handleCloseLong}
+                open={openLong}
+                status='tip'
+                text='Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.'
+                vertical='top'
+                {...props}
+            />
+        </>
+    )
 }
 
 export default FixedConfirmationToastMultiLine

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb

@@ -75,8 +75,6 @@
     })
   }
 
-  hideToasts()
-
   buttons.forEach((button) => {
     button.onclick = () => {
       hideToasts()
@@ -88,3 +86,10 @@
     }
   })
 </script>
+
+<!-- hiding toast on page load -->
+<style>
+  #toast-top-center, #toast-top-right, #toast-top-left, #toast-bottom-center, #toast-bottom-right, #toast-bottom-left {
+    display: none;
+  }
+</style>

data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.html.erb

@@ -46,7 +46,3 @@
     <%= pb_rails("flex/flex_item") do %>4<% end %>
   <% end %>
 </div>
-
-
-
-</div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb

@@ -1,6 +1,7 @@
 <div>
+
   <%= pb_rails("form_group") do %>
-    <%= pb_rails("text_input", props: { label: "Artist", placeholder: "Enter Artist Name" }) %>
+    <%= pb_rails("text_input", props: { placeholder: "Enter Artist Name" }) %>
     <%= pb_rails("select", props: {
       blank_selection: "Genre",
       options: [
@@ -16,4 +17,19 @@
       ]
     }) %>
   <% end %>
+  <br>
+  <br>
+  <%= pb_rails("form_group") do %>
+    <%= pb_rails("select", props: {
+        blank_selection: "Phone",
+        options: [
+          { value: "Cell" },
+          { value: "Work" },
+          { value: "Home" },
+        ]
+      }) %>
+      <%= pb_rails("phone_number_input", props: {
+        id: "phone"
+    }) %>
+  <% end %>
 </div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import FormGroup from '../_form_group'
-
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 import Select from '../../pb_select/_select'
 import TextInput from '../../pb_text_input/_text_input'
 
@@ -18,11 +18,16 @@ const FormGroupSelect = (props) => {
     { value: 'Other' },
   ]
 
+  const phoneOptions = [
+    { value: 'Cell' },
+    { value: 'Work' },
+    { value: 'Home' },
+  ]
+
   return (
     <div>
       <FormGroup>
         <TextInput
-            label="Artist"
             placeholder="Enter Artist Name"
             {...props}
         />
@@ -32,6 +37,17 @@ const FormGroupSelect = (props) => {
             {...props}
         />
       </FormGroup>
+      <br />
+      <br />
+      <FormGroup>
+        <Select
+            blankSelection="Phone"
+            options={phoneOptions}
+            />
+        <PhoneNumberInput
+            id='default'
+        />
+    </FormGroup>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb

@@ -1,3 +1,8 @@
+<%= pb_rails("icon_circle", props: {
+  icon: "rocket",
+  size: "xxs"
+}) %>
+<br />
 <%= pb_rails("icon_circle", props: {
   icon: "rocket",
   size: "xs"

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx

@@ -4,6 +4,12 @@ import { IconCircle } from '../..'
 const IconCircleSizes = (props) => {
   return (
     <div>
+      <IconCircle
+          icon="rocket"
+          size="xxs"
+          {...props}
+      />
+      <br />
       <IconCircle
           icon="rocket"
           size="xs"

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md

@@ -1,5 +1,5 @@
-`selected_ids` (Rails) / `selectedIds` (React) is an optional prop that accepts an array of ids that, if present, will mark the corresponding nodes on the treeData as checked on page load. 
+`selected_ids` is an optional prop that accepts an array of ids that, if present, will mark the corresponding nodes on the treeData as checked on page load. 
 
 Items that include `checked:true` on the treeData itself will also be selected on page load, even without being passed to `selectedIds`.
 
-When an item is marked as checked on page load by any means, the dropdown will expand to show the checked items for easier accessibility. 
+When an item is marked as checked on page load by any means, the dropdown will expand to show the checked items for easier accessibility. 

data/app/pb_kits/playbook/pb_multi_level_select/docs/{_multi_level_select_selected_ids.jsx → _multi_level_select_selected_ids_react.jsx}

@@ -68,7 +68,7 @@ const treeData = [
   },
 ];
 
-const MultiLevelSelectSelectedIds = (props) => {
+const MultiLevelSelectSelectedIdsReact = (props) => {
   return (
     <div>
       <MultiLevelSelect
@@ -85,4 +85,4 @@ const MultiLevelSelectSelectedIds = (props) => {
   );
 };
 
-export default MultiLevelSelectSelectedIds;
+export default MultiLevelSelectSelectedIdsReact;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md

@@ -0,0 +1,5 @@
+`selected_ids` is an optional prop that accepts an array of ids and controls the selected state of the tree nodes that match the values passed. When used within react-hook-form, this prop can be used to manage the selected state of any ids passed to it. 
+
+Items that include `checked:true` on the treeData itself will also be selected on page load, even without being passed to `selectedIds`.
+
+When an item is marked as checked on page load by any means, the dropdown will expand to show the checked items for easier accessibility. 

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

@@ -12,4 +12,4 @@ examples:
   - multi_level_select_single: Single Select
   - multi_level_select_single_children_only: Single Select w/ Hidden Radios
   - multi_level_select_return_all_selected: Return All Selected
-  - multi_level_select_selected_ids: Selected Ids
+  - multi_level_select_selected_ids_react: Selected Ids

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

@@ -2,4 +2,4 @@ export { default as MultiLevelSelectDefault } from './_multi_level_select_defaul
 export { default as MultiLevelSelectSingle } from './_multi_level_select_single.jsx'
 export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
 export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
-export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"
+export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.html.erb

@@ -1,9 +1,6 @@
-<%= pb_rails("online_status", props: { status: "offline" }) %>
-
-<br>
-
-<%= pb_rails("online_status", props: { status: "online" }) %>
-
-<br>
-
-<%= pb_rails("online_status", props: { status: "away" }) %>
+<%= pb_rails("online_status", props: { status: "offline", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "online", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "away", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "error", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "info", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "primary", margin_y: "xs" }) %>

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx

@@ -5,24 +5,35 @@ import OnlineStatus from '../_online_status'
 const OnlineStatusDefault = (props) => (
   <>
     <OnlineStatus
+        marginY="xs"
         status="offline"
         {...props}
     />
-
-    <br />
-
     <OnlineStatus
+        marginY="xs"
         status="online"
         {...props}
     />
-
-    <br />
-
     <OnlineStatus
+        marginY="xs"
         status="away"
         {...props}
     />
-
+    <OnlineStatus
+        marginY="xs"
+        status="error"
+        {...props}
+    />
+    <OnlineStatus
+        marginY="xs"
+        status="info"
+        {...props}
+    />
+    <OnlineStatus
+        marginY="xs"
+        status="primary"
+        {...props}
+    />
   </>
 )
 

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb

@@ -1 +1,2 @@
-<%= pb_rails("pagination", props: { model: @users, view: self}) %>
+<%= pb_rails("pagination", props: { model: @users, view: self}) %>
+