playbook_ui_docs 15.8.0.pre.rc.0 → 16.0.0.pre.alpha.fixiconsvgdataattrspropagation13513

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb

@@ -1,38 +0,0 @@
- <% data_5 = [{
-      name: 'Facebook',
-      value: 2498,
-    },
-    {
-      name: 'YouTube',
-      value: 2000,
-    },
-    {
-      name: 'WhatsApp',
-      value: 2000,
-
-    },
-    {
-      name: 'Facebook Messenger',
-      value: 1300,
-    },
-    {
-      name: 'WeChat',
-      value: 1165,
-    },
-    {
-      name: 'Instagram',
-      value: 1000,
-    },
-    {
-      name: 'Tik Tok',
-      value: 800,
-    },
-  ] %>
-
-
-<%= pb_rails("circle_chart", props: {
-    style: "pie",
-    title: "Active Users on Social Media",
-    chart_data: data_5,
-    id: "with-caption-example",
-}) %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx

@@ -1,55 +0,0 @@
-import React from 'react'
-import circleChartTheme from '../circleChartTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-
-const dataWithTitle = [
-  {
-    name: 'Facebook',
-    y: 2498,
-  },
-  {
-    name: 'YouTube',
-    y: 2000,
-  },
-  {
-    name: 'WhatsApp',
-    y: 2000,
-  },
-  {
-    name: 'Facebook Messenger',
-    y: 1300,
-  },
-  {
-    name: 'WeChat',
-    y: 1165,
-  },
-  {
-    name: 'Instagram',
-    y: 1000,
-  },
-  {
-    name: 'Tik Tok',
-    y: 800,
-  },
-]
-
-const CircleChartWithTitle = () => {
-  const chartOptions = {
-    title: { text: "Active Users on Social Media" },
-    series: [{ data: dataWithTitle }],
-  }
-
-  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default CircleChartWithTitle

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

@@ -1 +0,0 @@
-**Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import circleChartTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.

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

@@ -1,26 +0,0 @@
-examples:
-
-  rails:
-  - circle_chart_default: Default Style
-  - circle_chart_rounded: Rounded Corners
-  - circle_chart_block: Accepts Any Block
-  - circle_chart_colors: Color Overrides
-  - circle_chart_with_labels: Data Labels
-  - circle_chart_with_legend_kit: Legend
-  - circle_chart_legend_position: Legend Position
-  - circle_chart_with_title: Title
-  - circle_chart_inner_sizes: Inner Circle Size Options
-  - circle_chart_custom_tooltip: Tooltip Customization
-
-  react:
-  - circle_chart_default: Default Style
-  - circle_chart_live_data: Live Data
-  - circle_chart_rounded: Rounded Corners
-  - circle_chart_block: Accepts Any Block
-  - circle_chart_colors: Color Overrides
-  - circle_chart_with_labels: Data Labels
-  - circle_chart_with_legend_kit: Legend
-  - circle_chart_legend_position: Legend Position
-  - circle_chart_with_title: Title
-  - circle_chart_inner_sizes: Inner Circle Size Options
-  - circle_chart_custom_tooltip: Tooltip Customization

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

@@ -1,11 +0,0 @@
-export { default as CircleChartDefault } from './_circle_chart_default.jsx'
-export { default as CircleChartLiveData } from './_circle_chart_live_data.jsx'
-export { default as CircleChartRounded } from './_circle_chart_rounded.jsx'
-export { default as CircleChartBlock } from './_circle_chart_block.jsx'
-export { default as CircleChartColors } from './_circle_chart_colors.jsx'
-export { default as CircleChartWithLabels } from './_circle_chart_with_labels.jsx'
-export { default as CircleChartWithLegendKit } from './_circle_chart_with_legend_kit.jsx'
-export { default as CircleChartLegendPosition } from './_circle_chart_legend_position.jsx'
-export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
-export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'
-export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"

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

@@ -1 +0,0 @@
-**Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import gaugeTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb

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

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

@@ -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"
-import colors from '../../tokens/exports/_colors.module.scss'
-
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
-
-const data = [{ name: "Name", y: 67 }]
-
-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;

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

@@ -1,2 +0,0 @@
-Custom data colors allow for color customization to match the needs of business requirements.
-Pass the prop `colors` and use **ONE** desired value `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array. Hex colors are also available `eg: #CA0095`

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

@@ -1,2 +0,0 @@
-Custom data colors allow for color customization to match the needs of business requirements.
-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`

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb

@@ -1,32 +0,0 @@
-<%= 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("gauge", props: {
-                chart_data: [{ name: "Name", value: 10 }],
-                disable_animation: true,
-                height: '150',
-                id: "gauge-complex",
-                suffix: "%"
-              }) %>
-            <% end %>
-          <% end %>
-        <% end %>
-      <%end %>
-    <% end %>
-  <% end %>
-<% end %>

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

@@ -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

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

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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;