playbook_ui 11.4.0.pre.alpha.rubytheme2 → 11.5.0.pre.alpha.datepicker1

data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js

@@ -0,0 +1,77 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import IconValue from './_icon_value'
+
+const testId = "iconvalue-kit";
+
+describe("IconValue Kit", () => {
+    test("renders IconValue classname", () => {
+        render(
+            <IconValue
+                data={{ testid: testId }}
+                icon="clipboard"
+                text="33-123456"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_icon_value_kit_left")
+    })
+
+    test("renders icon", () => {
+        render(
+            <IconValue
+                data={{ testid: testId }}
+                icon="clipboard"
+                text="33-123456"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const icon = kit.querySelector(".fa-clipboard.pb_icon_kit.fa-fw")
+        expect(icon).toBeInTheDocument()
+    })
+
+    test("renders value", () => {
+        render(
+            <IconValue
+                data={{ testid: testId }}
+                icon="clipboard"
+                text="33-123456"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const value = kit.querySelector(".pb_body_kit_light")
+        expect(value.textContent).toEqual("33-123456")
+    })
+
+    test("aligns content center", () => {
+        render(
+            <IconValue
+                align="center"
+                data={{ testid: testId }}
+                icon="clipboard"
+                text="33-123456"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_icon_value_kit_center")
+    })
+
+    test("aligns content right", () => {
+        render(
+            <IconValue
+                align="right"
+                data={{ testid: testId }}
+                icon="clipboard"
+                text="33-123456"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_icon_value_kit_right")
+    })
+})

data/app/pb_kits/playbook/pb_label_value/_label_value.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+import classnames from "classnames";
+import DateTime from "../pb_kit/dateTime";
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+
+import Body from "../pb_body/_body";
+import Caption from "../pb_caption/_caption";
+import Flex from "../pb_flex/_flex";
+import Icon from "../pb_icon/_icon";
+import Title from "../pb_title/_title";
+
+type LabelValueProps = {
+  active?: boolean;
+  aria?: { [key: string]: string };
+  className?: string;
+  dark?: boolean;
+  data?: object;
+  date?: Date;
+  id?: string;
+  label: string;
+  value?: string;
+  variant?: "default" | "details";
+  icon?: string;
+  description?: string;
+  title?: string;
+};
+
+const dateString = (value: DateTime) => {
+  const month = value.toMonthNum();
+  const day = value.toDay();
+
+  return ` · ${month}/${day}`;
+};
+
+const LabelValue = (props: LabelValueProps) => {
+  const {
+    active = false,
+    aria = {},
+    className,
+    dark = false,
+    data = {},
+    date,
+    description,
+    icon,
+    id,
+    label,
+    title,
+    value,
+    variant = "default",
+  } = props;
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const formattedDate = new DateTime({ value: date });
+  const variantClass = variant === "details" ? "details" : "";
+  const classes = classnames(
+    buildCss("pb_label_value_kit", variantClass),
+    globalProps(props),
+    className
+  );
+
+  return (
+    <div
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
+      title={title}
+    >
+      <Caption dark={dark} text={label} />
+      {variant === "details" ? (
+        <Flex inline vertical="center">
+          {icon && (
+            <Body color="light" dark={dark} marginRight="xs">
+              <Icon dark={dark} fixedWidth icon={icon} />
+            </Body>
+          )}
+          {description && (
+            <Body
+              color="light"
+              dark={dark}
+              marginRight="xs"
+              text={description}
+            />
+          )}
+          {active === true ? (
+            <Flex inline vertical="center">
+              {title && (
+                <Title dark={dark} size={4} text={title} variant="link" />
+              )}
+              {date && (
+                <Title
+                  dark={dark}
+                  marginLeft="xs"
+                  size={4}
+                  text={" " + dateString(formattedDate)}
+                  variant="link"
+                />
+              )}
+            </Flex>
+          ) : (
+            <>
+              {title && <Title dark={dark} size={4} text={title} />}
+              {date && (
+                <Title
+                  dark={dark}
+                  marginLeft="xs"
+                  size={4}
+                  text={" " + dateString(formattedDate)}
+                />
+              )}
+            </>
+          )}
+        </Flex>
+      ) : (
+        <Body dark={dark} text={value} />
+      )}
+    </div>
+  );
+};
+
+export default LabelValue;

data/app/pb_kits/playbook/pb_label_value/label_value.test.js

@@ -0,0 +1,109 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import LabelValue from './_label_value'
+
+const testId = "labelvalue-kit";
+jest.useFakeTimers()
+
+describe("LabelValue Kit", () => {
+    test("renders LabelValue classname", () => {
+        render(
+            <LabelValue
+                data={{ testid: testId }}
+                label="Role"
+                value="Administrator, Moderator"
+            />
+        )
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_label_value_kit")
+    })
+
+    test("renders label correctly", () => {
+        render(
+            <LabelValue
+                data={{ testid: testId }}
+                label="Role"
+                value="Administrator, Moderator"
+            />
+        )
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector(".pb_caption_kit_md")
+        expect(text.textContent).toEqual("Role")
+    })
+
+    test("renders value correctly", () => {
+        render(
+            <LabelValue
+                data={{ testid: testId }}
+                label="Role"
+                value="Administrator, Moderator"
+            />
+        )
+        const kit = screen.getByTestId(testId)
+       const text = kit.querySelector(".pb_body_kit")
+        expect(text.textContent).toEqual("Administrator, Moderator")
+    })
+
+    test("renders icon if included with details variant", () => {
+        render(
+            <LabelValue
+                data={{ testid: testId }}
+                icon="truck"
+                label="Installer"
+                title="JD Installations LLC"
+                variant="details"
+            />
+        )
+        const kit = screen.getByTestId(testId)
+        const icon = kit.querySelector(".fa-truck.pb_icon_kit.fa-fw")
+        expect(icon).toBeInTheDocument()
+    })
+
+    test("renders title if included with details variant", () => {
+        render(
+            <LabelValue
+                data={{ testid: testId }}
+                icon="truck"
+                label="Installer"
+                title="JD Installations LLC"
+                variant="details"
+            />
+        )
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector(".pb_title_kit_size_4")
+        expect(text.textContent).toEqual("JD Installations LLC")
+    })
+
+    test("renders date if included with details variant", () => {
+        render(
+            <LabelValue
+                data={{ testid: testId }}
+                date={new Date('18 Nov 2019')}
+                description="33-12345"
+                icon="home"
+                label="Project"
+                title="Jefferson-Smith"
+                variant="details"
+            />
+        )
+        const text = screen.getByText("11/18", {exact: false})
+        expect(text).toBeInTheDocument()
+    })
+
+    test("renders title if included with details variant", () => {
+        render(
+            <LabelValue
+                active
+                data={{ testid: testId }}
+                icon="truck"
+                label="Installer"
+                title="JD Installations LLC"
+                variant="details"
+            />
+        )
+        const kit = screen.getByTestId(testId)
+        const activeProp = kit.querySelector(".pb_title_kit_size_4_link")
+        expect(activeProp).toBeInTheDocument()
+    })
+})

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,97 @@
+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 } = render(
+      <Layout data={{ testid: `test-${layout}` }}
+          layout={layout}>
+        <Layout.Body>
+          <Card>{"Card content"}</Card>
+        </Layout.Body>
+      </Layout>
+    )
+
+    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_popover/popover.rb

@@ -4,7 +4,7 @@ module Playbook
   module PbPopover
     class Popover < Playbook::KitBase
       prop :position, type: Playbook::Props::Enum,
-                      values: %w[top bottom left right],
+                      values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
                       default: "left"
       prop :trigger_element_id
       prop :tooltip_id

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -103,7 +103,6 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     <React.Fragment>
       <Flex
           className={`add-on-${addOnAlignment} ${borderCss}`}
-          inline
           vertical="center"
       >
         {addOnAlignment == 'left' && <>

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