playbook_ui 13.34.0 → 13.34.1.pre.alpha.PLAY14043436

data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Title from '../../pb_title/_title'
-import { Body } from '../../'
+import { Body } from 'playbook-ui'
 import Card from '../_card'
 
 const CardBackground = (props) => {

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Checkbox } from '../..'
+import { Checkbox } from 'playbook-ui'
 
 const CheckboxError = (props) => {
   return (

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Checkbox, Table } from '../..'
+import { Checkbox, Table } from 'playbook-ui'
 
 const CheckboxIndeterminate = (props) => {
   const [checkboxes, setCheckboxes] = useState([

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

@@ -2,7 +2,7 @@ import React from 'react'
 
 import CircleChart from '../_circle_chart'
 
-import {Title} from '../..'
+import {Title} from 'playbook-ui'
 
 const data = [
   {

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

@@ -1,11 +1,11 @@
 @import "../pb_button/button";
 @import "../pb_button/button_mixins";
 
-$pb_button_styles: [
+$pb_button_styles: (
   "primary",
   "secondary",
   "link",
-];
+);
 
 @mixin pb_circle_icon_button {
   position: relative;
@@ -16,7 +16,7 @@ $pb_button_styles: [
   flex-grow: 0;
   width: $pb_button_size;
   height: $pb_button_size;
-  border-radius: $pb_button_size/2;
+  border-radius: calc($pb_button_size/2);
   line-height: $pb_button_size;
   flex-basis: $pb_button_size;
   min-width: $pb_button_size;

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { CircleIconButton } from '../..'
+import { CircleIconButton } from 'playbook-ui'
 
 const CircleIconButtonClick = (props) => (
   <div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Collapsible } from '../..'
+import { Collapsible } from 'playbook-ui'
 
 const CollapsibleColor = (props) => (
   <div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from '../..'
+import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from 'playbook-ui'
 
 const CollapsibleCustomMain = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from '../..'
+import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from 'playbook-ui'
 
 const CollapsibleCustomMainWithIcon = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Collapsible } from '../..'
+import { Collapsible } from 'playbook-ui'
 
 const CollapsibleDefault = (props) => (
   <Collapsible >

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Collapsible } from '../..'
+import { Collapsible } from 'playbook-ui'
 
 const CollapsibleIcons = (props) => {
 

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Collapsible } from '../..'
+import { Collapsible } from 'playbook-ui'
 
 const CollapsibleSize = (props) => (
   <div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types';
-import { Collapsible, useCollapsible, Button } from '../..'
+import { Collapsible, useCollapsible, Button } from 'playbook-ui'
 
 const CollapsibleState = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Contact } from '../../'
+import { Contact } from 'playbook-ui'
 
 const ContactDefault = (props) => {
   return (

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Contact } from '../../'
+import { Contact } from 'playbook-ui'
 
 const ContactDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Currency, Title } from '../..'
+import { Currency, Title } from 'playbook-ui'
 
 const CurrencyUnstyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_dashboard/commonSettings.js

@@ -1,5 +1,5 @@
-import colors from '../tokens/exports/_colors.scss'
-import typography from '../tokens/exports/_typography.scss'
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
 
 const dataColors = [
   colors.data_1,

data/app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.ts

@@ -1,4 +1,4 @@
-import colors from "../tokens/exports/_colors.scss";
+import colors from "../tokens/exports/_colors.module.scss";
 
 
 // Map Data Color String Props to our SCSS Variables

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -1,5 +1,5 @@
-import colors from '../tokens/exports/_colors.scss'
-import typography from '../tokens/exports/_typography.scss'
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
 
 import { ThemeProps } from './themeTypes'
 

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -1,5 +1,5 @@
-import colors from '../tokens/exports/_colors.scss'
-import typography from '../tokens/exports/_typography.scss'
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
 
 import { ThemeProps } from './themeTypes'
 

data/app/pb_kits/playbook/pb_dashboard_value/dashboardValueSettings.ts

@@ -1,5 +1,5 @@
-import colors from '../tokens/exports/_colors.scss'
-import typography from '../tokens/exports/_typography.scss'
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
 
 const pbIndicator = {
   title: {

data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Date as FormattedDate } from '../..'
+import { Date as FormattedDate } from 'playbook-ui'
 
 const DateAlignment = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Date as FormattedDate, Caption, Title } from '../../'
+import { Date as FormattedDate, Caption, Title } from 'playbook-ui'
 
 const DateDefault = (props) => {
   return (
@@ -80,4 +80,4 @@ const DateDefault = (props) => {
 export default DateDefault
 
 // *Development Note* -  We are reviewing this kit for a potential name change due to naming collisions when `new Date()` is used.
-// To avoid this bug, please use name spacing as shown in the code examples. ie `import { Date as AliasedComponentName } from '../../'
+// To avoid this bug, please use name spacing as shown in the code examples. ie `import { Date as AliasedComponentName } from 'playbook-ui'

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Caption, Date as FormattedDate, Title } from '../../'
+import { Caption, Date as FormattedDate, Title } from 'playbook-ui'
 
 const DateUnstyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Date as FormattedDate } from '../..'
+import { Date as FormattedDate } from 'playbook-ui'
 
 const DateVariants = (props) => {
   return (

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { DatePicker, LabelValue } from '../..'
+import { DatePicker, LabelValue } from 'playbook-ui'
 
 const DatePickerOnChange = (props) => {
   const today = new Date()

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react'
-import { DatePicker,LabelValue } from '../..'
+import { DatePicker,LabelValue } from 'playbook-ui'
 
 
 const DatePickerOnClose = (props) => {

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

@@ -41,7 +41,7 @@
   &.error {
     .date_picker_input_wrapper {
       [class*=pb_body_kit] {
-        margin-top: $space_xs / 2;
+        margin-top: calc($space_xs / 2);
       }
 
       input,

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

@@ -1,15 +1,13 @@
 @media (min-width: 500px) {
   .flatpickr-calendar {
     padding: $space_xs;
-    // width: 323.88px;
   }
   .dayContainer {
     width: 315.88px
   }
   .flatpickr-months {
-    margin-left: $space_xs / 4;
-    margin-top: $space_xs / 3;
-    // width: 323.88px;
+    margin-left: calc($space_xs / 4);
+    margin-top: calc($space_xs / 3);
   }
 }
 @media (max-width: 499px) {

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss

@@ -21,14 +21,14 @@
     display: flex;
     align-items: center;
     [class*=pb_date_range_inline_arrow] {
-      margin-left: $space_xs/2;
-      margin-right: $space_xs/2;
+      margin-left: calc($space_xs/2);
+      margin-right: calc($space_xs/2);
     }
     [class*=pb_date_range_inline_timezone] {
-      margin-left: $space_xs/2;
+      margin-left: calc($space_xs/2);
     }
     [class*=pb_date_range_inline_icon] {
-      margin-right: $space_xs/2;
+      margin-right: calc($space_xs/2);
     }
   }
 }

data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { DateRangeStacked } from '../../'
+import { DateRangeStacked } from 'playbook-ui'
 
 const DateRangeStackedDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss

@@ -1,11 +1,11 @@
 [class^=pb_date_time_stacked] {
 
   [class^=padding_month] {
-    padding-bottom: ($space_xs + 2) !important;
+    padding-bottom: calc($space_xs + 2px) !important;
     }
 
   [class^=padding_day] {
-    padding-bottom: ($space_xs + 2) !important;
+    padding-bottom: calc($space_xs + 2px) !important;
   }
 
   &[class*=_dark] {
@@ -19,7 +19,7 @@
 
 }
 .date-time-padding {
-  padding-right: ($space_xs / 2);
-  padding-left: ($space_xs / 2);
+  padding-right: calc($space_xs / 2);
+  padding-left: calc($space_xs / 2);
 }
 

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js

@@ -1,7 +1,6 @@
 import { ensureAccessible, renderKit } from '../utilities/test-utils'
-import { DateTimeStacked } from '../'
+import { DateTimeStacked } from 'playbook-ui'
 
-/* eslint-disable jsx-control-statements/jsx-jcs-no-undef */
 const currentDate = new Date()
 
 const datetime = new Date('Wed Mar 31 2021 12:00:00 GMT-0500'),

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { DateYearStacked } from '../../'
+import { DateYearStacked } from 'playbook-ui'
 
 const DateYearStackedDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Detail } from '../..'
+import { Detail } from 'playbook-ui'
 
 const DetailBold = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Detail } from '../..'
+import { Detail } from 'playbook-ui'
 
 const DetailColors = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Detail } from '../..'
+import { Detail } from 'playbook-ui'
 
 const DetailDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Detail } from '../..'
+import { Detail } from 'playbook-ui'
 
 const DetailStyled = (props) => (
   <>

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

@@ -183,7 +183,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
             onRequestClose={onClose}
             overlayClassName={overlayClassNames}
             portalClassName={portalClassName}
-            shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
+            shouldCloseOnOverlayClick={shouldCloseOnOverlayClick && !loading}
         >
           <>
             {title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
@@ -215,6 +215,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
             {cancelButton && confirmButton ? (
               <Dialog.Footer>
                   <Button
+                      disabled={loading}
                       htmlType="button"
                       loading={loading}
                       onClick={onConfirm}
@@ -223,6 +224,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
                     {confirmButton}
                   </Button>
                   <Button
+                      disabled={loading}
                       htmlType="button"
                       id="cancel-button"
                       onClick={onCancel}

data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx

@@ -1,6 +1,6 @@
 import React, {useState} from 'react'
-import { render, cleanup, waitFor, fireEvent } from "../utilities/test-utils";
-import { Dialog, Button } from '../'
+import { render, cleanup, waitFor, fireEvent, screen } from "../utilities/test-utils";
+import { Dialog, Button } from 'playbook-ui'
 
 const text="Hello Body Text, Nice to meet ya."
 const title="Header Title is the Title Prop"
@@ -110,3 +110,22 @@ test("renders the right placement dialog", async () => {
   cleanup()
 });
 
+test('renders loading dialog with disabled buttons', async () => {
+
+  const { queryByText } = render(<DialogTest />);
+
+  fireEvent.click(queryByText('Open Dialog'));
+
+  await waitFor(() => expect(queryByText("Okay")).toHaveTextContent(confirmButton));
+  await waitFor(() => expect(queryByText("Cancel Button")).toHaveTextContent(cancelButton));
+
+  fireEvent.click(queryByText('Okay'));
+
+  const loadingIconDiv = document.querySelector('.loading-icon');
+  expect(loadingIconDiv).toBeInTheDocument();
+
+  const cancelBtn = screen.getByRole('button', { name: cancelButton });
+  expect(cancelBtn).toBeDisabled();
+
+  cleanup()
+})

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

@@ -6,7 +6,7 @@ import {
   Dialog,
   RichTextEditor,
   Typeahead,
-} from '../../'
+} from 'playbook-ui'
 
 const DialogCompound = () => {
   const [isOpen, setIsOpen] = useState(false)

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

@@ -1,25 +1,21 @@
 import React, { useState } from 'react'
-import { Button, Dialog } from '../../'
+import { Button, Dialog } from 'playbook-ui'
 
 const DialogDefault = () => {
   const [isOpen, setIsOpen] = useState(false)
   const close = () => setIsOpen(false)
   const open = () => setIsOpen(true)
-  const [isLoading, setIsLoading] = useState(false)
 
   return (
     <>
       <Button onClick={open}>{'Open Dialog'}</Button>
       <Dialog
           cancelButton="Cancel Button"
-          className="wrapper"
           confirmButton="Okay"
-          loading={isLoading}
           onCancel={close}
           onClose={close}
-          onConfirm={() => setIsLoading(!isLoading)}
+          onConfirm={close}
           opened={isOpen}
-          portalClassName="portal"
           size="sm"
           text="Hello Body Text, Nice to meet ya."
           title="Header Title is the Title Prop"

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

@@ -7,7 +7,7 @@ import {
   Flex,
   RichTextEditor,
   Typeahead,
-} from "../..";
+} from "playbook-ui";
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible);

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

@@ -7,7 +7,7 @@ import {
   Flex,
   RichTextEditor,
   Typeahead,
-} from "../..";
+} from "playbook-ui";
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible);

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

@@ -0,0 +1,46 @@
+import React, { useState } from 'react'
+import { Button, Dialog } from 'playbook-ui'
+
+const DialogLoading = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const close = () => {
+    if (!isLoading) {
+      setIsOpen(false)
+    }
+  }
+  const open = () => setIsOpen(true)
+  const [isLoading, setIsLoading] = useState(false)
+  const submit = async () => {
+    setIsLoading(true)
+
+    try {
+      await new Promise((r) => setTimeout(r, 3000))
+      setIsOpen(false)
+    } catch (error) {
+      console.error("An error occurred.")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <Button onClick={open}>{'Open Dialog'}</Button>
+      <Dialog
+          cancelButton="Cancel"
+          className="wrapper"
+          confirmButton="Okay"
+          loading={isLoading}
+          onCancel={close}
+          onClose={close}
+          onConfirm={submit}
+          opened={isOpen}
+          size="sm"
+          text="Make a 3 second request?"
+          title="Loading Example"
+      />
+    </>
+  )
+}
+
+export default DialogLoading

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Dialog } from '../../'
+import { Button, Dialog } from 'playbook-ui'
 
 const DialogScrollable = () => {
 

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

@@ -1,7 +1,5 @@
-/* @flow */
-
 import React, { useState } from 'react'
-import { Button, Dialog, Flex } from '../../'
+import { Button, Dialog, Flex } from 'playbook-ui'
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Dialog } from '../../'
+import { Button, Dialog } from 'playbook-ui'
 
 const DialogShouldCloseOnOverlay = () => {
   const [isOpen, setIsOpen] = useState(false)

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

@@ -1,7 +1,6 @@
-/* @flow */
 
 import React, { useState } from 'react'
-import { Button, Dialog, Flex } from '../../'
+import { Button, Dialog, Flex } from 'playbook-ui'
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

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

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-handler-names */
 import React, { useState } from "react"
-import { Button, Dialog, Flex} from "../.."
+import { Button, Dialog, Flex} from "playbook-ui"
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)