playbook_ui 12.15.0 → 12.16.0.pre.alpha.tiptaptestingpart1528

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '03281cc1b427fa58d12d5fdda8a4c4d2cc8084c2bb8b57d1f8eab0666b833571'
-  data.tar.gz: 6b12d9e8c14770af46560d1c47600ae8866973a96dbde010998f86de8fad929d
+  metadata.gz: 4341c04235a54ee87163dc70611a3316292d39b9b1fdfbd18f2071918b5b52ba
+  data.tar.gz: 43730de1e579c36b56dd7d18683a22143170392ea4901b424d064333af087814
 SHA512:
-  metadata.gz: 9711f9bbac20056a5d7e66a5f2ce1385c520ab8a25d7d4505f23ab04e015d251f7eda1f561d7e9becaf8eefd9d04d9cf35dd5fabba5711397240f79318ce39ca
-  data.tar.gz: d8d4f3c94fe38322ebbf9c14e607cb35f0834bd064795a235664551c56ee593b5ee5d9a0f1d175a826f93a50e5733e18ebef507281015c1e3eb88010ced4942c
+  metadata.gz: 3eefd540b9b47832aaaef279e5b6b30557d9bd3dcad56f0f0bba654d10916bfde828daa12a9b24ce41bfa9ff4678fc0bf6484491999b5997e98e98e0edbaa152
+  data.tar.gz: 0521a6ececeaf575787632b452b9b0ea8041d176be10dcb21c1e52868115fa1c7d8bc0e3f3137f958c73600aaef3bfc34ce932b7b80b408300ab51063079791f

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -24,7 +24,7 @@ type BackgroundProps = {
   id?: string,
   imageUrl?: string,
   padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
-  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td',
   transition?: 'fade' | 'blur' | 'scale',
 } & GlobalProps
 

data/app/pb_kits/playbook/pb_background/background.rb

@@ -91,7 +91,7 @@ module Playbook
       prop :image_url
 
       prop :tag, type: Playbook::Props::Enum,
-                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
+                  values: %w[h1 h2 h3 h4 h5 h6 p div span tr th td],
                   default: "div"
 
       prop :transition, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -43,6 +43,7 @@
     @each $color_name, $color_value in $status_colors {
       &[class*=_#{$color_name}]  {
         background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
+        color: map-get($status_color_text_dark, $color_name);
       }
     }
   }

data/app/pb_kits/playbook/pb_badge/_badge.tsx

@@ -42,7 +42,7 @@ const Badge = (props: BadgeProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    buildCss('pb_badge_kit', variant, rounded ? 'rounded' : null),
+    buildCss('pb_badge_kit', variant === "success" ? "success_sm" : variant, rounded ? 'rounded' : null),
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_badge/badge.rb

@@ -10,11 +10,15 @@ module Playbook
                      default: "neutral"
 
       def classname
-        generate_classname("pb_badge_kit", variant, rounded_class)
+        generate_classname("pb_badge_kit", variant_class, rounded_class)
       end
 
     private
 
+      def variant_class
+        variant === "success" ? "success_sm" : variant
+      end
+
       def rounded_class
         rounded ? "rounded" : nil
       end

data/app/pb_kits/playbook/pb_badge/badge.test.js

@@ -60,7 +60,6 @@ test('displays rounded corners', () => {
 
 test('displays color variants', () => {
   [
-    "success",
     "warning",
     "error",
     "info"
@@ -78,3 +77,19 @@ test('displays color variants', () => {
     cleanup()
   })
 })
+
+test('displays success variant', () => {
+    render(
+      <Badge
+          data={{ testid: testId }}
+          text={"success"}
+          variant={"success"}
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`pb_badge_kit_success_sm
+    `)
+
+    cleanup()
+
+})

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -8,7 +8,7 @@ $pb_body_colors: (
   lighter:        $text_lt_lighter,
   link:           $primary,
   error:          $error,
-  success:        $success,
+  success:        $text_lt_success_sm,
 );
 
 $pb_dark_body_colors: (
@@ -16,7 +16,7 @@ $pb_dark_body_colors: (
   light:          $text_dk_light,
   lighter:        $text_dk_lighter,
   error:          $error,
-  success:        $success,
+  success:        $text_dk_success_sm,
 );
 
 // Order is important here!
@@ -24,7 +24,7 @@ $pb_body_status: (
   default:        $text_lt_default,
   negative:       $error,
   dark_error:     $error_dark_body,
-  positive:       $success,
+  positive:       $text_lt_success_sm,
 );
 
 @mixin pb_body($color: $text_lt_default) {

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss

@@ -6,7 +6,7 @@ $pb_caption_colors: (
   light:          $text_lt_light,
   link:           $primary,
   lighter:        $text_lt_lighter,
-  success:        $success,
+  success:        $text_lt_success_sm,
   error:          $error,
 );
 
@@ -14,7 +14,7 @@ $pb_dark_caption_colors: (
   default:        $text_dk_default,
   light:          $text_dk_light,
   link:           $primary,
-  success:        $success,
+  success:        $text_dk_success_sm,
   error:          $error,
 );
 

data/app/pb_kits/playbook/pb_enhanced_element/index.ts

@@ -7,7 +7,7 @@ export default class PbEnhancedElement {
   static _observer: ElementObserver
   element: Element
 
-  constructor(element: Element) {
+  constructor(element?: Element) {
     this.element = element
   }
 

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx

@@ -94,13 +94,13 @@ const IconStatValue = (props: IconStatValueProps) => {
 
       <div>
         <Flex
-            vertical="bottom"
+            align="baseline"
         >
-          {titleSize(size)}
+            {titleSize(size)}
           &nbsp;
-          <Body
-              text={unit}
-          />
+            <Body
+                text={unit}
+            />
         </Flex>
         <Caption text={text} />
       </div>

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb

@@ -10,7 +10,7 @@
       variant: object.variant } %>
 
       <div>
-        <%= pb_rails("flex", props: { vertical: "bottom" }) do %>
+        <%= pb_rails("flex", props: { align: "baseline" }) do %>
             <%= pb_rails "title", props: {
                 tag: "span",
                 text: object.value_string,

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 {

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

@@ -17,8 +17,8 @@ type NavProps = {
   id?: string,
   onClick?: React.MouseEventHandler<HTMLElement>,
   orientation?: "vertical" | "horizontal",
-  link: string,
-  title: string,
+  link?: string,
+  title?: string,
   variant?: "normal" | "subtle",
 }
 

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -1,7 +1,6 @@
 @import "../tokens/colors";
 
 $transform-rotate-deg: 135deg;
-$input-max-width: 284px;
 $dropdown-min-width: 340px;
 $flag-min-resolution: 192dpi;
 
@@ -10,10 +9,6 @@ $flag-min-resolution: 192dpi;
     color: $focus_input_light;
   }
 
-  .text_input {
-    max-width: $input-max-width;
-  }
-
   .dropdown_open {
     .text_input {
       border-color: $primary !important;

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -7,12 +7,10 @@ module Playbook
                       default: false
       prop :initial_country, type: Playbook::Props::String,
                              default: ""
-      prop :is_valid
       prop :label, type: Playbook::Props::String,
                    default: ""
       prop :name, type: Playbook::Props::String,
                   default: ""
-      prop :onchange
       prop :only_countries, type: Playbook::Props::Array,
                             default: []
       prop :preferred_countries, type: Playbook::Props::Array,
@@ -30,10 +28,8 @@ module Playbook
           dark: dark,
           disabled: disabled,
           initialCountry: initial_country,
-          isValid: is_valid,
           label: label,
           name: name,
-          onChange: onchange,
           onlyCountries: only_countries,
           preferredCountries: preferred_countries,
           value: value,

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?: any,
+    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,128 @@
+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 [activeItem, setActiveItem] = useState({text: "Paragraph", icon: "paragraph"})
+
+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)
+  }
+
+  const popoverReference = (
+    <Button className="editor-dropdown-button"
+        onClick={handleTogglePopover}
+        variant="secondary"
+    >
+      <Flex align="center"
+            key={activeItem ? activeItem.icon : toolbarDropdownItems[0].icon}
+            gap="xs"
+      >
+        <Icon icon={activeItem ? activeItem.icon : toolbarDropdownItems[0].icon} size='lg'/>
+        {activeItem.text}
+        <Flex
+            className={showPopover ? "fa-flip-vertical" : ""}
+            display="inline_flex"
+        >
+          <Icon 
+              fixedWidth 
+              icon="angle-down" 
+              margin-left="xs" 
+          />
+        </Flex>
+      </Flex>
+    </Button>
+  )
+
+  return (
+      <PbReactPopover
+          closeOnClick='outside'
+          padding='none'
+          placement="bottom"
+          reference={popoverReference}
+          shouldClosePopover={handlePopoverClose}
+          show={showPopover}
+      >
+        <Nav variant="subtle">
+          {toolbarDropdownItems.map(({ icon, text, onclick, isActive}:ToolbarTypes, index:number) => (
+            <NavItem
+              cursor="pointer"
+              className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "active" : ""}`}
+              iconLeft={icon}
+              key={`${text}_${index}`}
+              onClick={()=> {onclick(); setShowPopover(false); setActiveItem({text:text, icon:icon})}}
+              text={text}
+            />
+          ))}
+        </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;