playbook_ui 12.10.0 → 12.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f9e1489462a3801b52dfe684f47a206bd828e7acef14d05c33d0f82fc2338cee
-  data.tar.gz: 01d894ce63d37e36d7ba7cac5e6469c51f280b06d43a736046899300b3c6b230
+  metadata.gz: 53d5eae6427aba5ae9de4053e2069de8cf8a669c0f082c8a00066da74180be1d
+  data.tar.gz: 5d16ee2b64c60cbede34f42ad67e25a397f908c98f5a3fc1a3d3fa9edd1234a7
 SHA512:
-  metadata.gz: 4ce7e5fa512dfe372904d822f263888f05557305935ff171c48582aa1d80a67ddbfb772a92598ecffce4d39a6399a6b34e27b754b4f11f46da116cb5db358030
-  data.tar.gz: 47eccdf4be23394775ab3ebd74e0797d0b49290906dd0ae7da66d289b04702f374152cbc1180963ee5a0c9d8c31988d61a7421d00adeb34aa55ca1c150a81671
+  metadata.gz: 304866b64d95656b79835f2f7264f409b71a583ac6ac2e54870b6a19c3413815b162b39215eb849e92d9e045b4fc6f203b30ba065e82f4a60fd73befd7676244
+  data.tar.gz: 931c9aeeb4f9a0e317b3fe226ddcf3d1ec1b5ff52de4dcad9fb456e7a4c237f45f66b9b695adfdad63706f71519c40b14b4362fea2e83197f6c0737788375ee9

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -7,7 +7,7 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
 import Image from '../pb_image/_image'
 import OnlineStatus from '../pb_online_status/_online_status'
 
-type AvatarProps = {
+export type AvatarProps = {
   aria?: {[key: string]: string},
   className?: string,
   data?: {[key: string]: string},

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

@@ -25,6 +25,7 @@ type ButtonPropTypes = {
   onClick?: EventHandler,
   tabIndex?: number,
   size?: 'sm' | 'md' | 'lg',
+  target?: string,
   text?: string,
   type?: 'inline' | null,
   htmlType?: 'submit' | 'reset' | 'button' | undefined,
@@ -70,6 +71,7 @@ const Button = (props: ButtonPropTypes) => {
     tabIndex,
     link = null,
     newWindow = false,
+    target = '',
     text,
     htmlType = 'button',
     value,
@@ -119,7 +121,17 @@ const Button = (props: ButtonPropTypes) => {
     }
   }
 
-  const displayButton = () => {
+  const getTargetAttribute = () => {
+    if (target && link) {
+      return target
+    } else if (newWindow) {
+      return '_blank'
+    }
+
+    return null
+  }
+
+  const displayButton = () => {    
     if (link)
       return (
         <a
@@ -128,10 +140,10 @@ const Button = (props: ButtonPropTypes) => {
             className={css}
             href={link}
             id={id}
-            rel="noreferrer"
+            rel={target !== 'child' ? 'noreferrer' : null}
             role="link"
             tabIndex={tabIndex}
-            target={newWindow ? '_blank' : null}
+            target={getTargetAttribute()}
         >
           {ifLoading()}
         </a>

data/app/pb_kits/playbook/pb_button/button.rb

@@ -18,6 +18,7 @@ module Playbook
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[primary secondary link],
                      default: "primary"
+      prop :target
       prop :text
       prop :type
       prop :value
@@ -41,11 +42,19 @@ module Playbook
         }.compact
       end
 
+      def target_attribute
+        if target && link
+          target
+        elsif new_window
+          "_blank"
+        end
+      end
+
       def link_options
         options.tap do |option|
           option[:href] = link
           option[:role] = "link"
-          option[:target] = "_blank" if new_window
+          option[:target] = target_attribute if target_attribute.present?
           option[:tabindex] = 0
         end
       end

data/app/pb_kits/playbook/pb_button/button.test.js

@@ -6,97 +6,128 @@ import Button from './_button'
 
 // Primary Test Variables
 const htmlType = 'submit',
-  text = 'Button Text',
-  value = '1234'
+    text = 'Button Text',
+    value = '1234'
 
 test('passes type, text, and value props to button', () => {
-  render(
-    <Button
-        data={{ testid: 'primary-test' }}
-        htmlType={htmlType}
-        text={text}
-        value={value}
-    />
-  )
-
-  const kit = screen.getByTestId('primary-test')
-  const content  = screen.getByText(text)
-
-  expect(kit).toHaveClass('pb_button_kit_primary_inline_enabled')
-  expect(kit).toHaveAttribute('type', htmlType)
-  expect(kit).toHaveAttribute('value', value)
-  expect(content).toHaveTextContent(text)
+    render(
+        <Button
+            data={{ testid: 'primary-test' }}
+            htmlType={htmlType}
+            text={text}
+            value={value}
+        />
+    )
+
+    const kit = screen.getByTestId('primary-test')
+    const content = screen.getByText(text)
+
+    expect(kit).toHaveClass('pb_button_kit_primary_inline_enabled')
+    expect(kit).toHaveAttribute('type', htmlType)
+    expect(kit).toHaveAttribute('value', value)
+    expect(content).toHaveTextContent(text)
 })
 
 // Link Test Variables
 const link = 'https://www.google.com'
 
 test('adds link to button', () => {
-  render(
-    <Button
-        data={{ testid: 'link-test' }}
-        link={link}
-    />
-  )
+    render(
+        <Button
+            data={{ testid: 'link-test' }}
+            link={link}
+        />
+    )
 
-  const kit = screen.getByTestId('link-test')
+    const kit = screen.getByTestId('link-test')
 
-  expect(kit).toHaveAttribute('href', link)
+    expect(kit).toHaveAttribute('href', link)
 })
 
 test('button with secondary variant', () => {
-  render(
-    <Button
-        data={{ testid: 'variant-test' }}
-        variant="secondary"
-    />
-  )
+    render(
+        <Button
+            data={{ testid: 'variant-test' }}
+            variant="secondary"
+        />
+    )
 
-  const kit = screen.getByTestId('variant-test')
+    const kit = screen.getByTestId('variant-test')
 
-  expect(kit).toHaveClass('pb_button_kit_secondary_inline_enabled')
-  expect(kit).toHaveAttribute('type', 'button')
+    expect(kit).toHaveClass('pb_button_kit_secondary_inline_enabled')
+    expect(kit).toHaveAttribute('type', 'button')
 })
 
 test('disable prop', () => {
-  render(
-    <Button
-        data={{ testid: 'disable-test' }}
-        disabled
-    />
-  )
+    render(
+        <Button
+            data={{ testid: 'disable-test' }}
+            disabled
+        />
+    )
 
-  const kit = screen.getByTestId('disable-test')
+    const kit = screen.getByTestId('disable-test')
 
-  expect(kit).toBeDisabled()
+    expect(kit).toBeDisabled()
 })
 
 test('click event', async () => {
-  render(
-    <Button
-        data={{ testid: 'click-test' }}
-        onClick={() => appendAlert('clicked button!')}
-    />
-  )
+    render(
+        <Button
+            data={{ testid: 'click-test' }}
+            onClick={() => appendAlert('clicked button!')}
+        />
+    )
 
-  const kit = screen.getByTestId('click-test')
+    const kit = screen.getByTestId('click-test')
 
-  fireEvent.click(kit)
+    fireEvent.click(kit)
 
-  await waitFor(() => screen.getByText('clicked button!'))
+    await waitFor(() => screen.getByText('clicked button!'))
 
-  expect(screen.getByText('clicked button!')).toBeInTheDocument()
+    expect(screen.getByText('clicked button!')).toBeInTheDocument()
 })
 
 test('size prop', () => {
-  render(
-    <Button
-        data={{ testid: 'size-test' }}
-        size="sm"
-    />
-  )
+    render(
+        <Button
+            data={{ testid: 'size-test' }}
+            size="sm"
+        />
+    )
 
-  const kit = screen.getByTestId('size-test')
+    const kit = screen.getByTestId('size-test')
 
-  expect(kit).toHaveClass('pb_button_kit_primary_inline_enabled size_sm')
+    expect(kit).toHaveClass('pb_button_kit_primary_inline_enabled size_sm')
+})
+
+test('should render target prop', () => {
+    render(
+        <Button
+            data={{ testid: 'variant-test' }}
+            link="https://google.com"
+            target="_parent"
+            variant="secondary"
+        />
+    )
+
+    const kit = screen.getByTestId('variant-test')
+    expect(kit).toHaveAttribute('target', '_parent')
+    expect(kit).toHaveAttribute('rel', 'noreferrer')
+})
+
+test('should render child target prop', () => {
+    render(
+        <Button
+            data={{ testid: 'variant-test' }}
+            link="https://google.com"
+            newWindow
+            target="child"
+            variant="secondary"
+        />
+    )
+
+    const kit = screen.getByTestId('variant-test')
+    expect(kit).toHaveAttribute('target', 'child')
+    expect(kit).not.toHaveAttribute('rel')
 })

data/app/pb_kits/playbook/pb_button/docs/_button_link.html.erb

@@ -1,3 +1,4 @@
 <%= pb_rails("button", props: { text: "A Tag Button", aria: { label: "Link to Google" }, tag: "a", link: "http://google.com", margin_right: "lg" }) %>
-<%= pb_rails("button", props: { text: "Open in new Window", aria: { label: "Link to Google in new window" }, new_window: true, link: "http://google.com",margin_right: "lg" }) %>
-<%= pb_rails("button", props: { text: "A Tag Button Disabled", aria: { label: "Disabled link to Google" }, disabled: true, link: "http://google.com",margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Open in new Window", aria: { label: "Link to Google in new window" }, new_window: true, link: "http://google.com", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Open in a Child Tab", aria: { label: "Link to Playbook in new window" }, link: "https://playbook.powerapp.cloud/", margin_right: "lg", target: "child"}) %>
+<%= pb_rails("button", props: { text: "A Tag Button Disabled", aria: { label: "Disabled link to Google" }, disabled: true, link: "http://google.com", margin_right: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Button } from '../../'
 
 const ButtonLink = (props) => (
-  <div>
+  <>
     <Button
         aria={{ label: 'Link to Google' }}
         link="https://google.com"
@@ -22,6 +22,16 @@ const ButtonLink = (props) => (
         {...props}
     />
     {' '}
+    <Button
+        aria={{ label: 'Link to Playbook in new window' }}
+        link="https://playbook.powerapp.cloud/"
+        marginRight='lg'
+        tabIndex={0}
+        target='child'
+        text="Open in a Child Tab"
+        {...props}
+    />
+    {' '}
     <Button
         aria={{ label: 'Disabled link to Google' }}
         disabled
@@ -31,7 +41,7 @@ const ButtonLink = (props) => (
         text="A Tag Button Disabled"
         {...props}
     />
-  </div>
+  </>
 )
 
 export default ButtonLink

data/app/pb_kits/playbook/pb_button/docs/_button_link.md

@@ -0,0 +1 @@
+The `link` prop accepts a string that is used as an href value and causes the button to act as a link. The default behavior of a link is to open in the current window. You can optionally alter the link behavior by adding the `newWindow` prop (boolean), which will open the link in a new window, or by calling the `target` prop, which accepts `_self`, `_blank`, `_parent`, `_top`, `child`, or any string, allowing you to specify any link target.

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss

@@ -34,7 +34,7 @@
 }
 .flatpickr-day.inRange {
   background-color: #F7FBFF;
-  border: 2px;
+  border-color: transparent;
   box-shadow: -$space_xs + 4 0 0 #F7FBFF, $space_xs - 3 0 0 #F7FBFF;
 }
 /*

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -14,6 +14,7 @@ const iconMap = {
 };
 
 type FixedConfirmationToastProps = {
+  autoClose?: number;
   className?: string;
   closeable?: boolean;
   data?: string;
@@ -30,11 +31,12 @@ type FixedConfirmationToastProps = {
 const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   const [showToast, toggleToast] = useState(true);
   const {
+    autoClose = 0,
     className,
     closeable = false,
     horizontal,
     multiLine = false,
-    onClose = () => {},
+    onClose = () => { },
     open = true,
     status = "neutral",
     text,
@@ -49,8 +51,18 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   );
   const icon = iconMap[status];
 
+  const autoCloseToast = () => {
+    if (autoClose && open) {
+      setTimeout(() => {
+        toggleToast(false);
+        onClose();
+      }, autoClose);
+    }
+  }
+
   useEffect(() => {
     toggleToast(open);
+    autoCloseToast();
   }, [open]);
 
   const handleClick = () => {

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.jsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react'
+
+import Button from '../../pb_button/_button'
+import FixedConfirmationToast from '../_fixed_confirmation_toast'
+
+const FixedConfirmationToastAutoClose = (props) => {
+
+    const [open, setOpen] = useState(false)
+    const [openCloseable, setOpenCloseable] = useState(false)
+
+    const handleClick = () => {
+        setOpen(true)
+    }
+    const handleClickCloseable = () => {
+        setOpenCloseable(true)
+    }
+
+    const handleClose = () => {
+        setOpen(false)
+    }
+
+    const handleCloseCloseable = () => {
+        setOpenCloseable(false)
+    }
+
+    return (
+        <>
+            <Button
+                onClick={handleClick}
+                text="Show Auto Close Toast"
+                variant="secondary"
+                {...props}
+            />
+            {' '}
+            <Button
+                onClick={handleClickCloseable}
+                text="Show Closeable Auto Close Toast"
+                variant="secondary"
+                {...props}
+            />
+
+            <FixedConfirmationToast
+                autoClose={3000}
+                horizontal='center'
+                onClose={handleClose}
+                open={open}
+                status='tip'
+                text='I will disappear in 3 seconds.'
+                vertical='top'
+                {...props}
+            />
+
+            <FixedConfirmationToast
+                autoClose={10000}
+                closeable
+                horizontal='center'
+                onClose={handleCloseCloseable}
+                open={openCloseable}
+                status='tip'
+                text='I will disappear in 10 seconds.'
+                vertical='top'
+                {...props}
+            />
+        </>
+    )
+}
+
+export default FixedConfirmationToastAutoClose

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.md

@@ -0,0 +1 @@
+Auto close is used when you want the confirmation toast to close automatically after a certain time. `autoClose` property will be a delay number in ms.

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

@@ -11,3 +11,4 @@ examples:
   - fixed_confirmation_toast_multi_line: Multi Line
   - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_positions: Click to Show Positions
+  - fixed_confirmation_toast_auto_close: Click to Show Auto Close

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

@@ -2,3 +2,4 @@ export { default as FixedConfirmationToastDefault } from './_fixed_confirmation_
 export { default as FixedConfirmationToastMultiLine } from './_fixed_confirmation_toast_multi_line.jsx'
 export { default as FixedConfirmationToastClose } from './_fixed_confirmation_toast_close.jsx'
 export { default as FixedConfirmationToastPositions } from './_fixed_confirmation_toast_positions.jsx'
+export { default as FixedConfirmationToastAutoClose } from './_fixed_confirmation_toast_auto_close.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -19,6 +19,7 @@ module Playbook
       prop :vertical, type: Playbook::Props::Enum,
                       values: [nil, "top", "bottom"],
                       default: nil
+      prop :auto_close, type: Playbook::Props::Number
 
       def show_text?
         text.present?
@@ -28,6 +29,10 @@ module Playbook
         closeable.present? ? " remove_toast" : ""
       end
 
+      def auto_close_class
+        auto_close.present? ? " auto_close_#{auto_close}" : ""
+      end
+
       def position_class
         horizontal && vertical ? " positioned_toast #{vertical} #{horizontal}" : ""
       end
@@ -50,7 +55,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class
+        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + auto_close_class
       end
     end
   end

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js

@@ -7,6 +7,8 @@ export default class PbFixedConfirmationToast extends PbEnhancedElement {
 
   connect() {
     this.self = this.element
+    this.autoCloseToast(this.self)
+
     this.self.addEventListener('click', () => {
       this.removeToast(this.self)
     })
@@ -15,4 +17,19 @@ export default class PbFixedConfirmationToast extends PbEnhancedElement {
   removeToast(elem) {
     elem.parentNode.removeChild(elem)
   }
+
+  autoCloseToast(element) {
+    const classListValues = element.classList.value
+    const hasAutoCloseClass = classListValues.includes('auto_close')
+
+    if (hasAutoCloseClass) {
+      const classList = classListValues.split(' ')
+      const autoCloseValue = classList[classList.length - 1].split('_')[2]
+      const autoCloseIntValue = parseInt(autoCloseValue)
+
+      setTimeout(() => {
+        this.removeToast(element)
+      }, autoCloseIntValue)
+    }
+  }
 }

data/app/pb_kits/playbook/pb_rich_text_editor/{_rich_text_editor.jsx → _rich_text_editor.tsx}

@@ -1,6 +1,3 @@
-/* @flow */
-/* eslint-disable react-hooks/rules-of-hooks */
-
 import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
 import inlineFocus from './inlineFocus'
@@ -18,11 +15,21 @@ try {
 
 import { TrixEditor } from "react-trix"
 
+type Editor = {
+  attributeIsActive?: Function,
+  element?: HTMLElement,
+  getSelectedDocument?: Function,
+  getSelectedRange?: () => Array<number>,
+  insertHTML?: Function,
+  loadHTML?: Function,
+  setSelectedRange?: (range: Array<number>) => void,  
+}
+
 type RichTextEditorProps = {
-  aria?: object,
+  aria?: { [key: string]: string },
   toolbarBottom?: Boolean,
   className?: string,
-  data?: object,
+  data?: { [key: string]: string },
   focus?: boolean,
   id?: string,
   inline?: boolean,
@@ -53,19 +60,19 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   } = props
 
   const ariaProps = buildAriaProps(aria),
-  dataProps = buildDataProps(data),
-  [editor, setEditor] = useState()
+    dataProps = buildDataProps(data),
+    [editor, setEditor] = useState<Editor>()
 
-  const handleOnEditorReady = (editorInstance) => setEditor(editorInstance),
-  element = editor?.element
+  const handleOnEditorReady = (editorInstance: Editor) => setEditor(editorInstance),
+    element = editor?.element
 
   // DOM manipulation must wait for editor to be ready
   if (editor) {
-    const toolbarElement = element.parentElement.querySelector('trix-toolbar'),
-    blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]')
+    const toolbarElement = element.parentElement.querySelector('trix-toolbar') as HTMLElement,
+      blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]') as HTMLElement
 
-    let inlineCodeButton = toolbarElement.querySelector('[data-trix-attribute=inlineCode]')
-    if (!inlineCodeButton) inlineCodeButton = blockCodeButton.cloneNode(true)
+    let inlineCodeButton = toolbarElement.querySelector('[data-trix-attribute=inlineCode]') as HTMLElement
+    if (!inlineCodeButton) inlineCodeButton = blockCodeButton.cloneNode(true) as HTMLElement
 
     // set button attributes
     inlineCodeButton.dataset.trixAttribute = 'inlineCode'
@@ -93,8 +100,8 @@ const RichTextEditor = (props: RichTextEditorProps) => {
 
     focus
       ? (document.addEventListener('trix-focus', useFocus),
-      document.addEventListener('trix-blur', useFocus),
-      useFocus())
+        document.addEventListener('trix-blur', useFocus),
+        useFocus())
       : null
 
     document.addEventListener('trix-focus', inlineFocus)
@@ -110,11 +117,11 @@ const RichTextEditor = (props: RichTextEditorProps) => {
 
   useEffect(() => {
     if (!element) return
-    element.addEventListener('click', ({target}) => {
-      const trixEditorContainer = target.closest('.pb_rich_text_editor_kit')
+    element.addEventListener('click', ({ target }: Event) => {
+      const trixEditorContainer = (target as Element).closest('.pb_rich_text_editor_kit')
       if (!trixEditorContainer) return
 
-      const anchorElement = target.closest('a')
+      const anchorElement = (target as Element).closest('a')
       if (!anchorElement) return
 
       if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
@@ -122,11 +129,11 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   }, [element])
 
   const richTextEditorClass = 'pb_rich_text_editor_kit',
-  simpleClass = simple ? 'simple' : '',
-  focusClass = focus ? 'focus-editor-targets' : '',
-  stickyClass = sticky ? 'sticky' : '',
-  inlineClass = inline ? 'inline' : '',
-  toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
+    simpleClass = simple ? 'simple' : '',
+    focusClass = focus ? 'focus-editor-targets' : '',
+    stickyClass = sticky ? 'sticky' : '',
+    inlineClass = inline ? 'inline' : '',
+    toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
 
   let css = classnames(globalProps(props), className)
   css = classnames(
@@ -141,17 +148,18 @@ const RichTextEditor = (props: RichTextEditorProps) => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={css}
+      {...ariaProps}
+      {...dataProps}
+      className={css}
     >
       <TrixEditor
-          className=""
-          fileParamName={name}
-          onChange={onChange}
-          onEditorReady={handleOnEditorReady}
-          placeholder={placeholder}
-          value={value}
+        className=""
+        fileParamName={name}
+        mergeTags={[]}
+        onChange={onChange}
+        onEditorReady={handleOnEditorReady}
+        placeholder={placeholder}
+        value={value}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_rich_text_editor/{inlineFocus.js → inlineFocus.ts}

@@ -1,5 +1,5 @@
 const inlineFocus = () => {
-  const trixEditorElement = event.target
+  const trixEditorElement = event.target as Element
   const trixEditorContainer = trixEditorElement.closest('.pb_rich_text_editor_kit')
 
   if (!trixEditorContainer.classList.contains('inline')) return

data/app/pb_kits/playbook/pb_rich_text_editor/{useFocus.js → useFocus.ts}

@@ -2,7 +2,7 @@ const useFocus = () => {
   const allTrixEditors = document.querySelectorAll(
     '.focus-editor-targets trix-editor'
   )
-  allTrixEditors.forEach((editorElement) => {
+  allTrixEditors.forEach((editorElement: any) => {
     const toolbarElement = editorElement.toolbarElement
     if (editorElement == document.activeElement) {
       editorElement.classList.add('focused-editor')

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx

@@ -102,6 +102,7 @@ const SelectableCard = (props: SelectableCardProps) => {
   delete filteredProps?.error
   delete filteredProps?.dark
   delete filteredProps?.multi
+  delete filteredProps?.customIcon
   const labelProps: GlobalProps = variant === 'displayInput' ? { ...filteredProps, padding: 'none' } : { ...filteredProps }
 
   return (

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.test.js

@@ -0,0 +1,67 @@
+import React, { useState } from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import SelectableCardIcon from './_selectable_card_icon'
+
+const testId = 'selectableCardIcon'
+const className = 'custom-class-name'
+
+const SelectableCardIconDefault = () => {
+    const [selected, setSelected] = useState(true)
+
+    return (
+        <SelectableCardIcon
+            aria={{ label: testId }}
+            bodyText="Export"
+            checked={selected}
+            className={className}
+            data={{ testid: testId }}
+            icon="chart-line"
+            inputId={1}
+            onChange={() => setSelected(!selected)}
+            titleText="Quarterly Report"
+        />
+    )
+}
+
+test('should pass data prop', () => {
+    render(<SelectableCardIconDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toBeInTheDocument()
+})
+
+test('should pass className prop', () => {
+    render(<SelectableCardIconDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(className)
+})
+
+test('should pass aria prop', () => {
+    render(<SelectableCardIconDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('aria-label', testId)
+})
+
+test('should be checked', () => {
+    render(<SelectableCardIconDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_selectable_card_icon_kit_checked_enabled')
+})
+
+test('should not be disabled', () => {
+    render(<SelectableCardIconDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_selectable_card_icon_kit_checked_enabled')
+})
+
+test('should render body text prop', () => {
+    render(<SelectableCardIconDefault />)
+    const kit = screen.getByText("Export")
+    expect(kit).toBeInTheDocument()
+})
+
+test('should render title text prop', () => {
+    render(<SelectableCardIconDefault />)
+    const kit = screen.getByText("Quarterly Report")
+    expect(kit).toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_selectable_card_icon/{_selectable_card_icon.jsx → _selectable_card_icon.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
@@ -15,13 +13,13 @@ import SelectableCard from '../pb_selectable_card/_selectable_card'
 import SelectableIcon from '../pb_selectable_icon/_selectable_icon'
 
 type SelectableCardIconProps = {
-  aria?: Object,
+  aria?: { [key: string]: string },
   checked?: boolean,
   checkmark: boolean,
   className?: string,
-  customIcon?: SVGElement,
+  customIcon?: { [key: string]: SVGElement },
   dark?: boolean,
-  data?: Object,
+  data?: { [key: string]: string },
   disabled?: boolean,
   icon?: string,
   inputId?: string,
@@ -30,7 +28,7 @@ type SelectableCardIconProps = {
   titleText?: string,
   bodyText?: string,
   value?: string,
-  onChange?: (e) => void,
+  onChange?: (event: React.FormEvent<HTMLInputElement>) => void,
 }
 
 const SelectableCardIcon = (props: SelectableCardIconProps) => {
@@ -68,35 +66,35 @@ const SelectableCardIcon = (props: SelectableCardIconProps) => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
     >
       <SelectableCard
-          checked={checked}
-          customIcon={customIcon}
-          dark={dark}
-          disabled={disabled}
-          icon={checkmark}
-          inputId={inputId}
-          multi={multi}
-          name={name}
-          onChange={onChange}
-          value={value}
+        checked={checked}
+        customIcon={customIcon}
+        dark={dark}
+        disabled={disabled}
+        icon={checkmark}
+        inputId={inputId}
+        multi={multi}
+        name={name}
+        onChange={onChange}
+        value={value}
       >
         {
           <>
             <SelectableIcon
-                customIcon={customIcon}
-                icon={icon}
-                inputs="disabled"
-                size="2x"
-                text={titleText}
-            />
+              customIcon={customIcon}
+              icon={icon}
+              inputId={''}
+              inputs="disabled"
+              name={''}
+              text={titleText} />
             <Body
-                color="light"
-                dark={dark}
-                text={bodyText}
+              color="light"
+              dark={dark}
+              text={bodyText}
             />
           </>
         }

data/app/pb_kits/playbook/pb_source/{_source.jsx → _source.tsx}

@@ -1,28 +1,28 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildDataProps } from '../utilities/props'
+import { buildDataProps, buildAriaProps } from '../utilities/props'
 import { titleize } from '../utilities/text'
 
-import Avatar from '../pb_avatar/_avatar'
+import Avatar, { AvatarProps } from '../pb_avatar/_avatar'
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
 import IconCircle from '../pb_icon_circle/_icon_circle'
 import Title from '../pb_title/_title'
 
 type SourceProps = {
+  aria?: {[key: string]: string},
   className?: string,
-  data?: object,
+  data?: { [key: string]: string },
   hideIcon: boolean,
   id?: string,
   source?: string,
   type: "events" | "inbound" | "outbound" | "prospecting" | "referral" | "retail" | "user",
-  user: object,
+  user: AvatarProps,
 }
 
 const Source = ({
+  aria = {},
   className,
   data = {},
   hideIcon = false,
@@ -32,6 +32,7 @@ const Source = ({
   user = {},
 }: SourceProps) => {
   const dataProps = buildDataProps(data)
+  const ariaProps = buildAriaProps(aria)
 
   const css = classnames([
     'pb_source_kit',
@@ -40,7 +41,7 @@ const Source = ({
 
   const avatar = () => {
     if ((type === 'user' || type === 'referral') && user.name !== undefined) {
-      const avatarProps = { ...user }
+      const avatarProps: AvatarProps = { ...user }
       avatarProps.size = 'sm'
       delete avatarProps.userId
       return avatarProps
@@ -55,7 +56,7 @@ const Source = ({
     }
   }
 
-  const typeIconNames = {
+  const typeIconNames: { [key: string]: string } = {
     events: 'calendar-alt',
     outbound: 'sign-out',
     prospecting: 'binoculars',
@@ -68,47 +69,50 @@ const Source = ({
 
   return (
     <div
-        {...dataProps}
-        className={css}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      className={css}
+      id={id}
     >
 
       <div className="pb__source_layout">
-        <If condition={hideIcon === false}>
-          <If condition={showIcon()}>
-            <IconCircle
+        {hideIcon === false &&
+          <>
+            {showIcon() &&
+              <IconCircle
                 icon={typeIconNames[type]}
                 size="sm"
-            />
-            <Else />
-            <Avatar
+              />
+            }
+            {!showIcon() &&
+              <Avatar
                 {...avatar()}
-            />
-          </If>
-        </If>
+              />
+            }
+          </>
+        }
 
         <div className="pb__source_content">
           <Title
-              size={4}
-              tag="h4"
-              text={source}
+            size={4}
+            tag="h4"
+            text={source}
           />
 
           <div className="pb__source_value">
             <Body
-                color="light"
-                text={typeText()}
+              color="light"
+              text={typeText()}
             />
 
-            <If condition={user.userId}>
+            {user.userId &&
               <Caption
-                  text={user.userId}
+                text={user.userId}
               />
-            </If>
+            }
           </div>
         </div>
       </div>
-
     </div>
   )
 }

data/app/pb_kits/playbook/pb_source/source.test.js

@@ -0,0 +1,82 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import Source from './_source'
+
+const testId = 'source'
+const className = 'custom-class-name'
+
+const SourceDefault = (props) => (
+    <>
+        <Source
+            aria={{ label: testId }}
+            className={className}
+            data={{ testid: testId }}
+            source="BJ's Johnston-208"
+            type='retail'
+            {...props}
+        />
+    </>
+)
+
+test('should pass data prop', () => {
+    render(<SourceDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toBeInTheDocument()
+})
+
+test('should pass className prop', () => {
+    render(<SourceDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(className)
+})
+
+test('should pass aria prop', () => {
+    render(<SourceDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('aria-label', testId)
+})
+
+test('should pass type prop', () => {
+    render(<SourceDefault />)
+    const kit = screen.getByText('Retail')
+    expect(kit).toBeInTheDocument()
+})
+
+test('should pass source prop', () => {
+    render(<SourceDefault />)
+    const kit = screen.getByText("BJ's Johnston-208")
+    expect(kit).toBeInTheDocument()
+})
+
+test('should not hide icon by default', () => {
+    render(<SourceDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit.querySelector('.pb_icon_circle_kit_sm_default')).toBeTruthy()
+})
+
+test('should hide icon', () => {
+    render(<SourceDefault hideIcon />)
+    const kit = screen.getByTestId(testId)
+    expect(kit.querySelector('.pb_icon_circle_kit_sm_default')).toBeFalsy()
+})
+
+test('should pass user prop', () => {
+    const user = {
+        name: 'Anna Black',
+        userId: '48582',
+    }
+    
+    render(
+        <SourceDefault
+            type='user'
+            user={user}
+        />
+    )
+
+    let kit = screen.getByText(user.name)
+    expect(kit).toBeInTheDocument()
+
+    kit = screen.getByText(user.userId)
+    expect(kit).toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -10,13 +10,16 @@ import {
   useFloating, 
   useHover, 
   useInteractions,
-} from "@floating-ui/react-dom-interactions"
+} from "@floating-ui/react"
 
 import classnames from "classnames"
 import { GlobalProps, globalProps } from "../utilities/globalProps"
 import { buildAriaProps, buildDataProps } from "../utilities/props"
 import Flex from "../pb_flex/_flex"
 
+
+
+
 type TooltipProps = {
   aria?: { [key: string]: string },
   className?: string | string[],

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.9.1"
-  VERSION = "12.10.0"
+  PREVIOUS_VERSION = "12.10.0"
+  VERSION = "12.11.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.10.0
+  version: 12.11.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-03-22 00:00:00.000000000 Z
+date: 2023-03-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -457,6 +457,7 @@ files:
 - app/pb_kits/playbook/pb_button/docs/_button_icon_options.md
 - app/pb_kits/playbook/pb_button/docs/_button_link.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_link.jsx
+- app/pb_kits/playbook/pb_button/docs/_button_link.md
 - app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_loading.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_loading.md
@@ -955,6 +956,8 @@ files:
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md
+- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.jsx
+- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.md
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.html.erb
@@ -1710,8 +1713,8 @@ files:
 - app/pb_kits/playbook/pb_radio/radio.html.erb
 - app/pb_kits/playbook/pb_radio/radio.rb
 - app/pb_kits/playbook/pb_radio/radio.test.js
-- app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss
+- app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx
 - app/pb_kits/playbook/pb_rich_text_editor/_trix_styles.scss
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx
@@ -1734,11 +1737,11 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml
 - app/pb_kits/playbook/pb_rich_text_editor/docs/index.js
 - app/pb_kits/playbook/pb_rich_text_editor/docs/templates.js
-- app/pb_kits/playbook/pb_rich_text_editor/inlineFocus.js
+- app/pb_kits/playbook/pb_rich_text_editor/inlineFocus.ts
 - app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb
 - app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js
-- app/pb_kits/playbook/pb_rich_text_editor/useFocus.js
+- app/pb_kits/playbook/pb_rich_text_editor/useFocus.ts
 - app/pb_kits/playbook/pb_section_separator/_section_separator.scss
 - app/pb_kits/playbook/pb_section_separator/_section_separator.tsx
 - app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss
@@ -1811,8 +1814,9 @@ files:
 - app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb
 - app/pb_kits/playbook/pb_selectable_card/selectable_card.rb
 - app/pb_kits/playbook/pb_selectable_card/selectable_card.test.js
-- app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.jsx
 - app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.scss
+- app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.test.js
+- app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx
 - app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_checkmark.html.erb
 - app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_checkmark.jsx
 - app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_default.html.erb
@@ -1849,8 +1853,8 @@ files:
 - app/pb_kits/playbook/pb_selectable_list/selectable_list.rb
 - app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb
 - app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb
-- app/pb_kits/playbook/pb_source/_source.jsx
 - app/pb_kits/playbook/pb_source/_source.scss
+- app/pb_kits/playbook/pb_source/_source.tsx
 - app/pb_kits/playbook/pb_source/docs/_description.md
 - app/pb_kits/playbook/pb_source/docs/_source_default.html.erb
 - app/pb_kits/playbook/pb_source/docs/_source_default.jsx
@@ -1862,6 +1866,7 @@ files:
 - app/pb_kits/playbook/pb_source/docs/index.js
 - app/pb_kits/playbook/pb_source/source.html.erb
 - app/pb_kits/playbook/pb_source/source.rb
+- app/pb_kits/playbook/pb_source/source.test.js
 - app/pb_kits/playbook/pb_star_rating/_star_rating.jsx
 - app/pb_kits/playbook/pb_star_rating/_star_rating.scss
 - app/pb_kits/playbook/pb_star_rating/docs/_description.md