playbook_ui_docs 12.31.0.pre.alpha.multilevelnopillsdesigns944 → 12.32.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1da8141a143b97cc52b5be1fccc8a1572ddd8af27d820cd8c192689ebd4206dc
-  data.tar.gz: 2631b62b07dea90867762e2cdb4f5308441c24abab1144d9ba3159558f0e8cc0
+  metadata.gz: '01700709d03454065bd3f7c29892078b5e36a98c67633cd5e4a5c7ca8d67f8a2'
+  data.tar.gz: fc154b9f27ecc769def6089ee546aec147cfcda0f6f7933ef5fa041af98b6ad5
 SHA512:
-  metadata.gz: 0bf5642cc20a5bbb1cd07236c04cb581274870e0517aa5f7823c175ced3285e681a8a1b0a681c22fe9d3804906fef0b8e26f364d37c7db358d3c1a2ac35051df
-  data.tar.gz: 55d3cc41e4d09d09aa6c2504d7a554de5634a23e9162374f461e8d5a94ced70b207c34d5accaf96d32b209f5abfdc6796fc50a1afb055889d6820f0a82cf4268
+  metadata.gz: 67c99086eab351f965e1fab1198f5b9c37cdac0514414f5bda7bcd64ed0d2171a8b40457321313d13b13ffbe88d8489d09555f3decc6962bad42cd10a625d57b
+  data.tar.gz: 5aa40d6431811565b9e1dafaa360c496a36bdde350eb9fcdd1aac5c0b5b710ffb811f38486136bbf0b00b38866674361d78b2864797ee24e65d07bc5b6fe4be9

data/app/pb_kits/playbook/pb_button/docs/_button_hover.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("button", props: { hover: { shadow: "deep"}, text: "Shadow Deep", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { hover: { shadow: "deeper"}, text: "Shadow Deeper", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { hover: { shadow: "deepest"}, text: "Shadow Deepest", margin_right: "lg" }) %>

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

@@ -10,6 +10,7 @@ examples:
   - button_options: Button Additional Options
   - button_size: Button Size
   - button_form: Button Form Attribute
+  
   react:
   - button_default: Button Variants
   - button_full_width: Button Full Width

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

@@ -0,0 +1,17 @@
+<%= pb_rails("fixed_confirmation_toast", props: {
+  padding_y: "none",
+  status: "success"
+}) do %>
+  <%= pb_rails("title", props: {
+    dark: true,
+    margin_left: "md",
+    text: "Design & Handoff Process was moved to UX Designer Learning Track.",
+    size: 4
+  }) %>
+  <%= pb_rails("button", props: {
+    dark: true,
+    padding_right: "none",
+    text: "Undo",
+    variant: "link"
+  }) %>
+<% end %>

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

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import FixedConfirmationToast from '../_fixed_confirmation_toast'
+import Button from '../../pb_button/_button'
+import Title from '../../pb_title/_title'
+
+const FixedConfirmationToastChildren = (props) => {
+    return (
+        <>
+            <FixedConfirmationToast
+                paddingY="none"
+                status="success"
+                {...props}
+            >
+                <Title
+                    dark
+                    marginLeft="md"
+                    size={4}
+                    text="Design & Handoff Process was moved to UX Designer Learning Track."
+                />
+                <Button
+                    dark
+                    onClick={() => alert("button clicked!")}
+                    paddingRight="none"
+                    text="Undo"
+                    variant="link"
+                />
+            </FixedConfirmationToast>
+        </>
+    )
+}
+
+export default FixedConfirmationToastChildren

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

@@ -0,0 +1,3 @@
+Pass anything (including any of our kits) to the `children` prop to customize the content of the fixed confirmation toast.
+
+**NOTE:** passing `children` overrides any content passed to `text`

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

@@ -5,6 +5,7 @@ examples:
   - 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_children: Children
   
   react:
   - fixed_confirmation_toast_default: Default
@@ -12,3 +13,4 @@ examples:
   - 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
+  - fixed_confirmation_toast_children: Children

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

@@ -3,3 +3,4 @@ export { default as FixedConfirmationToastMultiLine } from './_fixed_confirmatio
 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'
+export { default as FixedConfirmationToastChildren } from './_fixed_confirmation_toast_children.jsx'

data/app/pb_kits/playbook/pb_message/docs/_message_hover.html.erb

@@ -0,0 +1,25 @@
+<%= pb_rails("message", props: {
+  avatar_name: "Mike Bishop",
+  avatar_status: "online",
+  avatar_url: "https://randomuser.me/api/portraits/men/50.jpg",
+  border_radius: "rounded",
+  hover: { background: "success_subtle" },
+  label: "Anna Black",
+  message: "How can we assist you today?",
+  padding: "xs",
+}) %>
+
+<br><br>
+
+<%= pb_rails("message", props: {
+  align_timestamp: "left",
+  avatar_name: "Lucille Sanchez",
+  avatar_url: "https://randomuser.me/api/portraits/women/50.jpg",
+  border_radius: "rounded",
+  hover: { shadow: "deepest" },
+  label: "Becca Jacobs",
+  message: "Application for Kate Smith is waiting for your approval",
+  padding: "xs",
+}) %>
+
+<br><br>

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

@@ -3,6 +3,7 @@ examples:
   rails:
   - message_default: Default
   - message_timestamp: With Timestamp Hover
+  - message_hover: Hover
 
 
   react: