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_bar_graph/docs/_bar_graph_legend_non_clickable.jsx CHANGED

@@ -6,7 +6,7 @@ const chartData = [{
   data: [1475, 200, 3000, 654, 656],
 }]
-const BarGraphLegendNonClickable = () => (
+const BarGraphLegendNonClickable = (props) => (
   <div>
     <BarGraph
         axisTitle="Number of Employees"
@@ -17,6 +17,7 @@ const BarGraphLegendNonClickable = () => (
         toggleLegendClick={false}
         xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
         yAxisMin={0}
+        {...props}
     />
   </div>
 )

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

@@ -5,28 +5,28 @@ const BodyLight = (props) => {
   return (
     <div>
       <Body
-          {...props}
           text="I am a body kit (Default)"
+          {...props}
       />
       <Body
-          {...props}
           color="light"
           text="I am a body kit (Light)"
+          {...props}
       />
       <Body
-          {...props}
           color="lighter"
           text="I am a body kit (Lighter)"
+          {...props}
       />
       <Body
-          {...props}
           status="negative"
           text="I am a body kit (Status: negative)"
+          {...props}
       />
       <Body
-          {...props}
           status="positive"
           text="I am a body kit (Status: positive)"
+          {...props}
       />
     </div>
   )

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

@@ -4,11 +4,11 @@ import { Button } from '../../'
 const ButtonAccessibility = (props) => (
   <div>
     <Button
-        {...props}
         aria={{ label: 'button' }}
         link="https://google.com"
         tag="a"
         text="Button with ARIA"
+        {...props}
     />
   </div>
 )

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

@@ -4,10 +4,10 @@ import { Button } from '../../'
 const ButtonBlockContent = (props) => (
   <div>
     <Button
-        {...props}
         fixedWidth
         icon="users"
         text="Button with Block Content"
+        {...props}
     />
   </div>
 )

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

@@ -4,10 +4,10 @@ import { Button } from '../../'
 const ButtonDefault = (props) => (
   <div>
     <Button
-        {...props}
         marginRight="xl"
         onClick={() => alert('button clicked!')}
         text="Button Primary"
+        {...props}
     />
     {' '}
     <Button

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

@@ -4,9 +4,9 @@ import { Button } from '../../'
 const ButtonFullWidth = (props) => (
   <div>
     <Button
-        {...props}
         fullWidth
         text="Button Full Width"
+        {...props}
     />
   </div>
 )

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

@@ -4,23 +4,23 @@ import { Button } from '../../'
 const ButtonLink = (props) => (
   <div>
     <Button
-        {...props}
         link="https://google.com"
         text="A Tag Button"
+        {...props}
     />
     {' '}
     <Button
-        {...props}
         link="https://google.com"
         newWindow
         text="Open in New Window"
+        {...props}
     />
     {' '}
     <Button
-        {...props}
         disabled
         link="https://google.com"
         text="A Tag Button Disabled"
+        {...props}
     />
   </div>
 )

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

@@ -4,23 +4,23 @@ import { Button } from '../../'
 const ButtonLoading = (props) => (
   <div>
     <Button
-        {...props}
         loading
         text="Button Primary"
+        {...props}
     />
     {' '}
     <Button
-        {...props}
         loading
         text="Button Secondary"
         variant="secondary"
+        {...props}
     />
     {' '}
     <Button
-        {...props}
         loading
         text="A Tag Button Disabled"
         variant="link"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_button/docs/_button_options.jsx CHANGED

@@ -4,11 +4,11 @@ import Button from '../_button.jsx'
 const ButtonOptions = (props) => (
   <div>
     <Button
-        {...props}
         htmlType="submit"
         onClick={() => alert('Click!')}
         text="Button with options"
         value="1234"
+        {...props}
     />
   </div>
 )

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

@@ -4,46 +4,46 @@ import { Button, ButtonToolbar } from '../..'
 const ButtonToolbarDefault = (props) => (
   <div className="pb--doc-demo-row">
     <ButtonToolbar
-        {...props}
         orientation="vertical"
+        {...props}
     >
       <Button
-          {...props}
           text="Create"
+          {...props}
       />
       <Button
-          {...props}
           text="Edit"
+          {...props}
       />
       <Button
-          {...props}
           text="Copy"
+          {...props}
       />
       <Button
-          {...props}
           text="Cut"
+          {...props}
       />
     </ButtonToolbar>
     <ButtonToolbar
-        {...props}
         orientation="horizontal"
+        {...props}
     >
       <Button
-          {...props}
           text="Create"
+          {...props}
       />
       <Button
-          {...props}
           text="Edit"
+          {...props}
       />
       <Button
-          {...props}
           text="Copy"
+          {...props}
       />
       <Button
-          {...props}
           text="Cut"
+          {...props}
       />
     </ButtonToolbar>
   </div>

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

@@ -4,56 +4,56 @@ import { Button, ButtonToolbar } from '../..'
 const ButtonToolbarSecondary = (props) => (
   <div className="pb--doc-demo-row">
     <ButtonToolbar
-        {...props}
         orientation="vertical"
         variant="secondary"
+        {...props}
     >
       <Button
-          {...props}
           text="Create"
           variant="secondary"
+          {...props}
       />
       <Button
-          {...props}
           text="Edit"
           variant="secondary"
+          {...props}
       />
       <Button
-          {...props}
           text="Copy"
           variant="secondary"
+          {...props}
       />
       <Button
-          {...props}
           text="Cut"
           variant="secondary"
+          {...props}
       />
     </ButtonToolbar>
     <ButtonToolbar
-        {...props}
         orientation="horizontal"
         variant="secondary"
+        {...props}
     >
       <Button
-          {...props}
           text="Create"
           variant="secondary"
+          {...props}
       />
       <Button
-          {...props}
           text="Edit"
           variant="secondary"
+          {...props}
       />
       <Button
-          {...props}
           text="Copy"
           variant="secondary"
+          {...props}
       />
       <Button
-          {...props}
           text="Cut"
           variant="secondary"
+          {...props}
       />
     </ButtonToolbar>
   </div>

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

@@ -9,15 +9,15 @@ const CaptionBlock = (props) => {
       </Caption>
       <Caption
-          {...props}
           size="lg"
+          {...props}
       >
         {'Large Block'}
       </Caption>
       <Caption
-          {...props}
           size="xs"
+          {...props}
       >
         {'Subcaption Block'}
       </Caption>

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

@@ -5,18 +5,18 @@ const CaptionLight = (props) => {
   return (
     <div>
       <Caption
-          {...props}
           text="Caption"
+          {...props}
       />
       <Caption
-          {...props}
           size="lg"
           text="Caption Large"
+          {...props}
       />
       <Caption
-          {...props}
           size="xs"
           text="Subcaption"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.jsx CHANGED

@@ -1,13 +1,14 @@
 import React from 'react'
 import { Caption } from '../../'
-const CaptionVariants = () => {
+const CaptionVariants = (props) => {
   return (
     <div>
       <Caption
           size="xs"
           text="Subcaption (link)"
           variant="link"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_card/_card.scss CHANGED

@@ -32,6 +32,9 @@
         @include pb_card_header_color($color_value);
       }
     }
+    &[class*=_white] {
+      border-bottom: 1px solid $border_light;
+    }
   }
   [class^=pb_card_body_kit] {

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.jsx CHANGED

@@ -5,11 +5,11 @@ const CheckboxChecked = (props) => {
   return (
     <div>
       <Checkbox
-          {...props}
           checked
           name="checkbox-name"
           text="Checked Checkbox"
           value="check-box value"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.jsx CHANGED

@@ -15,8 +15,8 @@ const CheckboxCustom = (props) => {
       <br />
       <div>
         <Checkbox
-            {...props}
             text="Toggle Me"
+            {...props}
         >
           <input
               checked={checked}
@@ -24,6 +24,7 @@ const CheckboxCustom = (props) => {
               onChange={handleOnChange}
               type="checkbox"
               value="custom-value"
+              {...props}
           />
         </Checkbox>
       </div>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.jsx CHANGED

@@ -5,10 +5,10 @@ const CheckboxDefault = (props) => {
   return (
     <div>
       <Checkbox
-          {...props}
           name="default name"
           text="Checkbox label"
           value="default value"
+          {...props}
       />
     </div>
   )

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

@@ -5,11 +5,11 @@ const CheckboxError = (props) => {
   return (
     <div>
       <Checkbox
-          {...props}
           error
           name="default name"
           text="Checkbox label"
           value="default value"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx CHANGED

@@ -16,7 +16,7 @@ const dataWithABlock = [
   },
 ]
-const CircleChartBlock = () => (
+const CircleChartBlock = (props) => (
   <div>
     <CircleChart
@@ -25,10 +25,12 @@ const CircleChartBlock = () => (
         innerSize="lg"
         marginTop="xl"
         rounded
+        {...props}
     >
       <Title
           size={1}
           tag="div"
+          {...props}
       >
         {'83'}
       </Title>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx CHANGED

@@ -16,12 +16,13 @@ const dataWithColors = [
   },
 ]
-const CircleChartColors = () => (
+const CircleChartColors = (props) => (
   <div>
     <CircleChart
         chartData={dataWithColors}
         colors={['data-6', 'data-4', 'data-2']}
         id="colors-example"
+        {...props}
     />
   </div>
 )