playbook_ui_docs 13.33.1.pre.alpha.PLAY14143340 → 13.33.1.pre.alpha.play1407statvaluekitinconsistencies3352

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2b8f0b0dc58e459bc198e51dc977b93551ff2b1b05950cb6f7e218fec8355065
-  data.tar.gz: f48734886c91157e7dd2fac0189e191bf733e8a3675e51a37065e6748d301564
+  metadata.gz: c98d9e6cdbbf5f596390c0846d44fcc9af043e78a24771ef699814c861d21f19
+  data.tar.gz: '023108a3e34fc4d2d09cf817ab1f2bb11da8406dace8f9a77bf063b57836bd75'
 SHA512:
-  metadata.gz: b0ab3b3fcb07d63d14bb777006661697d4ca7d13abfb2bb5cfcfd02db674ce1db959cb0d73b1bed9579a8c04d735530599b57c9c3c618629967c10b085250fcf
-  data.tar.gz: ef14bf1135505e7e202def1d3ac516b24916b6e180e7b11ba92e478ebed7e9472475784a60b244fa23fc5995a86805e27df932eb480525ff11a3d5ec5a2d09bb
+  metadata.gz: f914c3c4190709624ec7c0e9cca6144f4d494a465c7faaa5b84bc8715606e15b7ac81037ff94afaf54a419348dd49671aab074be8c7e0f630253cfd27bbfe19e
+  data.tar.gz: ef08b5ca6a969a39e15e1cf839d815d4d5f9ac5183a65e431d87c373d90f10317a4b30898fc25c124c8e7fc7031bf8ba4da8f0752effad2451f193804b18e08a

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import { AdvancedTable } from "../../"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableCollapsibleTrail = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import { AdvancedTable } from "../../"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableDefault = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { AdvancedTable } from "playbook-ui"
+import { AdvancedTable } from "../../"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableExpandedControl = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import { AdvancedTable } from "../.."
 import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading"
 
 const AdvancedTableInlineRowLoading = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
-import { AdvancedTable } from "playbook-ui"
-import { Button } from "playbook-ui"
+import { AdvancedTable } from "../../"
+import { Button } from "../../"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableLoading = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import { AdvancedTable } from "../.."
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableSort = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { AdvancedTable } from "playbook-ui"
+import { AdvancedTable } from "../.."
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableSortControl = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import { AdvancedTable } from "../.."
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableSubrowHeaders = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import { AdvancedTable } from "../../"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableTableOptions = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import { AdvancedTable } from "../../"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableTableProps = (props) => {

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Avatar } from 'playbook-ui'
+import { Avatar } from '../..'
 
 const AvatarBadgeComponentOverlay = () => {
     return (

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Avatar } from 'playbook-ui'
+import { Avatar } from '../..'
 
 const AvatarCircleIconComponentOverlay = () => {
     return (

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Avatar } from 'playbook-ui'
+import { Avatar } from '../../'
 
 const AvatarDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Avatar } from 'playbook-ui'
+import { Avatar } from '../../'
 
 const AvatarDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Avatar } from 'playbook-ui'
+import { Avatar } from '../../'
 
 const AvatarNoImage = (props) => {
   return (

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Avatar } from 'playbook-ui'
+import { Avatar } from '../../'
 
 const AvatarStatus = (props) => {
   return (

data/app/pb_kits/playbook/pb_background/docs/_background_category.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Background } from 'playbook-ui'
-import { Flex } from 'playbook-ui'
+import { Background } from '../..'
+import { Flex } from '../..'
 
 const BackgroundCategory = (props) => (
   <Flex

data/app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Background } from 'playbook-ui'
+import { Background } from '../..'
 
 const BackgroundGradient = (props) => (
   <Background

data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
-import { Background } from 'playbook-ui'
-import { Card, Flex, FlexItem, Select, Title } from 'playbook-ui'
+import { Background } from '../..'
+import { Card, Flex, FlexItem, Select, Title } from '../..'
 
 const BackgroundImage = (props) => {
   const [transition, setTransition] = useState('')

data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Background } from 'playbook-ui'
+import { Background } from '../..'
 
 const BackgroundLight = (props) => (
   <Background

data/app/pb_kits/playbook/pb_background/docs/_background_size.jsx

@@ -1,5 +1,5 @@
 import React, { Fragment as F } from 'react'
-import { Background } from 'playbook-ui'
+import { Background } from '../..'
 
 const BackgroundSize = (props) => (
   <F>

data/app/pb_kits/playbook/pb_background/docs/_background_status.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Background } from 'playbook-ui'
-import { Flex } from 'playbook-ui'
+import { Background } from '../..'
+import { Flex } from '../..'
 
 const BackgroundStatus = (props) => (
 <Flex

data/app/pb_kits/playbook/pb_background/docs/_background_status_subtle.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Background } from 'playbook-ui'
-import { Flex } from 'playbook-ui'
+import { Background } from '../..'
+import { Flex } from '../..'
 
 const BackgroundStatusSubtle = (props) => (
 <Flex

data/app/pb_kits/playbook/pb_background/docs/_background_white.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Background } from 'playbook-ui'
+import { Background } from '../..'
 
 const BackgroundWhite = (props) => (
   <div>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { BarGraph } from 'playbook-ui'
+import { BarGraph } from '../..'
 
 const chartData = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { BarGraph } from 'playbook-ui'
+import { BarGraph } from '../..'
 
 const chartData = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { BarGraph, Title } from 'playbook-ui'
+import { BarGraph, Title } from '../..'
 
 const chartData = [{
   name: 'Installation',

data/app/pb_kits/playbook/pb_body/docs/_body_articles.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body } from 'playbook-ui'
+import { Body } from '../..'
 
 const BodyBlock = (props) => {
     return (

data/app/pb_kits/playbook/pb_body/docs/_body_block.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body } from 'playbook-ui'
+import { Body } from '../../'
 
 const BodyBlock = (props) => {
   return (

data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body } from 'playbook-ui'
+import { Body } from '../../'
 
 const BodyLight = (props) => {
   return (

data/app/pb_kits/playbook/pb_body/docs/_body_styled.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body } from 'playbook-ui'
+import { Body } from '../..'
 
 const BodyStyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import BreadCrumbs from '../_bread_crumbs'
-import { Icon, Title } from 'playbook-ui'
+import { Icon, Title } from '../../'
 import BreadCrumbItem from '../_bread_crumb_item'
 
 const Link = (props) => <BreadCrumbItem {...props} />

data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from 'playbook-ui'
+import { Button } from '../../'
 
 const ButtonAccessibility = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, Pill } from "playbook-ui";
+import { Button, Pill } from "../../";
 
 const ButtonBlockContent = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Button } from "playbook-ui"
+import { Button } from "../../"
 
 const ButtonDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_form.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from 'playbook-ui'
+import { Button } from '../../'
 
 const ButtonForm = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from 'playbook-ui'
+import { Button } from '../../'
 
 const ButtonFullWidth = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_hover.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Button } from "playbook-ui"
+import { Button } from "../../"
 
 const ButtonHover = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from 'playbook-ui'
+import { Button } from '../../'
 
 const ButtonIconOptions = (props) => (
     <div>

data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from 'playbook-ui'
+import { Button } from '../../'
 
 const ButtonLink = (props) => (
   <>

data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from 'playbook-ui'
+import { Button } from '../../'
 
 const ButtonLoading = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.jsx

@@ -1,5 +1,5 @@
 import React, {useState} from "react"
-import { Button } from "playbook-ui"
+import { Button } from "../../"
 
 const ButtonReaction = (props) => {
 

data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from 'playbook-ui'
+import { Button } from '../../'
 
 const ButtonSize = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, ButtonToolbar } from 'playbook-ui'
+import { Button, ButtonToolbar } from '../..'
 
 const ButtonToolbarDefault = (props) => (
   <div className="pb--doc-demo-row">

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, ButtonToolbar } from 'playbook-ui'
+import { Button, ButtonToolbar } from '../..'
 
 const ButtonToolbarSecondary = (props) => (
   <div className="pb--doc-demo-row">

data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Caption } from 'playbook-ui'
+import { Caption } from '../../'
 
 const CaptionBlock = (props) => {
   return (

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Caption } from 'playbook-ui'
+import { Caption } from '../../'
 
 const CaptionColors = (props) => {
   return (

data/app/pb_kits/playbook/pb_caption/docs/_caption_light.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Caption } from 'playbook-ui'
+import { Caption } from '../../'
 
 const CaptionLight = (props) => {
   return (

data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Title from '../../pb_title/_title'
-import { Body } from 'playbook-ui'
+import { Body } from '../../'
 import Card from '../_card'
 
 const CardBackground = (props) => {

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Checkbox } from 'playbook-ui'
+import { Checkbox } from '../..'
 
 const CheckboxError = (props) => {
   return (

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Checkbox, Table } from 'playbook-ui'
+import { Checkbox, Table } from '../..'
 
 const CheckboxIndeterminate = (props) => {
   const [checkboxes, setCheckboxes] = useState([

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import CircleChart from '../_circle_chart'
 
-import {Title} from 'playbook-ui'
+import {Title} from '../..'
 
 const data = [
   {

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { CircleIconButton } from 'playbook-ui'
+import { CircleIconButton } from '../..'
 
 const CircleIconButtonClick = (props) => (
   <div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Collapsible } from 'playbook-ui'
+import { Collapsible } from '../..'
 
 const CollapsibleColor = (props) => (
   <div>
@@ -19,7 +19,7 @@ const CollapsibleColor = (props) => (
       </Collapsible.Content>
     </Collapsible>
     <Collapsible
-        iconColor='light'
+        iconColor='lighter'
         marginBottom="xs"
     >
       <Collapsible.Main>
@@ -34,7 +34,7 @@ const CollapsibleColor = (props) => (
       </Collapsible.Content>
     </Collapsible>
     <Collapsible
-        iconColor='lighter'
+        iconColor='light'
         marginBottom="xs"
     >
       <Collapsible.Main>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx

@@ -1,72 +1,71 @@
 import React from 'react'
-import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from 'playbook-ui'
+import PropTypes from 'prop-types'
+import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from '../..'
 
-const CollapsibleCustomMain = () => {
+const CollapsibleCustomMain = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)
 
   return (
-  <>
-    <Collapsible
-        collapsed={isCollapsed}
-    >
-          <Background 
-              backgroundColor="white" 
-              cursor="pointer"
-              htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
-              position="sticky" 
-              top="0" 
-          >
-              <Flex 
-                  align="center" 
-                  gap="sm"
-                  justify="between" 
-              >
-                <Title 
-                    size={4} 
-                    text="Custom Main Section" 
-                />
-              </Flex>
-          </Background>
-      <Collapsible.Content padding="none">
+    <>
+      <Collapsible collapsed={isCollapsed}>
+        <Flex
+            align="center"
+            cursor="pointer"
+            gap="sm"
+            htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
+            justify="between"
+            position="sticky"
+            top="0"
+        >
+          <Title 
+              dark={props.dark} 
+              size={4} 
+              text="Custom Main Section" />
+        </Flex>
+        <Collapsible.Content 
+            padding="none">
           <div>
-          <List>
+            <List>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
             </List>
           </div>
       </Collapsible.Content>
     </Collapsible>
-   
   </>
   )
 }
 
+CollapsibleCustomMain.propTypes = {
+  dark: PropTypes.bool,
+}
+
 export default CollapsibleCustomMain

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("collapsible", props: { name: "default-example" }) do %>
-    <%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
+    <%= pb_rails("flex", props: { position: "sticky", top: "0", cursor: "pointer", data: { "collapsible-main": "true", align: "center", gap: "sm", justify: "between" } }) do %>
       <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
         <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
      <% end %>
@@ -16,4 +16,5 @@
             <% end %>
       <% end %>
     <% end %>
-    
+
+