playbook_ui 13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3370 → 13.34.0.pre.alpha.PLAY14143357

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

@@ -1,12 +1,10 @@
-/* @flow */
-
 import React, { useState } from 'react'
 
 import {
   Caption,
   Typeahead,
   User,
-} from '../..'
+} from 'playbook-ui'
 
 /**
  *
@@ -17,13 +15,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 +54,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 +86,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

@@ -1,12 +1,10 @@
-/* @flow */
-
 import React, { useState } from 'react'
 
 import {
   Caption,
   Typeahead,
   User,
-} from '../..'
+} from 'playbook-ui'
 
 /**
  *
@@ -63,28 +61,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/pb_weekday_stacked/_weekday_stacked.tsx

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps'
@@ -8,13 +6,14 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
 import Caption from '../pb_caption/_caption'
 import Title from '../pb_title/_title'
 import DateTime from '../pb_kit/dateTime';
+import { GenericObject } from '../types'
 
 type WeekdayStackedProps = {
   align?: "left" | "center" | "right",
   aria?: {[key:string]:string },
   className?: string,
   dark?: boolean,
-  data?: object,
+  data?: GenericObject,
   date: Date,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,

data/app/pb_kits/playbook/tokens/exports/{_colors.scss → _colors.module.scss}

@@ -3,7 +3,7 @@
 :export {
   @mixin export-colors($colors-list) {
     @each $name, $color in $colors-list {
-      #{$name}: $color;
+      #{"" + $name}: $color;
     }
   }
   @include export-colors($product_colors);

data/app/pb_kits/playbook/tokens/exports/exports.d.ts

@@ -1 +1,2 @@
+declare module "trix";
 declare module '*.scss';

data/app/pb_kits/playbook/utilities/_hover.scss

@@ -1,12 +1,12 @@
-@import "../tokens/exports/scale";
+@import "../tokens/exports/scale.module";
 
 @mixin hover-color-classes($colors-list) {
     @each $name, $color in $colors-list {
-      .hover_background_#{$name}:hover {
+      .hover_background_#{"" + $name}:hover {
         background-color: $color !important;
         transition: background-color $transition-speed ease;
       }
-      .hover_color_#{$name}:hover {
+      .hover_color_#{"" + $name}:hover {
         color: $color !important;
         transition: color $transition-speed ease;
       }
@@ -15,7 +15,7 @@
   
   @mixin hover-shadow-classes($shadows-list) {
     @each $name, $shadow in $shadows-list {
-      .hover_#{$name}:hover {
+      .hover_#{"" + $name}:hover {
         box-shadow: $shadow;
         transition: box-shadow $transition-speed ease;
       }
@@ -24,7 +24,7 @@
   
   @mixin hover-scale-classes($scales-list) {
     @each $name, $scale in $scales-list {
-      .hover_#{$name}:hover {
+      .hover_#{"" + $name}:hover {
         transform: $scale;
         transition: transform $transition-speed ease;
       }

data/app/pb_kits/playbook/utilities/_line_height.scss

@@ -1,4 +1,4 @@
-@import "../tokens/exports/line_height";
+@import "../tokens/exports/line_height.module";
 
 @mixin line-height-classes($line-height-list) {
   @each $name, $line-height in $line-height-list {

data/app/pb_kits/playbook/utilities/_shadow.scss

@@ -1,4 +1,4 @@
-@import "../tokens/exports/shadows";
+@import "../tokens/exports/shadows.module";
 
 @mixin shadow-classes($shadows-list) {
   @each $name, $shadow in $shadows-list {

data/app/pb_kits/playbook/utilities/globalPropNames.mjs

@@ -0,0 +1,50 @@
+export default [
+  "left",
+  "bottom",
+  "right",
+  "top",
+  "hover",
+  "zIndex",
+  "verticalAlign",
+  "truncate",
+  "textAlign",
+  "shadow",
+  "position",
+  "paddingRight",
+  "paddingLeft",
+  "paddingTop",
+  "paddingBottom",
+  "paddingX",
+  "paddingY",
+  "padding",
+  "break",
+  "default",
+  "overflowX",
+  "overflowY",
+  "overflow",
+  "order",
+  "numberSpacing",
+  "maxWidth",
+  "marginRight",
+  "marginLeft",
+  "marginTop",
+  "marginBottom",
+  "marginX",
+  "marginY",
+  "margin",
+  "lineHeight",
+  "justifySelf",
+  "justifyContent",
+  "flexWrap",
+  "flexShrink",
+  "flexGrow",
+  "flexDirection",
+  "flex",
+  "display",
+  "dark",
+  "cursor",
+  "borderRadius",
+  "alignSelf",
+  "alignItems",
+  "alignContent"
+];

data/app/pb_kits/playbook/utilities/text.ts

@@ -1,4 +1,6 @@
-import { filter, isEmpty } from 'lodash'
+import { filter } from 'lodash'
+
+const isEmpty = (value: string | unknown): boolean => value === ''
 
 const titleizedWord = (word: string): string => (
   word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()