playbook_ui 12.21.0 → 12.22.0.pre.alpha.PBNTR12checkingemptyfilters686

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1649557cda106585da9087061c3e7e8017578aed64a96820b78ff08ae29b357a
-  data.tar.gz: 7969b004419abdc3a207667de30b50439a42559d00ad1c9144755074932aa2e7
+  metadata.gz: '050709c25af1935687c3472973acb4fe9e7b3e811a0edcf35fb4f01c3d27193c'
+  data.tar.gz: dc4f357e487599331949afd8e95e4ce80285c5223c21cb67c5072af31840bd9d
 SHA512:
-  metadata.gz: cad804b80ced6b0f966c72f7e35a02e782898b03ed8b789120ac8662f6c88c293f63f4b5cc5970916bc91aa0be3a182d42d17e365c79ca07b4f5500edf3aa348
-  data.tar.gz: f8abc54b2526773eb5bdb0244f157a23f27cda78ea88029b59261c4d58938761b0d9eaa9cadce84ea31ffafc23c9a8ff6cb5c09914dcf294b9a74664ab6bddd7
+  metadata.gz: a9347203cd3f428e866317f66251b82bce4794a6376e9fe4028000a7c91aefdceb34a0d4856ce2ccae64f3ed783bbbda8ec4a16ea4e798a9d0a3c54e765a254d
+  data.tar.gz: 8468890749d6669fe3d560741d272de73464c93effe2e7f86301ddd654fbbe7c5601d7b1d3b438363c0bd0278940c8eeea51686b1509bc518c08c9f5930df0cd

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

@@ -46,25 +46,29 @@
 
 <script>
   var htmlButton = document.getElementById('<%= "copy-html-#{example_key}" %>')
-  htmlButton.addEventListener('click', function() {
-    var tempElement = document.createElement('div')
-    tempElement.innerHTML = `<%= example_html %>`
-    var decodedString = tempElement.textContent || tempElement.innerText;
-    copyContent(decodedString)
-  })
+  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}" %>')
-  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)
-  })
+  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_filter/Filter/CurrentFilters.tsx

@@ -27,7 +27,7 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
             color="light"
             paddingLeft="xs"
             size={4}
-            tag="h4"
+            tag="span"
             text="No Filter Selected"
         />
       </div>

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -9,22 +9,23 @@
           <div class="maskContainer">
             <div class="filters">
               <div class="left_gradient"></div>
-              <% object.filters.each do |filter| %>
-                <% if filter[:name] == "" %>
-                  <div>
-                    <%= pb_rails("body", props: {
-                      color: "light",
-                      padding_left: "xs",
-                      size: 4,
-                      tag:"h4",
-                      text: "No Filter Selected"
-                    }) %>
-                  </div>
-                <% else %>
-                <div class="filter">
-                  <%= pb_rails("caption", props: { text: filter[:name]}) %>
-                  <%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
+              <% if object.filters&.none? { |filter| filter[:name].present? } %>
+                <div>
+                  <%= pb_rails("body", props: {
+                    color: "light",
+                    padding_left: "xs",
+                    size: 4,
+                    tag:"span",
+                    text: "No Filter Selected"
+                  }) %>
                 </div>
+              <% end %>
+              <% object.filters&.each do |filter| %>
+                <% if filter[:name].present? %>
+                  <div class="filter">
+                    <%= pb_rails("caption", props: { text: filter[:name]}) %>
+                    <%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
+                  </div>
                 <% end %>
               <% end %>
               <div class="right_gradient"></div>

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,16 @@ 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_weekday_stacked/{_weekday_stacked.jsx → _weekday_stacked.tsx}

@@ -12,18 +12,17 @@ import DateTime from '../pb_kit/dateTime'
 
 type WeekdayStackedProps = {
   align?: "left" | "center" | "right",
-  aria?: object,
+  aria?: {[key:string]:string },
   className?: string,
   dark?: boolean,
   data?: object,
-  date: date,
+  date: Date,
   id?: string,
   variant?: "day_only" | "month_day" | "expanded",
   compact?: boolean,
-  id?: string,
 }
 
-const getDayOfWeek = (value, compact) => {
+const getDayOfWeek = (value: Date | string, compact: boolean) => {
   const dateTime = new DateTime({ value })
   if (compact) {
     return dateTime.toDayAbbr()
@@ -32,7 +31,7 @@ const getDayOfWeek = (value, compact) => {
   }
 }
 
-const getFormattedDate = (value, variant) => {
+const getFormattedDate = (value: Date | string, variant: "day_only" | "month_day" | "expanded") => {
   const dateTime = new DateTime({ value })
   if (variant === 'day_only') {
     return dateTime.toDay()

data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.test.jsx

@@ -0,0 +1,105 @@
+import React from "react";
+import { render, screen } from "../utilities/test-utils";
+
+import WeekdayStacked from "./_weekday_stacked";
+
+const TEST_DATE = "01/01/2020 00:00:000 GMT-0500";
+jest.setSystemTime(new Date(TEST_DATE));
+const testId = "weekdaystacked-kit";
+const realDate = Date;
+
+beforeEach(() => {
+  global.Date.now = jest.fn(() => new Date(TEST_DATE));
+});
+
+afterEach(() => {
+  global.Date = realDate;
+});
+
+describe("WeekdayStacked Kit", () => {
+  test("renders className", () => {
+    render(
+      <WeekdayStacked 
+          data={{ testid: testId }} 
+      />
+    );
+
+    const kit = screen.getByTestId(testId);
+    expect(kit).toHaveClass("pb_weekday_stacked_kit_left");
+  });
+
+  test("renders Caption with weekday", () => {
+    render(
+      <WeekdayStacked 
+          data={{ testid: testId }}
+      />
+    );
+
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_caption_kit_md");
+    expect(text.textContent).toEqual("Wed") 
+  });
+
+  test("renders Title with date", () => {
+    render(
+      <WeekdayStacked 
+          data={{ testid: testId }}
+      />
+    );
+
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_title_kit_size_4");
+    expect(text.textContent).toEqual("1/1") 
+  });
+
+  test("renders compact prop", () => {
+    render(
+      <WeekdayStacked 
+          compact
+          data={{ testid: testId }}
+      />
+    );
+
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_caption_kit_md");
+    expect(text.textContent).toEqual("W") 
+  });
+
+  test("renders align prop", () => {
+    render(
+        <WeekdayStacked 
+            align="left"
+            data={{ testid: testId }}
+        />
+    );
+      
+    const kit = screen.getByTestId(testId);
+    expect(kit).toHaveClass("pb_weekday_stacked_kit_left")
+  });
+
+  test("renders day_only variant prop", () => {
+    render(
+        <WeekdayStacked 
+            data={{ testid: testId }}
+            variant="day_only"
+        />
+    );
+      
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_title_kit_size_4");
+    expect(text.textContent).toEqual("1") 
+  });
+
+  test("renders expanded variant prop", () => {
+    render(
+        <WeekdayStacked 
+            data={{ testid: testId }}
+            variant="expanded"
+        />
+    );
+      
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_title_kit_size_4");
+    expect(text.textContent).toEqual("Jan 1") 
+  });
+});

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.20.0"
-  VERSION = "12.21.0"
+  PREVIOUS_VERSION = "12.22.0"
+  VERSION = "12.22.0.pre.alpha.PBNTR12checkingemptyfilters686"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.21.0
+  version: 12.22.0.pre.alpha.PBNTR12checkingemptyfilters686
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-05-16 00:00:00.000000000 Z
+date: 2023-05-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1721,6 +1721,7 @@ files:
 - app/pb_kits/playbook/pb_radio/radio.test.js
 - app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx
 - app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts
+- app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx
 - app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx
 - app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx
 - app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx
@@ -1740,6 +1741,8 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb
@@ -2347,8 +2350,8 @@ files:
 - app/pb_kits/playbook/pb_walkthrough/docs/example.yml
 - app/pb_kits/playbook/pb_walkthrough/docs/index.js
 - app/pb_kits/playbook/pb_walkthrough/walkthrough.test.jsx
-- app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx
 - app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.scss
+- app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx
 - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.html.erb
 - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.jsx
 - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_default.html.erb
@@ -2359,6 +2362,7 @@ files:
 - app/pb_kits/playbook/pb_weekday_stacked/docs/index.js
 - app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb
 - app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.rb
+- app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.test.jsx
 - app/pb_kits/playbook/playbook-doc.js
 - app/pb_kits/playbook/playbook-rails-react-bindings.js
 - app/pb_kits/playbook/playbook-rails.js
@@ -2487,7 +2491,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - ISC
 metadata: {}
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -2498,12 +2502,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.3.7
-signing_key:
+signing_key: 
 specification_version: 4
 summary: Playbook Design System
 test_files: []