playbook_ui_docs 13.19.0.pre.alpha.play1141iconkitusinglibrary2264 → 13.19.0.pre.alpha.play1174fixconfimationtoastmobilebug2305

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 936e8ee804d7efa806eb0201fe38ce302d4ba5de0e91b94ad80baca0fc0af684
-  data.tar.gz: 1e44f49da5b663f002d48a47c28cdc1cf571c6b39912305c395bc12b2e521db2
+  metadata.gz: a2cb8ae9eee907fd4eccb8287903a2602711f15004f09cde0bc868d28644c04e
+  data.tar.gz: a1da2d366768b65dfb07fd6c09f936fd8b3a7c3741300815bec884dceb656c8c
 SHA512:
-  metadata.gz: 7f25ed0f6d1e41a8921225fdb80a6a271a3528414dd065d45e2186ce4f3f0470e8f8bb339c11e42a65ca49e30944d8eca4799527ccd1a84ee34ee3bf4f8c5305
-  data.tar.gz: 5f77993dacb64a84dcdfe660fff1f0b03b4ef843cbbfcf47b079c3190c454b3b48c755ef999639417e48964dab228d905c0e26184d607b6a58a83f4ac5046ffd
+  metadata.gz: 600de23bc1de284e9cf69f654489a4b249095f9613c69fd79b08cbab3e7582c1a519c51c478b8bf94dfdd53d3f140dd6e1673083ca49e1c4994c916c9d7cc026
+  data.tar.gz: e8e5dfe63ee2131a9521a52534ea6e3840b1e8eeb1ad25cb797df17155a56cd1990969d9e91e98910fe8e3a2328653cecf9e1aa3a039ab8d8d50c36ee5df5c6b

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

@@ -1,5 +1,36 @@
+<%= pb_rails("button", props: { text: "Multiline Example", variant: "primary", data: { toast: "#toast-top-center-multi" } }) %>
+
 <%= pb_rails("fixed_confirmation_toast", props: {
+  classname: "toast-to-hide",
+  closeable: true,
+  id: "toast-top-center-multi",
   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. 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 alltoasts = document.queryselectorall(".toast-to-hide")
+  const allbuttons = document.queryselectorall("button[data-toast]")
+
+  const hidealltoasts = () => {
+    alltoasts.foreach((toast) => {
+      toast.style.display = "none"
+    })
+  }
+
+  hidealltoasts()
+
+  allbuttons.foreach((button) => {
+    button.onclick = () => {
+      hidealltoasts()
+      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_multi_line.jsx

@@ -1,18 +1,52 @@
-import React from 'react'
 
+import React, { useState } from 'react'
+
+import Button from '../../pb_button/_button'
 import FixedConfirmationToast from '../_fixed_confirmation_toast'
 
-const FixedConfirmationToastMultiLine = (props) => {
+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="Multiline Example"
+          variant="primary"
+          {...props}
+      />
+      {' '}
       <FixedConfirmationToast
+          closeable
+          horizontal={horizontal}
           multiLine
+          onClose={handleClose}
+          open={open}
           status="tip"
-          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. 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={vertical}
           {...props}
       />
     </div>
   )
 }
 
-export default FixedConfirmationToastMultiLine
+export default FixedConfirmationToastPositions

data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb

@@ -0,0 +1,34 @@
+<%= pb_rails("table", props: { size: "sm", tag: "div" }) do %>
+  <div class="pb_table_thead">
+    <div class="pb_table_tr">
+      <div class="pb_table_th">Column 1</div>
+      <div class="pb_table_th">Column 2</div>
+      <div class="pb_table_th">Column 3</div>
+      <div class="pb_table_th">Column 4</div>
+      <div class="pb_table_th">Column 5</div>
+    </div>
+  </div>
+  <div class="pb_table_tbody">
+    <div class="pb_table_tr">
+      <div class="pb_table_td">Value 1</div>
+      <div class="pb_table_td">Value 2</div>
+      <div class="pb_table_td">Value 3</div>
+      <div class="pb_table_td">Value 4</div>
+      <div class="pb_table_td">Value 5</div>
+    </div>
+    <div class="pb_table_tr">
+      <div class="pb_table_td">Value 1</div>
+      <div class="pb_table_td">Value 2</div>
+      <div class="pb_table_td">Value 3</div>
+      <div class="pb_table_td">Value 4</div>
+      <div class="pb_table_td">Value 5</div>
+    </div>
+    <div class="pb_table_tr">
+      <div class="pb_table_td">Value 1</div>
+      <div class="pb_table_td">Value 2</div>
+      <div class="pb_table_td">Value 3</div>
+      <div class="pb_table_td">Value 4</div>
+      <div class="pb_table_td">Value 5</div>
+    </div>
+  </div>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import Table from '../_table'
+
+const TableDiv = (props) => {
+  return (
+    <Table
+        size="sm"
+        tag="div"
+        {...props}
+    >
+      <div className="pb_table_thead">
+        <div className="pb_table_tr">
+          <div className="pb_table_th">{'Column 1'}</div>
+          <div className="pb_table_th">{'Column 2'}</div>
+          <div className="pb_table_th">{'Column 3'}</div>
+          <div className="pb_table_th">{'Column 4'}</div>
+          <div className="pb_table_th">{'Column 5'}</div>
+        </div>
+      </div>
+      <div className="pb_table_tbody">
+        <div className="pb_table_tr">
+          <div className="pb_table_td">{'Value 1'}</div>
+          <div className="pb_table_td">{'Value 2'}</div>
+          <div className="pb_table_td">{'Value 3'}</div>
+          <div className="pb_table_td">{'Value 4'}</div>
+          <div className="pb_table_td">{'Value 5'}</div>
+        </div>
+        <div className="pb_table_tr">
+          <div className="pb_table_td">{'Value 1'}</div>
+          <div className="pb_table_td">{'Value 2'}</div>
+          <div className="pb_table_td">{'Value 3'}</div>
+          <div className="pb_table_td">{'Value 4'}</div>
+          <div className="pb_table_td">{'Value 5'}</div>
+        </div>
+        <div className="pb_table_tr">
+          <div className="pb_table_td">{'Value 1'}</div>
+          <div className="pb_table_td">{'Value 2'}</div>
+          <div className="pb_table_td">{'Value 3'}</div>
+          <div className="pb_table_td">{'Value 4'}</div>
+          <div className="pb_table_td">{'Value 5'}</div>
+        </div>
+      </div>
+    </Table>
+  )
+}
+
+export default TableDiv

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

@@ -1,5 +1,6 @@
 examples:
   rails:
+    # - table_div: Div
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large
@@ -26,6 +27,7 @@ examples:
     - table_striped: Striped Table
 
   react:
+    # - table_div: Div
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large

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

@@ -21,3 +21,4 @@ export { default as TableAlignmentShiftData } from './_table_alignment_shift_dat
 export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
 export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
 export { default as TableStriped } from './_table_striped.jsx'
+export { default as TableDiv } from './_table_div.jsx'