playbook_ui_docs 14.18.0.pre.alpha.PLAY20787400 → 14.18.0.pre.alpha.play1736highchartslinegraphdefaultrebuild7431

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b3e7d47a9299088d750906643acac266d30471dfea3e97e02d840a8cc7707f03
-  data.tar.gz: ebcc74afbe19ac073c894c1d73545ab932e36f9f10d850eec84431c20ec4fb24
+  metadata.gz: 1ed5ded613687e87d5e85bd61aca50a0a3b1d91f6e4fd0d420862f4f9bb6d93c
+  data.tar.gz: 41ed9ff7483a19513c769071966b209abf6c63bcfef11417b1a0ece1c294cfde
 SHA512:
-  metadata.gz: caaa753b1c2df935c91ed8576f78af9c52f1f30dd64095ab88cb1447b69a576d6f1984ba2a98ce7563d2b095ead8a247b0f6fdbe51795d8f12b00b6fb4a1e7a5
-  data.tar.gz: b933dc82f82e408a2de8abe712cb3bb9b415db080126748c53cacbd31252394b8951104c77ea1e68ad2ce3c039eefa933bac40ef7ff7139558f338b7060e96d2
+  metadata.gz: 5c6de7619f72b736a1ed4a995bdd66aaa5ec8710465db9e42886b0f7ff5c24152b936c326bd2a71b7ce0e599fae458d065764f7b5892143255993ab7062460f2
+  data.tar.gz: b849fdf0f8ec633ca35e23922957d3e08113bf5723b9c67a02fd5c6a0b8bab9258a4c9b9afeaf610f15cbe3a1cb8583fb28ee45d125c50ab95fb74d57d3a022e

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx

@@ -1,11 +1,14 @@
 import React from 'react'
 
 import DatePicker from '../_date_picker'
+import Icon from '../../pb_icon/_icon'
 
 const DatePickerError = (props) => (
   <div>
     <DatePicker
-        error="Invalid date. Please pick a valid date."
+        error={<>
+          <Icon icon="warning" /> Invalid date. Please pick a valid date.
+        </>}
         pickerId="date-picker-error"
         {...props}
     />

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx

@@ -1,9 +1,12 @@
 import React, { useState } from 'react'
 import Dropdown from '../../pb_dropdown/_dropdown'
+import Icon from '../../pb_icon/_icon'
 
 const DropdownError = (props) => {
     const [selectedOption, setSelectedOption] = useState()
-    const error = selectedOption?.value ? null : "Please make a valid selection"
+    const error = selectedOption?.value ? null : (<>
+        <Icon icon="warning" /> Please make a valid selection
+    </>)
     const options = [
         {
             label: "United States",

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

@@ -0,0 +1,52 @@
+import React from 'react'
+import lineGraphTheme from '../lineGraphTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+
+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 categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+const baseOptions = {
+  series: data,
+  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
+  subtitle: { text: "Source: thesolarfoundation.com" },
+  xAxis: {
+    categories: categories,
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+}
+
+const LineGraphPbStyles = () => {
+  const options = Highcharts.merge({}, lineGraphTheme, baseOptions )
+
+  return(
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
+
+export default LineGraphPbStyles

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

@@ -11,6 +11,7 @@ examples:
 
   react:
   - line_graph_default: Default
+  - line_graph_pb_styles: Playbook Styles
   - line_graph_legend: Legend
   - line_graph_legend_position: Legend Position
   - line_graph_legend_nonclickable: Legend Nonclickable

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

@@ -4,3 +4,4 @@ export { default as LineGraphLegendPosition } from './_line_graph_legend_positio
 export { default as LineGraphLegendNonclickable } from './_line_graph_legend_nonclickable.jsx'
 export { default as LineGraphHeight } from './_line_graph_height.jsx'
 export { default as LineGraphColors } from './_line_graph_colors.jsx'
+export { default as LineGraphPbStyles } from './_line_graph_pb_styles.jsx'

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 import Button from '../../pb_button/_button'
 import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
 import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+import Icon from '../../pb_icon/_icon'
 
 const PhoneNumberInputValidation = (props) => {
     const [formErrors, setFormErrors] = useState("");
@@ -29,6 +30,12 @@ const PhoneNumberInputValidation = (props) => {
         setShowFormErrors(formErrors.length > 0);
     }, [formErrors]);
 
+    const error = (
+        <>
+            <Icon icon="warning" /> Missing phone number.
+        </>
+    )
+
     return (
         <form
             action=""
@@ -43,7 +50,7 @@ const PhoneNumberInputValidation = (props) => {
                 />
             )}
             <PhoneNumberInput
-                error="Missing phone number."
+                error={error}
                 id="validation"
                 initialCountry={countryCode}
                 onChange={handleOnChange}

data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import Body from '../../pb_body/_body'
 import Select from '../../pb_select/_select'
+import Icon from '../../pb_icon/_icon'
 
 const SelectError = (props) => {
   const options = [
@@ -18,10 +19,14 @@ const SelectError = (props) => {
     },
   ]
 
+  const error = (<>
+    <Icon icon="warning" /> Please make a valid selection
+  </>)
+
   return (
     <div>
       <Select
-          error="Please make a valid selection"
+          error={error}
           label="Favorite Food"
           name="food"
           options={options}
@@ -29,7 +34,7 @@ const SelectError = (props) => {
           {...props}
       />
       <Body
-          error="Please make a valid selection"
+          error={error}
           status="negative"
           {...props}
       />

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 
 import TextInput from '../_text_input'
+import Icon from '../../pb_icon/_icon'
 
 const TextInputError = (props) => {
   const [email, setEmail] = useState('')
@@ -8,11 +9,18 @@ const TextInputError = (props) => {
   const handleUpdateEmail = ({ target }) => {
     setEmail(target.value)
   }
+
+  const error = (
+    <>
+      <Icon icon="warning" /> Please enter a valid email address
+    </>
+  )
+  
   return (
     <div>
       <TextInput
           addOn={{ icon: 'user', alignment: 'left', border: true }}
-          error="Please enter a valid email address"
+          error={error}
           label="Email Address"
           onChange={handleUpdateEmail}
           placeholder="Enter email address"

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx

@@ -1,15 +1,21 @@
 import React, {useState} from 'react'
 import Textarea from '../../pb_textarea/_textarea'
+import Icon from '../../pb_icon/_icon'
 
 const TextareaError = (props) => {
   const [value, setValue] = useState('default value text')
   const handleChange = (event) => {
     setValue(event.target.value)
   }
+  const error = (
+    <>
+        <Icon icon="warning" /> This field has an error!
+    </>
+  )
   return (
     <div>
       <Textarea
-          error="This field has an error!"
+          error={error}
           label="Label"
           name="comment"
           onChange={(e)=> handleChange(e)}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 
 import Typeahead from '../_typeahead'
+import Icon from '../../pb_icon/_icon'
 
 const options = [
   { label: 'Orange', value: '#FFA500' },
@@ -10,7 +11,10 @@ const options = [
 ]
 
 const TypeaheadErrorState = (props) => {
-  const [errorState, setErrorState] = useState("Please make a valid selection");
+  const error = (<>
+    <Icon icon="warning" /> Please make a valid selection
+  </>)
+  const [errorState, setErrorState] = useState(error);
   const [searchValue, setSearchValue] = useState(null);
   
   const handleOnChange = (value) => setSearchValue(value)
@@ -19,7 +23,7 @@ const TypeaheadErrorState = (props) => {
       if(searchValue) {
         setErrorState("")
       } else {
-        setErrorState("Please make a valid selection")
+        setErrorState(error)
       }
     }, [searchValue])