playbook_ui 11.4.0 → 11.5.0.pre.alpha.pre.rubocop

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js

@@ -0,0 +1,116 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import DateRangeInline from './_date_range_inline'
+
+jest.useFakeTimers()
+const testId = "daterangeinline-kit";
+
+describe("DateRangeInline Kit", () => {
+    test("renders DateRangeInline className", () => {
+        render(
+            <DateRangeInline
+                data={{ testid: testId }}
+                endDate={new Date('20 Mar 2015')}
+                size="xs"
+                startDate={new Date('18 Jun 2013')}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_date_range_inline_kit_left")
+    })
+
+    test("renders DateRangeInline text left", () => {
+        render(
+            <DateRangeInline
+                data={{ testid: testId }}
+                endDate={new Date('20 Mar 2015')}
+                size="xs"
+                startDate={new Date('18 Jun 2013')}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector('.pb_caption_kit_md:first-child')
+        expect(text.textContent).toEqual(" Jun 18, 2013 ")
+    })
+
+    test("renders DateRangeInline text right", () => {
+        render(
+            <DateRangeInline
+                data={{ testid: testId }}
+                endDate={new Date('20 Mar 2015')}
+                size="xs"
+                startDate={new Date('18 Jun 2013')}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector('.pb_caption_kit_md:last-child')
+        expect(text.textContent).toEqual(" Mar 20, 2015 ")
+    })
+
+    test("renders DateRangeInline arrow icon center", () => {
+        render(
+            <DateRangeInline
+                data={{ testid: testId }}
+                endDate={new Date('20 Mar 2015')}
+                size="xs"
+                startDate={new Date('18 Jun 2013')}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const arrow = kit.querySelector('.pb_icon_kit.fa-fw.fa-long-arrow-right')
+        expect(arrow).toBeInTheDocument()
+    })
+
+    test("renders DateRangeInline className if size sm", () => {
+        render(
+            <DateRangeInline
+                data={{ testid: testId }}
+                endDate={new Date('20 Mar 2015')}
+                size="sm"
+                startDate={new Date('18 Jun 2013')}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const innerKit = kit.querySelector('.pb_body_kit')
+        expect(innerKit).toBeInTheDocument()
+    })
+
+    test("renders DateRangeInline calender icon left", () => {
+        render(
+            <DateRangeInline
+                data={{ testid: testId }}
+                endDate={new Date('20 Mar 2015')}
+                icon
+                size="xs"
+                startDate={new Date('18 Jun 2013')}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const calendar = kit.querySelector('.pb_icon_kit.fa-fw.fa-calendar-alt')
+        expect(calendar).toBeInTheDocument()
+    })
+
+    test("renders DateRangeInline without year", () => {
+        render(
+            <DateRangeInline
+                data={{ testid: testId }}
+                endDate={new Date((`15 Aug ${new Date().getFullYear()}`))}
+                size="xs"
+                startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector('.pb_caption_kit_md:first-child')
+        expect(text.textContent).toEqual(" Jan 15 ")
+    })
+    
+
+})

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateRangeInline from '../_date_range_inline.jsx'
+import DateRangeInline from '../_date_range_inline'
 
 const DateRangeInlineDefault = (props) => {
   return (

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

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

data/app/pb_kits/playbook/pb_date_time/dateTime.test.js

@@ -0,0 +1,110 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import DateTime from './_date_time'
+
+const TEST_DATE = '01/01/2020 00:00:000 GMT-0500'
+jest.setSystemTime(new Date(TEST_DATE));
+const testId = 'datetime-kit'
+
+const realDate = Date
+
+beforeEach(() => {
+  global.Date.now = jest.fn(() => new Date(TEST_DATE).getTime());
+})
+
+afterEach(() => {
+  global.Date = realDate;
+})
+
+describe('DateTime Kit', () => {
+  test('renders DatePicker className', () => {
+    render(
+      <DateTime
+          data={{ testid: testId }}
+          datetime={new Date(Date.now())}
+          showDayOfWeek
+          showIcon
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_date_time_md')
+  })
+  test('renders DatePicker text left', () => {
+    render(
+      <DateTime
+          data={{ testid: testId }}
+          datetime={new Date(Date.now())}
+          showDayOfWeek
+          showIcon
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const text = kit.querySelector('.pb_date_kit_left')
+    expect(text.textContent).toEqual('Wed • Jan 1')
+  })
+  test('renders DatePicker text right', () => {
+    render(
+      <DateTime
+          data={{ testid: testId }}
+          datetime={new Date(Date.now())}
+          showDayOfWeek
+          showIcon
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const text = kit.querySelector('.pb_time_kit_md.ml_sm')
+    const clock = kit.querySelector('.pb_icon_kit.far.fa-fw.fa-clock')
+
+    expect(clock).toBeInTheDocument()
+    expect(text.textContent).toEqual(' 12:00a EST')
+  })
+  test('renders DatePicker text right no icon', () => {
+    render(
+      <DateTime
+          data={{ testid: testId }}
+          datetime={new Date(Date.now())}
+          showDayOfWeek
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const clock = kit.querySelector('.pb_icon_kit.far.fa-fw.fa-clock')
+
+    expect(clock).toBeNull()
+  })
+  test('renders DatePicker text right timezone', () => {
+    render(
+      <DateTime
+          data={{ testid: testId }}
+          datetime={new Date(Date.now())}
+          showDayOfWeek
+          timeZone="Asia/Tokyo"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const text = kit.querySelector('.pb_time_kit_md.ml_sm')
+
+    expect(text.textContent).toEqual('2:00p JST')
+  })
+  test('renders DatePicker size', () => {
+    render(
+      <DateTime
+          data={{ testid: testId }}
+          datetime={new Date(Date.now())}
+          showDayOfWeek
+          size="sm"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const rightSide = kit.querySelector('.pb_time_kit_sm.ml_sm')
+
+    expect(kit).toHaveClass('pb_date_time_sm')
+    expect(rightSide).toBeInTheDocument()
+  })
+})

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.jsx'
+import DateTime from '../_date_time'
 
 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.jsx'
+import DateTime from '../_date_time'
 
 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.jsx'
+import DateTime from '../_date_time'
 
 const DateTimeDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_year_stacked/{_date_year_stacked.jsx → _date_year_stacked.tsx}

@@ -1,10 +1,8 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
 import DateTime from '../pb_kit/dateTime'
-import { buildCss } from '../utilities/props'
+import { buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
@@ -12,7 +10,7 @@ import Title from '../pb_title/_title'
 
 type DateYearStackedProps = {
   align?: "left" | "center" | "right",
-  className?: string | array<string>,
+  className?: string | string[],
   dark?: boolean,
   data?: string,
   date: string,
@@ -20,16 +18,18 @@ type DateYearStackedProps = {
 }
 
 const DateYearStacked = (props: DateYearStackedProps) => {
-  const { align = 'left', className, dark = false, date } = props
+  const { align = 'left', className, dark = false, date, data={} } = props
   const dateTimestamp = new DateTime({ value: date })
   const css = classnames(
     buildCss('pb_date_year_stacked', align),
     globalProps(props),
     className
   )
+  const dataProps = buildDataProps(data)
 
   return (
-    <div className={css}>
+    <div {...dataProps}
+    className={css}>
       <Title
           dark={dark}
           size={4}

data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.test.js

@@ -0,0 +1,67 @@
+import React from "react";
+import { render, screen } from "../utilities/test-utils";
+
+import DateYearStacked from "./_date_year_stacked";
+
+const TEST_DATE = "01/01/2020 00:00:000 GMT-0500";
+jest.setSystemTime(new Date(TEST_DATE));
+const testId = "dateyearstacked-kit";
+const realDate = Date;
+
+beforeEach(() => {
+  global.Date.now = jest.fn(() => new Date(TEST_DATE));
+});
+
+afterEach(() => {
+  global.Date = realDate;
+});
+
+describe("DateYearStacked Kit", () => {
+  test("renders DateYearStacked className", () => {
+    render(
+      <DateYearStacked 
+          data={{ testid: testId }} 
+          date={new Date(Date.now())} />
+    );
+
+    const kit = screen.getByTestId(testId);
+    expect(kit).toHaveClass("pb_date_year_stacked_left");
+  });
+
+  test("renders DateYearStacked text top", () => {
+    render(
+      <DateYearStacked 
+          data={{ testid: testId }} 
+          date={new Date(Date.now())} />
+    );
+
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_title_kit_size_4");
+    expect(text.textContent).toEqual("1 JAN");
+  });
+
+  test("renders DateYearStacked text bottom", () => {
+    render(
+      <DateYearStacked 
+          data={{ testid: testId }} 
+          date={new Date(Date.now())} />
+    );
+
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_body_kit_light");
+    expect(text.textContent).toEqual("2020");
+  });
+
+  test("renders align prop", () => {
+    render(
+      <DateYearStacked
+          align="center"
+          data={{ testid: testId }}
+          date={new Date(Date.now())}
+      />
+    );
+
+    const kit = screen.getByTestId(testId);
+    expect(kit).toHaveClass("pb_date_year_stacked_center");
+  });
+});

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

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

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