playbook_ui 13.33.1.pre.alpha.play1407statvaluekitinconsistencies3352 → 13.34.0.pre.alpha.PLAY14143357

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,5 +1,5 @@
 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()

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.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 { Dialog, Button } from 'playbook-ui'
 
 const text="Hello Body Text, Nice to meet ya."
 const title="Header Title is the Title Prop"

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,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Dialog } from '../../'
+import { Button, Dialog } from 'playbook-ui'
 
 const DialogDefault = () => {
   const [isOpen, setIsOpen] = useState(false)

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_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)

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

@@ -1,8 +1,7 @@
 /* eslint-disable react/jsx-handler-names */
-/* @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)
@@ -133,33 +132,35 @@ const DialogStatus = () => {
               text={dialog.text}
               title={dialog.title}
           >
-          <Dialog.Footer
-              paddingBottom="md"
-              paddingX="md"
-          >
-            <If condition={!dialog.buttonTwoText}>
-              <Button
-                  fullWidth
-                  onClick={dialog.toggle}
-              >
-              {dialog.buttonOneText}
-              </Button>
-            </If>
-            <If condition={dialog.buttonTwoText}>
-              <Button
-                  onClick={dialog.toggle}
-                  paddingRight="xl"
-              >
-              {dialog.buttonOneText}
-              </Button>
-              <Button
-                  onClick={dialog.toggle}
-                  variant="secondary"
-              >
-              {dialog.buttonTwoText}
-              </Button>
-            </If>
-          </Dialog.Footer>
+            <Dialog.Footer
+                paddingBottom="md"
+                paddingX="md"
+            >
+              {!dialog.buttonTwoText && (
+                <Button
+                    fullWidth
+                    onClick={dialog.toggle}
+                >
+                {dialog.buttonOneText}
+                </Button>
+              )}
+              {dialog.buttonTwoText && (
+                <React.Fragment>
+                  <Button
+                      onClick={dialog.toggle}
+                      paddingRight="xl"
+                  >
+                  {dialog.buttonOneText}
+                  </Button>
+                  <Button
+                      onClick={dialog.toggle}
+                      variant="secondary"
+                  >
+                  {dialog.buttonTwoText}
+                  </Button>
+                </React.Fragment>
+              )}
+            </Dialog.Footer>
           </Dialog>
         ))}
       </Flex>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Flex, Image, Draggable, DraggableProvider } from "../../";
+import { Flex, Image, Draggable, DraggableProvider } from "playbook-ui";
 
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx

@@ -10,7 +10,7 @@ import {
   Body,
   Draggable,
   DraggableProvider,
-} from "../../";
+} from "playbook-ui";
 
 // Initial groups to drag between
 const containers = ["To Do", "In Progress", "Done"];

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx

@@ -8,7 +8,7 @@ import {
   DraggableProvider,
   Card,
   Caption,
-} from "../../";
+} from "playbook-ui";
 
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { DraggableProvider, List, ListItem } from "../../";
+import { DraggableProvider, List, ListItem } from "playbook-ui";
 
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { SelectableList, DraggableProvider } from "../../";
+import { SelectableList, DraggableProvider } from "playbook-ui";
 
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx

@@ -8,7 +8,7 @@ import {
   List,
   ListItem,
   Card,
-} from "../";
+} from "playbook-ui";
 
 const testId = "draggable";
 

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

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

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from '../../'
+import { Dropdown } from 'playbook-ui'
 
 const DropdownBlankSelection = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx

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