playbook_ui 12.19.0 → 12.20.0.pre.alpha.movemarkdown668

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 %>

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

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

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

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