playbook_ui 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.title2665

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

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

@@ -0,0 +1,14 @@
+examples:
+  
+  rails:
+  - fixed_confirmation_toast_default: Default
+  - fixed_confirmation_toast_multi_line: Multi Line
+  - fixed_confirmation_toast_close: Click to Close
+  - fixed_confirmation_toast_positions: Click to Show Positions
+  
+  react:
+  - fixed_confirmation_toast_default: Default
+  - fixed_confirmation_toast_multi_line: Multi Line
+  - fixed_confirmation_toast_close: Click to Close
+  - fixed_confirmation_toast_positions: Click to Show Positions
+  - fixed_confirmation_toast_auto_close: Click to Show Auto Close

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

@@ -0,0 +1,5 @@
+export { default as FixedConfirmationToastDefault } from './_fixed_confirmation_toast_default.jsx'
+export { default as FixedConfirmationToastMultiLine } from './_fixed_confirmation_toast_multi_line.jsx'
+export { default as FixedConfirmationToastClose } from './_fixed_confirmation_toast_close.jsx'
+export { default as FixedConfirmationToastPositions } from './_fixed_confirmation_toast_positions.jsx'
+export { default as FixedConfirmationToastAutoClose } from './_fixed_confirmation_toast_auto_close.jsx'

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

@@ -0,0 +1 @@
+This kit is used to build most of the complex interfaces. The Flex Kit is used the same way flex box is used.

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

@@ -0,0 +1,101 @@
+<%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>
+ <div class="flex-doc-example">
+  <%= pb_rails("flex", props:{ align: "start" }) do %>
+    <%= pb_rails("flex/flex_item") do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"none"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"xl"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+ <div class="flex-doc-example">
+  <%= pb_rails("flex", props:{ align: "center" }) do %>
+    <%= pb_rails("flex/flex_item") do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"none"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"xl"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+ <div class="flex-doc-example">
+  <%= pb_rails("flex", props:{ align: "end" }) do %>
+    <%= pb_rails("flex/flex_item") do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"none"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"xl"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+ <div class="flex-doc-example">
+  <%= pb_rails("flex", props:{ align: "baseline" }) do %>
+    <%= pb_rails("flex/flex_item") do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"none"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"xl"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
+  <% end %>
+</div>
+
+
+  <br/><br/>
+
+   <div class="flex-doc-example">
+  <%= pb_rails("flex", props:{ align: "stretch" }) do %>
+    <%= pb_rails("flex/flex_item") do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"none"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"xl"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
+  <% end %>
+</div>
+
+
+  <br/><br/>
+
+
+  <%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>
+
+ <div class="flex-doc-example">
+  <%= pb_rails("flex", props:{orientation: "column", align: "start" }) do %>
+    <%= pb_rails("flex/flex_item") do %>1<% end %>
+    <%= pb_rails("flex/flex_item") do %>2<% end %>
+    <%= pb_rails("flex/flex_item") do %>3<% end %>
+    <%= pb_rails("flex/flex_item") do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+ <div class="flex-doc-example">
+  <%= pb_rails("flex", props:{orientation: "column", align: "center" }) do %>
+    <%= pb_rails("flex/flex_item") do %>1<% end %>
+    <%= pb_rails("flex/flex_item") do %>2<% end %>
+    <%= pb_rails("flex/flex_item") do %>3<% end %>
+    <%= pb_rails("flex/flex_item") do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+ <div class="flex-doc-example">
+  <%= pb_rails("flex", props:{orientation: "column", align: "end" }) do %>
+    <%= pb_rails("flex/flex_item") do %>1<% end %>
+    <%= pb_rails("flex/flex_item") do %>2<% end %>
+    <%= pb_rails("flex/flex_item") do %>3<% end %>
+    <%= pb_rails("flex/flex_item") do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+  <div class="flex-doc-example">
+  <%= pb_rails("flex", props:{orientation: "column", align: "stretch" }) do %>
+    <%= pb_rails("flex/flex_item") do %>1<% end %>
+    <%= pb_rails("flex/flex_item") do %>2<% end %>
+    <%= pb_rails("flex/flex_item") do %>3<% end %>
+    <%= pb_rails("flex/flex_item") do %>4<% end %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_flex/docs/_flex_align.jsx

@@ -0,0 +1,205 @@
+import React from 'react'
+import { Flex, FlexItem, Title } from  '../..'
+
+const FlexAlign = (props) => {
+  return (
+    <>
+
+      <Title
+          size={4}
+          text="row"
+          {...props}
+      />
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            align="start"
+            {...props}
+        >
+          <FlexItem>
+            {'1'}
+          </FlexItem>
+          <FlexItem>
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="xl">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            align="center"
+            {...props}
+        >
+          <FlexItem>
+            {'1'}
+          </FlexItem>
+          <FlexItem>
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="xl">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            align="end"
+            {...props}
+        >
+          <FlexItem>
+            {'1'}
+          </FlexItem>
+          <FlexItem>
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="xl">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            align="stretch"
+            orientation="row"
+            {...props}
+        >
+          <FlexItem>
+            {'1'}
+          </FlexItem>
+          <FlexItem>
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="xl">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <Title
+          size={4}
+          text="Column"
+          {...props}
+      />
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            align="start"
+            orientation="column"
+            {...props}
+        >
+          <FlexItem>
+            {'1'}
+          </FlexItem>
+          <FlexItem>
+            {'2'}
+          </FlexItem>
+          <FlexItem>
+            {'3'}
+          </FlexItem>
+          <FlexItem>
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            align="center"
+            orientation="column"
+            {...props}
+        >
+          <FlexItem>
+            {'1'}
+          </FlexItem>
+          <FlexItem>
+            {'2'}
+          </FlexItem>
+          <FlexItem>
+            {'3'}
+          </FlexItem>
+          <FlexItem>
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            align="end"
+            orientation="column"
+            {...props}
+        >
+          <FlexItem>
+            {'1'}
+          </FlexItem>
+          <FlexItem>
+            {'2'}
+          </FlexItem>
+          <FlexItem>
+            {'3'}
+          </FlexItem>
+          <FlexItem>
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            align="stretch"
+            orientation="column"
+            {...props}
+        >
+          <FlexItem>
+            {'1'}
+          </FlexItem>
+          <FlexItem>
+            {'2'}
+          </FlexItem>
+          <FlexItem>
+            {'3'}
+          </FlexItem>
+          <FlexItem>
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+    </>
+  )
+}
+
+export default FlexAlign

data/app/pb_kits/playbook/pb_flex/docs/_flex_align.md

@@ -0,0 +1,3 @@
+##### Prop
+
+`align` | **Type**: String | **Values**: start | center | end | stretch | baseline | none