playbook_ui 12.17.0 → 12.18.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown617

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx

@@ -29,14 +29,17 @@ const LightboxMultiple = (props) => {
     'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
     'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
   ]
+  const [selectedPhoto, setSelectedPhoto] = useState(0)
   const [light, toggleLight] = useState(false)
 
   const handleCloseLightbox = () => {
     toggleLight(!light)
+    setSelectedPhoto(null)
   }
 
-  const onPhotoClick = () => {
+  const onPhotoClick = (photo) => {
     toggleLight(!light)
+    setSelectedPhoto(photo)
   }
 
   const exampleStyles = {
@@ -49,6 +52,7 @@ const LightboxMultiple = (props) => {
       {light ? (
         <Lightbox
             icon="times"
+            initialPhoto={selectedPhoto}
             onChange={(index) => console.log(`current photo index: ${index}`)}
             onClose={handleCloseLightbox}
             photos={photos}

data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx

@@ -18,6 +18,7 @@ test('Kit renders', () => {
         data={{ testid: testId }}
         icon="close"
         id="test1"
+        initialPhoto={1}
         onClose={() => {}}
         photos={TEST_PHOTOS}
     />
@@ -34,6 +35,7 @@ test('Shows selected images', () => {
         data={{ testid: testId }}
         icon="close"
         id="test1"
+        initialPhoto={1}
         onClose={() => {}}
         photos={TEST_PHOTOS}
     />
@@ -41,7 +43,7 @@ test('Shows selected images', () => {
   const kit = screen.getByTestId(testId)
   const slide = kit.getElementsByClassName('Slide')[0]
   const image = slide.getElementsByTagName('img')[0]
-  expect(image).toHaveAttribute('src', TEST_PHOTOS[0])
+  expect(image).toHaveAttribute('src', TEST_PHOTOS[1])
 
   const thumbnails = kit.getElementsByClassName('Thumbnail')
 
@@ -75,6 +77,7 @@ test('Closes on escape key', async () => {
         data={{ testid: testId }}
         icon="close"
         id="test1"
+        initialPhoto={0}
         onClose={mockClose}
         photos={TEST_PHOTOS}
     />
@@ -103,6 +106,7 @@ test('Closes on close button', async () => {
         data={{ testid: testId }}
         icon="close"
         id="test1"
+        initialPhoto={0}
         onClose={mockClose}
         photos={TEST_PHOTOS}
     />

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Icon from '../pb_icon/_icon'
 import Image from '../pb_image/_image'
@@ -13,15 +13,15 @@ type NavItemProps = {
   children?: React.ReactNode[] | React.ReactNode,
   className?: string,
   data?: object,
-  iconLeft: string,
-  iconRight: string,
+  iconLeft?: string,
+  iconRight?: string,
   id?: string,
-  imageUrl: string,
-  link: string,
+  imageUrl?: string,
+  link?: string,
   onClick?: React.MouseEventHandler<HTMLElement>,
   target?: '_blank' | '_self' | '_parent' | '_top',
   text: string,
-}
+} & GlobalProps
 
 const NavItem = (props: NavItemProps) => {
   const {
@@ -87,7 +87,7 @@ const NavItem = (props: NavItemProps) => {
         <span className="pb_nav_list_item_text">
           {text || children}
         </span>
-        
+
         {iconRight &&
           <div
             className="pb_nav_list_item_icon_section"

data/app/pb_kits/playbook/pb_nav/_nav.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Caption from '../pb_caption/_caption'
 
@@ -17,10 +17,10 @@ type NavProps = {
   id?: string,
   onClick?: React.MouseEventHandler<HTMLElement>,
   orientation?: "vertical" | "horizontal",
-  link: string,
-  title: string,
+  link?: string,
+  title?: string,
   variant?: "normal" | "subtle",
-}
+} & GlobalProps
 
 const Nav = (props: NavProps) => {
   const {

data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss

@@ -44,7 +44,7 @@
     &[class*=_active] [class*=_link] {
       @include pb_title_4;
       color: $primary;
-       letter-spacing: normal;
+      letter-spacing: normal;
     }
   }
 }

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

@@ -0,0 +1,49 @@
+import React from "react";
+
+import Icon from "../../pb_icon/_icon";
+import Flex from "../../pb_flex/_flex";
+import Tooltip from "../../pb_tooltip/_tooltip";
+
+
+type EditorButtonProps = {
+  classname?: string,
+  onclick?: () => {} | void,
+  icon?: string;
+  text?: string;
+  disable?: boolean
+};
+
+const EditorButton = ({
+  classname,
+  disable,
+  onclick,
+  icon,
+  text,
+}: EditorButtonProps) => {
+  return (
+    <Tooltip 
+      delay={{
+        open: 2000
+      }}
+      interaction 
+      placement="top" 
+      text={text}
+    >
+      <button
+        className={classname}
+        onClick={onclick}
+        disabled={disable}
+      >
+        <Flex 
+          align="center"
+          className="toolbar_button_icon"
+          justify="center"
+        >
+          <Icon icon={icon} size="lg" />
+        </Flex>
+      </button>
+    </Tooltip>
+  );
+};
+
+export default EditorButton

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts

@@ -0,0 +1,9 @@
+export type ToolbarTypes = {
+    node?: string,
+    icon?: string,
+    isActive?: string | null,
+    text?: string,
+    onclick?: () => {}
+    classname?: string
+    disable?: boolean
+}

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

@@ -0,0 +1,62 @@
+import React from "react";
+import Background from "../../pb_background/_background";
+import Flex from "../../pb_flex/_flex";
+import FlexItem from "../../pb_flex/_flex_item";
+import SectionSeparator from "../../pb_section_separator/_section_separator";
+
+import  EditorButton  from "./EditorButton";
+import ToolbarDropdown from "./ToolbarDropdown";
+import ToolbarNodes from "./ToolbarNodes";
+import { ToolbarTypes } from "./EditorTypes";
+import ToolbarHistoryItems from "./ToolbarHistory";
+
+const EditorToolbar = ({ editor }:any) => {
+  const toolbaritems = [
+    {
+        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(),
+    },
+    {
+        icon: "strikethrough",
+        text: "Strikethrough",
+        classname:`toolbar_button ${editor.isActive('strike') ? 'is-active' : ''}`,
+        onclick:() => editor.chain().focus().toggleStrike().run(),
+    },
+  ]
+
+  return (
+    <Background backgroundColor="white" className="toolbar">
+      <Flex flex="0" justify="between" paddingX="sm" paddingY="xxs">
+        <FlexItem className="toolbar_block" displayFlex>
+          <ToolbarDropdown editor={editor}/>
+          <SectionSeparator orientation="vertical" />
+            {toolbaritems && toolbaritems.map(
+              ({ icon, text, classname, onclick}:ToolbarTypes, index:number) => (
+                <EditorButton
+                  classname={classname}
+                  icon={icon}
+                  key={index}
+                  text={text}
+                  onclick={onclick}
+                />
+              )
+            )}
+            <SectionSeparator orientation="vertical" />
+            <ToolbarNodes editor={editor} />
+        </FlexItem>
+        <ToolbarHistoryItems editor={editor} />
+      </Flex>
+      {/* <SectionSeparator /> */}
+    </Background>
+  );
+};
+
+export default EditorToolbar

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

@@ -0,0 +1,139 @@
+import React, { useState } from 'react'
+
+import Flex from '../../pb_flex/_flex'
+import PbReactPopover from '../../pb_popover/_popover'
+import Button from '../../pb_button/_button'
+import Icon from '../../pb_icon/_icon'
+import Nav from '../../pb_nav/_nav'
+import NavItem from '../../pb_nav/_item'
+
+import { ToolbarTypes } from './EditorTypes'
+
+const ToolbarDropdown = ({editor}: any) => {
+  const [showPopover, setShowPopover] = useState(false)
+
+const toolbarDropdownItems = [
+    {
+        node: "paragraph",
+        icon: "paragraph",
+        isActive: editor.isActive("paragraph"),
+        text: "Paragraph",
+        onclick: () => editor.chain().focus().setParagraph().run(),
+    },
+    {
+        node: "heading-1",
+        icon: "h1",
+        isActive: editor.isActive("heading", {level: 1}),
+        text: "Heading 1",
+        onclick: () => editor.chain().focus().toggleHeading({level:1}).run(),
+    },
+    {
+        node: "heading-2",
+        icon: "h2",
+        isActive: editor.isActive("heading", {level: 2}),
+        text: "Heading 2",
+        onclick: () => editor.chain().focus().toggleHeading({level:2}).run(),
+    },
+    {
+        node: "heading-3",
+        icon: "h3",
+        isActive: editor.isActive("heading", {level: 3}),
+        text: "Heading 3",
+        onclick: () => editor.chain().focus().toggleHeading({level:3}).run(),
+    },
+    {
+        node: "bulletList",
+        icon: "list",
+        isActive: editor.isActive("bulletList"),
+        text: "Bullet List",
+        onclick: () => editor.chain().focus().toggleBulletList().run(),
+    },
+    {
+        node: "orderedList",
+        icon: "list-ol",
+        isActive: editor.isActive("orderedList"),
+        text: "Ordered List",
+        onclick: () =>   editor.chain().focus().toggleOrderedList().run()
+        ,
+    },
+    {
+        node: "blockquote",
+        icon: "block-quote",
+        isActive: editor.isActive("blockquote"),
+        text: "Block Quote",
+        onclick: () => editor.chain().focus().toggleBlockquote().run(),
+    },
+]
+
+
+  const handleTogglePopover = () => {
+    setShowPopover(true)
+  }
+
+  const handlePopoverClose = (shouldClosePopover: boolean) => {
+    setShowPopover(!shouldClosePopover)
+  }
+
+let activeCount = 0;
+const activeItems = [];
+
+for (const { text, isActive, icon } of toolbarDropdownItems) {
+  if (isActive) {
+    activeCount ++
+    activeItems.push(
+      <Flex align="center" key={icon} gap="xs">
+        <Icon icon={icon} size="lg" />
+        <div>{text}</div>
+        <Flex className={showPopover ? "fa-flip-vertical" : ""} display="inline_flex">
+          <Icon fixedWidth icon="angle-down" margin-left="xs" />
+        </Flex>
+      </Flex>
+    );
+  }
+}
+
+const popoverReference = (
+  <Button className="editor-dropdown-button" onClick={handleTogglePopover} variant="secondary">
+    {
+       activeCount === 2 ? (
+        activeItems[1]
+       ) : (
+        activeItems[0] || null
+       )
+    }
+  </Button>
+);
+
+  return (
+      <PbReactPopover
+          closeOnClick='outside'
+          padding='none'
+          placement="bottom"
+          reference={popoverReference}
+          shouldClosePopover={handlePopoverClose}
+          show={showPopover}
+      >
+        <Nav 
+          paddingTop="xs"
+          paddingBottom="xs" 
+          variant="subtle"
+        >
+          {toolbarDropdownItems.map(({ icon, text, onclick, isActive}:ToolbarTypes, index:number) => (
+            <NavItem
+              cursor="pointer"
+              className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`}
+              iconLeft={icon}
+              key={`${text}_${index}`}
+              margin='none'
+              onClick={()=> {onclick(); setShowPopover(false)}}
+              text={text}
+              paddingTop='xxs'
+              paddingBottom='xxs'
+            />
+          ))}
+        </Nav>
+      </PbReactPopover>
+  )
+}
+
+export default ToolbarDropdown

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

@@ -0,0 +1,45 @@
+import React from "react";
+import FlexItem from "../../pb_flex/_flex_item";
+import EditorButton from "./EditorButton";
+import { ToolbarTypes } from "./EditorTypes";
+
+const ToolbarHistoryItems = ({editor}:any) => {
+
+const toolbarHistoryItems = [
+    {
+        classname: `toolbar_button`,
+        icon: "undo",
+        text: "Undo",
+        onclick: () => editor.chain().focus().undo().run(),
+        disable: !editor.can().chain().focus().undo().run()
+    },
+    {
+        classname: `toolbar_button`,
+        icon: "redo",
+        text: "Redo",
+        onclick: () => editor.chain().focus().redo().run(),
+        disable: !editor.can().chain().focus().redo().run()
+    },
+];
+
+    return (
+    <>
+    <FlexItem displayFlex>
+          {toolbarHistoryItems.map(
+            ({ onclick, classname, disable, icon, text }:ToolbarTypes, index:number) => (
+              <EditorButton
+                classname={classname}
+                onclick={onclick}
+                disable={disable}
+                icon={icon}
+                key={index}
+                text={text}
+              />
+            )
+          )}
+        </FlexItem>
+    </>
+    )
+}
+
+export default ToolbarHistoryItems

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

@@ -0,0 +1,59 @@
+import React, {useCallback} from "react";
+import EditorButton from "./EditorButton";
+import { ToolbarTypes } from "./EditorTypes";
+
+const ToolbarNodes = ({editor}:any) => {
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
+const setLink = useCallback(() => {
+  const previousUrl = editor.getAttributes("link").href;
+  const url = window.prompt("URL", previousUrl);
+
+  // cancelled
+  if (url === null) {
+    return;
+  }
+
+  // empty
+  if (url === "") {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+
+    return;
+  }
+
+  // update link
+  editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+}, [editor]);
+
+const toolbarNodesItems = [
+        {
+          onclick: () => editor.chain().focus().toggleCodeBlock().run(),
+          icon: "code",
+          isActive: editor.isActive("codeBlock"),
+          text: "Codeblock",
+        },
+        {
+          onclick: setLink,
+          icon: "link",
+          isActive: editor.isActive("link"),
+          text: "Link",
+        },
+      ];
+
+return (
+    <>
+        {toolbarNodesItems.map(({ onclick, icon, text, isActive }:ToolbarTypes, index:number) => (
+            <EditorButton
+            classname={`toolbar_button ${isActive ? 'is-active' : ''}`}
+            onclick={onclick}
+            icon={icon}
+            key={index}
+            text={text}
+            />
+        ))}
+   </>
+    )
+}
+
+
+export default ToolbarNodes

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

@@ -8,7 +8,7 @@
 @import "../tokens/transition";
 @import "../pb_icon/icon";
 @import "./trix_styles";
-
+@import "./tiptap_styles";
 
 .trix-content pre {
   display: inline-block;

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

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
 import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps, noop } from '../utilities/props'
 
 try {
@@ -14,6 +14,7 @@ try {
 } catch (_e) { /* do nothing */ }
 
 import { TrixEditor } from "react-trix"
+import EditorToolbar from './TipTap/Toolbar'
 
 type Editor = {
   attributeIsActive?: Function,
@@ -27,7 +28,9 @@ type Editor = {
 
 type RichTextEditorProps = {
   aria?: { [key: string]: string },
+  advancedEditor?: any,
   toolbarBottom?: Boolean,
+  children?: React.ReactNode | React.ReactNode[]
   className?: string,
   data?: { [key: string]: string },
   focus?: boolean,
@@ -40,12 +43,15 @@ type RichTextEditorProps = {
   sticky?: boolean,
   template: string,
   value?: string,
-}
+  maxWidth?: string
+} & GlobalProps
 
 const RichTextEditor = (props: RichTextEditorProps) => {
   const {
     aria = {},
+    advancedEditor,
     toolbarBottom = false,
+    children,
     className,
     data = {},
     focus = false,
@@ -57,6 +63,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     sticky = false,
     template = '',
     value = '',
+    maxWidth="md"
   } = props
 
   const ariaProps = buildAriaProps(aria),
@@ -135,7 +142,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     inlineClass = inline ? 'inline' : '',
     toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
 
-  let css = classnames(globalProps(props), className)
+  let css = classnames(globalProps(props, {maxWidth}), className)
   css = classnames(
     richTextEditorClass,
     simpleClass,
@@ -152,15 +159,24 @@ const RichTextEditor = (props: RichTextEditorProps) => {
       {...dataProps}
       className={css}
     >
-      <TrixEditor
-        className=""
-        fileParamName={name}
-        mergeTags={[]}
-        onChange={onChange}
-        onEditorReady={handleOnEditorReady}
-        placeholder={placeholder}
-        value={value}
-      />
+      {
+        advancedEditor ? (
+          <div className='pb_rich_text_editor_advanced_container'>
+          <EditorToolbar editor={advancedEditor}/>
+          { children }
+          </div>
+        ) : (
+          <TrixEditor
+              className=""
+              fileParamName={name}
+              mergeTags={[]}
+              onChange={onChange}
+              onEditorReady={handleOnEditorReady}
+              placeholder={placeholder}
+              value={value}
+          />
+        )
+      }
     </div>
   )
 }