playbook_ui 15.2.0 → 15.3.0.pre.alpha.PLAY2012currencyallownonstring11930

data/app/pb_kits/playbook/pb_pb_line_graph/pbLineGraphTheme.ts

@@ -0,0 +1,125 @@
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
+
+const pbLineGraphTheme = {
+  title: {
+    text: "",
+    style: {
+      color: colors.text_lt_default,
+      fontFamily: typography.font_family_base,
+      fontWeight: typography.bold,
+      fontSize: typography.heading_3,
+    },
+  },
+  subtitle: {
+    text: "" ,
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_lt_light,
+      fontWeight: typography.regular,
+      fontSize: typography.text_base,
+    },
+  },
+  chart: {
+    type: "line",
+  },
+  tooltip: {
+    backgroundColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, colors.bg_dark],
+        [1, colors.bg_dark],
+      ],
+    },
+    followPointer: true,
+    shadow: false,
+    borderWidth: 0,
+    borderRadius: 10,
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_dk_default,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller,
+    },
+  },
+  plotOptions: {
+    line: {
+      dataLabels: {
+        enabled: false,
+      },
+    },
+  },
+  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,
+    },
+  },
+  colors: [
+    colors.data_1,
+    colors.data_2,
+    colors.data_3,
+    colors.data_4,
+    colors.data_5,
+    colors.data_6,
+    colors.data_7,
+  ],
+  xAxis: {
+    gridLineWidth: 0,
+    lineColor: colors.border_light,
+    tickColor: colors.border_light,
+    labels: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+    title: {
+      style: {
+        color: colors.text_lt_default,
+        fontFamily: typography.font_family_base,
+        fontWeight: typography.regular,
+        fontSize: typography.heading_4,
+      },
+    },
+  },
+  yAxis: {
+    alternateGridColor: undefined as string | undefined,
+    minorTickInterval: null as number | null,
+    gridLineColor: colors.border_light,
+    minorGridLineColor: colors.border_light,
+    lineWidth: 0,
+    tickWidth: 0,
+    tickPixelInterval: 50,
+    labels: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+    title: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+  },
+}
+
+export default pbLineGraphTheme;

data/app/pb_kits/playbook/pb_pb_line_graph/pb_line_graph.html.erb

@@ -0,0 +1 @@
+<%= react_component('PbLineGraph', object.react_props) %>

data/app/pb_kits/playbook/pb_pb_line_graph/pb_line_graph.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbPbLineGraph
+    class PbLineGraph < ::Playbook::KitBase
+      prop :options, default: {}
+
+      def react_props
+        {
+          className: classname,
+          data: data,
+          options: options,
+          id: id,
+        }
+      end
+
+      def classname
+        # Highcharts react needs classname attached to the container div,
+        # we pass an empty string here to avoid conflicts, classname is built in the TSX
+        # We still need generate_classnames to retain ability to pass in custom classnames or global props
+        generate_classname("")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_pb_line_graph/pb_line_graph.test.jsx

@@ -0,0 +1,110 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import { PbLineGraph } from 'playbook-ui'
+
+beforeEach(() => {
+  // Silences error logs within the test suite.
+  jest.spyOn(console, 'error');
+  jest.spyOn(console, 'warn');
+  console.error.mockImplementation(() => {});
+  console.warn.mockImplementation(() => {});
+});
+
+afterEach(() => {
+  console.error.mockRestore();
+  console.warn.mockRestore();
+});
+
+const seriesData = [{
+  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 chartOptions = {
+  series: seriesData,
+  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
+  subtitle: { text: "Source: thesolarfoundation.com" },
+  xAxis: {
+    categories: categories,
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+}
+
+const testId = 'pblinegraph1';
+
+test('Kit to exist', () => {
+  render(
+  <PbLineGraph 
+      data={{testid: testId}} 
+      options={chartOptions} 
+  />
+)
+
+  expect(screen.getByTestId(testId)).toBeInTheDocument()
+})
+
+test('Kit to apply base classname', () => {
+  render(
+    <PbLineGraph 
+        data={{testid: testId}} 
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveClass('pb_pb_line_graph')
+})
+
+test('Kit to have custom class', () => {
+  render(
+    <PbLineGraph 
+        className='custom-class'
+        data={{testid: testId}} 
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveClass('custom-class')
+})
+
+test('Kit to apply global props', () => {
+  render(
+    <PbLineGraph 
+        data={{testid: testId}} 
+        margin="lg"
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveClass('m_lg')
+})
+
+test('kit to apply id', () => {
+  render(
+    <PbLineGraph 
+        data={{testid: testId}} 
+        id='line-graph-id'
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveAttribute('id', 'line-graph-id')
+})

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

@@ -111,7 +111,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   const inputRef = useRef<HTMLInputElement | null>(null)
   const itiRef = useRef<any>(null);
   const [inputValue, setInputValue] = useState(value)
-  const [error, setError] = useState(props.error)
+  const [error, setError] = useState(props.error || "")
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
   const [hasTyped, setHasTyped] = useState(false)
@@ -124,24 +124,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     }
   }, [error, onValidate])
 
-  /*
-    useImperativeHandle exposes the kit's input element to a parent component via a ref.
-    See the Playbook docs for use cases.
-    Read: https://react.dev/reference/react/useImperativeHandle
-  */
-  useImperativeHandle(ref, () => {
-    return {
-      clearField() {
-        setInputValue("")
-        setError("")
-        setHasTyped(false)
-      },
-      inputNode() {
-        return inputRef.current
-      }
-    }
-  })
-
   const unformatNumber = (formattedNumber: any) => {
     return formattedNumber.replace(/\D/g, "")
   }
@@ -164,6 +146,13 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   const validateTooShortNumber = (itiInit: any) => {
     if (!itiInit) return
+
+    // If field is empty, don't show "too short" error
+    if (!inputValue || inputValue.trim() === '') {
+      setError('')
+      return false
+    }
+
     if (itiInit.getValidationError() === ValidationError.TooShort) {
       return showFormattedError('too short')
     } else {
@@ -183,7 +172,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   const validateUnhandledError = (itiInit: any) => {
-    if (!required || !itiInit) return
+    if (!itiInit) return
     if (itiInit.getValidationError() === ValidationError.SomethingWentWrong) {
       if (inputValue.length === 1) {
         return showFormattedError('too short')
@@ -206,14 +195,27 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   const validateRepeatCountryCode = (itiInit: any) => {
     if (!itiInit) return
-    const countryDialCode = itiInit.getSelectedCountryData().dialCode;
+    const countryDialCode = itiRef.current.getSelectedCountryData().dialCode;
     if (unformatNumber(inputValue).startsWith(countryDialCode)) {
       return showFormattedError('repeat country code')
     }
   }
 
+  const validateRequiredField = () => {
+    if (!inputValue || inputValue.trim() === '') {
+      setError('Missing phone number')
+      return true
+    }
+    return false
+  }
 
   const validateErrors = () => {
+    // If field is empty, show error message
+    if (!inputValue || inputValue.trim() === '') {
+      if (validateRequiredField()) return
+      return
+    }
+
     if (!hasTyped && !error) return
 
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
@@ -225,20 +227,105 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     if (validateRepeatCountryCode(itiRef.current)) return
   }
 
+  /*
+    useImperativeHandle exposes the kit's input element to a parent component via a ref.
+    See the Playbook docs for use cases.
+    Read: https://react.dev/reference/react/useImperativeHandle
+  */
+  useImperativeHandle(ref, () => {
+    return {
+      clearField() {
+        setInputValue("")
+        setError("")
+        setHasTyped(false)
+      },
+      inputNode() {
+        return inputRef.current
+      },
+      // Expose validation method for React Hook Form
+      validate() {
+        // Run validation and return error message or true
+        const isEmpty = !inputValue || inputValue.trim() === ''
+
+        if (isEmpty) {
+          // Show missing phone number error
+          const errorMessage = 'Missing phone number'
+          setError(errorMessage)
+          setHasTyped(true)
+          // Only return error for React Hook Form if field is required
+          return required ? errorMessage : true
+        }
+
+        if (!itiRef.current) {
+          return true
+        }
+
+        // Check for repeat country code first
+        const countryDialCode = itiRef.current.getSelectedCountryData().dialCode;
+        if (unformatNumber(inputValue).startsWith(countryDialCode)) {
+          const countryName = itiRef.current.getSelectedCountryData().name
+          const errorMessage = `Invalid ${countryName} phone number (repeat country code)`
+          setError(errorMessage)
+          setHasTyped(true)
+          return errorMessage
+        }
+
+        // Check if it only contains valid characters
+        if (!containOnlyNumbers(inputValue)) {
+          const countryName = itiRef.current.getSelectedCountryData().name
+          const errorMessage = `Invalid ${countryName} phone number (enter numbers only)`
+          setError(errorMessage)
+          setHasTyped(true)
+          return errorMessage
+        }
+
+        // Check if valid number
+        if (!itiRef.current.isValidNumber()) {
+          const countryName = itiRef.current.getSelectedCountryData().name
+          const validationError = itiRef.current.getValidationError()
+          let errorMessage = ''
+
+          if (validationError === ValidationError.TooShort) {
+            errorMessage = `Invalid ${countryName} phone number (too short)`
+          } else if (validationError === ValidationError.TooLong) {
+            errorMessage = `Invalid ${countryName} phone number (too long)`
+          } else if (validationError === ValidationError.MissingAreaCode) {
+            errorMessage = `Invalid ${countryName} phone number (missing area code)`
+          } else {
+            errorMessage = `Invalid ${countryName} phone number`
+          }
+
+          setError(errorMessage)
+          setHasTyped(true)
+
+          return errorMessage
+        }
+
+        // Clear error if valid
+        setError('')
+        return true
+      }
+    }
+  })
+
   const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
     return { ...itiInit.getSelectedCountryData(), number: inputValue }
   }
 
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     if (!hasTyped) setHasTyped(true)
+
     setInputValue(evt.target.value)
+
     let phoneNumberData
+
     if (formatAsYouType) {
       const formattedPhoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
       phoneNumberData = {...formattedPhoneNumberData, number: unformatNumber(formattedPhoneNumberData.number)}
     } else {
       phoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
     }
+
     setSelectedData(phoneNumberData)
     onChange(phoneNumberData)
     isValid(itiRef.current.isValidNumber())
@@ -287,11 +374,26 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
       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>);
-      });
+
+      // Handle formatAsYouType with input event
+      if (formatAsYouType) {
+        inputRef.current.addEventListener("input", (evt: Event) => {
+          const target = evt.target as HTMLInputElement
+          const formattedValue = target.value
+
+          // Update internal state
+          setInputValue(formattedValue)
+          setHasTyped(true)
+
+          // Get phone number data with unformatted number
+          const formattedPhoneNumberData = getCurrentSelectedData(telInputInit, formattedValue)
+          const phoneNumberData = {...formattedPhoneNumberData, number: unformatNumber(formattedPhoneNumberData.number)}
+
+          setSelectedData(phoneNumberData)
+          onChange(phoneNumberData)
+          isValid(telInputInit.isValidNumber())
+        })
+      }
     }
   }, [])
 
@@ -300,13 +402,13 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     dark,
     "data-phone-number": JSON.stringify(selectedData),
     disabled,
-    error,
+    error: hasTyped ? error : props.error,
     type: 'tel',
     id,
     label,
     name,
     onBlur: validateErrors,
-    onChange: handleOnChange,
+    onChange: formatAsYouType ? undefined : handleOnChange,
     value: inputValue
   }
 

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-multi-comp */
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import {
   Popper,
@@ -24,6 +24,7 @@ import { uniqueId } from '../utilities/object';
 type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth' | 'maxHeight' | 'minHeight'>
 
 type PbPopoverProps = {
+  appendTo?: string;
   aria?: { [key: string]: string };
   className?: string;
   closeOnClick?: "outside" | "inside" | "any";
@@ -62,6 +63,25 @@ const popoverModifiers = ({
   return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
 };
 
+const getAppendTarget = (
+  appendTo: string | undefined,
+  targetId: string
+): HTMLElement => {
+  if (!appendTo || appendTo === "body") return document.body;
+
+  if (appendTo === "parent") {
+    const referenceWrapper = document.querySelector(`#reference-${targetId}`);
+    if (referenceWrapper?.parentElement) {
+      return referenceWrapper.parentElement;
+    }
+  }
+
+  const selectorMatch = document.querySelector(appendTo);
+  if (selectorMatch instanceof HTMLElement) return selectorMatch;
+
+  return document.body;
+};
+
 const Popover = (props: PbPopoverProps) => {
   const {
     aria = {},
@@ -89,7 +109,7 @@ const Popover = (props: PbPopoverProps) => {
   const popoverSpacing =
     filteredGlobalProps.includes("dark") || !filteredGlobalProps
       ? "p_sm"
-      : filteredGlobalProps 
+      : filteredGlobalProps
   const overflowHandling = maxHeight || maxWidth ? "overflow_handling" : "";
   const zIndexStyle = zIndex ? { zIndex: zIndex } : {};
   const widthHeightStyles = () => {
@@ -113,7 +133,7 @@ const Popover = (props: PbPopoverProps) => {
 
   return (
     <Popper
-        modifiers={popoverModifiers({ modifiers, offset })}
+        modifiers={popoverModifiers({ modifiers, offset: offset || false })}
         placement={placement}
         referenceElement={referenceElement}
     >
@@ -154,6 +174,7 @@ const Popover = (props: PbPopoverProps) => {
 const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
   const [targetId] = useState(uniqueId('id-'))
   const {
+    appendTo,
     className,
     children,
     modifiers = [],
@@ -170,42 +191,56 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
     minHeight,
     minWidth,
     width,
+    closeOnClick,
+    shouldClosePopover = noop,
   } = props;
 
+  // Store latest callback in a ref to avoid re-runs
+  const shouldClosePopoverRef = useRef(shouldClosePopover);
+
+  // Update ref on change
   useEffect(() => {
-    const { closeOnClick, shouldClosePopover = noop } = props;
+    shouldClosePopoverRef.current = shouldClosePopover;
+  }, [shouldClosePopover]);
 
+  useEffect(() => {
     if (!closeOnClick) return;
 
-    document.body.addEventListener(
-      "click",
-      (e: MouseEvent) => {
-        const target = e.target as HTMLElement
+    // Function to handle popover event listener and targetId.
+    // Ensure that whenever the component is conditionally rendered
+    // that the old listener is removed and the new listener is
+    // updated with the targetId.
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement
 
-        const targetIsPopover =
-          target.closest("#" + targetId) !== null;
-        const targetIsReference =
-          target.closest("#reference-" + targetId) !== null;
+      const targetIsPopover =
+        target.closest("#" + targetId) !== null;
+      const targetIsReference =
+        target.closest("#reference-" + targetId) !== null;
 
-        const shouldClose = () => {
-          setTimeout(() => shouldClosePopover(true), 0);
-        }
+      const shouldClose = () => {
+        setTimeout(() => shouldClosePopoverRef.current(true), 0);
+      }
 
-        switch (closeOnClick) {
-          case "outside":
-            if (!targetIsPopover && !targetIsReference) shouldClose();
-            break;
-          case "inside":
-            if (targetIsPopover) shouldClose();
-            break;
-          case "any":
-            if (targetIsPopover || !targetIsPopover && !targetIsReference) shouldClose();
-            break;
-        }
-      },
-      { capture: true }
-    );
-  }, []);
+      switch (closeOnClick) {
+        case "outside":
+          if (!targetIsPopover && !targetIsReference) shouldClose();
+          break;
+        case "inside":
+          if (targetIsPopover) shouldClose();
+          break;
+        case "any":
+          if (targetIsPopover || !targetIsPopover && !targetIsReference) shouldClose();
+          break;
+      }
+    };
+
+    document.body.addEventListener("click", handleClick, { capture: true });
+
+    return () => {
+      document.body.removeEventListener("click", handleClick, { capture: true });
+    };
+  }, [targetId, closeOnClick]);
 
   const popoverComponent = (
     <Popover
@@ -246,10 +281,10 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
         {show &&
           (usePortal ? (
             <>
-              {ReactDOM.createPortal(
-                popoverComponent,
-                document.querySelector(portal)
-              )}
+                {ReactDOM.createPortal(
+                  popoverComponent,
+                  getAppendTarget(appendTo, targetId)
+                )}
             </>
           ) : (
             { popoverComponent }