playbook_ui 15.0.0.pre.alpha.PLAY1981sectionseparatorverticalchildren10469 → 15.0.0.pre.alpha.PLAY2316advancedtablerightsidedoubleborder10543

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: beebed5195f6f2c522c519d24ce8aa2a27a20930c5906d01e4b520090124f9dd
-  data.tar.gz: 3565e7d64af9cbc82f99acda07aeb6c6b52ea7d2f491b2b608319c5b039d14f9
+  metadata.gz: e0c3fe96a9d9d0e199c64d40a6a6a4f54795a5d5bea0d09095b03f1bb67d3e00
+  data.tar.gz: 416ac4bd8c2e809ee145f0570c1400e30a98c5ce09d14ac9dca1f1d9b95f735c
 SHA512:
-  metadata.gz: 6efde4dee4133412db838ba6214414d84b633f2aaf1957a866dfaa33eaafcdefb20c899139d99710af71d0396edb53d9b74555d0c1b4e8229fc4abaeff5bbfbd
-  data.tar.gz: d251ebbd371c08eb3d30ba283f51cbd0797e712797002d0f3a49f910a082aa7a5b36977e379c9b4fee07c58c2c79c30052778d0fc43bbb629bcc80f41cefe41b
+  metadata.gz: 2081dc9d97752a41527261ce3bde29367358d469e36be63abbf83ba51ce9d7d1abb95cd1ad25569d6a56c0dad543d55a05a7a26c0276e985ab5351237ebc9604
+  data.tar.gz: 65fc099869b9bbb4236c17e01d42954aad67cb3cf84c7ec97c16285ca56cd1aee9ac98e620ca2daf000faa7e7e9eadc42f294d7eb6251162f306aead406507f4

data/app/pb_kits/playbook/_playbook.scss

@@ -108,6 +108,7 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import 'pb_empty_state/empty_state';
+@import 'pb_pb_bar_graph/pb_bar_graph';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -29,6 +29,7 @@ const TableCellRenderer = ({
   columnPinning,
   customRowStyle,
   columnDefinitions,
+  isMultiHeaderColumn = false,
 }: {
   row: Row<GenericObject>
   collapsibleTrail?: boolean
@@ -37,12 +38,18 @@ const TableCellRenderer = ({
   columnPinning: { left: string[] }
   customRowStyle?: GenericObject
   columnDefinitions?: {[key:string]:any}[]
+  isMultiHeaderColumn?: boolean
 }) => {
   return (
     <>
       {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
         const isPinnedLeft = columnPinning.left.includes(cell.column.id);
+        // Add a border to the right of each group of columns for multi-header column tables
         const isLastCell = (() => {
+          if (!isMultiHeaderColumn) {
+            return false;
+          }
+
           const parent = cell.column.parent;
           if (!parent) {
             const last = row.getVisibleCells().at(-1);
@@ -132,6 +139,8 @@ export const RegularTableView = ({
 
   const columnPinning = table.getState().columnPinning || { left: [] };
   const columnDefinitions = table.options.meta?.columnDefinitions || [];
+  const isMultiHeaderColumn = columnDefinitions.some(obj => "columns" in obj);
+
   // Row pinning
   function PinnedRow({ row }: { row: Row<any> }) {
     const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
@@ -156,6 +165,7 @@ export const RegularTableView = ({
             columnDefinitions={columnDefinitions}
             columnPinning={columnPinning}
             customRowStyle={customRowStyle}
+            isMultiHeaderColumn={isMultiHeaderColumn}
             loading={loading}
             row={row}
             stickyLeftColumn={stickyLeftColumn}
@@ -220,6 +230,7 @@ export const RegularTableView = ({
                   columnDefinitions={columnDefinitions}
                   columnPinning={columnPinning}
                   customRowStyle={customRowStyle}
+                  isMultiHeaderColumn={isMultiHeaderColumn}
                   loading={loading}
                   row={row}
                   stickyLeftColumn={stickyLeftColumn}

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

@@ -4,7 +4,6 @@ examples:
   - bar_graph_default: Default
   - bar_graph_legend: Legend
   - bar_graph_legend_position: Legend Position
-  - bar_graph_legend_non_clickable: Legend Non Clickable
   - bar_graph_height: Height
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -210,10 +210,12 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
           className="input_wrapper"
       >
 
-        <Caption
-            className="pb_date_picker_kit_label"
-            text={hideLabel ? null : label}
-        />
+        {!hideLabel && (
+          <Caption
+              className="pb_date_picker_kit_label"
+              text={label}
+          />
+        )}
           <>
             <div className="date_picker_input_wrapper">
               <input

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -35,6 +35,7 @@ type FixedConfirmationToastProps = {
 
 const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.ReactElement => {
   const [showToast, toggleToast] = useState(true);
+
   const {
     autoClose = 0,
     children,
@@ -87,8 +88,15 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
     <>
       {showToast && (
         <div
+            aria-atomic="true"
+            aria-live="polite"
             className={css}
             onClick={handleClick}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") handleClick();
+            }}
+            role="status"
+            tabIndex={0}
             {...htmlProps}
         >
           {returnedIcon && icon !== "none" && (
@@ -111,6 +119,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
 
           {closeable && (
             <Icon
+                aria={{ "label": "Close Toast" }}
                 className="pb_icon"
                 cursor="pointer"
                 fixedWidth={false}

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -1,6 +1,6 @@
-<%= pb_content_tag do %>
+<%= pb_content_tag(:div, "aria-atomic": "true", "aria-live": "polite", role: "status", tabindex: 0, onkeydown: "if(event.key==='Enter'||event.key===' '){ this.remove(); }" ) do %>
     <% if object.icon_value && object.icon_value != "none" %>
-    <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
+    <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true, aria: { "aria-label": "#{object.icon_value} icon" } }) %>
     <% end %>
     <% if content %>
         <%= content %>
@@ -8,5 +8,5 @@
         <%= pb_rails("title", props: { text: object.text, size: 4, flex: "1", classname: "pb_fixed_confirmation_toast_text" }) %>
     <% end %>
 
-    <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true }) if object.closeable %>
+    <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true, aria: { "aria-label": "Close Toast" } }) if object.closeable %>
 <% end %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -91,6 +91,7 @@
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
+  <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label" } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>

data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx

@@ -0,0 +1,62 @@
+import React, { useMemo } from "react"
+import { globalProps } from "../utilities/globalProps";
+import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+
+import pbBarGraphTheme from "./pbBarGraphTheme"
+
+import classnames from "classnames";
+
+type PbBarGraphProps = {
+  
+  options: Record<string, unknown>
+  className?: string
+  aria?: { [key: string]: string };
+  data?: { [key: string]: string };
+  id: string;
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)};
+}
+
+const PbBarGraph = ({
+  aria = {},
+  data = {},
+  id,
+  htmlOptions = {},
+  options,
+  className = "pb_pb_bar_graph",
+}: PbBarGraphProps): React.ReactElement => {
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
+
+  const mergedOptions = useMemo(() => {
+    if (!options || typeof options !== "object") {
+      // eslint-disable-next-line no-console
+      console.error("❌ Invalid options passed to <BarGraph />", options)
+      return {}
+    }
+
+    return Highcharts.merge({}, pbBarGraphTheme, options)
+  }, [options])
+
+  return (
+  
+    <div>
+      <HighchartsReact
+          containerProps={{
+                  className: classnames(globalProps, className),
+                  id: id,
+                  ...ariaProps,
+                  ...dataProps,
+                  ...htmlProps
+                }}
+          highcharts={Highcharts}
+          options={mergedOptions}
+      />
+    </div>
+  )
+}
+
+export default PbBarGraph

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb

@@ -0,0 +1,35 @@
+<% chart_data = [{
+    name: 'Installation',
+    data: [1475,200,3000,654,656]
+}, {
+    name: 'Manufacturing',
+    data: [4434,524,2320,440,500]
+}, {
+    name: 'Sales & Distribution',
+    data: [3387,743,1344,434,440,]
+}, {
+    name: 'Project Development',
+    data: [3227,878,999,780,1000]
+}, {
+    name: 'Other',
+    data: [1111,677,3245,500,200]
+}] %>
+
+<% chart_options = {
+  series: chart_data,
+  title: {
+    text: "Bar Graph with Custom Data Colors",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+  colors: ['#1CA05C', '#FD804C', '#144075', '#00C4D7', '#DA0014'],
+}
+%>
+
+<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { PbBarGraph } from 'playbook-ui'
+import colors from '../../tokens/exports/_colors.module.scss'
+
+const chartData = [{
+  name: 'Installation',
+  data: [1475, 200, 3000, 654, 656],
+}, {
+  name: 'Manufacturing',
+  data: [4434, 524, 2320, 440, 500],
+}, {
+  name: 'Sales & Distribution',
+  data: [3387, 743, 1344, 434, 440],
+}, {
+  name: 'Project Development',
+  data: [3227, 878, 999, 780, 1000],
+}, {
+  name: 'Other',
+  data: [1111, 677, 3245, 500, 200],
+}]
+
+const chartOptions = {
+  series: chartData,
+  title: {
+    text: "Bar Graph with Custom Data Colors",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+  colors: [colors.data_4, colors.data_5, colors.data_6, colors.data_7, colors.data_8],
+}
+
+const PbBarGraphColors = () => {
+
+  return (
+    <div>
+      <PbBarGraph
+          options={chartOptions}
+      />
+    </div>
+  )
+}
+
+export default PbBarGraphColors

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md

@@ -0,0 +1 @@
+Custom data colors allow for color customization to match the needs of business requirements. To accomplish this, you can use hex values.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md

@@ -0,0 +1,2 @@
+Custom data colors allow for color customization to match the needs of business requirements.
+You can use Playbook's color tokens or use hex values.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb

@@ -0,0 +1,38 @@
+<% chart_data = [{
+    name: 'Installation',
+    data: [1475,200,3000,654,656]
+}, {
+    name: 'Manufacturing',
+    data: [4434,524,2320,440,500]
+}, {
+    name: 'Sales & Distribution',
+    data: [3387,743,1344,434,440,]
+}, {
+    name: 'Project Development',
+    data: [3227,878,999,780,1000]
+}, {
+    name: 'Other',
+    data: [1111,677,3245,500,200]
+}] %>
+
+
+<% chart_options = {
+  series: chart_data,
+  title: {
+    text: 'Solar Employment Growth by Sector, 2010-2016',
+  },
+  subtitle: {
+    text: 'Source: thesolarfoundation.com',
+  },
+  xAxis: {
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+  },
+  yAxis: {
+    title: {
+      text: 'Number of Employees',
+    },
+  },
+}
+%>
+
+<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { PbBarGraph } from 'playbook-ui'
+
+  const chartData = [{
+    name: 'Installation',
+    data: [1475, 200, 3000, 654, 656],
+  }, {
+    name: 'Manufacturing',
+    data: [4434, 524, 2320, 440, 500],
+  }, {
+    name: 'Sales & Distribution',
+    data: [3387, 743, 1344, 434, 440],
+  }, {
+    name: 'Project Development',
+    data: [3227, 878, 999, 780, 1000],
+  }, {
+    name: 'Other',
+    data: [1111, 677, 3245, 500, 200],
+  }]
+
+  const chartOptions = {
+    series: chartData,
+    title: {
+      text: 'Solar Employment Growth by Sector, 2010-2016',
+    },
+    subtitle: {
+      text: 'Source: thesolarfoundation.com',
+    },
+    xAxis: {
+      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+    },
+    yAxis: {
+      title: {
+        text: 'Number of Employees',
+      },
+    },
+  }
+
+const PbBarGraphDefault = (props) => {
+
+  return (
+    <div>
+      <PbBarGraph
+          {...props}
+          options={chartOptions}
+      />
+    </div>
+  )
+}
+
+export default PbBarGraphDefault

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb

@@ -0,0 +1,46 @@
+<% chart_data = [{
+    name: 'Number of Installations',
+    data: [1475,200,3000,654,656]
+}] %>
+
+<% chart_options_pixel = {
+ chart: {
+    height: "300"
+  },
+  series: chart_data,
+  title: {
+    text: "Fixed Height (300px)",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  }
+} %>
+
+<%= pb_rails("pb_bar_graph", props: {options: chart_options_pixel}) %>
+
+<br /><br />
+
+<% chart_options_percentage = {
+ chart: {
+    height: "50%"
+  },
+  series: chart_data,
+  title: {
+    text: "Percentage Height (50%)",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  }
+} %>
+
+<%= pb_rails("pb_bar_graph", props: {options: chart_options_percentage}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { PbBarGraph } from 'playbook-ui'
+
+const chartData = [{
+  name: 'Number of Installations',
+  data: [1475, 200, 3000, 654, 656],
+}]
+
+const pixelHeightChartOptions = {
+  chart: {
+    height: "300"
+  },
+  series: chartData,
+  title: {
+    text: "Fixed Height (300px)",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+};
+
+const percentageHeightChartOptions = {
+  chart: {
+    height: "50%"
+  },
+  series: chartData,
+  title: {
+    text: "Percentage Height (50%)",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+};
+
+
+
+const PbBarGraphHeight = () => (
+  <div>
+      <PbBarGraph
+          options={pixelHeightChartOptions}
+      />
+
+    <br />
+    <br />
+
+    <PbBarGraph
+        options={percentageHeightChartOptions}
+    />
+  </div>
+)
+
+export default PbBarGraphHeight

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md

@@ -0,0 +1,3 @@
+By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.
+
+Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb

@@ -0,0 +1,47 @@
+<% chart_options = {
+    chart: {
+        type: 'bar'
+    },
+    title: {
+        text: 'Historic World Population by Region',
+        align: 'left'
+    },
+    subtitle: {
+        text: 'Source: <a ' +
+            'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
+            'target="_blank">Wikipedia.org</a>',
+        align: 'left'
+    },
+    xAxis: {
+        categories: ['Africa', 'America', 'Asia', 'Europe'],
+        lineWidth: 0
+    },
+    yAxis: {
+        title: {
+            text: '',
+        },
+    },
+    tooltip: {
+        valueSuffix: ' millions'
+    },
+    plotOptions: {
+        bar: {
+            dataLabels: {
+                enabled: true
+            },
+            groupPadding: 0.1
+        }
+    },
+    series: [{
+        name: 'Year 1990',
+        data: [631, 727, 3202, 721]
+    }, {
+        name: 'Year 2000',
+        data: [814, 841, 3714, 726]
+    }, {
+        name: 'Year 2018',
+        data: [1276, 1007, 4561, 746]
+    }],
+} %>
+
+<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { PbBarGraph } from 'playbook-ui'
+
+
+const chartOptions = {
+    chart: {
+        type: 'bar'
+    },
+    title: {
+        text: 'Historic World Population by Region',
+        align: 'left'
+    },
+    subtitle: {
+        text: 'Source: <a ' +
+            'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
+            'target="_blank">Wikipedia.org</a>',
+        align: 'left'
+    },
+    xAxis: {
+        categories: ['Africa', 'America', 'Asia', 'Europe'],
+        lineWidth: 0
+    },
+    yAxis: {
+        title: {
+            text: '',
+        },
+    },
+    tooltip: {
+        valueSuffix: ' millions'
+    },
+    plotOptions: {
+        bar: {
+            dataLabels: {
+                enabled: true
+            },
+            groupPadding: 0.1
+        }
+    },
+    series: [{
+        name: 'Year 1990',
+        data: [631, 727, 3202, 721]
+    }, {
+        name: 'Year 2000',
+        data: [814, 841, 3714, 726]
+    }, {
+        name: 'Year 2018',
+        data: [1276, 1007, 4561, 746]
+    }],
+}
+
+
+const PbBarGraphHorizontal = () => (
+  <div>
+    <PbBarGraph
+        options={chartOptions}
+    />
+  </div>
+)
+
+export default PbBarGraphHorizontal

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb

@@ -0,0 +1,25 @@
+<% chart_data = [{
+    name: 'Number of Installations',
+    data: [1475,200,3000,654,656]
+}] %>
+
+<% chart_options = {
+  series: chart_data,
+  title: {
+    text: 'Bar Graph with Legend',
+  },
+  xAxis: {
+    categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+  },
+  yAxis: {
+    title: {
+      text: 'Number of Employees',
+    },
+  },
+   legend: {
+        enabled: true
+    },
+}
+%>
+
+<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>