RubyGems - playbook_ui - Versions diffs - 7.11.1 → 7.12.0 - Mend

playbook_ui 7.11.1 → 7.12.0

Files changed (293) hide show

data/app/pb_kits/playbook/pb_flex/docs/_flex_vertical.jsx CHANGED

@@ -1,23 +1,26 @@
 import React from 'react'
 import { Flex, FlexItem, Title } from  '../..'
-const FlexVertical = () => {
+const FlexVertical = (props) => {
   return (
     <>
       <div className="flex-doc-example">
         <Title
             size={3}
             text="Row"
+            {...props}
         />
         <br />
         <Title
             size={4}
             text="Top"
+            {...props}
         />
         <br />
         <Flex
             className="bg_light tall"
             vertical="top"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -38,11 +41,13 @@ const FlexVertical = () => {
         <Title
             size={4}
             text="Center"
+            {...props}
         />
         <br />
         <Flex
             className="bg_light tall"
             vertical="center"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -63,11 +68,13 @@ const FlexVertical = () => {
         <Title
             size={4}
             text="Bottom"
+            {...props}
         />
         <br />
         <Flex
             className="bg_light tall"
             vertical="bottom"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -88,13 +95,14 @@ const FlexVertical = () => {
         <Title
             size={4}
             text="Stretch"
+            {...props}
         />
         <br />
         <Flex
             className="bg_light tall"
             horizontal="stretch"
             orientation="row"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -114,11 +122,13 @@ const FlexVertical = () => {
         <Title
             size={3}
             text="Column"
+            {...props}
         />
         <br />
         <Title
             size={4}
             text="Top"
+            {...props}
         />
         <br />
         <Flex
@@ -126,7 +136,7 @@ const FlexVertical = () => {
             horizontal="left"
             orientation="column"
             vertical="top"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -146,6 +156,7 @@ const FlexVertical = () => {
         <Title
             size={4}
             text="Center"
+            {...props}
         />
         <br />
         <Flex
@@ -153,7 +164,7 @@ const FlexVertical = () => {
             horizontal="center"
             orientation="column"
             vertical="left"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -173,6 +184,7 @@ const FlexVertical = () => {
         <Title
             size={4}
             text="Bottom"
+            {...props}
         />
         <br />
         <Flex
@@ -180,7 +192,7 @@ const FlexVertical = () => {
             horizontal="bottom"
             orientation="column"
             vertical="left"
+            {...props}
         >
           <FlexItem>
             {'1'}

data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.jsx CHANGED

@@ -1,21 +1,24 @@
 import React from 'react'
 import { Body, Flex, FlexItem, Title } from  '../..'
-const FlexWrap = () => {
+const FlexWrap = (props) => {
   return (
     <>
       <div className="flex-doc-example">
         <Body
             text="Resize your browser"
+            {...props}
         />
         <Title
             size={4}
             text="Wrap"
+            {...props}
         />
         <br />
         <Flex
             className="bg_light"
             wrap
+            {...props}
         >
           <FlexItem fixedSize="300px">
             {'1'}
@@ -53,6 +56,7 @@ const FlexWrap = () => {
         <Title
             size={4}
             text="No Wrap"
+            {...props}
         />
         <br />
         <Flex className="bg_light wide">

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx CHANGED

@@ -1,7 +1,7 @@
 import React from 'react'
 import FormPill from '../_form_pill.jsx'
-const FormPillDefault = () => {
+const FormPillDefault = (props) => {
   return (
     <div>
       <FormPill
@@ -9,6 +9,7 @@ const FormPillDefault = () => {
 alert('Click!')
 }}
           text="this is a tag"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx CHANGED

@@ -1,7 +1,7 @@
 import React from 'react'
 import FormPill from '../_form_pill.jsx'
-const FormPillDefault = () => {
+const FormPillDefault = (props) => {
   return (
     <div>
@@ -9,16 +9,18 @@ const FormPillDefault = () => {
           avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
           name="Anna Black"
           onClick={() => {
-alert('Click!')
+ alert('Click!')
 }}
+          {...props}
       />
       <br />
       <br />
       <FormPill
           name="Anna Black"
           onClick={() => {
-alert('Click!')
+ alert('Click!')
 }}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx CHANGED

@@ -5,11 +5,12 @@ const data = [
   { name: 'Name', value: 45 },
 ]
-const GaugeDefault = () => (
+const GaugeDefault = (props) => (
   <div>
     <Gauge
         chartData={data}
         id="gauge-default"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx CHANGED

@@ -5,12 +5,13 @@ const data = [
   { name: 'Participants', value: 84 },
 ]
-const GaugeDisableAnimation = () => (
+const GaugeDisableAnimation = (props) => (
   <div>
     <Gauge
         chartData={data}
         disableAnimation
         id="gauge-disable-animation"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx CHANGED

@@ -5,7 +5,7 @@ const data = [
   { name: 'Capacity', value: 75 },
 ]
-const GaugeFullCircle = () => (
+const GaugeFullCircle = (props) => (
   <div>
     <Gauge
         chartData={data}
@@ -13,6 +13,7 @@ const GaugeFullCircle = () => (
         id="gauge-full-circle"
         suffix="%"
         title="Seating Capacity"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx CHANGED

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Gauge } from '../../'
-const GaugeHeight = () => (
+const GaugeHeight = (props) => (
   <div>
     <Gauge
         chartData={[ { name: 'Pixels', value: 400 } ]}
@@ -9,6 +9,7 @@ const GaugeHeight = () => (
         id="gauge-height-px"
         suffix="px"
         title="Fixed Height in Pixels"
+        {...props}
     />
     <Gauge
         chartData={[ { name: 'Percentage', value: 45 } ]}
@@ -16,6 +17,7 @@ const GaugeHeight = () => (
         id="gauge-height-percent"
         suffix="%"
         title="Height as Percentage of Width"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx CHANGED

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Button, Gauge } from '../../'
-const GaugeLiveData = () => {
+const GaugeLiveData = (props) => {
   const [value, setValue] = useState(50)
   const [name, setName] = useState('Name')
@@ -24,14 +24,17 @@ const GaugeLiveData = () => {
       <Button
           onClick={updateValue}
           text="Update Value"
+          {...props}
       />
       <Button
           onClick={updateName}
           text="Update Name"
+          {...props}
       />
       <Gauge
           chartData={[{ name: name, value: value }]}
           id="gauge-live-data"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx CHANGED

@@ -5,7 +5,7 @@ const data = [{
   name: 'Rating', value: 4.5,
 }]
-const GaugeMinMax = () => (
+const GaugeMinMax = (props) => (
   <div>
     <Gauge
         chartData={data}
@@ -14,6 +14,7 @@ const GaugeMinMax = () => (
         min={0}
         showLabels
         title="Product Rating"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx CHANGED

@@ -1,33 +1,47 @@
 import React from 'react'
 import { Flex, FlexItem, Gauge } from '../../'
-const GaugeSizing = () => (
+const GaugeSizing = (props) => (
   <div>
     <Flex
         wrap
+        {...props}
     >
-      <FlexItem fixedSize="400px">
+      <FlexItem
+          fixedSize="400px"
+          {...props}
+      >
         <Gauge
             chartData={[ { name: 'Point 1', value: 100 } ]}
             id="gauge-sizing4"
+            {...props}
         />
       </FlexItem>
-      <FlexItem fixedSize="300px">
+      <FlexItem
+          fixedSize="300px"
+          {...props}
+      >
         <Gauge
             chartData={[ { name: 'Point 2', value: 75 } ]}
             id="gauge-sizing3"
+            {...props}
         />
       </FlexItem>
-      <FlexItem fixedSize="200px">
+      <FlexItem
+          fixedSize="200px"
+          {...props}
+      >
         <Gauge
             chartData={[ { name: 'Point 3', value: 50 } ]}
             id="gauge-sizing2"
+            {...props}
         />
       </FlexItem>
       <FlexItem fixedSize="125px">
         <Gauge
             chartData={[ { name: 'Point 4', value: 25 } ]}
             id="gauge-sizing1"
+            {...props}
         />
       </FlexItem>
     </Flex>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx CHANGED

@@ -5,7 +5,7 @@ const data = [
   { name: 'Score', value: 780 },
 ]
-const GaugeTitle = () => (
+const GaugeTitle = (props) => (
   <div>
     <Gauge
         chartData={data}
@@ -13,6 +13,7 @@ const GaugeTitle = () => (
         max={850}
         min={300}
         title="Credit Score"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx CHANGED

@@ -8,13 +8,14 @@ const data2 = [
   { name: 'Sales to Date', value: 65 },
 ]
-const GaugeUnits = () => (
+const GaugeUnits = (props) => (
   <div>
     <Gauge
         chartData={data1}
         id="gauge-units1"
         suffix="GB"
         title="Data Usage"
+        {...props}
     />
     <Gauge
         chartData={data2}
@@ -22,6 +23,7 @@ const GaugeUnits = () => (
         prefix="$"
         suffix="k"
         title="Sales Goal"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_highlight/docs/_highlight_default.jsx CHANGED

@@ -1,11 +1,12 @@
 import React from 'react'
 import { Body, Highlight } from '../../'
-const HighlightDefault = () => (
+const HighlightDefault = (props) => (
   <div>
     <Highlight
         highlightedText={['highlight kit']}
         text="This is the Highlight Kit"
+        {...props}
     />
     <br />
     <Body>
@@ -19,6 +20,7 @@ const HighlightDefault = () => (
         highlightedText={['highlighted in the Body Kit ']}
         highlighting
         text="This is text highlighted in the Body Kit using the text prop."
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx CHANGED

@@ -1,7 +1,7 @@
 import React from 'react'
 import { HomeAddressStreet } from '../../'
-const HomeAddressStreetDefault = () => {
+const HomeAddressStreetDefault = (props) => {
   return (
     <HomeAddressStreet
         address="70 Prospect Ave"
@@ -13,6 +13,7 @@ const HomeAddressStreetDefault = () => {
         state="PA"
         territory="PHL"
         zipcode="19382"
+        {...props}
     />
   )
 }