playbook_ui 3.1.0 → 3.2.0

data/app/pb_kits/playbook/pb_badge/docs/_badge_dark.jsx

@@ -1,82 +1,160 @@
-import React from "react"
-import Badge from "../_badge.jsx"
+import React from 'react'
+import Badge from '../_badge.jsx'
 
-function BadgeDark() {
+const BadgeDark = () => {
   return (
     <div>
       <div>
-        <Badge text="+1" variant="primary" rounded dark />
+        <Badge
+            dark
+            rounded
+            text="+1"
+            variant="primary"
+        />
 
         &nbsp;
 
-        <Badge text="+4" variant="primary" dark />
+        <Badge
+            dark
+            text="+4"
+            variant="primary"
+        />
 
         &nbsp;
 
-        <Badge text="+1000" variant="primary" dark />
+        <Badge
+            dark
+            text="+1000"
+            variant="primary"
+        />
       </div>
 
       <div>
-        <Badge text="+1" variant="success" rounded dark />
+        <Badge
+            dark
+            rounded
+            text="+1"
+            variant="success"
+        />
 
         &nbsp;
 
-        <Badge text="+4" variant="success" dark />
+        <Badge
+            dark
+            text="+4"
+            variant="success"
+        />
 
         &nbsp;
 
-        <Badge text="+1000" variant="success" dark />
+        <Badge
+            dark
+            text="+1000"
+            variant="success"
+        />
       </div>
 
       <div>
-        <Badge text="+1" variant="warning" rounded dark />
+        <Badge
+            dark
+            rounded
+            text="+1"
+            variant="warning"
+        />
 
         &nbsp;
 
-        <Badge text="+4" variant="warning" dark />
+        <Badge
+            dark
+            text="+4"
+            variant="warning"
+        />
 
         &nbsp;
 
-        <Badge text="+1000" variant="warning" dark />
+        <Badge
+            dark
+            text="+1000"
+            variant="warning"
+        />
       </div>
 
       <div>
-        <Badge text="+1" variant="error" rounded dark />
+        <Badge
+            dark
+            rounded
+            text="+1"
+            variant="error"
+        />
 
         &nbsp;
 
-        <Badge text="+4" variant="error" dark />
+        <Badge
+            dark
+            text="+4"
+            variant="error"
+        />
 
         &nbsp;
 
-        <Badge text="+1000" variant="error" dark />
+        <Badge
+            dark
+            text="+1000"
+            variant="error"
+        />
       </div>
 
       <div>
-        <Badge text="+1" variant="info" rounded dark />
+        <Badge
+            dark
+            rounded
+            text="+1"
+            variant="info"
+        />
 
         &nbsp;
 
-        <Badge text="+4" variant="info" dark />
+        <Badge
+            dark
+            text="+4"
+            variant="info"
+        />
 
         &nbsp;
 
-        <Badge text="+1000" variant="info" dark />
+        <Badge
+            dark
+            text="+1000"
+            variant="info"
+        />
       </div>
 
       <div>
-        <Badge text="+1" variant="neutral" rounded dark />
+        <Badge
+            dark
+            rounded
+            text="+1"
+            variant="neutral"
+        />
 
         &nbsp;
 
-        <Badge text="+4" variant="neutral" dark />
+        <Badge
+            dark
+            text="+4"
+            variant="neutral"
+        />
 
         &nbsp;
 
-        <Badge text="+1000" variant="neutral" dark />
+        <Badge
+            dark
+            text="+1000"
+            variant="neutral"
+        />
       </div>
     </div>
   )
 }
 
-export default BadgeDark;
+export default BadgeDark

data/app/pb_kits/playbook/pb_badge/docs/_badge_default.jsx

@@ -1,20 +1,29 @@
-import React from "react"
-import Badge from "../_badge.jsx"
+import React from 'react'
+import Badge from '../_badge.jsx'
 
-function BadgeDefault() {
+const BadgeDefault = () => {
   return (
     <div>
-      <Badge text="+1" variant="primary" />
+      <Badge
+          text="+1"
+          variant="primary"
+      />
 
       &nbsp;
 
-      <Badge text="+4" variant="primary" />
+      <Badge
+          text="+4"
+          variant="primary"
+      />
 
       &nbsp;
 
-      <Badge text="+1000" variant="primary" />
+      <Badge
+          text="+1000"
+          variant="primary"
+      />
     </div>
   )
 }
 
-export default BadgeDefault;
+export default BadgeDefault

data/app/pb_kits/playbook/pb_badge/docs/_badge_rounded.jsx

@@ -1,20 +1,32 @@
-import React from "react"
-import Badge from "../_badge.jsx"
+import React from 'react'
+import Badge from '../_badge.jsx'
 
-function BadgeRounded() {
+const BadgeRounded = () => {
   return (
     <div>
-      <Badge text="+1" variant="primary" rounded />
+      <Badge
+          rounded
+          text="+1"
+          variant="primary"
+      />
 
       &nbsp;
 
-      <Badge text="+4" variant="primary" rounded />
+      <Badge
+          rounded
+          text="+4"
+          variant="primary"
+      />
 
       &nbsp;
 
-      <Badge text="+1000" variant="primary" rounded />
+      <Badge
+          rounded
+          text="+1000"
+          variant="primary"
+      />
     </div>
   )
 }
 
-export default BadgeRounded;
+export default BadgeRounded

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

@@ -1,4 +1,4 @@
-export {default as BadgeDefault} from './_badge_default.jsx';
-export {default as BadgeRounded} from './_badge_rounded.jsx';
-export {default as BadgeColors} from './_badge_colors.jsx';
-export {default as BadgeDark} from './_badge_dark.jsx';
+export { default as BadgeDefault } from './_badge_default.jsx'
+export { default as BadgeRounded } from './_badge_rounded.jsx'
+export { default as BadgeColors } from './_badge_colors.jsx'
+export { default as BadgeDark } from './_badge_dark.jsx'

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 
-import { pbChart } from "../"
+import { pbChart } from '../'
 
 type BarGraphProps = {
   axisTitle: String,
@@ -15,6 +15,7 @@ type BarGraphProps = {
   pointStart: Number,
   subTitle?: String,
   title: String,
+  type?: String,
 }
 
 export default class BarGraph extends React.Component<BarGraphProps> {

data/app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js

@@ -1,32 +1,32 @@
-import { commonSettings } from "../pb_dashboard/commonSettings.js";
-import typography from "../tokens/_typography.scss";
+import { commonSettings } from '../pb_dashboard/commonSettings.js'
+import typography from '../tokens/_typography.scss'
 
 const sizeColumns = function(highchart) {
-  let column = highchart.plotOptions.column;
-  let series = highchart.plotOptions.series;
+  const column = highchart.plotOptions.column
+  const series = highchart.plotOptions.series
 
-  column.borderRadius = 0;
-  column.pointPadding = 0.3;
-  column.groupPadding = 0;
+  column.borderRadius = 0
+  column.pointPadding = 0.3
+  column.groupPadding = 0
 
-  series.borderWidth = 0;
-  series.shadow = false;
-  series.pointPadding = 0.25;
-  series.groupPadding = 0;
-};
+  series.borderWidth = 0
+  series.shadow = false
+  series.pointPadding = 0.25
+  series.groupPadding = 0
+}
 
-const styleDataLabels = highchart => {
-  let series = highchart.plotOptions.series;
+const styleDataLabels = (highchart) => {
+  const series = highchart.plotOptions.series
 
-  series.dataLabels.style.fontFamily = typography.font_family_base;
-  series.dataLabels.style.fontSize = typography.text_small;
-  series.dataLabels.style.fontWeight = typography.bold;
-};
+  series.dataLabels.style.fontFamily = typography.font_family_base
+  series.dataLabels.style.fontSize = typography.text_small
+  series.dataLabels.style.fontWeight = typography.bold
+}
 
 const barGraphSettings = function(highchart) {
-  commonSettings(highchart);
-  sizeColumns(highchart);
-  styleDataLabels(highchart);
-};
+  commonSettings(highchart)
+  sizeColumns(highchart)
+  styleDataLabels(highchart)
+}
 
-export default barGraphSettings;
+export default barGraphSettings

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

@@ -1,21 +1,21 @@
-import React from "react"
-import { BarGraph } from "../../"
+import React from 'react'
+import { BarGraph } from '../../'
 
 const chartData = [{
   name: 'Installation',
-  data: [154175]
+  data: [154175],
 }, {
   name: 'Manufacturing',
-  data: [40434]
+  data: [40434],
 }, {
   name: 'Sales & Distribution',
-  data: [39387]
+  data: [39387],
 }, {
   name: 'Project Development',
-  data: [34227]
+  data: [34227],
 }, {
   name: 'Other',
-  data: [18111]
+  data: [18111],
 }]
 
 const BarGraphDefault = () => (

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

@@ -1 +1 @@
-export {default as BarGraphDefault} from './_bar_graph_default.jsx';
+export { default as BarGraphDefault } from './_bar_graph_default.jsx'

data/app/pb_kits/playbook/pb_body/_body.jsx

@@ -14,12 +14,11 @@ type BodyProps = {
 }
 
 const bodyCSS = ({
-  color='',
-  dark=false,
-  status='',
+  color = '',
+  dark = false,
+  status = '',
 
 }: BodyProps) => {
-
   const colorStyle = color !== '' ? `_${color}` : ''
 
   const themeStyle = dark === true ? '_dark' : ''
@@ -34,7 +33,7 @@ const Body = (props: BodyProps) => {
     className,
     children,
     text,
-    tag='div',
+    tag = 'div',
   } = props
 
   const Tag = `${tag}`

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

@@ -1,14 +1,14 @@
-import React from "react"
-import {Body} from "../../"
+import React from 'react'
+import { Body } from '../../'
 
-function BodyBlock() {
+const BodyBlock = () => {
   return (
     <div>
       <Body>
-        I am a body kit
+        {'I am a body kit'}
       </Body>
     </div>
   )
 }
 
-export default BodyBlock;
+export default BodyBlock

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

@@ -1,18 +1,37 @@
-import React from "react"
-import {Body} from "../../"
+import React from 'react'
+import { Body } from '../../'
 
-function BodyDark() {
+const BodyDark = () => {
   return (
     <div>
-      <Body dark text="I am a body kit (Default)" />
-      <Body dark color="light" text="I am a body kit (Light)" />
-      <Body dark color="lighter" text="I am a body kit (Lighter)" />
-      <br/>
-      <br/>
-      <Body dark status="negative" text="I am a body kit (Status: negative)" />
-      <Body dark status="positive" text="I am a body kit (Status: positive)" />
+      <Body
+          dark
+          text="I am a body kit (Default)"
+      />
+      <Body
+          color="light"
+          dark
+          text="I am a body kit (Light)"
+      />
+      <Body
+          color="lighter"
+          dark
+          text="I am a body kit (Lighter)"
+      />
+      <br />
+      <br />
+      <Body
+          dark
+          status="negative"
+          text="I am a body kit (Status: negative)"
+      />
+      <Body
+          dark
+          status="positive"
+          text="I am a body kit (Status: positive)"
+      />
     </div>
   )
 }
 
-export default BodyDark;
+export default BodyDark