playbook_ui 12.9.1.pre.alpha.play664tiptapinvestigation353 → 12.10.0.pre.alpha.PLAY677richtexteditorts370

data/app/pb_kits/playbook/pb_nav/_nav.test.js

@@ -0,0 +1,119 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import Nav from './_nav'
+import NavItem from './_item'
+
+const navTestId = 'nav'
+const itemTestId = 'item'
+const navClassName = 'custom-class-name-nav'
+const itemClassName = 'custom-class-name-item'
+const navTitle = 'Menu'
+const itemTitle = 'Photos'
+const itemImageUrl = 'https://upload.wikimedia.org/wikipedia/commons/0/00/Apple_News_icon_%28macOS%29.png'
+
+const NavDefault = (props = []) => {
+    return (
+        <Nav
+            aria={{ label: navTestId }}
+            className={navClassName}
+            data={{ testid: navTestId }}
+            title={navTitle}
+            {...props}
+        >
+            <NavItem
+                aria={{ label: itemTestId }}
+                className={itemClassName}
+                data={{ testid: itemTestId }}
+                imageUrl={itemImageUrl}
+                link="#"
+                text={itemTitle}
+            />
+            <NavItem
+                link="#"
+                text="Music"
+            />
+            <NavItem
+                active
+                link="#"
+                text="Video"
+            />
+            <NavItem
+                link="#"
+                text="Files"
+            />
+        </Nav>
+    )
+}
+
+test('should pass data prop', () => {
+    render(<NavDefault />)
+    const kit = screen.getByTestId(navTestId)
+    expect(kit).toBeInTheDocument()
+})
+
+test('should pass className prop', () => {
+    render(<NavDefault />)
+    const kit = screen.getByTestId(navTestId)
+    expect(kit).toHaveClass(navClassName)
+})
+
+test('should pass aria prop', () => {
+    render(<NavDefault />)
+    const kit = screen.getByTestId(navTestId)
+    expect(kit).toHaveAttribute('aria-label', navTestId)
+})
+
+test('should render nav title', () => {
+    render(<NavDefault />)
+    const kit = screen.getByText(navTitle)
+    expect(kit).toBeInTheDocument()
+})
+
+test('should not be borderless by default', () => {
+    render(<NavDefault />)
+    const kit = screen.getByTestId(navTestId)
+    expect(kit).toHaveClass('pb_nav_list_normal_vertical_highlight')
+})
+
+test('should be borderless', () => {
+    render(<NavDefault borderless />)
+    const kit = screen.getByTestId(navTestId)
+    expect(kit).toHaveClass('pb_nav_list_normal_vertical_highlight_borderless')
+})
+
+test('should highlight by default', () => {
+    render(<NavDefault />)
+    const kit = screen.getByTestId(navTestId)
+    expect(kit).toHaveClass('pb_nav_list_normal_vertical_highlight')
+})
+
+test('should not highlight', () => {
+    render(<NavDefault highlight={false} />)
+    const kit = screen.getByTestId(navTestId)
+    expect(kit).toHaveClass('pb_nav_list_normal_vertical')
+})
+
+test('should have vertical orientation by default', () => {
+    render(<NavDefault />)
+    const kit = screen.getByTestId(navTestId)
+    expect(kit).toHaveClass('pb_nav_list_normal_vertical_highlight')
+})
+
+test('should change orientation', () => {
+    render(<NavDefault orientation='horizontal' />)
+    const kit = screen.getByTestId(navTestId)
+    expect(kit).toHaveClass('pb_nav_list_normal_horizontal_highlight')
+})
+
+test('should have normal variant by default', () => {
+    render(<NavDefault />)
+    const kit = screen.getByTestId(navTestId)
+    expect(kit).toHaveClass('pb_nav_list_normal_vertical_highlight')
+})
+
+test('should change variant', () => {
+    render(<NavDefault variant='subtle' />)
+    const kit = screen.getByTestId(navTestId)
+    expect(kit).toHaveClass('pb_nav_list_subtle_vertical_highlight')
+})

data/app/pb_kits/playbook/pb_nav/{_nav.jsx → _nav.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
@@ -9,20 +7,21 @@ import { globalProps } from '../utilities/globalProps'
 import Caption from '../pb_caption/_caption'
 
 type NavProps = {
-  aria?: object,
+  aria?: { [key: string]: string },
   borderless?: boolean,
-  children?: React.Node,
-  className?: string | array<string>,
+  children?: React.ReactNode[] | React.ReactNode,
+  className?: string | string[],
   data?: object,
   dark?: boolean,
   highlight?: boolean,
   id?: string,
-  onClick?: EventHandler,
+  onClick?: React.MouseEventHandler<HTMLElement>,
   orientation?: "vertical" | "horizontal",
-  link: SVGFESpecularLightingElement,
+  link: string,
   title: string,
   variant?: "normal" | "subtle",
 }
+
 const Nav = (props: NavProps) => {
   const {
     aria = {},
@@ -34,7 +33,7 @@ const Nav = (props: NavProps) => {
     highlight = true,
     id,
     link = '#',
-    onClick = () => {},
+    onClick = () => { },
     orientation = 'vertical',
     title = '',
     variant = 'normal',
@@ -53,26 +52,26 @@ const Nav = (props: NavProps) => {
 
   return (
     <nav
-        {...ariaProps}
-        {...dataProps}
-        className={cardCss}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      className={cardCss}
+      id={id}
     >
-      <If condition={title}>
+      {title &&
         <div className="pb_nav_list_title">
           <a
-              className="pb_nav_list_item_link_text"
-              href={link}
-              onClick={onClick}
+            className="pb_nav_list_item_link_text"
+            href={link}
+            onClick={onClick}
           >
             <Caption
-                dark={dark}
-                size="md"
-                text={`${title}`}
+              dark={dark}
+              size="md"
+              text={`${title}`}
             />
           </a>
         </div>
-      </If>
+      }
       <ul>{children}</ul>
     </nav>
   )

data/app/pb_kits/playbook/pb_nav/_nav_item.test.js

@@ -0,0 +1,83 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import Nav from './_nav'
+import NavItem from './_item'
+
+const navTestId = 'nav'
+const itemTestId = 'item'
+const navClassName = 'custom-class-name-nav'
+const itemClassName = 'custom-class-name-item'
+const navTitle = 'Menu'
+const itemTitle = 'Photos'
+const itemImageUrl = 'https://upload.wikimedia.org/wikipedia/commons/0/00/Apple_News_icon_%28macOS%29.png'
+
+const NavDefault = (props) => {
+    return (
+        <Nav
+            aria={{ label: navTestId }}
+            className={navClassName}
+            data={{ testid: navTestId }}
+            title={navTitle}
+        >
+            <NavItem
+                aria={{ label: itemTestId }}
+                className={itemClassName}
+                data={{ testid: itemTestId }}
+                imageUrl={itemImageUrl}
+                link="#"
+                text={itemTitle}
+                {...props}
+            />
+            <NavItem
+                link="#"
+                text="Music"
+            />
+            <NavItem
+                active
+                link="#"
+                text="Video"
+            />
+            <NavItem
+                link="#"
+                text="Files"
+            />
+        </Nav>
+    )
+}
+
+test('should pass data prop', () => {
+    render(<NavDefault />)
+    const kit = screen.getByTestId(itemTestId)
+    expect(kit).toBeInTheDocument()
+})
+
+test('should pass className prop', () => {
+    render(<NavDefault />)
+    const kit = screen.getByTestId(itemTestId)
+    expect(kit).toHaveClass(itemClassName)
+})
+
+test('should pass aria prop', () => {
+    render(<NavDefault />)
+    const kit = screen.getByTestId(itemTestId)
+    expect(kit).toHaveAttribute('aria-label', itemTestId)
+})
+
+test('should render title', () => {
+    render(<NavDefault />)
+    const kit = screen.getByText(itemTitle)
+    expect(kit).toBeInTheDocument()
+})
+
+test('should have a right icon', () => {
+    render(<NavDefault iconRight="angle-down" />)
+    const kit = screen.getByTestId(itemTestId)
+    expect(kit).toContainHTML('<i class="pb_icon_kit far fa-fw fa-angle-down pb_nav_list_item_icon_right" />')
+})
+
+test('should have a left icon', () => {
+    render(<NavDefault iconLeft="users-class" />)
+    const kit = screen.getByTestId(itemTestId)
+    expect(kit).toContainHTML('<i class="pb_icon_kit far fa-fw fa-users-class pb_nav_list_item_icon_left" />')
+})

data/app/pb_kits/playbook/pb_rich_text_editor/{_rich_text_editor.jsx → _rich_text_editor.tsx}

@@ -1,13 +1,9 @@
-/* @flow */
-/* eslint-disable react-hooks/rules-of-hooks */
-
 import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
 import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
 import { globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps, noop } from '../utilities/props'
-import PBTipTapEditor from './_tiptap'
 
 try {
   const Trix = require('trix')
@@ -19,12 +15,21 @@ try {
 
 import { TrixEditor } from "react-trix"
 
+type Editor = {
+  attributeIsActive?: Function,
+  element?: HTMLElement,
+  getSelectedDocument?: Function,
+  getSelectedRange?: () => Array<number>,
+  insertHTML?: Function,
+  loadHTML?: Function,
+  setSelectedRange?: (range: Array<number>) => void,  
+}
+
 type RichTextEditorProps = {
-  aria?: object,
-  advanced?: Boolean,
+  aria?: { [key: string]: string },
   toolbarBottom?: Boolean,
   className?: string,
-  data?: object,
+  data?: { [key: string]: string },
   focus?: boolean,
   id?: string,
   inline?: boolean,
@@ -40,7 +45,6 @@ type RichTextEditorProps = {
 const RichTextEditor = (props: RichTextEditorProps) => {
   const {
     aria = {},
-    advanced = false,
     toolbarBottom = false,
     className,
     data = {},
@@ -56,19 +60,19 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   } = props
 
   const ariaProps = buildAriaProps(aria),
-  dataProps = buildDataProps(data),
-  [editor, setEditor] = useState()
+    dataProps = buildDataProps(data),
+    [editor, setEditor] = useState<Editor>()
 
-  const handleOnEditorReady = (editorInstance) => setEditor(editorInstance),
-  element = editor?.element
+  const handleOnEditorReady = (editorInstance: Editor) => setEditor(editorInstance),
+    element = editor?.element
 
   // DOM manipulation must wait for editor to be ready
   if (editor) {
-    const toolbarElement = element.parentElement.querySelector('trix-toolbar'),
-    blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]')
+    const toolbarElement = element.parentElement.querySelector('trix-toolbar') as HTMLElement,
+      blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]') as HTMLElement
 
-    let inlineCodeButton = toolbarElement.querySelector('[data-trix-attribute=inlineCode]')
-    if (!inlineCodeButton) inlineCodeButton = blockCodeButton.cloneNode(true)
+    let inlineCodeButton = toolbarElement.querySelector('[data-trix-attribute=inlineCode]') as HTMLElement
+    if (!inlineCodeButton) inlineCodeButton = blockCodeButton.cloneNode(true) as HTMLElement
 
     // set button attributes
     inlineCodeButton.dataset.trixAttribute = 'inlineCode'
@@ -96,8 +100,8 @@ const RichTextEditor = (props: RichTextEditorProps) => {
 
     focus
       ? (document.addEventListener('trix-focus', useFocus),
-      document.addEventListener('trix-blur', useFocus),
-      useFocus())
+        document.addEventListener('trix-blur', useFocus),
+        useFocus())
       : null
 
     document.addEventListener('trix-focus', inlineFocus)
@@ -113,11 +117,11 @@ const RichTextEditor = (props: RichTextEditorProps) => {
 
   useEffect(() => {
     if (!element) return
-    element.addEventListener('click', ({target}) => {
-      const trixEditorContainer = target.closest('.pb_rich_text_editor_kit')
+    element.addEventListener('click', ({ target }: Event) => {
+      const trixEditorContainer = (target as Element).closest('.pb_rich_text_editor_kit')
       if (!trixEditorContainer) return
 
-      const anchorElement = target.closest('a')
+      const anchorElement = (target as Element).closest('a')
       if (!anchorElement) return
 
       if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
@@ -125,11 +129,11 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   }, [element])
 
   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' : ''
+    simpleClass = simple ? 'simple' : '',
+    focusClass = focus ? 'focus-editor-targets' : '',
+    stickyClass = sticky ? 'sticky' : '',
+    inlineClass = inline ? 'inline' : '',
+    toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
 
   let css = classnames(globalProps(props), className)
   css = classnames(
@@ -144,27 +148,19 @@ const RichTextEditor = (props: RichTextEditorProps) => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={css}
+      {...ariaProps}
+      {...dataProps}
+      className={css}
     >
-      {
-        advanced ? (
-          <>
-          <PBTipTapEditor/>
-          </>
-        ) : (
-          <TrixEditor
-              className=""
-              fileParamName={name}
-              onChange={onChange}
-              onEditorReady={handleOnEditorReady}
-              placeholder={placeholder}
-              value={value}
-          />
-        )
-      }
-      
+      <TrixEditor
+        className=""
+        fileParamName={name}
+        mergeTags={[]}
+        onChange={onChange}
+        onEditorReady={handleOnEditorReady}
+        placeholder={placeholder}
+        value={value}
+      />
     </div>
   )
 }

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

@@ -13,7 +13,6 @@ examples:
 
   react:
   - rich_text_editor_default: Default
-  - rich_text_editor_tip_tap: Advanced
   - rich_text_editor_simple: Simple
   - rich_text_editor_attributes: Attributes
   - rich_text_editor_focus: Focus
@@ -22,4 +21,3 @@ examples:
   - rich_text_editor_toolbar_bottom: Toolbar Bottom
   - rich_text_editor_inline: Inline
   - rich_text_editor_preview: Preview
-

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

@@ -7,4 +7,3 @@ export { default as RichTextEditorTemplates } from './_rich_text_editor_template
 export { default as RichTextEditorToolbarBottom } from './_rich_text_editor_toolbar_bottom.jsx'
 export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
 export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'
-export { default as RichTextEditorTipTap } from './_rich_text_editor_tip_tap.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/{inlineFocus.js → inlineFocus.ts}

@@ -1,5 +1,5 @@
 const inlineFocus = () => {
-  const trixEditorElement = event.target
+  const trixEditorElement = event.target as Element
   const trixEditorContainer = trixEditorElement.closest('.pb_rich_text_editor_kit')
 
   if (!trixEditorContainer.classList.contains('inline')) return

data/app/pb_kits/playbook/pb_rich_text_editor/{useFocus.js → useFocus.ts}

@@ -2,7 +2,7 @@ const useFocus = () => {
   const allTrixEditors = document.querySelectorAll(
     '.focus-editor-targets trix-editor'
   )
-  allTrixEditors.forEach((editorElement) => {
+  allTrixEditors.forEach((editorElement: any) => {
     const toolbarElement = editorElement.toolbarElement
     if (editorElement == document.activeElement) {
       editorElement.classList.add('focused-editor')

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -140,10 +140,12 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         {...dataProps}
         className={css}
     >
-      <Caption
-          className="pb_text_input_kit_label"
-          text={label}
-      />
+      {label && 
+        <Caption
+            className="pb_text_input_kit_label"
+            text={label}
+        />
+      }
       <div className={`${addOnCss} text_input_wrapper`}>
         {render}
 

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_no_label.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("text_input", props: {
+  placeholder: "Enter email address",
+  type: "email"
+}) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_no_label.jsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react'
+
+import TextInput from '../_text_input'
+
+const TextInputNoLabel = (props) => {
+  const [email, setEmail] = useState('')
+
+  const handleUpdateEmail = ({ target }) => {
+    setEmail(target.value)
+  }
+  return (
+    <div>
+      <TextInput
+          onChange={handleUpdateEmail}
+          placeholder="Enter email address"
+          type="email"
+          value={email}
+          {...props}
+      />
+    </div>
+  )
+}
+export default TextInputNoLabel

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

@@ -6,6 +6,7 @@ examples:
   - text_input_disabled: Disabled
   - text_input_add_on: Add On
   - text_input_inline: Inline
+  - text_input_no_label: No Label
   react:
   - text_input_default: Default
   - text_input_error: With Error
@@ -13,3 +14,4 @@ examples:
   - text_input_disabled: Disabled
   - text_input_add_on: Add On
   - text_input_inline: Inline
+  - text_input_no_label: No Label

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

@@ -4,3 +4,4 @@ export { default as TextInputError } from './_text_input_error.jsx'
 export { default as TextInputDisabled } from './_text_input_disabled.jsx'
 export { default as TextInputAddOn } from './_text_input_add_on.jsx'
 export { default as TextInputInline } from './_text_input_inline.jsx'
+export { default as TextInputNoLabel } from './_text_input_no_label.jsx'

data/lib/playbook/pb_doc_helper.rb

@@ -27,9 +27,9 @@ module Playbook
 
     # Deal with lists of kits, used in Playbook doc and Externally
     # rubocop:disable Style/StringConcatenation
-    def pb_kits(type: "rails", limit_examples: false, dark_mode: false)
+    def pb_kits(type: "rails", limit_examples: false, dark_mode: false, method: get_kits)
       display_kits = []
-      kits = get_kits
+      kits = method
       kits.each do |kit|
         if kit.is_a?(Hash)
           nav_hash_array(kit).each do |sub_kit|
@@ -45,7 +45,12 @@ module Playbook
 
     # rubocop:disable Naming/AccessorMethodName
     def get_kits
-      menu = YAML.load_file(Playbook::Engine.root.join("app/pb_kits/playbook/data/menu.yml"))
+      menu = YAML.load_file(Playbook::Engine.root.join("dist/menu.yml"))
+      menu["kits"]
+    end
+
+    def get_kits_pb_website
+      menu = YAML.load_file(Rails.root.join("config/menu.yml"))
       menu["kits"]
     end
     # rubocop:enable Naming/AccessorMethodName

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.9.1"
-  VERSION = "12.9.1.pre.alpha.play664tiptapinvestigation353"
+  PREVIOUS_VERSION = "12.10.0"
+  VERSION = "12.10.0.pre.alpha.PLAY677richtexteditorts370"
 end