playbook_ui 11.4.0.pre.alpha.rubytheme2 → 11.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4588ffa583d51e7d40fc8b940c73f9f4c7974b6b41a48f54710731d0384ac8b5
-  data.tar.gz: c7e3117147c0781ea722b0bdf21ec6aab13913c541b3f321bcb34f536ef97f9c
+  metadata.gz: 638051af443b06b03b9de8a9092d21f8ce06f3806e60bd43cec8463ce428a69a
+  data.tar.gz: c43d207810694a318a13280bb917b8a295cb44310e05433a262639bee6b8778e
 SHA512:
-  metadata.gz: a83acea1e3f805eb475bec6c969a56e601685bb070b7c573c45754cab2e479d4d1af981c6f5b583ffc92c5aeef64d79bf3f6d8cde071122464195d2981d9c144
-  data.tar.gz: 0c7d567043af8af75fbf70757e72f49322c3ac1b05cb3a4505bb03679c505261f2a46df2504e593119ae5609b3831827774dfb2bac9c09e43ef4659bf8d86d66
+  metadata.gz: 80aad4d2179d46bc3332b631a1f4e4e90640d61b3cbd3bfa1894cd8e5710f20ecea86f8d71cada0811e9ac434a99c70cd31a7622c33df2434d82370b5f0a9157
+  data.tar.gz: 8a8562a4d3efced667089ca24567758a341255de55f885d1068c7722b301886d427f07943a03ae391d47a1b1d5b4ce279d7bb80a42d7e53042ed9b22ab71d4dc

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -12,7 +12,7 @@ import Title from "../pb_title/_title";
 
 type PbDateProps = {
   alignment?: "left" | "center" | "right";
-  aria?: { [key: string]: string };
+  aria: { [key: string]: string };
   className?: string;
   data?: { [key: string]: string };
   id?: string;

data/app/pb_kits/playbook/pb_date_time/{_date_time.tsx → _date_time.jsx}

@@ -1,3 +1,5 @@
+/* @flow */
+
 import React from 'react'
 import classnames from 'classnames'
 
@@ -10,9 +12,9 @@ import FormattedDate from '../pb_date/_date'
 
 type DateTimeProps = {
   align?: "left" | "center" | "right",
-  aria?: { [key: string]: string; },
+  aria?: object,
   className?: string,
-  data?: { [key: string]: string; },
+  data?: object,
   datetime: string,
   id?: string,
   size?: "sm" | "md",
@@ -57,6 +59,7 @@ const DateTime = (props: DateTimeProps) => {
         <FormattedDate
             showDayOfWeek={showDayOfWeek}
             size={size}
+            timeZone={timeZone}
             value={datetime}
         />
         <Time

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateTime from '../_date_time'
+import DateTime from '../_date_time.jsx'
 
 const DateTimeAlign = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateTime from '../_date_time'
+import DateTime from '../_date_time.jsx'
 
 const DateTimeDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateTime from '../_date_time'
+import DateTime from '../_date_time.jsx'
 
 const DateTimeDefault = (props) => (
   <div>

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

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

@@ -59,7 +59,6 @@
 	// Local Variables
 	$gutter: $space_lg;
 	$small: 300px;
-	$status_size: 375px;
 	$medium: 500px;
 	$large: 800px;
 	$animation-duration: 0.2s;
@@ -79,10 +78,6 @@
 	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

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

@@ -9,35 +9,17 @@ 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",
-    paddingBottom = "sm",
-    paddingX = "sm",
+    padding = 'sm',
     className,
-    spacing = "between",
+    spacing = 'between',
     separator = false,
   } = props
-
-  const footerCSS = buildCss("dialog_footer")
-  const footerSpacing = globalProps(props, { padding, paddingBottom, paddingX })
+  const footerCSS = buildCss('dialog_footer')
+  const footerSpacing = globalProps(props, { padding })
 
   return (
     <>

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

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

@@ -1,85 +1,23 @@
-import React, {useState} from 'react'
-import { render, cleanup, waitFor, fireEvent } from "../utilities/test-utils";
-import { Dialog, Button } from '../'
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import { Dialog } from '../'
 
-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"
+/* eslint-disable jsx-control-statements/jsx-jcs-no-undef */
 
-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}
-      />
-    </>
-  );
-}
+/* 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
+*/
 
-test('renders the component when clicked', async () => {
+test('Kit renders Dialog', () => {
+  const testId = 'test1'
 
-  const { queryByText } = render(<DialogTest />);
+  render(
+    <Dialog
+        data={{ testid: testId }}
+    />
+  )
 
-  fireEvent.click(queryByText('Open Dialog'));
-
-  await waitFor(() => expect(queryByText("Header Title is the Title Prop")).toBeInTheDocument());
-
-  cleanup()
+  const kit = screen.getByTestId(testId)
+  expect(kit).toBeInTheDocument()
 })
-
-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

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