playbook_ui_docs 13.32.0.pre.alpha.PLAY14143297 → 13.32.0.pre.alpha.play1416movealiaslogic3239

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 '../..'
 
 /**
  *
@@ -45,6 +47,8 @@ const promiseOptions = (inputValue) =>
 
 const TypeaheadWithPillsAsync = (props) => {
   const [users, setUsers] = useState([])
+  const handleOnChange = (value) => setUsers(formatUsers(value))
+  const formatValue = (users) => formatUsers(users)
   const formatUsers = (users) => {
     const results = () => (users.map((user) => {
       if (Object.keys(user)[0] === 'name' || Object.keys(user)[1] === 'id'){
@@ -55,30 +59,29 @@ const TypeaheadWithPillsAsync = (props) => {
     }))
     return results()
   }
-  const handleOnChange = (value) => setUsers(formatUsers(value))
-  const formatValue = (users) => formatUsers(users)
 
   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({

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 'playbook-ui'
+import { Button, Walkthrough } from '../../'
 
 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 'playbook-ui'
+import { Button, Walkthrough } from '../../'
 
 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 'playbook-ui'
+import { Button, Walkthrough } from '../../'
 
 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 'playbook-ui'
+import { Button, Walkthrough } from '../../'
 
 const WalkthroughStyled = (props) => {
   const [state, setState] = useState({

data/dist/app/components/playbook/pb_docs/advanced_table_mock_data.json

@@ -0,0 +1,278 @@
+[
+  {
+    "year": "2021",
+    "quarter": null,
+    "month": null,
+    "day": null,
+    "newEnrollments": "20",
+    "scheduledMeetings": "10",
+    "attendanceRate": "51%",
+    "completedClasses": "3",
+    "classCompletionRate": "33%",
+    "graduatedStudents": "19",
+    "children": [
+      {
+        "year": "2021",
+        "quarter": "Q1",
+        "month": null,
+        "day": null,
+        "newEnrollments": "2",
+        "scheduledMeetings": "35",
+        "attendanceRate": "32%",
+        "completedClasses": "15",
+        "classCompletionRate": "52%",
+        "graduatedStudents": "36",
+        "children": [
+          {
+            "year": "2021",
+            "quarter": "Q1",
+            "month": "January",
+            "day": null,
+            "newEnrollments": "16",
+            "scheduledMeetings": "20",
+            "attendanceRate": "11%",
+            "completedClasses": "13",
+            "classCompletionRate": "47%",
+            "graduatedStudents": "28",
+            "children": [
+              {
+                "year": "2021",
+                "quarter": "Q1",
+                "month": "January",
+                "day": "10",
+                "newEnrollments": "34",
+                "scheduledMeetings": "28",
+                "attendanceRate": "97%",
+                "completedClasses": "20",
+                "classCompletionRate": "15%",
+                "graduatedStudents": "17"
+              },
+              {
+                "year": "2021",
+                "quarter": "Q1",
+                "month": "January",
+                "day": "20",
+                "newEnrollments": "43",
+                "scheduledMeetings": "23",
+                "attendanceRate": "66%",
+                "completedClasses": "26",
+                "classCompletionRate": "47%",
+                "graduatedStudents": "9"
+              }
+            ]
+          },
+          {
+            "year": "2021",
+            "quarter": "Q1",
+            "month": "February",
+            "day": null,
+            "newEnrollments": "20",
+            "scheduledMeetings": "41",
+            "attendanceRate": "95%",
+            "completedClasses": "26",
+            "classCompletionRate": "83%",
+            "graduatedStudents": "43",
+            "children": [
+              {
+                "year": "2021",
+                "quarter": "Q1",
+                "month": "February",
+                "day": "15",
+                "newEnrollments": "19",
+                "scheduledMeetings": "35",
+                "attendanceRate": "69%",
+                "completedClasses": "8",
+                "classCompletionRate": "75%",
+                "graduatedStudents": "23"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "year": "2022",
+    "quarter": null,
+    "month": null,
+    "day": null,
+    "newEnrollments": "25",
+    "scheduledMeetings": "17",
+    "attendanceRate": "75%",
+    "completedClasses": "5",
+    "classCompletionRate": "45%",
+    "graduatedStudents": "32",
+    "children": [
+      {
+        "year": "2022",
+        "quarter": "Q1",
+        "month": null,
+        "day": null,
+        "newEnrollments": "2",
+        "scheduledMeetings": "35",
+        "attendanceRate": "32%",
+        "completedClasses": "15",
+        "classCompletionRate": "52%",
+        "graduatedStudents": "36",
+        "children": [
+          {
+            "year": "2022",
+            "quarter": "Q1",
+            "month": "January",
+            "day": null,
+            "newEnrollments": "16",
+            "scheduledMeetings": "20",
+            "attendanceRate": "11%",
+            "completedClasses": "13",
+            "classCompletionRate": "47%",
+            "graduatedStudents": "28",
+            "children": [
+              {
+                "year": "2022",
+                "quarter": "Q1",
+                "month": "January",
+                "day": "15",
+                "newEnrollments": "34",
+                "scheduledMeetings": "28",
+                "attendanceRate": "97%",
+                "completedClasses": "20",
+                "classCompletionRate": "15%",
+                "graduatedStudents": "17"
+              },
+              {
+                "year": "2022",
+                "quarter": "Q1",
+                "month": "January",
+                "day": "25",
+                "newEnrollments": "43",
+                "scheduledMeetings": "23",
+                "attendanceRate": "66%",
+                "completedClasses": "26",
+                "classCompletionRate": "47%",
+                "graduatedStudents": "9"
+              }
+            ]
+          },
+          {
+            "year": "2022",
+            "quarter": "Q1",
+            "month": "May",
+            "day": null,
+            "newEnrollments": "20",
+            "scheduledMeetings": "41",
+            "attendanceRate": "95%",
+            "completedClasses": "26",
+            "classCompletionRate": "83%",
+            "graduatedStudents": "43",
+            "children": [
+              {
+                "year": "2022",
+                "quarter": "Q1",
+                "month": "May",
+                "day": "2",
+                "newEnrollments": "19",
+                "scheduledMeetings": "35",
+                "attendanceRate": "69%",
+                "completedClasses": "8",
+                "classCompletionRate": "75%",
+                "graduatedStudents": "23"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "year": "2023",
+    "quarter": null,
+    "month": null,
+    "day": null,
+    "newEnrollments": "10",
+    "scheduledMeetings": "15",
+    "attendanceRate": "65%",
+    "completedClasses": "4",
+    "classCompletionRate": "49%",
+    "graduatedStudents": "29",
+    "children": [
+      {
+        "year": "2023",
+        "quarter": "Q1",
+        "month": null,
+        "day": null,
+        "newEnrollments": "2",
+        "scheduledMeetings": "35",
+        "attendanceRate": "32%",
+        "completedClasses": "15",
+        "classCompletionRate": "52%",
+        "graduatedStudents": "36",
+        "children": [
+          {
+            "year": "2023",
+            "quarter": "Q1",
+            "month": "March",
+            "day": null,
+            "newEnrollments": "16",
+            "scheduledMeetings": "20",
+            "attendanceRate": "11%",
+            "completedClasses": "13",
+            "classCompletionRate": "47%",
+            "graduatedStudents": "28",
+            "children": [
+              {
+                "year": "2023",
+                "quarter": "Q1",
+                "month": "March",
+                "day": "10",
+                "newEnrollments": "34",
+                "scheduledMeetings": "28",
+                "attendanceRate": "97%",
+                "completedClasses": "20",
+                "classCompletionRate": "15%",
+                "graduatedStudents": "17"
+              },
+              {
+                "year": "2023",
+                "quarter": "Q1",
+                "month": "March",
+                "day": "11",
+                "newEnrollments": "43",
+                "scheduledMeetings": "23",
+                "attendanceRate": "66%",
+                "completedClasses": "26",
+                "classCompletionRate": "47%",
+                "graduatedStudents": "9"
+              }
+            ]
+          },
+          {
+            "year": "2023",
+            "quarter": "Q1",
+            "month": "April",
+            "day": null,
+            "newEnrollments": "20",
+            "scheduledMeetings": "41",
+            "attendanceRate": "95%",
+            "completedClasses": "26",
+            "classCompletionRate": "83%",
+            "graduatedStudents": "43",
+            "children": [
+              {
+                "year": "2023",
+                "quarter": "Q1",
+                "month": "April",
+                "day": "15",
+                "newEnrollments": "19",
+                "scheduledMeetings": "35",
+                "attendanceRate": "69%",
+                "completedClasses": "8",
+                "classCompletionRate": "75%",
+                "graduatedStudents": "23"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+]