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

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

@@ -5,7 +5,7 @@ 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 +27,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 +57,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 +69,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 = props.async ? AsyncCreateableSelect : 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_user/_user.jsx

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

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

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

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

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