playbook_ui 11.3.0 → 11.4.0.pre.alpha.rubytheme1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 829ab73754749eeb3476c40cfaba3fb74e62e92744f725772b851b3c084a81ce
-  data.tar.gz: e42dc4f35cb80676454745307afba58a5d33e7deae5f68ff36074a28e78e3299
+  metadata.gz: b08242bc3ecb4b0a6d39f6f744c7992373163acf8ee6cda73d248e60957a55ea
+  data.tar.gz: 7a75bbb2b67ae251acd04e3b6b165016a93dd0d88af1e33aa0bfa6e330922a8b
 SHA512:
-  metadata.gz: 6c74669ef536138bc842fb3b2867d68716e10b15af93ea73233593bad06c7c0f01494d30e29cba67c7a2526401a854bf6ad00b259829a2adcfe4795969dbbcb5
-  data.tar.gz: 169d399c99f5fddd984fedb81e3701b85e918da087546259e84989bbf5f17a0227a9787494a8f524c2a50d38eccfc4badab2e9810e3e0b5cecd5585bb85883ac
+  metadata.gz: ad154483627c3617903bb1971c11d13ef07e30f5590933b2a5eb24a36f4d275090989ce6be4052c607f5bdd893833b5b619b9f4ae9c583fbacd7a889165e831c
+  data.tar.gz: 15afb381f181102c1b11b2731c16ede43d0f030ec910e967f15c5ae13c41e328008436cc6dba7ce2adfc93f1a085f0a5724365b0865834e72267f4ea8d33381a

data/app/pb_kits/playbook/index.js

@@ -98,6 +98,7 @@ export { default as Title } from './pb_title/_title'
 export { default as TitleCount } from './pb_title_count/_title_count'
 export { default as TitleDetail } from './pb_title_detail/_title_detail'
 export { default as Toggle } from './pb_toggle/_toggle'
+export { default as Tooltip } from './pb_tooltip/_tooltip'
 export { default as TreemapChart } from './pb_treemap_chart/_treemap_chart'
 export { default as Typeahead } from './pb_typeahead/_typeahead'
 export { default as User } from './pb_user/_user'

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -8,10 +8,10 @@ import Icon from '../pb_icon/_icon'
 type EventHandler = (React.MouseEventHandler<HTMLElement>)
 
 type ButtonPropTypes = {
-  aria?: {[key: string]: string},
+  aria?: { [key: string]: string },
   children?: React.ReactChild[] | React.ReactChild,
   className?: string | string[],
-  data?: {[key: string]: string},
+  data?: { [key: string]: string },
   disabled?: boolean,
   fixedWidth?: boolean,
   form?: string,
@@ -24,11 +24,11 @@ type ButtonPropTypes = {
   onClick?: EventHandler,
   size?: 'sm' | 'md' | 'lg',
   text?: string,
-  type: 'inline' | null,
+  type?: 'inline' | null,
   htmlType: 'submit' | 'reset' | 'button' | undefined,
   value?: string | null,
   variant: 'primary' | 'secondary' | 'link',
-  wrapperClass: string,
+  wrapperClass?: string,
 } & GlobalProps
 
 const buttonClassName = (props: ButtonPropTypes) => {
@@ -99,8 +99,8 @@ const Button = (props: ButtonPropTypes) => {
   )
 
   const ifLoading = () => {
-    if (loading){
-      return(
+    if (loading) {
+      return (
         <>
           {loadingIcon}
         </>

data/app/pb_kits/playbook/pb_circle_icon_button/{_circle_icon_button.jsx → _circle_icon_button.tsx}

@@ -1,11 +1,7 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
-import type { Callback } from '../types'
-
 import { noop } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
@@ -13,21 +9,21 @@ import Button from '../pb_button/_button'
 import Icon from '../pb_icon/_icon'
 
 type CircleIconButtonProps = {
-  aria?: object,
+  aria?: { [key: string]: string },
   className?: string,
   dark?: boolean,
-  data?: object,
+  data?: { [key: string]: string },
   disabled?: boolean,
   icon: string,
   id?: string,
   link?: string,
-  onClick?: Callback,
+  onClick?: React.MouseEventHandler<HTMLElement>,
   newWindow?: boolean,
-  type?: 'button' | 'submit' | 'reset',
+  type?: 'button' | 'submit' | 'reset' | undefined,
   variant?: 'primary' | 'secondary' | 'link',
 }
 
-const CircleIconButton = (props: CircleIconButtonProps) => {
+const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
   const {
     aria = {},
     className,
@@ -61,11 +57,11 @@ const CircleIconButton = (props: CircleIconButtonProps) => {
       <Button
           dark={dark}
           disabled={disabled}
+          htmlType={type}
           link={link}
           newWindow={newWindow}
           onClick={onClick}
           text={null}
-          type={type}
           variant={variant}
       >
         <Icon

data/app/pb_kits/playbook/pb_contact/contact.test.js

@@ -17,7 +17,7 @@ test('returns namespaced class name', () => {
 })
 
 test('returns correct icon', () => {
-  render(
+ render(
     <>
       <Contact
           contactDetail="Cell"
@@ -85,3 +85,47 @@ test('returns correct icon', () => {
   expect(screen.getByTestId('test-extension').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-plus')
   expect(screen.getByTestId('test-empty').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
 })
+
+test("not compliant values return null in phone related contact types", () => {
+  const notCompliantValues = [
+    "349-185-998223",
+    "349-1858",
+    "",
+    "2",
+    "string",
+  ]
+  const contactTypes = [
+    "cell",
+    "work",
+    "work-cell",
+    "wrong-number",
+    "wrong-phone",
+    "wrong-type",
+    "extension",
+  ]
+
+  const buildData = contactTypes.reduce((response, type) => {
+    notCompliantValues.forEach((value) => response.push({ type, value }))
+    return response
+  }, [])
+
+  const { rerender } = render(
+    <Contact
+        contactType=""
+        contactValue=""
+        data={{ testid: `contact-kit-null-test` }}
+    />
+  )
+  buildData.map(({ type, value }) => {
+    rerender(
+      <Contact
+          contactType={type}
+          contactValue={value}
+          data={{ testid: `contact-kit-null-test` }}
+      />
+    )
+    expect(screen.getByTestId("contact-kit-null-test")).toHaveTextContent(
+      "null"
+    )
+  })
+})

data/app/pb_kits/playbook/pb_currency/{_currency.jsx → _currency.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
@@ -14,10 +12,10 @@ type CurrencyProps = {
   abbreviate?: boolean,
   align?: 'center' | 'left' | 'right',
   amount: string,
-  aria?: object,
+  aria?: {[key:string]:string},
   className?: string,
   dark?: boolean,
-  data?: object,
+  data?: {[key:string]:string},
   decimals?: 'default' | 'matching',
   emphasized?: boolean,
   id?: string,
@@ -28,7 +26,7 @@ type CurrencyProps = {
   unit?: string,
 }
 
-const sizes = {
+const sizes: {lg: 1, md: 3, sm: 4} = {
   lg: 1,
   md: 3,
   sm: 4,
@@ -68,12 +66,12 @@ const Currency = (props: CurrencyProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
-    buildCss('pb_currency_kit', align, size, { dark }),
+    buildCss('pb_currency_kit', align, size),
     globalProps(props),
     className
   )
 
-  const getFormattedNumber = (input) => new Intl.NumberFormat('en-US', {
+  const getFormattedNumber = (input: number | any ) => new Intl.NumberFormat('en-US', {
     notation: 'compact',
     maximumFractionDigits: 1,
   }).format(input)
@@ -126,11 +124,18 @@ const Currency = (props: CurrencyProps) => {
             dark={dark}
         >
           {getAbbreviation}
-          <If condition={unit}>
-            {unit}
-            <Else />
-            {getDecimalValue}
-          </If>
+          {
+            unit ? (
+              <>
+              {unit}
+              </>
+            ) : (
+              <>
+              {getDecimalValue}
+              </>
+            )
+          }
+          
         </Body>
       </div>
     </div>

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -0,0 +1,101 @@
+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 Icon from "../pb_icon/_icon";
+import Title from "../pb_title/_title";
+
+type PbDateProps = {
+  alignment?: "left" | "center" | "right";
+  aria?: { [key: string]: string };
+  className?: string;
+  data?: { [key: string]: string };
+  id?: string;
+  showDayOfWeek?: boolean;
+  showIcon?: boolean;
+  size?: "sm" | "md" | "lg";
+  value: string | Date;
+};
+
+const PbDate = (props: PbDateProps) => {
+  const {
+    aria = {},
+    alignment = "left",
+    className,
+    data = {},
+    id,
+    showDayOfWeek = false,
+    showIcon = false,
+    size = "md",
+    value,
+  } = props;
+
+  const dateTimestamp = new DateTime({ value: value });
+  const weekday = dateTimestamp.toWeekday();
+  const month = dateTimestamp.toMonth();
+  const day = dateTimestamp.toDay();
+  const year = dateTimestamp.toYear();
+  const currentYear = new Date().getFullYear().toString();
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+
+  const classes = classnames(
+    buildCss("pb_date_kit", alignment),
+    globalProps(props),
+    className
+  );
+
+  return (
+    <div {...ariaProps} {...dataProps} className={classes} id={id}>
+      {size == "md" || size == "lg" ? (
+        <Title size={4} tag="h4">
+          {showIcon && (
+            <Body className="pb_icon_kit_container" color="light" tag="span">
+              <Icon fixedWidth icon="calendar-alt" />
+            </Body>
+          )}
+
+          {showDayOfWeek && (
+            <>
+              {weekday}
+              <Body color="light" tag="span" text=" • " />
+            </>
+          )}
+
+          <span>
+            {month} {day}
+          </span>
+          {currentYear != year && <span>{`, ${year}`}</span>}
+        </Title>
+      ) : (
+        <>
+          {showIcon && (
+            <Caption className="pb_icon_kit_container" tag="span">
+              <Icon fixedWidth icon="calendar-alt" size="sm" />
+            </Caption>
+          )}
+
+          {showDayOfWeek && (
+            <>
+              <Caption tag="div">{weekday}</Caption>
+              <Caption color="light" tag="div" text=" • " />
+            </>
+          )}
+
+          <Caption tag="span">
+            {month} {day}
+            {currentYear != year && <>{`, ${year}`}</>}
+          </Caption>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default PbDate;

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -5,16 +5,15 @@ import { fireEvent, render, screen, waitFor, within } from '../utilities/test-ut
 import DatePicker from './_date_picker'
 import { getTimezoneText } from './plugins/timeSelect'
 
+
+
+jest.setSystemTime(new Date('01/01/2020'));
 const DEFAULT_DATE = new Date()
-DEFAULT_DATE.setFullYear(2022)
-DEFAULT_DATE.setMonth(1)
-DEFAULT_DATE.setDate(1)
-DEFAULT_DATE.setHours(12)
-DEFAULT_DATE.setMinutes(0)
+
 
 describe('DatePicker Kit', () => {
   beforeEach(() => {
-    jest.spyOn(console, 'error').mockImplementation(() => {});
+    jest.spyOn(console, 'error').mockImplementation(() => { });
   });
 
   test('renders DatePicker input field', () => {
@@ -44,10 +43,12 @@ describe('DatePicker Kit', () => {
 
     const kit = screen.getByTestId(testId)
 
+
     const input = within(kit).getByPlaceholderText('Select Date')
     expect(input).toBeInTheDocument()
+
     await waitFor(() => {
-      expect(input).toHaveValue('02/01/2022')
+      expect(input).toHaveValue('01/01/2020')
     })
   })
 
@@ -143,7 +144,7 @@ describe('DatePicker Kit', () => {
       }),
     )
     await waitFor(() => {
-      expect(input).toHaveValue('02/01/2022 at 12:00 AM')
+      expect(input).toHaveValue('01/01/2020 at 12:00 AM')
     })
 
     fireEvent(
@@ -154,7 +155,7 @@ describe('DatePicker Kit', () => {
       }),
     )
     await waitFor(() => {
-      expect(input).toHaveValue('02/01/2022 at 12:00 PM')
+      expect(input).toHaveValue('01/01/2020 at 12:00 PM')
     })
   })
 })

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_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;
 	}