playbook_ui_docs 13.33.1.pre.alpha.PLAY14143340 → 13.33.1.pre.alpha.play1407statvaluekitinconsistencies3352

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx

@@ -1,40 +1,35 @@
 import React from 'react'
-
 import StarRating from '../_star_rating'
 
 const StarRatingHide = (props) => (
-  <>
-
-    <StarRating
-        paddingBottom="xs"
-        rating={3}
-        {...props}
-    />
-
-
-    <StarRating
-        layoutOption={"number"}
-        paddingBottom="xs"
-        rating={2.8}
-        {...props}
-    />
-
-
-    <StarRating
-        layoutOption={"number"}
-        paddingBottom="xs"
-        rating={3}
-        {...props}
-    />
-
-    <StarRating
-        layoutOption={"onestar"}
-        paddingBottom="xs"
-        rating={3}
-        {...props}
-    />
-
-  </>
+    <>
+        <StarRating
+            paddingBottom="xs"
+            rating={3}
+            {...props}
+        />
+
+        <StarRating
+            layoutOption={"number"}
+            paddingBottom="xs"
+            rating={2.8}
+            {...props}
+        />
+
+        <StarRating
+            layoutOption={"number"}
+            paddingBottom="xs"
+            rating={3}
+            {...props}
+        />
+
+        <StarRating
+            layoutOption={"onestar"}
+            paddingBottom="xs"
+            rating={1}
+            {...props}
+        />
+    </>
 )
 
 export default StarRatingHide

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_interactive.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import StarRating from '../_star_rating'
+
+const StarRatingInteractive = (props) => (
+    <>
+        <StarRating
+            paddingBottom="xs"
+            variant="interactive"
+            {...props}
+        />
+    </>
+)
+
+export default StarRatingInteractive

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

@@ -9,3 +9,5 @@ export { default as StarRatingHide } from './_star_rating_hide.jsx'
 export { default as StarRatingNumberConfig } from './_star_rating_number_config.jsx'
 
 export { default as StarRatingSizeOptions } from './_star_rating_size_options.jsx'
+
+export { default as StarRatingInteractive } from './_star_rating_interactive.jsx'

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/docs/_text_input_default.jsx

@@ -92,9 +92,9 @@ const TextInputDefault = (props) => {
           {...props}
       />
 
-      {firstName !== '' && (
-        <React.Fragment>{`First name is: ${firstName}`}</React.Fragment>
-      )}
+      <If condition={firstName !== ''}>
+        {`First name is: ${firstName}`}
+      </If>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx

@@ -1,5 +1,5 @@
 import React, {useState} from 'react'
-import { Textarea } from 'playbook-ui'
+import { Textarea } from '../..'
 
 const TextareaError = (props) => {
   const [value, setValue] = useState('default value text')

data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.jsx

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

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx

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

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React, { useState } from 'react'
-import { Toggle } from 'playbook-ui'
+import { Toggle } from '../..'
 
 const ToggleCustom = () => {
   const [choice, setChoice] = useState(false)

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React, { useState } from 'react'
-import { Caption, Title, Toggle } from 'playbook-ui'
+import { Caption, Title, Toggle } from '../..'
 
 const ToggleCustomRadio = () => {
   const [choice, setChoice] = useState('walk')

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React from 'react'
-import { Toggle } from 'playbook-ui'
+import { Toggle } from '../..'
 
 const ToggleDefault = () => {
   return (

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React from 'react'
-import { Toggle } from 'playbook-ui'
+import { Toggle } from '../..'
 
 const ToggleDisabled= () => {
   return (

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React, { useState } from 'react'
-import { Caption, Title, Toggle } from 'playbook-ui'
+import { Caption, Title, Toggle } from '../..'
 
 const ToggleName = () => {
   const [choice, setChoice] = useState(false)

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React from 'react'
-import { Tooltip, Flex, FlexItem } from 'playbook-ui';
+import { Tooltip, Flex, FlexItem } from '../..';
 
 const TooltipDefaultReact = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React from 'react'
-import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
+import { Button, Tooltip, Flex, FlexItem } from '../..';
 
 const TooltipDelay = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React from 'react'
-import { Tooltip, Button, Flex } from 'playbook-ui'
+import { Tooltip, Button, Flex } from '../..'
 
 const TooltipIcon = (props) => {
   return (

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React from 'react'
-import { Tooltip, Button, Flex, FlexItem } from 'playbook-ui';
+import { Tooltip, Button, Flex, FlexItem } from '../..';
 
 const TooltipInteraction = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React from 'react'
-import { Tooltip, Flex, CircleIconButton } from 'playbook-ui'
+import { Tooltip, Flex, CircleIconButton } from '../..'
 
 const TooltipMargin = (props) => {
   return (

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React, { useState } from 'react'
-import {  Button, Body, Flex, FlexItem, Tooltip } from 'playbook-ui'
+import {  Button, Body, Flex, FlexItem, Tooltip } from '../..'
 
 const TooltipShowTooltipReact = (props) => {
   const [showTooltip, setShowTooltip] = useState(true);

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React from 'react'
-import { Typeahead } from 'playbook-ui'
+import { Typeahead } from '../..'
 
 /**
  *

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.jsx

@@ -1,5 +1,7 @@
+// @flow
+
 import React from 'react'
-import { Typeahead } from 'playbook-ui'
+import { Typeahead } from '../..'
 
 const options = [
   { label: 'Jardim', value: 'Portuguese' },

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 
 import {
   Button,
-} from 'playbook-ui'
+} from '../..'
 
 import Typeahead from '../_typeahead'
 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx

@@ -1,3 +1,5 @@
+// @flow
+
 import React from 'react'
 
 import Typeahead from '../_typeahead'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx

@@ -1,3 +1,5 @@
+// @flow
+
 import React, { useState, useEffect } from 'react'
 
 import Typeahead from '../_typeahead'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.jsx

@@ -1,3 +1,5 @@
+// @flow
+
 import React from 'react'
 
 import Typeahead from '../_typeahead'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx

@@ -1,3 +1,5 @@
+// @flow
+
 import React from 'react'
 
 import Typeahead from '../_typeahead'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx

@@ -1,8 +1,9 @@
 /* eslint-disable react/no-danger */
 /* eslint-disable react/no-multi-comp */
+/* @flow */
 
 import React, { useState } from 'react'
-import { components } from 'react-select'
+import { components, OptionProps } from 'react-select'
 
 import {
   Avatar,
@@ -11,7 +12,7 @@ import {
   FlexItem,
   Title,
   Typeahead,
-} from 'playbook-ui'
+} from '../..'
 
 const USERS = [
   {
@@ -41,7 +42,7 @@ const TypeaheadWithHighlight = (props) => {
 
   const formatOptionLabel = ({name, territory, title}, {inputValue}) => {
 
-    const highlighted = (text) => {
+    const highlighted = (text: string) => {
       if (!inputValue.length) return text
       return text.replace(
         new RegExp(inputValue, 'gi'),
@@ -69,7 +70,7 @@ const TypeaheadWithHighlight = (props) => {
   }
 
   const customComponents = {
-    Option: (highlightProps) => (
+    Option: (highlightProps: OptionProps) => (
       <components.Option {...highlightProps}/>
     ),
     SingleValue: ({ ...props }) => (

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx

@@ -1,5 +1,7 @@
+/* @flow */
+
 import React from 'react'
-import { Typeahead } from 'playbook-ui'
+import { Typeahead } from '../..'
 
 const options = [
   { label: 'Windows', value: '#FFA500' },

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx

@@ -1,10 +1,12 @@
+/* @flow */
+
 import React, { useState } from 'react'
 
 import {
   Caption,
   Typeahead,
   User,
-} from 'playbook-ui'
+} from '../..'
 
 /**
  *
@@ -60,25 +62,26 @@ const TypeaheadWithPillsAsync = (props) => {
 
   return (
     <>
-      {users && users.length > 0 && (
-        <React.Fragment>
-          <Caption
-              marginBottom="xs"
-              text="State (Users)"
+      <If condition={users && users.length > 0}>
+        <Caption
+            marginBottom="xs"
+            text="State (Users)"
+            {...props}
+        />
+        <For
+            each="user"
+            of={users}
+        >
+          <User
+              align="left"
+              key={user.value}
+              marginBottom="md"
+              name={user.label}
+              orientation="horizontal"
               {...props}
           />
-          {users.map((user) => (
-            <User
-                align="left"
-                key={user.value}
-                marginBottom="md"
-                name={user.label}
-                orientation="horizontal"
-                {...props}
-            />
-          ))}
-        </React.Fragment>
-      )}
+        </For>
+      </If>
       <Typeahead
           async
           getOptionLabel={(option) => option.name}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx

@@ -1,10 +1,12 @@
+/* @flow */
+
 import React, { useState } from 'react'
 
 import {
   Caption,
   Typeahead,
   User,
-} from 'playbook-ui'
+} from '../..'
 
 /**
  *
@@ -15,6 +17,13 @@ import {
  * @summary - for doc example purposes only
  */
 
+type UserProps = {
+  imageUrl?: String,
+  label?: String,
+  territory?: String,
+  type?: String,
+}
+
 const filterResults = (results) =>
   results.items.map((result) => {
     return {
@@ -54,30 +63,28 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
 
   return (
     <>
-      {users && users.length > 0 && (
-        <React.Fragment>
-          <Caption
-              marginBottom="xs"
-              text="State (Users)"
+      <If condition={users && users.length > 0}>
+        <Caption
+            marginBottom="xs"
+            text="State (Users)"
+            {...props}
+        />
+        <For
+            each="user"
+            of={users}
+        >
+          <User
+              align="left"
+              avatar
+              avatarUrl={user.imageUrl}
+              key={user.value}
+              marginBottom="md"
+              name={user.label}
+              orientation="horizontal"
               {...props}
           />
-          <For
-              each="user"
-              of={users}
-          >
-            <User
-                align="left"
-                avatar
-                avatarUrl={user.imageUrl}
-                key={user.value}
-                marginBottom="md"
-                name={user.label}
-                orientation="horizontal"
-                {...props}
-            />
-          </For>
-        </React.Fragment>
-      )}
+        </For>
+      </If>
       <Typeahead
           async
           isMulti
@@ -86,7 +93,7 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
           onChange={handleOnChange}
           onMultiValueClick={handleOnMultiValueClick}
           placeholder="type the name of a Github user"
-          valueComponent={(props) => (
+          valueComponent={(props: UserProps) => (
             <User
                 avatar
                 avatarUrl={props.imageUrl}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx

@@ -1,10 +1,12 @@
+/* @flow */
+
 import React, { useState } from 'react'
 
 import {
   Caption,
   Typeahead,
   User,
-} from 'playbook-ui'
+} from '../..'
 
 /**
  *
@@ -61,27 +63,28 @@ const TypeaheadWithPillsAsyncUsers = (props) => {
 
   return (
     <>
-      {users && users.length > 0 && (
-        <React.Fragment>
-          <Caption
-              marginBottom="xs"
-              text="State (Users)"
+      <If condition={users && users.length > 0}>
+        <Caption
+            marginBottom="xs"
+            text="State (Users)"
+            {...props}
+        />
+        <For
+            each="user"
+            of={users}
+        >
+          <User
+              align="left"
+              avatar
+              avatarUrl={user.imageUrl}
+              key={user.value}
+              marginBottom="md"
+              name={user.label}
+              orientation="horizontal"
               {...props}
           />
-          {users.map((user) => (
-            <User
-                align="left"
-                avatar
-                avatarUrl={user.imageUrl}
-                key={user.value}
-                marginBottom="md"
-                name={user.label}
-                orientation="horizontal"
-                {...props}
-            />
-          ))}
-        </React.Fragment>
-      )}
+        </For>
+      </If>
       <Typeahead
           async
           isMulti

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Caption, Contact, Flex, Icon, User } from "playbook-ui"
+import { Caption, Contact, Flex, Icon, User } from "../.."
 
 const MentorSubtitle = (
   <Flex>

data/app/pb_kits/playbook/pb_user/docs/_user_default.jsx

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

data/app/pb_kits/playbook/pb_user/docs/_user_size.jsx

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

data/app/pb_kits/playbook/pb_user/docs/_user_subtitle.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { User } from "playbook-ui"
+import { User } from "../../"
 
 const UserSubtitle = (props) => {
   return (

data/app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx

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

data/app/pb_kits/playbook/pb_user/docs/_user_vertical_size.jsx

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

data/app/pb_kits/playbook/pb_user/docs/_user_with_territory.jsx

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

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Walkthrough } from 'playbook-ui'
+import { Button, Walkthrough } from '../../'
 
 const WalkthroughContinuous = (props) => {
   const [state, setState] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Walkthrough } from 'playbook-ui'
+import { Button, Walkthrough } from '../../'
 
 const WalkthroughDefault = (props) => {
   const [state, setState] = useState({