playbook_ui 12.20.0 → 12.21.0.pre.alpha.PLAY807RTEcustomtoolbar680

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 86c4aefb2ca62f0357facbacd990e8ef9283fe061b307b2b3a48d9a44aae93bd
-  data.tar.gz: d46b8bcadd416bed1be375a1a60789b9e82ed3998a7e94d511f183a887e13654
+  metadata.gz: 9561ff1283a2c2a61fd7562e899a6c2391f1cbf95010e4365229d432904b878a
+  data.tar.gz: 8e70472802e711a1d8d304e973f1bca85a9b496c1d7af38af367e931dcf320f6
 SHA512:
-  metadata.gz: 9f016eb2b9946595c6bc70b9b48bd7faffe5249084040bc5a0046fa4b9c08fb006a245c5b570a296bc130795b1e510701a0e765c0018ca66dd322bf56619ea96
-  data.tar.gz: e08f975d11599e129cf94ce4f4c91f965708fe984565e46538f8dd254577bee99e59cc26d2d8c51948bbcc3488ccf61d7be997ae9ffd3a60ac23e9ea0a616727
+  metadata.gz: 3bead3870a688c20c322c9bf534ddef966ed46e361eeded0d79b351e99640693bd9bb3f6ab5a2b2e62129145c189b5d2becc7c6fd34647f6b2485c1cc42ed077
+  data.tar.gz: f572b39bd3f17ea6619df329cd1e5986f8374b7b713e74ffab52094b45180c9f8a5a168651e909ad3d4b1af7d5097503d4dc156ab0f49c334e67b2b1c9c1c94a

data/app/pb_kits/playbook/pb_docs/kit_example.html.erb

@@ -15,31 +15,60 @@
     <div id="code-wrapper">
       <div class="pb--codeControls">
         <ul>
-          <% if type == "rails" %>
+          <% hide_button = type == "rails" ? 'flex' : 'none' %>
             <li>
-              <a href="#" id="copy-<%= example_key %>-trigger" onclick="copyOnClick(`<%= example_html %>`, `copy-<%= example_key %>`)">
-                Copy HTML
-              </a>
+            <%= pb_rails("button", props: { id:"copy-html-#{example_key}", icon: "copy", text: "Copy HTML", variant: "link", size: "sm", display: hide_button }) %>
             </li>
-          <% end %>
           <li>
-            <a href="#" id="toggle-open" data-toggle="code_example">Code Example</a>
+            <%= pb_rails("button", props: { icon: "code", id:"toggle-open-opened", text: "Close Code", variant: "link", size: "sm", display: "none" }) %>
+            <%= pb_rails("button", props: { icon: "code", id:"toggle-open-closed", text: "Show Code", variant: "link", size: "sm" }) %>
           </li>
         </ul>
       </div>
       <div class="pb--codeCopy" data-action="toggle" data-togglable="code_example" style="display: none" >
         <%= pb_rails("section_separator", props: { dark: dark })%>
-        <a href="#" id="toggle-close" data-toggle="false" class="pb--close-toggle">Close</a>
+        <a href="#" style="padding: 16px 0px 22px 0px;" id="copy-code-<%= example_key %>" class="pb--copy-code" onclick="copyOnClick(`<%= source %>`, `copy-code-<%= example_key %>`)">
+          <%= pb_rails("button", props: { id: "copy-button-#{example_key}", text: "Copy Code", size: "sm", icon: "copy" }) %>
+        </a>
         <pre class="highlight"><%= raw rouge(source, highlighter) %></pre>
       </div>
+        <%= pb_rails("popover", props: {
+          trigger_element_id: "copy-button-#{example_key}",
+          tooltip_id: "tooltip-#{example_key}",
+          offset: true,
+          position: "bottom"
+        }) do %>
+        Code Copied
+    <% end %>
     </div>
   <% end %>
 <% end %>
 
 <script>
-  function copyOnClick(content, elementID) {
-    copyContent(content)
+  var htmlButton = document.getElementById('<%= "copy-html-#{example_key}" %>')
+  if (htmlButton) {
+    htmlButton.addEventListener('click', function() {
+      var tempElement = document.createElement('div')
+      tempElement.innerHTML = `<%= example_html %>`
+      var decodedString = tempElement.textContent || tempElement.innerText;
+      copyContent(decodedString)
+    })
+  }
+
+  var button = document.getElementById('<%= "copy-button-#{example_key}" %>')
+  if (button) {
+    button.addEventListener('click', function() {
+      var tempElement = document.createElement('div')
+      tempElement.innerHTML = `<%= source %>`
+      var decodedString = tempElement.textContent || tempElement.innerText;
+      copyContent(decodedString)
+      var fadeAwayDiv = document.getElementById("<%= "tooltip-#{example_key}" %>")
+      setTimeout(function() {
+        fadeAwayDiv.classList.remove('show')
+      }, 3000)
+      setTimeout(function() {
+        fadeAwayDiv.classList.add('hide')
+      }, 3001)
+    })
   }
-  
 </script>
-   

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss

@@ -3,57 +3,99 @@
 @import "../tokens/border_radius";
 @import "../tokens/shadows";
 @import "../tokens/spacing";
+@import "../tokens/typography";
+@import "../tokens/line_height";
 
 .pb_multi_level_select {
+  font-family: $font-family-base;
+
+  .search {
+    font-family: $font-family-base;
+  }
+
   .dropdown {
     width: 100%;
     .search {
       border-bottom: none;
     }
 
+    .toggle {
+      padding: 0px $space_xs + 1;
+    }
+    .node.tree {
+      display: flex;
+      align-items: center;
+    }
+
+    .node-label {
+      line-height: $lh_tight;
+      color: $text_lt_default;
+      font-size: $text_default;
+      font-weight: $regular;
+      font-family: $font-family-base;
+    }
+
+    .checkbox-item {
+      height: $space_sm;
+      width: $space_sm;
+    }
+
     .toggle.expanded:after {
       border-style: solid;
       border-width: 0.1em 0.1em 0 0;
       content: "";
       display: inline-block;
-      height: 0.6em;
-      left: 0.1em;
+      height: 0.8em;
       position: relative;
       vertical-align: top;
-      width: 0.6em;
-      top: 10px;
+      width: 0.8em;
+      top: 7px;
       transform: rotate(135deg);
       font-size: 0.5em;
     }
+    .toggle.expanded:hover {
+      background-color: rgba(0, 86, 207, 0.1);
+      border-radius: $border_radius_rounded;
+      &::after {
+        color: $primary;
+      }
+    }
     .toggle.collapsed:after {
       border-style: solid;
       border-width: 0.1em 0.1em 0 0;
       content: "";
       display: inline-block;
-      height: 0.6em;
-      left: 0.1em;
+      height: 0.8em;
+      right: 0.1em;
       position: relative;
       vertical-align: top;
-      width: 0.6em;
-      top: 10px;
+      width: 0.8em;
+      top: 7px;
       font-size: 0.5em;
-
       transform: rotate(45deg);
-      top: 12px;
+      top: 9px;
+    }
+
+    .toggle.collapsed:hover {
+      background-color: rgba(0, 86, 207, 0.1);
+      border-radius: $border_radius_rounded;
+      &::after {
+        color: $primary;
+      }
     }
 
     .tag {
-      height: 37px;
+      height: fit-content;
       display: inline-flex;
       justify-content: center;
       align-items: center;
-      padding: 0 $space_xxs 0 $space_xs;
-      border-radius: 18px;
+      padding: $space_xxs $space_xxs $space_xxs $space_xs;
+      border-radius: $border_radius_xl + 2;
       background-color: rgba($primary, 0.1);
       color: $primary;
       border: none;
-      font-size: 16px;
-      font-weight: 700;
+      font-size: $font_smaller;
+      font-weight: $bolder;
 
       .tag-remove {
         color: $primary;

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

@@ -0,0 +1,69 @@
+import React, { useState } from 'react'
+
+import Flex from '../../pb_flex/_flex'
+import PbReactPopover from '../../pb_popover/_popover'
+import Icon from '../../pb_icon/_icon'
+import Nav from '../../pb_nav/_nav'
+import NavItem from '../../pb_nav/_item'
+
+const MoreExtensionsDropdown = ({extensions}: any) => {
+  const [showPopover, setShowPopover] = useState(false)
+
+  const handleTogglePopover = () => {
+    setShowPopover(true)
+  }
+
+  const handlePopoverClose = (shouldClosePopover: boolean) => {
+    setShowPopover(!shouldClosePopover)
+  }
+
+
+const popoverReference = (
+    <button
+    className="toolbar_button"
+    onClick={handleTogglePopover}
+  >
+    <Flex 
+      align="center"
+      className="toolbar_button_icon"
+      justify="center"
+    >
+      <Icon icon="ellipsis" size="lg" />
+    </Flex>
+  </button>
+
+);
+
+  return (
+      <PbReactPopover
+          closeOnClick='outside'
+          padding='none'
+          placement="bottom"
+          reference={popoverReference}
+          shouldClosePopover={handlePopoverClose}
+          show={showPopover}
+      >
+        <Nav 
+          paddingTop={extensions.length > 1 ? "xs" : "none"}
+          paddingBottom={extensions.length > 1 ? "xs" : "none"} 
+          variant="subtle"
+        >
+          {extensions && extensions.map(({ icon, text, onclick, isActive}:any, 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 MoreExtensionsDropdown

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

@@ -9,8 +9,9 @@ import ToolbarDropdown from "./ToolbarDropdown";
 import ToolbarNodes from "./ToolbarNodes";
 import { ToolbarTypes } from "./EditorTypes";
 import ToolbarHistoryItems from "./ToolbarHistory";
+import MoreExtensionsDropdown from "./MoreExtensionsDropdown";
 
-const EditorToolbar = ({ editor }:any) => {
+const EditorToolbar = ({ editor, extensions }:any) => {
   const toolbaritems = [
     {
         icon: "bold",
@@ -51,10 +52,17 @@ const EditorToolbar = ({ editor }:any) => {
             )}
             <SectionSeparator orientation="vertical" />
             <ToolbarNodes editor={editor} />
+            {
+          extensions && (
+            <>
+            <MoreExtensionsDropdown extensions={extensions}/>
+            </>
+          )
+        }
+
         </FlexItem>
         <ToolbarHistoryItems editor={editor} />
       </Flex>
-      {/* <SectionSeparator /> */}
     </Background>
   );
 };

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

@@ -98,7 +98,17 @@ const popoverReference = (
        activeCount === 2 ? (
         activeItems[1]
        ) : (
+        activeCount === 1 ? (
         activeItems[0] || null
+        ) : (
+          <Flex align="center" key="paragraph" gap="xs">
+            <Icon icon="paragraph" size="lg" />
+            <div>Paragraph</div>
+            <Flex className={showPopover ? "fa-flip-vertical" : ""} display="inline_flex">
+              <Icon fixedWidth icon="angle-down" margin-left="xs" />
+            </Flex>
+          </Flex>
+        )
        )
     }
   </Button>

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

@@ -35,7 +35,8 @@ type RichTextEditorProps = {
   data?: { [key: string]: string },
   focus?: boolean,
   id?: string,
-  inline?: boolean,
+  inline?: boolean, 
+  extensions?: { [key: string]: string }[],
   name?: string,
   onChange: (html: string, text: string) => void,
   placeholder?: string,
@@ -56,6 +57,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     data = {},
     focus = false,
     inline = false,
+    extensions,
     name,
     onChange = noop,
     placeholder,
@@ -162,7 +164,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
       {
         advancedEditor ? (
           <div className='pb_rich_text_editor_advanced_container'>
-          <EditorToolbar editor={advancedEditor}/>
+          <EditorToolbar extensions={extensions} editor={advancedEditor}/>
           { children }
           </div>
         ) : (

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import { RichTextEditor } from '../..'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+
+import HorizontalRule from "@tiptap/extension-horizontal-rule"
+import Highlight from '@tiptap/extension-highlight'
+
+
+const RichTextEditorMoreExtensions = (props) => {
+
+    const editor = useEditor({
+        extensions: [
+            StarterKit,
+            Link,
+            HorizontalRule,
+            Highlight.configure({ multicolor: true })
+        ],
+        content:"Add your text here. You can format your text, add links, quotes, and bullets."
+    })
+      if (!editor) {
+        return null
+      } 
+
+  const ExtensionsList = [
+    {
+        icon: "horizontal-rule",
+        isActive: editor.isActive("horizontalRule"),
+        text: "Horizontal Rule",
+        onclick: () => editor.chain().focus().setHorizontalRule().run(),
+    },
+    {
+      icon: "highlighter",
+      isActive: editor.isActive("highlight"),
+      text: "Highlighter",
+      onclick: () => editor.chain().focus().toggleHighlight().run(),
+    }
+  ]
+
+      
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          extensions={ExtensionsList}
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorMoreExtensions

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md

@@ -0,0 +1,12 @@
+This variant allows you to optionally include any of [Tiptap’s 53 extensions](https://tiptap.dev/extensions) within any advanced editor by using the `extensions` prop.
+
+__NOTE__: In order to leverage this prop, you __must__ install the extension you need in your project, import it and pass it to the extensions array as shown in this example with the HorizontalRule and the Highlight extensions. 
+
+In order to add the extension to the editor toolbar, create an array of objects (as shown in the ExtensionsList array in the example below). Each object in this array should include:
+
+`icon`: the icon to display within the toolbar dropdown (any Fontawesome icons can be used)
+`isActive`: sets the extension to active within the dropdown, when applicable
+`text`: the label within the toolbar dropdown
+`onclick`: initializes the extension when it’s clicked within the dropdown (snytax varies with extension, see Tiptap's docs for more information)
+
+This array can then be passed to the `extensions` prop and all extensions in the array will be rendered in the ellipsis dropdown. 

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

@@ -14,6 +14,7 @@ examples:
   react:
   - rich_text_editor_default: Default
   - rich_text_editor_advanced_default: Advanced Default
+  - rich_text_editor_more_extensions: Advanced (Extra Extensions)
   - rich_text_editor_simple: Simple
   - rich_text_editor_attributes: Attributes
   - rich_text_editor_focus: Focus

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

@@ -7,4 +7,5 @@ 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 RichTextEditorAdvancedDefault } from './_rich_text_editor_advanced_default.jsx'
+export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_advanced_default.jsx'
+export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'

data/app/pb_kits/playbook/pb_user_badge/{_user_badge.jsx → _user_badge.tsx}

@@ -1,17 +1,15 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
-import Veteran from './badges/veteran.jsx';
-import MillionDollar from './badges/million-dollar.jsx';
-
+import Veteran from './badges/veteran'
+import MillionDollar from './badges/million-dollar';
 
 type UserBadgeProps = {
-  aria?: object,
+  aria?: {[key: string]: string},
   badge?: "million-dollar" | "veteran",
   className?: string,
-  data?: object,
+  data?: {[key: string]: string},
   id?: string,
   size?: "sm" | "md" | "lg",
 }
@@ -37,10 +35,10 @@ const UserBadge = (props: UserBadgeProps) => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
     >
       <div className="pb_user_badge_wrapper">
         {image}
@@ -48,4 +46,5 @@ const UserBadge = (props: UserBadgeProps) => {
     </div>
   )
 }
+
 export default UserBadge