playbook_ui 9.19.0.pre.alpha.pre.fonts2 → 9.19.0.pre.alphafonts

data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
-
-import Table from '../_table'
-import TableRow from '../_table_row'
+import { Table, TableRow } from '../../'
 
 const TableSideHighlight = (props) => {
   return (

data/app/pb_kits/playbook/pb_table/docs/_table_single_line.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import Table from '../_table'
+import { Table } from '../../'
 
 const TableSingleLine = (props) => {
   return (

data/app/pb_kits/playbook/pb_table/docs/_table_sm.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import Table from '../_table'
+import { Table } from '../../'
 
 const TableSm = (props) => {
   return (

data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
-
-import Table from '../_table'
-import Button from '../../pb_button/_button'
+import { Table } from '../..'
+import { Button } from '../../'
 
 const TableOneAction = (props) => {
   return (

data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
-
-import Table from '../_table'
-import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
+import { Table } from '../..'
+import { CircleIconButton } from '../../'
 
 const TableTwoPlusActions = (props) => {
   return (

data/app/pb_kits/playbook/pb_text_input/_text_input.jsx

@@ -1,15 +1,10 @@
 /* @flow */
 import React, { forwardRef } from 'react'
 import classnames from 'classnames'
-
+import { Body, Caption, Card, Flex, Icon } from '../'
 import { globalProps } from '../utilities/globalProps.js'
-import { buildAriaProps, buildDataProps } from '../utilities/props'
 
-import Flex from '../pb_flex/_flex'
-import Card from '../pb_card/_card'
-import Caption from '../pb_caption/_caption'
-import Body from '../pb_body/_body'
-import Icon from '../pb_icon/_icon'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
 
 type TextInputProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -1,5 +1,5 @@
 @import "../pb_textarea/textarea_mixin";
-@import "../tokens/titles";
+@import "../pb_title/title_mixin";
 @import "../tokens/colors";
 
 

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-
-import TextInput from '../_text_input'
+import { TextInput } from '../../'
 
 const TextInputAddOn = (props) => {
   const [defaultInput, setDefaultInput] = useState('')

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-
-import TextInput from '../_text_input'
+import { TextInput } from '../../'
 
 const TextInputCustom = (props) => {
   const [name, setName] = useState('')

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
-
-import Caption from '../../pb_caption/_caption'
-import TextInput from '../../pb_text_input/_text_input'
-import Title from '../../pb_title/_title'
+import {
+  Caption,
+  TextInput,
+  Title,
+} from '../../'
 
 const TextInputDefault = (props) => {
   const handleOnChangeFirstName = ({ target }) => {

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import TextInput from '../_text_input'
+import { TextInput } from '../../'
 
 class TextInputDisabled extends React.Component {
   render(props) {

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-
-import TextInput from '../_text_input'
+import { TextInput } from '../../'
 
 const TextInputInline = (props) => {
   const [value, setValue] = useState('Inline Input')

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx

@@ -2,16 +2,10 @@
 
 import React, { forwardRef, useEffect, useRef } from 'react'
 import classnames from 'classnames'
-
-import PbTextarea from './'
+import { Body, Caption, Flex, FlexItem } from '../'
 import type { InputCallback } from '../types.js'
-
-import { globalProps } from '../utilities/globalProps'
-
-import Body from '../pb_body/_body'
-import Caption from '../pb_caption/_caption'
-import Flex from '../pb_flex/_flex'
-import FlexItem from '../pb_flex/_flex_item'
+import { globalProps } from '../utilities/globalProps.js'
+import PbTextarea from './'
 
 type TextareaProps = {
   characterCount?: string,

data/app/pb_kits/playbook/pb_textarea/_textarea.scss

@@ -1,11 +1,11 @@
 @import "../pb_body/body_mixins";
 @import "./textarea_mixin";
+@import "../pb_title/title_mixin";
 @import "../tokens/spacing";
-@import "../tokens/titles";
 
 [class^=pb_textarea_kit] {
   margin-bottom: $space_sm;
-
+  
   [class^=pb_caption_kit] {
     margin-bottom: $space_xs;
     display: block;
@@ -28,7 +28,7 @@
   .pb_text_area_kit:hover {
     background-color: rgba($focus_input_light,$opacity_5);
   }
-
+  
   &.resize_both > textarea {
     resize: both;
     overflow: auto;

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

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-
-import Textarea from '../_textarea'
+import { Textarea } from '../../'
 
 const TextareaCharacterCounter = (props) => {
   const [value1, setValue1] = useState('Counting characters!')

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

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

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

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

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

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

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

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

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

@@ -2,13 +2,9 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
-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'
+import { Body, Caption, Icon } from '../'
+import DateTime from '../pb_kit/dateTime.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 type TimeRangeInlineProps = {
   className?: string,

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

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

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

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

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

@@ -2,10 +2,8 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-
 import TimelineItem from './_item.jsx'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 type TimelineProps = {
   aria?: object,

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1,40 @@
-@import "../tokens/titles";
+@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;
+}
+
+

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -4,8 +4,7 @@ import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
-import AsyncCreateableSelect from 'react-select/async-creatable'
-import { get, isString, uniqueId } from 'lodash'
+import { get } from 'lodash'
 import { globalProps } from '../utilities/globalProps.js'
 import classnames from 'classnames'
 
@@ -27,24 +26,23 @@ import { noop } from '../utilities/props'
  * @prop {string} label - the text for the optional typeahead input label
  */
 
-type TypeaheadProps = {
-  id?: string,
+type Props = {
   async?: boolean,
   createable?: boolean,
   dark?: boolean,
   label?: string,
-  loadOptions?: string,
-  getOptionLabel?: string | (() => any),
-  getOptionValue?: string | (() => any),
+  loadOptions?: noop | string,
+  getOptionLabel?: () => any,
+  getOptionValue?: () => any,
   name?: string,
 }
 
 /**
  * @constant {React.ReactComponent} Typeahead
- * @param {TypeaheadProps} props - props as described at https://react-select.com/props
+ * @param {Props} props - props as described at https://react-select.com/props
  */
 
-const Typeahead = ({ loadOptions = noop, getOptionLabel, id, getOptionValue, createable, async, ...props }: TypeaheadProps) => {
+const Typeahead = (props: Props) => {
   const selectProps = {
     cacheOptions: true,
     components: {
@@ -58,11 +56,8 @@ const Typeahead = ({ loadOptions = noop, getOptionLabel, id, getOptionValue, cre
       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: id || uniqueId(),
+    id: 'react-select-input',
     inline: false,
     isClearable: true,
     isSearchable: true,
@@ -73,13 +68,14 @@ const Typeahead = ({ loadOptions = noop, getOptionLabel, id, getOptionValue, cre
     ...props,
   }
 
-  const Tag = (
-    createable
-      ? (async ? AsyncCreateableSelect : CreateableSelect)
-      : (async ? AsyncSelect : Select)
-  )
+  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 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,8 +3,10 @@
 import React from 'react'
 import { components } from 'react-select'
 
-import Flex from '../../pb_flex/_flex'
-import TextInput from '../../pb_text_input/_text_input'
+import {
+  Flex,
+  TextInput,
+} from '../..'
 
 type Props = {
   selectProps: any,

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

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

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

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

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

@@ -1,11 +1,9 @@
 /* @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_default.jsx

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

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

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

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

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

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

@@ -17,4 +17,3 @@ 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,4 +6,3 @@ 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'