playbook_ui 2.8.7 → 2.8.8

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

@@ -4,7 +4,20 @@ import Currency from "../_currency.jsx"
 function CurrencyDefault() {
   return (
     <div>
-      <Currency />
+      <Currency
+          label='Caption'
+          value='2,000'
+      />
+      <Currency
+          align='center'
+          label='Caption'
+          value='2,000'
+      />
+      <Currency
+          align='right'
+          label='Caption'
+          value='2,000'
+      />
     </div>
   )
 }

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

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

data/app/pb_kits/playbook/pb_currency/docs/example.yml

@@ -3,7 +3,6 @@ examples:
   rails:
   - currency_small: Small
   - currency_large: Large
-
-
   react:
-  - currency_default: Default
+  - currency_default: Small
+  - currency_large: Large

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

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

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.jsx

@@ -3,9 +3,7 @@ import DashboardValue from "../_dashboard_value.jsx"
 
 function DashboardValueDefault() {
   return (
-    <div>
-      <DashboardValue />
-    </div>
+    <h1>{`Coming Soon...`}</h1>
   )
 }
 

data/app/pb_kits/playbook/pb_dashboard_value/docs/example.yml

@@ -3,7 +3,5 @@ examples:
   rails:
   - dashboard_value_default: Full Example
   - dashboard_value_align: Align
-
-
   react:
   - dashboard_value_default: Default

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -4,7 +4,7 @@ import Date from "../_date.jsx"
 function DateDefault() {
   return (
     <div>
-      <Date />
+      <h1>{`Coming Soon...`}</h1>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx

@@ -4,7 +4,7 @@ import Icon from "../_icon.jsx"
 function IconDefault() {
   return (
     <div>
-      <Icon />
+      <h1>{`Coming Soon...`}</h1>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.jsx

@@ -9,9 +9,7 @@ const propTypes = {
 class IconCircle extends React.Component {
   render() {
     return (
-      <div className="pb_icon_circle">
-        <span>ICON CIRCLE CONTENT</span>
-      </div>
+      <h1>{`Coming Soon...`}</h1>
     )
   }
 }

data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_default.jsx

@@ -3,9 +3,7 @@ import IconValue from "../_icon_value.jsx"
 
 function IconValueDefault() {
   return (
-    <div>
-      <IconValue />
-    </div>
+    <h1>{`Coming Soon...`}</h1>
   )
 }
 

data/app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.jsx

@@ -3,9 +3,7 @@ import LabelPill from "../_label_pill.jsx"
 
 function LabelPillDefault() {
   return (
-    <div>
-      <LabelPill />
-    </div>
+    <h1>{`Coming Soon...`}</h1>
   )
 }
 

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

@@ -3,9 +3,7 @@ import LabelValue from "../_label_value.jsx"
 
 function LabelValueDefault() {
   return (
-    <div>
-      <LabelValue />
-    </div>
+    <h1>{`Coming Soon...`}</h1>
   )
 }
 

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

@@ -1,31 +1,63 @@
-import React from 'react';
-import PropTypes from "prop-types";
+/* @flow */
 
-const propTypes = {
-  className: PropTypes.string,
-  text: PropTypes.string
-};
+import React from "react"
 
-const defaultProps = {
-  text: "I am a react kit"
-};
+import pbChart from "../plugins/pb_chart_plugin.js"
 
-class LineGraph extends React.Component {
-  render() {
-    const {
-      className,
-      text
-    } = this.props;
-
-    return (
-      <div className={className}>
-        <span>{text}</span>
-      </div>
-    )
-  }
+type LineGraphProps = {
+    axisTitle?: String,
+    className?: String,
+    chartData: Array<{
+        name: String,
+        data: Array<Number>,
+    }>,
+    gradient?: Boolean,
+    id: String,
+    pointStart: Number,
+    subTitle?: String,
+    title: String,
 }
 
-LineGraph.propTypes = propTypes;
-LineGraph.defaultProps = defaultProps;
+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,
+        })
+    }
 
-export default LineGraph;
+    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

@@ -0,0 +1,34 @@
+import React from "react"
+import LineGraph from "../_line_graph.jsx"
+
+const data = [{
+    name: 'Installation',
+    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+}, {
+    name: 'Manufacturing',
+    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
+}, {
+    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: 'Other',
+    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
+}]
+
+const LineGraphDefault = () => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="line-test"
+        pointStart={1}
+        subTitle="Source: thesolarfoundation.com"
+        title="Solar Employment Growth by Sector, 2010-2016"
+    />
+  </div>
+)
+
+export default LineGraphDefault

data/app/pb_kits/playbook/pb_line_graph/docs/example.yml

@@ -1,5 +1,8 @@
 examples:
+  
   rails:
-  - rails: Line Graph
+  - line_graph_default: Default
+  
+  
   react:
-  - react: Line Graph
+  - line_graph_default: Default

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

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

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

@@ -1,15 +1,15 @@
-import commonSettings from "../pb_dashboard/commonSettings.js";
+import commonSettings from "../pb_dashboard/commonSettings.js"
 
 const markerStyles = function(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;
+  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 pbLineGraph = function(highchart) {
-  commonSettings(highchart);
-  markerStyles(highchart);
-};
+  commonSettings(highchart)
+  markerStyles(highchart)
+}
 
-export default pbLineGraph;
+export default pbLineGraph

data/app/pb_kits/playbook/pb_list/docs/_list_default.jsx

@@ -5,11 +5,7 @@ import ListItem from "../_list_item.jsx"
 
 function ListDefault() {
   return (
-    <List>
-      <ListItem>{`List Item`}</ListItem>
-      <ListItem>{`List Item`}</ListItem>
-      <ListItem>{`List Item`}</ListItem>
-    </List>
+    <h1>{`Coming Soon...`}</h1>
   )
 }
 

data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx

@@ -3,9 +3,7 @@ import Message from "../_message.jsx"
 
 function MessageDefault() {
   return (
-    <div>
-      <Message />
-    </div>
+    <h1>{`Coming Soon...`}</h1>
   )
 }
 

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx

@@ -3,9 +3,7 @@ import OnlineStatus from "../_online_status.jsx"
 
 function OnlineStatusDefault() {
   return (
-    <div>
-      <OnlineStatus />
-    </div>
+    <h1>{`Coming Soon...`}</h1>
   )
 }
 

data/app/pb_kits/playbook/pb_owner/docs/_owner_default.jsx

@@ -3,9 +3,7 @@ import Owner from "../_owner.jsx"
 
 function OwnerDefault() {
   return (
-    <div>
-      <Owner />
-    </div>
+    <h1>{`Coming Soon...`}</h1>
   )
 }
 

data/app/pb_kits/playbook/pb_owner_phone/docs/_owner_phone_default.jsx

@@ -3,9 +3,7 @@ import OwnerPhone from "../_owner_phone.jsx"
 
 function OwnerPhoneDefault() {
   return (
-    <div>
-      <OwnerPhone />
-    </div>
+    <h1>{`Coming Soon...`}</h1>
   )
 }
 

data/app/pb_kits/playbook/pb_phone/docs/_phone_default.jsx

@@ -3,9 +3,7 @@ import Phone from "../_phone.jsx"
 
 function PhoneDefault() {
   return (
-    <div>
-      <Phone />
-    </div>
+    <h1>{`Coming Soon...`}</h1>
   )
 }
 

data/app/pb_kits/playbook/pb_pill/_pill.jsx

@@ -1,21 +1,27 @@
-import React from 'react';
-import PropTypes from "prop-types";
+/* @flow */
+/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string
-};
+import React from 'react'
+import Body from '../pb_body/_body.jsx'
 
-class Pill extends React.Component {
-  render() {
-    return (
-      <div className="pb_pill">
-        <span>PILL CONTENT</span>
-      </div>
-    )
-  }
+type PillProps = {
+  className?: String,
+  id?: String,
+  text: String,
+  variant?: 'success' | 'warning' | 'error' | 'info' | 'neutral',
 }
 
-Pill.propTypes = propTypes;
+const Pill = ({ className, id, text, variant }: PillProps) => (
+  <div className={`pb_pill_kit_${variant} ${className}`}>
+    <Body tag="span">
+      {text}
+    </Body>
+  </div>
+)
+
+Pill.defaultProps = {
+  className: "",
+  variant: "neutral"
+};
 
-export default Pill;
+export default Pill