playbook_ui 9.19.0 → 10.0.0.pre.alphafonts

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

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

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

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

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

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

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

@@ -1,11 +1,16 @@
 /* @flow */
 import React, { forwardRef } from 'react'
 import classnames from 'classnames'
-import { Body, Caption, Card, Flex, Icon } from '../'
-import { globalProps } from '../utilities/globalProps.js'
 
+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'
+
 type TextInputProps = {
   aria?: object,
   className: string,

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -2,10 +2,16 @@
 
 import React, { forwardRef, useEffect, useRef } from 'react'
 import classnames from 'classnames'
-import { Body, Caption, Flex, FlexItem } from '../'
-import type { InputCallback } from '../types.js'
-import { globalProps } from '../utilities/globalProps.js'
+
 import PbTextarea 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'
 
 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,5 +1,6 @@
 import React, { useState } from 'react'
-import { Textarea } from '../../'
+
+import Textarea from '../_textarea'
 
 const TextareaCharacterCounter = (props) => {
   const [value1, setValue1] = useState('Counting characters!')

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>