playbook_ui 13.33.1.pre.alpha.PLAY14143340 → 13.33.1.pre.alpha.play1407statvaluekitinconsistencies3352

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/app/pb_kits/playbook/pb_walkthrough/walkthrough.test.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-vars */
 import { ensureAccessible, render, renderKit, screen } from '../utilities/test-utils'
 import React from 'react'
-import { Walkthrough } from 'playbook-ui'
+import { Walkthrough } from '../'
 
 /* See these resources for more testing info:
   - https://github.com/testing-library/jest-dom#usage for useage and examples

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

@@ -1,3 +1,5 @@
+/* @flow */
+
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps'
@@ -6,14 +8,13 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
 import Caption from '../pb_caption/_caption'
 import Title from '../pb_title/_title'
 import DateTime from '../pb_kit/dateTime';
-import { GenericObject } from '../types'
 
 type WeekdayStackedProps = {
   align?: "left" | "center" | "right",
   aria?: {[key:string]:string },
   className?: string,
   dark?: boolean,
-  data?: GenericObject,
+  data?: object,
   date: Date,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,

data/app/pb_kits/playbook/playbook-doc.js

@@ -0,0 +1,215 @@
+/* eslint-disable no-unused-vars */
+// !!! IMPORTANT: This file is autogenerated. Please do not edit.!!!
+import WebpackerReact from 'webpacker-react'
+
+// KIT EXAMPLES
+import 'pb_form/pb_form_validation'
+import * as AdvancedTable from 'pb_advanced_table/docs'
+import * as Avatar from 'pb_avatar/docs'
+import * as AvatarActionButton from 'pb_avatar_action_button/docs'
+import * as Background from 'pb_background/docs'
+import * as Badge from 'pb_badge/docs'
+import * as BarGraphDocs from 'pb_bar_graph/docs'
+import * as Body from 'pb_body/docs'
+import * as BreadCrumbs from 'pb_bread_crumbs/docs'
+import * as Button from 'pb_button/docs'
+import * as ButtonToolbar from 'pb_button_toolbar/docs'
+import * as Caption from 'pb_caption/docs'
+import * as Card from 'pb_card/docs'
+import * as Checkbox from 'pb_checkbox/docs'
+import * as CircleChart from 'pb_circle_chart/docs'
+import * as CircleIconButton from 'pb_circle_icon_button/docs'
+import * as Collapsible from 'pb_collapsible/docs'
+import * as Contact from 'pb_contact/docs'
+import * as Currency from 'pb_currency/docs'
+import * as DashboardValue from 'pb_dashboard_value/docs'
+import * as Date from 'pb_date/docs'
+import * as DatePicker from 'pb_date_picker/docs'
+import * as DateRangeInline from 'pb_date_range_inline/docs'
+import * as DateRangeStacked from 'pb_date_range_stacked/docs'
+import * as DateStacked from 'pb_date_stacked/docs'
+import * as DateTime from 'pb_date_time/docs'
+import * as DateTimeStacked from 'pb_date_time_stacked/docs'
+import * as DateYearStacked from 'pb_date_year_stacked/docs'
+import * as Detail from 'pb_detail/docs'
+import * as Dialog from 'pb_dialog/docs'
+import * as DistributionBarDocs from 'pb_distribution_bar/docs'
+import * as Draggable from 'pb_draggable/docs'
+import * as Dropdown from 'pb_dropdown/docs'
+import * as FileUpload from 'pb_file_upload/docs'
+import * as Filter from 'pb_filter/docs'
+import * as FixedConfirmationToast from 'pb_fixed_confirmation_toast/docs'
+import * as Flex from 'pb_flex/docs'
+import * as FormGroup from 'pb_form_group/docs'
+import * as FormPill from 'pb_form_pill/docs'
+import * as Gauge from 'pb_gauge/docs'
+import * as Hashtag from 'pb_hashtag/docs'
+import * as Highlight from 'pb_highlight/docs'
+import * as HomeAddressStreet from 'pb_home_address_street/docs'
+import * as Icon from 'pb_icon/docs'
+import * as IconCircle from 'pb_icon_circle/docs'
+import * as IconStatValue from 'pb_icon_stat_value/docs'
+import * as IconValue from 'pb_icon_value/docs'
+import * as Image from 'pb_image/docs'
+import * as LabelPill from 'pb_label_pill/docs'
+import * as LabelValue from 'pb_label_value/docs'
+import * as Layout from 'pb_layout/docs'
+import * as LegendDocs from 'pb_legend/docs'
+import * as Lightbox from 'pb_lightbox/docs'
+import * as LineGraphDocs from 'pb_line_graph/docs'
+import * as List from 'pb_list/docs'
+import * as LoadingInline from 'pb_loading_inline/docs'
+import * as Map from 'pb_map/docs'
+import * as Message from 'pb_message/docs'
+import * as MultiLevelSelect from 'pb_multi_level_select/docs'
+import * as MultipleUsers from 'pb_multiple_users/docs'
+import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
+import * as Nav from 'pb_nav/docs'
+import * as OnlineStatus from 'pb_online_status/docs'
+import * as Overlay from 'pb_overlay/docs'
+import * as Passphrase from 'pb_passphrase/docs'
+import * as PbReactPopover from 'pb_popover/docs'
+import * as Person from 'pb_person/docs'
+import * as PersonContact from 'pb_person_contact/docs'
+import * as PhoneNumberInput from 'pb_phone_number_input/docs'
+import * as Pill from 'pb_pill/docs'
+import * as ProgressPills from 'pb_progress_pills/docs'
+import * as ProgressSimple from 'pb_progress_simple/docs'
+import * as ProgressStep from 'pb_progress_step/docs'
+import * as Radio from 'pb_radio/docs'
+import * as RichTextEditor from 'pb_rich_text_editor/docs'
+import * as SectionSeparator from 'pb_section_separator/docs'
+import * as Select from 'pb_select/docs'
+import * as SelectableCard from 'pb_selectable_card/docs'
+import * as SelectableCardIcon from 'pb_selectable_card_icon/docs'
+import * as SelectableIcon from 'pb_selectable_icon/docs'
+import * as SelectableList from 'pb_selectable_list/docs'
+import * as Source from 'pb_source/docs'
+import * as StarRating from 'pb_star_rating/docs'
+import * as StatChange from 'pb_stat_change/docs'
+import * as StatValue from 'pb_stat_value/docs'
+import * as Table from 'pb_table/docs'
+import * as TextInput from 'pb_text_input/docs'
+import * as Textarea from 'pb_textarea/docs'
+import * as Time from 'pb_time/docs'
+import * as TimeRangeInline from 'pb_time_range_inline/docs'
+import * as TimeStacked from 'pb_time_stacked/docs'
+import * as Timeline from 'pb_timeline/docs'
+import * as Timestamp from 'pb_timestamp/docs'
+import * as Title from 'pb_title/docs'
+import * as TitleCount from 'pb_title_count/docs'
+import * as TitleDetail from 'pb_title_detail/docs'
+import * as Toggle from 'pb_toggle/docs'
+import * as Tooltip from 'pb_tooltip/docs'
+import * as TreemapChart from 'pb_treemap_chart/docs'
+import * as Typeahead from 'pb_typeahead/docs'
+import * as User from 'pb_user/docs'
+import * as UserBadge from 'pb_user_badge/docs'
+import * as Walkthrough from 'pb_walkthrough/docs'
+import * as WeekdayStacked from 'pb_weekday_stacked/docs'
+
+WebpackerReact.registerComponents({
+  ...AdvancedTable,
+  ...Avatar,
+  ...AvatarActionButton,
+  ...Background,
+  ...Badge,
+  ...BarGraphDocs,
+  ...Body,
+  ...BreadCrumbs,
+  ...Button,
+  ...ButtonToolbar,
+  ...Caption,
+  ...Card,
+  ...Checkbox,
+  ...CircleChart,
+  ...CircleIconButton,
+  ...Collapsible,
+  ...Contact,
+  ...Currency,
+  ...DashboardValue,
+  ...Date,
+  ...DatePicker,
+  ...DateRangeInline,
+  ...DateRangeStacked,
+  ...DateStacked,
+  ...DateTime,
+  ...DateTimeStacked,
+  ...DateYearStacked,
+  ...Detail,
+  ...Dialog,
+  ...DistributionBarDocs,
+  ...Draggable,
+  ...Dropdown,
+  ...FileUpload,
+  ...Filter,
+  ...FixedConfirmationToast,
+  ...Flex,
+  ...FormGroup,
+  ...FormPill,
+  ...Gauge,
+  ...Hashtag,
+  ...Highlight,
+  ...HomeAddressStreet,
+  ...Icon,
+  ...IconCircle,
+  ...IconStatValue,
+  ...IconValue,
+  ...Image,
+  ...LabelPill,
+  ...LabelValue,
+  ...Layout,
+  ...LegendDocs,
+  ...Lightbox,
+  ...LineGraphDocs,
+  ...List,
+  ...LoadingInline,
+  ...Map,
+  ...Message,
+  ...MultiLevelSelect,
+  ...MultipleUsers,
+  ...MultipleUsersStacked,
+  ...Nav,
+  ...OnlineStatus,
+  ...Overlay,
+  ...Passphrase,
+  ...PbReactPopover,
+  ...Person,
+  ...PersonContact,
+  ...PhoneNumberInput,
+  ...Pill,
+  ...ProgressPills,
+  ...ProgressSimple,
+  ...ProgressStep,
+  ...Radio,
+  ...RichTextEditor,
+  ...SectionSeparator,
+  ...Select,
+  ...SelectableCard,
+  ...SelectableCardIcon,
+  ...SelectableIcon,
+  ...SelectableList,
+  ...Source,
+  ...StarRating,
+  ...StatChange,
+  ...StatValue,
+  ...Table,
+  ...TextInput,
+  ...Textarea,
+  ...Time,
+  ...TimeRangeInline,
+  ...TimeStacked,
+  ...Timeline,
+  ...Timestamp,
+  ...Title,
+  ...TitleCount,
+  ...TitleDetail,
+  ...Toggle,
+  ...Tooltip,
+  ...TreemapChart,
+  ...Typeahead,
+  ...User,
+  ...UserBadge,
+  ...Walkthrough,
+  ...WeekdayStacked,
+})

data/app/pb_kits/playbook/playbook-rails-react-bindings.js

@@ -0,0 +1,45 @@
+// React-Rendered Rails Kit Exports =====
+
+import WebpackerReact from 'webpacker-react'
+import ujs from 'webpacker-react/ujs'
+
+import BarGraph from './pb_bar_graph/_bar_graph'
+import CircleChart from './pb_circle_chart/_circle_chart'
+import Dialog from './pb_dialog/_dialog'
+import DialogBody from './pb_dialog/child_kits/_dialog_body'
+import DialogFooter from './pb_dialog/child_kits/_dialog_footer'
+import DialogHeader from './pb_dialog/child_kits/_dialog_header'
+import DistributionBar from './pb_distribution_bar/_distribution_bar'
+import Gauge from './pb_gauge/_gauge'
+import Legend from './pb_legend/_legend'
+import LineGraph from './pb_line_graph/_line_graph'
+import MultiLevelSelect from './pb_multi_level_select/_multi_level_select'
+import Passphrase from './pb_passphrase/_passphrase'
+import RichTextEditor from './pb_rich_text_editor/_rich_text_editor'
+import TreemapChart from './pb_treemap_chart/_treemap_chart'
+import Typeahead from './pb_typeahead/_typeahead'
+import PhoneNumberInput from './pb_phone_number_input/_phone_number_input'
+
+WebpackerReact.registerComponents({
+  BarGraph,
+  CircleChart,
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
+  DistributionBar,
+  MultiLevelSelect,
+  Legend,
+  LineGraph,
+  Passphrase,
+  RichTextEditor,
+  TreemapChart,
+  Typeahead,
+  Gauge,
+  PhoneNumberInput
+})
+
+ujs.setup(
+  () => WebpackerReact.mountComponents(),
+  () => WebpackerReact.unmountComponents()
+)

data/app/pb_kits/playbook/playbook-rails.js

@@ -0,0 +1,51 @@
+// Forms
+import './pb_form/pb_form_validation'
+
+// Date Picker
+import datePickerHelper from './pb_date_picker/date_picker_helper'
+window.datePickerHelper = datePickerHelper
+
+// Dialog
+import dialogHelper from './pb_dialog/dialogHelper'
+window.dialogHelper = dialogHelper
+
+// Lazy image loading
+import 'lazysizes'
+
+import PbCollapsible from './pb_collapsible'
+PbCollapsible.start()
+
+import PbPopover from './pb_popover'
+PbPopover.start()
+
+import PbTooltip from './pb_tooltip'
+PbTooltip.start()
+
+import PbFixedConfirmationToast from './pb_fixed_confirmation_toast'
+PbFixedConfirmationToast.start()
+
+import PbTypeahead from './pb_typeahead'
+PbTypeahead.start()
+
+import PbTable from './pb_table'
+PbTable.start()
+
+import PbTextarea from './pb_textarea'
+PbTextarea.start()
+
+import PbDropdown from './pb_dropdown'
+PbDropdown.start()
+
+import PbAdvancedTable from './pb_advanced_table'
+PbAdvancedTable.start()
+
+import PbNav from './pb_nav'
+PbNav.start()
+
+import PbStarRating from './pb_star_rating'
+PbStarRating.start()
+
+import 'flatpickr'
+
+// React-Rendered Rails Kits =====
+import './playbook-rails-react-bindings'

data/app/pb_kits/playbook/tokens/exports/{_colors.module.scss → _colors.scss}

@@ -3,7 +3,7 @@
 :export {
   @mixin export-colors($colors-list) {
     @each $name, $color in $colors-list {
-      #{"" + $name}: $color;
+      #{$name}: $color;
     }
   }
   @include export-colors($product_colors);

data/app/pb_kits/playbook/tokens/exports/exports.d.ts

@@ -1,2 +1 @@
-declare module "trix";
 declare module '*.scss';

data/app/pb_kits/playbook/utilities/_hover.scss

@@ -1,12 +1,12 @@
-@import "../tokens/exports/scale.module";
+@import "../tokens/exports/scale";
 
 @mixin hover-color-classes($colors-list) {
     @each $name, $color in $colors-list {
-      .hover_background_#{"" + $name}:hover {
+      .hover_background_#{$name}:hover {
         background-color: $color !important;
         transition: background-color $transition-speed ease;
       }
-      .hover_color_#{"" + $name}:hover {
+      .hover_color_#{$name}:hover {
         color: $color !important;
         transition: color $transition-speed ease;
       }
@@ -15,7 +15,7 @@
   
   @mixin hover-shadow-classes($shadows-list) {
     @each $name, $shadow in $shadows-list {
-      .hover_#{"" + $name}:hover {
+      .hover_#{$name}:hover {
         box-shadow: $shadow;
         transition: box-shadow $transition-speed ease;
       }
@@ -24,7 +24,7 @@
   
   @mixin hover-scale-classes($scales-list) {
     @each $name, $scale in $scales-list {
-      .hover_#{"" + $name}:hover {
+      .hover_#{$name}:hover {
         transform: $scale;
         transition: transform $transition-speed ease;
       }

data/app/pb_kits/playbook/utilities/_line_height.scss

@@ -1,4 +1,4 @@
-@import "../tokens/exports/line_height.module";
+@import "../tokens/exports/line_height";
 
 @mixin line-height-classes($line-height-list) {
   @each $name, $line-height in $line-height-list {

data/app/pb_kits/playbook/utilities/_shadow.scss

@@ -1,4 +1,4 @@
-@import "../tokens/exports/shadows.module";
+@import "../tokens/exports/shadows";
 
 @mixin shadow-classes($shadows-list) {
   @each $name, $shadow in $shadows-list {