playbook_ui_docs 15.2.0.pre.alpha.npmauth11386 → 15.2.0.pre.alpha.play257911600

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_default.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
+
+const data = [{
+  name: 'Installation',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}, {
+  name: 'Manufacturing',
+  data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
+}, {
+  name: 'Sales & Distribution',
+  data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
+}, {
+  name: 'Project Development',
+  data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
+}, {
+  name: 'Other',
+  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
+}]
+
+const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+const chartOptions = {
+  series: data,
+  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
+  subtitle: { text: "Source: thesolarfoundation.com" },
+  xAxis: {
+    categories: categories,
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+}
+const PbLineGraphDefault = (props) => (
+  <div>
+    <PbLineGraph
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+)
+
+export default PbLineGraphDefault

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_height.html.erb

@@ -0,0 +1,47 @@
+<% data = [{
+  name: 'Number of Installations',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}] %>
+
+<% categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] %>
+
+<% chart_options_first = {
+    title: {
+      text: 'Fixed Height (300px)',
+    },
+    chart: {
+      height: '300px'
+    },
+    xAxis: {
+      categories: categories,
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: 'Number of Employees',
+      },
+    },
+    series: data
+  } %>
+
+  <% chart_options_second = {
+    title: {
+      text: 'Percentage Height (50%)',
+    },
+    chart: {
+      height: '50%'
+    },
+    xAxis: {
+      categories: categories,
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: 'Number of Employees',
+      },
+    },
+    series: data
+  } %>
+
+<%= pb_rails("pb_line_graph", props: {options: chart_options_first}) %>
+<%= pb_rails("pb_line_graph", props: {options: chart_options_second}) %>

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_height.jsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
+
+const data = [{
+  name: 'Number of Installations',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}]
+
+const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+const chartOptionsFirst = {
+    title: {
+      text: 'Fixed Height (300px)',
+    },
+    chart: {
+      height: '300px'
+    },
+    xAxis: {
+      categories: categories,
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: 'Number of Employees',
+      },
+    },
+    series: data
+  }
+
+  const chartOptionsSecond = {
+    title: {
+      text: 'Percentage Height (50%)',
+    },
+    chart: {
+      height: '50%'
+    },
+    xAxis: {
+      categories: categories,
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: 'Number of Employees',
+      },
+    },
+    series: data
+  }
+
+const PbLineGraphHeight = (props) => {
+  return (
+    <div>
+      <PbLineGraph
+          options={chartOptionsFirst}
+          {...props}
+      />
+      <PbLineGraph
+          options={chartOptionsSecond}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default PbLineGraphHeight

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_height.md

@@ -0,0 +1,3 @@
+By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.
+
+Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend.html.erb

@@ -0,0 +1,24 @@
+<% data = [{
+  name: 'Number of Installations',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],    }] %>
+
+<% categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'] %>
+
+<% chart_options = {
+  series: data,
+  title: { text: "Line Graph with Legend" },
+  xAxis: {
+    categories: categories,
+  },
+  yAxis: {
+    min: 0,
+    title: {
+      text: "Number of Employees",
+    },
+  },
+  legend: {
+    enabled: true,
+  },
+} %>
+
+<%= pb_rails("pb_line_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
+
+const data = [{
+  name: 'Number of Installations',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}]
+
+const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
+
+const chartOptions = {
+  series: data,
+  title: { text: "Line Graph with Legend" },
+  xAxis: {
+    categories: categories,
+  },
+  yAxis: {
+    min: 0,
+    title: {
+      text: "Number of Employees",
+    },
+  },
+  legend: {
+    enabled: true,
+  },
+}
+
+const PbLineGraphLegend = (props) => (
+  <div>
+    <PbLineGraph
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+)
+
+export default PbLineGraphLegend

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_nonclickable.html.erb

@@ -0,0 +1,39 @@
+<% data = [{
+  name: 'Number of Installations',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],    
+  }] %>
+
+<% categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'] %>
+
+<% chart_options = {
+  series: data,
+  title: { text: "Line Graph with Legend Non Clickable" },
+  xAxis: {
+    categories: categories,
+  },
+  yAxis: {
+    title: {
+      text: 'Number of Employees',
+    },
+  },
+  legend: {
+    enabled: true
+  },
+} %>
+
+<%= pb_rails("pb_line_graph", props: {options: chart_options, id: "installations-chart"}) %>
+
+<script>
+// Prevent legend item click events from toggling series visibility
+document.addEventListener('click', function (e) {
+  var container = document.getElementById('installations-chart');
+  if (!container) return;
+
+  var legend = container.querySelector('.highcharts-legend');
+  if (legend && legend.contains(e.target)) {
+    e.stopImmediatePropagation();
+    e.preventDefault();
+  }
+}, true); 
+
+</script>

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_nonclickable.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
+
+const data = [{
+  name: 'Number of Installations',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}]
+
+const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
+
+const chartOptions = {
+  title: {
+    text: 'Line Graph with Legend Non Clickable',
+  },
+  xAxis: {
+    categories: categories,
+  },
+  yAxis: {
+    title: {
+      text: 'Number of Employees',
+    },
+  },
+  legend: {
+    enabled: true,
+    events: {
+      itemClick: function () {
+        return false;
+      }
+    }
+  },
+  series: data
+}
+
+const PbLineGraphLegendNonclickable = (props) => {
+  return (
+    <div>
+      <PbLineGraph
+          options={chartOptions}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default PbLineGraphLegendNonclickable

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_position.html.erb

@@ -0,0 +1,86 @@
+<% data = [{
+    name: 'Installation',
+    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+  }, {
+    name: 'Manufacturing',
+    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
+  }, {
+    name: 'Sales & Distribution',
+    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
+  }, {
+    name: 'Project Development',
+    data: [nil, nil, 7988, 12169, 15112, 22452, 34400, 34227],
+  }, {
+    name: 'Other',
+    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
+  }] %>
+
+<% categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'] %>
+
+
+<% chartOptionsFirst = {
+    title: { text: "Alignment of Legend" },
+    series: data,
+    xAxis: {
+      categories: categories,
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: "Number of Employees",
+      },
+    },
+    legend: {
+      enabled: true,
+      align: 'right',
+      verticalAlign: 'top'
+    },
+  } %>
+
+<%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
+<%= pb_rails("pb_line_graph", props: {options: chartOptionsFirst}) %>
+
+  <% chartOptionsSecond = {
+    title: { text: "Layout of Legend" },
+    series: data,
+    xAxis: {
+      categories: categories,
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: "Number of Employees",
+      },
+    },
+    legend: {
+      enabled: true,
+      layout: 'vertical'
+    },
+  } %>
+
+<%= pb_rails("title", props: {size: 4, text: "layout", padding_top: "sm", padding_bottom: "sm"})%>
+<%= pb_rails("pb_line_graph", props: {options: chartOptionsSecond}) %>
+
+  <% chartOptionsThird = {
+    title: { text: "Offset of Legend" },
+    series: data,
+    xAxis: {
+      categories: categories,
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: "Number of Employees",
+      },
+    },
+    legend: {
+      enabled: true,
+      layout: 'vertical',
+      x: 100,
+      y: 10
+    },
+  } %>
+
+<%= pb_rails("title", props: {size: 4, text: "x | y", padding_top: "sm", padding_bottom: "sm"})%>
+<%= pb_rails("pb_line_graph", props: {options: chartOptionsThird}) %>
+

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_position.jsx

@@ -0,0 +1,116 @@
+import React from 'react'
+import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
+import Title from '../../pb_title/_title'
+
+const data = [{
+  name: 'Installation',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}, {
+  name: 'Manufacturing',
+  data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
+}, {
+  name: 'Sales & Distribution',
+  data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
+}, {
+  name: 'Project Development',
+  data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
+}, {
+  name: 'Other',
+  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
+}]
+
+const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
+
+  const chartOptionsFirst = {
+    title: { text: "Alignment of Legend" },
+    series: data,
+    xAxis: {
+      categories: categories,
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: "Number of Employees",
+      },
+    },
+    legend: {
+      enabled: true,
+      align: 'right',
+      verticalAlign: 'top'
+    },
+  }
+
+  const chartOptionsSecond = {
+    title: { text: "Layout of Legend" },
+    series: data,
+    xAxis: {
+      categories: categories,
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: "Number of Employees",
+      },
+    },
+    legend: {
+      enabled: true,
+      layout: 'vertical'
+    },
+  }
+
+  const chartOptionsThird = {
+    title: { text: "Offset of Legend" },
+    series: data,
+    xAxis: {
+      categories: categories,
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: "Number of Employees",
+      },
+    },
+    legend: {
+      enabled: true,
+      layout: 'vertical',
+      x: 100,
+      y: 10
+    },
+  }
+
+const PbLineGraphLegendPosition = (props) => (
+  <div>
+    <Title
+        paddingY="sm"
+        size={4}
+        tag="h4"
+        text="align | verticalAlign"
+    />
+    <PbLineGraph
+        options={chartOptionsFirst}
+        {...props}
+    /> 
+    <Title
+        paddingY="sm"
+        size={4}
+        tag="h4"
+        text="layout"
+    />
+    <PbLineGraph
+        options={chartOptionsSecond}
+        {...props}
+    /> 
+    <Title
+        paddingY="sm"
+        size={4}
+        tag="h4"
+        text="x | y"
+    />
+    <PbLineGraph
+        options={chartOptionsThird}
+        {...props}
+    />
+  </div>
+)
+
+export default PbLineGraphLegendPosition

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_position.md

@@ -0,0 +1,11 @@
+Highcharts provides many options for customizing the legend display. This example showcases the following:
+
+`align` can be used to align the legend left, right or center (defaults to center)
+
+`verticalAlign` can be used to place the legend above the graph. Options are top, middle, bottom with default set to bottom
+
+`layout` determines the position of the legend items. Options are horizontal, vertical or proximate with default set to horizontal `layout: proximate` will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
+
+`x` offsets the legend relative to its horizontal alignment. Negative x moves it to the left, positive x moves it to the right (defaults to 0)
+
+`y` offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down (defaults to 0)

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

@@ -0,0 +1,20 @@
+examples:
+  
+  rails:
+  - pb_line_graph_default: Default
+  - pb_line_graph_legend: Legend
+  - pb_line_graph_legend_position: Legend Position
+  - pb_line_graph_legend_nonclickable: Legend NonClickable
+  - pb_line_graph_height: Height
+  - pb_line_graph_colors: Color Overrides
+  
+  
+  react:
+  - pb_line_graph_default: Default
+  - pb_line_graph_legend: Legend
+  - pb_line_graph_legend_position: Legend Position
+  - pb_line_graph_legend_nonclickable: Legend NonClickable
+  - pb_line_graph_height: Height
+  - pb_line_graph_colors: Color Overrides
+  
+  

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

@@ -0,0 +1,6 @@
+export { default as PbLineGraphDefault } from './_pb_line_graph_default.jsx'
+export { default as PbLineGraphLegend } from './_pb_line_graph_legend.jsx'
+export { default as PbLineGraphLegendPosition } from './_pb_line_graph_legend_position.jsx'
+export { default as PbLineGraphLegendNonclickable } from './_pb_line_graph_legend_nonclickable.jsx'
+export { default as PbLineGraphHeight } from './_pb_line_graph_height.jsx'
+export { default as PbLineGraphColors } from './_pb_line_graph_colors.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_attributes.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+
+
+const RichTextEditorAdvancedAttributes = (props) => {
+
+    const editor = useEditor({
+        extensions: [
+            StarterKit,
+            Link
+        ],
+        content:"Add your text here. You can format your text, add links, quotes, and bullets."
+    })
+      if (!editor) {
+        return null
+      } 
+
+      
+
+
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          aria={{ label: 'I am a rich text editor' }}
+          data={{ 'test-data': 'value', 'test-data2': 'value2' }}
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedAttributes

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_attributes.md

@@ -0,0 +1 @@
+Aria labels and data attributes can also be added to the top level div for the RichTextEditor.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+
+
+const RichTextEditorAdvancedFocus = (props) => {
+    const editor = useEditor({
+        extensions: [
+            StarterKit,
+            Link
+        ],
+        content:"Click inside to see the toolbar. Click outside to hide it."
+    })
+
+    if (!editor) {
+        return null
+    } 
+
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          focus
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedFocus

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.md

@@ -0,0 +1 @@
+When the optional `focus` prop is set to true, the toolbar will only show once you click in to the RichTextEditor. 

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+
+
+const RichTextEditorAdvancedInline = (props) => {
+
+    const editor = useEditor({
+        extensions: [
+            StarterKit,
+            Link
+        ],
+        content:"Add your text here. You can format your text, add links, quotes, and bullets."
+    })
+      if (!editor) {
+        return null
+      } 
+
+      
+
+
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          inline
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedInline

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.md

@@ -0,0 +1 @@
+When the optional `inline` prop is set to true, the editor borders and the toolbar will only be visible when hovered or focused on.