playbook_ui 12.19.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown638 → 12.19.0.pre.alpha.movemarkdown639

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

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

@@ -1,58 +0,0 @@
-<%= 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

@@ -1,102 +0,0 @@
-import React, { useState } from "react";
-import {
-  Body,
-  Button,
-  Caption,
-  Dialog,
-  Flex,
-  RichTextEditor,
-  Typeahead,
-} from "../..";
-
-const useDialog = (visible = false) => {
-  const [opened, setOpened] = useState(visible);
-  const toggle = () => setOpened(!opened);
-
-  return [opened, toggle];
-};
-
-const DialogFullHeightPlacement = () => {
-  const [headerSeparatorDialogOpened, toggleHeaderSeparatorDialog] =
-    useDialog();
-  const [footerSeparatorDialogOpened, toggleFooterSeparatorDialog] =
-    useDialog();
-  const [bothSeparatorsDialogOpened, toggleBothSeparatorsDialog] = useDialog();
-
-  const dialogs = [
-    {
-      title: "Left Dialog",
-      toggle: toggleHeaderSeparatorDialog,
-      visible: headerSeparatorDialogOpened,
-      placement: "left",
-    },
-    {
-      title: "Center Dialog",
-      toggle: toggleFooterSeparatorDialog,
-      visible: footerSeparatorDialogOpened,
-    },
-    {
-      title: "Right Dialog",
-      toggle: toggleBothSeparatorsDialog,
-      visible: bothSeparatorsDialogOpened,
-      placement: "right",
-    },
-  ];
-
-  return (
-    <>
-      <Flex wrap>
-        <Button id="sm"
-            marginRight="md"
-            onClick={toggleHeaderSeparatorDialog}>
-          {"Left Dialog"}
-        </Button>
-        <Button marginRight="xl"
-            onClick={toggleFooterSeparatorDialog}>
-          {"Center Dialog"}
-        </Button>
-        <Button marginRight="xl"
-            onClick={toggleBothSeparatorsDialog}>
-          {"Right Dialog"}
-        </Button>
-      </Flex>
-      <Flex>
-        {dialogs.map(({toggle, visible, placement, title}, index) => (
-          <Dialog
-              fullHeight
-              key={index}
-              onClose={toggle}
-              opened={visible}
-              placement={placement}
-              size={"md"}
-          >
-            <Dialog.Header>
-              <Body>{title}</Body>
-            </Dialog.Header>
-            <Dialog.Body>
-              <Caption marginBottom="xs">{"Description"}</Caption>
-              <RichTextEditor />
-              <br />
-              <Caption>
-                {
-                  "Type in a word or term too help find tickets later. ex. training,"
-                }
-                {"phone setup, hr"}
-              </Caption>
-              <Typeahead placeholder="Tags.." />
-            </Dialog.Body>
-            <Dialog.Footer>
-              <Button onClick={toggle}>{"Send My Issue"}</Button>
-              <Button onClick={toggle}
-                  variant="link">
-                {"Back"}
-              </Button>
-            </Dialog.Footer>
-          </Dialog>
-        ))}
-      </Flex>
-    </>
-  );
-};
-
-export default DialogFullHeightPlacement;

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

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

@@ -1,23 +0,0 @@
-<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-scroll"}, margin_right: "md" }) %>
-<%= pb_rails("button", props: { text: "Open Full Height Dialog", data: {"open-dialog": "dialog-scroll-full-height"}, margin_right: "md" }) %>
-
-<%= 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"
-}) %>
-
-<%= pb_rails("dialog", props: { 
-    full_height: true,
-    id:"dialog-scroll-full-height", 
-    size: "sm", 
-    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. 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, 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.", 
-    cancel_button: "Cancel", 
-    confirm_button: "Confirm", 
-    confirm_button_id: "confirm-button-1"
-}) %>

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

@@ -1,51 +0,0 @@
-import React, { useState } from 'react'
-import { Button, Dialog } from '../../'
-
-const DialogScrollable = () => {
-
-  const useDialog = (visible = false) => {
-    const [opened, setOpened] = useState(visible)
-    const toggle = () => setOpened(!opened)
-  
-    return [opened, toggle]
-  }
-  
-    const [dialog1Opened, toggleDialog1] = useDialog()
-    const [dialog2Opened, toggleDialog2] = useDialog()
-
-  return (
-    <>
-      <Button marginRight="md" 
-          onClick={toggleDialog1}>{'Open Dialog'}
-      </Button>
-      <Button marginRight="md" 
-          onClick={toggleDialog2}>{'Open Full Height Dialog'}
-      </Button>
-      <Dialog
-          cancelButton="Cancel"
-          confirmButton="Okay"
-          onCancel={toggleDialog1}
-          onClose={toggleDialog1}
-          onConfirm={toggleDialog1}
-          opened={dialog1Opened}
-          size="md"
-          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."
-          title="Header Title is the Title Prop"
-      />
-      <Dialog
-          cancelButton="Cancel"
-          confirmButton="Okay"
-          fullHeight
-          onCancel={toggleDialog2}
-          onClose={toggleDialog2}
-          onConfirm={toggleDialog2}
-          opened={dialog2Opened}
-          size="sm"
-          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. 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. 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."
-          title="Header Title is the Title Prop"
-      />
-    </>
-  )
-}
-
-export default DialogScrollable

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

@@ -1,5 +0,0 @@
-The dialog will create a scroll container automatically when the text exceeds the height of the page. No prop or configuration is needed. 
-
-When such a scroll container is created, the dialog header will remain fixed at top of dialog and not scroll with the body content.
-
-If the dialog is a  `fullHeight` variant, the header and footer will both be sticky and not scroll with the body content. 

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

@@ -1,119 +0,0 @@
-/* @flow */
-
-import React, { useState } from 'react'
-import { Button, Dialog, Flex } from '../../'
-
-const useDialog = (visible = false) => {
-  const [opened, setOpened] = useState(visible)
-  const toggle = () => setOpened(!opened)
-
-  return [opened, toggle]
-}
-
-const DialogSeparators = () => {
-  const [headerSeparatorDialogOpened, toggleHeaderSeparatorDialog] = useDialog()
-  const [footerSeparatorDialogOpened, toggleFooterSeparatorDialog] = useDialog()
-  const [bothSeparatorsDialogOpened, toggleBothSeparatorsDialog] = useDialog()
-  const [
-    neitherSeparatorsDialogOpened,
-    toggleNeitherSeparatorsDialog,
-  ] = useDialog()
-
-  /* eslint-disable react/jsx-handler-names */
-
-  const dialogs = [
-    {
-      size: 'md',
-      text: 'Header Separator',
-      title: 'Header Separator ',
-      toggle: toggleHeaderSeparatorDialog,
-      visible: headerSeparatorDialogOpened,
-      header: true,
-      footer: false,
-    },
-    {
-      size: 'md',
-      text: 'Footer Separator',
-      title: 'Footer Separator',
-      toggle: toggleFooterSeparatorDialog,
-      visible: footerSeparatorDialogOpened,
-      header: false,
-      footer: true,
-    },
-    {
-      size: 'md',
-      text: 'Both Separators',
-      title: 'Both Separators',
-      toggle: toggleBothSeparatorsDialog,
-      visible: bothSeparatorsDialogOpened,
-      header: true,
-      footer: true,
-    },
-    {
-      size: 'md',
-      text: 'No Separators',
-      title: 'No Separators',
-      toggle: toggleNeitherSeparatorsDialog,
-      visible: neitherSeparatorsDialogOpened,
-      header: false,
-      footer: false,
-    },
-  ]
-
-  return (
-    <div>
-      <Flex>
-        <Button
-            id="sm"
-            marginRight="xl"
-            onClick={toggleHeaderSeparatorDialog}
-        >
-          {'Default'}
-        </Button>
-        <Button
-            marginRight="xl"
-            onClick={toggleFooterSeparatorDialog}
-        >
-          {'Footer Separator'}
-        </Button>
-        <Button
-            marginRight="xl"
-            onClick={toggleBothSeparatorsDialog}
-        >
-          {'Both Separators'}
-        </Button>
-        <Button
-            marginRight="xl"
-            onClick={toggleNeitherSeparatorsDialog}
-        >
-          {'No Separators'}
-        </Button>
-      </Flex>
-      <Flex>
-        {dialogs.map((dialog) => (
-          <Dialog
-              key={dialog.size}
-              opened={dialog.visible}
-              size={dialog.size}
-          >
-            <Dialog.Header separator={dialog.header}>
-              {dialog.title}
-            </Dialog.Header>
-            <Dialog.Body>{dialog.text}</Dialog.Body>
-            <Dialog.Footer separator={dialog.footer}>
-              <Button onClick={dialog.toggle}>{'Okay'}</Button>
-              <Button
-                  onClick={dialog.toggle}
-                  variant="link"
-              >
-                {'Cancel'}
-              </Button>
-            </Dialog.Footer>
-          </Dialog>
-        ))}
-      </Flex>
-    </div>
-  )
-}
-
-export default DialogSeparators

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

@@ -1,2 +0,0 @@
-By default, the Dialog.Header will load with `separator={true}` and the Dialog.Footer will load with `separator={false}`.
-To control it yourself, toggle the boolean prop as you wish.

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

@@ -1,12 +0,0 @@
-<%= 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_should_close_on_overlay.jsx

@@ -1,28 +0,0 @@
-import React, { useState } from 'react'
-import { Button, Dialog } from '../../'
-
-const DialogShouldCloseOnOverlay = () => {
-  const [isOpen, setIsOpen] = useState(false)
-  const close = () => setIsOpen(false)
-  const open = () => setIsOpen(true)
-
-  return (
-    <>
-      <Button onClick={open}>{'Open Dialog'}</Button>
-      <Dialog
-          cancelButton="Cancel"
-          confirmButton="Okay"
-          onCancel={close}
-          onClose={close}
-          onConfirm={close}
-          opened={isOpen}
-          shouldCloseOnOverlayClick={false}
-          size="sm"
-          text="Click on the overlay all day. I will stay open."
-          title="Neat Header"
-      />
-    </>
-  )
-}
-
-export default DialogShouldCloseOnOverlay

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

@@ -1,2 +0,0 @@
-When `shouldCloseOnOverlayClick` is explicitly set to `false`, click events on the overlay will not close the modal.
-By default, `shouldCloseOnOverlayClick` is set to true.

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

@@ -1,29 +0,0 @@
-<%= 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: "Header on small dialog",
-    text: "Body on small dialog",
-    cancel_button: "Cancel", 
-    confirm_button: "Okay", 
-   }) %>
-
-
-<%= pb_rails("dialog", props: { 
-    id:"dialog-md", 
-    size: "md",
-    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: "Header on large dialog",
-    text: "Body on large dialog",
-    cancel_button: "Cancel", 
-    confirm_button: "Okay"
-     }) %>

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

@@ -1,96 +0,0 @@
-/* @flow */
-
-import React, { useState } from 'react'
-import { Button, Dialog, Flex } from '../../'
-
-const useDialog = (visible = false) => {
-  const [opened, setOpened] = useState(visible)
-  const toggle = () => setOpened(!opened)
-
-  return [opened, toggle]
-}
-
-const DialogSizes = () => {
-  const [smDialogOpened, toggleSmDialog] = useDialog()
-  const [mdDialogOpened, toggleMdDialog] = useDialog()
-  const [lgDialogOpened, toggleLgDialog] = useDialog()
-
-  /* eslint-disable react/jsx-handler-names */
-
-  const dialogs = [
-    {
-      size: 'sm',
-      text: 'Body on small dialog',
-      title: 'Header on small dialog',
-      toggle: toggleSmDialog,
-      visible: smDialogOpened,
-    },
-    {
-      size: 'md',
-      text: 'Body on medium dialog',
-      title: 'Header on medium dialog',
-      toggle: toggleMdDialog,
-      visible: mdDialogOpened,
-    },
-    {
-      size: 'lg',
-      text: 'Body on large dialog',
-      title: 'Header on large dialog',
-      toggle: toggleLgDialog,
-      visible: lgDialogOpened,
-    },
-  ]
-
-  return (
-    <div>
-      <Flex 
-          rowGap="xs" 
-          wrap
-      >
-        <Button
-            id="sm"
-            marginRight="md"
-            onClick={toggleSmDialog}
-        >
-          {'Small Dialog'}
-        </Button>
-        <Button
-            marginRight="md"
-            onClick={toggleMdDialog}
-        >
-          {'Medium Dialog'}
-        </Button>
-        <Button
-            marginRight="md"
-            onClick={toggleLgDialog}
-        >
-          {'Large Dialog'}
-        </Button>
-      </Flex>
-      <Flex>
-        {dialogs.map((dialog) => (
-          <Dialog
-              key={dialog.size}
-              onClose={dialog.toggle}
-              opened={dialog.visible}
-              size={dialog.size}
-          >
-            <Dialog.Header>{dialog.title}</Dialog.Header>
-            <Dialog.Body>{dialog.text}</Dialog.Body>
-            <Dialog.Footer>
-              <Button onClick={dialog.toggle}>{'Okay'}</Button>
-              <Button
-                  onClick={dialog.toggle}
-                  variant="link"
-              >
-                {'Cancel'}
-              </Button>
-            </Dialog.Footer>
-          </Dialog>
-        ))}
-      </Flex>
-    </div>
-  )
-}
-
-export default DialogSizes

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

@@ -1,49 +0,0 @@
-<%= 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 %>