playbook_ui 14.17.0.pre.rc.1 → 14.18.0.pre.alpha.PLAY2037selectinlinecareterror7490

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>
@@ -18,7 +18,7 @@
     chart_data: data_51,
     id: "with-a-block-2",
     rounded: true,
-}) do %> 
+}) do %>
     <%= pb_rails('title', props: {text: "83", size: 1, tag: 'div'}) %>
 <% end %>
 

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx

@@ -13,7 +13,7 @@ const dataWithABlock = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx

@@ -12,7 +12,7 @@ const dataWithColors = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx

@@ -12,7 +12,7 @@ const data = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx

@@ -12,7 +12,7 @@ const data = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx

@@ -14,7 +14,7 @@ const data = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx

@@ -14,7 +14,7 @@ const CircleChartLiveData = (props) => {
       value: 49,
     },
     {
-      name: 'After call',
+      name: 'After Call',
       value: 10,
     },
   ])
@@ -29,7 +29,7 @@ const CircleChartLiveData = (props) => {
       value: 12,
     },
     {
-      name: 'After call',
+      name: 'After Call',
       value: 140,
     },
   ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+
+const data = [
+  {
+    name: 'Waiting for Calls',
+    y: 41,
+  },
+  {
+    name: 'On Call',
+    y: 49,
+  },
+  {
+    name: 'After Call',
+    y: 10,
+  },
+]
+
+const baseOptions = {
+  series: [{ data: data }],
+}
+
+const CircleChartPbStyles = () => {
+  const options = Highcharts.merge({}, circleChartTheme, baseOptions )
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  );
+};
+
+export default CircleChartPbStyles;

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md

@@ -0,0 +1 @@
+You don't need to use the Circle Chart Kit to apply Playbook styles to your Highcharts circle chart. Just import circleChartTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx

@@ -12,7 +12,7 @@ const dataRounded = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

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

@@ -14,6 +14,7 @@ examples:
 
   react:
   - circle_chart_default: Default Style
+  - circle_chart_pb_styles: Playbook Styles
   - circle_chart_live_data: Live Data
   - circle_chart_rounded: Rounded Corners
   - circle_chart_block: Accepts Any Block
@@ -22,7 +23,5 @@ examples:
   - circle_chart_with_legend_kit: Legend
   - circle_chart_legend_position: Legend Position
   - circle_chart_with_title: Title
-  - circle_chart_inner_sizes: Inner Circle Size Options  
+  - circle_chart_inner_sizes: Inner Circle Size Options
   - circle_chart_custom_tooltip: Tooltip Customization
-
-

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

@@ -8,4 +8,5 @@ export { default as CircleChartWithLegendKit } from './_circle_chart_with_legend
 export { default as CircleChartLegendPosition } from './_circle_chart_legend_position.jsx'
 export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
 export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'
-export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
+export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
+export { default as CircleChartPbStyles } from "./_circle_chart_pb_styles.jsx"

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss

@@ -53,4 +53,42 @@ $pb_button_styles: (
       }
     }
   }
-}
+  &.size_small {
+    @each $style in $pb_button_styles {
+      [class^=pb_button_kit][class*=_#{$style}] {
+        width: 20px;
+        height: 20px;
+        min-height: 20px;
+        border-radius: 10px;
+        line-height: 20px;
+        flex-basis: 20px;
+        min-width: 20px;
+        padding: 0;
+      }
+    }
+    // centering small icon svg
+    .pb_button_content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      // rails
+      svg.pb_custom_icon {
+        height: 14px;
+        width: 14px;
+        vertical-align: middle;
+      }
+      // react (nested within an additional span)
+      > span {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        > svg.pb_custom_icon {
+          height: 14px;
+          width: 14px;
+          vertical-align: middle;
+          display: inline-block;
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx

@@ -22,6 +22,7 @@ type CircleIconButtonProps = {
   type?: 'button' | 'submit' | 'reset' | undefined,
   target?: string
   variant?: 'primary' | 'secondary' | 'link',
+  size?: 'default' | 'sm',
 }
 
 const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
@@ -41,13 +42,16 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
     link,
     newWindow,
     variant,
+    size = 'default',
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
+  const sizeClass = size === 'sm' ? 'size_small' : ''
   const classes = classnames(
     buildCss('pb_circle_icon_button_kit'),
+    sizeClass,
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb

@@ -18,8 +18,16 @@ module Playbook
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false
       prop :target
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[default sm],
+                  default: "default"
+
       def classname
-        generate_classname("pb_circle_icon_button_kit")
+        generate_classname("pb_circle_icon_button_kit") + size_class
+      end
+
+      def size_class
+        size == "sm" ? " size_small" : ""
       end
     end
   end

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js

@@ -30,3 +30,17 @@ test('passes loading prop to button', () => {
   
   expect(button).toBeInTheDocument()
 })
+
+test('adds size_small class when size is sm', () => {
+  render(
+    <CircleIconButton
+        data={{ testid: 'small-size-test' }}
+        icon="plus"
+        size="sm"
+    />
+  )
+
+  const kit = screen.getByTestId('small-size-test')
+  
+  expect(kit).toHaveClass('pb_circle_icon_button_kit size_small')
+})

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.html.erb

@@ -0,0 +1,28 @@
+<%= pb_rails("flex", props: { orientation: "column", gap: "sm" }) do %>
+  <%= pb_rails("circle_icon_button", props: {
+    icon: "plus",
+    size: "sm",
+    variant: "primary"
+  }) %>
+
+  <%= pb_rails("circle_icon_button", props: {
+    icon: "pen",
+    loading: true,
+    size: "sm",
+    variant: "secondary"
+  }) %>
+
+  <%= pb_rails("circle_icon_button", props: {
+    disabled: true,
+    icon: "times",
+    size: "sm"
+  }) %>
+
+  <%= pb_rails("circle_icon_button", props: {
+    icon: "info",
+    link: "https://playbook.powerapp.cloud/",
+    size: "sm",
+    target: "child",
+    variant: "link"
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+import CircleIconButton from '../_circle_icon_button'
+import Flex from '../../pb_flex/_flex'
+
+const CircleIconButtonSize = (props) => (
+  <>
+    <Flex gap="sm"
+        orientation="column"
+    >
+        <CircleIconButton
+            icon="plus"
+            size="sm"
+            variant="primary"
+            {...props}
+        />
+        <CircleIconButton
+            icon="pen"
+            loading
+            size="sm"
+            variant="secondary"
+            {...props}
+        />
+        <CircleIconButton
+            disabled
+            icon="times"
+            size="sm"
+            {...props}
+        />
+        <CircleIconButton
+            icon="info"
+            link="https://playbook.powerapp.cloud/"
+            size="sm"
+            target="child"
+            variant="link"
+            {...props}
+        />
+    </Flex>
+  </>
+)
+
+export default CircleIconButtonSize

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.md

@@ -0,0 +1 @@
+The `size` prop accepts "sm" as a value to make the Circle Icon Button 20px x 20px instead of the default 40px x 40px size.

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

@@ -4,9 +4,11 @@ examples:
   - circle_icon_button_default: Default
   - circle_icon_button_link: Link
   - circle_icon_button_loading: Loading
+  - circle_icon_button_size: Size
   
   react:
   - circle_icon_button_default: Default
   - circle_icon_button_click: Click Handler
   - circle_icon_button_link: Link
   - circle_icon_button_loading: Loading
+  - circle_icon_button_size: Size

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

@@ -2,3 +2,4 @@ export { default as CircleIconButtonDefault } from './_circle_icon_button_defaul
 export { default as CircleIconButtonClick } from './_circle_icon_button_click.jsx'
 export { default as CircleIconButtonLink } from './_circle_icon_button_link.jsx'
 export { default as CircleIconButtonLoading } from './_circle_icon_button_loading.jsx'
+export { default as CircleIconButtonSize } from './_circle_icon_button_size.jsx'

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -27,13 +27,20 @@ exports[`html structure is correct 1`] = `
               class="icon_wrapper"
               style="vertical-align: middle; color: rgb(193, 205, 214);"
             >
-              <i
-                class="pb_icon_kit far fa-lg fa-fw fa-lg fa-chevron-down"
-              />
-              <span
-                aria-label="chevron-down icon"
-                hidden=""
-              />
+              <svg
+                class="pb_custom_icon svg-inline--fa svg_lg svg_fw"
+                color="currentColor"
+                fill="none"
+                height="auto"
+                viewBox="0 0 30 25"
+                width="auto"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14.203 19.297l-9-9c-.469-.422-.469-1.125 0-1.594.422-.422 1.125-.422 1.594 0L15 16.953l8.203-8.203c.422-.469 1.125-.469 1.594 0a1.103 1.103 0 010 1.547l-9.047 9a1.027 1.027 0 01-1.547 0z"
+                  fill="#242B42"
+                />
+              </svg>
             </div>
           </div>
         </div>

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

@@ -75,15 +75,15 @@ test('returns correct icon', () => {
     </>
   )
 
-  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-cell').querySelector('.pb_custom_icon')).toBeInTheDocument()
+  expect(screen.getByTestId('test-home').querySelector('.pb_custom_icon')).toBeInTheDocument()
   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_custom_icon')).toHaveClass('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-work-cell').querySelector('.pb_custom_icon')).toBeInTheDocument()
+  expect(screen.getByTestId('test-email').querySelector('.pb_custom_icon')).toBeInTheDocument()
+  expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_custom_icon')).toBeInTheDocument()
+  expect(screen.getByTestId('test-wrong-type').querySelector('.pb_custom_icon')).toBeInTheDocument()
   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')
+  expect(screen.getByTestId('test-empty').querySelector('.pb_custom_icon')).toBeInTheDocument()
 })
 
 test("not compliant values return null in phone related contact types", () => {

data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx

@@ -1,5 +1,4 @@
-
-import React, { useState } from 'react'
+import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
@@ -7,16 +6,19 @@ import { globalProps } from '../utilities/globalProps'
 import Button from '../pb_button/_button'
 import Tooltip from '../pb_tooltip/_tooltip'
 
+import usePBCopy from './usePBCopy'
+
 type CopyButtonProps = {
-  aria?: { [key: string]: string },
-  className?: string,
-  data?: { [key: string]: string },
-  id?: string,
-  from?: string,
-  text?: string,
-  tooltipPlacement?:  "top" | "right" | "bottom" | "left",
-  tooltipText?: string,
-  value?: string,
+  aria?: { [key: string]: string }
+  className?: string
+  data?: { [key: string]: string }
+  id?: string
+  from?: string
+  text?: string
+  tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left'
+  tooltipText?: string
+  value?: string
+  timeout?: number
 }
 
 const CopyButton = (props: CopyButtonProps) => {
@@ -27,62 +29,34 @@ const CopyButton = (props: CopyButtonProps) => {
     from = '',
     id,
     text= 'Copy',
+    timeout = 1000,
     tooltipPlacement= 'bottom',
     tooltipText = 'Copied!',
     value = '',
   } = props
 
-  const [copied, setCopied] = useState(false)
+  const [copied, copy] = usePBCopy({ value, from, timeout })
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(buildCss('pb_copy_button_kit'), globalProps(props), className)
 
-  const copy = () => {
-    if (!from && !value) {
-      return
-    }
-
-    if (value) {
-      navigator.clipboard.writeText(value)
-    } else if (from) {
-      const copyElement = document.getElementById(from);
-      let copyText = copyElement?.innerText
-
-      if (copyElement instanceof HTMLTextAreaElement || copyElement instanceof HTMLInputElement) {
-        copyText = copyElement.value;
-      }
-
-      if (copyText) {
-        navigator.clipboard.writeText(copyText)
-      }
-    }
-
-    setCopied(true)
-
-    setTimeout(() => {
-      setCopied(false)
-    }, 1000);
-  }
-
   return (
-    <div
-        {...ariaProps}
+    <div {...ariaProps}
         {...dataProps}
         className={classes}
         id={id}
     >
-      <Tooltip 
+      <Tooltip
           forceOpenTooltip={copied}
           placement={tooltipPlacement}
           showTooltip={false}
           text={tooltipText}
       >
-        <Button
-            icon='copy'
+        <Button icon="copy"
             onClick={copy}
         >
-          { text }
+          {text}
         </Button>
       </Tooltip>
     </div>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react'
+import usePBCopy from '../../pb_copy_button/usePBCopy'
+import Body from '../../pb_body/_body'
+import Textarea from '../../pb_textarea/_textarea'
+import Tooltip from '../../pb_tooltip/_tooltip'
+
+const CopyButtonHook = ({...props}) => {
+  // This is how you can use the copy button hook to copy text to the clipboard
+  // eslint-disable-next-line no-unused-vars
+  const [copied, copyToClipboard] = usePBCopy({ from: 'hookbody' })
+  // I added a tooltip so it looks better in the ui
+  const [showTooltip, setShowTooltip] = useState(false)
+
+  const handleCopy = () => {
+    copyToClipboard()
+    setShowTooltip(true)
+    setTimeout(() => setShowTooltip(false), 1500)
+  }
+
+  useEffect(() => {
+    const el = document.getElementById('hookbody')
+    if (!el) return
+
+    el.addEventListener('click', handleCopy)
+    return () => {
+      el.removeEventListener('click', handleCopy)
+    }
+  }, [copyToClipboard])
+
+  return (
+    <div>
+      <Tooltip
+          delay={{ close: 1000 }}
+          forceOpenTooltip={showTooltip}
+          placement="top"
+          showTooltip={false}
+          text="Copied!"
+      >
+        <Body
+            cursor="pointer"
+            id="hookbody"
+            text="I'm a custom copy hook! Click this body to copy this text!"
+        />
+      </Tooltip>
+
+      <Textarea
+          {...props}
+          placeholder="Paste here"
+      />
+    </div>
+  )
+}
+
+export default CopyButtonHook

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md

@@ -0,0 +1,3 @@
+We provide a `usePBCopy` hook that you can import to your project. This hook will return a function that you can call to copy the text to the clipboard.
+
+`usePBCopy({ from: 'your_id' })` will grab the `innerText` from `your_id` element, or `value` if it is an input element.

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.html.erb

@@ -0,0 +1,14 @@
+<%= pb_rails("body", props: { cursor: "pointer", data: { "external-copy-from": "hookbody"} }) do %>
+  <span id="hookbody">I'm a custom copy hook! Click this body to copy this text!</span>
+<% end %>
+
+<%= pb_rails("tooltip", props: {
+  trigger_element_selector: "#hookbody",
+  tooltip_id: "hookbody_tooltip",
+  position: 'top',
+  trigger_method: "click"
+}) do %>
+  Copied!
+<% end %>
+
+<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.md

@@ -0,0 +1,3 @@
+You can use any external control (like the text itself or an icon) to copy. To use this hook, set the `data-external-copy-from` attribute on the external control to the copying ID. This will grab the `innerText` from `your_id` element, or `value` if it is an input element. Alternatively, you can set a `data-external-copy-value` attribute and copy custom text.
+
+See the code example for details.