playbook_ui_docs 15.2.0.pre.alpha.play257911600 → 15.2.0.pre.alpha.testingmanual1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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