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

playbook_ui 11.4.0 → 11.5.0.pre.alpha.datepicker1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (128) 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>