RubyGems - playbook_ui - Versions diffs - 15.3.0.pre.alpha.play262912095 → 15.3.0.pre.rc.0 - Mend

playbook_ui 15.3.0.pre.alpha.play262912095 → 15.3.0.pre.rc.0

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 (228) hide show

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

@@ -1,119 +0,0 @@
-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 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_pb_gauge_chart/docs/_pb_gauge_chart_default.html.erb DELETED Viewed

@@ -1,5 +0,0 @@
-<% 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 DELETED Viewed

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

@@ -1,12 +0,0 @@
-<% 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 DELETED Viewed

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

@@ -1,23 +0,0 @@
-<% 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 DELETED Viewed

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

@@ -1,40 +0,0 @@
-<% 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 DELETED Viewed

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

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_live_data.jsx DELETED Viewed

@@ -1,64 +0,0 @@
-import React, { useState, useRef } from 'react'
-import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import Button from '../../pb_button/_button'
-const PbGaugeChartLiveData = (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 chartOptions = {
-    title: {
-      text: name,
-    },
-    series: [{
-      data: [{ name: name, y: value }]
-    }]
-  }
-  return (
-    <div>
-      <Button
-          onClick={updateValue}
-          text="Update Value"
-        />
-        <Button
-            onClick={updateName}
-            text="Update Name"
-        />
-      <PbGaugeChart
-          options={chartOptions}
-          ref={chartRef}
-          {...props}
-      />
-    </div>
-  );
-}
-export default PbGaugeChartLiveData

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.html.erb DELETED Viewed

@@ -1,27 +0,0 @@
-<% data = [{ name: "Rating", y: 4.5 }] %>
-<% chart_options = {
-title: {
-    text: "Product Rating",
-  },
-  yAxis: {
-    min: 0,
-    max: 5,
-    lineWidth: 0,
-    tickWidth: 0,
-    minorTickInterval: nil,
-    tickAmount: 2,
-    tickPositions: [0, 5],
-    labels: {
-      y: 26,
-      enabled: true,
-      style: {
-        color: '#C1CDD6',
-        fontWeight:'700',
-      }
-    },
-  },
-  series: [{ data: data }],
-} %>
-<%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.jsx DELETED Viewed

@@ -1,40 +0,0 @@
-import React from 'react'
-import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import { colors, typography } from 'playbook-ui'
-const data = [{ name: "Rating", y: 4.5 }]
-const chartOptions = {
-  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 PbGaugeChartMinMax = (props) => (
-  <div>
-    <PbGaugeChart
-        options={chartOptions}
-        {...props}
-    />
-  </div>
-)
-export default PbGaugeChartMinMax

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.md DELETED Viewed

	@@ -1 +0,0 @@
1	- By default, Highcharts set min to 0 and max to 100 but this can be customized if needed as shown here.

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_sizing.html.erb DELETED Viewed

@@ -1,19 +0,0 @@
-<% chart_options = { series: [{ data:[{ name: "Point 1", y: 100 }] }] } %>
-<% chart_options_1 = { series: [{ data:[{ name: "Point 2", y: 75 }] }] } %>
-<% chart_options_2 = { series: [{ data:[{ name: "Point 3", y: 50 }] }] } %>
-<% chart_options_3 = { series: [{ data:[{ name: "Point 4", y: 25 }] }] } %>
-<%= 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("pb_gauge_chart", props: { options: chart_options }) %>
-  <% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px", overflow: "hidden", shrink: true }) do %>
-    <%= pb_rails("pb_gauge_chart", props: { options: chart_options_1 }) %>
-  <% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "200px", overflow: "hidden", shrink: true }) do %>
-      <%= pb_rails("pb_gauge_chart", props: { options: chart_options_2 }) %>
-  <% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "155px", overflow: "hidden", shrink: true }) do %>
-    <%= pb_rails("pb_gauge_chart", props: { options: chart_options_3 }) %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_sizing.jsx DELETED Viewed

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

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_sizing.md DELETED Viewed

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

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_title.html.erb DELETED Viewed

@@ -1,14 +0,0 @@
-<% data = [{ name: "Score", y: 780 }] %>
-<% chart_options = {
-  title: {
-    text: "Credit Score",
-  },
-  yAxis: {
-    min: 300,
-    max: 850,
-  },
-  series: [{ data: data }],
-} %>
-<%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_title.jsx DELETED Viewed

@@ -1,27 +0,0 @@
-import React from 'react'
-import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-const data = [{ name: "Score", y: 780 }]
-const chartOptions = {
-  title: {
-    text: "Credit Score",
-  },
-  yAxis: {
-    min: 300,
-    max: 850,
-  },
-  series: [{ data: data }],
-};
-const PbGaugeChartTitle = (props) => (
-  <div>
-    <PbGaugeChart
-        options={chartOptions}
-        {...props}
-    />
-  </div>
-)
-export default PbGaugeChartTitle

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.html.erb DELETED Viewed

@@ -1,39 +0,0 @@
-<% data1 = [{ name: 'Data Used', y: 32 }] %>
-<% data2 = [{ name: 'Sales to Date', y: 65 }] %>
-<% chart_options_1 = {
-  title: {
-    text: "Data Usage",
-  },
-  series: [{ data: data1 }],
-  plotOptions: {
-    solidgauge: {
-      dataLabels: {
-        format:
-          '<span class="fix">{y:,f}</span>' +
-          '<span style="fill: #687887; font-size: 27px;">GB</span>',
-      },
-    },
-  },
-} %>
-<% chart_options_2 = {
-  title: {
-    text: "Sales Goal",
-  },
-  series: [{ data: data2 }],
-  plotOptions: {
-    solidgauge: {
-      dataLabels: {
-        format:
-          '<span y="28" style="fill: #687887; font-size: 16px;">$</span>' +
-          '<span class="fix" y="38">{y:,f}</span>' +
-          '<span style="fill: #687887; font-size: 27px;">k</span>',
-      },
-    },
-  },
-} %>
-<%= pb_rails("pb_gauge_chart", props: { options: chart_options_1 }) %>
-<%= pb_rails("pb_gauge_chart", props: { options: chart_options_2 }) %>