playbook_ui 11.4.0.pre.alpha.rubytheme2 → 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_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_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_layout/{_layout.jsx → _layout.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -7,8 +5,8 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 type LayoutPropTypes = {
-  aria?: object,
-  children?: array<React.ReactNode> | React.ReactNode,
+  aria?: {[key: string]: string},
+  children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   collapse?: "xs" | "sm" | "md" | "lg" | "xl",
   dark?: boolean,
@@ -23,28 +21,28 @@ type LayoutPropTypes = {
 }
 
 type LayoutSideProps = {
-  children: array<React.ReactNode> | React.ReactNode,
+  children: React.ReactNode[] | React.ReactNode,
   className?: string,
 }
 
 type LayoutBodyProps = {
-  children: array<React.ReactNode> | React.ReactNode,
+  children: React.ReactNode[] | React.ReactNode,
   className?: string,
 }
 
 type LayoutItemProps = {
-  children: array<React.ReactNode> | React.ReactNode,
+  children: React.ReactNode[] | React.ReactNode,
   className?: string,
   size?: "sm" | "md" | "lg"
 }
 
 type LayoutHeaderProps = {
-  children: array<React.ReactNode> | React.ReactNode,
+  children: React.ReactNode[] | React.ReactNode,
   className?: string,
 }
 
 type LayoutFooterProps = {
-  children: array<React.ReactNode> | React.ReactNode,
+  children: React.ReactNode[] | React.ReactNode,
   className?: string,
 }
 
@@ -99,8 +97,6 @@ const Footer = (props: LayoutFooterProps) => {
   )
 }
 
-// Main componenet
-
 const Layout = (props: LayoutPropTypes) => {
   const {
     aria = {},
@@ -138,25 +134,23 @@ const Layout = (props: LayoutPropTypes) => {
         ? ''
         : buildCss('layout', position, 'collapse', collapse)
 
-  const layoutChildren =
-    typeof children === 'object' && children.length ? children : [children]
+  const layoutChildren = React.Children.toArray(children)
 
-  const subComponentTags = (tagName) => {
+  const subComponentTags = (tagName: string) => {
     return layoutChildren
-      .filter((c) => {
-        return c.type && c.type.displayName === tagName
+      .filter((c: React.ReactElement & {type: {displayName: string}}) => {
+        return c.type?.displayName === tagName
       })
       .map((child, i) => {
-        return React.cloneElement(child, {
+        return React.cloneElement(child as React.ReactElement, {
           key: `${tagName.toLowerCase()}-${i}`,
         })
       })
   }
 
   const nonSideChildren = layoutChildren.filter(
-    (child) => !child.type || child.type.displayName !== 'Side'
+    (child: React.ReactElement & {type: {displayName: string}}) => child.type?.displayName !== 'Side'
   )
-
   return (
     <div
         {...ariaProps}

data/app/pb_kits/playbook/pb_layout/layout.test.js

@@ -0,0 +1,98 @@
+import React from "react"
+import { render, cleanup } from "../utilities/test-utils"
+import { Layout, Card } from ".."
+
+function LayoutTest(props) {
+  return (
+    <Layout {...props}>
+      <Layout.Side>{"Light"}</Layout.Side>
+      <Layout.Body>{"Body"}</Layout.Body>
+    </Layout>
+  )
+}
+
+test("render all color variants", () => {
+  const testValues = [undefined, "light", "dark", "gradient"]
+  testValues.forEach((variant) => {
+    const { getByTestId } = render(
+      <LayoutTest data={{ testid: `test-${variant}` }}
+          variant={variant} />
+    )
+    expect(getByTestId(`test-${variant}`)).toHaveClass(
+      `pb_layout_kit_sidebar_size_md_left_${
+        variant == undefined ? "light" : variant
+      }`
+    )
+
+    cleanup()
+  })
+})
+
+test("render transparent class", () => {
+  const id = "transparent"
+
+  const { getByTestId } = render(
+    <LayoutTest data={{ testid: `test-${id}` }}
+        variant={id} />
+  )
+  expect(getByTestId(`test-${id}`)).toHaveClass(
+    `pb_layout_kit_sidebar_size_md_left_${id}`
+  )
+
+  cleanup()
+})
+
+test("render all sizes variants", () => {
+  const testValues = ["xs", "sm", "md", "lg", "xl"]
+  testValues.forEach((size) => {
+    const { getByTestId } = render(
+      <LayoutTest data={{ testid: `test-${size}` }}
+          size={size} />
+    )
+    expect(getByTestId(`test-${size}`)).toHaveClass(
+      `pb_layout_kit_sidebar_size_${size}_left_light`
+    )
+
+    cleanup()
+  })
+})
+
+test("render all layout variants", () => {
+  const testValues = [
+    {
+      layout: "collection",
+      expected: "pb_layout_kit_collection",
+    },
+    {
+      layout: "collection_detail",
+      expected: "pb_layout_kit_collection_detail_size_md_left_light",
+    },
+    {
+      layout: "content",
+      expected: "pb_layout_kit_content_size_md_left_light",
+    },
+    {
+      layout: "kanban",
+      expected: "pb_layout_kit_kanban",
+    },
+    {
+      layout: "masonry",
+      expected: "pb_layout_kit_masonry_size_md_left_light",
+    },
+  ]
+
+  testValues.forEach(({ layout, expected }) => {
+    const { getByTestId, container } = render(
+      <Layout data={{ testid: `test-${layout}` }}
+          layout={layout}>
+        <Layout.Body>
+          <Card>{"Card content"}</Card>
+        </Layout.Body>
+      </Layout>
+    )
+    console.log(container)
+
+    expect(getByTestId(`test-${layout}`)).toHaveClass(expected)
+    cleanup()
+  })
+})

data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { fireEvent, render, screen, waitForElementToBeRemoved } from '../utilities/test-utils'
+import { cleanup, fireEvent, render, screen } from '../utilities/test-utils'
 
 import { Lightbox } from '../'
 
@@ -27,6 +27,7 @@ test('Kit renders', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} customClass`)
   expect(kit).toBeInTheDocument()
+  cleanup()
 })
 
 test('Shows selected images', () => {
@@ -67,9 +68,12 @@ test('Shows selected images', () => {
   )
 
   expect(image).toHaveAttribute('src', TEST_PHOTOS[0])
+  cleanup()
 })
 
 test('Closes on escape key', async () => {
+  const mockClose = jest.fn()
+
   render(
     <Lightbox
         data={{ testid: testId }}
@@ -77,25 +81,29 @@ test('Closes on escape key', async () => {
         iconSize="3x"
         id="test1"
         initialPhoto={0}
-        onClose={() => {}}
+        onClose={mockClose}
         photos={TEST_PHOTOS}
     />
   )
 
-  const kit = screen.getByTestId(testId)
-
-  fireEvent(
-    document.body,
-    new KeyboardEvent('keydown', {
-      keyCode: 27, //escape
-    })
+  fireEvent.keyDown(
+    global.window,
+    {
+      bubbles: true,
+      key: "Escape",
+      code: "Escape",
+      keyCode: 27,
+      charCode: 27
+    }
   )
 
-  waitForElementToBeRemoved(kit)
-    .then(() => expect(kit).not.toBeInTheDocument())
+  expect(mockClose).toHaveBeenCalled()
+  cleanup()
 })
 
-test('Closes on close button', () => {
+test('Closes on close button', async () => {
+  const mockClose = jest.fn()
+
   render(
     <Lightbox
         data={{ testid: testId }}
@@ -103,7 +111,7 @@ test('Closes on close button', () => {
         iconSize="3x"
         id="test1"
         initialPhoto={0}
-        onClose={() => {}}
+        onClose={mockClose}
         photos={TEST_PHOTOS}
     />
   )
@@ -119,6 +127,6 @@ test('Closes on close button', () => {
     }),
   )
 
-  waitForElementToBeRemoved(kit)
-    .then(() => expect(kit).not.toBeInTheDocument())
+  expect(mockClose).toHaveBeenCalled()
+  cleanup()
 })

data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx

@@ -21,6 +21,7 @@ type TimestampProps = {
   id?: string,
   showDate?: boolean,
   showUser?: boolean,
+  hideUpdated?: boolean,
   showTimezone?: boolean,
   variant?: "default" | "elapsed" | "updated"
 }
@@ -37,6 +38,7 @@ const Timestamp = (props: TimestampProps) => {
     timezone,
     showDate = true,
     showUser = false,
+    hideUpdated = false,
     showTimezone = false,
     variant = 'default',
   } = props
@@ -57,6 +59,7 @@ const Timestamp = (props: TimestampProps) => {
   const dateDisplay = `${dateTimestamp.toMonth()} ${dateTimestamp.toDay()}`
   const shouldShowUser = showUser == true && text.length > 0
   const shouldShowTimezone = showTimezone == true && timezone.length > 0
+  const updatedText = hideUpdated ? "" : "Last updated"
   const userDisplay = shouldShowUser ? ` by ${text}` : ''
 
   let timeDisplay = `${dateTimestamp.toHour()}:${dateTimestamp.toMinute()}${dateTimestamp.toMeridian()}`
@@ -81,7 +84,7 @@ const Timestamp = (props: TimestampProps) => {
   }
 
   const formatElapsedString = () => {
-    return `Last updated ${userDisplay} ${dateTimestamp.value.fromNow()}`
+    return `${updatedText} ${userDisplay} ${dateTimestamp.value.fromNow()}`
   }
 
   const captionText = () => {
@@ -89,7 +92,7 @@ const Timestamp = (props: TimestampProps) => {
     case 'updated':
       return formatUpdatedString(userDisplay, dateTimestamp)
     case 'elapsed':
-      return formatElapsedString(userDisplay, timeDisplay)
+      return formatElapsedString(userDisplay, timeDisplay, updatedText)
     default:
       return showDate ? timestamp ? fullDateDisplay() : text : fullTimeDisplay()
     }

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb

@@ -12,3 +12,12 @@
   variant: "elapsed",
   show_user: false
 }) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "elapsed",
+  show_user: false,
+  hide_updated: true
+}) %>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx

@@ -28,6 +28,16 @@ const TimestampElapsed = (props) => {
           variant="elapsed"
           {...props}
       />
+
+      <br />
+
+      <Timestamp
+          hideUpdated
+          showUser={false}
+          timestamp={customDate}
+          variant="elapsed"
+          {...props}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_timestamp/timestamp.rb

@@ -12,6 +12,8 @@ module Playbook
       prop :align,  type: Playbook::Props::Enum,
                     values: %w[left center right],
                     default: "left"
+      prop :hide_updated, type: Playbook::Props::Boolean,
+                          default: false
       prop :show_date, type: Playbook::Props::Boolean,
                        default: true
       prop :show_timezone, type: Playbook::Props::Boolean,
@@ -70,8 +72,9 @@ module Playbook
       def format_elapsed_string
         user_string = show_user ? " by #{text}" : ""
         datetime_string = " #{time_ago_in_words(pb_date_time.convert_to_timestamp)} ago"
+        updated_string = hide_updated ? "" : "Last updated"
 
-        "Last updated#{user_string}#{datetime_string}"
+        "#{updated_string}#{user_string}#{datetime_string}"
       end
 
       def datetime_or_text