playbook_ui_docs 14.23.0.pre.alpha.PLAY2243customindeterminatemaincheckboxlabels9046 → 14.23.0.pre.alpha.PLAY2303optD9000

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e6aa9a9f4c66a252c47c0366fa4b9780e1766b5e74f7f76299e18126da982cf3
-  data.tar.gz: 3a87005bb49c7c0f2b780f175b9552ef28333e467283cc6823c7ba4c505ba5d8
+  metadata.gz: c236c171ceca27545160fdfed4dc5bb252419123f5ae9a5037f14bc032edd923
+  data.tar.gz: '0949388c881098167458cbebdbc50b949574299ec2ad1be156b13b9ea43db6cc'
 SHA512:
-  metadata.gz: 3647332acd0b50048838885b07e3062d2d4b94705c42b2c451d0eeebc6d9d50038e2fbcafeed2b36ae4b13310b4a62da6c1106488299837ab3f89aa9c96c37d2
-  data.tar.gz: d8d3bb26410bb016ac9890abe3c044046db362cc56c5e5a40d4a1825860d9e770867c56fadb3e221301eb4f92b2344c5fea6936c17fd5f1ff32e0a67fdc33555
+  metadata.gz: a22b059c987a2e6c44b795291faf3dedb61f3ac3f257f38daef2bb32655779c8321743f0923a059327616b5eb044f9c38b853a0729a82051a776a0f167267f95
+  data.tar.gz: 226c6c407fa240a25f82ad46f530bb99528ea9b89a08f49ac13a59c909419c451749fdd87d64a67bb025dbc7aba36f5fa38c89a0616b85cf048c8a2a94b88883

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -9,10 +9,10 @@
     <tr>
       <th>
         <%= pb_rails("checkbox", props: {
+          text: "Uncheck All",
           value: "checkbox-value",
           name: "main-checkbox",
           indeterminate_main: true,
-          indeterminate_main_labels: ["Check All Ice Cream", "Uncheck All Ice Cream"],
           id: "indeterminate-checkbox"
         }) %>
       </th>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md

@@ -1,2 +1 @@
-If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.
-If you want to customize the main checkbox labels, set an array `indeterminate_main_labels` with "Check All" and "Uncheck All" labels.
+If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx

@@ -1,36 +1,19 @@
 import React from 'react'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-import colors from '../../tokens/exports/_colors.module.scss'
+import Gauge from '../../pb_gauge/_gauge'
 
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
+const data = [
+  { name: 'Name', value: 67 },
+]
 
-const data = [{ name: "Name", y: 67 }]
+const GaugeColors = (props) => (
+  <div>
+    <Gauge
+        chartData={data}
+        id="gauge-colors"
+        {...props}
+        colors={['data-7']}
+    />
+  </div>
+)
 
-const baseOptions = {
-  series: [{ data: data }],
-  plotOptions: {
-    solidgauge: {
-      borderColor: colors.data_7,
-    }
-  },
-};
-
-const GaugeColors = () => {
-  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default GaugeColors;
+export default GaugeColors

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx

@@ -2,44 +2,14 @@ import React from "react";
 
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
+import Gauge from '../../pb_gauge/_gauge'
 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 gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-import colors from '../../tokens/exports/_colors.module.scss'
-import typography from '../../tokens/exports/_typography.module.scss'
 
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
-
-const data = [{ name: "Name", y: 10 }];
-
-const baseOptions = {
-  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 options = Highcharts.merge({}, gaugeTheme, baseOptions);
+const data = [{ name: "Name", value: 10 }];
 
 const GaugeComplex = (props) => (
   <Flex
@@ -130,9 +100,13 @@ const GaugeComplex = (props) => (
                   shrink
                   {...props}
               >
-                <HighchartsReact
-                    highcharts={Highcharts}
-                    options={options}
+                <Gauge
+                    chartData={data}
+                    disableAnimation
+                    height="150"
+                    id="gauge-complex"
+                    suffix="%"
+                    {...props}
                 />
                </FlexItem>
             </Flex>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx

@@ -1,30 +1,18 @@
 import React from 'react'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
+import Gauge from '../../pb_gauge/_gauge'
 
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
+const data = [
+  { name: 'Name', value: 45 },
+]
 
-const data = [{ name: "Name", y: 45 }]
+const GaugeDefault = (props) => (
+  <div>
+    <Gauge
+        chartData={data}
+        id="gauge-default"
+        {...props}
+    />
+  </div>
+)
 
-const baseOptions = {
-  series: [{ data: data }],
-};
-
-const GaugeDefault = () => {
-  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default GaugeDefault;
+export default GaugeDefault

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx

@@ -1,36 +1,19 @@
 import React from 'react'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
+import Gauge from '../../pb_gauge/_gauge'
 
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
+const data = [
+  { name: 'Participants', value: 84 },
+]
 
-const data = [{ name: "Participants", y: 84 }]
+const GaugeDisableAnimation = (props) => (
+  <div>
+    <Gauge
+        chartData={data}
+        disableAnimation
+        id="gauge-disable-animation"
+        {...props}
+    />
+  </div>
+)
 
-const baseOptions = {
-  series: [{ data: data }],
-  plotOptions: {
-    series: {
-      animation: false,
-    },
-  },
-};
-
-const GaugeDisableAnimation = () => {
-  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-
-  return (
-    <div>
-      <HighchartsReact
-          disableAnimation
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default GaugeDisableAnimation;
+export default GaugeDisableAnimation

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx

@@ -1,49 +1,21 @@
 import React from 'react'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-import colors from '../../tokens/exports/_colors.module.scss'
-import typography from '../../tokens/exports/_typography.module.scss'
+import Gauge from '../../pb_gauge/_gauge'
 
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
+const data = [
+  { name: 'Capacity', value: 75 },
+]
 
-const data = [{ name: "Capacity", y: 75 }]
+const GaugeFullCircle = (props) => (
+  <div>
+    <Gauge
+        chartData={data}
+        fullCircle
+        id="gauge-full-circle"
+        suffix="%"
+        title="Seating Capacity"
+        {...props}
+    />
+  </div>
+)
 
-const baseOptions = {
-  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 GaugeFullCircle = () => {
-  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          id="gauge-full-circle"
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default GaugeFullCircle;
+export default GaugeFullCircle

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx

@@ -1,62 +1,25 @@
 import React from 'react'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-import colors from '../../tokens/exports/_colors.module.scss'
-import typography from '../../tokens/exports/_typography.module.scss'
+import Gauge from '../../pb_gauge/_gauge'
 
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
+const GaugeHeight = (props) => (
+  <div>
+    <Gauge
+        chartData={[ { name: 'Pixels', value: 400 } ]}
+        height="400"
+        id="gauge-height-px"
+        suffix="px"
+        title="Fixed Height in Pixels"
+        {...props}
+    />
+    <Gauge
+        chartData={[ { name: 'Percentage', value: 45 } ]}
+        height="45%"
+        id="gauge-height-percent"
+        suffix="%"
+        title="Height as Percentage of Width"
+        {...props}
+    />
+  </div>
+)
 
-const GaugeHeight = () => {
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={Highcharts.merge({}, gaugeTheme, {
-            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>`,
-                },
-              },
-            },
-          })}
-      />
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={Highcharts.merge({}, gaugeTheme, {
-            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>`,
-                },
-              },
-            },
-          })}
-      />
-    </div>
-  );
-};
-
-export default GaugeHeight;
+export default GaugeHeight

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx

@@ -1,31 +1,15 @@
-import React, { useState, useRef } from 'react'
-import Button from '../../pb_button/_button'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
+import React, { useState } from 'react'
 
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
+import Button from '../../pb_button/_button'
+import Gauge from '../../pb_gauge/_gauge'
 
 const GaugeLiveData = (props) => {
   const [value, setValue] = useState(50)
   const [name, setName] = useState('Name')
-  const chartRef = useRef(null)
-
-  const namesArray = ['Name', 'Windows', 'Doors', 'Roofing', 'Siding', 'Gutters']
 
   const updateValue = () => {
-    const newValue = Math.floor(Math.random() * 100)
-    setValue(newValue)
-
-    const chart = chartRef.current?.chart
-    if (chart) {
-      chart.series[0].points[0].update(newValue)
-    }
+    setValue(Math.floor(Math.random() * 100))
   }
-
   const updateName = () => {
     let index = namesArray.indexOf(name)
     if (namesArray.indexOf(name) == 5) {
@@ -34,23 +18,8 @@ const GaugeLiveData = (props) => {
       index += 1
     }
     setName(namesArray[index])
-
-    const chart = chartRef.current?.chart
-    if (chart) {
-      chart.series[0].points[0].update({ name: namesArray[index] })
-    }
   }
-
-  const options = Highcharts.merge({}, gaugeTheme,
-    {
-      title: {
-        text: name,
-      },
-      series: [{
-        data: [{ name: name, y: value }]
-      }]
-    }
-  )
+  const namesArray = ['Name', 'Windows', 'Doors', 'Roofing', 'Siding', 'Gutters']
 
   return (
     <div>
@@ -64,10 +33,10 @@ const GaugeLiveData = (props) => {
           text="Update Name"
           {...props}
       />
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-          ref={chartRef}
+      <Gauge
+          chartData={[{ name: name, value: value }]}
+          id="gauge-live-data"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx

@@ -1,54 +1,22 @@
 import React from 'react'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-import colors from '../../tokens/exports/_colors.module.scss'
-import typography from '../../tokens/exports/_typography.module.scss'
+import Gauge from '../../pb_gauge/_gauge'
 
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
+const data = [{
+  name: 'Rating', value: 4.5,
+}]
 
-const data = [{ name: "Rating", y: 4.5 }]
+const GaugeMinMax = (props) => (
+  <div>
+    <Gauge
+        chartData={data}
+        id="gauge-min-max"
+        max={5}
+        min={0}
+        showLabels
+        title="Product Rating"
+        {...props}
+    />
+  </div>
+)
 
-const baseOptions = {
-  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 GaugeMinMax = () => {
-  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          id="gauge-min-max"
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default GaugeMinMax;
+export default GaugeMinMax

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
+
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
+
+const data = [{ name: "Name", y: 45 }]
+
+const baseOptions = {
+  series: [{ data: data }],
+};
+
+const GaugePbStyles = () => {
+  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  );
+};
+
+export default GaugePbStyles;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md

@@ -0,0 +1 @@
+You don't need to use the Gauge Kit to apply Playbook styles to your Highcharts gauge chart. Just import gaugeTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx

@@ -2,14 +2,7 @@ import React from 'react'
 
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
+import Gauge from '../../pb_gauge/_gauge'
 
 const GaugeSizing = (props) => (
   <div>
@@ -24,11 +17,10 @@ const GaugeSizing = (props) => (
           shrink
           {...props}
       >
-        <HighchartsReact
-            highcharts={Highcharts}
-            options={Highcharts.merge({}, gaugeTheme, {
-              series: [{ data: [{ name: "Point 1", y: 100 }] }],
-            })}
+        <Gauge
+            chartData={[ { name: 'Point 1', value: 100 } ]}
+            id="gauge-sizing4"
+            {...props}
         />
       </FlexItem>
       <FlexItem
@@ -37,11 +29,10 @@ const GaugeSizing = (props) => (
           shrink
           {...props}
       >
-        <HighchartsReact
-            highcharts={Highcharts}
-            options={Highcharts.merge({}, gaugeTheme, {
-              series: [{ data: [{ name: "Point 2", y: 75 }] }],
-            })}
+        <Gauge
+            chartData={[ { name: 'Point 2', value: 75 } ]}
+            id="gauge-sizing3"
+            {...props}
         />
       </FlexItem>
       <FlexItem
@@ -50,11 +41,10 @@ const GaugeSizing = (props) => (
           shrink
           {...props}
       >
-        <HighchartsReact
-            highcharts={Highcharts}
-            options={Highcharts.merge({}, gaugeTheme, {
-              series: [{ data: [{ name: "Point 3", y: 50 }] }],
-            })}
+        <Gauge
+            chartData={[ { name: 'Point 3', value: 50 } ]}
+            id="gauge-sizing2"
+            {...props}
         />
       </FlexItem>
       <FlexItem
@@ -63,14 +53,11 @@ const GaugeSizing = (props) => (
           shrink
           {...props}
       >
-        <HighchartsReact
-            highcharts={Highcharts}
-            options={Highcharts.merge({}, gaugeTheme, {
-              chart: {
-                height: "100%",
-              },
-              series: [{ data: [{ name: "Point 4", y: 25 }] }],
-            })}
+        <Gauge
+            chartData={[ { name: 'Point 4', value: 25 } ]}
+            height="100%"
+            id="gauge-sizing1"
+            {...props}
         />
       </FlexItem>
     </Flex>