playbook_ui 9.18.0 → 9.19.0.pre.alpha.pre.fonts2

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

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Textarea } from '../../'
+
+import Textarea from '../_textarea'
 
 const TextareaCustom = (props) => {
   return (

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

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Textarea } from '../../'
+
+import Textarea from '../_textarea'
 
 const TextareaDefault = (props) => {
   return (

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

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Textarea } from '../../'
+
+import Textarea from '../_textarea'
 
 const TextareaResize = (props) => {
   return (

data/app/pb_kits/playbook/pb_time/_time.jsx

@@ -7,7 +7,9 @@ import DateTime from '../pb_kit/dateTime.js'
 import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
-import { Body, Caption, Icon } from '../'
+import Body from '../pb_body/_body'
+import Caption from '../pb_caption/_caption'
+import Icon from '../pb_icon/_icon'
 
 type TimeProps = {
   align?: 'left' | 'center' | 'right',

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx

@@ -2,9 +2,13 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { Body, Caption, Icon } from '../'
-import DateTime from '../pb_kit/dateTime.js'
-import { globalProps } from '../utilities/globalProps.js'
+
+import DateTime from '../pb_kit/dateTime'
+import { globalProps } from '../utilities/globalProps'
+
+import Body from '../pb_body/_body'
+import Caption from '../pb_caption/_caption'
+import Icon from '../pb_icon/_icon'
 
 type TimeRangeInlineProps = {
   className?: string,

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx

@@ -5,9 +5,10 @@ import classnames from 'classnames'
 
 import DateTime from '../pb_kit/dateTime.js'
 import { buildCss, buildDataProps } from '../utilities/props'
-import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
+import { deprecatedProps, globalProps } from '../utilities/globalProps'
 
-import { Body, Caption } from '../'
+import Body from '../pb_body/_body'
+import Caption from '../pb_caption/_caption'
 
 type TimeStackedProps = {
   align?: 'left' | 'center' | 'right',

data/app/pb_kits/playbook/pb_timeline/_item.jsx

@@ -2,8 +2,11 @@
 
 import React from 'react'
 import classnames from 'classnames'
+
 import { buildCss } from '../utilities/props'
-import { DateStacked, IconCircle } from '..'
+
+import DateStacked from '../pb_date_stacked/_date_stacked'
+import IconCircle from '../pb_icon_circle/_icon_circle'
 
 type ItemProps = {
   className?: string,

data/app/pb_kits/playbook/pb_timeline/_timeline.jsx

@@ -2,9 +2,11 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import TimelineItem from './_item.jsx'
+
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
+import TimelineItem from './_item.jsx'
+
 type TimelineProps = {
   aria?: object,
   children?: array<React.ReactChild>,

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_default.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
-import Timeline from '../_timeline.jsx'
-import { Body, TitleDetail } from '../../'
+
+import Timeline from '../_timeline'
+import Body from '../../pb_body/_body'
+import TitleDetail from '../../pb_title_detail/_title_detail'
 
 const TimelineDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
-import Timeline from '../_timeline.jsx'
-import { Body, TitleDetail } from '../../'
+
+import Timeline from '../_timeline'
+import Body from '../../pb_body/_body'
+import TitleDetail from '../../pb_title_detail/_title_detail'
 
 const TimelineVertical = (props) => (
   <div>

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import Timeline from '../_timeline.jsx'
-import { TitleDetail } from '../../'
+
+import Timeline from '../_timeline'
+import TitleDetail from '../../pb_title_detail/_title_detail'
 
 const TimelineWithDate = (props) => (
   <div>

data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx

@@ -2,10 +2,12 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import DateTime from '../pb_kit/dateTime.js'
+
+import DateTime from '../pb_kit/dateTime'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { Caption } from '../'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
+
+import Caption from '../pb_caption/_caption'
 
 type TimestampProps = {
   align?: "left" | "center" | "right",

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -1,4 +1,4 @@
-@import "title_mixin";
+@import "../tokens/titles";
 @import "../tokens/colors";
 
 [class^=pb_title_kit]{

data/app/pb_kits/playbook/pb_title/_title_mixin.scss

@@ -1,40 +1 @@
-@import "../tokens/colors";
-@import "../tokens/typography";
-@import "../tokens/line_height";
-
-@mixin pb_title(
-    $fontSize: $heading_1,
-    $fontWeight: $lighter,
-    $lineHeight: $lh_tighter
-){
-  font-size: $fontSize;
-  letter-spacing: $lspace_tight;
-  font-weight: $fontWeight;
-  color: $text_lt_default;
-  margin: 0;
-  line-height: $lineHeight;
-  font-family: $font_family_base;
-}
-
-@mixin pb_title_1 {
-  @include pb_title($heading_1);
-  letter-spacing: -0.03em;
-}
-
-@mixin pb_title_2 {
-  @include pb_title($heading_2, $lighter, 0.96);
-}
-
-@mixin pb_title_3 {
-  @include pb_title($heading_3);
-}
-
-@mixin pb_title_4 {
-  @include pb_title($heading_4, $bolder);
-}
-
-@mixin pb_title_dark {
-  color: $text_dk_default;
-}
-
-
+@import "../tokens/titles";

data/app/pb_kits/playbook/pb_title/docs/_title_light.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Title } from '../../'
+
+import Title from '../_title'
 
 const TitleLight = (props) => {
   return (

data/app/pb_kits/playbook/pb_title/docs/_title_variants.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Title } from '../../'
+
+import Title from '../_title'
 
 const TitleVariants = (props) => {
   return (

data/app/pb_kits/playbook/pb_title_count/_title_count.jsx

@@ -4,9 +4,10 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
 
-import { Body, Title } from '../'
-import { globalProps } from '../utilities/globalProps.js'
+import Body from '../pb_body/_body'
+import Title from '../pb_title/_title'
 
 type TitleCountProps = {
   align: "center" | "left" | "right",

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_align.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { TitleCount } from '../../'
+
+import TitleCount from '../_title_count'
 
 const TitleCountAlign = (props) => {
   return (

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { TitleCount } from '../../'
+
+import TitleCount from '../_title_count'
 
 const TitleCountDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx

@@ -2,12 +2,13 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
-
-import { Body, Title } from '../'
 
+import { globalProps } from '../utilities/globalProps'
 import { buildCss, buildDataProps } from '../utilities/props'
 
+import Body from '../pb_body/_body'
+import Title from '../pb_title/_title'
+
 type TitleDetailProps = {
   align?: "left" | "center" | "right",
   className?: string,

data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { TitleDetail } from '../../'
+
+import TitleDetail from '../_title_detail'
 
 const TitleDetailDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx

@@ -4,7 +4,8 @@ import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
-import { get } from 'lodash'
+import AsyncCreateableSelect from 'react-select/async-creatable'
+import { get, isString, uniqueId } from 'lodash'
 import { globalProps } from '../utilities/globalProps.js'
 import classnames from 'classnames'
 
@@ -26,23 +27,24 @@ import { noop } from '../utilities/props'
  * @prop {string} label - the text for the optional typeahead input label
  */
 
-type Props = {
+type TypeaheadProps = {
+  id?: string,
   async?: boolean,
   createable?: boolean,
   dark?: boolean,
   label?: string,
-  loadOptions?: noop | string,
-  getOptionLabel?: () => any,
-  getOptionValue?: () => any,
+  loadOptions?: string,
+  getOptionLabel?: string | (() => any),
+  getOptionValue?: string | (() => any),
   name?: string,
 }
 
 /**
  * @constant {React.ReactComponent} Typeahead
- * @param {Props} props - props as described at https://react-select.com/props
+ * @param {TypeaheadProps} props - props as described at https://react-select.com/props
  */
 
-const Typeahead = (props: Props) => {
+const Typeahead = ({ loadOptions = noop, getOptionLabel, id, getOptionValue, createable, async, ...props }: TypeaheadProps) => {
   const selectProps = {
     cacheOptions: true,
     components: {
@@ -56,8 +58,11 @@ const Typeahead = (props: Props) => {
       Placeholder,
       ValueContainer,
     },
+    loadOptions: isString(loadOptions) ? get(window, loadOptions) : loadOptions,
+    getOptionLabel: isString(getOptionLabel) ? get(window, getOptionLabel) : getOptionLabel,
+    getOptionValue: isString(getOptionValue) ? get(window, getOptionValue) : getOptionValue,
     defaultOptions: true,
-    id: 'react-select-input',
+    id: id || uniqueId(),
     inline: false,
     isClearable: true,
     isSearchable: true,
@@ -68,14 +73,13 @@ const Typeahead = (props: Props) => {
     ...props,
   }
 
-  if (typeof(props.loadOptions) === 'string') selectProps.loadOptions = get(window, props.loadOptions)
-  if (typeof(props.getOptionLabel) === 'string') selectProps.getOptionLabel = get(window, props.getOptionLabel)
-  if (typeof(props.getOptionValue) === 'string') selectProps.getOptionValue = get(window, props.getOptionValue)
-
-  let Tag = props.async ? AsyncSelect : Select
-  if (props.createable) Tag = CreateableSelect
+  const Tag = (
+    createable
+      ? (async ? AsyncCreateableSelect : CreateableSelect)
+      : (async ? AsyncSelect : Select)
+  )
 
-  const handleOnChange = (data, { action, option, removedValue }) => {
+  const handleOnChange = (_data, { action, option, removedValue }) => {
     if (action === 'select-option') {
       if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
       const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option })

data/app/pb_kits/playbook/pb_typeahead/components/Control.jsx

@@ -3,10 +3,8 @@
 import React from 'react'
 import { components } from 'react-select'
 
-import {
-  Flex,
-  TextInput,
-} from '../..'
+import Flex from '../../pb_flex/_flex'
+import TextInput from '../../pb_text_input/_text_input'
 
 type Props = {
   selectProps: any,

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx

@@ -3,7 +3,8 @@
 import React from 'react'
 import { components } from 'react-select'
 
-import { Badge, FormPill } from '../../'
+import Badge from '../../pb_badge/_badge'
+import FormPill from '../../pb_form_pill/_form_pill'
 
 type Props = {
   data: object,

data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx

@@ -3,9 +3,7 @@
 import React from 'react'
 import { components } from 'react-select'
 
-import {
-  User,
-} from '../../'
+import User from '../../pb_user/_user'
 
 const Option = (props: any) => {
   const {

data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.jsx

@@ -1,9 +1,11 @@
 /* @flow */
 
 import React from 'react'
-import { Flex, Icon } from '../../'
 import { components } from 'react-select'
 
+import Flex from '../../pb_flex/_flex'
+import Icon from '../../pb_icon/_icon'
+
 const Placeholder = (props: any) => (
   <>
     <Flex

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

@@ -0,0 +1,58 @@
+// @flow
+
+import React from 'react'
+import { Typeahead } from '../..'
+
+/**
+ *
+ * @const filterResults
+ * @ignore
+ * @returns {[Object]} - a custom mapping of objects, minimally containing
+ * `value` and `label` among other possible fields
+ * @summary - for doc example purposes only
+ */
+
+const filterResults = (results) =>
+  results.items.map((result) => {
+    return {
+      label: result.login,
+      value: result.id,
+    }
+  })
+
+/**
+*
+* @const promiseOptions
+* @ignore
+* @returns {Promise} - fetch API data results from Typeahead input text
+* @see - https://react-select.com/home#async
+* @summary - for doc example purposes only
+*/
+
+const promiseOptions = (inputValue) =>
+  new Promise((resolve) => {
+    if (inputValue) {
+      fetch(`https://api.github.com/search/users?q=${inputValue}`)
+        .then((response) => response.json())
+        .then((results) => {
+          resolve(results.items ? filterResults(results) : [])
+        })
+    } else {
+      resolve([])
+    }
+  })
+
+const TypeaheadAsyncCreateable = (props) => {
+  return (
+    <Typeahead
+        async
+        createable
+        isMulti
+        label="Existing or User Created Options"
+        loadOptions={promiseOptions}
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadAsyncCreateable

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

@@ -1,7 +1,8 @@
 // @flow
 
 import React from 'react'
-import { Typeahead } from '../../'
+
+import Typeahead from '../_typeahead'
 
 const options = [
   { label: 'Orange', value: '#FFA500' },

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

@@ -1,7 +1,8 @@
 // @flow
 
 import React from 'react'
-import { Typeahead } from '../../'
+
+import Typeahead from '../_typeahead'
 
 const synths = [
   { label: 'Oberheim', value: 'OBXa' },

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

@@ -1,7 +1,8 @@
 // @flow
 
 import React from 'react'
-import { Typeahead } from '../../'
+
+import Typeahead from '../_typeahead'
 
 const labels = [
   { label: 'Verve', value: '1956' },

data/app/pb_kits/playbook/pb_typeahead/docs/example.yml

@@ -17,3 +17,4 @@ examples:
     - typeahead_inline: Inline
     - typeahead_multi_kit: Multi Kit Options
     - typeahead_createable: Createable
+    - typeahead_async_createable: Createable (+ Async Data)

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

@@ -6,3 +6,4 @@ export { default as TypeaheadWithPillsAsyncCustomOptions } from './_typeahead_wi
 export { default as TypeaheadInline } from './_typeahead_inline.jsx'
 export { default as TypeaheadMultiKit } from './_typeahead_multi_kit.jsx'
 export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
+export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'

data/app/pb_kits/playbook/pb_user/_user.jsx

@@ -2,9 +2,13 @@
 
 import React from 'react'
 import classnames from 'classnames'
+
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { Avatar, Body, Title } from '../'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
+
+import Avatar from '../pb_avatar/_avatar'
+import Body from '../pb_body/_body'
+import Title from '../pb_title/_title'
 
 type UserProps = {
   align?: "left" | "center" | "right",

data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { UserBadge } from '../../'
+
+import UserBadge from '../_user_badge'
 
 const UserBadgeDefault = () => {
   return (

data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { UserBadge } from '../../'
+
+import UserBadge from '../_user_badge'
 
 const UserBadgeSize = () => {
   return (

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx

@@ -5,7 +5,8 @@ import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
-import { Caption, Title } from '../'
+import Caption from '../pb_caption/_caption'
+import Title from '../pb_title/_title'
 
 import DateTime from '../pb_kit/dateTime.js'
 
@@ -22,8 +23,8 @@ type WeekdayStackedProps = {
   id?: string,
 }
 
-const getDayOfWeek = (date, compact) => {
-  const dateTime = new DateTime({ value: date })
+const getDayOfWeek = (value, compact) => {
+  const dateTime = new DateTime({ value })
   if (compact) {
     return dateTime.toDayAbbr()
   } else {
@@ -31,8 +32,8 @@ const getDayOfWeek = (date, compact) => {
   }
 }
 
-const getFormattedDate = (date, variant) => {
-  const dateTime = new DateTime({ value: date })
+const getFormattedDate = (value, variant) => {
+  const dateTime = new DateTime({ value })
   if (variant === 'day_only') {
     return dateTime.toDay()
   } else {

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import {
-  WeekdayStacked,
-} from '../../'
+
+import WeekdayStacked from '../_weekday_stacked'
 
 const WeekdayStackedCompact = (props) => (
   <div>

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_default.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import {
-  WeekdayStacked,
-} from '../../'
+
+import WeekdayStacked from '../_weekday_stacked'
 
 const WeekdayStackedDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_variant.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import {
-  WeekdayStacked,
-} from '../../'
+
+import WeekdayStacked from '../_weekday_stacked'
 
 const WeekdayStackedVariant = (props) => (
   <div>