playbook_ui 7.11.1 → 7.12.0

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

@@ -16,11 +16,12 @@ const data = [
   },
 ]
 
-const CircleChartDefault = () => (
+const CircleChartDefault = (props) => (
   <div>
     <CircleChart
         chartData={data}
         id="circle-chart-default"
+        {...props}
     />
   </div>
 )

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

@@ -88,28 +88,32 @@ const dataFourth = [
   },
 ]
 
-const CircleChartInnerSizes = () => (
+const CircleChartInnerSizes = (props) => (
   <div>
     <CircleChart
         chartData={dataFirst}
         id="with-innersize-sm"
         innerSize="sm"
+        {...props}
     />
     <CircleChart
         chartData={dataSecond}
         id="with-innersize-md"
         innerSize="md"
+        {...props}
     />
     <CircleChart
         chartData={dataThird}
         id="with-innersize-lg"
         innerSize="lg"
+        {...props}
     />
     <CircleChart
         chartData={dataFourth}
         className="poop"
         id="with-innersize-none "
         innerSize="none"
+        {...props}
     />
   </div>
 )

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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Button, CircleChart } from '../../'
 
-const CircleChartLiveData = () => {
+const CircleChartLiveData = (props) => {
   const [data, setData] = useState([
     {
       name: 'Waiting for Calls',
@@ -41,10 +41,12 @@ const CircleChartLiveData = () => {
       <Button
           onClick={updateValue}
           text="Update Value"
+          {...props}
       />
       <CircleChart
           chartData={data}
           id="circle-chart-live-data"
+          {...props}
       />
     </div>
   )

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

@@ -16,13 +16,14 @@ const dataRounded = [
   },
 ]
 
-const CircleChartRounded = () => (
+const CircleChartRounded = (props) => (
   <div>
     <CircleChart
         chartData={dataRounded}
         id="default-test-rounded"
         innerSize="lg"
         rounded
+        {...props}
     />
   </div>
 )

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

@@ -32,12 +32,13 @@ const dataWithLabels = [
   },
 ]
 
-const CircleChartWithLabels = () => (
+const CircleChartWithLabels = (props) => (
   <div>
     <CircleChart
         chartData={dataWithLabels}
         dataLabels
         id="with-labels-example"
+        {...props}
     />
   </div>
 )

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

@@ -17,12 +17,13 @@ const dataWithLegend = [{
 },
 ]
 
-const CircleChartWithLegendKit = () => (
+const CircleChartWithLegendKit = (props) => (
   <div>
     <CircleChart
         chartData={dataWithLegend}
         id="with-legend-example"
         legend
+        {...props}
     />
   </div>
 )

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

@@ -32,12 +32,13 @@ const dataWithTitle = [
   },
 ]
 
-const CircleChartWithLegendKit = () => (
+const CircleChartWithLegendKit = (props) => (
   <div>
     <CircleChart
         chartData={dataWithTitle}
         id="with-title-example"
         title="Active Users on Social Media"
+        {...props}
     />
   </div>
 )

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

@@ -4,10 +4,10 @@ import { CircleIconButton } from '../..'
 const CircleIconButtonClick = (props) => (
   <div>
     <CircleIconButton
-        {...props}
         icon="plus"
         onClick={() => alert('Click!')}
         variant="primary"
+        {...props}
     />
   </div>
 )

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

@@ -4,33 +4,33 @@ import { CircleIconButton } from '../../'
 const CircleIconButtonDefault = (props) => (
   <div>
     <CircleIconButton
-        {...props}
         icon="plus"
         variant="primary"
+        {...props}
     />
 
     <br />
 
     <CircleIconButton
-        {...props}
         icon="pen"
         variant="secondary"
+        {...props}
     />
 
     <br />
 
     <CircleIconButton
-        {...props}
         disabled
         icon="times"
+        {...props}
     />
 
     <br />
 
     <CircleIconButton
-        {...props}
         icon="user"
         variant="link"
+        {...props}
     />
   </div>
 )

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

@@ -4,21 +4,20 @@ import { CircleIconButton } from '../../'
 const CircleIconButtonLink = (props) => (
   <div>
     <CircleIconButton
-        {...props}
         icon="search"
         link="https://google.com"
         variant="primary"
-
+        {...props}
     />
 
     <br />
 
     <CircleIconButton
-        {...props}
         icon="window"
         link="https://google.com"
         newWindow
         variant="secondary"
+        {...props}
     />
 
   </div>

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx

@@ -5,29 +5,28 @@ const ContactDefault = (props) => {
   return (
     <div>
       <Contact
-          {...props}
           contactType="cell"
           contactValue="349-185-9988"
+          {...props}
       />
       <Contact
-          {...props}
           contactValue="5555555555"
+          {...props}
       />
       <Contact
-          {...props}
           contactType="email"
           contactValue="email@example.com"
+          {...props}
       />
       <Contact
-          {...props}
           contactType="work"
           contactValue="3245627482"
-
+          {...props}
       />
       <Contact
-          {...props}
           contactType="work-cell"
           contactValue="3245627482"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx

@@ -5,27 +5,27 @@ const ContactDefault = (props) => {
   return (
     <div>
       <Contact
-          {...props}
           contactDetail="Cell"
           contactType="cell"
           contactValue="349-185-9988"
+          {...props}
       />
       <Contact
-          {...props}
           contactDetail="Home"
           contactValue="5555555555"
+          {...props}
       />
       <Contact
-          {...props}
           contactDetail="Work"
           contactType="work"
           contactValue="3245627482"
+          {...props}
       />
       <Contact
-          {...props}
           contactDetail="Work-Cell"
           contactType="work-cell"
           contactValue="3245627482"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_currency/docs/_currency_alignment.jsx

@@ -5,26 +5,26 @@ const CurrencyAlignment = (props) => {
   return (
     <>
       <Currency
-          {...props}
           amount="2,000.50"
           label="Left"
           size="sm"
+          {...props}
       />
       <Currency
-          {...props}
           align="center"
           amount="342"
           label="Center"
           size="sm"
           symbol="€"
+          {...props}
       />
       <Currency
-          {...props}
           align="right"
           amount="45"
           label="Right"
           size="sm"
           unit="/mo"
+          {...props}
       />
     </>
   )

data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.jsx

@@ -4,12 +4,12 @@ import { Currency } from '../../'
 const CurrencyNoSymbol = (props) => {
   return (
     <Currency
-        {...props}
         amount="309"
         label="Sales"
         size="md"
         symbol=""
         unit="/week"
+        {...props}
     />
   )
 }

data/app/pb_kits/playbook/pb_currency/docs/_currency_size.jsx

@@ -5,26 +5,26 @@ const CurrencySize = (props) => {
   return (
     <>
       <Currency
-          {...props}
           amount="2,000.50"
           label="Small"
           marginBottom="md"
           size="sm"
+          {...props}
       />
       <Currency
-          {...props}
           amount="342"
           label="Medium"
           marginBottom="md"
           size="md"
           symbol="€"
+          {...props}
       />
       <Currency
-          {...props}
           amount="45"
           label="Large"
           size="lg"
           unit="/mo"
+          {...props}
       />
     </>
   )

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx

@@ -5,29 +5,29 @@ const CurrencyVariants = (props) => {
   return (
     <>
       <Currency
-          {...props}
           amount="2,000.50"
           emphasized={false}
           label="Emphasized False"
           marginBottom="md"
           size="sm"
+          {...props}
       />
       <Currency
-          {...props}
           amount="342"
           label="Light"
           marginBottom="md"
           size="sm"
           symbol="€"
           variant="light"
+          {...props}
       />
       <Currency
-          {...props}
           amount="45"
           label="Bold"
           size="sm"
           unit="/mo"
           variant="bold"
+          {...props}
       />
     </>
   )

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_align.jsx

@@ -5,32 +5,32 @@ const DashboardValueAlign = (props) => {
   return (
     <div>
       <DashboardValue
-          {...props}
           statChange={{ change: 'decrease', value: '26.1' }}
           statLabel="Top Title Value"
           statValue={{ value: '1,428', unit: 'appts' }}
+          {...props}
       />
 
       <br />
       <br />
 
       <DashboardValue
-          {...props}
           align="center"
           statChange={{ change: 'decrease', value: 56.1 }}
           statLabel="Top Title Value"
           statValue={{ value: '1,428', unit: 'appts' }}
+          {...props}
       />
 
       <br />
       <br />
 
       <DashboardValue
-          {...props}
           align="right"
           statChange={{ change: 'decrease', value: 86 }}
           statLabel="Top Title Value"
           statValue={{ value: '1,428', unit: 'appts' }}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.jsx

@@ -5,30 +5,30 @@ const DashboardValueDefault = (props) => {
   return (
     <div>
       <DashboardValue
-          {...props}
           statChange={{ change: 'decrease', value: '26.1' }}
           statLabel="Decreased Value"
           statValue={{ value: '1,428', unit: 'appts' }}
+          {...props}
       />
 
       <br />
       <br />
 
       <DashboardValue
-          {...props}
           statChange={{ change: 'increase', value: 56.1 }}
           statLabel="Increased Value"
           statValue={{ value: '938', unit: 'homes' }}
+          {...props}
       />
 
       <br />
       <br />
 
       <DashboardValue
-          {...props}
           statChange={{ value: 86 }}
           statLabel="Neutral Value"
           statValue={{ value: '261', unit: 'windows' }}
+          {...props}
       />
     </div>
   )