playbook_ui 3.1.0 → 3.2.0

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

@@ -1,28 +1,28 @@
-import React from "react"
-import {Currency} from "../../"
+import React from 'react'
+import { Currency } from '../../'
 
-function CurrencyDefault() {
+const CurrencyDefault = () => {
   return (
     <div>
       <Currency
-          label='Caption'
-          size='lg'
-          value='2,000'
+          label="Caption"
+          size="lg"
+          value="2,000"
       />
       <Currency
-          align='center'
-          label='Caption'
-          size='lg'
-          value='2,000'
+          align="center"
+          label="Caption"
+          size="lg"
+          value="2,000"
       />
       <Currency
-          align='right'
-          label='Caption'
-          size='lg'
-          value='2,000'
+          align="right"
+          label="Caption"
+          size="lg"
+          value="2,000"
       />
     </div>
   )
 }
 
-export default CurrencyDefault;
+export default CurrencyDefault

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

@@ -1,2 +1,2 @@
-export {default as CurrencyDefault} from './_currency_default.jsx';
-export {default as CurrencyLarge} from './_currency_large.jsx';
+export { default as CurrencyDefault } from './_currency_default.jsx'
+export { default as CurrencyLarge } from './_currency_large.jsx'

data/app/pb_kits/playbook/pb_dashboard/commonSettings.js

@@ -1,5 +1,5 @@
-import colors from "../tokens/_colors.scss"
-import typography from "../tokens/_typography.scss";
+import colors from '../tokens/_colors.scss'
+import typography from '../tokens/_typography.scss'
 
 const dataColors = [
   colors.data_1,
@@ -12,91 +12,91 @@ const dataColors = [
   colors.data_8,
 ]
 
-const applyCustomSeriesColors = function(highchart) {
-  highchart.series.forEach(function(item, index) {
-    const selected_color = dataColors[index];
-    item.color = selected_color;
-    item.data.forEach(function(data_item) {
-      if(data_item.color){
-        data_item.color = selected_color;
+const applyCustomSeriesColors = (highchart) => {
+  highchart.series.forEach((item, index) => {
+    const selectedColor = dataColors[index]
+    item.color = selectedColor
+    item.data.forEach((dataItem) => {
+      if (dataItem.color){
+        dataItem.color = selectedColor
       }
 
-      if(!data_item.marker) return;
+      if (!dataItem.marker) return
 
-      if(data_item.marker.lineColor){
-        data_item.marker.lineColor = selected_color;
+      if (dataItem.marker.lineColor){
+        dataItem.marker.lineColor = selectedColor
       }
 
-      if(data_item.marker.states.hover !== undefined){
-        data_item.marker.states.hover.lineColor = selected_color;
+      if (dataItem.marker.states.hover !== undefined){
+        dataItem.marker.states.hover.lineColor = selectedColor
       }
-      
-      if(data_item.marker.states.select.lineColor){
-        data_item.marker.states.select.lineColor = selected_color;
+
+      if (dataItem.marker.states.select.lineColor){
+        dataItem.marker.states.select.lineColor = selectedColor
       }
-    });
-  });
-};
+    })
+  })
+}
 
-const adjustAxisStyle = function(axis) {
+const adjustAxisStyle = (axis) => {
   /* Styles grid */
-  axis.minorGridLineColor = colors.slate;
-  axis.minorGridLineWidth = 0.5;
-  axis.minorGridLineDashStyle = "Dash";
-  axis.gridLineWidth = 0.5;
-  axis.gridLineColor = colors.slate;
-  axis.gridLineDashStyle = "Dash";
+  axis.minorGridLineColor = colors.slate
+  axis.minorGridLineWidth = 0.5
+  axis.minorGridLineDashStyle = 'Dash'
+  axis.gridLineWidth = 0.5
+  axis.gridLineColor = colors.slate
+  axis.gridLineDashStyle = 'Dash'
 
   /* Change line color to $sky */
-  axis.lineColor = colors.sky;
+  axis.lineColor = colors.sky
 
   /* Change axis label styles */
-  axis.labels.style.fontFamily = typography.font_family_base;
-  axis.labels.style.color = colors.charcoal;
-  axis.labels.style.fontWeight = typography.light;
-  axis.labels.style.fontSize = typography.font_small;
-};
+  axis.labels.style.fontFamily = typography.font_family_base
+  axis.labels.style.color = colors.charcoal
+  axis.labels.style.fontWeight = typography.light
+  axis.labels.style.fontSize = typography.font_small
+}
 
 /* Remove grid from background */
-const styleAxis = function(highchart) {
+const styleAxis = (highchart) => {
   if (Array.isArray(highchart.yAxis)) {
-    highchart.yAxis.forEach(function(item) {
-      adjustAxisStyle(item);
-    });
+    highchart.yAxis.forEach((item) => {
+      adjustAxisStyle(item)
+    })
   } else {
-    adjustAxisStyle(highchart.yAxis);
+    adjustAxisStyle(highchart.yAxis)
   }
 
   if (Array.isArray(highchart.xAxis)) {
-    highchart.xAxis.forEach(function(item) {
-      adjustAxisStyle(item);
-    });
+    highchart.xAxis.forEach((item) => {
+      adjustAxisStyle(item)
+    })
   } else {
-    adjustAxisStyle(highchart.xAxis);
+    adjustAxisStyle(highchart.xAxis)
   }
-};
+}
 
-const styleChartContainer = function(highchart) {
-  highchart.chart.spacingTop = 30;
-  highchart.chart.spacingBottom = 40;
-  highchart.chart.spacingLeft = 50;
-  highchart.chart.spacingRight = 50;
-};
+const styleChartContainer = (highchart) => {
+  highchart.chart.spacingTop = 30
+  highchart.chart.spacingBottom = 40
+  highchart.chart.spacingLeft = 50
+  highchart.chart.spacingRight = 50
+}
 
-const styleLegend = function(highchart) {
-  highchart.legend.itemStyle.fontFamily = typography.font_family_base;
-  highchart.legend.itemStyle.color = colors.text_lt_light;
-  highchart.legend.itemStyle.fontWeight = typography.regular;
-  highchart.legend.itemStyle.fontSize = typography.text_smaller;
-};
+const styleLegend = (highchart) => {
+  highchart.legend.itemStyle.fontFamily = typography.font_family_base
+  highchart.legend.itemStyle.color = colors.text_lt_light
+  highchart.legend.itemStyle.fontWeight = typography.regular
+  highchart.legend.itemStyle.fontSize = typography.text_smaller
+}
 
 // Exportable Global Styles Function
-const commonSettings = function(highchart) {
-  applyCustomSeriesColors(highchart);
-  styleAxis(highchart);
-  styleChartContainer(highchart);
-  styleLegend(highchart);
-};
+const commonSettings = (highchart) => {
+  applyCustomSeriesColors(highchart)
+  styleAxis(highchart)
+  styleChartContainer(highchart)
+  styleLegend(highchart)
+}
 
 export {
   commonSettings,

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js

@@ -1,5 +1,5 @@
-import colors from '../tokens/_colors.scss';
-import typography from '../tokens/_typography.scss';
+import colors from '../tokens/_colors.scss'
+import typography from '../tokens/_typography.scss'
 
 import Highcharts from 'highcharts'
 
@@ -11,7 +11,7 @@ const highchartsTheme = {
     colors.data_4,
     colors.data_5,
     colors.data_6,
-    colors.data_7
+    colors.data_7,
   ],
   chart: {
     borderWidth: 0,
@@ -27,7 +27,7 @@ const highchartsTheme = {
       fontFamily: typography.font_family_base,
       fontWeight: typography.regular,
       fontSize: typography.heading_3,
-    }
+    },
   },
   subtitle: {
     style: {
@@ -35,7 +35,7 @@ const highchartsTheme = {
       color: colors.text_lt_light,
       fontWeight: typography.regular,
       fontSize: typography.text_base,
-    }
+    },
   },
   xAxis: {
     gridLineWidth: 0,
@@ -47,7 +47,7 @@ const highchartsTheme = {
         color: colors.text_lt_lighter,
         fontWeight: typography.bold,
         fontSize: typography.text_smaller,
-      }
+      },
     },
     title: {
       style: {
@@ -55,8 +55,8 @@ const highchartsTheme = {
         fontFamily: typography.font_family_base,
         fontWeight: typography.regular,
         fontSize: typography.heading_4,
-      }
-    }
+      },
+    },
   },
   yAxis: {
     alternateGridColor: null,
@@ -71,7 +71,7 @@ const highchartsTheme = {
         color: colors.text_lt_lighter,
         fontWeight: typography.bold,
         fontSize: typography.text_smaller,
-      }
+      },
     },
     title: {
       style: {
@@ -79,8 +79,8 @@ const highchartsTheme = {
         color: colors.text_lt_lighter,
         fontWeight: typography.bold,
         fontSize: typography.text_smaller,
-      }
-    }
+      },
+    },
   },
   legend: {
     layout: 'horizontal',
@@ -90,27 +90,27 @@ const highchartsTheme = {
       fontFamily: typography.font_family_base,
       color: colors.text_lt_light,
       fontWeight: typography.regular,
-      fontSize: typography.text_smaller
+      fontSize: typography.text_smaller,
     },
     itemHoverStyle: {
       color: colors.text_lt_default,
     },
     itemHiddenStyle: {
       color: colors.text_lt_lighter,
-    }
+    },
   },
   labels: {
     style: {
       color: colors.primary,
-    }
+    },
   },
   tooltip: {
     backgroundColor: {
       linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
       stops: [
         [0, colors.bg_dark],
-        [1, colors.bg_dark]
-      ]
+        [1, colors.bg_dark],
+      ],
     },
     shadow: false,
     borderWidth: 0,
@@ -120,7 +120,7 @@ const highchartsTheme = {
       color: colors.text_dk_default,
       fontWeight: typography.regular,
       fontSize: typography.text_smaller,
-    }
+    },
   },
 
   plotOptions: {
@@ -132,33 +132,33 @@ const highchartsTheme = {
           x1: 0,
           y1: 0,
           x2: 0,
-          y2: 1
+          y2: 1,
         },
         stops: [
           [0, Highcharts.getOptions().colors[0]],
-          [1, "white"]
-        ]
+          [1, 'white'],
+        ],
       },
-      threshold: null
+      threshold: null,
     },
     line: {
       dataLabels: {
-        color: '#CCC'
+        color: '#CCC',
       },
       marker: {
-        lineColor: '#333'
+        lineColor: '#333',
       },
       area: {
         shadow: false,
         states: {
-            hover: {
-                lineWidth: 1
-            }
+          hover: {
+            lineWidth: 1,
+          },
         },
-        threshold: null
-      }
-    }
+        threshold: null,
+      },
+    },
   },
 }
 
-export { highchartsTheme };
+export { highchartsTheme }

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx

@@ -25,10 +25,9 @@ type DashboardValueProps = {
 }
 
 const dashboardValueCSS = ({
-  align='left',
+  align = 'left',
 
 }: DashboardValueProps) => {
-
   const alignStyle = align !== '' ? `_${align}` : ''
 
   return 'pb_dashboard_value_kit' + alignStyle
@@ -36,7 +35,6 @@ const dashboardValueCSS = ({
 
 const DashboardValue = (props: DashboardValueProps) => {
   const {
-    align='left',
     className,
     id,
     statChange,
@@ -45,15 +43,24 @@ const DashboardValue = (props: DashboardValueProps) => {
   } = props
 
   return (
-    <div id={id} className={classnames(dashboardValueCSS(props), className)}>
+    <div
+        className={classnames(dashboardValueCSS(props), className)}
+        id={id}
+    >
       <If condition={statLabel}>
         <Body color="light">{statLabel}</Body>
       </If>
       <If condition={statValue}>
-        <StatValue value={statValue.value} unit={statValue.unit} />
+        <StatValue
+            unit={statValue.unit}
+            value={statValue.value}
+        />
       </If>
       <If condition={statChange}>
-        <StatChange change={statChange.change} value={statChange.value} />
+        <StatChange
+            change={statChange.change}
+            value={statChange.value}
+        />
       </If>
     </div>
   )

data/app/pb_kits/playbook/pb_dashboard_value/dashboardValueSettings.js

@@ -1,5 +1,5 @@
-import colors from "../tokens/_colors.scss";
-import typography from "../tokens/_typography.scss";
+import colors from '../tokens/_colors.scss'
+import typography from '../tokens/_typography.scss'
 
 const pbIndicator = {
   title: {
@@ -9,8 +9,8 @@ const pbIndicator = {
       big: typography.text_large,
       medium: typography.text_base,
       small: typography.text_small,
-      micro: typography.text_small
-    }
+      micro: typography.text_small,
+    },
   },
   secondaryTitle: {
     color: colors.text_lt_light,
@@ -19,8 +19,8 @@ const pbIndicator = {
       big: typography.text_large,
       medium: typography.text_base,
       small: typography.text_small,
-      micro: typography.text_small
-    }
+      micro: typography.text_small,
+    },
   },
   value: {
     fontFamily: typography.font_family_base,
@@ -30,8 +30,8 @@ const pbIndicator = {
       big: typography.heading_1,
       medium: typography.heading_1,
       small: typography.text_base,
-      micro: typography.text_small
-    }
+      micro: typography.text_small,
+    },
   },
   secondaryValue: {
     fontFamily: typography.font_family_base,
@@ -39,9 +39,9 @@ const pbIndicator = {
       big: typography.text_large,
       medium: typography.text_base,
       small: typography.text_small,
-      micro: typography.text_small
-    }
-  }
-};
+      micro: typography.text_small,
+    },
+  },
+}
 
-export default pbIndicator;
+export default pbIndicator