playbook_ui 11.3.0 → 11.4.0.pre.alpha.rubytheme1

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

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

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

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

@@ -12,57 +12,70 @@ const useDialog = (visible = false) => {
 }
 
 const DialogStatus = () => {
-  const [infoAlertOpened, toggleInfoAlert] = useDialog()
+  const [defaultAlertOpened, toggleDefaultAlert] = useDialog()
   const [cautionAlertOpened, toggleCautionAlert] = useDialog()
+  const [deleteAlertOpened, toggleDeleteAlert] = useDialog()
+  const [infoAlertOpened, toggleInfoAlert] = useDialog()
   const [successAlertOpened, toggleSuccessAlert] = useDialog()
   const [errorAlertOpened, toggleErrorAlert] = useDialog()
-  const [deleteAlertOpened, toggleDeleteAlert] = useDialog()
 
   const dialogs = [
     {
-      status: "info",
+      size: "status_size",
+      status: "default",
       text: "Text explaining why there is an alert",
-      title: "Are you Sure?",
-      toggle: toggleInfoAlert,
-      visible: infoAlertOpened,
-      buttonOneText:"No, Cancel",
-      buttonTwoText: "Yes, Action"
+      title: "Are you sure?",
+      toggle: toggleDefaultAlert,
+      visible: defaultAlertOpened,
+      buttonOneText:"Yes, Action",
+      buttonTwoText: "No, Cancel"
     },
     {
+      size: "status_size",
       status: "caution",
       text: "This is the action you will be taking",
-      title: "Are you Sure?",
+      title: "Are you sure?",
       toggle: toggleCautionAlert,
       visible: cautionAlertOpened,
-      buttonOneText:"No, Cancel",
-      buttonTwoText: "Yes, Action"
+      buttonOneText:"Yes, Action",
+      buttonTwoText: "No, Cancel"
     },
     {
+      size: "status_size",
       status: "delete",
       text: "You are about to delete ...",
       title: "Delete",
       toggle: toggleDeleteAlert,
       visible: deleteAlertOpened,
-      buttonOneText:"No, Cancel",
-      buttonTwoText: "Yes, Delete"
+      buttonOneText:"Yes, Delete",
+      buttonTwoText: "No, Cancel"
     },
     {
-      status: "error",
-      text: "Text explaining the error",
-      title: "Error Message",
-      toggle: toggleErrorAlert,
-      visible: errorAlertOpened,
-      buttonOneText:"No, Cancel",
-      buttonTwoText: "Ok, Thanks"
+      size: "sm",
+      status: "info",
+      text: "Text explaining why there is an alert",
+      title: "Information",
+      toggle: toggleInfoAlert,
+      visible: infoAlertOpened,
+      buttonOneText:"Ok, Thanks!",
     },
     {
+      size: "sm",
       status: "success",
       text: "Text explaining what is successful",
       title: "Success!",
       toggle: toggleSuccessAlert,
       visible: successAlertOpened,
-      buttonOneText:"No, Cancel",
-      buttonTwoText: "Ok, Thanks"
+      buttonOneText: "Great!",
+    },
+    {
+      size: "sm",
+      status: "error",
+      text: "Text explaining the error",
+      title: "Error Message",
+      toggle: toggleErrorAlert,
+      visible: errorAlertOpened,
+      buttonOneText:"Oh no!",
     },
   ]
 
@@ -71,9 +84,9 @@ const DialogStatus = () => {
       <Flex>
         <Button
             marginRight="md"
-            onClick={toggleInfoAlert}
+            onClick={toggleDefaultAlert}
         >
-          {"Information Status"}
+          {"Default Status"}
         </Button>
         <Button
             marginRight="md"
@@ -83,18 +96,27 @@ const DialogStatus = () => {
         </Button>
         <Button
             marginRight="md"
-            onClick={toggleSuccessAlert}
+            onClick={toggleDeleteAlert}
         >
-          {"Success Status"}
+          {"Delete Status"}
         </Button>
-        <Button onClick={toggleErrorAlert}>
-          {"Error Status"}
+        <Button
+            marginRight="md"
+            onClick={toggleInfoAlert}
+        >
+          {"Information Status"}
         </Button>
         <Button
             marginRight="md"
-            onClick={toggleDeleteAlert}
+            onClick={toggleSuccessAlert}
         >
-          {"Delete Status"}
+          {"Success Status"}
+        </Button>
+        <Button 
+            marginRight="md"
+            onClick={toggleErrorAlert}
+        >
+          {"Error Status"}
         </Button>
       </Flex>
       <Flex>
@@ -103,22 +125,37 @@ const DialogStatus = () => {
               key={dialog.status}
               onClose={dialog.toggle}
               opened={dialog.visible}
+              size={dialog.size}
               status={dialog.status}
               text={dialog.text}
               title={dialog.title}
           >
-          <Dialog.Footer>
-            <Button
-                onClick={dialog.toggle}
-                variant="secondary"
-            >
-            {dialog.buttonOneText}
-            </Button>
-            <Button
-                onClick={dialog.toggle}
-            >
-            {dialog.buttonTwoText}
-            </Button>
+          <Dialog.Footer
+              paddingBottom="md"
+              paddingX="md"
+          >
+            <If condition={!dialog.buttonTwoText}>
+              <Button
+                  fullWidth
+                  onClick={dialog.toggle}
+              >
+              {dialog.buttonOneText}
+              </Button>
+            </If>
+            <If condition={dialog.buttonTwoText}>
+              <Button
+                  onClick={dialog.toggle}
+                  paddingRight="xl"
+              >
+              {dialog.buttonOneText}
+              </Button>
+              <Button
+                  onClick={dialog.toggle}
+                  variant="secondary"
+              >
+              {dialog.buttonTwoText}
+              </Button>
+            </If>
           </Dialog.Footer>
           </Dialog>
         ))}

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from "react";
+import classnames from "classnames";
+
+import { globalProps } from "../utilities/globalProps";
+
+import Icon from "../pb_icon/_icon";
+import Title from "../pb_title/_title";
+
+const iconMap = {
+  success: "check",
+  error: "exclamation-triangle",
+  neutral: "info-circle",
+  tip: "info-circle",
+};
+
+type FixedConfirmationToastProps = {
+  className?: string;
+  closeable?: boolean;
+  data?: string;
+  horizontal?: "right" | "left" | "center";
+  id?: string;
+  multiLine?: boolean;
+  onClose?: () => void;
+  open?: boolean;
+  status?: "success" | "error" | "neutral" | "tip";
+  text: string;
+  vertical?: "top" | "bottom";
+};
+
+const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
+  const [showToast, toggleToast] = useState(true);
+  const {
+    className,
+    closeable = false,
+    horizontal,
+    multiLine = false,
+    onClose = () => {},
+    open = true,
+    status = "neutral",
+    text,
+    vertical,
+  } = props;
+  const css = classnames(
+    `pb_fixed_confirmation_toast_kit_${status}`,
+    { _multi_line: multiLine },
+    { [`positioned_toast ${vertical} ${horizontal}`]: vertical && horizontal },
+    globalProps(props),
+    className
+  );
+  const icon = iconMap[status];
+
+  useEffect(() => {
+    toggleToast(open);
+  }, [open]);
+
+  const handleClick = () => {
+    toggleToast(!closeable);
+    onClose();
+  };
+
+  return (
+    <>
+      {showToast && (
+        <div className={css} onClick={handleClick}>
+          {icon && <Icon className="pb_icon" fixedWidth icon={icon} />}
+          <Title
+            className="pb_fixed_confirmation_toast_text"
+            size={4}
+            text={text}
+          />
+          {closeable && (
+            <Icon className="pb_icon" fixedWidth={false} icon="times" />
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default FixedConfirmationToast;

data/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-target-blank */
 /* eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
 import React from 'react'
@@ -14,6 +15,8 @@ type HashtagProps = {
   dark?: boolean,
   data?: string,
   id?: string,
+  newWindow?: boolean,
+  rel?: string,
   text?: string,
   type: "default" | "home" | "project" | "appointment",
   url?: string,
@@ -33,6 +36,8 @@ const Hashtag = (props: HashtagProps) => {
     dark = false,
     data = {},
     id,
+    newWindow,
+    rel,
     text,
     type = 'default',
     url,
@@ -49,7 +54,11 @@ const Hashtag = (props: HashtagProps) => {
         className={classes}
         id={id}
     >
-      <a href={url}>
+      <a
+          href={url}
+          rel={(newWindow ? "noreferrer" : rel)}
+          target={(newWindow ? '_blank' : '_self')}
+      >
         <Badge
             dark={dark}
             text={typeMap[type] + text}