playbook_ui 2.8.7 → 2.8.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0a42e419ff336721df276fdf3b5b42e13645c628f60a08b07637934cc2d98974
-  data.tar.gz: 2b58fa57e6183c3a85ecd8a9b5b8f37b1eebbc948f12cf0bb96e6794f60fe44a
+  metadata.gz: 61c58765172511056b14d6c3ecf08d6770d79ec343011f55da235ef43d337737
+  data.tar.gz: f7789d51bc27282142e0ad087f0b06337988409370aeaf1ab3be7c89a8e4b665
 SHA512:
-  metadata.gz: '04357696dbf7422c03cb9743c7f9c580bd7ceb1f9ed0ca766fdc51dac963d84c4d032d5cee74548077c3eeeb8ab4911257a59062e3a433851d8b416af9cec0fa'
-  data.tar.gz: 37d577d1189723e118498e326177ddaa7fc1d7041fa8217535bda8b10b45f564ee65eb0d0edcf7a955463f205ef4077dc90dad5b855568654fd4232028643fa5
+  metadata.gz: '068062e848cb483ce0e9c174a37eb4f3ba203ed06e113a7d79338267aa69b51d6f02580e6a443c76a757ca03f0053dd5f250a095a0b0f94a7fe23b11e808aef4'
+  data.tar.gz: 522f98246b9a15eced512ab65ceb75b155c9796514fc9822882b28f823674a210725749c998bf56c271fe4d24ccaafa3c0a69b07be5a34be5038bc23cb336d84

data/app/pb_kits/playbook/packs/examples.js

@@ -45,6 +45,9 @@ WebpackerReact.setup (input);
 import * as BarGraph from "pb_bar_graph/docs";
 WebpackerReact.setup (BarGraph);
 
+import * as LineGraph from "pb_line_graph/docs";
+WebpackerReact.setup (LineGraph);
+
 import * as Icon from "pb_icon/docs";
 WebpackerReact.setup (Icon);
 

data/app/pb_kits/playbook/packs/kits.js

@@ -10,6 +10,7 @@ import "./pb_table.js";
 import "./pb_avatar.js";
 import "./pb_input.js";
 import "./pb_bar_graph.js";
+import "./pb_line_graph.js";
 import "./pb_icon.js";
 import "./pb_dashboard_value.js";
 import "./pb_time.js";

data/app/pb_kits/playbook/pb_avatar/_avatar.jsx

@@ -35,46 +35,35 @@ const PbStatus = ({ size, status } : { size: String, status: String }) => (
   <div className={`pb_online_status_kit_${status} size_${size}`}/>
 )
 
-class Avatar extends React.Component<AvatarProps> {
-  static defaultProps = {
-    name: null,
-    size: 'md'
-  }
-  
-  props: AvatarProps
-
-  render() {
-    const {
-      className,
-      name,
-      size,
-      status,
-      url
-    } = this.props
+const Avatar = ({
+  className,
+  name=null,
+  size='md',
+  status,
+  url
+}: AvatarProps) => {
+  const css = classnames([
+    `pb_avatar_kit`,
+    `avatar_${size}`,
+    className,
+  ])
 
-    const css = classnames([
-      `pb_avatar_kit`,
-      `avatar_${size}`,
-      className,
-    ])
-
-    return (
-      <div className={css}
+  return (
+    <div className={css}
+        data-initials={initials(name)}
+    >
+      <div 
+          className="avatar_wrapper"
           data-initials={initials(name)}
       >
-        <div 
-            className="avatar_wrapper"
-            data-initials={initials(name)}
-        >
-          {image(url, name)}
-        </div>
-        <PbStatus 
-            size={size}
-            status={status}
-        />
+        {image(url, name)}
       </div>
-    )
-  }
+      <PbStatus 
+          size={size}
+          status={status}
+      />
+    </div>
+  )
 }
 
 export default Avatar

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

@@ -1,21 +1,61 @@
-import React from 'react';
-import PropTypes from "prop-types";
+/* @flow */
 
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string
-};
+import React from 'react'
+
+import pbChart from "../plugins/pb_chart_plugin.js"
+
+type BarGraphProps = {
+  axisTitle: String,
+  chartData: Array<{
+    name: String,
+    data: Array<Number>,
+  }>,
+  className?: String,
+  id: Number,
+  pointStart: Number,
+  subTitle?: String,
+  title: String,
+}
+
+export default class BarGraph extends React.Component<BarGraphProps> {
+  static defaultProps = {
+    className: 'pb_bar_graph',
+    type: 'column',
+  }
+
+  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: BarGraphProps
 
-class BarGraph extends React.Component {
   render() {
+    const { className, id } = this.props
+
     return (
-      <div className="pb_bar_graph">
-        <div id="highcharts-5nzaf00-0" />
-      </div>
+      <div
+          className={className}
+          id={id}
+      />
     )
   }
 }
-
-BarGraph.propTypes = propTypes;
-
-export default BarGraph;

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

@@ -1,24 +1,24 @@
-import commonSettings from "../pb_dashboard/commonSettings.js";
+import commonSettings from "../pb_dashboard/commonSettings.js"
 
 const sizeColumns = function(highchart) {
-    let column = highchart.plotOptions.column;
-    let series = highchart.plotOptions.series;
+    let column = highchart.plotOptions.column
+    let series = highchart.plotOptions.series
     
-    column.borderRadius = 0;
-    column.pointPadding = 0.3;
-    column.groupPadding = 0.2;
+    column.borderRadius = 0
+    column.pointPadding = 0.3
+    column.groupPadding = 0.2
 
-    series.borderWidth = 0;
-    series.shadow = false;
-    series.pointPadding = 0.3;
-    series.groupPadding = 0.2;
-    series.borderWidth = 0;
-    series.shadow = false;
-};
+    series.borderWidth = 0
+    series.shadow = false
+    series.pointPadding = 0.3
+    series.groupPadding = 0.2
+    series.borderWidth = 0
+    series.shadow = false
+}
 
 const pbBarGraph = function(highchart) {
-  commonSettings(highchart);
-  sizeColumns(highchart);
-};
+  commonSettings(highchart)
+  sizeColumns(highchart)
+}
 
-export default pbBarGraph;
+export default pbBarGraph

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb

@@ -15,6 +15,13 @@
     data: [18111]
 }] %>
 
-<%= pb_rails("bar_graph", props: { id: "bar-test", chart_data: data, point_start: "2012", title: 'Solar Employment Growth by Sector, 2010-2016', subtitle: 'Source: thesolarfoundation.com', axis_title: 'Number of Employees' }  ) %>
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-test",
+    point_start: "2012",
+    subtitle: 'Source: thesolarfoundation.com',
+    title: 'Solar Employment Growth by Sector, 2010-2016'
+}) %>
 
 

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

@@ -1,12 +1,34 @@
 import React from "react"
 import BarGraph from "../_bar_graph.jsx"
 
-function BarGraphDefault() {
-  return (
-    <div>
-      <BarGraph />
-    </div>
-  )
-}
+const chartData = [{
+  name: 'Installation',
+  data: [154175]
+}, {
+  name: 'Manufacturing',
+  data: [40434]
+}, {
+  name: 'Sales & Distribution',
+  data: [39387]
+}, {
+  name: 'Project Development',
+  data: [34227]
+}, {
+  name: 'Other',
+  data: [18111]
+}]
 
-export default BarGraphDefault;
+const BarGraphDefault = () => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="bar-test"
+        pointStart={2012}
+        subTitle="Source: thesolarfoundation.com"
+        title="Solar Employment Growth by Sector, 2010-2016"
+    />
+  </div>
+)
+
+export default BarGraphDefault

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

@@ -1,36 +1,49 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-
-const propTypes = {
-  text: PropTypes.string.isRequired,
-  tag: PropTypes.string,
-  color: PropTypes.string,
-  dark: PropTypes.bool
-};
-
-const defaultProps = {
-  text: "Hello Body Component",
-  tag: "p",
-  color: "",
-  dark: false
-};
-
-class Body extends Component {
-  render() {
-    const { tag, text, color, dark } = this.props;
-    // If color prop is not an empty string then render the given class
-    const colorstyle = color !== "" ? `_${color}` : "";
-
-    // If dark prop is true add the '-dark' class
-    const themestyle = dark === true ? "_dark" : "";
-
-    const Tag = `${tag}`;
-
-    return <Tag className={"body" + colorstyle + themestyle}>{text}</Tag>;
-  }
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+
+type BodyProps = {
+  className?: String,
+  children?: Array<React.ReactChild>,
+  color: 'light' | 'lighter',
+  dark?: Boolean,
+  status?: 'negative' | 'positive',
+  tag: String,
+  text?: String,
 }
 
-Body.propTypes = propTypes;
-Body.defaultProps = defaultProps;
+const bodyCSS = ({
+  color='light',
+  dark=false,
+  status='',
 
-export default Body;
+}: BodyProps) => {
+
+  const colorStyle = color !== '' ? `_${color}` : ''
+  
+  const themeStyle = dark === true ? '_dark' : ''
+
+  const statusStyle = status !== '' ? `_${status}` : ''
+
+  return 'pb_body_kit' + colorStyle + themeStyle + statusStyle
+}
+
+const Body = (props: BodyProps) => {
+  const {
+    className,
+    children,
+    text, 
+    tag='p',
+  } = props
+
+  const Tag = `${tag}`
+    
+  return (
+    <Tag className={classnames(bodyCSS(props), className)}>
+      { text || children }
+    </Tag>
+  )
+}
+
+export default Body

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

@@ -7,6 +7,9 @@ function BodyDark() {
       <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)" />
+
+      <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>
   )
 }

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

@@ -7,6 +7,9 @@ function BodyLight() {
       <Body text="I am a body kit (Default)" />
       <Body color="light" text="I am a body kit (Light)" />
       <Body color="lighter" text="I am a body kit (Lighter)" />
+
+      <Body status="negative" text="I am a body kit (Status: negative)" />
+      <Body status="positive" text="I am a body kit (Status: positive)" />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -1,40 +1,109 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-
-const propTypes = {
-  text: PropTypes.string.isRequired,
-  type: PropTypes.oneOf(["primary", "danger", "dashed"]),
-  size: PropTypes.oneOf(["large", "medium", "small"]),
-  dark: PropTypes.bool,
-  wrapperclass: PropTypes.string,
-  componentclass: PropTypes.string
-};
-
-const defaultProps = {
-  text: "Button",
-  type: null,
-  size: null,
-  dark: false,
-  wrapperclass: 'kit_btn_wrapper',
-  componentclass: ''
-
-};
-
-class Button extends Component {
-  render() {
-    const { text, type, size, dark, wrapperclass, componentclass} = this.props;
-
-    return (
-      <div className={wrapperclass}>
-        <button className={'pb_button' + (type !== null ? `_${type}` : "" ) + (size !== null ? `_${size}` : "" ) + (dark === true ? "_dark" : "") + (componentclass !== "" ? `${componentclass}` : ""  )}>
-            <span>{text}</span>
-        </button>
-      </div>
-    );
-  }
+/* @flow */
+
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+type ButtonPropTypes = {
+  aria?: {
+    label: String,
+  },
+  children?: Array<React.ReactChild>,
+  dark: Boolean,
+  disabled?: Boolean,
+  fixedWidth?: Boolean,
+  fullWidth?: Boolean,
+  icon?: String,
+  loading?: Boolean,
+  newWindow?: Boolean,
+  size: 'large' | 'medium' | 'small',
+  text?: String,
+  type: 'inline' | null,
+  variant: 'primary' | 'secondary' | 'link',
+  wrapperClass: String,
+}
+
+const buttonClassName = (props: ButtonPropTypes) => {
+  const {
+    dark=false,
+    disabled=false,
+    fullWidth=false,
+    loading=false,
+    size=null,
+    type='inline',
+    variant='primary',
+  } = props
+
+  let className = 'pb_button_kit'
+
+  className    += `${variant !== null ? `_${variant}` : ''}`
+  className    += `${type !== null ? `_${type}` : ''}`
+  className    += `${size !== null ? `_${size}` : ''}`
+  className    += `${dark === true ? '_dark' : ''}`
+  className    += `${fullWidth ? '_block' : ''}`
+  className    += disabled ? '_disabled' : '_enabled'
+  className    += loading ? '_loading' : ''
+
+  return className
+}
+
+const buttonAriaProps = (props: ButtonPropTypes) => {
+  const { aria }  = props
+  if(typeof aria !== "object") return {}
+  const { label } = aria
+
+  let ariaProps = {}
+
+  if(label !== null) ariaProps['aria-label'] = label
+
+  return ariaProps
 }
 
-Button.propTypes = propTypes;
-Button.defaultProps = defaultProps;
+const Button = (props : ButtonPropTypes) => {
+  const {
+    aria={},
+    children,
+    icon=null,
+    loading=false,
+    link=null,
+    newWindow=false,
+    text,
+  } = props
+
+  const buttonAria  = buttonAriaProps(props)
+  const css         = buttonClassName(props)
+  const loadingIcon = <i className="pb_icon_kit far fa-spinner fa-fw fa-pulse loading-icon"/>
+
+  const content     = (
+    <span className="pb_button_content">
+      <If condition={icon !== null}>
+        <i className={`pb_icon_kit far fa-${icon} fa-fw`}/>
+      </If>
+      <span>{text || children}</span>
+    </span>
+  )
+
+  return (
+    <If condition={link !== null}>
+      <a
+          {...buttonAria}
+          className={css}
+          href={link}
+          target={newWindow ? '_blank' : null}
+      >
+        <If condition={loading}>
+          {loadingIcon}
+        </If>
+        {content}
+      </a>
+    <Else/>
+      <button {...buttonAria} className={css}>
+        <If condition={loading}>
+            {loadingIcon}
+        </If>
+        {content}
+      </button>
+    </If>
+  )
+}
 
-export default Button;
+export default Button