playbook_ui 11.7.0.pre.alpha.pre.guagechart1 → 11.7.0

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+
+import classnames from "classnames";
+import DateTime from "../pb_kit/dateTime";
+import { buildCss, buildDataProps } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+
+import Caption from "../pb_caption/_caption";
+import Title from "../pb_title/_title";
+
+type DateStackedProps = {
+  align?: "left" | "center" | "right";
+  bold?: boolean;
+  className?: string | string[];
+  dark?: boolean;
+  data?: string;
+  date: string;
+  size?: "sm" | "md";
+  id?: string;
+  reverse?: boolean;
+};
+
+const sizes: {sm: 4, md: 3} = {
+  sm: 4,
+  md: 3,
+};
+
+const DateStacked = (props: DateStackedProps) => {
+  const {
+    align = "left",
+    bold = false,
+    reverse = false,
+    className,
+    dark = false,
+    date,
+    data={},
+    size = "sm",
+  } = props;
+  const classes = classnames(
+    buildCss("pb_date_stacked_kit", align, size, {
+      dark: dark,
+      reverse: reverse,
+    }),
+    globalProps(props),
+    className
+  );
+
+  const currentYear = new Date().getFullYear().toString();
+  const dateTimestamp = new DateTime({ value: date });
+  const inputYear = dateTimestamp.toYear().toString();
+  const dataProps = buildDataProps(data)
+
+  return (
+    <>
+      {bold == false ? (
+        <div {...dataProps} className={classes}>
+          <div className="pb_date_stacked_day_month">
+            <Caption text={dateTimestamp.toMonth().toUpperCase()} />
+            <Title
+              dark={dark}
+              size={sizes[size]}
+              text={dateTimestamp.toDay()}
+            />
+          </div>
+          {currentYear != inputYear && <Caption size="xs">{inputYear}</Caption>}
+        </div>
+      ) : (
+          <div {...dataProps} className={classes}>
+            <div className="pb_date_stacked_day_month">
+              <Title 
+                bold 
+                dark={dark} 
+                size="4" 
+                text={dateTimestamp.toMonth()} 
+              />
+              <Title 
+                bold 
+                dark={dark} 
+                size="4" 
+                text={dateTimestamp.toDay()} 
+              />
+              {currentYear != inputYear && <Title size="4">{inputYear}</Title>}
+            </div>
+          </div>
+      )}
+    </>
+  );
+};
+
+export default DateStacked;

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.test.js

@@ -0,0 +1,151 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import DateStacked from './_date_stacked'
+
+const TEST_DATE = "01/01/2020 00:00:000 GMT-0500";
+jest.setSystemTime(new Date(TEST_DATE));
+const futureDate = new Date(
+  new Date().getFullYear() - 4,
+  new Date().getMonth(),
+  new Date().getDate(),
+  new Date().getHours(),
+  new Date().getMinutes()
+);
+
+const testId = "datestacked-kit";
+
+describe("DateStacked Kit", () => {
+    test("renders DateStacked className", () => {
+        render(
+            <DateStacked
+                align="left"
+                data={{ testid: testId }}
+                date={new Date()}
+                size="sm"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_date_stacked_kit_left_sm")
+    })
+
+    test("renders top text", () => {
+        render(
+            <DateStacked
+                align="left"
+                data={{ testid: testId }}
+                date={new Date()}
+                size="sm"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector(".pb_caption_kit_md")
+        expect(text.textContent).toEqual("JAN")
+    })
+
+    test("renders bottom text", () => {
+        render(
+            <DateStacked
+                align="left"
+                data={{ testid: testId }}
+                date={new Date()}
+                size="sm"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector(".pb_title_kit_size_4")
+        expect(text.textContent).toEqual("1")
+    })
+
+    test("renders correct size", () => {
+        render(
+            <DateStacked
+                align="left"
+                data={{ testid: testId }}
+                date={new Date()}
+                size="md"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_date_stacked_kit_left_md")
+    })
+
+    test("renders year when non-current year", () => {
+        render(
+            <DateStacked
+                align="left"
+                data={{ testid: testId }}
+                date={futureDate}
+                size="sm"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector(".pb_caption_kit_xs")
+        expect(text.textContent).toEqual("2016")
+    })
+
+    test("renders correct className when order reversed", () => {
+        render(
+            <DateStacked
+                align="left"
+                data={{ testid: testId }}
+                date={futureDate}
+                reverse
+                size="sm"      
+            />
+        )
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_date_stacked_kit_left_sm_reverse")
+    })
+
+    test("renders bold prop", () => {
+        render(
+            <DateStacked
+                align="left"
+                bold
+                data={{ testid: testId }}
+                date={futureDate}
+                size="md"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector(".pb_title_kit_size_4")
+        expect(text).toBeInTheDocument()
+    })
+
+    test("renders center alignment prop", () => {
+        render(
+            <DateStacked
+                align="center"
+                data={{ testid: testId }}
+                date={futureDate}
+                size="md"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_date_stacked_kit_center_md")
+    })
+
+    test("renders right alignment prop", () => {
+        render(
+            <DateStacked
+                align="right"
+                data={{ testid: testId }}
+                date={futureDate}
+                size="md"      
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_date_stacked_kit_right_md")
+    })
+
+
+})

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateStacked from '../_date_stacked.jsx'
+import DateStacked from '../_date_stacked'
 
 const DateStackedAlign = (props) => {
   return (

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateStacked from '../_date_stacked.jsx'
+import DateStacked from '../_date_stacked'
 
 const DateStackedBold = (props) => {
   return (

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateStacked from '../_date_stacked.jsx'
+import DateStacked from '../_date_stacked'
 
 const DateStackedDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateStacked from '../_date_stacked.jsx'
+import DateStacked from '../_date_stacked'
 
 const DateStackedNotCurrentYear = (props) => {
   return (

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reverse.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateStacked from '../_date_stacked.jsx'
+import DateStacked from '../_date_stacked'
 
 const DateStackedDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_sizes.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateStacked from '../_date_stacked.jsx'
+import DateStacked from '../_date_stacked'
 
 const DateStackedSizes = (props) => {
   return (

data/app/pb_kits/playbook/pb_dialog/{_close_icon.jsx → _close_icon.tsx}

@@ -1,10 +1,8 @@
-/* @flow */
-
 import React from 'react'
 import Icon from '../pb_icon/_icon'
 
 type CloseIconProps = {
-  onClose: () => mixed,
+  onClose: () => any,
 }
 
 export const CloseIcon = (props: CloseIconProps) => {

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

@@ -0,0 +1,217 @@
+/* eslint-disable react/jsx-handler-names */
+/* eslint-disable react/no-multi-comp */
+
+import React, { useState } from "react";
+import classnames from "classnames";
+import Modal from "react-modal";
+
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+
+import Body from "../pb_body/_body";
+import Button from "../pb_button/_button";
+import DialogHeader from "./child_kits/_dialog_header";
+import DialogFooter from "./child_kits/_dialog_footer";
+import DialogBody from "./child_kits/_dialog_body";
+import Flex from "../pb_flex/_flex";
+import IconCircle from "../pb_icon_circle/_icon_circle";
+import Title from "../pb_title/_title";
+import { DialogContext } from "./_dialog_context";
+
+type DialogProps = {
+  aria?: { [key: string]: string };
+  cancelButton?: string;
+  children: React.ReactNode | React.ReactNode[] | string;
+  className?: string;
+  closeable: boolean;
+  confirmButton?: string;
+  data?: object;
+  id?: string;
+  loading?: boolean;
+  onCancel?: () => void;
+  onChange?: () => void;
+  onClose?: () => void;
+  onConfirm?: () => void;
+  opened: boolean;
+  portalClassName?: string;
+  shouldCloseOnOverlayClick: boolean;
+  size?: "sm" | "md" | "lg" | "status_size" | "content";
+  status?: "info" | "caution" | "delete" | "error" | "success";
+  text?: string;
+  title?: string;
+  trigger?: string;
+};
+
+const Dialog = (props: DialogProps) => {
+  const {
+    aria = {},
+    cancelButton,
+    confirmButton,
+    className,
+    data = {},
+    id,
+    size = "md",
+    children,
+    loading = false,
+    opened,
+    onCancel = () => {},
+    onConfirm = () => {},
+    onClose = () => {},
+    portalClassName,
+    shouldCloseOnOverlayClick = true,
+    status,
+    text,
+    title,
+    trigger,
+  } = props;
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const dialogClassNames = {
+    base: classnames("pb_dialog", buildCss("pb_dialog", size)),
+    afterOpen: "pb_dialog_after_open",
+    beforeClose: "pb_dialog_before_close",
+  };
+
+  const overlayClassNames = {
+    base: "pb_dialog_overlay",
+    afterOpen: "pb_dialog_overlay_after_open",
+    beforeClose: "pb_dialog_overlay_before_close",
+  };
+
+  const classes = classnames(
+    buildCss("pb_dialog_wrapper"),
+    globalProps(props),
+    className
+  );
+
+  const [triggerOpened, setTriggerOpened] = useState(false),
+    modalIsOpened = trigger ? triggerOpened : opened;
+
+  const api = {
+    onClose: trigger
+      ? function () {
+          setTriggerOpened(false);
+        }
+      : onClose,
+  };
+
+  if (trigger) {
+    const modalTrigger = document.querySelector(trigger);
+    modalTrigger.addEventListener(
+      "click",
+      () => {
+        setTriggerOpened(true);
+        document
+          .querySelector("#cancel-button")
+          .addEventListener("click", () => {
+            setTriggerOpened(false);
+          });
+      },
+      { once: true }
+    );
+  }
+
+  type sweetAlertStatusProps = {
+    [key: string]: {
+      icon: string,
+      variant: "default" | "yellow" | "red" | "green" | "royal" | "blue" | "purple" | "teal",
+      size: "sm" | "md" | "lg" | "base" | "xs" | "xl";
+    }
+  }
+
+  const sweetAlertStatus: sweetAlertStatusProps = {
+    default: {
+      icon: "exclamation-circle",
+      variant: "default",
+      size: "lg",
+    },
+    info: {
+      icon: "info-circle",
+      variant: "default",
+      size: "lg",
+    },
+    caution: {
+      icon: "exclamation-triangle",
+      variant: "yellow",
+      size: "lg",
+    },
+    delete: {
+      icon: "trash-alt",
+      variant: "red",
+      size: "lg",
+    },
+    error: {
+      icon: "times-circle",
+      variant: "red",
+      size: "lg",
+    },
+    success: {
+      icon: "check-circle",
+      variant: "green",
+      size: "lg",
+    },
+  };
+
+  return (
+    <DialogContext.Provider value={api}>
+      <div {...ariaProps} {...dataProps} className={classes}>
+        <Modal
+          ariaHideApp={false}
+          className={dialogClassNames}
+          closeTimeoutMS={200}
+          contentLabel="Minimal Modal Example"
+          id={id}
+          isOpen={modalIsOpened}
+          onRequestClose={onClose}
+          overlayClassName={overlayClassNames}
+          portalClassName={portalClassName}
+          shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
+        >
+          <>
+            {title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
+            {!status && text ? <Dialog.Body>{text}</Dialog.Body> : null}
+            {status && (
+              <Dialog.Body padding="md">
+                <Flex align="center" orientation="column">
+                  <IconCircle
+                    icon={sweetAlertStatus[status].icon}
+                    size={sweetAlertStatus[status].size}
+                    variant={sweetAlertStatus[status].variant}
+                  />
+                  <Title marginTop="sm" size={3}>
+                    {title}
+                  </Title>
+                  <Body marginTop="xs" text={text} />
+                </Flex>
+              </Dialog.Body>
+            )}
+            {cancelButton && confirmButton ? (
+              <Dialog.Footer>
+                  <Button 
+                    loading={loading} 
+                    onClick={onConfirm} 
+                    htmlType="button" 
+                    variant="primary">
+                    {confirmButton}
+                  </Button>
+                  <Button 
+                    id="cancel-button" 
+                    onClick={onCancel} 
+                    variant="link" 
+                    htmlType="button">
+                    {cancelButton}
+                  </Button>
+              </Dialog.Footer>
+            ) : null}
+            {children}
+          </>
+        </Modal>
+      </div>
+    </DialogContext.Provider>
+  );
+};
+Dialog.Header = DialogHeader;
+Dialog.Body = DialogBody;
+Dialog.Footer = DialogFooter;
+
+export default Dialog;

data/app/pb_kits/playbook/pb_dialog/_dialog_context.tsx

@@ -0,0 +1,3 @@
+import React from 'react'
+
+export const DialogContext = React.createContext(null)

data/app/pb_kits/playbook/pb_dialog/child_kits/{_dialog_body.jsx → _dialog_body.tsx}

@@ -1,10 +1,14 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../../utilities/props'
 import { globalProps } from '../../utilities/globalProps'
 
+type DialogBodyProps = {
+  children: React.ReactNode | React.ReactNode[] | string,
+  padding?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
+  className?: string
+} 
+
 // Body component
 const DialogBody = (props: DialogBodyProps) => {
   const { children, padding = "sm", className } = props

data/app/pb_kits/playbook/pb_dialog/child_kits/{_dialog_footer.jsx → _dialog_footer.tsx}

@@ -1,10 +1,8 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
 import { buildCss } from '../../utilities/props'
-import { globalProps } from '../../utilities/globalProps'
+import { GlobalProps, globalProps } from '../../utilities/globalProps'
 
 import Flex from '../../pb_flex/_flex'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
@@ -12,17 +10,16 @@ import SectionSeparator from '../../pb_section_separator/_section_separator'
 
 type DialogFooterProps = {
   aria?: object,
-  children: array<React.ReactNode> | React.ReactNode | string,
+  children: React.ReactChild[] | React.ReactChild | string,
   className?: string,
-  closeable: boolean,
   data?: object,
   id?: string,
   padding?: string,
   paddingBottom?: string,
   paddingX?: string,
-  separator: boolean,
-  spacing?: string,
-}
+  separator?: boolean,
+  spacing?: "none" | "between" | "around" | "evenly",
+} & GlobalProps
 
 // Footer component
 const DialogFooter = (props: DialogFooterProps) => {
@@ -41,9 +38,9 @@ const DialogFooter = (props: DialogFooterProps) => {
 
   return (
     <>
-      <If condition={separator}>
-        <SectionSeparator />
-      </If>
+      {separator &&
+        <SectionSeparator aria={{dd: 'ff'}} className="dd" data={{dd: 'ff'}} id="d" text="ss"/>
+      }
       <Flex
           className={classnames(footerCSS, footerSpacing, className)}
           spacing={spacing}

data/app/pb_kits/playbook/pb_dialog/child_kits/{_dialog_header.jsx → _dialog_header.tsx}

@@ -1,9 +1,7 @@
-/* @flow */
-
 import React, { useContext } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../../utilities/props'
-import { globalProps } from '../../utilities/globalProps'
+import { globalProps, GlobalProps } from '../../utilities/globalProps'
 
 import { CloseIcon } from '../_close_icon'
 import { DialogContext } from '../_dialog_context'
@@ -11,18 +9,18 @@ import Flex from '../../pb_flex/_flex'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
 
 type DialogHeaderProps = {
-  aria?: object,
-  children: array<React.ReactNode> | React.ReactNode | string,
+  aria?: {[key: string]: string},
+  children: React.ReactNode[] | React.ReactNode | string,
   className?: string,
-  closeable: boolean,
+  closeable?: boolean,
   data?: object,
   id?: string,
   padding?: string,
-  separator: boolean,
-  spacing?: string,
+  separator?: boolean,
+  spacing?: "none" | "between" | "around" | "evenly",
   text?: string,
   title?: string,
-}
+} & GlobalProps
 
 const DialogHeader = (props: DialogHeaderProps) => {
   const {
@@ -53,16 +51,15 @@ const DialogHeader = (props: DialogHeaderProps) => {
           spacing={spacing}
       >
         {children}
-        <If condition={closeable}>
+        {closeable &&
           <CloseIcon
-              className="close-icon"
-              onClose={api.onClose}
+            onClose={api.onClose}
           />
-        </If>
+        }
       </Flex>
-      <If condition={separator}>
+      {separator &&
         <SectionSeparator />
-      </If>
+      }
     </>
   )
 }