RubyGems - playbook_ui_docs - Versions diffs - 15.7.0.pre.alpha.play258013248 → 15.7.0.pre.alpha.play270013252 - Mend

playbook_ui_docs 15.7.0.pre.alpha.play258013248 → 15.7.0.pre.alpha.play270013252

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (113) hide show

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

@@ -1,146 +0,0 @@
-import React from "react";
-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 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 GaugeComplex = (props) => (
-  <Flex
-      gap="sm"
-      padding="xl"
-      wrap
-      {...props}
-  >
-    <FlexItem
-        flex={1}
-        grow
-        {...props}
-    >
-      <Card
-          maxWidth="xs"
-          padding="md"
-          {...props}
-      >
-        <Title
-            paddingBottom="sm"
-            size={4}
-            text="Abandoned Calls"
-            {...props}
-        />
-        <Flex
-            align="stretch"
-            {...props}
-        >
-          <Flex
-              marginRight="sm"
-              orientation="column"
-              {...props}
-          >
-            <Body
-                color="light"
-                paddingBottom="sm"
-                text="Total Abandoned"
-                {...props}
-            />
-            <Flex
-                align="baseline"
-                paddingBottom="xs"
-                {...props}
-            >
-              <Title
-                  size={1}
-                  text="39"
-                  {...props}
-              />
-              <Title
-                  color="light"
-                  size={3}
-                  text="calls"
-                  {...props}
-              />
-            </Flex>
-            <Caption
-                size="xs"
-                text="of 390"
-                {...props}
-            />
-          </Flex>
-          <SectionSeparator
-              alignSelf="stretch"
-              marginRight="sm"
-              orientation="vertical"
-              {...props}
-          />
-          <Flex
-              orientation="column"
-              wrap
-              {...props}
-          >
-              <Body
-                  color="light"
-                  text="% Abandoned"
-                  {...props}
-              />
-            <Flex
-                wrap
-                {...props}
-            >
-              <FlexItem
-                  fixedSize="150px"
-                  overflow="hidden"
-                  shrink
-                  {...props}
-              >
-                <HighchartsReact
-                    highcharts={Highcharts}
-                    options={options}
-                />
-               </FlexItem>
-            </Flex>
-          </Flex>
-        </Flex>
-      </Card>
-    </FlexItem>
-  </Flex>
-);
-export default GaugeComplex;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex_rails.md DELETED Viewed

	@@ -1 +0,0 @@
1	- We are able to wrap our Gauge kits within multiple other Flex and Card components.

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex_react.md DELETED Viewed

	@@ -1 +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_gauge/docs/_gauge_default.html.erb DELETED Viewed

@@ -1,11 +0,0 @@
-<% data = [
-  {
-    name: 'Name',
-    value: 45,
-  }
-]%>
-<%= pb_rails("gauge", props: {
-  id: "gauge-default",
-  chart_data: data,
-}) %>

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

@@ -1,30 +0,0 @@
-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 GaugeDefault = () => {
-  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  );
-};
-export default GaugeDefault;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.html.erb DELETED Viewed

@@ -1,12 +0,0 @@
-<% data = [
-  {
-    name: 'Participants',
-    value: 84,
-  }
-]%>
-<%= pb_rails("gauge", props: {
-  id: "gauge-disable-animation",
-  chart_data: data,
-  disable_animation: true,
-}) %>

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

@@ -1,36 +0,0 @@
-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: "Participants", y: 84 }]
-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;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.html.erb DELETED Viewed

@@ -1,14 +0,0 @@
-<% data = [
-  {
-    name: 'Capacity',
-    value: 75,
-  }
-]%>
-<%= pb_rails("gauge", props: {
-  id: "full-circle",
-  chart_data: data,
-  full_circle: true,
-  title: "Seating Capacity",
-  suffix: "%"
-}) %>

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

@@ -1,49 +0,0 @@
-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);
-const data = [{ name: "Capacity", y: 75 }]
-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;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.html.erb DELETED Viewed

@@ -1,15 +0,0 @@
-<%= pb_rails("gauge", props: {
-  id: "gauge-height-px",
-  chart_data: [{ name: "Pixels", value: 400 }],
-  height: '400',
-  title: "Fixed Height in Pixels",
-  suffix: "px"
-}) %>
-<%= pb_rails("gauge", props: {
-  id: "gauge-height-percent",
-  chart_data: [{ name: "Percentage", value: 45 }],
-  height: '45%',
-  title: "Height as Percentage of Width",
-  suffix: "%"
-}) %>

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

@@ -1,62 +0,0 @@
-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);
-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;

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

@@ -1,76 +0,0 @@
-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"
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
-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)
-    }
-  }
-  const updateName = () => {
-    let index = namesArray.indexOf(name)
-    if (namesArray.indexOf(name) == 5) {
-      index = 0
-    } else {
-      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 }]
-      }]
-    }
-  )
-  return (
-    <div>
-      <Button
-          onClick={updateValue}
-          text="Update Value"
-          {...props}
-      />
-      <Button
-          onClick={updateName}
-          text="Update Name"
-          {...props}
-      />
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-          ref={chartRef}
-      />
-    </div>
-  )
-}
-export default GaugeLiveData

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.html.erb DELETED Viewed

@@ -1,15 +0,0 @@
-<% data = [
-  {
-    name: 'Rating',
-    value: 4.5,
-  }
-]%>
-<%= pb_rails("gauge", props: {
-  id: "gauge-min-max",
-  chart_data: data,
-  min: 0,
-  max: 5,
-  show_labels: true,
-  title: "Product Rating"
-}) %>

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

@@ -1,54 +0,0 @@
-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);
-const data = [{ name: "Rating", y: 4.5 }]
-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;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.md DELETED Viewed

	@@ -1 +0,0 @@
1	- ### Min defaults to 0, Max to 100.

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb DELETED Viewed

@@ -1,27 +0,0 @@
-<%= pb_rails("flex", props: {wrap: true, align: "center"}) do %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "400px", overflow: "hidden", shrink: true }) do %>
-      <%= pb_rails("gauge", props: {
-        id: "gauge-sizing4",
-        chart_data: [{ name: "Point 1", value: 100 }],
-      }) %>
-  <% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px", overflow: "hidden", shrink: true }) do %>
-      <%= pb_rails("gauge", props: {
-        id: "gauge-sizing3",
-        chart_data: [{ name: "Point 2", value: 75 }],
-      }) %>
-  <% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "200px", overflow: "hidden", shrink: true }) do %>
-      <%= pb_rails("gauge", props: {
-        id: "gauge-sizing2",
-        chart_data: [{ name: "Point 3", value: 50 }],
-      }) %>
-  <% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "125px", overflow: "hidden", shrink: true }) do %>
-      <%= pb_rails("gauge", props: {
-        id: "gauge-sizing1",
-        height: '100%',
-        chart_data: [{ name: "Point 4", value: 25 }],
-      }) %>
-  <% end %>
-<% end %>

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

@@ -1,80 +0,0 @@
-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);
-const GaugeSizing = (props) => (
-  <div>
-    <Flex
-        align="center"
-        wrap
-        {...props}
-    >
-      <FlexItem
-          fixedSize="400px"
-          overflow="hidden"
-          shrink
-          {...props}
-      >
-        <HighchartsReact
-            highcharts={Highcharts}
-            options={Highcharts.merge({}, gaugeTheme, {
-              series: [{ data: [{ name: "Point 1", y: 100 }] }],
-            })}
-        />
-      </FlexItem>
-      <FlexItem
-          fixedSize="300px"
-          overflow="hidden"
-          shrink
-          {...props}
-      >
-        <HighchartsReact
-            highcharts={Highcharts}
-            options={Highcharts.merge({}, gaugeTheme, {
-              series: [{ data: [{ name: "Point 2", y: 75 }] }],
-            })}
-        />
-      </FlexItem>
-      <FlexItem
-          fixedSize="200px"
-          overflow="hidden"
-          shrink
-          {...props}
-      >
-        <HighchartsReact
-            highcharts={Highcharts}
-            options={Highcharts.merge({}, gaugeTheme, {
-              series: [{ data: [{ name: "Point 3", y: 50 }] }],
-            })}
-        />
-      </FlexItem>
-      <FlexItem
-          fixedSize="125px"
-          overflow="hidden"
-          shrink
-          {...props}
-      >
-        <HighchartsReact
-            highcharts={Highcharts}
-            options={Highcharts.merge({}, gaugeTheme, {
-              chart: {
-                height: "100%",
-              },
-              series: [{ data: [{ name: "Point 4", y: 25 }] }],
-            })}
-        />
-      </FlexItem>
-    </Flex>
-  </div>
-)
-export default GaugeSizing

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.md DELETED Viewed

	@@ -1,2 +0,0 @@
1	- ### Gauge resizes dynamically to fit whatever element it's placed within.
2	- #### Note: set `overflow` to hidden on the parent element when nesting gauges inside of a flex items to best respond to shrinking screens.

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.html.erb DELETED Viewed

@@ -1,14 +0,0 @@
-<% data = [
-  {
-    name: 'Score',
-    value: 780,
-  }
-]%>
-<%= pb_rails("gauge", props: {
-  id: "gauge-title",
-  chart_data: data,
-  min: 300,
-  max: 850,
-  title: "Credit Score",
-}) %>