playbook_ui 15.3.0.pre.rc.6 → 15.3.0

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.html.erb

@@ -0,0 +1,27 @@
+<% data = [{ name: "Rating", y: 4.5 }] %>
+
+<% chart_options = {
+title: {
+    text: "Product Rating",
+  },
+  yAxis: {
+    min: 0,
+    max: 5,
+    lineWidth: 0,
+    tickWidth: 0,
+    minorTickInterval: nil,
+    tickAmount: 2,
+    tickPositions: [0, 5],
+    labels: {
+      y: 26,
+      enabled: true,
+      style: {
+        color: '#C1CDD6',
+        fontWeight:'700',
+      }
+    },
+  },
+  series: [{ data: data }],
+} %>
+
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import { colors, typography } from 'playbook-ui'
+
+const data = [{ name: "Rating", y: 4.5 }]
+
+const chartOptions = {
+  title: {
+    text: "Product Rating",
+  },
+  yAxis: {
+    min: 0,
+    max: 5,
+    lineWidth: 0,
+    tickWidth: 0,
+    minorTickInterval: null,
+    tickAmount: 2,
+    tickPositions: [0, 5],
+    labels: {
+      y: 26,
+      enabled: true,
+      style: {
+        color: colors.neutral,
+        fontFamily: typography.font_family_base,
+        fontWeight: typography.bold,
+      }
+    },
+  },
+  series: [{ data: data }],
+};
+const PbGaugeChartMinMax = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartMinMax

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.md

@@ -0,0 +1 @@
+By default, Highcharts set min to 0 and max to 100 but this can be customized if needed as shown here.

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_sizing.html.erb

@@ -0,0 +1,19 @@
+<% chart_options = { series: [{ data:[{ name: "Point 1", y: 100 }] }] } %>
+<% chart_options_1 = { series: [{ data:[{ name: "Point 2", y: 75 }] }] } %>
+<% chart_options_2 = { series: [{ data:[{ name: "Point 3", y: 50 }] }] } %>
+<% chart_options_3 = { series: [{ data:[{ name: "Point 4", y: 25 }] }] } %>
+
+<%= pb_rails("flex", props: {wrap: true, align: "center"}) do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "400px", overflow: "hidden", shrink: true }) do %>
+    <%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px", overflow: "hidden", shrink: true }) do %>
+    <%= pb_rails("pb_gauge_chart", props: { options: chart_options_1 }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "200px", overflow: "hidden", shrink: true }) do %>
+      <%= pb_rails("pb_gauge_chart", props: { options: chart_options_2 }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "155px", overflow: "hidden", shrink: true }) do %>
+    <%= pb_rails("pb_gauge_chart", props: { options: chart_options_3 }) %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_sizing.jsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+
+
+const PbGaugeChartSizing = (props) => (
+  <div>
+    <Flex
+        align="center"
+        wrap
+    >
+      <FlexItem
+          fixedSize="400px"
+          overflow="hidden"
+          shrink
+      >
+        <PbGaugeChart
+            options={{
+              series: [{ data: [{ name: "Point 1", y: 100 }] }],
+            }}
+        />
+      </FlexItem>
+      <FlexItem
+          fixedSize="300px"
+          overflow="hidden"
+          shrink
+      >
+        <PbGaugeChart
+            options={{
+              series: [{ data: [{ name: "Point 2", y: 75 }] }],
+            }}
+            {...props}
+        />
+      </FlexItem>
+      <FlexItem
+          fixedSize="200px"
+          overflow="hidden"
+          shrink
+      >
+        <PbGaugeChart
+            options={{
+              series: [{ data: [{ name: "Point 3", y: 50 }] }],
+            }}
+        />
+      </FlexItem>
+      <FlexItem
+          fixedSize="125px"
+          overflow="hidden"
+          shrink
+      >
+        <PbGaugeChart
+            options={{
+              chart: {
+                height: "100%",
+              },
+              series: [{ data: [{ name: "Point 4", y: 25 }] }],
+            }}
+        />
+      </FlexItem>
+    </Flex>
+  </div>
+)
+
+export default PbGaugeChartSizing

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_sizing.md

@@ -0,0 +1,3 @@
+The Gauge chart resizes dynamically to fit whatever element it's placed within. 
+
+**Note**: set overflow to hidden on the parent element when nesting gauges inside of flex items to best respond to shrinking screens.

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_title.html.erb

@@ -0,0 +1,14 @@
+<% data = [{ name: "Score", y: 780 }] %>
+
+<% chart_options = {
+  title: {
+    text: "Credit Score",
+  },
+  yAxis: {
+    min: 300,
+    max: 850,
+  },
+  series: [{ data: data }],
+} %>
+
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_title.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+
+
+const data = [{ name: "Score", y: 780 }]
+
+const chartOptions = {
+  title: {
+    text: "Credit Score",
+  },
+  yAxis: {
+    min: 300,
+    max: 850,
+  },
+  series: [{ data: data }],
+};
+
+const PbGaugeChartTitle = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartTitle

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.html.erb

@@ -0,0 +1,39 @@
+<% data1 = [{ name: 'Data Used', y: 32 }] %>
+<% data2 = [{ name: 'Sales to Date', y: 65 }] %>
+
+<% chart_options_1 = {
+  title: {
+    text: "Data Usage",
+  },
+  series: [{ data: data1 }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          '<span class="fix">{y:,f}</span>' +
+          '<span style="fill: #687887; font-size: 27px;">GB</span>',
+      },
+    },
+  },
+} %>
+
+<% chart_options_2 = {
+  title: {
+    text: "Sales Goal",
+  },
+  series: [{ data: data2 }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          '<span y="28" style="fill: #687887; font-size: 16px;">$</span>' +
+          '<span class="fix" y="38">{y:,f}</span>' +
+          '<span style="fill: #687887; font-size: 27px;">k</span>',
+      },
+    },
+  },
+} %>
+
+
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options_1 }) %>
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options_2 }) %>

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import { colors, typography } from 'playbook-ui'
+
+
+const data1 = [
+  { name: 'Data Used', y: 32 },
+]
+const data2 = [
+  { name: 'Sales to Date', y: 65 },
+]
+
+const chartOptions1 = {
+  title: {
+    text: "Data Usage",
+  },
+  series: [{ data: data1 }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">GB</span>`,
+      },
+    },
+  },
+};
+const chartOptions2 = {
+  title: {
+    text: "Sales Goal",
+  },
+  series: [{ data: data2 }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span y="28" style="fill: ${colors.text_lt_light}; font-size: ${typography.text_base};">$</span>` +
+          `<span class="fix" y="38">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">k</span>`,
+      },
+    },
+  },
+};
+
+const PbGaugeChartUnits = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions1}
+        {...props}
+    />
+    <PbGaugeChart
+        options={chartOptions2}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartUnits

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.md

@@ -0,0 +1 @@
+Use custom CSS with classes or inline styles (as shown in these docs) to customize the appearance of prefix and suffix units.

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

@@ -0,0 +1,29 @@
+examples:
+  
+  rails:
+  - pb_gauge_chart_default: Default
+  - pb_gauge_chart_disable_animation: Disable Animation
+  - pb_gauge_chart_title: With Title
+  - pb_gauge_chart_units: With Units
+  - pb_gauge_chart_full_circle: Full Circle
+  - pb_gauge_chart_min_max: With Min and Max Labels
+  - pb_gauge_chart_sizing: Sizing
+  - pb_gauge_chart_height: Height
+  - pb_gauge_chart_color: Custom Color
+  - pb_gauge_chart_complex: Complex Example
+  
+  
+  react:
+  - pb_gauge_chart_default: Default
+  - pb_gauge_chart_disable_animation: Disable Animation
+  - pb_gauge_chart_title: With Title
+  - pb_gauge_chart_units: With Units
+  - pb_gauge_chart_full_circle: Full Circle
+  - pb_gauge_chart_min_max: With Min and Max Labels
+  - pb_gauge_chart_sizing: Sizing
+  - pb_gauge_chart_height: Height
+  - pb_gauge_chart_live_data: Live Data
+  - pb_gauge_chart_color: Custom Color
+  - pb_gauge_chart_complex: Complex Example
+  
+  

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

@@ -0,0 +1,11 @@
+export { default as PbGaugeChartDefault } from './_pb_gauge_chart_default.jsx'
+export { default as PbGaugeChartDisableAnimation } from './_pb_gauge_chart_disable_animation.jsx'
+export { default as PbGaugeChartTitle } from './_pb_gauge_chart_title.jsx'
+export { default as PbGaugeChartUnits } from './_pb_gauge_chart_units.jsx'
+export { default as PbGaugeChartFullCircle } from './_pb_gauge_chart_full_circle.jsx'
+export { default as PbGaugeChartMinMax } from './_pb_gauge_chart_min_max.jsx'
+export { default as PbGaugeChartSizing } from './_pb_gauge_chart_sizing.jsx'
+export { default as PbGaugeChartHeight } from './_pb_gauge_chart_height.jsx'
+export { default as PbGaugeChartLiveData } from './_pb_gauge_chart_live_data.jsx'
+export { default as PbGaugeChartColor } from './_pb_gauge_chart_color.jsx'
+export { default as PbGaugeChartComplex } from './_pb_gauge_chart_complex.jsx'

data/app/pb_kits/playbook/pb_pb_gauge_chart/pbGaugeGraphTheme.ts

@@ -0,0 +1,91 @@
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
+
+const pbGaugeGraphTheme = {
+  title: { 
+    text: "",
+    style: {
+      fontFamily: typography.font_family_base,
+      fontSize: typography.text_larger,
+    },
+  },
+  chart: {
+    type: "solidgauge",
+    events: {
+      render() {
+        this.container
+          const arc = this.container.querySelector('path.gauge-pane');
+          if (arc) arc.setAttribute('stroke-linejoin', 'round');
+      }
+    }
+  },
+  pane: {
+    size: "90%",
+    startAngle: -100,
+    endAngle: 100,
+    background: [
+      {
+        borderWidth: 20,
+        innerRadius: "90%",
+        outerRadius: "90%",
+        shape: "arc",
+        className: "gauge-pane",
+        borderColor: colors.border_light,
+        borderRadius: '50%',
+      },
+    ],
+  },
+  tooltip: {
+    backgroundColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, colors.bg_dark],
+        [1, colors.bg_dark],
+      ],
+    },
+    pointFormat:
+      '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
+      "<b>{point.y}</b>",
+    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,
+    },
+  },
+  yAxis: {
+    min: 0,
+    max: 100,
+    lineWidth: 0,
+    tickPositions: [] as number[],
+  },
+  plotOptions: {
+    solidgauge: {
+      borderColor: colors.data_1,
+      borderWidth: 20,
+      color: colors.data_1,
+      radius: 90,
+      innerRadius: "90%",
+      y: -26,
+      dataLabels: {
+        borderWidth: 0,
+        color: colors.text_lt_default,
+        enabled: true,
+        format: '<span class="fix">{y:,f}</span>',
+        style: {
+          fontFamily: typography.font_family_base,
+          fontWeight: typography.regular,
+          fontSize: typography.heading_2,
+        },
+        y: -26,
+      },
+    },
+  },
+  credits: { enabled: false }
+}
+
+export default pbGaugeGraphTheme;

data/app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.html.erb

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

data/app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbPbGaugeChart
+    class PbGaugeChart < ::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_gauge_chart/pb_gauge_chart.test.jsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import { PbGaugeChart } 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 chartOptions = {
+  series:[{data:[{ name: "Name", y: 45 }]}]
+}
+
+const testId = 'pbgaugechart1'
+
+test('Kit to exist', () => {
+  render(
+  <PbGaugeChart
+      data={{testid: testId}} 
+      options={chartOptions} 
+  />
+)
+  expect(screen.getByTestId(testId)).toBeInTheDocument()
+})
+
+test('Kit to apply base classname', () => {
+  render(
+    <PbGaugeChart
+        data={{testid: testId}} 
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveClass('pb_pb_gauge_chart')
+})
+
+test('Kit to have custom class', () => {
+  render(
+    <PbGaugeChart
+        className='custom-class'
+        data={{testid: testId}} 
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveClass('custom-class')
+})
+
+test('Kit to apply global props', () => {
+  render(
+    <PbGaugeChart
+        data={{testid: testId}} 
+        margin="lg"
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveClass('m_lg')
+})
+
+test('kit to apply id', () => {
+  render(
+    <PbGaugeChart
+        data={{testid: testId}} 
+        id='gauge-chart-id'
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveAttribute('id', 'gauge-chart-id')
+})

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_description.md

@@ -1,3 +1,3 @@
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specifc props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
 See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

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

@@ -314,14 +314,18 @@ 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) {
       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())
@@ -370,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())
+        })
+      }
     }
   }, [])
 
@@ -389,7 +408,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     label,
     name,
     onBlur: validateErrors,
-    onChange: handleOnChange,
+    onChange: formatAsYouType ? undefined : handleOnChange,
     value: inputValue
   }
 

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen } from '../utilities/test-utils'
+import { render, screen, fireEvent, waitFor } from '../utilities/test-utils'
 import Typeahead from './_typeahead'
 
 const options = [
@@ -137,4 +137,38 @@ test('typeahead with colored pills', () => {
   const kit = screen.getByTestId('pills-color-test')
   const pill = kit.querySelector(".pb_form_pill_kit.pb_form_pill_neutral")
   expect(pill).toBeInTheDocument()
+})
+
+test('typeahead with defaultValue with focus behavior', async () => {
+  render(
+    <Typeahead
+        data={{ testid: 'default-value-focus-test' }}
+        defaultValue={[options[1]]}
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId('default-value-focus-test')
+  const inputDiv = kit.querySelector(".typeahead-kit-select__single-value")
+  expect(inputDiv).toHaveTextContent("Red")
+  
+  // Test that the control can receive focus
+  const control = kit.querySelector('.typeahead-kit-select__control')
+  expect(control).toBeInTheDocument()
+  
+  // Simulate opening the menu by clicking the control
+  fireEvent.mouseDown(control)
+  
+  // Wait for menu to appear
+  await waitFor(() => {
+    const menu = kit.querySelector('.typeahead-kit-select__menu')
+    expect(menu).toBeInTheDocument()
+  })
+  
+  // Check that the correct option has the focused class
+  await waitFor(() => {
+    const focusedOption = kit.querySelector('.typeahead-kit-select__option--is-focused')
+    expect(focusedOption).toBeInTheDocument()
+    expect(focusedOption).toHaveTextContent('Red')
+  })
 })