playbook_ui 3.1.0 → 3.2.0

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

@@ -1 +1 @@
-export {default as LabelPillDefault} from './_label_pill_default.jsx';
+export { default as LabelPillDefault } from './_label_pill_default.jsx'

data/app/pb_kits/playbook/pb_label_value/_label_value.jsx

@@ -1,16 +1,16 @@
 import React from 'react'
-import PropTypes from "prop-types"
+import PropTypes from 'prop-types'
 
 const propTypes = {
   className: PropTypes.string,
-  id: PropTypes.string
+  id: PropTypes.string,
 }
 
 class LabelValue extends React.Component {
   render() {
     return (
       <div className="pb_label_value">
-        <span>LABEL VALUE CONTENT</span>
+        <span>{'LABEL VALUE CONTENT'}</span>
       </div>
     )
   }

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default.jsx

@@ -1,9 +1,8 @@
-import React from "react"
-import {LabelValue} from "../../"
+import React from 'react'
 
-function LabelValueDefault() {
+const LabelValueDefault = () => {
   return (
-    <h1>{`Coming Soon...`}</h1>
+    <h1>{'Coming Soon...'}</h1>
   )
 }
 

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

@@ -1 +1 @@
-export {default as LabelValueDefault} from './_label_value_default.jsx';
+export { default as LabelValueDefault } from './_label_value_default.jsx'

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

@@ -1,26 +1,26 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 
 const propTypes = {
   children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node
-  ])
-};
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+}
 
 class Body extends Component {
   render() {
     const {
-      children
-    } = this.props;
+      children,
+    } = this.props
     return (
-      <div className={`layout_body`}>
+      <div className="layout_body">
         {children}
       </div>
-    );
+    )
   }
 }
 
-Body.propTypes = propTypes;
+Body.propTypes = propTypes
 
-export default Body;
+export default Body

data/app/pb_kits/playbook/pb_layout/_layout.jsx

@@ -5,8 +5,8 @@ import classnames from 'classnames'
 
 import {
   buildAriaProps,
-  buildDataProps,
   buildCss,
+  buildDataProps,
 } from '../utilities/props'
 
 type LayoutProps = {
@@ -28,26 +28,27 @@ const Layout = ({
   dark = false,
   data = {},
   full = false,
-  gradient = false,
   position = 'left',
   transparent = false,
-  size = 'base'
+  size = 'base',
 }: LayoutProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-
-  const collapse_class = 'layout'+position_class+'_collapse_'+collapse;
-  const css = buildCss({
-    'pb_layout_kit': true,
-    [size]: true,
-    [position]: true,
-    'dark': dark === true,
-    'transparent': transparent === true,
-    'full': full === true
-  })
+  const classes = classnames(
+    buildCss('layout', position, 'collapse', collapse),
+    buildCss('pb_layout_kit', size, position, {
+      'dark': dark,
+      'transparent': transparent,
+      'full': full,
+    })
+  )
 
   return (
-    <div {...ariaProps} {...dataProps} className={classnames(css, collapse_class)}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classnames(classes)}
+    >
       {children}
     </div>
   )

data/app/pb_kits/playbook/pb_layout/_sidebar.jsx

@@ -1,26 +1,26 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 
 const propTypes = {
   children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node
-  ])
-};
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+}
 
 class Sidebar extends Component {
   render() {
     const {
-      children
-    } = this.props;
+      children,
+    } = this.props
     return (
-      <div className={`layout_sidebar`}>
+      <div className="layout_sidebar">
         {children}
       </div>
-    );
+    )
   }
 }
 
-Sidebar.propTypes = propTypes;
+Sidebar.propTypes = propTypes
 
-export default Sidebar;
+export default Sidebar

data/app/pb_kits/playbook/pb_layout/docs/_layout_default.jsx

@@ -1,15 +1,14 @@
-import React from "react"
+import React from 'react'
+import { Layout } from '../../'
 
-import {
-  Layout,
-} from "../.."
-
-function LayoutDefault() {
+const LayoutDefault = () => {
   return (
     <div>
-      <h1>{`Coming Soon...`}</h1>
+      <Layout>
+        {'This is great!'}
+      </Layout>
     </div>
   )
 }
 
-export default LayoutDefault;
+export default LayoutDefault

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

@@ -1 +1 @@
-export {default as LayoutDefault} from './_layout_default.jsx';
+export { default as LayoutDefault } from './_layout_default.jsx'

data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx

@@ -1,63 +1,64 @@
 /* @flow */
 
-import React from "react"
+import React from 'react'
 
-import {pbChart} from "../"
+import { pbChart } from '../'
 
 type LineGraphProps = {
-    axisTitle?: String,
-    className?: String,
-    chartData: Array<{
-        name: String,
-        data: Array<Number>,
-    }>,
-    gradient?: Boolean,
-    id: String,
-    pointStart: Number,
-    subTitle?: String,
-    title: String,
+  axisTitle?: String,
+  className?: String,
+  chartData: Array<{
+      name: String,
+      data: Array<Number>,
+  }>,
+  gradient?: Boolean,
+  id: String,
+  pointStart: Number,
+  subTitle?: String,
+  title: String,
+  type?: String,
 }
 
 export default class LineGraph extends React.Component<LineGraphProps> {
-    static defaultProps = {
-        className: 'pb_bar_graph',
-        gradient: false,
-        type: 'line',
-    }
-
-    componentDidMount() {
-        const {
-            axisTitle,
-            className,
-            chartData,
-            id,
-            pointStart,
-            subTitle,
-            title,
-            type,
-        } = this.props
-
-        new pbChart(`.${className}`, {
-            axisTitle: axisTitle,
-            chartData: chartData,
-            id: id,
-            pointStart: pointStart,
-            subtitle: subTitle,
-            type,
-            title: title,
-        })
-    }
-
-    props: LineGraphProps
-
-    render() {
-      const { className, id } = this.props
-
-      return (
-        <div
-            className={className}
-            id={id}
-        />
-      )
-    }
+  static defaultProps = {
+    className: 'pb_bar_graph',
+    gradient: false,
+    type: 'line',
+  }
+
+  componentDidMount() {
+    const {
+      axisTitle,
+      className,
+      chartData,
+      id,
+      pointStart,
+      subTitle,
+      title,
+      type,
+    } = this.props
+
+    new pbChart(`.${className}`, {
+      axisTitle: axisTitle,
+      chartData: chartData,
+      id: id,
+      pointStart: pointStart,
+      subtitle: subTitle,
+      type,
+      title: title,
+    })
+  }
+
+  props: LineGraphProps
+
+  render() {
+    const { className, id } = this.props
+
+    return (
+      <div
+          className={className}
+          id={id}
+      />
+    )
+  }
 }

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.jsx

@@ -1,21 +1,21 @@
-import React from "react"
-import {LineGraph} from "../../"
+import React from 'react'
+import { LineGraph } from '../../'
 
 const data = [{
-    name: 'Installation',
-    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+  name: 'Installation',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
 }, {
-    name: 'Manufacturing',
-    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
+  name: 'Manufacturing',
+  data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
 }, {
-    name: 'Sales & Distribution',
-    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
+  name: 'Sales & Distribution',
+  data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
 }, {
-    name: 'Project Development',
-    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
+  name: 'Project Development',
+  data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
 }, {
-    name: 'Other',
-    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
+  name: 'Other',
+  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
 }]
 
 const LineGraphDefault = () => (

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

@@ -1 +1 @@
-export {default as LineGraphDefault} from './_line_graph_default.jsx';
+export { default as LineGraphDefault } from './_line_graph_default.jsx'

data/app/pb_kits/playbook/pb_line_graph/lineGraphSettings.js

@@ -1,30 +1,30 @@
-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 markerStyles = highchart => {
-  highchart.plotOptions.line.marker.enabled = true;
-  highchart.plotOptions.series.marker.enabled = true;
-  highchart.plotOptions.series.marker.fillColor = "white";
-  highchart.plotOptions.series.marker.lineWidth = 2;
-};
+const markerStyles = (highchart) => {
+  highchart.plotOptions.line.marker.enabled = true
+  highchart.plotOptions.series.marker.enabled = true
+  highchart.plotOptions.series.marker.fillColor = 'white'
+  highchart.plotOptions.series.marker.lineWidth = 2
+}
 
 const fixTooltipStyles = () => {
-  document.getElementById("main-view").setAttribute("style", "position: static !important");
-};
+  document.getElementById('main-view').setAttribute('style', 'position: static !important')
+}
 
-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 pbLineGraph = highchart => {
-  commonSettings(highchart);
-  styleDataLabels(highchart);
-  markerStyles(highchart);
-  fixTooltipStyles();
-};
+const pbLineGraph = (highchart) => {
+  commonSettings(highchart)
+  styleDataLabels(highchart)
+  markerStyles(highchart)
+  fixTooltipStyles()
+}
 
-export default pbLineGraph;
+export default pbLineGraph

data/app/pb_kits/playbook/pb_list/_list.jsx

@@ -1,56 +1,42 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
+/* @flow */
 
-const propTypes = {
-  dark:PropTypes.bool,
-  borderless:PropTypes.bool,
-  size:PropTypes.oneOf(["", "large"]),
-  ordered:PropTypes.bool,
-  layout: PropTypes.oneOf(["", "left", "right"]),
-  xpadding:PropTypes.bool,
-  children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node
-  ])
-};
+import React, { type Node } from 'react'
 
-const defaultProps = {
-  dark:false,
-  borderless:false,
-  size:"",
-  ordered:false,
-  layout:"",
-  xpadding:false
-};
+import { buildCss } from '../utilities/props'
 
-class List extends Component {
-  render() {
-    const {
-      dark,
-      borderless,
-      size,
-      ordered,
-      layout,
-      xpadding,
-      children
-    } = this.props;
-    const dark_class = dark === true ? "_dark" : ""
-    const borderless_class = borderless === true ? "list_borderless" : ""
-    const size_class = "_" + size
-    const ordered_class = ordered === true ? "_ordered" : ""
-    const layout_class = "_"+ layout
-    const xpadding_class = xpadding === true ? "_xpadding" : ""
-    return (
-      <div className={`pb_list${dark_class}${borderless_class}${size_class}${ordered_class}${layout_class}${xpadding_class}`}>
-        <ul>
-          {children}
-        </ul>
-      </div>
-    );
-  }
+type ListProps = {
+  borderless: boolean,
+  children: Array<Node> | Node,
+  dark: boolean,
+  layout: '' | 'left' | 'right',
+  ordered: boolean,
+  size: '' | 'large',
+  xpadding: boolean,
 }
 
-List.propTypes = propTypes;
-List.defaultProps = defaultProps;
+const List = ({
+  borderless = false,
+  children,
+  dark = false,
+  layout = '',
+  ordered = false,
+  size = '',
+  xpadding = false,
+}: ListProps) => {
+  const classes = buildCss('pb_list_kit', layout, size, {
+    'dark': dark,
+    'borderless': borderless,
+    'ordered': ordered,
+    'xpadding': xpadding,
+  })
 
-export default List;
+  return (
+    <div className={classes}>
+      <ul>
+        {children}
+      </ul>
+    </div>
+  )
+}
+
+export default List