RubyGems - playbook_ui_docs - Versions diffs - 15.2.0 → 15.3.0.pre.alpha.PLAY2001selectablecarddisabledstyles11833 - Mend

playbook_ui_docs 15.2.0 → 15.3.0.pre.alpha.PLAY2001selectablecarddisabledstyles11833

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

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_complex.html.erb ADDED Viewed

@@ -0,0 +1,45 @@
+<% chart_options = {
+  series:[{data:[{ name: "Name", y: 10 }]}],
+    chart: {
+    height: "150",
+  },
+  plotOptions: {
+    series: {
+      animation: false,
+    },
+    solidgauge: {
+      dataLabels: {
+        format:
+          '<span class="fix">{y:,f}</span>' +
+          '<span style="fill: #687887; font-size: 27px;">%</span>',
+      },
+    },
+  },
+} %>
+<%= 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("pb_gauge_chart", props: { options: chart_options }) %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <%end %>
+    <% end %>
+  <% end %>
+<% end %>

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,27 @@
+<% 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 ADDED Viewed

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

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

@@ -0,0 +1,19 @@
+<% 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 ADDED Viewed

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

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

@@ -0,0 +1,14 @@
+<% 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 ADDED Viewed

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