playbook_ui 13.32.0.pre.alpha.PLAY14103236 → 13.32.0.pre.alpha.PLAY14143251

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { cleanup, render, screen, fireEvent, waitFor } from "../utilities/test-utils";
-import { Button, Tooltip } from "..";
+import { Button, Tooltip } from "playbook-ui";
 
 function TooltipTest() {
   const text = "this is a text",

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

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

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

@@ -1,7 +1,7 @@
 // @flow
 
 import React from 'react'
-import { Typeahead } from '../..'
+import { Typeahead } from 'playbook-ui'
 
 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 '../..'
+} from 'playbook-ui'
 
 import Typeahead from '../_typeahead'
 

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

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

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

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

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

@@ -6,7 +6,7 @@ import {
   Caption,
   Typeahead,
   User,
-} from '../..'
+} from 'playbook-ui'
 
 /**
  *
@@ -62,26 +62,25 @@ const TypeaheadWithPillsAsync = (props) => {
 
   return (
     <>
-      <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"
+      {users && users.length > 0 && (
+        <React.Fragment>
+          <Caption
+              marginBottom="xs"
+              text="State (Users)"
               {...props}
           />
-        </For>
-      </If>
+          {users.map((user) => (
+            <User
+                align="left"
+                key={user.value}
+                marginBottom="md"
+                name={user.label}
+                orientation="horizontal"
+                {...props}
+            />
+          ))}
+        </React.Fragment>
+      )}
       <Typeahead
           async
           getOptionLabel={(option) => option.name}

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

@@ -6,7 +6,7 @@ import {
   Caption,
   Typeahead,
   User,
-} from '../..'
+} from 'playbook-ui'
 
 /**
  *
@@ -17,13 +17,6 @@ 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 {
@@ -63,28 +56,30 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
 
   return (
     <>
-      <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"
+      {users && users.length > 0 && (
+        <React.Fragment>
+          <Caption
+              marginBottom="xs"
+              text="State (Users)"
               {...props}
           />
-        </For>
-      </If>
+          <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>
+      )}
       <Typeahead
           async
           isMulti
@@ -93,7 +88,7 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
           onChange={handleOnChange}
           onMultiValueClick={handleOnMultiValueClick}
           placeholder="type the name of a Github user"
-          valueComponent={(props: UserProps) => (
+          valueComponent={(props) => (
             <User
                 avatar
                 avatarUrl={props.imageUrl}

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

@@ -6,7 +6,7 @@ import {
   Caption,
   Typeahead,
   User,
-} from '../..'
+} from 'playbook-ui'
 
 /**
  *
@@ -63,28 +63,27 @@ const TypeaheadWithPillsAsyncUsers = (props) => {
 
   return (
     <>
-      <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"
+      {users && users.length > 0 && (
+        <React.Fragment>
+          <Caption
+              marginBottom="xs"
+              text="State (Users)"
               {...props}
           />
-        </For>
-      </If>
+          {users.map((user) => (
+            <User
+                align="left"
+                avatar
+                avatarUrl={user.imageUrl}
+                key={user.value}
+                marginBottom="md"
+                name={user.label}
+                orientation="horizontal"
+                {...props}
+            />
+          ))}
+        </React.Fragment>
+      )}
       <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 "../.."
+import { Caption, Contact, Flex, Icon, User } from "playbook-ui"
 
 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 '../../'
+import { User } from 'playbook-ui'
 
 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 '../../'
+import { User } from 'playbook-ui'
 
 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 "../../"
+import { User } from "playbook-ui"
 
 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 '../../'
+import { User } from 'playbook-ui'
 
 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 '../../'
+import { User } from 'playbook-ui'
 
 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 '../../'
+import { User } from 'playbook-ui'
 
 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 '../../'
+import { Button, Walkthrough } from 'playbook-ui'
 
 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 '../../'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughDefault = (props) => {
   const [state, setState] = useState({

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

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

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

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

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

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

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

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

data/app/pb_kits/playbook/pb_walkthrough/walkthrough.test.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-vars */
 import { ensureAccessible, render, renderKit, screen } from '../utilities/test-utils'
 import React from 'react'
-import { Walkthrough } from '../'
+import { Walkthrough } from 'playbook-ui'
 
 /* See these resources for more testing info:
   - https://github.com/testing-library/jest-dom#usage for useage and examples

data/app/pb_kits/playbook/tokens/exports/_border_radius.module.scss

@@ -0,0 +1,10 @@
+@import "../border_radius";
+
+:export {
+  @mixin export_border_radius($border_radius_list) {
+    @each $name, $size in $border_radius_list {
+      #{$name}: $size;
+    }
+  }
+  @include export_border_radius($border_radius);
+}

data/app/pb_kits/playbook/tokens/exports/_colors.module.scss

@@ -0,0 +1,26 @@
+@import "../colors";
+
+:export {
+  @mixin export-colors($colors-list) {
+    @each $name, $color in $colors-list {
+      #{$name}: $color;
+    }
+  }
+  @include export-colors($product_colors);
+  @include export-colors($status_colors);
+  @include export-colors($data_colors);
+  @include export-colors($shadow_colors);
+  @include export-colors($colors);
+  @include export-colors($interface_colors);
+  @include export-colors($main_colors);
+  @include export-colors($background_colors);
+  @include export-colors($card_colors);
+  @include export-colors($active_colors);
+  @include export-colors($action_colors);
+  @include export-colors($hover_colors);
+  @include export-colors($border_colors);
+  @include export-colors($text_colors);
+  @include export-colors($category_colors);
+  gradient_start: $gradient_start;
+  gradient_end: $gradient_end;
+}

data/app/pb_kits/playbook/tokens/exports/_line_height.module.scss

@@ -0,0 +1,10 @@
+@import "../line_height";
+
+:export {
+  @mixin export_line_height($line_height_list) {
+    @each $name, $settings in $line_height_list {
+      #{$name}: $settings;
+    }
+  }
+  @include export_line_height($line_height);
+}

data/app/pb_kits/playbook/tokens/exports/_opacity.module.scss

@@ -0,0 +1,10 @@
+@import "../opacity";
+
+:export {
+  @mixin export_opacity($opacity_list) {
+    @each $name, $settings in $opacity_list {
+      #{$name}: $settings;
+    }
+  }
+  @include export_opacity($opacity);
+}

data/app/pb_kits/playbook/tokens/exports/_positioning.module.scss

@@ -0,0 +1,10 @@
+@import "../positioning";
+
+:export {
+  @mixin export_z_index($z_index_list) {
+    @each $name, $settings in $z_index_list {
+      #{$name}: $settings;
+    }
+  }
+  @include export_z_index($z_index);
+}

data/app/pb_kits/playbook/tokens/exports/_scale.module.scss

@@ -0,0 +1,13 @@
+@import "../scale";
+
+:export {
+  @mixin export-hover-scale-classes($scales-list) {
+    @each $name, $scale in $scales-list {
+      .hover_#{$name}:hover {
+        transform: $scale;
+      }
+    }
+  }
+  
+  @include export-hover-scale-classes($scales);
+}

data/app/pb_kits/playbook/tokens/exports/_screen_sizes.module.scss

@@ -0,0 +1,10 @@
+@import "../screen_sizes";
+
+:export {
+  @mixin export_breakpoints($breakpoints_list) {
+    @each $name, $settings in $breakpoints_list {
+      #{$name}: $settings;
+    }
+  }
+  @include export_breakpoints($breakpoints);
+}

data/app/pb_kits/playbook/tokens/exports/_shadows.module.scss

@@ -0,0 +1,10 @@
+@import "../shadows";
+
+:export {
+  @mixin export_shadows($shadows_list) {
+    @each $name, $settings in $shadows_list {
+      #{$name}: $settings;
+    }
+  }
+  @include export_shadows($box_shadows);
+}

data/app/pb_kits/playbook/tokens/exports/_spacing.module.scss

@@ -0,0 +1,10 @@
+@import "../spacing";
+
+:export {
+  @mixin export_spacing($spacing_list) {
+    @each $name, $size in $spacing_list {
+      #{$name}: $size;
+    }
+  }
+  @include export_spacing($spaces);
+}

data/app/pb_kits/playbook/tokens/exports/_typography.module.scss

@@ -0,0 +1,24 @@
+@import "../typography";
+
+:export {
+  font_family_base: $font_family_base;
+  text_jumbo: $text_jumbo;
+  text_largest: $text_largest;
+  text_larger: $text_larger;
+  text_large: $text_large;
+  text_base: $text_base;
+  text_default: $text_default;
+  text_normal: $text_normal;
+  text_medium: $text_medium;
+  text_small: $text_small;
+  text_smaller: $text_smaller;
+  text_smallest: $text_smallest;
+  heading_1: $heading_1;
+  heading_2: $heading_2;
+  heading_3: $heading_3;
+  heading_4: $heading_4;
+  lighter: $lighter;
+  light: $light;
+  bold: $bold;
+  regular: $regular;
+}