playbook_ui 11.1.2 → 11.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 562b6e96ab5327c8f7c820f22c6304f2df04d38f0b39d544a594d0753462ff0c
-  data.tar.gz: b8dd273bf4290aca790e51a7ec16606f9720e494d254e20f1955c21c96ef2dd9
+  metadata.gz: 5ab6a4d99712a0cb0004eceee5f057cd36de15fe71d608b7bc1a56b065998ff8
+  data.tar.gz: 25659480a4ee2657915a8517d0fe036fc1b1b716f1587a35faff7ab5a83b5cff
 SHA512:
-  metadata.gz: 81ecd308bdd90d159ba03b8ab04042a618bab5ad68f390bb150da8fbf34b4379ffe59131638efd75a9b77e427b5a210f0cda92ddf3d602a4be613c0a5f4b04c7
-  data.tar.gz: 3937a0adf41df49005d81d3fb19abb2188e75201735660ff32430e7f1e50e31ea6bbb73aaf86b42ac60e7faa3ba31ab1b3461d874661108a0814dc70a939d015
+  metadata.gz: bbe8a790ac8da179cf0451d32fca1b97de362a2da0e0853a9e07ef7becde62852b984f60966d1565c36369ae5b2236882a2c71cbb4290ee86c239f3c55119324
+  data.tar.gz: d0cb67711f8096fab8bd6903028fc51578dfb53f1ba8666a849a8a59c95d4f582d2beec31bd886bdc3fc25a54bd944759cbc1a1226e259f81e4341627ae9c233

data/app/pb_kits/playbook/_playbook.scss

@@ -47,6 +47,7 @@
 @import 'pb_label_value/label_value';
 @import 'pb_layout/layout';
 @import 'pb_legend/legend';
+@import 'pb_lightbox/lightbox';
 @import 'pb_line_graph/line_graph';
 @import 'pb_list/list';
 @import 'pb_loading_inline/loading_inline';

data/app/pb_kits/playbook/data/menu.yml

@@ -52,6 +52,7 @@ kits:
   - layouts:
     - flex
     - layout
+  - lightbox
   - list
   - loading_inline
   - nav
@@ -103,3 +104,16 @@ kits:
     - title_detail
   - user_badge
   - walkthrough
+visual_guidelines:
+  - colors
+  - max_width
+  - number_spacing
+  - positioning
+  - line_height
+  - spacing
+  - border_radius
+  - typography
+  - shadows
+  - display
+  - cursor
+  - flex_box

data/app/pb_kits/playbook/index.js

@@ -54,6 +54,7 @@ export { default as Layout } from './pb_layout/_layout'
 export { default as Legend } from './pb_legend/_legend'
 export { default as LineGraph } from './pb_line_graph/_line_graph'
 export { default as List } from './pb_list/_list'
+export { default as Lightbox } from './pb_lightbox/_lightbox'
 export { default as ListItem } from './pb_list/_list_item'
 export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
 export { default as Message } from './pb_message/_message'

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_description.md

@@ -1 +1 @@
-BreadCrumbs can be used for keeping a user aware of there route location.
+BreadCrumbs can be used for keeping a user aware of their route location.

data/app/pb_kits/playbook/pb_button_toolbar/{_button_toolbar.jsx → _button_toolbar.tsx}

@@ -8,13 +8,13 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 type ButtonToolbarProps = {
-  aria?: object,
-  children?: array<React.ReactChild>,
+  aria?: {[key: string]: string},
+  children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   connected?: boolean,
   data?: object,
   id?: string,
-  onClick?: EventHandler,
+  onClick?: React.MouseEventHandler<HTMLSpanElement>,
   orientation?: "horizontal" | "vertical",
   text?: string,
  variant?: "primary" | "secondary",

data/app/pb_kits/playbook/pb_caption/_caption.tsx

@@ -5,7 +5,7 @@ import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalPr
 
 type CaptionProps = {
   aria?: {[key: string]: string},
-  children?: React.ReactChild[],
+  children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: {[key: string]: string},

data/app/pb_kits/playbook/pb_contact/_contact.jsx

@@ -17,15 +17,17 @@ const contactTypeMap = {
   'work': 'phone-office',
   'work-cell': 'phone-laptop',
   'wrong-phone': 'phone-slash',
+  'extension': 'phone-plus',
 }
 
 const formatContact = (contactString, contactType) => {
-  if (contactType == 'email') {
-    return contactString
-  }
+  if (contactType == 'email') return contactString
   const cleaned = contactString.replace(/\D/g, '')
-  const phoneNumber = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
-  if (phoneNumber) {
+  if(contactType == 'extension') {
+    return cleaned.match(/^\d{4}$/)
+  }
+  if (contactType !== 'email') {
+    const phoneNumber = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
     const intlCode = phoneNumber[1] ? '+1 ' : ''
     return [
       intlCode,
@@ -66,7 +68,6 @@ const Contact = (props: ContactProps) => {
     globalProps(props),
     className
   )
-
   return (
     <div
         {...ariaProps}

data/app/pb_kits/playbook/pb_contact/contact.rb

@@ -27,6 +27,8 @@ module Playbook
           "phone-laptop"
         when "wrong-phone"
           "phone-slash"
+        when "extension"
+          "phone-plus"
         else # "unknown" || "other"
           "phone"
         end
@@ -35,6 +37,8 @@ module Playbook
       def formatted_contact_value
         if contact_type == "email"
           contact_value
+        elsif contact_type == "extension" && contact_value.match(/^\d{4}$/)
+          contact_value
         else
           number_to_phone(formatted_value, area_code: true)
         end

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

@@ -0,0 +1,87 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import Contact from './_contact'
+
+test('returns namespaced class name', () => {
+  render(
+    <Contact
+        contactDetail="Cell"
+        contactType="cell"
+        contactValue="349-185-9988"
+        data={{ testid: 'class-name-test' }}
+    />
+  )
+
+  const kit = screen.getByTestId('class-name-test')
+  expect(kit).toHaveClass('pb_contact_kit')
+})
+
+test('returns correct icon', () => {
+  render(
+    <>
+      <Contact
+          contactDetail="Cell"
+          contactType="cell"
+          contactValue="349-185-9988"
+          data={{ testid: 'test-cell' }}
+      />
+      <Contact
+          contactDetail="Home"
+          contactValue="5555555555"
+          data={{ testid: 'test-home' }}
+      />
+      <Contact
+          contactDetail="Work"
+          contactType="work"
+          contactValue="3245627482"
+          data={{ testid: 'test-work' }}
+      />
+      <Contact
+          contactDetail="Work-Cell"
+          contactType="work-cell"
+          contactValue="3245627482"
+          data={{ testid: 'test-work-cell' }}
+      />
+      <Contact
+          contactDetail="Email"
+          contactType="email"
+          contactValue="your.email@powerhrg.com"
+          data={{ testid: 'test-email' }}
+      />
+      <Contact
+          contactDetail="Wrong-Phone"
+          contactType="wrong-phone"
+          contactValue="3245627482"
+          data={{ testid: 'test-wrong-phone' }}
+      />
+      <Contact
+          contactDetail="Wrong-Type"
+          contactType="wrong-type"
+          contactValue="3245627482"
+          data={{ testid: 'test-wrong-type' }}
+      />
+      <Contact
+          contactDetail="Ext"
+          contactType='extension'
+          contactValue="1234"
+          data={{ testid: 'test-extension' }}
+      />
+      <Contact
+          contactDetail=""
+          contactType=""
+          contactValue="3245627482"
+          data={{ testid: 'test-empty' }}
+      />
+    </>
+  )
+
+  expect(screen.getByTestId('test-cell').querySelector('.pb_icon_kit')).toHaveClass('fa-mobile')
+  expect(screen.getByTestId('test-home').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
+  expect(screen.getByTestId('test-work').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-office')
+  expect(screen.getByTestId('test-work-cell').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-laptop')
+  expect(screen.getByTestId('test-email').querySelector('.pb_icon_kit')).toHaveClass('fa-envelope')
+  expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-slash')
+  expect(screen.getByTestId('test-wrong-type').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
+  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')
+})

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb

@@ -20,3 +20,9 @@
   contact_value: "3245627482",
   contact_detail: "Work-Cell",
 }) %>
+
+<%= pb_rails("contact", props: {
+  contact_type: "extension",
+  contact_value: "1233",
+  contact_detail: "Ext",
+}) %>

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx

@@ -27,6 +27,12 @@ const ContactDefault = (props) => {
           contactValue="3245627482"
           {...props}
       />
+      <Contact
+          contactDetail="Ext"
+          contactType='extension'
+          contactValue="1234"
+          {...props}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_dialog/_dialog.jsx

@@ -1,3 +1,5 @@
+/* eslint-disable react/jsx-handler-names */
+/* eslint-disable react/no-multi-comp */
 /* @flow */
 
 import React, { useState } from 'react'
@@ -7,13 +9,18 @@ import Modal from 'react-modal'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
+import Body from '../pb_body/_body'
 import Button from '../pb_button/_button'
 import DialogHeader  from './child_kits/_dialog_header'
 import DialogFooter from './child_kits/_dialog_footer'
 import DialogBody from './child_kits/_dialog_body'
+import Flex from '../pb_flex/_flex'
+import IconCircle from '../pb_icon_circle/_icon_circle'
+import Title from '../pb_title/_title'
 import { DialogContext } from './_dialog_context'
 
 type DialogProps = {
+  alertStyle?: "link" | "single" | "stacked" | "default",
   aria?: object,
   cancelButton?: string,
   children: array<React.ReactNode> | React.ReactNode | string,
@@ -31,6 +38,7 @@ type DialogProps = {
   portalClassName?: string,
   shouldCloseOnOverlayClick: boolean,
   size?: "sm" | "md" | "lg" | "content",
+  status?: "info" | "caution" | "delete" | "error" | "success",
   text?: string,
   title?: string,
   trigger?: string
@@ -38,6 +46,7 @@ type DialogProps = {
 
 const Dialog = (props: DialogProps) => {
   const {
+    alertStyle = "default",
     aria = {},
     cancelButton,
     confirmButton,
@@ -53,13 +62,13 @@ const Dialog = (props: DialogProps) => {
     onClose = () => {},
     portalClassName,
     shouldCloseOnOverlayClick = true,
+    status,
     text,
     title,
     trigger,
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-
   const dialogClassNames = {
     base: classnames('pb_dialog', buildCss('pb_dialog', size)),
     afterOpen: 'pb_dialog_after_open',
@@ -78,15 +87,15 @@ const Dialog = (props: DialogProps) => {
     className
   )
 
+  const [triggerOpened, setTriggerOpened] = useState(false),
+  modalIsOpened = trigger ? triggerOpened : opened
+
   const api = {
     onClose: trigger ? function(){
       setTriggerOpened(false)
     } : onClose,
   }
 
-  const [triggerOpened, setTriggerOpened] = useState(false),
-    modalIsOpened = trigger ? triggerOpened : opened
-
   if (trigger) {
     const modalTrigger = document.querySelector(trigger)
     modalTrigger.addEventListener('click', () => {
@@ -97,6 +106,29 @@ const Dialog = (props: DialogProps) => {
     }, { once: true })
   }
 
+  const sweetAlertStatus = {
+    info: {
+      icon: "exclamation-circle",
+      variant: "default",
+    },
+    caution: {
+      icon: "triangle-warning",
+      variant: "yellow",
+    },
+    delete: {
+      icon: "trash",
+      variant: "red",
+    },
+    error: {
+      icon: "times-circle",
+      variant: "red",
+    },
+    success: {
+      icon: "check-circle",
+      variant: "green",
+    },
+  }
+
   return (
     <DialogContext.Provider value={api}>
       <div
@@ -105,6 +137,7 @@ const Dialog = (props: DialogProps) => {
           className={classes}
       >
         <Modal
+            alertStyle={alertStyle}
             ariaHideApp={false}
             className={dialogClassNames}
             closeTimeoutMS={200}
@@ -115,14 +148,32 @@ const Dialog = (props: DialogProps) => {
             overlayClassName={overlayClassNames}
             portalClassName={portalClassName}
             shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
+            status={status}
         >
-          <If condition={title}>
+          <If condition={title && !status}>
             <Dialog.Header>{title}</Dialog.Header>
-          </If>
-          <If condition={text}>
             <Dialog.Body>{text}</Dialog.Body>
           </If>
-
+          <If condition={status}>
+            <Dialog.Body>
+              <Flex align='center'
+                  orientation='column'
+              >
+                <IconCircle
+                    icon={sweetAlertStatus[status].icon}
+                    variant={sweetAlertStatus[status].variant}
+                />
+                <Title marginY='sm'
+                    size={3}
+                >
+                  {title}
+                </Title>
+                <Body marginY='xs'
+                    text={text}
+                />
+              </Flex>
+            </Dialog.Body>
+          </If>
           <If condition={cancelButton && confirmButton}>
             <Dialog.Footer>
               <Button
@@ -131,16 +182,14 @@ const Dialog = (props: DialogProps) => {
               >
                 {confirmButton}
               </Button>
-              <Button
-                  id="cancel-button"
+              <Button id='cancel-button'
                   onClick={onCancel}
-                  variant="link"
+                  variant='link'
               >
                 {cancelButton}
               </Button>
             </Dialog.Footer>
           </If>
-
           {children}
         </Modal>
       </div>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx

@@ -11,7 +11,7 @@ const DialogDefault = () => {
     <>
       <Button onClick={open}>{'Open Dialog'}</Button>
       <Dialog
-          cancelButton="Cancel"
+          cancelButton="Cancel Button"
           className="wrapper"
           confirmButton="Okay"
           loading={isLoading}

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx

@@ -0,0 +1,153 @@
+/* eslint-disable react/jsx-handler-names */
+
+import React, { useState } from "react"
+import { Button, Dialog, Flex, FlexItem, SectionSeparator } from "../.."
+
+const useDialog = (visible = false) => {
+  const [opened, setOpened] = useState(visible)
+  const toggle = () => setOpened(!opened)
+  return [opened, toggle]
+}
+
+const DialogStackedAlert = () => {
+  const [singleButtonOpen, toggleSingleButtonOpen] = useDialog()
+  const [stackedButtonOpen, toggleStackedButtonOpen] = useDialog()
+  const [singleLinkButtonOpen, toggleSingleLinkButtonOpen] = useDialog()
+  const [twoLinkButtonOpen, toggleTwoLinkButtonOpen] = useDialog()
+
+
+  const dialogs = [
+    {
+      status: "info",
+      text: "Text explaining why there is an alert",
+      title: "Are you sure?",
+      toggle: toggleSingleButtonOpen,
+      visible: singleButtonOpen,
+      confirmedButton:"Ok, Thanks",
+    },
+    {
+      status: "error",
+      text: "Text explaining the error",
+      title: "Error Message",
+      confirmedButton:"Yes, Action",
+      cancelledButton: "Ok, Cancel",
+      toggle: toggleStackedButtonOpen,
+      visible: stackedButtonOpen,
+    },
+    {
+      status: "caution",
+      text: "This is the action you will be taking",
+      title: "Are you sure?",
+      toggle: toggleSingleLinkButtonOpen,
+      visible: singleLinkButtonOpen,
+      linkConfirmedButton:"Ok, Thanks!"
+    },
+    {
+      status: "success",
+      text: "Text explaining what is successful",
+      title: "Success",
+      toggle: toggleTwoLinkButtonOpen,
+      visible: twoLinkButtonOpen,
+      linkConfirmedButton:"Ok",
+      linkCancelledButton: "Cancel"
+    }
+  ]
+
+  return (
+    <div>
+    <Flex>
+      <Button
+          marginRight="md"
+          onClick={toggleSingleButtonOpen}
+      >
+        {"1 Button Information Status"}
+      </Button>
+      <Button
+          marginRight="md"
+          onClick={toggleStackedButtonOpen}
+      >
+        {"2 Button Error Status"}
+      </Button>
+      <Button
+          marginRight="md"
+          onClick={toggleSingleLinkButtonOpen}
+      >
+        {"1 Link Button Caution"}
+      </Button>
+      <Button
+          marginRight="md"
+          onClick={toggleTwoLinkButtonOpen}
+      >
+        {"2 Link Button Success"}
+      </Button>
+    </Flex>
+    <Flex>
+      {dialogs.map((dialog) => (
+        <Dialog
+            alertStyle={dialog.alertStyle}
+            key={dialog.status}
+            onClose={dialog.toggle}
+            opened={dialog.visible}
+            size="sm"
+            status={dialog.status}
+            text={dialog.text}
+            title={dialog.title}
+        >
+        <If condition={dialog.cancelledButton || dialog.confirmedButton}>
+          <Dialog.Footer>
+            <Button
+                fullWidth
+                onClick={dialog.toggle}
+            >
+              {dialog.confirmedButton}
+            </Button>
+          </Dialog.Footer>
+          <If condition={dialog.cancelledButton}>
+            <Dialog.Footer paddingTop="none">
+              <Button
+                  fullWidth
+                  onClick={dialog.toggle}
+                  variant="secondary"
+              >
+                {dialog.cancelledButton}
+              </Button>
+            </Dialog.Footer>
+          </If>
+          </If>
+          <If condition={dialog.linkCancelledButton || dialog.linkConfirmedButton} >
+            <SectionSeparator />
+            <Flex
+                inline="flex-container"
+                vertical="stretch"
+            >
+              <FlexItem flex={1} >
+                <Button
+                    fullWidth
+                    onClick={dialog.toggle}
+                    variant="link"
+                >
+                  {dialog.linkConfirmedButton}
+                </Button>
+              </FlexItem>
+              <If condition={dialog.linkCancelledButton}>
+                <SectionSeparator orientation="vertical"/>
+                <FlexItem flex={1}>
+                  <Button
+                      fullWidth
+                      onClick={dialog.toggle}
+                      variant="link"
+                  >
+                    {dialog.linkCancelledButton}
+                  </Button>
+                </FlexItem>
+              </If>
+            </Flex>
+          </If>
+        </Dialog>
+      ))}
+    </Flex>
+  </div>
+  )
+}
+
+export default DialogStackedAlert

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md

@@ -0,0 +1 @@
+This is designed to show you how the buttons can stack with different alert styles. It also has a link style for the buttons for the mobile views.