playbook_ui 15.2.0.pre.alpha.play257911600 → 15.2.0.pre.alpha.testingmanual1

data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react"
 import { globalProps } from "../utilities/globalProps";
-import { buildAriaProps, buildDataProps, buildCss, buildHtmlProps } from "../utilities/props";
+import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
 import Highcharts from "highcharts"
 import HighchartsReact from "highcharts-react-official"
 
@@ -18,25 +18,23 @@ type PbBarGraphProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)};
 }
 
-const PbBarGraph = ( props: PbBarGraphProps): React.ReactElement => {
-const {
+const PbBarGraph = ({
   aria = {},
   data = {},
   id,
   htmlOptions = {},
   options,
-  className,
-} = props
+  className = "pb_pb_bar_graph",
+}: PbBarGraphProps): React.ReactElement => {
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions);
-  const classes = classnames(buildCss('pb_pb_bar_graph'), globalProps(props), className)
 
   const mergedOptions = useMemo(() => {
     if (!options || typeof options !== "object") {
       // eslint-disable-next-line no-console
-      console.error("❌ Invalid options passed to <PbBarGraph />", options)
+      console.error("❌ Invalid options passed to <BarGraph />", options)
       return {}
     }
 
@@ -48,7 +46,7 @@ const {
     <div>
       <HighchartsReact
           containerProps={{
-                  className: classnames(classes),
+                  className: classnames(globalProps, className),
                   id: id,
                   ...ariaProps,
                   ...dataProps,

data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb

@@ -4,21 +4,24 @@ module Playbook
   module PbPbBarGraph
     class PbBarGraph < ::Playbook::KitBase
       prop :options, default: {}
+      prop :container_props, default: {}
 
       def react_props
         {
-          className: classname,
-          data: data,
           options: options,
-          id: id,
+          containerProps: container_props_hash,
         }
       end
 
+      def container_props_hash
+        container_props.merge({
+                                id: id,
+                                className: classname,
+                              }).compact
+      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("")
+        generate_classname("pb_pb_bar_graph")
       end
     end
   end

data/app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx

@@ -15,41 +15,6 @@ afterEach(() => {
   console.warn.mockRestore();
 });
 
-const chartData = [{
-    name: 'Installation',
-    data: [1475, 200, 3000, 654, 656],
-  }, {
-    name: 'Manufacturing',
-    data: [4434, 524, 2320, 440, 500],
-  }, {
-    name: 'Sales & Distribution',
-    data: [3387, 743, 1344, 434, 440],
-  }, {
-    name: 'Project Development',
-    data: [3227, 878, 999, 780, 1000],
-  }, {
-    name: 'Other',
-    data: [1111, 677, 3245, 500, 200],
-  }]
-
-  const chartOptions = {
-    series: chartData,
-    title: {
-      text: 'Solar Employment Growth by Sector, 2010-2016',
-    },
-    subtitle: {
-      text: 'Source: thesolarfoundation.com',
-    },
-    xAxis: {
-      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-    },
-    yAxis: {
-      title: {
-        text: 'Number of Employees',
-      },
-    },
-  }
-
 const testId = 'bargraph1';
 
 test('bargraph uses exact classname', () => {
@@ -58,46 +23,9 @@ test('bargraph uses exact classname', () => {
         className='super_important_class'
         data={{ testid: testId }}
         id='bar-default'
-        options={chartOptions}
     />
   );
  
   const kit = screen.getByTestId(testId);
   expect(kit).toHaveClass('super_important_class');
-});
-
-test('Kit to apply base classname', () => {
-  render(
-    <PbBarGraph
-        data={{testid: testId}} 
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveClass('pb_pb_bar_graph')
-})
-
-
-test('Kit to apply global props', () => {
-  render(
-    <PbBarGraph
-        data={{testid: testId}} 
-        margin="lg"
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveClass('m_lg')
-})
-
-test('kit to apply id', () => {
-  render(
-    <PbBarGraph
-        data={{testid: testId}} 
-        id='bar-graph-id'
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveAttribute('id', 'bar-graph-id')
-})
+});

data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx

@@ -46,7 +46,7 @@ const PbCircleChart = (props: PbCircleChartProps) => {
     <div>
       <HighchartsReact
           containerProps={{
-                  className: classnames(classes),
+                  className: classnames(globalProps, className),
                   id: id,
                   ...ariaProps,
                   ...dataProps,

data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb

@@ -4,21 +4,24 @@ module Playbook
   module PbPbCircleChart
     class PbCircleChart < ::Playbook::KitBase
       prop :options, default: {}
+      prop :container_props, default: {}
 
       def react_props
         {
-          className: classname,
-          data: data,
           options: options,
-          id: id,
+          containerProps: container_props_hash,
         }
       end
 
+      def container_props_hash
+        container_props.merge({
+                                id: id,
+                                className: classname,
+                              }).compact
+      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("")
+        generate_classname("pb_pb_circle_chart")
       end
     end
   end

data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx

@@ -49,50 +49,3 @@ test('Kit to exist', () => {
   expect(screen.getByTestId(testId)).toBeInTheDocument()
 })
 
-test('Kit to apply base classname', () => {
-  render(
-    <PbCircleChart
-        data={{testid: testId}} 
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveClass('pb_pb_circle_chart')
-})
-
-test('Kit to have custom class', () => {
-  render(
-    <PbCircleChart
-        className='custom-class'
-        data={{testid: testId}} 
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveClass('custom-class')
-})
-
-test('Kit to apply global props', () => {
-  render(
-    <PbCircleChart
-        data={{testid: testId}} 
-        margin="lg"
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveClass('m_lg')
-})
-
-test('kit to apply id', () => {
-  render(
-    <PbCircleChart
-        data={{testid: testId}} 
-        id='circle-chart-id'
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveAttribute('id', 'circle-chart-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, simple, sticky }: any): React.ReactElement => {
+const EditorToolbar = ({ editor, extensions }: any): React.ReactElement => {
   const toolbaritems = [
     {
         icon: "bold",
@@ -33,50 +33,15 @@ const EditorToolbar = ({ editor, extensions, simple, sticky }: any): React.React
     },
   ]
 
-  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 ${sticky ? 'pb_rich_text_editor_tiptap_toolbar_sticky' : ''}`}
-        
+        className="toolbar"
     >
       <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
         >
@@ -104,10 +69,6 @@ const EditorToolbar = ({ editor, extensions, simple, sticky }: any): React.React
             }
         </FlexItem>
         <ToolbarHistoryItems editor={editor} />
-        </>
-          )
-        }
-       
       </Flex>
     </Background>
   );

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

@@ -146,7 +146,6 @@ 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, useRef } from 'react'
+import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
 import { TrixEditor } from 'react-trix'
 
@@ -77,9 +77,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
   const ariaProps = buildAriaProps(aria),
     dataProps = buildDataProps(data),
-    [editor, setEditor] = useState<Editor>(),
-    [showToolbarOnFocus, setShowToolbarOnFocus] = useState(false),
-    containerRef = useRef<HTMLDivElement>(null)
+    [editor, setEditor] = useState<Editor>()
 
   const htmlProps = buildHtmlProps(htmlOptions)
   
@@ -130,42 +128,6 @@ 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('')
@@ -186,43 +148,41 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     })
   }, [editor])
 
-  // 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
+  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
   )
 
-  // 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"]: shouldShowToolbar,
+              ["toolbar-active"]: advancedEditorToolbar,
               })}
           >
-            {shouldShowToolbar && (
+            {advancedEditorToolbar && (
               <EditorToolbar editor={advancedEditor}
                   extensions={extensions}
-                  simple={simple}
-                  sticky={sticky}
               />
             )}
           { children }

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

@@ -9,37 +9,6 @@
 @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;
@@ -73,11 +42,6 @@
     }
   }
 
-  .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;

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

@@ -7,7 +7,7 @@ examples:
   - rich_text_editor_focus: Focus
   - rich_text_editor_sticky: Sticky
   - rich_text_editor_templates: Templates
-  # - rich_text_editor_toolbar_bottom: Toolbar Bottom
+  - rich_text_editor_toolbar_bottom: Toolbar Bottom
   - rich_text_editor_inline: Inline
   - rich_text_editor_preview: Preview
 
@@ -17,17 +17,11 @@ examples:
   - rich_text_editor_more_extensions: Advanced (Extra Extensions)
   - rich_text_editor_toolbar_disabled: Advanced (Toolbar disabled)
   - rich_text_editor_simple: Simple
-  - rich_text_editor_advanced_simple: Advanced (Simple)
   - rich_text_editor_attributes: Attributes
-  - rich_text_editor_advanced_attributes: Advanced (Attributes)
   - rich_text_editor_focus: Focus
-  - rich_text_editor_advanced_focus: Advanced (Focus)
   - rich_text_editor_sticky: Sticky
-  - rich_text_editor_advanced_sticky: Advanced (Sticky)
   - rich_text_editor_templates: Templates
-  - rich_text_editor_advanced_templates: Advanced (Templates)
-  # - rich_text_editor_toolbar_bottom: Toolbar Bottom
+  - rich_text_editor_toolbar_bottom: Toolbar Bottom
   - rich_text_editor_inline: Inline
-  - rich_text_editor_advanced_inline: Advanced (Inline)
   - rich_text_editor_preview: Preview
   - rich_text_editor_advanced_preview: Advanced Preview

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

@@ -11,9 +11,3 @@ export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_ad
 export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'
 export { default as RichTextEditorToolbarDisabled } from './_rich_text_editor_toolbar_disabled.jsx'
 export { default as RichTextEditorAdvancedPreview } from './_rich_text_editor_advanced_preview.jsx'
-export { default as RichTextEditorAdvancedSimple } from './_rich_text_editor_advanced_simple.jsx'
-export { default as RichTextEditorAdvancedFocus } from './_rich_text_editor_advanced_focus.jsx'
-export { default as RichTextEditorAdvancedTemplates } from './_rich_text_editor_advanced_templates.jsx'
-export { default as RichTextEditorAdvancedAttributes } from './_rich_text_editor_advanced_attributes.jsx'
-export { default as RichTextEditorAdvancedSticky } from './_rich_text_editor_advanced_sticky.jsx'
-export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js

@@ -1,7 +1,5 @@
 import React from 'react'
-import { render, screen, fireEvent, waitFor } from '../utilities/test-utils'
-import { useEditor, EditorContent } from "@tiptap/react"
-import StarterKit from "@tiptap/starter-kit"
+import { render, screen } from '../utilities/test-utils'
 
 import RichTextEditor from './_rich_text_editor'
 
@@ -64,127 +62,3 @@ test('returns "Dark" class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} dark`)
 })
-
-// TipTap testing
-const TestAdvancedEditor = ({ toolbarOnFocus = false, ...props }) => {
-  const editor = useEditor({
-    extensions: [StarterKit],
-    content: '<p>Test content</p>',
-  })
-
-  if (!editor) return null
-
-  return (
-    <RichTextEditor
-        advancedEditor={editor}
-        data={{ testid: testId }}
-        toolbarOnFocus={toolbarOnFocus}
-        {...props}
-    >
-      <EditorContent editor={editor} />
-    </RichTextEditor>
-  )
-}
-
-describe('Advanced TipTap Editor works as expected', () => {
-  test('renders advanced editor with toolbar', () => {
-    render(<TestAdvancedEditor />)
-    
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(kitClass)
-    
-    // Check for advanced container
-    const advancedContainer = kit.querySelector('.pb_rich_text_editor_advanced_container')
-    expect(advancedContainer).toBeInTheDocument()
-    
-    // Check for toolbar
-    const toolbar = kit.querySelector('.toolbar')
-    expect(toolbar).toBeInTheDocument()
-  })
-
-  test('renders advanced editor without toolbar when advancedEditorToolbar is false', () => {
-    render(<TestAdvancedEditor advancedEditorToolbar={false} />)
-    
-    const kit = screen.getByTestId(testId)
-    const toolbar = kit.querySelector('.toolbar')
-    expect(toolbar).not.toBeInTheDocument()
-  })
-
-  test('shows/hides toolbar on focus when focus is enabled', async () => {
-    render(<TestAdvancedEditor focus />)
-    
-    const kit = screen.getByTestId(testId)
-    
-    // Initially toolbar should be hidden
-    let toolbar = kit.querySelector('.toolbar')
-    expect(toolbar).not.toBeInTheDocument()
-    
-    const editorElement = kit.querySelector('.ProseMirror')
-    // Focus the editor
-    fireEvent.focus(editorElement)
-    
-    // Toolbar should now be visible
-    await waitFor(() => {
-      toolbar = kit.querySelector('.toolbar')
-      expect(toolbar).toBeInTheDocument()
-    })
-  })
-
-
-  test('supports simple prop with advanced editor', () => {
-    render(<TestAdvancedEditor simple />)
-    
-    const kit = screen.getByTestId(testId)
-    const toolbar = kit.querySelector('.toolbar')
-    expect(toolbar).toBeInTheDocument()
-    const toolbarDropdown = kit.querySelector('.editor_dropdown_button')
-    expect(toolbarDropdown).not.toBeInTheDocument()
-    expect(kit).toHaveClass(`${kitClass} simple`)
-  })
-
-    test('supports sticky prop with advanced editor', () => {
-    render(<TestAdvancedEditor sticky />)
-    
-    const kit = screen.getByTestId(testId)
-    const stickyToolbar = kit.querySelector('.pb_rich_text_editor_tiptap_toolbar_sticky')
-    expect(stickyToolbar).toBeInTheDocument()
-    expect(kit).toHaveClass(`${kitClass} sticky`)
-  })
-
-  test('applies aria-label when provided', () => {
-    const ariaLabel = 'Rich Text Editor'
-    render(<TestAdvancedEditor aria={{ label: ariaLabel }} />)
-    
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveAttribute('aria-label', ariaLabel)
-  })
-
-  test('supports inline prop with advanced editor', () => {
-    render(<TestAdvancedEditor inline />)
-    
-    const kit = screen.getByTestId(testId)
-    const toolbar = kit.querySelector('.toolbar')
-    expect(toolbar).toBeInTheDocument()
-    expect(kit).toHaveClass(`${kitClass} inline`)
-  })
-
-describe('TipTap Editor Functionality', () => {
-  test('can type and update content', async () => {
-    render(<TestAdvancedEditor />)
-    
-    const kit = screen.getByTestId(testId)
-    const editorContent = kit.querySelector('.ProseMirror')
-    
-    // Focus and type in the editor
-    fireEvent.focus(editorContent)
-    fireEvent.input(editorContent, { 
-      target: { textContent: 'New content' }
-    })
-    
-    await waitFor(() => {
-      expect(editorContent).toHaveTextContent('New content')
-    })
-  })
-})
-})
-