RubyGems - playbook_ui - Versions diffs - 11.4.0 → 11.5.0.pre.alpha.fontawesome - Mend

playbook_ui 11.4.0 → 11.5.0.pre.alpha.fontawesome

Files changed (129) hide show

data/app/pb_kits/playbook/pb_dialog/_dialog.jsx CHANGED Viewed

@@ -37,7 +37,7 @@ type DialogProps = {
   opened: boolean,
   portalClassName?: string,
   shouldCloseOnOverlayClick: boolean,
-  size?: "sm" | "md" | "lg" | "content",
+  size?: "sm" | "md" | "lg" | "status_size" | "content",
   status?: "info" | "caution" | "delete" | "error" | "success",
   text?: string,
   title?: string,
@@ -53,7 +53,7 @@ const Dialog = (props: DialogProps) => {
     className,
     data = {},
     id,
-    size = 'md',
+    size = "md",
     children,
     loading = false,
     opened,
@@ -107,25 +107,35 @@ const Dialog = (props: DialogProps) => {
   }
   const sweetAlertStatus = {
-    info: {
+    default: {
       icon: "exclamation-circle",
       variant: "default",
+      size: "lg"
+    },
+    info: {
+      icon: "info-circle",
+      variant: "default",
+      size: "lg"
     },
     caution: {
-      icon: "triangle-warning",
+      icon: "exclamation-triangle",
       variant: "yellow",
+      size: "lg"
     },
     delete: {
-      icon: "trash",
+      icon: "trash-alt",
       variant: "red",
+      size: "lg"
     },
     error: {
       icon: "times-circle",
       variant: "red",
+      size: "lg"
     },
     success: {
       icon: "check-circle",
       variant: "green",
+      size: "lg"
     },
   }
@@ -150,27 +160,35 @@ const Dialog = (props: DialogProps) => {
             shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
             status={status}
         >
-          <If condition={title}>
+          <If condition={title && !status}>
             <Dialog.Header>{title}</Dialog.Header>
           </If>
           <If condition={!status && text}>
-            <Dialog.Body>{text}</Dialog.Body>
+            <Dialog.Body>
+                {text}
+              </Dialog.Body>
           </If>
           <If condition={status}>
-            <Dialog.Body>
-              <Flex align='center'
-                  orientation='column'
+            <Dialog.Body
+                padding="md"
+            >
+              <Flex
+                  align="center"
+                  orientation="column"
               >
                 <IconCircle
                     icon={sweetAlertStatus[status].icon}
+                    size={sweetAlertStatus[status].size}
                     variant={sweetAlertStatus[status].variant}
                 />
-                <Title marginY='sm'
+                <Title
+                    marginTop="sm"
                     size={3}
                 >
                   {title}
                 </Title>
-                <Body marginY='xs'
+                <Body
+                    marginTop="xs"
                     text={text}
                 />
               </Flex>
@@ -184,9 +202,9 @@ const Dialog = (props: DialogProps) => {
               >
                 {confirmButton}
               </Button>
-              <Button id='cancel-button'
+              <Button id="cancel-button"
                   onClick={onCancel}
-                  variant='link'
+                  variant="link"
               >
                 {cancelButton}
               </Button>

data/app/pb_kits/playbook/pb_dialog/_dialog.scss CHANGED Viewed

@@ -59,6 +59,7 @@
 	// Local Variables
 	$gutter: $space_lg;
 	$small: 300px;
+	$status_size: 375px;
 	$medium: 500px;
 	$large: 800px;
 	$animation-duration: 0.2s;
@@ -78,6 +79,10 @@
 	outline: none;
 	animation-timing-function: $easeInOutQuint;
+	&[class*="_status_size"] {
+		width: $status_size;
+	}
 	&[class*="_sm"] {
 		width: $small;
 	}

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.jsx CHANGED Viewed

@@ -7,8 +7,8 @@ import { globalProps } from '../../utilities/globalProps'
 // Body component
 const DialogBody = (props: DialogBodyProps) => {
-  const { children, padding = 'sm', className } = props
-  const bodyCSS = buildCss('dialog_body')
+  const { children, padding = "sm", className } = props
+  const bodyCSS = buildCss("dialog_body")
   const bodySpacing = globalProps(props, { padding })
   return (

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.jsx CHANGED Viewed

@@ -9,17 +9,35 @@ import { globalProps } from '../../utilities/globalProps'
 import Flex from '../../pb_flex/_flex'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
+type DialogFooterProps = {
+  aria?: object,
+  children: array<React.ReactNode> | React.ReactNode | string,
+  className?: string,
+  closeable: boolean,
+  data?: object,
+  id?: string,
+  padding?: string,
+  paddingBottom?: string,
+  paddingX?: string,
+  separator: boolean,
+  spacing?: string,
+}
 // Footer component
 const DialogFooter = (props: DialogFooterProps) => {
   const {
     children,
-    padding = 'sm',
+    padding = "sm",
+    paddingBottom = "sm",
+    paddingX = "sm",
     className,
-    spacing = 'between',
+    spacing = "between",
     separator = false,
   } = props
-  const footerCSS = buildCss('dialog_footer')
-  const footerSpacing = globalProps(props, { padding })
+  const footerCSS = buildCss("dialog_footer")
+  const footerSpacing = globalProps(props, { padding, paddingBottom, paddingX })
   return (
     <>

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.jsx CHANGED Viewed

@@ -30,8 +30,8 @@ const DialogHeader = (props: DialogHeaderProps) => {
     children,
     className,
     data = {},
-    padding = 'sm',
-    spacing = 'between',
+    padding = "sm",
+    spacing = "between",
     closeable = true,
     separator = true,
   } = props
@@ -39,7 +39,7 @@ const DialogHeader = (props: DialogHeaderProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const api = useContext(DialogContext)
-  const headerCSS = buildCss('dialog_header')
+  const headerCSS = buildCss("dialog_header")
   const headerSpacing = globalProps(props, { padding })
   /* eslint-disable react/jsx-handler-names */

data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx CHANGED Viewed

@@ -1,23 +1,85 @@
-import React from 'react'
-import { render, screen } from '../utilities/test-utils'
-import { Dialog } from '../'
+import React, {useState} from 'react'
+import { render, cleanup, waitFor, fireEvent } from "../utilities/test-utils";
+import { Dialog, Button } from '../'
-/* eslint-disable jsx-control-statements/jsx-jcs-no-undef */
+const text="Hello Body Text, Nice to meet ya."
+const title="Header Title is the Title Prop"
+const size="sm"
+const confirmButton="Okay"
+const cancelButton="Cancel Button"
-/* See these resources for more testing info:
-  - https://github.com/testing-library/jest-dom#usage for useage and examples
-  - https://jestjs.io/docs/en/using-matchers
-*/
+function DialogTest() {
+  const [isOpen, setIsOpen] = useState(false)
+  const close = () => setIsOpen(false)
+  const open = () => setIsOpen(true)
+  const [isLoading, setIsLoading] = useState(false)
+  return (
+    <>
+      <Button onClick={open}>{'Open Dialog'}</Button>
+      <Dialog
+          cancelButton={cancelButton}
+          className="wrapper"
+          confirmButton={confirmButton}
+          loading={isLoading}
+          onCancel={close}
+          onClose={close}
+          onConfirm={() => setIsLoading(!isLoading)}
+          opened={isOpen}
+          portalClassName="portal"
+          size={size}
+          text={text}
+          title={title}
+      />
+    </>
+  );
+}
-test('Kit renders Dialog', () => {
-  const testId = 'test1'
+test('renders the component when clicked', async () => {
-  render(
-    <Dialog
-        data={{ testid: testId }}
-    />
-  )
+  const { queryByText } = render(<DialogTest />);
-  const kit = screen.getByTestId(testId)
-  expect(kit).toBeInTheDocument()
+  fireEvent.click(queryByText('Open Dialog'));
+  await waitFor(() => expect(queryByText("Header Title is the Title Prop")).toBeInTheDocument());
+  cleanup()
 })
+test("renders the title and body text", async () => {
+  const { queryByText } = render(<DialogTest />);
+  fireEvent.click(queryByText('Open Dialog'));
+  await waitFor(() => expect(queryByText("Header Title is the Title Prop")).toHaveTextContent(title));
+  await waitFor(() => expect(queryByText("Hello Body Text, Nice to meet ya.")).toHaveTextContent(text));
+  cleanup()
+});
+test("renders the title and body text", async () => {
+  const { queryByText } = render(<DialogTest />);
+  fireEvent.click(queryByText('Open Dialog'));
+  await waitFor(() => expect(queryByText("Header Title is the Title Prop")).toHaveTextContent(title));
+  await waitFor(() => expect(queryByText("Hello Body Text, Nice to meet ya.")).toHaveTextContent(text));
+  cleanup()
+});
+test("renders the buttons", async () => {
+  const { queryByText } = render(<DialogTest />);
+  fireEvent.click(queryByText('Open Dialog'));
+  await waitFor(() => expect(queryByText("Okay")).toHaveTextContent(confirmButton));
+  await waitFor(() => expect(queryByText("Cancel Button")).toHaveTextContent(cancelButton));
+  cleanup()
+});

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

@@ -1,7 +1,6 @@
 /* eslint-disable react/jsx-handler-names */
 import React, { useState } from "react"
-import { Button, Dialog, Flex, FlexItem, SectionSeparator } from "../.."
+import { Button, Dialog, Flex} from "../.."
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)
@@ -10,46 +9,40 @@ const useDialog = (visible = false) => {
 }
 const DialogStackedAlert = () => {
-  const [singleButtonOpen, toggleSingleButtonOpen] = useDialog()
-  const [stackedButtonOpen, toggleStackedButtonOpen] = useDialog()
-  const [singleLinkButtonOpen, toggleSingleLinkButtonOpen] = useDialog()
-  const [twoLinkButtonOpen, toggleTwoLinkButtonOpen] = useDialog()
+  const [defaultAlertOpened, toggleDefaultAlert] = useDialog()
+  const [cautionAlertOpened, toggleCautionAlert] = useDialog()
+  const [deleteAlertOpened, toggleDeleteAlert] = useDialog()
   const dialogs = [
     {
-      status: "info",
+      size: "sm",
+      status: "default",
       text: "Text explaining why there is an alert",
       title: "Are you sure?",
-      toggle: toggleSingleButtonOpen,
-      visible: singleButtonOpen,
-      confirmedButton:"Ok, Thanks",
-    },
-    {
-      status: "error",
-      text: "Text explaining the error",
-      title: "Error Message",
-      confirmedButton:"Yes, Action",
-      cancelledButton: "Ok, Cancel",
-      toggle: toggleStackedButtonOpen,
-      visible: stackedButtonOpen,
+      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: toggleSingleLinkButtonOpen,
-      visible: singleLinkButtonOpen,
-      linkConfirmedButton:"Ok, Thanks!"
+      toggle: toggleCautionAlert,
+      visible: cautionAlertOpened,
+      buttonOneText:"Yes, Action",
+      buttonTwoText: "No, Cancel"
     },
     {
-      status: "success",
-      text: "Text explaining what is successful",
-      title: "Success",
-      toggle: toggleTwoLinkButtonOpen,
-      visible: twoLinkButtonOpen,
-      linkConfirmedButton:"Ok",
-      linkCancelledButton: "Cancel"
+      size: "sm",
+      status: "delete",
+      text: "You are about to delete ...",
+      title: "Delete",
+      toggle: toggleDeleteAlert,
+      visible: deleteAlertOpened,
+      buttonOneText:"Yes, Delete",
+      buttonTwoText: "No, Cancel"
     }
   ]
@@ -58,27 +51,21 @@ const DialogStackedAlert = () => {
     <Flex>
       <Button
           marginRight="md"
-          onClick={toggleSingleButtonOpen}
-      >
-        {"1 Button Information Status"}
-      </Button>
-      <Button
-          marginRight="md"
-          onClick={toggleStackedButtonOpen}
+          onClick={toggleDefaultAlert}
       >
-        {"2 Button Error Status"}
+        {"Default Status"}
       </Button>
       <Button
           marginRight="md"
-          onClick={toggleSingleLinkButtonOpen}
+          onClick={toggleCautionAlert}
       >
-        {"1 Link Button Caution"}
+        {"Caution Status"}
       </Button>
       <Button
           marginRight="md"
-          onClick={toggleTwoLinkButtonOpen}
+          onClick={toggleDeleteAlert}
       >
-        {"2 Link Button Success"}
+        {"Delete Status"}
       </Button>
     </Flex>
     <Flex>
@@ -88,61 +75,36 @@ const DialogStackedAlert = () => {
             key={dialog.status}
             onClose={dialog.toggle}
             opened={dialog.visible}
-            size="sm"
+            size={dialog.size}
             status={dialog.status}
             text={dialog.text}
             title={dialog.title}
         >
-        <If condition={dialog.cancelledButton || dialog.confirmedButton}>
-          <Dialog.Footer>
-            <Button
-                fullWidth
-                onClick={dialog.toggle}
-            >
-              {dialog.confirmedButton}
-            </Button>
-          </Dialog.Footer>
-          <If condition={dialog.cancelledButton}>
-            <Dialog.Footer paddingTop="none">
-              <Button
-                  fullWidth
-                  onClick={dialog.toggle}
-                  variant="secondary"
-              >
-                {dialog.cancelledButton}
-              </Button>
-            </Dialog.Footer>
-          </If>
-          </If>
-          <If condition={dialog.linkCancelledButton || dialog.linkConfirmedButton} >
-            <SectionSeparator />
-            <Flex
-                inline="flex-container"
-                vertical="stretch"
-            >
-              <FlexItem flex={1} >
-                <Button
-                    fullWidth
-                    onClick={dialog.toggle}
-                    variant="link"
-                >
-                  {dialog.linkConfirmedButton}
-                </Button>
-              </FlexItem>
-              <If condition={dialog.linkCancelledButton}>
-                <SectionSeparator orientation="vertical"/>
-                <FlexItem flex={1}>
-                  <Button
-                      fullWidth
-                      onClick={dialog.toggle}
-                      variant="link"
-                  >
-                    {dialog.linkCancelledButton}
-                  </Button>
-                </FlexItem>
-              </If>
-            </Flex>
-          </If>
+        <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>