playbook_ui_docs 15.7.0.pre.alpha.play270013253 → 15.7.0.pre.rc.0

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb

@@ -20,14 +20,12 @@
 
 %>
 
-<%= pb_rails("dropdown", props: {id: "country-dropdown", options: options}) %>
+<%= pb_rails("dropdown", props: {options: options}) %>
 
 <script>
   document.addEventListener("pb:dropdown:selected", (e) => {
-    if (e.target.id === "country-dropdown") {
-      const option   = e.detail;
-      const dropdown = e.target;
-      console.log("Selected option:", option);
-    }
-  });
+    const option   = e.detail;
+    const dropdown = e.target;
+    console.log("Selected option:", option);
+})
 </script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb

@@ -47,7 +47,7 @@
 %>
 
 
-<%= pb_rails("dropdown", props: {id: "user-dropdown", options: options}) do %>
+<%= pb_rails("dropdown", props: {options: options}) do %>
     <%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Select a User", custom_display: custom_display}) %>
     <%= pb_rails("dropdown/dropdown_container") do %>
         <% options.each do |option| %>
@@ -71,8 +71,6 @@
 
 <script>
   document.addEventListener("pb:dropdown:selected", (e) => {
-    if (e.target.id !== "user-dropdown") return;
-    
     const option   = e.detail;
     const dropdown = e.target;
 

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

@@ -22,11 +22,6 @@ examples:
   - dropdown_multi_select_with_default: Multi Select Default Value
   - dropdown_blank_selection: Blank Selection
   - dropdown_separators_hidden: Separators Hidden
-  - dropdown_quickpick_rails: Quick Pick Variant
-  - dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
-  - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
-  - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
-  - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
 
   react:
   - dropdown_default: Default

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -116,7 +116,7 @@
   <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true } %>
   <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form-default", tree_data: treeData, margin_bottom: "sm", label: "Example Multi Level Select field" } %>
-  <%= form.time_picker :example_time_picker, props: { label: true } %>
+
   <%= form.actions do |action| %>
     <%= action.submit %>
     <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -117,8 +117,7 @@
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
   <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form", tree_data: treeData, margin_bottom: "sm", required: true, label: "Example Multi Level Select field" } %>
-  <%= form.time_picker :example_time_picker_validation, props: { label: true, required: true, validation_message: "Please select a time." } %>
- 
+
   <%= form.actions do |action| %>
     <%= action.submit %>
     <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>

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

@@ -4,4 +4,3 @@ examples:
   - form_form_with: Default
   - form_form_with_validate: Default + Validation
   - form_form_with_loading: Default + Loading
-  - form_with_required_indicator: With Optional Required Indicator

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+<% 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"
+}) %>