playbook_ui 7.11.1 → 7.14.0.pre.alpha1

data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban_responsive.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { Caption, Card, Layout } from '../../'
 
-const LayoutKanbanResponsive = () => {
+const LayoutKanbanResponsive = (props) => {
   return (
     <div>
       <Layout
           layout="kanban"
           responsive
+          {...props}
       >
         <Layout.Body>
           <Caption>{'Queue'}</Caption>

data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import { Layout } from '../../'
 
-const LayoutSizes = () => {
+const LayoutSizes = (props) => {
   return (
     <div>
       <Layout
           collapse="xs"
           position="left"
           size="xs"
+          {...props}
       >
         <Layout.Side>
           {'Side'}
@@ -24,6 +25,7 @@ const LayoutSizes = () => {
           collapse="xs"
           position="left"
           size="sm"
+          {...props}
       >
         <Layout.Side>
           {'Side'}
@@ -40,6 +42,7 @@ const LayoutSizes = () => {
           collapse="xs"
           position="left"
           size="md"
+          {...props}
       >
         <Layout.Side>
           {'Side'}
@@ -56,6 +59,7 @@ const LayoutSizes = () => {
           collapse="xs"
           position="left"
           size="lg"
+          {...props}
       >
         <Layout.Side>
           {'Side'}
@@ -72,6 +76,7 @@ const LayoutSizes = () => {
           collapse="xs"
           position="left"
           size="xl"
+          {...props}
       >
         <Layout.Side>
           {'Side'}

data/app/pb_kits/playbook/pb_layout/docs/_layout_transparent.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Layout } from '../../'
 
-const LayoutTransparent = () => {
+const LayoutTransparent = (props) => {
   return (
     <div>
       <Layout
@@ -9,6 +9,7 @@ const LayoutTransparent = () => {
           position="left"
           size="xs"
           transparent
+          {...props}
       >
         <Layout.Side>
           {'Side'}

data/app/pb_kits/playbook/pb_layout/docs/example.yml

@@ -3,20 +3,16 @@ examples:
   - layout_colors: Colors
   - layout_transparent: Transparent
   - layout_sizes: Sizes
-  - layout_sizes_dark: Sizes Dark
   - layout_collection: Collection Layout
   - layout_collection_detail: Collection Detail Layout
   - layout_kanban: Kanban Layout
   - layout_content: Content Layout
 
-
   react:
   - layout_colors: Colors
   - layout_transparent: Transparent
   - layout_sizes: Sizes
-  - layout_sizes_dark: Sizes Dark
   - layout_collection: Collection Layout
   - layout_collection_detail: Collection Detail Layout
   - layout_kanban: Kanban Layout
   - layout_content: Content Layout
-

data/app/pb_kits/playbook/pb_layout/docs/index.js

@@ -1,7 +1,6 @@
 export { default as LayoutColors } from './_layout_colors.jsx'
 export { default as LayoutTransparent } from './_layout_transparent.jsx'
 export { default as LayoutSizes } from './_layout_sizes.jsx'
-export { default as LayoutSizesDark } from './_layout_sizes_dark.jsx'
 export { default as LayoutCollection } from './_layout_collection.jsx'
 export { default as LayoutKanban } from './_layout_kanban.jsx'
 export { default as LayoutKanbanResponsive } from './_layout_kanban_responsive.jsx'

data/app/pb_kits/playbook/pb_legend/docs/_legend_default.jsx

@@ -3,7 +3,7 @@ import { Legend } from '../../'
 
 const products = ['Windows', 'Doors', 'Roofing', 'Siding', 'Solar Gutters', 'Insulation', 'Other']
 
-const LegendDefault = () => (
+const LegendDefault = (props) => (
   <div>
     {
       products.map((product, i) => (
@@ -11,6 +11,7 @@ const LegendDefault = () => (
             color={`data_${i + 1}`}
             key={`legend_${i + 1}`}
             text={product}
+            {...props}
         />
       ))
     }

data/app/pb_kits/playbook/pb_legend/docs/_legend_prefix.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { Legend } from '../..'
 
-const LegendPrefix = () => (
+const LegendPrefix = (props) => (
   <div>
     <Legend
         color="data_3"
         prefixText="10"
         text="Windows"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.jsx

@@ -18,7 +18,7 @@ const data = [{
   data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
 }]
 
-const LineGraphDefault = () => (
+const LineGraphDefault = (props) => (
   <div>
     <LineGraph
         axisTitle="Number of Employees"
@@ -28,6 +28,7 @@ const LineGraphDefault = () => (
         title="Solar Employment Growth by Sector, 2010-2016"
         xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
         yAxisMin={0}
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.jsx

@@ -6,7 +6,7 @@ const data = [{
   data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
 }]
 
-const LineGraphDefault = () => (
+const LineGraphDefault = (props) => (
   <div>
     <LineGraph
         axisTitle="Number of Employees"
@@ -15,6 +15,7 @@ const LineGraphDefault = () => (
         title="Fixed Height (300px)"
         xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
         yAxisMin={0}
+        {...props}
     />
 
     <br />
@@ -28,6 +29,7 @@ const LineGraphDefault = () => (
         title="Percentage Height (50%)"
         xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
         yAxisMin={0}
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx

@@ -6,7 +6,7 @@ const data = [{
   data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
 }]
 
-const LineGraphLegend = () => (
+const LineGraphLegend = (props) => (
   <div>
     <LineGraph
         axisTitle="Number of Employees"
@@ -16,6 +16,7 @@ const LineGraphLegend = () => (
         title="Line Graph with Legend"
         xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
         yAxisMin={0}
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.jsx

@@ -6,7 +6,7 @@ const data = [{
   data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
 }]
 
-const LineGraphLegendNonclickable = () => (
+const LineGraphLegendNonclickable = (props) => (
   <div>
     <LineGraph
         axisTitle="Number of Employees"
@@ -16,6 +16,7 @@ const LineGraphLegendNonclickable = () => (
         title="Line Graph with Legend Non Clickable"
         toggleLegendClick={false}
         xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_list/docs/_list_borderless.jsx

@@ -2,11 +2,12 @@ import React from 'react'
 
 import { List, ListItem } from '../../'
 
-const ListBorderless = () => {
+const ListBorderless = (props) => {
   return (
     <>
       <List
           borderless
+          {...props}
       >
         <ListItem>{'Item 1'}</ListItem>
         <ListItem>{'Item 2'}</ListItem>

data/app/pb_kits/playbook/pb_list/docs/_list_layout_left.jsx

@@ -2,21 +2,24 @@ import React from 'react'
 
 import { Currency, List, ListItem, Title } from '../../'
 
-const ListLayoutLeft = () => {
+const ListLayoutLeft = (props) => {
   return (
     <>
       <List
           layout="left"
+          {...props}
       >
         <ListItem>
           <Title
               size={4}
               text="Label"
+              {...props}
           />
           <Currency
               amount="2,000.50"
               label="Caption"
               size="sm"
+              {...props}
           />
         </ListItem>
 
@@ -24,11 +27,13 @@ const ListLayoutLeft = () => {
           <Title
               size={4}
               text="Label"
+              {...props}
           />
           <Currency
               amount="2,000.50"
               label="Caption"
               size="sm"
+              {...props}
           />
         </ListItem>
 
@@ -36,11 +41,13 @@ const ListLayoutLeft = () => {
           <Title
               size={4}
               text="Label"
+              {...props}
           />
           <Currency
               amount="2,000.50"
               label="Caption"
               size="sm"
+              {...props}
           />
         </ListItem>
 
@@ -48,11 +55,13 @@ const ListLayoutLeft = () => {
           <Title
               size={4}
               text="Label"
+              {...props}
           />
           <Currency
               amount="2,000.50"
               label="Caption"
               size="sm"
+              {...props}
           />
         </ListItem>
 
@@ -60,11 +69,13 @@ const ListLayoutLeft = () => {
           <Title
               size={4}
               text="Label"
+              {...props}
           />
           <Currency
               amount="2,000.50"
               label="Caption"
               size="sm"
+              {...props}
           />
         </ListItem>
       </List>

data/app/pb_kits/playbook/pb_list/docs/_list_layout_right.jsx

@@ -2,21 +2,24 @@ import React from 'react'
 
 import { Currency, List, ListItem, Title } from '../../'
 
-const ListLayoutRight = () => {
+const ListLayoutRight = (props) => {
   return (
     <>
       <List
           layout="right"
+          {...props}
       >
         <ListItem>
           <Title
               size={4}
               text="Label"
+              {...props}
           />
           <Currency
               amount="2,000.50"
               label="Caption"
               size="sm"
+              {...props}
           />
         </ListItem>
 
@@ -24,11 +27,13 @@ const ListLayoutRight = () => {
           <Title
               size={4}
               text="Label"
+              {...props}
           />
           <Currency
               amount="2,000.50"
               label="Caption"
               size="sm"
+              {...props}
           />
         </ListItem>
 
@@ -36,11 +41,13 @@ const ListLayoutRight = () => {
           <Title
               size={4}
               text="Label"
+              {...props}
           />
           <Currency
               amount="2,000.50"
               label="Caption"
               size="sm"
+              {...props}
           />
         </ListItem>
 
@@ -48,11 +55,13 @@ const ListLayoutRight = () => {
           <Title
               size={4}
               text="Label"
+              {...props}
           />
           <Currency
               amount="2,000.50"
               label="Caption"
               size="sm"
+              {...props}
           />
         </ListItem>
 

data/app/pb_kits/playbook/pb_list/docs/_list_lg.jsx

@@ -2,11 +2,12 @@ import React from 'react'
 
 import { List, ListItem } from '../../'
 
-const ListLg = () => {
+const ListLg = (props) => {
   return (
     <>
       <List
           size="large"
+          {...props}
       >
         <ListItem>{'Item 1'}</ListItem>
         <ListItem>{'Item 2'}</ListItem>

data/app/pb_kits/playbook/pb_list/docs/_list_ordered.jsx

@@ -2,11 +2,12 @@ import React from 'react'
 
 import { List, ListItem } from '../../'
 
-const ListOrdered = () => {
+const ListOrdered = (props) => {
   return (
     <>
       <List
           ordered
+          {...props}
       >
         <ListItem>{'Item 1'}</ListItem>
         <ListItem>{'Item 2'}</ListItem>

data/app/pb_kits/playbook/pb_list/docs/_list_xpadding.jsx

@@ -2,11 +2,12 @@ import React from 'react'
 
 import { List, ListItem } from '../../'
 
-const ListXpadding = () => {
+const ListXpadding = (props) => {
   return (
     <>
       <List
           xpadding
+          {...props}
       >
         <ListItem>{'Item 1'}</ListItem>
         <ListItem>{'Item 2'}</ListItem>

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_light.jsx

@@ -1,12 +1,20 @@
 import React from 'react'
 import { LoadingInline } from '../../'
 
-const LoadingInlineLight = () => {
+const LoadingInlineLight = (props) => {
   return (
     <div>
-      <LoadingInline />
-      <LoadingInline align="center" />
-      <LoadingInline align="right" />
+      <LoadingInline
+          {...props}
+      />
+      <LoadingInline
+          align="center"
+          {...props}
+      />
+      <LoadingInline
+          align="right"
+          {...props}
+      />
     </div>
   )
 }