playbook_ui 15.3.0.pre.rc.5 → 15.3.0.pre.rc.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2a10aa2c1a72a04076e8102d684e0d1111ebb06b8dcd8f18e4b487adb5936715
-  data.tar.gz: 61dd1d1cb0ebd44fbad5a310cb963cf558da10c852f32d7f9a8ee25598e975e3
+  metadata.gz: 34ba06be9734051d4a626b27aef7c10fd87031ea96146b7e84a2bb88bf228e24
+  data.tar.gz: 87a07d1e661e9b87d04061800858c71334d0f1afb3db434665bdf71ffdae6448
 SHA512:
-  metadata.gz: 3b8d6b5e3cb5d744e5b1bdadc19991e70c72cb90935957dfe37c98d3c6137c4b8a1e8566aa4ff998ab5de69eaa0cdfb86a3af3fbd26b00d81877bdbf3417e367
-  data.tar.gz: 87e6389f1b4f1fa674b675cbe7bca091efdde128bce369bc889635adebe2b96faf07c4ce18bf35bcd26ffe922add9d3d7515cfaf09e669af3ec121b8b1f158a6
+  metadata.gz: 28f45334fc6977a46c98b3532d5e5d87fab74a9c2e669c8ab0861eaf88ee6e500ff59f81fe365d7b5f70890ad6698d450377d335678be5df323c7e627211f9c4
+  data.tar.gz: a32d256d5a5a04669c6bbcd9b4c7b641f200ed1baaa96d544aaf033112ee4bb9db9343b855a2f28443f045dad3b1d5c69332941731bc635269ba5d6532280105

data/app/pb_kits/playbook/_playbook.scss

@@ -1,3 +1,4 @@
+
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
@@ -70,6 +71,7 @@
 @import 'pb_passphrase/passphrase';
 @import 'pb_pb_bar_graph/pb_bar_graph';
 @import 'pb_pb_circle_chart/pb_circle_chart';
+@import 'pb_pb_gauge_chart/pb_gauge_chart';
 @import 'pb_pb_line_graph/pb_line_graph';
 @import 'pb_person/person';
 @import 'pb_person_contact/person_contact';

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -32,9 +32,9 @@ exports[`html structure is correct 1`] = `
                 class="pb_custom_icon svg-inline--fa svg_lg svg_fw"
                 color="currentColor"
                 fill="none"
-                height="1.5em"
+                height="auto"
                 viewBox="0 0 30 25"
-                width="1em"
+                width="auto"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path

data/app/pb_kits/playbook/pb_dropdown/index.js

@@ -522,7 +522,7 @@ export default class PbDropdown extends PbEnhancedElement {
       closeIcon.className = "pb_form_pill_close";
       closeIcon.innerHTML = `<svg class="pb_custom_icon svg-inline--fa svg_${
         this.formPillProps.size === "small" ? "xs" : "sm"
-      } svg_fw" xmlns="http://www.w3.org/2000/svg" width="1em" viewBox="0 0 31 25"><path fill="currentColor" d="M23.0762 6.77734L17.4512 12.4023L23.0293 17.9805C23.498 18.4023 23.498 19.1055 23.0293 19.5273C22.6074 19.9961 21.9043 19.9961 21.4824 19.5273L15.8574 13.9492L10.2793 19.5273C9.85742 19.9961 9.1543 19.9961 8.73242 19.5273C8.26367 19.1055 8.26367 18.4023 8.73242 17.9336L14.3105 12.3555L8.73242 6.77734C8.26367 6.35547 8.26367 5.65234 8.73242 5.18359C9.1543 4.76172 9.85742 4.76172 10.3262 5.18359L15.9043 10.8086L21.4824 5.23047C21.9043 4.76172 22.6074 4.76172 23.0762 5.23047C23.498 5.65234 23.498 6.35547 23.0762 6.77734Z"/></svg>`;
+      } svg_fw" xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 31 25"><path fill="currentColor" d="M23.0762 6.77734L17.4512 12.4023L23.0293 17.9805C23.498 18.4023 23.498 19.1055 23.0293 19.5273C22.6074 19.9961 21.9043 19.9961 21.4824 19.5273L15.8574 13.9492L10.2793 19.5273C9.85742 19.9961 9.1543 19.9961 8.73242 19.5273C8.26367 19.1055 8.26367 18.4023 8.73242 17.9336L14.3105 12.3555L8.73242 6.77734C8.26367 6.35547 8.26367 5.65234 8.73242 5.18359C9.1543 4.76172 9.85742 4.76172 10.3262 5.18359L15.9043 10.8086L21.4824 5.23047C21.9043 4.76172 22.6074 4.76172 23.0762 5.23047C23.498 5.65234 23.498 6.35547 23.0762 6.77734Z"/></svg>`;
       pill.appendChild(closeIcon);
 
       closeIcon.addEventListener("click", (e) => {

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -235,7 +235,8 @@ const Icon = (props: IconProps) => {
               ...htmlProps,
               className: classes,
               id,
-              width: '1em',
+              width: 'auto',
+              height: 'auto',
               ...(props.tabIndex !== undefined && { tabIndex }),
             })
           }

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

@@ -110,7 +110,8 @@ 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["width"] = "1em"
+        svg["height"] = "auto"
+        svg["width"] = "auto"
         svg["tabindex"] = object.tabindex
         fill_color = object.color || "currentColor"
         doc.at_css("path")["fill"] = fill_color

data/app/pb_kits/playbook/pb_list/item.html.erb

@@ -11,7 +11,7 @@
       <% if object.drag_handle %>
         <span style="vertical-align: middle;">
           <%= pb_rails("body") do %>
-            <svg width="14em" viewBox="0 0 31 25" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="pb_custom_icon svg-inline--fa vertical_align_middle  svg_fw"><path d="M12.904 6.355a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm0 7.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm4.5-13.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm-1.5 9a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5z" fill="#242B42"></path></svg>
+            <svg width="auto" height="auto" viewBox="0 0 31 25" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="pb_custom_icon svg-inline--fa vertical_align_middle  svg_fw"><path d="M12.904 6.355a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm0 7.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm4.5-13.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm-1.5 9a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5z" fill="#242B42"></path></svg>
           <% end %>
         </span>
       <% end %>

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

@@ -0,0 +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 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_pb_circle_chart/docs/_description.md

@@ -0,0 +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 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_pb_gauge_chart/_pb_gauge_chart.scss

@@ -0,0 +1,3 @@
+.pb_pb_gauge_chart {
+
+}

data/app/pb_kits/playbook/pb_pb_gauge_chart/_pb_gauge_chart.tsx

@@ -0,0 +1,69 @@
+
+import React, { useMemo } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import pbGaugeGraphTheme from './pbGaugeGraphTheme'
+import highchartsMore from "highcharts/highcharts-more";
+import solidGauge from "highcharts/modules/solid-gauge";
+import { globalProps } from '../utilities/globalProps'
+
+type PbGaugeChartProps = {
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) | ((arg?: Event) => void) },
+  id?: string,
+  ref?: React.RefObject<any>,
+  options: Record<string, unknown>
+}
+
+const PbGaugeChart = (props: PbGaugeChartProps) => {
+  const {
+    aria = {},
+  className,
+  data = {},
+  htmlOptions = {},
+  id,
+  ref,
+  options = {},
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+  const classes = classnames(buildCss('pb_pb_gauge_chart'), globalProps(props), className)
+
+  const mergedOptions = useMemo(() => {
+    if (!options || typeof options !== "object") {
+      // eslint-disable-next-line no-console
+      console.error("❌ Invalid options passed to <PbLineGraph />", options)
+      return {}
+    }
+
+    return Highcharts.merge({}, pbGaugeGraphTheme, options)
+  }, [options])
+
+  highchartsMore(Highcharts);
+  solidGauge(Highcharts);
+
+  return (
+    <div>
+        <HighchartsReact
+            containerProps={{
+                    className: classnames(classes),
+                    id: id,
+                    ref: ref,
+                    ...ariaProps,
+                    ...dataProps,
+                    ...htmlProps
+                  }}
+            highcharts={Highcharts}
+            options={mergedOptions}
+        />
+    </div>
+  )
+}
+
+export default PbGaugeChart

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

@@ -0,0 +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 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_pb_gauge_chart/docs/_pb_gauge_chart_color.html.erb

@@ -0,0 +1,12 @@
+<% data = [{ name: "Name", y: 67 }] %>
+
+<% chart_options = {
+  series: [{ data: data }],
+  plotOptions: {
+    solidgauge: {
+      borderColor: '#00C4D7',
+    }
+  },
+} %>
+
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>

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

@@ -0,0 +1,24 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import { colors } from 'playbook-ui'
+
+const data = [{ name: "Name", y: 67 }]
+
+const chartOptions = {
+  series: [{ data: data }],
+  plotOptions: {
+    solidgauge: {
+      borderColor: colors.data_7,
+    }
+  },
+};
+const PbGaugeChartColor = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartColor

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

@@ -0,0 +1,5 @@
+Highcharts allows for any custom colors to be used. Custom data colors allow for color customization to match the needs of business requirements.
+
+For React, pass the prop `plotOptions.solidgauge.borderColor` with a Playbook token like `colors.` + `data_1 | data_2 | data_3 | data_4 | data_5 | data_6 | data_7 | data_8`. HEX colors are also available `eg: #CA0095`
+
+For Rails, the prop `plotOptions.solidgauge.borderColor` can only be used with HEX values as shown.

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

@@ -0,0 +1,45 @@
+<% chart_options = {
+  series:[{data:[{ name: "Name", y: 10 }]}],
+    chart: {
+    height: "150",
+  },
+  plotOptions: {
+    series: {
+      animation: false,
+    },
+    solidgauge: {
+      dataLabels: {
+        format:
+          '<span class="fix">{y:,f}</span>' +
+          '<span style="fill: #687887; font-size: 27px;">%</span>',
+      },
+    },
+  },
+} %>
+
+<%= pb_rails("flex", props: {wrap: true, padding: "xl", gap: "sm"}) do %>
+  <%= pb_rails("flex/flex_item", props: {flex: 1, grow: true }) do %>
+    <%= pb_rails("card", props: {max_width: "xs", padding: "md", }) do %>
+      <%= pb_rails("title", props: {padding_bottom: "sm", size: 4, text: "Abandoned Calls" })%>
+      <%= pb_rails("flex", props: {align: "stretch"}) do %>
+        <%= pb_rails("flex", props: {margin_right: "sm", orientation: "column"}) do %>
+          <%= pb_rails("body", props: {color: "light", padding_bottom: "sm",text: "Total Abandoned"}) %>
+          <%= pb_rails("flex", props: {align: "baseline", padding_bottom: "sx"}) do %>
+            <%= pb_rails("title", props: {size: 1, text: "39"})%>
+            <%= pb_rails("title", props: {color: "light", size: 3, text: "calls"}) %>
+          <% end %>
+          <%= pb_rails("caption", props: {size: "xs", text: "of 390" }) %>
+        <%end %>
+        <%= pb_rails("section_separator", props: {align_self: "stretch", margin_right: "sm", orientation: "vertical" }) %>
+        <%= pb_rails("flex", props: {orientation: "column", wrap: true}) do %>
+          <%= pb_rails("body", props: {color: "light", text: "% Abandoned"}) %>
+          <%= pb_rails("flex", props: {wrap: true}) do %>
+            <%= pb_rails("flex/flex_item", props: {fixed_size: "150px", overflow: "hidden", shrink: true}) do %>
+              <%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <%end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,119 @@
+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'
+import Card from '../../pb_card/_card'
+import Caption from '../../pb_caption/_caption'
+import Body from '../../pb_body/_body'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+import Title from '../../pb_title/_title'
+import { colors, typography } from 'playbook-ui'
+
+const data = [{ name: "Name", y: 10 }];
+
+const chartOptions = {
+  series: [{ data: data }],
+  chart: {
+    height: "150",
+  },
+  plotOptions: {
+    series: {
+      animation: false,
+    },
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
+      },
+    },
+  },
+};
+
+const PbGaugeChartComplex = (props) => (
+<Flex
+    gap="sm"
+    padding="xl"
+    wrap
+  >
+    <FlexItem
+        flex={1}
+        grow
+    >
+      <Card
+          maxWidth="xs"
+          padding="md"
+      >
+        <Title
+            paddingBottom="sm"
+            size={4}
+            text="Abandoned Calls"
+        />
+        <Flex
+            align="stretch"
+        >
+          <Flex
+              marginRight="sm"
+              orientation="column"
+          >
+            <Body
+                color="light"
+                paddingBottom="sm"
+                text="Total Abandoned"
+            />
+            <Flex
+                align="baseline"
+                paddingBottom="xs"
+            >
+              <Title
+                  size={1}
+                  text="39"
+              />
+              <Title
+                  color="light"
+                  size={3}
+                  text="calls"
+              />
+            </Flex>
+            <Caption
+                size="xs"
+                text="of 390"
+            />
+          </Flex>
+
+          <SectionSeparator
+              alignSelf="stretch"
+              marginRight="sm"
+              orientation="vertical"
+          />
+
+          <Flex
+              orientation="column"
+              wrap
+          >
+              <Body
+                  color="light"
+                  text="% Abandoned"
+              />
+            <Flex
+                wrap
+            >
+              <FlexItem
+                  fixedSize="150px"
+                  overflow="hidden"
+                  shrink
+              >
+                <PbGaugeChart
+                    options={chartOptions}
+                    {...props}
+                />
+               </FlexItem>
+            </Flex>
+          </Flex>
+        </Flex>
+      </Card>
+    </FlexItem>
+  </Flex>
+)
+
+export default PbGaugeChartComplex

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

@@ -0,0 +1 @@
+We are able to wrap the Highcharts Gauge kit within Playbook kits (such as Flex and Card components).

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

@@ -0,0 +1,5 @@
+<% chart_options = {
+  series:[{data:[{ name: "Name", y: 45 }]}]
+} %>
+
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>

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

@@ -0,0 +1,17 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+
+const chartOptions = {
+  series:[{data:[{ name: "Name", y: 45 }]}]
+}
+
+const PbGaugeChartDefault = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartDefault

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

@@ -0,0 +1,12 @@
+<% data = [{ name: "Participants", y: 84 }] %>
+
+<% chart_options = {
+  series: [{ data: data }],
+  plotOptions: {
+    series: {
+      animation: false,
+    },
+  },
+} %>
+
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>

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

@@ -0,0 +1,24 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+
+const data = [{ name: "Participants", y: 84 }]
+
+const chartOptions = {
+  series: [{ data: data }],
+  plotOptions: {
+    series: {
+      animation: false,
+    },
+  },
+};
+
+const PbGaugeChartDisableAnimation = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartDisableAnimation

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

@@ -0,0 +1,23 @@
+<% data = [{ name: "Capacity", y: 75 }] %>
+
+<% chart_options = {
+  title: {
+    text: "Seating Capacity",
+  },
+  series: [{ data: data }],
+  pane: {
+    startAngle: 0,
+    endAngle: 360,
+  },
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          '<span class="fix">{y:,f}</span>' +
+          '<span style="fill: #687887; font-size: 27px;">%</span>',
+      },
+    },
+  },
+} %>
+
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import { colors, typography } from 'playbook-ui'
+
+const data = [{ name: "Capacity", y: 75 }]
+
+const chartOptions = {
+  title: {
+    text: "Seating Capacity",
+  },
+  series: [{ data: data }],
+  pane: {
+    startAngle: 0,
+    endAngle: 360,
+  },
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
+      },
+    },
+  },
+};
+
+
+const PbGaugeChartFullCircle = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartFullCircle

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

@@ -0,0 +1,40 @@
+<% chart_options = {
+  title: {
+    text: "Fixed Height in Pixels",
+  },
+  chart: {
+    height: "400",
+  },
+  series: [{ data: [{ name: "Pixels", y: 400 }] }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          '<span class="fix">{y:,f}</span>' +
+          '<span style="fill: #687887; font-size: 27px;">px</span>',
+      },
+    },
+  },
+} %>
+
+<% chart_options_1 = {
+  title: {
+    text: "Height as Percentage of Width",
+  },
+  chart: {
+    height: "45%",
+  },
+  series: [{ data: [{ name: "Percentage", y: 45 }] }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          '<span class="fix">{y:,f}</span>' +
+          '<span style="fill: #687887; font-size: 27px;">%</span>',
+      },
+    },
+  },
+} %>
+
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>
+<%= pb_rails("pb_gauge_chart", props: { options: chart_options_1 }) %>

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

@@ -0,0 +1,56 @@
+import React from 'react'
+import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
+import { colors, typography } from 'playbook-ui'
+
+const chartOptions = {
+  title: {
+    text: "Fixed Height in Pixels",
+  },
+  chart: {
+    height: "400",
+  },
+  series: [{ data: [{ name: "Pixels", y: 400 }] }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">px</span>`,
+      },
+    },
+  },
+};
+
+const chartOptions2 = {
+  title: {
+    text: "Height as Percentage of Width",
+  },
+  chart: {
+    height: "45%",
+  },
+  series: [{ data: [{ name: "Percentage", y: 45 }] }],
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
+      },
+    },
+  },
+};
+
+const PbGaugeChartHeight = (props) => (
+  <div>
+    <PbGaugeChart
+        options={chartOptions}
+        {...props}
+    />
+    <PbGaugeChart
+        options={chartOptions2}
+        {...props}
+    />
+  </div>
+)
+
+export default PbGaugeChartHeight