playbook_ui 11.3.0 → 11.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 829ab73754749eeb3476c40cfaba3fb74e62e92744f725772b851b3c084a81ce
-  data.tar.gz: e42dc4f35cb80676454745307afba58a5d33e7deae5f68ff36074a28e78e3299
+  metadata.gz: 638051af443b06b03b9de8a9092d21f8ce06f3806e60bd43cec8463ce428a69a
+  data.tar.gz: c43d207810694a318a13280bb917b8a295cb44310e05433a262639bee6b8778e
 SHA512:
-  metadata.gz: 6c74669ef536138bc842fb3b2867d68716e10b15af93ea73233593bad06c7c0f01494d30e29cba67c7a2526401a854bf6ad00b259829a2adcfe4795969dbbcb5
-  data.tar.gz: 169d399c99f5fddd984fedb81e3701b85e918da087546259e84989bbf5f17a0227a9787494a8f524c2a50d38eccfc4badab2e9810e3e0b5cecd5585bb85883ac
+  metadata.gz: 80aad4d2179d46bc3332b631a1f4e4e90640d61b3cbd3bfa1894cd8e5710f20ecea86f8d71cada0811e9ac434a99c70cd31a7622c33df2434d82370b5f0a9157
+  data.tar.gz: 8a8562a4d3efced667089ca24567758a341255de55f885d1068c7722b301886d427f07943a03ae391d47a1b1d5b4ce279d7bb80a42d7e53042ed9b22ab71d4dc

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

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from "react";
+import classnames from "classnames";
+
+import { globalProps } from "../utilities/globalProps";
+
+import Icon from "../pb_icon/_icon";
+import Title from "../pb_title/_title";
+
+const iconMap = {
+  success: "check",
+  error: "exclamation-triangle",
+  neutral: "info-circle",
+  tip: "info-circle",
+};
+
+type FixedConfirmationToastProps = {
+  className?: string;
+  closeable?: boolean;
+  data?: string;
+  horizontal?: "right" | "left" | "center";
+  id?: string;
+  multiLine?: boolean;
+  onClose?: () => void;
+  open?: boolean;
+  status?: "success" | "error" | "neutral" | "tip";
+  text: string;
+  vertical?: "top" | "bottom";
+};
+
+const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
+  const [showToast, toggleToast] = useState(true);
+  const {
+    className,
+    closeable = false,
+    horizontal,
+    multiLine = false,
+    onClose = () => {},
+    open = true,
+    status = "neutral",
+    text,
+    vertical,
+  } = props;
+  const css = classnames(
+    `pb_fixed_confirmation_toast_kit_${status}`,
+    { _multi_line: multiLine },
+    { [`positioned_toast ${vertical} ${horizontal}`]: vertical && horizontal },
+    globalProps(props),
+    className
+  );
+  const icon = iconMap[status];
+
+  useEffect(() => {
+    toggleToast(open);
+  }, [open]);
+
+  const handleClick = () => {
+    toggleToast(!closeable);
+    onClose();
+  };
+
+  return (
+    <>
+      {showToast && (
+        <div className={css} onClick={handleClick}>
+          {icon && <Icon className="pb_icon" fixedWidth icon={icon} />}
+          <Title
+            className="pb_fixed_confirmation_toast_text"
+            size={4}
+            text={text}
+          />
+          {closeable && (
+            <Icon className="pb_icon" fixedWidth={false} icon="times" />
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default FixedConfirmationToast;

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -16,6 +16,7 @@ export type IconSizes = "lg"
 | "8x"
 | "9x"
 | "10x"
+| ""
 
 type IconProps = {
   aria?: {[key: string]: string},

data/app/pb_kits/playbook/pb_icon_circle/{_icon_circle.jsx → _icon_circle.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 
 import classnames from 'classnames'
@@ -10,10 +8,10 @@ import { globalProps } from '../utilities/globalProps'
 import Icon from '../pb_icon/_icon'
 
 type IconCircleProps = {
-  aria?: object,
+  aria?: {[key:string]: string},
   className?: string,
   dark?: boolean,
-  data?: object,
+  data?: {[key:string]: string},
   icon: string,
   id?: string,
   size?: "base" | "xs" | "sm" | "md" | "lg" | "xl",

data/app/pb_kits/playbook/pb_kit/{dateTime.js → dateTime.ts}

@@ -1,23 +1,22 @@
-/* @flow */
-/*eslint-disable flowtype/space-before-type-colon */
 
-import moment from 'moment'
+import moment, { Moment } from 'moment'
 import 'moment-strftime'
 import 'moment-timezone'
 
 type DateTimeType = {
-  value: String | Date,
-  zone?: String,
+  value: string | Date,
+  zone?: string,
 }
 
 const ABBR_DAYS = ['SU', 'M', 'T', 'W', 'TH', 'F', 'S']
 
 export default class DateTime {
+  value: Moment & any
   constructor({ value, zone = 'America/New_York' }: DateTimeType) {
     this.value = this.convertToTimestampZone(value, zone)
   }
 
-  convertToTimestampZone(value, zone) {
+  convertToTimestampZone(value: string | Date, zone: string) {
     return moment(value).tz(zone)
   }
 

data/app/pb_kits/playbook/pb_label_pill/{_label_pill.jsx → _label_pill.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps'
@@ -10,9 +8,9 @@ import Pill from '../pb_pill/_pill'
 import Caption from '../pb_caption/_caption'
 
 type LabelPillProps = {
-  aria?: object,
+  aria?: {[key: string]:string},
   className?: string,
-  data?: object,
+  data?: {[key: string]:string},
   id?: string,
   label?: string,
   pillValue?: string,

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

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import DateTime from '../pb_kit/dateTime.js'
+import DateTime from '../pb_kit/dateTime'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 

data/app/pb_kits/playbook/pb_logistic/_logistic.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import DateTime from '../pb_kit/dateTime.js'
+import DateTime from '../pb_kit/dateTime'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 

data/app/pb_kits/playbook/pb_pill/_pill.tsx

@@ -11,7 +11,7 @@ type PillProps = {
   data?: {[key: string]: string},
   id?: string,
   text: string,
-  variant?: "success" | "warning" | "error" | "info" | "neutral",
+  variant?: "success" | "warning" | "error" | "info" | "neutral" | "primary",
   textTransform?: "none" | "lowercase"
 } & GlobalProps
 

data/app/pb_kits/playbook/pb_section_separator/{_section_separator.jsx → _section_separator.tsx}

@@ -1,4 +1,3 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'
 
@@ -8,10 +7,10 @@ import { globalProps } from '../utilities/globalProps'
 import Caption from '../pb_caption/_caption'
 
 type SectionSeparatorProps = {
-  aria: object,
+  aria: { [key: string]: string; },
   className: string,
   dark?: boolean,
-  data: object,
+  data: { [key: string]: string; },
   id: string,
   orientation?: "horizontal" | "vertical",
   text: string,
@@ -40,13 +39,13 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
         className={classes}
         id={id}
     >
-
-      <If condition={text}>
-        <span>
+      {
+        text && (
+          <span>
           <Caption text={text} />
         </span>
-      </If>
-
+        )
+      }
     </div>
   )
 }