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

data/app/pb_kits/playbook/pb_hashtag/hashtag.rb

@@ -3,6 +3,8 @@
 module Playbook
   module PbHashtag
     class Hashtag < Playbook::KitBase
+      prop :new_window, type: Playbook::Props::Boolean,
+                        default: false
       prop :text
       prop :type, type: Playbook::Props::Enum,
                   values: %w[default project home appointment],
@@ -17,6 +19,10 @@ module Playbook
         type_text + text
       end
 
+      def link_option
+        new_window ? "_blank" : "_self"
+      end
+
     private
 
       def type_text

data/app/pb_kits/playbook/pb_hashtag/hashtag.test.js

@@ -0,0 +1,54 @@
+
+import React from 'react'
+import { render, screen, cleanup } from "../utilities/test-utils";
+
+import { Hashtag } from "..";
+
+
+const testId = "primary-test"
+const text="Open in a new window"
+const type="project"
+const url="https://google.com"
+const typeMap = {
+  home: 'H#',
+  project: 'P#',
+  appointment: 'A#',
+  default: '#',
+}
+
+function HashtagTest(props) {
+    return (
+        <Hashtag
+            data={{ testid: testId }}
+            text={text}
+            type={type}
+            url={url}
+            {...props}
+        />
+    );
+  }
+
+  test("renders the component", () => {
+    render(<HashtagTest/>);
+    const kit = screen.getByTestId("primary-test");
+    expect(kit).toBeInTheDocument();
+    expect(kit).toHaveClass("pb_hashtag_kit");
+
+    cleanup()
+  });
+
+  test("should pass in url property and allow links to open in a new window", () => {
+    const { container } = render(<HashtagTest newWindow />);
+    expect(container.getElementsByClassName("pb_hashtag_kit")[0].firstChild).toHaveAttribute("href", url);
+    expect(container.getElementsByClassName("pb_hashtag_kit")[0].firstChild).toHaveAttribute("target", "_blank");
+
+    cleanup()
+  });
+
+  test("renders the badge kit with appropriate text", () => {
+    const { container } = render(<HashtagTest />);
+    expect(container.getElementsByClassName("pb_badge_kit_primary")[0]).toBeInTheDocument;
+    expect(container.getElementsByClassName("pb_badge_kit_primary")[0]).toHaveTextContent(typeMap[type] + text);
+
+    cleanup()
+  });

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx

@@ -20,6 +20,7 @@ type HomeAddressStreetProps = {
   homeId: number,
   houseStyle: string,
   homeUrl: string,
+  newWindow: Boolean,
   state: string,
   zipcode: string,
   territory: string,
@@ -35,6 +36,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
     emphasis = 'street',
     homeId,
     homeUrl,
+    newWindow,
     houseStyle,
     state,
     zipcode,
@@ -106,6 +108,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
         <Hashtag
             classname="home-hashtag"
             dark={dark}
+            newWindow={newWindow}
             text={homeId}
             type="home"
             url={homeUrl || '#'}

data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb

@@ -32,7 +32,8 @@
     url: object.home_url || "#",
     type: "home",
     dark: object.dark,
-    classname: "home-hashtag"}) %>
+    classname: "home-hashtag",
+    new_window: object.new_window}) %>
 <% end %>
 
 <%= pb_rails "body", props: { color: "light", tag: "span", dark: object.dark } do %>

data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb

@@ -8,6 +8,8 @@ module Playbook
       prop :city_state
       prop :home_id, type: Playbook::Props::Number
       prop :home_url
+      prop :new_window, type: Playbook::Props::Boolean,
+                        default: false
       prop :territory
       prop :zip
       prop :dark, type: Playbook::Props::Boolean, default: false

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("home_address_street", props: {
+  address: "70 Prospect Ave",
+  address_cont: "Apt M18",
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  house_style: "Colonial",
+  new_window: true,
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import HomeAddressStreet from '../_home_address_street'
+
+const HomeAddressStreetLink= (props) => {
+  return (
+    <HomeAddressStreet
+        address="70 Prospect Ave"
+        addressCont="Apt M18"
+        city="West Chester"
+        homeId={8250263}
+        homeUrl="https://powerhrg.com/"
+        houseStyle="Colonial"
+        newWindow
+        state="PA"
+        territory="PHL"
+        zipcode="19382"
+        {...props}
+    />
+  )
+}
+
+export default HomeAddressStreetLink

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.md

@@ -0,0 +1 @@
+Use the `newWindow` / `new_window` prop to control whether the link opens on the same page or a new tab (same page is the default behavior)

data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml

@@ -4,8 +4,11 @@ examples:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
+  - home_address_street_link: Link
 
   react:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
+  - home_address_street_link: Link
+

data/app/pb_kits/playbook/pb_home_address_street/docs/index.js

@@ -1,3 +1,4 @@
 export { default as HomeAddressStreetDefault } from './_home_address_street_default.jsx'
 export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
 export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
+export { default as HomeAddressStreetLink } from './_home_address_street_link.jsx'

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -12,6 +12,8 @@ module Playbook
       prop :home_id, type: Playbook::Props::Number
       prop :home_url
       prop :house_style
+      prop :new_window, type: Playbook::Props::Boolean,
+                        default: false
       prop :state
       prop :zipcode
       prop :territory
@@ -53,6 +55,7 @@ module Playbook
           dark: dark,
           home_id: home_id,
           home_url: home_url,
+          new_window: new_window,
           territory: territory,
           zip: zip,
         }
@@ -66,6 +69,7 @@ module Playbook
           dark: dark,
           home_id: home_id,
           home_url: home_url,
+          new_window: new_window,
           territory: territory,
         }
       end

data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb

@@ -22,7 +22,8 @@
     url: object.home_url || "#",
     type: "home",
     dark: object.dark,
-    classname: "home-hashtag"}) %>
+    classname: "home-hashtag",
+    new_window: object.new_window}) %>
 <% end %>
 
 <%= pb_rails "body", props: { color: "light", tag: "span", dark: object.dark } do %>

data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb

@@ -8,8 +8,11 @@ module Playbook
       prop :city_state_zip
       prop :home_id, type: Playbook::Props::Number
       prop :home_url
+      prop :new_window, type: Playbook::Props::Boolean,
+                        default: false
       prop :territory
-      prop :dark, type: Playbook::Props::Boolean, default: false
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
     end
   end
 end

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

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

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