playbook_ui 11.4.0 → 11.6.0.pre.alpha.momenttz1

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_file_upload/{_file_upload.jsx → _file_upload.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React, { useCallback } from 'react'
 import { useDropzone } from 'react-dropzone'
 import classnames from 'classnames'
@@ -12,11 +10,11 @@ import Body from '../pb_body/_body'
 import Card from '../pb_card/_card'
 
 type FileUploadProps = {
-  accept?: array<string>,
+  accept?: string[],
   className?: string,
   data?: object,
   acceptedFilesDescription?: string,
-  onFilesAccepted: Callback,
+  onFilesAccepted: Callback<File, File>,
 }
 
 const FileUpload = (props: FileUploadProps) => {
@@ -27,10 +25,8 @@ const FileUpload = (props: FileUploadProps) => {
     data = {},
     onFilesAccepted = noop,
   } = props
-  const onDrop = useCallback((files) => {
-    onFilesAccepted(files)
-  })
 
+  const onDrop = useCallback((files) => onFilesAccepted(files), []);
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     accept,
     onDrop,
@@ -57,11 +53,11 @@ const FileUpload = (props: FileUploadProps) => {
       <Card>
         <input {...getInputProps()} />
         <Body color="light">
-          <If condition={isDragActive}>
+          {isDragActive ?
             <p>{'Drop the files here ...'}</p>
-            <Else />
+            :
             <p>{accept === null ? 'Choose a file or drag it here' : `Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}`}</p>
-          </If>
+          }
         </Body>
       </Card>
     </div>

data/app/pb_kits/playbook/pb_form_group/{_form_group.jsx → _form_group.tsx}

@@ -1,12 +1,10 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 type FormGroupProps = {
-  aria?: object,
+  aria?: {[key: string]: string},
   children?: Node,
   className?: string,
   data?: object,
@@ -27,7 +25,6 @@ const FormGroup = (props: FormGroupProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(buildCss('pb_form_group_kit', { full: fullWidth }), globalProps(props), className)
-
   return (
     <div
         {...ariaProps}

data/app/pb_kits/playbook/pb_form_group/form_group.test.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { render } from "../utilities/test-utils";
+
+import { Button, FormGroup } from "..";
+
+test("should render a div with a button child", () => {
+  const testId = "primary-test"
+  const { queryByTestId } = render(
+    <FormGroup>
+      <Button 
+          data={{ testid: testId }} 
+          text={"some text"} />
+    </FormGroup>
+  )
+
+  expect(queryByTestId("primary-test")).not.toBeNull;
+})

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}

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("hashtag", props: {text: "Open in the same Window", url: "https://google.com", type: "project"}) %>
+
+<br/><br/>
+
+<%= pb_rails("hashtag", props: {text: "Open in a new Window", url: "https://google.com", type: "project", new_window: true}) %>

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Hashtag } from '../../'
+
+const HashtagLink = (props) => {
+  return (
+    <div>
+      <Hashtag
+          text="Open in the same window"
+          type="project"
+          url="https://google.com"
+          {...props}
+      />
+      <br />
+      <br />
+      <Hashtag
+          newWindow
+          text="Open in a new window"
+          type="project"
+          url="https://google.com"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default HashtagLink

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.md

@@ -0,0 +1 @@
+Use the newWindow/new_window prop to control whether the link opens on the same page or a new tab (same page is the default behavior)

data/app/pb_kits/playbook/pb_hashtag/docs/example.yml

@@ -2,6 +2,8 @@ examples:
 
   rails:
   - hashtag_default: Hashtag Types
+  - hashtag_link: Hashtag Links
 
   react:
   - hashtag_default: Hashtag Types
+  - hashtag_link: Hashtag Links

data/app/pb_kits/playbook/pb_hashtag/docs/index.js

@@ -1 +1,2 @@
 export { default as HashtagDefault } from './_hashtag_default.jsx'
+export { default as HashtagLink } from './_hashtag_link.jsx'

data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb

@@ -3,7 +3,7 @@
     class: object.classname,
     data: object.data,
     id: object.id) do %>
-  <%= link_to object.url do %>
+  <%= link_to object.url, target: object.link_option do %>
     <%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %>
   <% end %>
 <% end %>