RubyGems - playbook_ui - Versions diffs - 11.4.0 → 11.5.0.pre.alpha.datepicker1 - Mend

playbook_ui 11.4.0 → 11.5.0.pre.alpha.datepicker1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (128) hide show

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

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

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

@@ -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} RENAMED Viewed

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

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

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

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

@@ -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_time/_time.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import classnames from "classnames";
 import DateTime from "../pb_kit/dateTime";
 import { buildCss } from "../utilities/props";
-import { globalProps } from "../utilities/globalProps";
+import { globalProps, GlobalProps } from "../utilities/globalProps";
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -20,7 +20,7 @@ type TimeProps = {
   size?: "md" | "sm";
   showTimezone?: boolean;
   timeZone?: string;
-};
+} & GlobalProps
 const Time = (props: TimeProps) => {
   const {

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

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

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

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