playbook_ui 15.2.0.pre.alpha.testingmanual1 → 15.2.0.pre.alpha.testingquickpick11606

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_pb_line_graph/pbLineGraphTheme.ts

@@ -0,0 +1,125 @@
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
+
+const pbLineGraphTheme = {
+  title: {
+    text: "",
+    style: {
+      color: colors.text_lt_default,
+      fontFamily: typography.font_family_base,
+      fontWeight: typography.bold,
+      fontSize: typography.heading_3,
+    },
+  },
+  subtitle: {
+    text: "" ,
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_lt_light,
+      fontWeight: typography.regular,
+      fontSize: typography.text_base,
+    },
+  },
+  chart: {
+    type: "line",
+  },
+  tooltip: {
+    backgroundColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, colors.bg_dark],
+        [1, colors.bg_dark],
+      ],
+    },
+    followPointer: true,
+    shadow: false,
+    borderWidth: 0,
+    borderRadius: 10,
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_dk_default,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller,
+    },
+  },
+  plotOptions: {
+    line: {
+      dataLabels: {
+        enabled: false,
+      },
+    },
+  },
+  credits: { enabled: false },
+  legend: { 
+    enabled: false,
+    itemStyle: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_lt_light,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller,
+    },
+    itemHoverStyle: {
+      color: colors.text_lt_default,
+    },
+    itemHiddenStyle: {
+      color: colors.text_lt_lighter,
+    },
+  },
+  colors: [
+    colors.data_1,
+    colors.data_2,
+    colors.data_3,
+    colors.data_4,
+    colors.data_5,
+    colors.data_6,
+    colors.data_7,
+  ],
+  xAxis: {
+    gridLineWidth: 0,
+    lineColor: colors.border_light,
+    tickColor: colors.border_light,
+    labels: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+    title: {
+      style: {
+        color: colors.text_lt_default,
+        fontFamily: typography.font_family_base,
+        fontWeight: typography.regular,
+        fontSize: typography.heading_4,
+      },
+    },
+  },
+  yAxis: {
+    alternateGridColor: undefined as string | undefined,
+    minorTickInterval: null as number | null,
+    gridLineColor: colors.border_light,
+    minorGridLineColor: colors.border_light,
+    lineWidth: 0,
+    tickWidth: 0,
+    tickPixelInterval: 50,
+    labels: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+    title: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+  },
+}
+
+export default pbLineGraphTheme;

data/app/pb_kits/playbook/pb_pb_line_graph/pb_line_graph.html.erb

@@ -0,0 +1 @@
+<%= react_component('PbLineGraph', object.react_props) %>

data/app/pb_kits/playbook/pb_pb_line_graph/pb_line_graph.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbPbLineGraph
+    class PbLineGraph < ::Playbook::KitBase
+      prop :options, default: {}
+
+      def react_props
+        {
+          className: classname,
+          data: data,
+          options: options,
+          id: id,
+        }
+      end
+
+      def classname
+        # Highcharts react needs classname attached to the container div,
+        # we pass an empty string here to avoid conflicts, classname is built in the TSX
+        # We still need generate_classnames to retain ability to pass in custom classnames or global props
+        generate_classname("")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_pb_line_graph/pb_line_graph.test.jsx

@@ -0,0 +1,110 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import { PbLineGraph } from 'playbook-ui'
+
+beforeEach(() => {
+  // Silences error logs within the test suite.
+  jest.spyOn(console, 'error');
+  jest.spyOn(console, 'warn');
+  console.error.mockImplementation(() => {});
+  console.warn.mockImplementation(() => {});
+});
+
+afterEach(() => {
+  console.error.mockRestore();
+  console.warn.mockRestore();
+});
+
+const seriesData = [{
+  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: seriesData,
+  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
+  subtitle: { text: "Source: thesolarfoundation.com" },
+  xAxis: {
+    categories: categories,
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+}
+
+const testId = 'pblinegraph1';
+
+test('Kit to exist', () => {
+  render(
+  <PbLineGraph 
+      data={{testid: testId}} 
+      options={chartOptions} 
+  />
+)
+
+  expect(screen.getByTestId(testId)).toBeInTheDocument()
+})
+
+test('Kit to apply base classname', () => {
+  render(
+    <PbLineGraph 
+        data={{testid: testId}} 
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveClass('pb_pb_line_graph')
+})
+
+test('Kit to have custom class', () => {
+  render(
+    <PbLineGraph 
+        className='custom-class'
+        data={{testid: testId}} 
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveClass('custom-class')
+})
+
+test('Kit to apply global props', () => {
+  render(
+    <PbLineGraph 
+        data={{testid: testId}} 
+        margin="lg"
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveClass('m_lg')
+})
+
+test('kit to apply id', () => {
+  render(
+    <PbLineGraph 
+        data={{testid: testId}} 
+        id='line-graph-id'
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveAttribute('id', 'line-graph-id')
+})

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx

@@ -11,7 +11,7 @@ import { ToolbarTypes } from "./EditorTypes";
 import ToolbarHistoryItems from "./ToolbarHistory";
 import MoreExtensionsDropdown from "./MoreExtensionsDropdown";
 
-const EditorToolbar = ({ editor, extensions }: any): React.ReactElement => {
+const EditorToolbar = ({ editor, extensions, simple, sticky }: any): React.ReactElement => {
   const toolbaritems = [
     {
         icon: "bold",
@@ -33,15 +33,50 @@ const EditorToolbar = ({ editor, extensions }: any): React.ReactElement => {
     },
   ]
 
+  const simpleToolbaritems = [
+    {
+        icon: "bold",
+        text: "Bold",
+        classname:`toolbar_button ${editor.isActive('bold') ? 'is-active' : ''}`,
+        onclick:()=>editor.chain().focus().toggleBold().run(),
+    },
+    {
+        icon: "italic",
+        text: "Italic",
+        classname:`toolbar_button ${editor.isActive('italic') ? 'is-active' : ''}`,
+        onclick:() => editor.chain().focus().toggleItalic().run(),
+    },
+  ]
+
   return (
     <Background backgroundColor="white"
-        className="toolbar"
+        className={`toolbar ${sticky ? 'pb_rich_text_editor_tiptap_toolbar_sticky' : ''}`}
+        
     >
       <Flex flex="0"
           justify="between"
           paddingX="sm"
           paddingY="xxs"
       >
+        {
+          simple ? (
+            <>
+              <Flex className="toolbar_block">
+                {simpleToolbaritems && simpleToolbaritems.map(
+                  ({ icon, text, classname, onclick}: ToolbarTypes, index: number) => (
+                    <EditorButton
+                        classname={classname}
+                        icon={icon}
+                        key={index}
+                        onclick={onclick}
+                        text={text}
+                    />
+                  )
+                )}
+              </Flex>
+            </>
+          ) : (
+            <>
         <FlexItem className="toolbar_block"
             displayFlex
         >
@@ -69,6 +104,10 @@ const EditorToolbar = ({ editor, extensions }: any): React.ReactElement => {
             }
         </FlexItem>
         <ToolbarHistoryItems editor={editor} />
+        </>
+          )
+        }
+       
       </Flex>
     </Background>
   );

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx

@@ -146,6 +146,7 @@ const popoverReference = (
 
   return (
       <PbReactPopover
+          className='pb_tiptap_toolbar_dropdown_popover'
           closeOnClick='outside'
           padding='none'
           placement="bottom"

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import classnames from 'classnames'
 import { TrixEditor } from 'react-trix'
 
@@ -77,7 +77,9 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
   const ariaProps = buildAriaProps(aria),
     dataProps = buildDataProps(data),
-    [editor, setEditor] = useState<Editor>()
+    [editor, setEditor] = useState<Editor>(),
+    [showToolbarOnFocus, setShowToolbarOnFocus] = useState(false),
+    containerRef = useRef<HTMLDivElement>(null)
 
   const htmlProps = buildHtmlProps(htmlOptions)
   
@@ -128,6 +130,42 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     document.addEventListener('trix-blur', inlineFocus)
   }
 
+  //===========focus prop with advanced editor=================
+  const isClickInPopover = (event: Event): boolean => {
+    return !!(event.target as Element).closest('.pb_tiptap_toolbar_dropdown_popover')
+  }
+
+  const isClickInContainer = (event: Event): boolean => {
+    return !!(containerRef.current && containerRef.current.contains(event.target as Node))
+  }
+
+  useEffect(() => {
+    if (!advancedEditor || !focus) return
+
+    const handleFocus = () => setShowToolbarOnFocus(true)
+    
+    const handleClickOutside = (event: Event) => {
+      if (isClickInContainer(event) || isClickInPopover(event)) return
+      setShowToolbarOnFocus(false)
+    }
+
+    const editorElement = advancedEditor?.view?.dom
+    if (editorElement) {
+      editorElement.addEventListener('focus', handleFocus)
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+
+    return () => {
+      if (editorElement) {
+        editorElement.removeEventListener('focus', handleFocus)
+      }
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [advancedEditor, focus])
+
+  //============= end focus prop with advanced editor=================
+
   useEffect(() => {
     if (!editor || !template) return
     editor.loadHTML('')
@@ -148,41 +186,43 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     })
   }, [editor])
 
-  const richTextEditorClass = 'pb_rich_text_editor_kit',
-    simpleClass = simple ? 'simple' : '',
-    focusClass = focus ? 'focus-editor-targets' : '',
-    stickyClass = sticky ? 'sticky' : '',
-    inlineClass = inline ? 'inline' : '',
-    toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
-
-  let css = classnames(globalProps(props, { maxWidth }), className)
-  css = classnames(
-    richTextEditorClass,
-    simpleClass,
-    focusClass,
-    stickyClass,
-    inlineClass,
-    toolbarBottomClass,
-    css
+  // Generate CSS classes
+  const css = classnames(
+    'pb_rich_text_editor_kit',
+    {
+      simple: simple,
+      'focus-editor-targets': focus,
+      sticky: sticky,
+      inline: inline,
+      'toolbar-bottom': toolbarBottom,
+    },
+    globalProps(props, { maxWidth }),
+    className
   )
 
+  // Determine if toolbar should be shown
+  const shouldShowToolbar = focus && advancedEditor ? showToolbarOnFocus : advancedEditorToolbar
+
   return (
     <div
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
         className={css}
+        ref={focus ? containerRef : undefined}
     >
       {
         advancedEditor ? (
           <div 
               className={classnames("pb_rich_text_editor_advanced_container", { 
-              ["toolbar-active"]: advancedEditorToolbar,
+              ["toolbar-active"]: shouldShowToolbar,
               })}
           >
-            {advancedEditorToolbar && (
+            {shouldShowToolbar && (
               <EditorToolbar editor={advancedEditor}
                   extensions={extensions}
+                  simple={simple}
+                  sticky={sticky}
               />
             )}
           { children }

data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss

@@ -9,6 +9,37 @@
 @import "previewer_mixin";
 
 [class^="pb_rich_text_editor_kit"] {
+    &.inline {
+        .toolbar {
+          opacity: 0;
+          transition: all 0.3s ease-in-out 0s;
+        }
+    
+        &:focus-within .toolbar {
+          opacity: 100;
+        }
+    
+        .ProseMirror {
+          border: 1px solid transparent;
+          transition: all 0.3s ease-in-out 0s;
+        }
+    
+        &:focus-within .ProseMirror {
+          border: 1px solid $border_light;
+          border-top: none;
+        }
+    
+        &:hover {
+          .toolbar {
+            opacity: 100;
+          }
+    
+          .ProseMirror {
+            border: 1px solid $border_light;
+            border-top: none;
+          }
+        }
+      }
   .toolbar_button {
     display: flex;
     align-items: center;
@@ -42,6 +73,11 @@
     }
   }
 
+  .pb_rich_text_editor_tiptap_toolbar_sticky {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
   .toolbar {
     border-radius: $border_rad_heaviest $border_rad_heaviest 0 0;
     border: 1px solid $border_light;