playbook_ui 13.34.0.pre.alpha.PLAY14143358 → 13.34.0

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef, useEffect, useRef, useState, useImperativeHandle } f
 import classnames from 'classnames'
 
 import intlTelInput from 'intl-tel-input'
+import 'intl-tel-input/build/css/intlTelInput.css'
 import 'intl-tel-input/build/js/utils.js'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react'
-import { Body, PhoneNumberInput } from 'playbook-ui'
+import { Body, PhoneNumberInput } from '../..'
 
 const PhoneNumberInputAccessInputElement = (props) => {
     // 1. Create a ref - this accesses the kit's input element.

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react'
-import { Button, PhoneNumberInput } from 'playbook-ui'
+import { Button, PhoneNumberInput } from '../..'
 
 const PhoneNumberInputClearField = (props) => {
     // 1. Create a ref - this accesses the kit's input element.

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx

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

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx

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

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx

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

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx

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

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Button, FixedConfirmationToast, PhoneNumberInput } from "playbook-ui";
+import { Button, FixedConfirmationToast, PhoneNumberInput } from "../../";
 
 const PhoneNumberInputValidation = (props) => {
     const [formErrors, setFormErrors] = useState("");

data/app/pb_kits/playbook/pb_pill/_pill.scss

@@ -9,9 +9,9 @@ $pb_pill_height: 22px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 calc($space-sm/1.8);
+  padding: 0 $space-sm/1.8;
   height: $pb_pill_height;
-  border-radius: calc($pb_pill_height/2);
+  border-radius: $pb_pill_height/2;
   white-space: nowrap;
 
   &[class*=lowercase] {

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -19,7 +19,7 @@ import {
 
 import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
-import { uniqueId } from 'lodash';
+import _uniqueId from 'lodash/uniqueId';
 
 type PbPopoverProps = {
   aria?: { [key: string]: string };
@@ -145,7 +145,7 @@ const Popover = (props: PbPopoverProps) => {
 };
 
 const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
-  const [targetId] = useState(uniqueId('id-'))
+  const [targetId] = useState(_uniqueId('id-'))
   const {
     className,
     children,

data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx

@@ -5,7 +5,7 @@ import {
   CircleIconButton,
   Flex,
   PbReactPopover,
-} from 'playbook-ui'
+} from '../..'
 
 const PopoverActionableContent = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx

@@ -3,7 +3,7 @@ import {
   Button,
   Flex,
   PbReactPopover,
-} from 'playbook-ui'
+} from '../..'
 
 const PopoverClose = (props) => {
   const [showInsidePopover, setInsideShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx

@@ -4,7 +4,7 @@ import {
   CircleIconButton,
   Flex,
   PbReactPopover,
-} from 'playbook-ui'
+} from '../..'
 
 const PopoverDefault = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx

@@ -6,7 +6,7 @@ import {
   ListItem,
   PbReactPopover,
   Flex,
-} from 'playbook-ui'
+} from '../..'
 
 const PopoverWithButton = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx

@@ -4,7 +4,7 @@ import {
   Button,
   PbReactPopover,
   Title,
-} from 'playbook-ui'
+} from '../..'
 
 const PopoverScrollHeight = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx

@@ -3,7 +3,7 @@ import {
   Body,
   Button,
   PbReactPopover,
-} from 'playbook-ui'
+} from '../..'
 
 const PopoverZIndex = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/popover.test.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { render, screen, fireEvent } from "../utilities/test-utils";
-import { Button, PbReactPopover } from "playbook-ui";
+import { Button, PbReactPopover } from "..";
 
 const testId = "popover-kit";
 

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss

@@ -21,7 +21,7 @@ $pb_progress_simple_height: 4px;
 [class^=pb_progress_simple_kit] {
   width: 100%;
   height: $pb_progress_simple_height;
-  border-radius: calc($pb_progress_simple_height/2);
+  border-radius: $pb_progress_simple_height/2;
   background: rgba($primary, $opacity-1);
     &[class*=_positive] {
       .progress_simple_value {
@@ -42,7 +42,7 @@ $pb_progress_simple_height: 4px;
   [class^=progress_simple_value] {
     width: 0%;
     height: 100%;
-    border-radius: calc($pb_progress_simple_height/2);
+    border-radius: $pb_progress_simple_height/2;
     background: $primary;
   }
 

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_align.jsx

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

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_default.jsx

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

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, ProgressSimple } from 'playbook-ui'
+import { Flex, ProgressSimple } from '../..'
 
 const ProgressSimpleFlex = () => {
   return (

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_muted.jsx

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

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_value.jsx

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

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx

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

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_width.jsx

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

data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx

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

data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx

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

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss

@@ -106,7 +106,7 @@
     .trix-button--icon {
       height: $space_lg;
       width: $space_lg;
-      margin: calc($space_xs / 2);
+      margin: $space_xs / 2;
       border-radius: $border_rad_heavier;
       &::before {
         background-size: auto;
@@ -116,7 +116,7 @@
       background: $white;
       border: 1px solid #E4E8F0;
       border-bottom: none;
-      padding: calc($space_xs / 2);
+      padding: $space_xs / 2;
       border-top-left-radius: $border_rad_heavier;
       border-top-right-radius: $border_rad_heavier;
       .trix-button-group {

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -1,20 +1,19 @@
 import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
-import { TrixEditor } from 'react-trix'
-
 import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps, noop, buildHtmlProps } from '../utilities/props'
 
-import Trix from 'trix'
-import './_dedupe_trix_toolbar'
-
-Trix.config.textAttributes.inlineCode = {
-  tagName: 'code',
-  inheritable: true,
-}
+try {
+  const Trix = require('trix')
+  Trix.config.textAttributes.inlineCode = {
+    tagName: 'code',
+    inheritable: true,
+  }
+} catch (_e) { /* do nothing */ }
 
+import { TrixEditor } from "react-trix"
 import EditorToolbar from './TipTap/Toolbar'
 
 type Editor = {

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from 'playbook-ui'
+import { RichTextEditor } from '../..'
 import { useEditor, EditorContent } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
 import Link from '@tiptap/extension-link'

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx

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

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { RichTextEditor } from 'playbook-ui'
+import { RichTextEditor } from '../../'
 
 const RichTextEditorDefault = (props) => {
   const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx

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

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx

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

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from 'playbook-ui'
+import { RichTextEditor } from '../..'
 import { useEditor, EditorContent } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
 import Link from '@tiptap/extension-link'

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx

@@ -3,7 +3,7 @@ import {
   Button,
   Card,
   RichTextEditor,
-} from 'playbook-ui'
+} from '../../'
 
 const RichTextEditorPreview = (props) => {
   const [showPreview, setShowPreview] = useState(false)
@@ -21,7 +21,7 @@ const RichTextEditorPreview = (props) => {
           onChange={handleChange}
           {...props}
       />
-      {showPreview && (
+      <If condition={showPreview}>
         <Card marginTop="md">
           <div
               className="trix-content"
@@ -30,10 +30,9 @@ const RichTextEditorPreview = (props) => {
               id="preview-content"
           />
         </Card>
-      )}
-      {!showPreview && (
+        <Else />
         <div />
-      )}
+      </If>
       <Button
           id="preview-button"
           marginTop="md"

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx

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

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx

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

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { RichTextEditor, Select } from 'playbook-ui'
+import { RichTextEditor, Select } from '../../'
 import { changelog, release } from './templates.js'
 
 const RichTextEditorTemplates = (props) => {

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx

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

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 
-import { RichTextEditor } from "playbook-ui";
+import { RichTextEditor } from "../..";
 
 import Document from "@tiptap/extension-document";
 import Paragraph from "@tiptap/extension-paragraph";

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SectionSeparator, Card, Caption } from 'playbook-ui'
+import { SectionSeparator, Card, Caption } from '../../'
 
 const children = (
     <Card

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.jsx

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

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx

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

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx

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

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -81,7 +81,7 @@
     display: block;
     &.error {
       [class*=pb_body_kit] {
-        margin-top: calc($space_xs / 2);
+        margin-top: $space_xs / 2;
       }
       > select:first-child {
         border-color: $error;

data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx

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

data/app/pb_kits/playbook/pb_select/docs/_select_inline.jsx

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

data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx

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

data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx

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

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

@@ -28,7 +28,7 @@ $pb_selectable_card_border: 2px;
     padding: $space_sm;
     margin-bottom: $space_sm;
     cursor: pointer;
-    outline: 1px solid transparent;
+    outline: 1px solid transparent; 
 
     @media (hover:hover) {
       &:hover {
@@ -43,7 +43,7 @@ $pb_selectable_card_border: 2px;
       align-items: center;
       height: $pb_selectable_card_indicator_size;
       width: $pb_selectable_card_indicator_size;
-      border-radius: calc($pb_selectable_card_indicator_size/2) + calc($pb_selectable_card_border/2);
+      border-radius: ($pb_selectable_card_indicator_size/2) + ($pb_selectable_card_border/2);
       border-width: $pb_selectable_card_border;
       border-style: solid;
       border-color: $white;
@@ -52,8 +52,8 @@ $pb_selectable_card_border: 2px;
       font-size: $font_smaller;
       text-align: center;
       position: absolute;
-      top: -(calc($pb_selectable_card_indicator_size/2));
-      right: -(calc($pb_selectable_card_indicator_size/2));
+      top: -($pb_selectable_card_indicator_size/2);
+      right: -($pb_selectable_card_indicator_size/2);
       opacity: 0;
     }
   }

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

@@ -1,3 +1,5 @@
+/* @flow */
+
 import React, {useRef} from 'react'
 import classnames from 'classnames'
 

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_error.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Body, SelectableCard, Title } from 'playbook-ui'
+import { Body, SelectableCard, Title } from '../..'
 
 const SelectableCardError = (props) => {
   const [football, setFootball] = useState(false)

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.test.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { render, screen } from '../utilities/test-utils'
 import SelectableCard from './_selectable_card'
-import { Body, Title, Image } from 'playbook-ui'
+import { Body, Title, Image } from '../'
 
 const SelectableCardMultiSelect = () => {
   const [selected, setSelected] = useState(true)

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx

@@ -1,3 +1,4 @@
+/* @flow */
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps'

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx

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

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx

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

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx

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

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.jsx

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

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.jsx

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

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

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