playbook_ui 11.12.1 → 11.13.0.pre.alpha.fontawesome1

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -1,12 +1,15 @@
 <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
 
-<%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg" }) do %>
+<%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
     <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
-        <%= pb_rails("caption", props: { text: "This is a complex dialog" }) %>
+        <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
     <% end %>
     <%= pb_rails("dialog/dialog_body") do %>
         <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
         <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+        <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
+        <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+
     <% end %>
-    <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Cancel", confirm_button: "Confirm", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
+    <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
 <% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb

@@ -3,9 +3,9 @@
 <%= pb_rails("dialog", props: { 
     id:"dialog-1", 
     size: "sm", 
-    title: "This is a header", 
-    text: "This is a dialog.", 
-    cancel_button: "Cancel", 
-    confirm_button: "Confirm", 
+    title: "Header Title is the Title Prop", 
+    text: "Hello Body Text, Nice to meet ya.", 
+    cancel_button: "Cancel Button", 
+    confirm_button: "Okay", 
     confirm_button_id: "confirm-button-1"
 }) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.html.erb

@@ -0,0 +1,58 @@
+<%= pb_rails("button", props: { text: "Small Dialog", data:{"open-dialog": "dialog-fullheight-sm"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Medium Dialog", data:{"open-dialog": "dialog-fullheight-md"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Large Dialog", data:{"open-dialog": "dialog-fullheight-lg"}, margin_right: "md" }) %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-fullheight-sm", 
+    size: "sm", 
+    full_height: true,
+   }) do %>
+    <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-sm" } ) do %>
+        <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
+    <% end %>
+    <%= pb_rails("dialog/dialog_body") do %>
+        <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
+        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+        <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
+        <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+
+    <% end %>
+    <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-sm"}) %>
+<% end %>
+
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-fullheight-md", 
+    size: "md",
+    full_height: true,
+     }) do %>
+        <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-md" } ) do %>
+            <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
+        <% end %>
+        <%= pb_rails("dialog/dialog_body") do %>
+            <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
+            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
+            <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+    
+        <% end %>
+        <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-md"}) %>
+<% end %>
+     
+<%= pb_rails("dialog", props: { 
+    id:"dialog-fullheight-lg", 
+    size: "lg",
+    full_height: true,
+     }) do %>
+        <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-lg" } ) do %>
+            <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
+        <% end %>
+        <%= pb_rails("dialog/dialog_body") do %>
+            <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
+            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
+            <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+    
+        <% end %>
+        <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-lg"}) %>
+<% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx

@@ -48,7 +48,7 @@ const DialogFullHeight = () => {
     <>
       <Flex wrap>
         <Button id="sm"
-            marginRight="xl"
+            marginRight="md"
             onClick={toggleHeaderSeparatorDialog}>
           {"Small Dialog"}
         </Button>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.md

@@ -1,2 +1 @@
-The full height dialog can be size small, medium, and large
-They may be left, center or right aligned. Except for the Xlarge dialog which should only be center aligned.
+To render a full height Dialog, use the `fullHeight` (react) or `full_height` (rails) prop. A full height Dialog can be size small, medium, or large. By default it will be center aligned. 

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.html.erb

@@ -0,0 +1,58 @@
+<%= pb_rails("button", props: { text: "Left Dialog", data:{"open-dialog": "dialog-fullheight-left"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Center Dialog", data:{"open-dialog": "dialog-fullheight-center"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Right Dialog", data:{"open-dialog": "dialog-fullheight-right"}, margin_right: "md" }) %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-fullheight-left", 
+    size: "md", 
+    full_height: true,
+    placement: "left",
+   }) do %>
+    <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-left" } ) do %>
+        <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
+    <% end %>
+    <%= pb_rails("dialog/dialog_body") do %>
+        <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
+        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+        <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
+        <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+    <% end %>
+    <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-left"}) %>
+<% end %>
+
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-fullheight-center", 
+    size: "md",
+    full_height: true,
+    placement: "center",
+     })  do %>
+        <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-center" } ) do %>
+            <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
+        <% end %>
+        <%= pb_rails("dialog/dialog_body") do %>
+            <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
+            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
+            <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+        <% end %>
+        <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-center"}) %>   
+<% end %>
+     
+<%= pb_rails("dialog", props: { 
+    id:"dialog-fullheight-right", 
+    size: "md",
+    full_height: true,
+    placement: "right",
+     }) do %>
+        <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-right" } ) do %>
+            <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
+        <% end %>
+        <%= pb_rails("dialog/dialog_body") do %>
+            <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
+            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
+            <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+        <% end %>
+        <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-right"}) %>    
+    <% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx

@@ -47,7 +47,7 @@ const DialogFullHeightPlacement = () => {
     <>
       <Flex wrap>
         <Button id="sm"
-            marginRight="xl"
+            marginRight="md"
             onClick={toggleHeaderSeparatorDialog}>
           {"Left Dialog"}
         </Button>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.md

@@ -1,5 +1,5 @@
-The full height dialog is centered by default, but the placement can changed via `placement` prop with one of the following values: `left`, `center`, `right`.
+The full height dialog is centered by default, but the placement can be changed via the `placement` prop with one of the following values: `left`, `center`, `right`.
 
-The `large` variant will allways be centered even sending a preferred placement.
+The `large` variant however will always be centered, even if the `placement` prop is used.
 
 All dialogs with the `fullHeight` prop will be displayed full-width on mobile screens.

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-scroll"} }) %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-scroll", 
+    size: "md", 
+    title: "Header Title is the Title Prop", 
+    text: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.", 
+    cancel_button: "Cancel", 
+    confirm_button: "Confirm", 
+    confirm_button_id: "confirm-button-1"
+}) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-overlay-click"} }) %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-overlay-click", 
+    size: "sm", 
+    title: "Neat Header", 
+    text: "Click on the overlay all day. I will stay open.", 
+    cancel_button: "Cancel", 
+    confirm_button: "Okay", 
+    confirm_button_id: "confirm-button-1",
+    should_close_on_overlay_click: false,
+}) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.html.erb

@@ -1,29 +1,29 @@
-<%= pb_rails("button", props: { text: "Small Dialog", data:{"open-dialog": "dialog-sm"} }) %>
-<%= pb_rails("button", props: { text: "Medium Dialog", data:{"open-dialog": "dialog-md"} }) %>
-<%= pb_rails("button", props: { text: "Large Dialog", data:{"open-dialog": "dialog-lg"} }) %>
+<%= pb_rails("button", props: { text: "Small Dialog", data:{"open-dialog": "dialog-sm"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Medium Dialog", data:{"open-dialog": "dialog-md"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Large Dialog", data:{"open-dialog": "dialog-lg"}, margin_right: "md" }) %>
 
 <%= pb_rails("dialog", props: { 
     id:"dialog-sm", 
     size: "sm", 
-    title: "This is a header",
-    text: "I am a small dialog",
+    title: "Header on small dialog",
+    text: "Body on small dialog",
     cancel_button: "Cancel", 
-    confirm_button: "Confirm", 
+    confirm_button: "Okay", 
    }) %>
 
 
 <%= pb_rails("dialog", props: { 
     id:"dialog-md", 
     size: "md",
-    title: "This is a header",
-    text: "I am a medium dialog",
-    cancel_button: "Cancel", confirm_button: "Confirm", 
+    title: "Title on medium dialog",
+    text: "Body on medium dialog",
+    cancel_button: "Cancel", confirm_button: "Okay", 
      })  %>
      
 <%= pb_rails("dialog", props: { 
     id:"dialog-lg", size: "lg",
-    title: "This is a header",
-    text: "I am a large dialog",
+    title: "Header on large dialog",
+    text: "Body on large dialog",
     cancel_button: "Cancel", 
-    confirm_button: "Confirm"
+    confirm_button: "Okay"
      }) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx

@@ -49,7 +49,7 @@ const DialogSizes = () => {
       >
         <Button
             id="sm"
-            marginRight="xl"
+            marginRight="md"
             onClick={toggleSmDialog}
         >
           {'Small Dialog'}

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.html.erb

@@ -0,0 +1,49 @@
+<%= pb_rails("button", props: { text: "Default Status", data: {"open-dialog": "dialog-stacked-default"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Caution Status", data: {"open-dialog": "dialog-stacked-caution"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Delete Status", data: {"open-dialog": "dialog-stacked-delete"}, margin_right: "md" }) %>
+
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-stacked-default", 
+    status: "default",
+    size: "sm", 
+    title: "Are you sure?", 
+    text: "Text explaining why there is an alert", 
+}) do %>
+    <%= pb_rails("dialog/dialog_footer") do %>
+        <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
+            <%= pb_rails("button", props: { text: "Yes, Action", full_width: true }) %>
+            <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", full_width: true, margin_top: "sm", data: {"close-dialog": "dialog-stacked-default" } }) %>
+        <% end %>
+    <% end %>
+<% end %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-stacked-caution", 
+    status: "caution",
+    size: "sm", 
+    title: "Are you sure?", 
+    text: "This is the action you will be taking", 
+}) do %>
+    <%= pb_rails("dialog/dialog_footer") do %>
+        <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
+            <%= pb_rails("button", props: { text: "Yes, Action", full_width: true }) %>
+            <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", full_width: true, margin_top: "sm", data: {"close-dialog": "dialog-stacked-caution" } }) %>
+        <% end %>
+    <% end %>
+<% end %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-stacked-delete", 
+    status: "delete",
+    size: "sm", 
+    title: "Delete", 
+    text: "You are about to delete ...", 
+}) do %>
+    <%= pb_rails("dialog/dialog_footer") do %>
+        <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
+            <%= pb_rails("button", props: { text: "Yes, Action", full_width: true }) %>
+            <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", full_width: true, margin_top: "sm", data: {"close-dialog": "dialog-stacked-delete" } }) %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md

@@ -1 +1 @@
-This is designed to show you how the buttons can stack with different alert styles. It also has a link style for the buttons for the mobile views.
+These examples highlight how the buttons within the Dialog can be stacked when using the Status Alert variant. It also has a link style for the buttons for the mobile views.

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.html.erb

@@ -0,0 +1,96 @@
+
+<%= pb_rails("flex", props:{ gap: "xs", wrap:true}) do %>
+<%= pb_rails("button", props: { text: "Default Status", data: {"open-dialog": "dialog-status-default"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Caution Status", data: {"open-dialog": "dialog-status-caution"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Delete Status", data: {"open-dialog": "dialog-status-delete"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Information Status", data: {"open-dialog": "dialog-status-info"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Error Status", data: {"open-dialog": "dialog-status-error"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Success Status", data: {"open-dialog": "dialog-status-success"}, margin_right: "md" }) %>
+<% end %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-status-default", 
+    status: "default",
+    size: "status_size", 
+    title: "Are you sure?", 
+    text: "Text explaining why there is an alert", 
+}) do %>
+    <%= pb_rails("dialog/dialog_footer") do %>
+        <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
+            <%= pb_rails("button", props: { text: "Yes, Action" }) %>
+            <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", data: {"close-dialog": "dialog-status-default" } }) %>
+        <% end %>
+    <% end %>
+<% end %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-status-info", 
+    status: "info",
+    size: "status_size", 
+    title: "Information", 
+    text: "Text explaining why there is an alert", 
+}) do %>
+    <%= pb_rails("dialog/dialog_footer") do %>
+        <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
+            <%= pb_rails("button", props: { text: "Ok, Thanks!", full_width: true, data: {"close-dialog": "dialog-status-info" } }) %>
+        <% end %>
+    <% end %>
+<% end %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-status-caution", 
+    status: "caution",
+    size: "status_size", 
+    title: "Are you Sure?", 
+    text: "This is the action you will be taking", 
+}) do %>
+    <%= pb_rails("dialog/dialog_footer") do %>
+        <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
+            <%= pb_rails("button", props: { text: "Yes, Action" }) %>
+            <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", data: {"close-dialog": "dialog-status-caution" } }) %>
+        <% end %>
+    <% end %>
+<% end %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-status-delete", 
+    status: "delete",
+    size: "status_size", 
+    title: "Delete", 
+    text: "You are about to delete ...", 
+}) do %>
+    <%= pb_rails("dialog/dialog_footer") do %>
+        <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
+            <%= pb_rails("button", props: { text: "Yes, Delete" }) %>
+            <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", data: {"close-dialog": "dialog-status-delete" } }) %>
+        <% end %>
+    <% end %>
+<% end %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-status-error", 
+    status: "error",
+    size: "status_size", 
+    title: "Error Message", 
+    text: "Text explaining the error", 
+}) do %>
+    <%= pb_rails("dialog/dialog_footer") do %>
+        <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
+            <%= pb_rails("button", props: { text: "Oh no!", full_width: true, data: {"close-dialog": "dialog-status-error" } }) %>
+        <% end %>
+    <% end %>
+<% end %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-status-success", 
+    status: "success",
+    size: "status_size", 
+    title: "Success!", 
+    text: "Text explaining what is successful", 
+}) do %>
+    <%= pb_rails("dialog/dialog_footer") do %>
+        <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
+            <%= pb_rails("button", props: { text: "Great!", full_width: true, data: {"close-dialog": "dialog-status-success" } }) %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.md

@@ -1 +1,3 @@
-This shows the different alert statuses that can be used for dialog boxes. These all have two buttons which is a default
+The Dialog kit also offers customizable Status Alert options as seen here. 
+
+For the rails version of the kit, when using custom confirm and cancel buttons as shown in these examples, the 'cancel' button must be given a `close-dialog` data attribute with a value that is the same as the id given to the dialog itself. 

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

@@ -4,6 +4,13 @@ examples:
   - dialog_default: Simple
   - dialog_compound_components: Complex
   - dialog_sizes: Sizes
+  - dialog_scrollable: Scrollable
+  - dialog_should_close_on_overlay: Overlay Click
+  - dialog_status: Status Alert
+  - dialog_stacked_alert: Stacked Button Alert
+  - dialog_full_height: Full Height
+  - dialog_full_height_placement: Full Height Placement
+
 
   react:
   - dialog_default: Simple

data/app/pb_kits/playbook/pb_enhanced_element/{element_observer.js → element_observer.ts}

@@ -1,34 +1,47 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import PbEnhancedElement from "./index"
+
 export default class ElementObserver {
-  constructor(matchDelegate, target = document) {
+  matchDelegate: PbEnhancedElement
+  target: Document
+  _mutationObserver: MutationObserver
+
+  constructor(matchDelegate: PbEnhancedElement, target = document) {
     this.matchDelegate = matchDelegate
     this.target = target
   }
 
-  start() {
+  get mutationObserver(): MutationObserver {
+    return this._mutationObserver =
+      this._mutationObserver || new MutationObserver((mutationList) => this.processMutationList(mutationList))
+  }
+
+  start(): void {
     this.mutationObserver.observe(this.target, { attributes: true, childList: true, subtree: true })
     this.catchup()
   }
 
-  stop() {
+  stop(): void {
     this.mutationObserverdisconnect()
   }
 
-  catchup() {
-    this.handleAdditions(this.matchDelegate.matches(this.target))
+  catchup(): void {
+    this.handleAdditions(this.matchDelegate.matches(this.target as unknown as Element))
   }
 
-  processMutationList(mutationList) {
+  processMutationList(mutationList: Array<MutationRecord>): void {
     for (const mutation of mutationList) {
       if (mutation.type == 'attributes') {
-        this.processAttributeChange(mutation.target)
+        this.processAttributeChange(mutation.target as Element)
       } else if (mutation.type == 'childList') {
-        this.processRemovedNodes(Array.from(mutation.removedNodes))
-        this.processAddedNodes(Array.from(mutation.addedNodes))
+        this.processRemovedNodes(Array.from(mutation.removedNodes) as Array<Element>)
+        this.processAddedNodes(Array.from(mutation.addedNodes) as Array<Element>)
       }
     }
   }
 
-  processAttributeChange(node) {
+  processAttributeChange(node: Element): void | Array<Element> {
     if (node.nodeType !== Node.ELEMENT_NODE) return
 
     const matches = this.matchDelegate.matches(node)
@@ -38,30 +51,25 @@ export default class ElementObserver {
     this.handleAdditions(matches)
   }
 
-  processRemovedNodes(nodes) {
+  processRemovedNodes(nodes: Array<Element>): void {
     for (const node of nodes) {
       if (node.nodeType !== Node.ELEMENT_NODE) continue
       this.handleRemovals(this.matchDelegate.matches(node))
     }
   }
 
-  processAddedNodes(nodes) {
+  processAddedNodes(nodes: Array<Element>): void {
     for (const node of nodes) {
       if (node.nodeType !== Node.ELEMENT_NODE) continue
       this.handleAdditions(this.matchDelegate.matches(node))
     }
   }
 
-  handleRemovals(elements) {
+  handleRemovals(elements: Array<Element>): void {
     for (const element of elements) this.matchDelegate.removeMatch(element)
   }
 
-  handleAdditions(elements) {
+  handleAdditions(elements: Array<Element>): void {
     for (const element of elements) this.matchDelegate.addMatch(element)
   }
-
-  get mutationObserver() {
-    return this._mutationObserver =
-      this._mutationObserver || new MutationObserver((mutationList) => this.processMutationList(mutationList))
-  }
 }

data/app/pb_kits/playbook/pb_enhanced_element/{index.js → index.ts}

@@ -1,21 +1,31 @@
-import ElementObserver from './element_observer.js'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import ElementObserver from './element_observer'
 
 export default class PbEnhancedElement {
-  static get elements() {
+  static _elements: Map<Element, PbEnhancedElement>
+  static _observer: ElementObserver
+  element: Element
+
+  constructor(element: Element) {
+    this.element = element
+  }
+
+  static get elements(): Map<Element, PbEnhancedElement> {
     return this._elements = (this._elements || new Map)
   }
 
-  static get observer() {
+  static get observer(): ElementObserver {
     return this._observer = (this._observer || new ElementObserver(this))
   }
 
-  static get selector() {
+  static get selector(): string {
     // eslint-disable-next-line no-console
     console.warn('Define a static property for selector or redefine the matches function in a subclass.', this)
     return null
   }
 
-  static matches(node) {
+  static matches(node: Element): Array<Element> {
     if (!this.selector) return []
 
     const matches = []
@@ -25,7 +35,7 @@ export default class PbEnhancedElement {
     return (matches)
   }
 
-  static addMatch(element) {
+  static addMatch(element: Element): void {
     if (element._pbEnhanced || this.elements.has(element)) return
 
     const enhansedElement = new this(element)
@@ -34,7 +44,7 @@ export default class PbEnhancedElement {
     element._pbEnhanced = enhansedElement
   }
 
-  static removeMatch(element) {
+  static removeMatch(element: Element): void {
     if (!this.elements.has(element)) return
 
     const enhansedElement = this.elements.get(element)
@@ -42,22 +52,19 @@ export default class PbEnhancedElement {
     this.elements.delete(element)
   }
 
-  static start() {
+  static start(): void {
     this.observer.start()
   }
 
-  static stop() {
+  static stop(): void {
     this.mutationObserver.stop()
   }
 
-  constructor(element) {
-    this.element = element
-  }
-
-  connect() {
+  connect(): void {
     // eslint-disable-next-line no-console
     console.warn('Redefine the connect function in a subclass.', this)
   }
 
-  disconnect() { }
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  disconnect(): void {}
 }