playbook_ui 14.22.0.pre.rc.7 → 14.23.0.pre.alpha.PLAY2205atborderbug9085

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

@@ -1,24 +1,43 @@
 import React from 'react'
-import LineGraph from '../../pb_line_graph/_line_graph'
+import lineGraphTheme from '../lineGraphTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
 const data = [{
   name: 'Number of Installations',
   data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
 }]
 
-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 categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
 
-export default LineGraphLegend
+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

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

@@ -1,24 +1,49 @@
 import React from 'react'
-import LineGraph from '../../pb_line_graph/_line_graph'
+import lineGraphTheme from '../lineGraphTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
 const data = [{
   name: 'Number of Installations',
   data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
 }]
 
-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 categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
 
-export default LineGraphLegendNonclickable
+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

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

@@ -1,5 +1,7 @@
 import React from 'react'
-import LineGraph from '../../pb_line_graph/_line_graph'
+import lineGraphTheme from '../lineGraphTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 import Title from '../../pb_title/_title'
 
 const data = [{
@@ -19,66 +21,109 @@ const data = [{
   data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
 }]
 
-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>
-)
+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>
+  )
+}
 
 export default LineGraphLegendPosition

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

@@ -1,17 +1,14 @@
 ##### Prop
 
 `align` **Type**: String | **Values**: left | center | right (defaults to center)
-`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults to bottom)
 `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 alignmnet. Negative x moves it to the left, positive x moves it to the right
-
+`x` offsets the legend relative to its horizontal alignment. Negative x moves it to the left, positive x moves it to the right
 
-- `y` offsets the legend relative to its vertical alignmnet. Negative y moves it up, positive y moves it down.
+`y` offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down.

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

@@ -11,7 +11,6 @@ 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,4 +4,3 @@ 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,7 +50,21 @@ const lineGraphTheme = {
     },
   },
   credits: { enabled: false },
-  legend: { 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,
+    },
+  },
   colors: [
     colors.data_1,
     colors.data_2,
@@ -88,6 +102,7 @@ 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,6 +38,7 @@ type PhoneNumberInputProps = {
   required?: boolean,
   value?: string,
   formatAsYouType?: boolean,
+  strictMode?: boolean,
   countrySearch?: boolean,
 }
 
@@ -68,7 +69,7 @@ const containOnlyNumbers = (value: string) => {
   return /^[()+\-\ .\d]*$/g.test(value)
 }
 
-const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefObject<unknown>) => {
+const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>) => {
   const {
     aria = {},
     className,
@@ -94,6 +95,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     preferredCountries = [],
     value = "",
     formatAsYouType = false,
+    strictMode = false,
     countrySearch = false,
   } = props
 
@@ -106,15 +108,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     className
   )
 
-  const inputRef = useRef<HTMLInputElement>()
+  const inputRef = useRef<HTMLInputElement | null>(null)
   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)
@@ -131,6 +134,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       clearField() {
         setInputValue("")
         setError("")
+        setHasTyped(false)
       },
       inputNode() {
         return inputRef.current
@@ -201,6 +205,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   }
 
   const validateErrors = () => {
+    if (!hasTyped && !error) return
+
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
     if (validateOnlyNumbers(itiRef.current)) return
     if (validateTooLongNumber(itiRef.current)) return
@@ -214,6 +220,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   }
 
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    if (!hasTyped) setHasTyped(true)
     setInputValue(evt.target.value)
     let phoneNumberData
     if (formatAsYouType) {
@@ -251,6 +258,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       countrySearch: countrySearch,
       fixDropdownWidth: false,
       formatAsYouType: formatAsYouType,
+      strictMode: strictMode,
       hiddenInput: hiddenInputs ? () => ({
         phone: `${name}_full`,
         country: `${name}_country_code`,
@@ -259,16 +267,17 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
 
     itiRef.current = telInputInit;
 
-    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))
+    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("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>);
@@ -303,12 +312,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
         {...htmlProps}
     >
       <TextInput
-          ref={
-            inputNode => {
-              ref ? ref.current = inputNode : null
-              inputRef.current = inputNode
+          ref={inputNode => {
+            if (ref) {
+              if (typeof ref === 'function') {
+                ref(inputNode)
+              } else {
+                (ref as React.MutableRefObject<HTMLInputElement | null>).current = inputNode
+              }
             }
-          }
+            inputRef.current = inputNode
+          }}
           {...textInputProps}
       />
     </div>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("phone_number_input", props: {
+    strict_mode: true,
+}) %>
+
+<%= pb_rails("body", props: { text: "With format_as_you_type" }) %>
+
+<%= pb_rails("phone_number_input", props: {
+    strict_mode: true,
+    format_as_you_type: true,
+}) %>

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

@@ -0,0 +1,26 @@
+import React from "react";
+
+import Body from '../../pb_body/_body'
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+
+const PhoneNumberInputStrictMode = (props) => {
+
+    return (
+        <>
+            <PhoneNumberInput
+                id="strict"
+                strictMode
+                {...props}
+            />
+            <Body>With formatAsYouType</Body>
+            <PhoneNumberInput
+                formatAsYouType
+                id="strict"
+                strictMode
+                {...props}
+            />
+        </>
+    );
+};
+
+export default PhoneNumberInputStrictMode;

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.md

@@ -0,0 +1,3 @@
+Ignore any irrelevant characters and cap the length at the maximum valid number length.
+
+This can be combined with `format_as_you_type` / `formatAsYouType`. 

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

@@ -10,6 +10,7 @@ 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:
@@ -20,5 +21,6 @@ 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

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

@@ -7,4 +7,5 @@ export { default as PhoneNumberInputValidation } from './_phone_number_input_val
 export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
 export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
 export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
+export { default as PhoneNumberInputStrictMode } from './_phone_number_input_strict_mode'
 export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -25,6 +25,8 @@ module Playbook
                    default: ""
       prop :format_as_you_type, type: Playbook::Props::Boolean,
                                 default: false
+      prop :strict_mode, type: Playbook::Props::Boolean,
+                         default: false
       prop :hidden_inputs, type: Playbook::Props::Boolean,
                            default: false
       prop :country_search, type: Playbook::Props::Boolean,
@@ -41,6 +43,7 @@ module Playbook
           disabled: disabled,
           error: error,
           formatAsYouType: format_as_you_type,
+          strictMode: strict_mode,
           hiddenInputs: hidden_inputs,
           initialCountry: initial_country,
           label: label,

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -104,8 +104,8 @@ const Table = (props: TableProps): React.ReactElement => {
 
             stickyLeftColumn.forEach((colId, index) => {
                 const isLastColumn = index === stickyLeftColumn.length - 1;
-                const header = document.querySelector(`th[id="${colId}"]`);
-                const cells = document.querySelectorAll(`td[id="${colId}"]`);
+                const header = document.querySelector(`th[data-sticky-id="${colId}"]`);
+                const cells = document.querySelectorAll(`td[data-sticky-id="${colId}"]`);
 
                 if (header) {
                     header.classList.add('sticky');
@@ -155,8 +155,8 @@ const Table = (props: TableProps): React.ReactElement => {
 
             stickyRightColumnReversed.forEach((colId, index) => {
                 const isLastColumn = index === stickyRightColumn.length - 1;
-                const header = document.querySelector(`th[id="${colId}"]`);
-                const cells = document.querySelectorAll(`td[id="${colId}"]`);
+                const header = document.querySelector(`th[data-sticky-id="${colId}"]`);
+                const cells = document.querySelectorAll(`td[data-sticky-id="${colId}"]`);
 
                 if (header) {
                     header.classList.add('sticky');

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx

@@ -11,7 +11,7 @@ const TableStickyColumns = () => {
         >
             <thead>
                 <tr>
-                    <th id="a">{'Column 1'}</th>
+                    <th data-sticky-id="a">{'Column 1'}</th>
                     <th>{'Column 2'}</th>
                     <th>{'Column 3'}</th>
                     <th>{'Column 4'}</th>
@@ -25,12 +25,12 @@ const TableStickyColumns = () => {
                     <th>{'Column 12'}</th>
                     <th>{'Column 13'}</th>
                     <th>{'Column 14'}</th>
-                    <th id="b">{'Column 15'}</th>
+                    <th data-sticky-id="b">{'Column 15'}</th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
-                    <td id="a">{'Value 1'}</td>
+                    <td data-sticky-id="a">{'Value 1'}</td>
                     <td>{'Value 2'}</td>
                     <td>{'Value 3'}</td>
                     <td>{'Value 4'}</td>
@@ -44,10 +44,10 @@ const TableStickyColumns = () => {
                     <td>{'Value 12'}</td>
                     <td>{'Value 13'}</td>
                     <td>{'Value 14'}</td>
-                    <td id="b">{'Value 15'}</td>
+                    <td data-sticky-id="b">{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td id="a">{'Value 1'}</td>
+                    <td data-sticky-id="a">{'Value 1'}</td>
                     <td>{'Value 2'}</td>
                     <td>{'Value 3'}</td>
                     <td>{'Value 4'}</td>
@@ -61,10 +61,10 @@ const TableStickyColumns = () => {
                     <td>{'Value 12'}</td>
                     <td>{'Value 13'}</td>
                     <td>{'Value 14'}</td>
-                    <td id="b">{'Value 15'}</td>
+                    <td data-sticky-id="b">{'Value 15'}</td>
                 </tr>
                 <tr>
-                    <td id="a">{'Value 1'}</td>
+                    <td data-sticky-id="a">{'Value 1'}</td>
                     <td>{'Value 2'}</td>
                     <td>{'Value 3'}</td>
                     <td>{'Value 4'}</td>
@@ -78,7 +78,7 @@ const TableStickyColumns = () => {
                     <td>{'Value 12'}</td>
                     <td>{'Value 13'}</td>
                     <td>{'Value 14'}</td>
-                    <td id="b">{'Value 15'}</td>
+                    <td data-sticky-id="b">{'Value 15'}</td>
                 </tr>
             </tbody>
         </Table>