playbook_ui 12.20.0.pre.alpha.movemarkdown668 → 12.20.0.pre.alpha.title2665

data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { Button, Filter, Flex, Select, TextInput } from '../..'
+
+const SortingChangeCallback = (sortOptions) => {
+  alert(JSON.stringify(sortOptions[0]))
+}
+
+const FilterPlacement = (props) => {
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A galaxy far far away...' },
+  ]
+  return (
+
+    <>
+      <Filter
+          double
+          minWidth="360px"
+          onSortChange={SortingChangeCallback}
+          placement={"right"}
+          results={1}
+          sortOptions={{
+            popularity: 'Popularity',
+            // eslint-disable-next-line
+            manager_title: 'Manager\'s Title',
+            // eslint-disable-next-line
+            manager_name: 'Manager\'s Name',
+          }}
+          sortValue={[{ name: 'popularity', dir: 'desc' }]}
+          {...props}
+      >
+      {({ closePopover }) => (
+        <form>
+
+          <TextInput
+              label="Example Text Field"
+              placeholder="Enter Text"
+              {...props}
+          />
+
+          <Select
+              blankSelection="Select One..."
+              label="Example Collection Select"
+              name="Collection Select"
+              options={options}
+              {...props}
+          />
+          <Flex
+              spacing="between"
+              {...props}
+          >
+            <Button
+                onClick={closePopover}
+                text="Apply"
+                {...props}
+            />
+            <Button
+                text="Clear"
+                variant="secondary"
+                {...props}
+            />
+          </Flex>
+        </form>
+      )}
+      </Filter>
+    </>
+  )
+}
+
+export default FilterPlacement

data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.md

@@ -0,0 +1,4 @@
+Click the filter button above to toggle the popover.
+
+To change the filter's popover position, use the `placement` prop with one of the positions: 
+`"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"`

data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb

@@ -0,0 +1,36 @@
+<%=
+  pb_rails("filter", props: {
+    min_width: "360px",
+    id: "2",
+    filters: [
+      { name: "name", value: "John Wick" }
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    results: 546,
+    template: "single"
+  }) do
+%>
+  <%
+   example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away...", value: 5)
+    ]
+  %>
+
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+
+    <%= form.actions do |action| %>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx

@@ -0,0 +1,71 @@
+import React from 'react'
+
+import Filter from '../_filter'
+
+import Button from '../../pb_button/_button'
+import Flex from '../../pb_flex/_flex'
+import Select from '../../pb_select/_select'
+import TextInput from '../../pb_text_input/_text_input'
+
+const FilterSingle = (props) => {
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A galaxy far far away...' },
+  ]
+  return (
+    <Filter
+        filters={{
+          'Full Name': 'John Wick',
+        }}
+        minWidth="360px"
+        results={546}
+        sortOptions={{
+          popularity: 'Popularity',
+          // eslint-disable-next-line
+          manager_title: 'Manager\'s Title',
+          // eslint-disable-next-line
+          manager_name: 'Manager\'s Name',
+        }}
+        sortValue={[{ name: 'popularity', dir: 'desc' }]}
+        {...props}
+    >
+    {({ closePopover }) => (
+      <form>
+        <TextInput
+            label="Full Name"
+            placeholder="Enter name"
+            {...props}
+        />
+
+        <Select
+            blankSelection="Select One..."
+            label="Territory"
+            name="location"
+            options={options}
+            {...props}
+        />
+        <Flex
+            spacing="between"
+            {...props}
+        >
+          <Button
+              onClick={closePopover}
+              text="Apply"
+              {...props}
+          />
+          <Button
+              text="Clear"
+              variant="secondary"
+              {...props}
+          />
+        </Flex>
+      </form>
+    )}
+    </Filter>
+  )
+}
+
+export default FilterSingle

data/app/pb_kits/playbook/pb_filter/docs/_sort_only.html.erb

@@ -0,0 +1,11 @@
+<%=
+  pb_rails("filter", props: {
+    id: "so",
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    template:"sort_only",
+  })
+%>

data/app/pb_kits/playbook/pb_filter/docs/_sort_only.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import Filter from '../_filter'
+
+const SortOnly = (props) => (
+  <Filter
+      sortOptions={{
+        popularity: 'Popularity',
+        // eslint-disable-next-line
+        manager_title: 'Manager\'s Title',
+        // eslint-disable-next-line
+        manager_name: 'Manager\'s Name',
+      }}
+      sortValue={[{ name: 'popularity', dir: 'desc' }]}
+      {...props}
+  />
+)
+
+export default SortOnly

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

@@ -0,0 +1,21 @@
+examples:
+
+  rails:
+  - filter_default: Default
+  - filter_no_background: No Background
+  - filter_single: Single
+  - filter_no_sort: No Sort
+  - filter_only: Filter Only
+  - sort_only: Sort Only
+  - filter_max_width: Max Width for Popover Inside of Filter
+  - filter_placement: Filter Placement
+
+  react:
+  - filter_default: Default
+  - filter_no_background: No Background
+  - filter_single: Single
+  - filter_no_sort: No Sort
+  - filter_only: Filter Only
+  - sort_only: Sort Only
+  - filter_max_width: Max Width for Popover Inside of Filter
+  - filter_placement: Filter Placement

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

@@ -0,0 +1,8 @@
+export { default as FilterDefault } from './_filter_default.jsx'
+export { default as FilterSingle } from './_filter_single.jsx'
+export { default as FilterNoSort } from './_filter_no_sort.jsx'
+export { default as FilterNoBackground } from './_filter_no_background.jsx'
+export { default as FilterOnly } from './_filter_only.jsx'
+export { default as SortOnly } from './_sort_only.jsx'
+export { default as FilterMaxWidth } from './_filter_max_width.jsx'
+export { default as FilterPlacement } from './_filter_placement.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md

@@ -0,0 +1,2 @@
+
+Fixed Confirmation Toast is used as an alert. Success is used when a user successfully completes an action. Error is used when there is an error and the user cannot proceed. Neutral is used to display information to a user to complete a task.

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

@@ -0,0 +1,68 @@
+import React, { useState } from 'react'
+
+import Button from '../../pb_button/_button'
+import FixedConfirmationToast from '../_fixed_confirmation_toast'
+
+const FixedConfirmationToastAutoClose = (props) => {
+
+    const [open, setOpen] = useState(false)
+    const [openCloseable, setOpenCloseable] = useState(false)
+
+    const handleClick = () => {
+        setOpen(true)
+    }
+    const handleClickCloseable = () => {
+        setOpenCloseable(true)
+    }
+
+    const handleClose = () => {
+        setOpen(false)
+    }
+
+    const handleCloseCloseable = () => {
+        setOpenCloseable(false)
+    }
+
+    return (
+        <>
+            <Button
+                onClick={handleClick}
+                text="Show Auto Close Toast"
+                variant="secondary"
+                {...props}
+            />
+            {' '}
+            <Button
+                onClick={handleClickCloseable}
+                text="Show Closeable Auto Close Toast"
+                variant="secondary"
+                {...props}
+            />
+
+            <FixedConfirmationToast
+                autoClose={3000}
+                horizontal='center'
+                onClose={handleClose}
+                open={open}
+                status='tip'
+                text='I will disappear in 3 seconds.'
+                vertical='top'
+                {...props}
+            />
+
+            <FixedConfirmationToast
+                autoClose={10000}
+                closeable
+                horizontal='center'
+                onClose={handleCloseCloseable}
+                open={openCloseable}
+                status='tip'
+                text='I will disappear in 10 seconds.'
+                vertical='top'
+                {...props}
+            />
+        </>
+    )
+}
+
+export default FixedConfirmationToastAutoClose

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.md

@@ -0,0 +1 @@
+Auto close is used when you want the confirmation toast to close automatically after a certain time. `autoClose` property will be a delay number in ms.

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

@@ -0,0 +1,21 @@
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Error Message",
+  status: "error",
+  closeable: true
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Items Successfully Moved",
+  status: "success",
+  closeable: true
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Scan to Assign Selected Items",
+  status: "neutral",
+  closeable: true
+})%>

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

@@ -0,0 +1,42 @@
+import React from 'react'
+
+import FixedConfirmationToast from '../_fixed_confirmation_toast'
+
+const FixedConfirmationToastClose = (props) => {
+  return (
+    <div>
+      <div>
+        <FixedConfirmationToast
+            closeable
+            status="error"
+            text="Error Message"
+            {...props}
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <FixedConfirmationToast
+            closeable
+            status="success"
+            text="Items Successfully Moved"
+            {...props}
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <FixedConfirmationToast
+            closeable
+            status="neutral"
+            text="Scan to Assign Selected Items"
+            {...props}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default FixedConfirmationToastClose

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

@@ -0,0 +1,19 @@
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Error Message",
+  status: "error",
+  closeable: true
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Items Successfully Moved",
+  status: "success"
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Scan to Assign Selected Items",
+  status: "neutral"
+})%>

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

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import FixedConfirmationToast from '../_fixed_confirmation_toast'
+
+const FixedConfirmationToastDefault = (props) => {
+  return (
+    <div>
+      <div>
+        <FixedConfirmationToast
+            closeable
+            status="error"
+            text="Error Message"
+            {...props}
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <FixedConfirmationToast
+            status="success"
+            text="Items Successfully Moved"
+            {...props}
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <FixedConfirmationToast
+            status="neutral"
+            text="Scan to Assign Selected Items"
+            {...props}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default FixedConfirmationToastDefault

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

@@ -0,0 +1,5 @@
+<%= pb_rails("fixed_confirmation_toast", props: {
+  multi_line: true,
+  text: "Scan to Assign Selected Items. Click here to generate report",
+  status: "tip",
+}) %>

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

@@ -0,0 +1,18 @@
+import React from 'react'
+
+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>
+  )
+}
+
+export default FixedConfirmationToastMultiLine

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

@@ -0,0 +1,2 @@
+
+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.

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

@@ -0,0 +1,90 @@
+<%= pb_rails("button", props: { text: "Top Center", variant: "secondary", data: { toast: "#toast-top-center" } }) %>
+<%= pb_rails("button", props: { text: "Top Left", variant: "secondary", data: { toast: "#toast-top-left" } }) %>
+<%= pb_rails("button", props: { text: "Top Right", variant: "secondary", data: { toast: "#toast-top-right" } }) %>
+<%= pb_rails("button", props: { text: "Bottom Center", variant: "secondary", data: { toast: "#toast-bottom-center" } }) %>
+<%= pb_rails("button", props: { text: "Bottom Left", variant: "secondary", data: { toast: "#toast-bottom-left" } }) %>
+<%= pb_rails("button", props: { text: "Bottom Right", variant: "secondary", data: { toast: "#toast-bottom-right" } }) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  classname: "toast-to-hide",
+  closeable: true,
+  id: "toast-top-center",
+  text: "Top Center",
+  status: "neutral",
+  vertical: "top",
+  horizontal: "center"
+}) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  classname: "toast-to-hide",
+  closeable: true,
+  id: "toast-top-left",
+  text: "Top Left",
+  status: "neutral",
+  vertical: "top",
+  horizontal: "left"
+}) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  classname: "toast-to-hide",
+  closeable: true,
+  id: "toast-top-right",
+  text: "Top Right",
+  status: "neutral",
+  vertical: "top",
+  horizontal: "right"
+}) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  classname: "toast-to-hide",
+  closeable: true,
+  id: "toast-bottom-center",
+  text: "Bottom Center",
+  status: "neutral",
+  vertical: "bottom",
+  horizontal: "center"
+}) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  classname: "toast-to-hide",
+  closeable: true,
+  id: "toast-bottom-left",
+  text: "Bottom Left",
+  status: "neutral",
+  vertical: "bottom",
+  horizontal: "left"
+}) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  classname: "toast-to-hide",
+  closeable: true,
+  id: "toast-bottom-right",
+  text: "Bottom Right",
+  status: "neutral",
+  vertical: "bottom",
+  horizontal: "right"
+}) %>
+
+<script type="text/javascript">
+  const toasts = document.querySelectorAll(".toast-to-hide")
+  const buttons = document.querySelectorAll("button[data-toast]")
+
+  const hideToasts = () => {
+    toasts.forEach((toast) => {
+      toast.style.display = "none"
+    })
+  }
+
+  hideToasts()
+
+  buttons.forEach((button) => {
+    button.onclick = () => {
+      hideToasts()
+      let toast = document.querySelector(button.getAttribute("data-toast"))
+
+      if (toast) {
+        toast.style.display = "flex"
+      }
+    }
+  })
+</script>

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

@@ -0,0 +1,105 @@
+import React, { useState } from 'react'
+
+import Button from '../../pb_button/_button'
+import FixedConfirmationToast from '../_fixed_confirmation_toast'
+
+const FixedConfirmationToastPositions = (props) => {
+  const [state, setState] = useState({
+    open: false,
+    vertical: 'top',
+    horizontal: 'center',
+  })
+
+  const { vertical, horizontal, open } = state
+
+  const handleClick = (newState) => () => {
+    setState({ open: true, ...newState })
+  }
+
+  const handleClose = () => {
+    setState({ ...state, open: false })
+  }
+
+  return (
+    <div>
+      <Button
+          onClick={handleClick({
+            horizontal: 'center',
+            open: true,
+            vertical: 'top',
+          })}
+          text="Top Center"
+          variant="secondary"
+          {...props}
+      />
+      {' '}
+      <Button
+          onClick={handleClick({
+            horizontal: 'left',
+            open: true,
+            vertical: 'top',
+          })}
+          text="Top Left"
+          variant="secondary"
+          {...props}
+      />
+      {' '}
+      <Button
+          onClick={handleClick({
+            horizontal: 'right',
+            open: true,
+            vertical: 'top',
+          })}
+          text="Top Right"
+          variant="secondary"
+          {...props}
+      />
+      {' '}
+      <Button
+          onClick={handleClick({
+            horizontal: 'center',
+            open: true,
+            vertical: 'bottom',
+          })}
+          text="Bottom Center"
+          variant="secondary"
+          {...props}
+      />
+      {' '}
+      <Button
+          onClick={handleClick({
+            horizontal: 'left',
+            open: true,
+            vertical: 'bottom',
+          })}
+          text="Bottom Left"
+          variant="secondary"
+          {...props}
+      />
+      {' '}
+      <Button
+          onClick={handleClick({
+            horizontal: 'right',
+            open: true,
+            vertical: 'bottom',
+          })}
+          text="Bottom Right"
+          variant="secondary"
+          {...props}
+      />
+
+      <FixedConfirmationToast
+          closeable
+          horizontal={horizontal}
+          onClose={handleClose}
+          open={open}
+          status="neutral"
+          text={`${vertical} ${horizontal}`}
+          vertical={vertical}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default FixedConfirmationToastPositions