playbook_ui 15.0.0.pre.alpha.PLAY2467contactkitinternational10329 → 15.0.0.pre.alpha.PLAY2473rowhighlightfix10512

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -110,12 +110,20 @@ module Playbook
         svg["class"] = %w[pb_custom_icon svg-inline--fa].concat([object.custom_icon_classname]).join(" ")
         svg["id"] = object.id
         svg["data"] = object.data
-        svg["aria"] = object.aria
         svg["height"] = "auto"
         svg["width"] = "auto"
         svg["tabindex"] = object.tabindex
         fill_color = object.color || "currentColor"
         doc.at_css("path")["fill"] = fill_color
+
+        if object.aria.present?
+          object.aria.each do |key, value|
+            k = key.to_s
+            attr = k.start_with?("aria-") ? k : "aria-#{k.tr('_', '-')}"
+            svg[attr] = value
+          end
+        end
+
         raw doc
       rescue OpenURI::HTTPError, StandardError
         # Handle any exceptions and return an empty string

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb

@@ -1,3 +1,3 @@
 <%= pb_content_tag do %>
-    <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
+    <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true, aria: { "aria-label": "#{object.icon} icon" } }) %>
 <% end %>

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -16,6 +16,7 @@ type LoadingInlineProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   text?: string,
+  variant?: "dotted" | "solid" ,
 }
 
 const LoadingInline = (props: LoadingInlineProps) => {
@@ -28,6 +29,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
     htmlOptions = {},
     id,
     text = ' Loading',
+    variant = 'dotted',
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -54,7 +56,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
         <Icon
             aria={{ label: 'loading icon' }}
             fixedWidth
-            icon="spinner"
+            icon={variant === 'dotted' ? 'spinner' : variant === 'solid' ? 'spinner-solid' : undefined}
             pulse
         />
         {text}

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("loading_inline", props: {text: "Dotted Spinner", variant: "dotted"}) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: {text: "Solid Spinner", variant: "solid"}) %>

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { LoadingInline } from 'playbook-ui'
+
+const LoadingInlineVariant = (props) => {
+  return (
+    <div>
+      <LoadingInline 
+          text=" Dotted Spinner" 
+          variant="dotted" 
+          {...props}
+      />
+
+      <br />
+  
+      <LoadingInline
+          text=" Solid Spinner"
+          variant="solid"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default LoadingInlineVariant

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

@@ -3,9 +3,11 @@ examples:
   rails:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
+  - loading_inline_variant: Variant
 
   
   
   react:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
+  - loading_inline_variant: Variant

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

@@ -1,2 +1,3 @@
 export { default as LoadingInlineDefault } from './_loading_inline_default.jsx'
 export { default as LoadingInlineCustom } from './_loading_inline_custom.jsx'
+export { default as LoadingInlineVariant } from './_loading_inline_variant.jsx'

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb

@@ -1,6 +1,6 @@
 <%= pb_content_tag do %>
 
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
-    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> <%= object.text %>
+    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: object.spinner_icon, pulse: true }) %> <%= object.text %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb

@@ -8,10 +8,21 @@ module Playbook
                    default: "left"
       prop :dark, type: Playbook::Props::Boolean, default: false
       prop :text, type: Playbook::Props::String, default: "Loading"
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[dotted solid],
+                     default: "dotted"
 
       def classname
         generate_classname("pb_loading_inline_kit", align)
       end
+
+      def spinner_icon
+        if variant == "dotted"
+          "spinner"
+        elsif variant == "solid"
+          "spinner-solid"
+        end
+      end
     end
   end
 end

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}) %>

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

@@ -0,0 +1,36 @@
+import React from 'react'
+import { PbBarGraph } from 'playbook-ui'
+
+
+const chartData = [{
+  name: 'Number of Installations',
+  data: [1475, 200, 3000, 654, 656],
+}]
+
+const chartOptions = {
+  series: chartData,
+  title: {
+    text: 'Bar Graph with Legend',
+  },
+  xAxis: {
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+  },
+  yAxis: {
+    title: {
+      text: 'Number of Employees',
+    },
+  },
+  legend: { enabled: true },
+}
+
+const PbBarGraphLegend = () => {
+  
+  return (
+    <div>
+      <PbBarGraph
+          options={chartOptions}
+      />
+    </div>
+  )
+}
+export default PbBarGraphLegend