playbook_ui_docs 13.21.0 → 13.22.0.pre.alpha.PLAY1297updatetextstyles2636

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}) %>
+

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb

@@ -1,5 +1,5 @@
 <form id="example-form-validation" action="" method="get">
-    <%= pb_rails("phone_number_input", props: { error: "Missing phone number.", id: "validation", initial_country: "af", value: "", required: true }) %>
+    <%= pb_rails("phone_number_input", props: { error: "Missing phone number", id: "validation", initial_country: "af", value: "", required: true }) %>
     <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
 </form>
 
@@ -9,4 +9,4 @@
             if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
         })
     })
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("toggle", props: {
+  checked: true,
+  disabled: true
+}) %>
+
+<br>
+
+<%= pb_rails("toggle", props: {
+  checked: false,
+  disabled: true
+}) %>

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx

@@ -0,0 +1,21 @@
+// @flow
+
+import React from 'react'
+import { Toggle } from '../..'
+
+const ToggleDisabled= () => {
+  return (
+    <>
+      <Toggle
+          checked
+          disabled 
+      />
+
+      <br />
+
+      <Toggle disabled />
+    </>
+  )
+}
+
+export default ToggleDisabled 

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

@@ -2,6 +2,7 @@ examples:
 
   rails:
   - toggle_default: Default State
+  - toggle_disabled: Disabled
   - toggle_name: Name and Value
   - toggle_custom: Custom checkbox input
   - toggle_custom_radio: Custom radio inputs
@@ -9,6 +10,7 @@ examples:
 
   react:
   - toggle_default: Default State
+  - toggle_disabled: Disabled
   - toggle_name: Name and Value
   - toggle_custom: Custom checkbox input
   - toggle_custom_radio: Custom radio inputs
@@ -16,4 +18,4 @@ examples:
   swift:
     - toggle_default_swift: Default State
     - toggle_name_swift: Name and Value
-    - toggle_props_swift: ""
+    - toggle_props_swift: ""

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

@@ -1,4 +1,5 @@
 export { default as ToggleDefault } from './_toggle_default'
+export { default as ToggleDisabled } from './_toggle_disabled'
 export { default as ToggleCustom } from './_toggle_custom'
 export { default as ToggleName } from './_toggle_name'
 export { default as ToggleCustomRadio } from './_toggle_custom_radio'

data/dist/menu.yml

@@ -407,6 +407,10 @@ kits:
         platforms: *web
         description: Badges can be used for notification, tags, and status. They are used for count and numbers.
         status: "stable"
+      - name: "online_status"
+        platforms: *web
+        description: Online Status is a small indicator that lets the user know the status of a person or item. 
+        status: "stable"
       - name: "pill"
         platforms: *all
         description: A pill uses both a keyword and a specific color to categorize an item.