playbook_ui 13.34.1.pre.alpha.PLAY14633399 → 13.34.1.pre.alpha.PLAY14703378

data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable react/no-multi-comp */
-
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
@@ -26,7 +24,7 @@ type WalkthroughProps = {
   disableOverlay?: boolean,
   disableOverlayClose?: boolean,
   disableScrolling?: boolean,
-  floaterProps?: Record<string, unknown>,
+  floaterProps?: object,
   hideBackButton?: boolean,
   hideCloseButton?: boolean,
   showProgress?: boolean,
@@ -60,92 +58,89 @@ type TooltipProps = {
     disableBeacon?: boolean,
   },
   skip?: boolean,
-  backProps?: Record<string, unknown>,
-  closeProps?: Record<string, unknown>,
-  primaryProps?: Record<string, unknown>,
-  skipProps?: Record<string, unknown>,
-  tooltipProps?: Record<string, unknown>,
+  backProps?: object,
+  closeProps?: object,
+  primaryProps?: object,
+  skipProps?: object,
+  tooltipProps?: object,
 }
 
-// eslint-disable-next-line react/display-name
 const Tooltip = React.forwardRef((props: TooltipProps) => (
-<div
+  <div
     className="pb_card_kit_border_none p_none"
     {...props.tooltipProps}
->
-  {props.step.title && <div>
-  <Flex
-      align="center"
-      justify="between"
-      padding="xs"
   >
-      <Title
+    {props.step.title && <div>
+      <Flex
+        align="center"
+        justify="between"
+        padding="xs"
+      >
+        <Title
           paddingLeft="xs"
           size={4}
-      >
-      {props.step.title}
-      </Title>
-      {props.skip && (
-      <Button
+        >
+          {props.step.title}
+        </Title>
+        {props.skip && (<Button
           {...props.skipProps}
           id="skip"
           text="Skip Tour"
           variant="link"
-      />
-      )}
-      <Button
+        />)}
+        <Button
           {...props.skipProps}
           id="skip"
           text="Skip Tour"
           variant="link"
-      />
-  </Flex>
-  <SectionSeparator />
-  </div>}
+        />
+      </Flex>
+      <SectionSeparator />
+    </div>}
 
-  <Flex padding="sm">{props.step.content}</Flex>
-  <SectionSeparator />
-  <Flex
+    <Flex padding="sm">{props.step.content}</Flex>
+    <SectionSeparator />
+    <Flex
       justify={props.index == 0 ? 'end' : 'between'}
       padding="xs"
-  >
+    >
 
-  {props.index > 0 && (
-      <Button
+      {props.index > 0 && (
+        <Button
           {...props.backProps}
           id="back"
           text="Back"
-      />
-  )}
+        />
+      )}
 
-  {props.continuous && !props.isLastStep &&
-      <Button
+      {props.continuous && !props.isLastStep &&
+        <Button
           {...props.primaryProps}
           id="next"
           text="Next"
-      />
-  }
+        />
+      }
 
-  {!props.continuous &&
-      <Button
+      {!props.continuous &&
+        <Button
           {...props.closeProps}
           id="close"
           text="Close"
-      />
-  }
+        />
+      }
 
-  {!((props.continuous && !props.isLastStep) || (!props.continuous)) &&
-      <Button
+      {!((props.continuous && !props.isLastStep) || (!props.continuous)) &&
+        <Button
           {...props.closeProps}
           id="close"
           text="Close"
-      />
-  }
-  </Flex>
-</div>
+        />
+      }
+    </Flex>
+  </div>
 )) as unknown as React.ForwardRefRenderFunction<HTMLDivElement, TooltipRenderProps>
 
-const Walkthrough = (props: WalkthroughProps): React.ReactElement => {
+const Walkthrough = (props: WalkthroughProps) => {
   const {
     aria = {},
     callback,
@@ -175,24 +170,24 @@ const Walkthrough = (props: WalkthroughProps): React.ReactElement => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classes}
+      id={id}
     >
       <Joyride
-          callback={callback}
-          continuous={continuous}
-          disableOverlay={disableOverlay}
-          disableScrolling
-          floaterProps={floaterProps}
-          run={run}
-          showSkipButton={showSkipButton}
-          steps={steps}
-          styles={styles}
-          tooltipComponent={Tooltip}
-          {...props}
+        callback={callback}
+        continuous={continuous}
+        disableOverlay={disableOverlay}
+        disableScrolling
+        floaterProps={floaterProps}
+        run={run}
+        showSkipButton={showSkipButton}
+        steps={steps}
+        styles={styles}
+        tooltipComponent={Tooltip}
+        {...props}
       />
     </div>
 

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,
@@ -38,7 +39,7 @@ const getFormattedDate = (value: Date, variant: "day_only" | "month_day" | "expa
   }
 }
 
-const WeekdayStacked = (props: WeekdayStackedProps): React.ReactElement => {
+const WeekdayStacked = (props: WeekdayStackedProps) => {
   const {
     align = 'left',
     aria = {},

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 {