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

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

@@ -1,38 +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 Gauge from '../../pb_gauge/_gauge'
 
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
+const data = [
+  { name: 'Score', value: 780 },
+]
 
-const data = [{ name: "Score", y: 780 }]
+const GaugeTitle = (props) => (
+  <div>
+    <Gauge
+        chartData={data}
+        id="gauge-title"
+        max={850}
+        min={300}
+        title="Credit Score"
+        {...props}
+    />
+  </div>
+)
 
-const baseOptions = {
-  title: {
-    text: "Credit Score",
-  },
-  yAxis: {
-    min: 300,
-    max: 850,
-  },
-  series: [{ data: data }],
-};
-
-const GaugeTitle = () => {
-  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          id="gauge-title"
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default GaugeTitle;
+export default GaugeTitle

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

@@ -1,72 +1,31 @@
 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'
-
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
+import Gauge from '../../pb_gauge/_gauge'
 
 const data1 = [
-  { name: 'Data Used', y: 32 },
+  { name: 'Data Used', value: 32 },
 ]
 const data2 = [
-  { name: 'Sales to Date', y: 65 },
+  { name: 'Sales to Date', value: 65 },
 ]
 
-const baseOptions1 = {
-  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 baseOptions2 = {
-  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 GaugeUnits = () => {
-  const options1 = Highcharts.merge({}, gaugeTheme, baseOptions1);
-  const options2 = Highcharts.merge({}, gaugeTheme, baseOptions2);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          id="gauge-units1"
-          options={options1}
-      />
-      <HighchartsReact
-          highcharts={Highcharts}
-          id="gauge-units2"
-          options={options2}
-      />
-    </div>
-  );
-};
+const GaugeUnits = (props) => (
+  <div>
+    <Gauge
+        chartData={data1}
+        id="gauge-units1"
+        suffix="GB"
+        title="Data Usage"
+        {...props}
+    />
+    <Gauge
+        chartData={data2}
+        id="gauge-units2"
+        prefix="$"
+        suffix="k"
+        title="Sales Goal"
+        {...props}
+    />
+  </div>
+)
 
-export default GaugeUnits;
+export default GaugeUnits

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

@@ -15,6 +15,7 @@ examples:
 
   react:
   - gauge_default: Default
+  - gauge_pb_styles: Playbook Styles
   - gauge_disable_animation: Disable Animation
   - gauge_title: Title
   - gauge_units: Units

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

@@ -1,4 +1,5 @@
 export { default as GaugeDefault } from './_gauge_default.jsx'
+export { default as GaugePbStyles } from './_gauge_pb_styles.jsx'
 export { default as GaugeDisableAnimation } from './_gauge_disable_animation.jsx'
 export { default as GaugeFullCircle } from './_gauge_full_circle.jsx'
 export { default as GaugeHeight } from './_gauge_height.jsx'

data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb

@@ -19,7 +19,6 @@
                     value: "checkbox-value",
                     name: "main-checkbox-selectable",
                     indeterminate_main: true,
-                    indeterminate_main_labels: ["", ""],
                     id: "checkbox-selectable"
                 }) %>
             <% end %>