playbook_ui 12.10.0 → 12.12.0.pre.alpha.PLAY697sandpacklayoutstyles413

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f9e1489462a3801b52dfe684f47a206bd828e7acef14d05c33d0f82fc2338cee
-  data.tar.gz: 01d894ce63d37e36d7ba7cac5e6469c51f280b06d43a736046899300b3c6b230
+  metadata.gz: eac850ebbc05e1ce91f38e6377564b32fa3ba241de3ff599b5e0084a39666223
+  data.tar.gz: 2ce42692684f6598b0c22d7e763ff9bd815044bd28ea806b659746d1f73ea098
 SHA512:
-  metadata.gz: 4ce7e5fa512dfe372904d822f263888f05557305935ff171c48582aa1d80a67ddbfb772a92598ecffce4d39a6399a6b34e27b754b4f11f46da116cb5db358030
-  data.tar.gz: 47eccdf4be23394775ab3ebd74e0797d0b49290906dd0ae7da66d289b04702f374152cbc1180963ee5a0c9d8c31988d61a7421d00adeb34aa55ca1c150a81671
+  metadata.gz: 268d73b140d2e8aeb3086a4588b2a42c3f3c0dd26d7c4112b37583bcd85e9657fe59e6854042e2a8c9ca02bb139e4aef5aec926430d9da6f2b98c2c1b92d2d2e
+  data.tar.gz: f58ed28b37d12a8e3555f44612a907aabb5e60b81cba57c78c017bb86328c6d437d14999849106847bc5967f59f51daac1c3e5bca921f7e7f7958dffc1ee843a

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

@@ -32,6 +32,7 @@ type CircleChartProps = {
   startAngle?: number;
   style?: string;
   title?: string;
+  tooltipHtml: string;
   useHtml?: boolean;
   zMin?: number;
   layout?: "horizontal" | "vertical" | "proximate";
@@ -78,6 +79,7 @@ const CircleChart = ({
   startAngle = null,
   style = "pie",
   title,
+  tooltipHtml,
   useHtml = false,
   zMin = null,
   layout = "horizontal",
@@ -100,9 +102,7 @@ const CircleChart = ({
   Highcharts.setOptions({
     tooltip: {
       headerFormat: null,
-      pointFormat:
-        '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
-        "<b>{point.y}</b>",
+      pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
       useHTML: useHtml,
     },
   });

data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb

@@ -24,6 +24,9 @@ module Playbook
       prop :use_html, type: Playbook::Props::Boolean, default: false
       prop :legend, type: Playbook::Props::Boolean, default: false
       prop :title, default: ""
+      prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">&#9679; </span>
+                                      {point.name}: ' + '<b>{point.y}
+                                    </b>'
       prop :height
       prop :rounded, type: Playbook::Props::Boolean, default: false
       prop :colors, type: Playbook::Props::Array,

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

@@ -0,0 +1,20 @@
+<% data = [{
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  }
+] %>
+
+
+<%= pb_rails("circle_chart", props: {
+    chart_data: data,
+    tooltip_html: "<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>",
+    id: "default-test"
+}) %>

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

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import CircleChart from '../_circle_chart'
+
+const data = [
+  {
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  },
+]
+
+const CircleChartCustomTooltip = (props) => (
+  <div>
+    <CircleChart
+        chartData={data}
+        id="circle-chart-default"
+        tooltipHtml= '<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>'
+        {...props}
+    />
+  </div>
+)
+
+export default CircleChartCustomTooltip

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

@@ -0,0 +1,3 @@
+A custom tooltip format can be specified. The desired format can be passed as a `string` of custom HTML to the `tooltipHtml` prop.
+
+`{point.name}` and `{point.y}` are useful values that can be referenced for each point in the graph.

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

@@ -9,7 +9,8 @@ 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
 
   react:
   - circle_chart_default: Default Style
@@ -22,5 +23,6 @@ examples:
   - circle_chart_legend_position: Legend Position
   - circle_chart_with_title: Title
   - 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,3 +8,4 @@ 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"

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)
+    }
+  }
 }