playbook_ui 14.23.0.pre.alpha.highchartstest9121 → 14.23.0.pre.rc.0

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

@@ -1,70 +1,38 @@
 import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
+import LineGraph from '../_line_graph'
 
 const data = [{
   name: 'Number of Installations',
   data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
 }]
 
-const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
-const LineGraphHeight = () => {
-  const chartOptionsFirst = {
-    title: {
-      text: 'Fixed Height (300px)',
-    },
-    chart: {
-      height: '300px'
-    },
-    xAxis: {
-      categories: categories,
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: 'Number of Employees',
-      },
-    },
-    series: data
-  }
-
-  const chartOptionsSecond = {
-    title: {
-      text: 'Percentage Height (50%)',
-    },
-    chart: {
-      height: '50%'
-    },
-    xAxis: {
-      categories: categories,
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: 'Number of Employees',
-      },
-    },
-    series: data
-  }
-
-  const optionsFirst = Highcharts.merge({}, lineGraphTheme, chartOptionsFirst)
-  const optionsSecond = Highcharts.merge({}, lineGraphTheme, chartOptionsSecond)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={optionsFirst}
-      />
-
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={optionsSecond}
-      />
-    </div>
-  )
-}
-
-export default LineGraphHeight
+const LineGraphDefault = (props) => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        height="300px"
+        id="line-fixed-height"
+        title="Fixed Height (300px)"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+        {...props}
+    />
+
+    <br />
+    <br />
+
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        height="50%"
+        id="line-percentage-height"
+        title="Percentage Height (50%)"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default LineGraphDefault

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

@@ -1,43 +1,24 @@
 import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
+import LineGraph from '../../pb_line_graph/_line_graph'
 
 const data = [{
   name: 'Number of Installations',
   data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
 }]
 
-const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
+const LineGraphLegend = (props) => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="line-test-2"
+        legend
+        title="Line Graph with Legend"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
 
-const chartOptions = {
-  series: data,
-  title: { text: "Line Graph with Legend" },
-  xAxis: {
-    categories: categories,
-  },
-  yAxis: {
-    min: 0,
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  legend: {
-    enabled: true,
-  },
-}
-
-const LineGraphLegend = () => {
-  const options = Highcharts.merge({}, lineGraphTheme, chartOptions)
-
-  return(
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default LineGraphLegend
+export default LineGraphLegend

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

@@ -1,49 +1,24 @@
 import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
+import LineGraph from '../../pb_line_graph/_line_graph'
 
 const data = [{
   name: 'Number of Installations',
   data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
 }]
 
-const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
+const LineGraphLegendNonclickable = (props) => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="line-test-3"
+        legend
+        title="Line Graph with Legend Non Clickable"
+        toggleLegendClick={false}
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
+        {...props}
+    />
+  </div>
+)
 
-const chartOptions = {
-  title: {
-    text: 'Line Graph with Legend Non Clickable',
-  },
-  xAxis: {
-    categories: categories,
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-  legend: {
-    enabled: true,
-    events: {
-      itemClick: function () {
-        return false;
-      }
-    }
-  },
-  series: data
-}
-
-const LineGraphLegendNonclickable = () => {
-  const options = Highcharts.merge({}, lineGraphTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default LineGraphLegendNonclickable
+export default LineGraphLegendNonclickable

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

@@ -1,7 +1,5 @@
 import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
+import LineGraph from '../../pb_line_graph/_line_graph'
 import Title from '../../pb_title/_title'
 
 const data = [{
@@ -21,109 +19,66 @@ const data = [{
   data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
 }]
 
-const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
-
-const LineGraphLegendPosition = (props) => {
-  const chartOptionsFirst = {
-    title: { text: "Alignment of Legend" },
-    series: data,
-    xAxis: {
-      categories: categories,
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: "Number of Employees",
-      },
-    },
-    legend: {
-      enabled: true,
-      align: 'right',
-      verticalAlign: 'top'
-    },
-  }
-
-  const chartOptionsSecond = {
-    title: { text: "Layout of Legend" },
-    series: data,
-    xAxis: {
-      categories: categories,
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: "Number of Employees",
-      },
-    },
-    legend: {
-      enabled: true,
-      layout: 'vertical'
-    },
-  }
-
-  const chartOptionsThird = {
-    title: { text: "Offset of Legend" },
-    series: data,
-    xAxis: {
-      categories: categories,
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: "Number of Employees",
-      },
-    },
-    legend: {
-      enabled: true,
-      layout: 'vertical',
-      x: 100,
-      y: 10
-    },
-  }
-
-  const optionsFirst = Highcharts.merge({}, lineGraphTheme, chartOptionsFirst)
-  const optionsSecond = Highcharts.merge({}, lineGraphTheme, chartOptionsSecond)
-  const optionsThird = Highcharts.merge({}, lineGraphTheme, chartOptionsThird)
-
-  return (
-    <div>
-      <Title
-          paddingY="sm"
-          size={4}
-          tag="h4"
-          text="align | verticalAlign"
-          {...props}
-      />
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={optionsFirst}
-      />
-      
-      <Title
-          paddingY="sm"
-          size={4}
-          tag="h4"
-          text="layout"
-          {...props}
-      />
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={optionsSecond}
-      />
-      
-      <Title
-          paddingY="sm"
-          size={4}
-          tag="h4"
-          text="x | y"
-          {...props}
-      />
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={optionsThird}
-      />
-    </div>
-  )
-}
+const LineGraphLegendPosition = (props) => (
+  <div>
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="align | verticalAlign"
+    />
+    <LineGraph
+        align='right'
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="legend-position-line"
+        legend
+        title="Alignment of Legend"
+        verticalAlign="top"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
+        yAxisMin={0}
+        {...props}
+    />
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="layout"
+    />
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="legend-position-line-1"
+        layout="vertical"
+        legend
+        title="Layout of Legend"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
+        yAxisMin={0}
+        {...props}
+    />
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="x | y"
+    />
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="legend-position-line-2"
+        layout="vertical"
+        legend
+        title="Offset of Legend"
+        x={100}
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
+        y={10}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
 
 export default LineGraphLegendPosition

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.md

@@ -1,14 +1,17 @@
 ##### Prop
 
 `align` **Type**: String | **Values**: left | center | right (defaults to center)
-`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults to bottom)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
 `layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
 `x` **Type**: Number (defaults to 0)
 `y` **Type**: Number (defaults to 0)
 
-`layout` determines the position of the legend items
+- 
+
+- `layout` determines the position of the legend items
 `layout: proximate` will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
 
-`x` offsets the legend relative to its horizontal alignment. Negative x moves it to the left, positive x moves it to the right
+- `x` offsets the legend relative to its horizontal alignmnet. Negative x moves it to the left, positive x moves it to the right
+
 
-`y` offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down.
+- `y` offsets the legend relative to its vertical alignmnet. Negative y moves it up, positive y moves it down.

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/_line_graph_pb_styles.md

@@ -0,0 +1 @@
+You don't need to use the Line Graph Kit to apply Playbook styles to your Highcharts line graph. Just import lineGraphTheme.ts and merge it with your graph options—Playbook’s styling will apply automatically.

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_line_graph/lineGraphTheme.ts

@@ -50,21 +50,7 @@ const lineGraphTheme = {
     },
   },
   credits: { enabled: false },
-  legend: { 
-    enabled: false,
-    itemStyle: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_lt_light,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-    itemHoverStyle: {
-      color: colors.text_lt_default,
-    },
-    itemHiddenStyle: {
-      color: colors.text_lt_lighter,
-    },
-  },
+  legend: { enabled: false },
   colors: [
     colors.data_1,
     colors.data_2,
@@ -102,7 +88,6 @@ const lineGraphTheme = {
     minorGridLineColor: colors.border_light,
     lineWidth: 0,
     tickWidth: 0,
-    tickPixelInterval: 50,
     labels: {
       style: {
         fontFamily: typography.font_family_base,

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -38,7 +38,6 @@ type PhoneNumberInputProps = {
   required?: boolean,
   value?: string,
   formatAsYouType?: boolean,
-  strictMode?: boolean,
   countrySearch?: boolean,
 }
 
@@ -69,7 +68,7 @@ const containOnlyNumbers = (value: string) => {
   return /^[()+\-\ .\d]*$/g.test(value)
 }
 
-const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>) => {
+const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefObject<unknown>) => {
   const {
     aria = {},
     className,
@@ -95,7 +94,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     preferredCountries = [],
     value = "",
     formatAsYouType = false,
-    strictMode = false,
     countrySearch = false,
   } = props
 
@@ -108,16 +106,15 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     className
   )
 
-  const inputRef = useRef<HTMLInputElement | null>(null)
+  const inputRef = useRef<HTMLInputElement>()
   const itiRef = useRef<any>(null);
   const [inputValue, setInputValue] = useState(value)
   const [error, setError] = useState(props.error)
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
-  const [hasTyped, setHasTyped] = useState(false)
 
   useEffect(() => {
-    if ((error ?? '').length > 0) {
+    if (error?.length > 0) {
       onValidate(false)
     } else {
       onValidate(true)
@@ -134,7 +131,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       clearField() {
         setInputValue("")
         setError("")
-        setHasTyped(false)
       },
       inputNode() {
         return inputRef.current
@@ -205,8 +201,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   const validateErrors = () => {
-    if (!hasTyped && !error) return
-
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
     if (validateOnlyNumbers(itiRef.current)) return
     if (validateTooLongNumber(itiRef.current)) return
@@ -220,7 +214,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
-    if (!hasTyped) setHasTyped(true)
     setInputValue(evt.target.value)
     let phoneNumberData
     if (formatAsYouType) {
@@ -258,7 +251,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       countrySearch: countrySearch,
       fixDropdownWidth: false,
       formatAsYouType: formatAsYouType,
-      strictMode: strictMode,
       hiddenInput: hiddenInputs ? () => ({
         phone: `${name}_full`,
         country: `${name}_country_code`,
@@ -267,17 +259,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
     itiRef.current = telInputInit;
 
-    if (inputRef.current) {
-      inputRef.current.addEventListener("countrychange", (evt: Event) => {
-        const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
-        setSelectedData(phoneNumberData)
-        onChange(phoneNumberData)
-        validateErrors()
-      })
+    inputRef.current.addEventListener("countrychange", (evt: Event) => {
+      const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
+      setSelectedData(phoneNumberData)
+      onChange(phoneNumberData)
+      validateErrors()
+    })
+
+    inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
+    inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
 
-      inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
-      inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
-    }
     if (formatAsYouType) {
       inputRef.current?.addEventListener("input", (evt) => {
         handleOnChange(evt as unknown as React.ChangeEvent<HTMLInputElement>);
@@ -312,16 +303,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
         {...htmlProps}
     >
       <TextInput
-          ref={inputNode => {
-            if (ref) {
-              if (typeof ref === 'function') {
-                ref(inputNode)
-              } else {
-                (ref as React.MutableRefObject<HTMLInputElement | null>).current = inputNode
-              }
+          ref={
+            inputNode => {
+              ref ? ref.current = inputNode : null
+              inputRef.current = inputNode
             }
-            inputRef.current = inputNode
-          }}
+          }
           {...textInputProps}
       />
     </div>

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

@@ -10,7 +10,6 @@ examples:
   - phone_number_input_clear_field: Clearing the Input Field
   - phone_number_input_access_input_element: Accessing the Input Element
   - phone_number_input_format: Format as You Type
-  - phone_number_input_strict_mode: Strict Mode
   - phone_number_input_country_search: Country Search
 
   rails:
@@ -21,6 +20,5 @@ examples:
   - phone_number_input_exclude_countries: Exclude Countries
   - phone_number_input_validation: Form Validation
   - phone_number_input_format: Format as You Type
-  - phone_number_input_strict_mode: Strict Mode
   - phone_number_input_hidden_inputs: Hidden Inputs
   - phone_number_input_country_search: Country Search