playbook_ui 12.20.0.pre.alpha.movemarkdown668 → 12.20.0.pre.alpha.title2665

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

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

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

@@ -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_should_close_on_overlay.jsx

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

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

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

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

@@ -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.jsx

@@ -0,0 +1,118 @@
+/* eslint-disable react/jsx-handler-names */
+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 DialogStackedAlert = () => {
+  const [defaultAlertOpened, toggleDefaultAlert] = useDialog()
+  const [cautionAlertOpened, toggleCautionAlert] = useDialog()
+  const [deleteAlertOpened, toggleDeleteAlert] = useDialog()
+
+  const dialogs = [
+    {
+      size: "sm",
+      status: "default",
+      text: "Text explaining why there is an alert",
+      title: "Are you sure?",
+      toggle: toggleDefaultAlert,
+      visible: defaultAlertOpened,
+      buttonOneText:"Yes, Action",
+      buttonTwoText: "No, Cancel"
+    },
+    {
+      size: "sm",
+      status: "caution",
+      text: "This is the action you will be taking",
+      title: "Are you sure?",
+      toggle: toggleCautionAlert,
+      visible: cautionAlertOpened,
+      buttonOneText:"Yes, Action",
+      buttonTwoText: "No, Cancel"
+    },
+    {
+      size: "sm",
+      status: "delete",
+      text: "You are about to delete ...",
+      title: "Delete",
+      toggle: toggleDeleteAlert,
+      visible: deleteAlertOpened,
+      buttonOneText:"Yes, Delete",
+      buttonTwoText: "No, Cancel"
+    }
+  ]
+
+  return (
+    <div>
+    <Flex
+        rowGap="xs" 
+        wrap
+    >
+      <Button
+          marginRight="md"
+          onClick={toggleDefaultAlert}
+      >
+        {"Default Status"}
+      </Button>
+      <Button
+          marginRight="md"
+          onClick={toggleCautionAlert}
+      >
+        {"Caution Status"}
+      </Button>
+      <Button
+          marginRight="md"
+          onClick={toggleDeleteAlert}
+      >
+        {"Delete Status"}
+      </Button>
+    </Flex>
+    <Flex>
+      {dialogs.map((dialog) => (
+        <Dialog
+            alertStyle={dialog.alertStyle}
+            key={dialog.status}
+            onClose={dialog.toggle}
+            opened={dialog.visible}
+            size={dialog.size}
+            status={dialog.status}
+            text={dialog.text}
+            title={dialog.title}
+        >
+        <Dialog.Footer
+            padding="sm"
+            paddingBottom = "none"
+            paddingX="md"
+        >
+          <Button
+              fullWidth
+              onClick={dialog.toggle}
+          >
+            {dialog.buttonOneText}
+          </Button>
+        </Dialog.Footer>
+        <Dialog.Footer
+            padding="sm"
+            paddingBottom = "md"
+            paddingX="md"
+        >
+          <Button
+              fullWidth
+              onClick={dialog.toggle}
+              variant="secondary"
+          >
+            {dialog.buttonTwoText}
+          </Button>
+        </Dialog.Footer>
+        </Dialog>
+      ))}
+    </Flex>
+  </div>
+  )
+}
+
+export default DialogStackedAlert

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

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