playbook_ui 13.10.0.pre.alpha.play1054tableheadersortconsolidation1416 → 13.10.0.pre.alpha.play10481357

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 73ae878bbc3c1d7604ea145aa35e8fe38574ee90570c59dd0435f0391878b799
-  data.tar.gz: 90557548b67fc1a87beb6b48bcbaea53bb090b2cf144c9e45b42ef82966498d0
+  metadata.gz: 4be354f837930c062c2ca20fb53bbeb46c9eb62f30a8e1719eee358ce16e0f8b
+  data.tar.gz: e0768ac01b6863cfab1a30ea9ab9bfeb41879a0b4500cf6b2ffe09824984f823
 SHA512:
-  metadata.gz: f5a488807613b3df413cd9cda4a3414aa634afe26fa3800bc75ebb8d06e37ef9778b2b4c8ccd25407fdb392f0b57d78f5746a8b4a631100c324a703b70dc809e
-  data.tar.gz: 218291c52fddc4f43ca0806e2dc67c86f8fb33082212594078752f05d08109f2e36fc705a6d37b1ed2ac79b502e1e0de2f8214f0e767c71fd13e98806fd25dc8
+  metadata.gz: 7843c0ec8b259fb4eaea357b2345665a23879952c4093dcf43598d1ee4533f3077ae84a6b7b040243ffcaaf057ab67246406ffab8437bb2ef11741eaf6d579ee
+  data.tar.gz: 7f956d0c0beb74d55e19cab98bceee15ba08fe26591dba9d84bdd2445f9c1dc17e77494874e58e1f25a2fc3d944687bc97e5fd4e49594b5a15f6d58226b23791

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

@@ -25,11 +25,3 @@ examples:
   - button_size: Button Size
   - button_form: Button Form Attribute
   - button_hover: Button Hover
-
-  swift:
-  - button_default_swift: Button Variants
-  - button_full_width_swift: Button Full Width
-  - button_icon_options_swift: Button Icon Options
-  - button_circle_swift: Circle Button
-  - button_size_swift: Button Size
-  - button_props_swift: ""

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

@@ -25,15 +25,3 @@ examples:
   - card_separator: Separator Card
   - card_border_none: No Border
   - card_border_radius: Border Radius
-  swift:
-  - card_light_swift: Default
-  - card_background_swift: Card Backgrounds
-  - card_highlight_swift: Highlight Cards
-  - card_header_swift: Header Cards
-  - card_padding_swift: Padding Size
-  - card_shadow_swift: Shadow Size
-  - card_separator_swift: Separator Card
-  - card_border_none_swift: No Border
-  - card_border_radius_swift: Border Radius
-  - card_styles_swift: Styles
-  - card_props_swift: ""

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

@@ -4,6 +4,7 @@ import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps, noop } from '../utilities/props'
+import cn from 'classnames'
 
 try {
   const Trix = require('trix')
@@ -29,6 +30,7 @@ type Editor = {
 type RichTextEditorProps = {
   aria?: { [key: string]: string },
   advancedEditor?: any,
+  advancedEditorToolbar?: boolean,
   toolbarBottom?: Boolean,
   children?: React.ReactNode | React.ReactNode[]
   className?: string,
@@ -51,6 +53,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   const {
     aria = {},
     advancedEditor,
+    advancedEditorToolbar = true,
     toolbarBottom = false,
     children,
     className,
@@ -163,8 +166,14 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     >
       {
         advancedEditor ? (
-          <div className='pb_rich_text_editor_advanced_container'>
-          <EditorToolbar extensions={extensions} editor={advancedEditor}/>
+          <div 
+              className={cn("pb_rich_text_editor_advanced_container", { 
+              ["toolbar-active"]: advancedEditorToolbar,
+              })}
+            >
+            {advancedEditorToolbar && (
+              <EditorToolbar extensions={extensions} editor={advancedEditor}/>
+            )}
           { children }
           </div>
         ) : (

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

@@ -65,9 +65,7 @@
   .ProseMirror {
     background: $white;
     border: 1px solid $border_light;
-    border-top-color: transparent;
-    border-bottom-right-radius: $border_rad_heaviest;
-    border-bottom-left-radius: $border_rad_heaviest;
+    border-radius: $border_rad_heaviest;
     height: 100%;
     padding: 1rem 1.5rem 1.5rem 1.5rem;
     line-height: $lh_loose;
@@ -127,7 +125,6 @@
     }
     &:focus-visible {
       outline: unset;
-      border-top-color: $primary;
       @include transition_default;
     }
     h1 {
@@ -228,4 +225,11 @@
     border-radius: $border_rad_heaviest;
     transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
   }
+  &.toolbar-active {
+    .ProseMirror { 
+      border-top: none;
+      border-top-left-radius: initial;
+      border-top-right-radius: initial;
+    }
+  }
 }

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

@@ -0,0 +1,33 @@
+import React from "react";
+import { useEditor, EditorContent } from "@tiptap/react";
+
+import { RichTextEditor } from "../..";
+
+import Document from "@tiptap/extension-document";
+import Paragraph from "@tiptap/extension-paragraph";
+import Text from "@tiptap/extension-text";
+
+const RichTextEditorToolbarDisabled = (props) => {
+  const editor = useEditor({
+    extensions: [Document, Paragraph, Text],
+    content:
+      "Add your text here. You can format your text, add links, quotes, and bullets.",
+  });
+  if (!editor) {
+    return null;
+  }
+
+  return (
+    <div>
+      <RichTextEditor 
+          advancedEditor={editor} 
+          advancedEditorToolbar={false}
+          {...props}
+      >
+        <EditorContent editor={editor} />
+      </RichTextEditor>
+    </div>
+  );
+};
+
+export default RichTextEditorToolbarDisabled;

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

@@ -0,0 +1,3 @@
+This variant allows you to optionally include the default toolbar. 
+
+The default toolbar relies on [Tiptap's StarterKit](https://tiptap.dev/api/extensions/starter-kit) which might add  that are not necessary for your application. Setting the `advancedEditorToobar` to false enables you to instantiate an editor with the minimum requirements.

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

@@ -15,6 +15,7 @@ examples:
   - rich_text_editor_default: Default
   - rich_text_editor_advanced_default: Advanced Default
   - rich_text_editor_more_extensions: Advanced (Extra Extensions)
+  - rich_text_editor_toolbar_disabled: Advanced (Toolbar disabled)
   - 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

@@ -8,4 +8,5 @@ export { default as RichTextEditorToolbarBottom } from './_rich_text_editor_tool
 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 RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'
+export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'
+export { default as RichTextEditorToolbarDisabled } from './_rich_text_editor_toolbar_disabled.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor_advanced.test.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { render } from "../utilities/test-utils";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Link from "@tiptap/extension-link";
+
+import RichTextEditor from "./_rich_text_editor";
+
+const kitClass = "pb_rich_text_editor_advanced_container";
+
+const EditorTest = (props) => {
+  const editor = useEditor({
+    extensions: [StarterKit, Link],
+    content: "",
+  });
+
+  return (
+    <RichTextEditor 
+        advancedEditor={editor} 
+        {...props}
+    >
+      <EditorContent editor={editor} />
+    </RichTextEditor>
+  );
+};
+
+test("returns namespaced class name", () => {
+  const { container } = render(<EditorTest />);
+
+  expect(container.getElementsByClassName(kitClass).length).toBeGreaterThan(0);
+});
+
+test("returns toolbar class name", () => {
+  const { container } = render(<EditorTest />);
+
+  expect(
+    container.getElementsByClassName(`${kitClass} toolbar-active`).length
+  ).toBeGreaterThan(0);
+});
+
+test("doesn't returns toolbar class name", () => {
+  const { container } = render(<EditorTest advancedEditorToolbar={false} />);
+
+  expect(
+    container.getElementsByClassName(`${kitClass} toolbar-active`).length
+  ).toBe(0);
+});

data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb

@@ -1,37 +1,12 @@
-<%# Example data for demonstration purposes %>
-<% data_rows = [
-    { 'territory' => 'North', 'firstname' => 'John', 'lastname' => 'Doe', 'age' => 30, 'job' => 'Engineer' },
-    { 'territory' => 'South', 'firstname' => 'Alice', 'lastname' => 'Smith', 'age' => 28, 'job' => 'Designer' },
-    { 'territory' => 'East', 'firstname' => 'Mike', 'lastname' => 'Johnson', 'age' => 35, 'job' => 'Manager' },
-    { 'territory' => 'West', 'firstname' => 'Sarah', 'lastname' => 'Brown', 'age' => 29, 'job' => 'Developer' },
-    { 'territory' => 'Central', 'firstname' => 'David', 'lastname' => 'Wilson', 'age' => 32, 'job' => 'Analyst' }
-  ]
-%>
-
-<%# Example sort method for demonstration purposes %>
-<% if params["sort"] %>
-  <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
-  <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
-  <% data_rows.sort! do |a, b|
-    value_a = a[sort_param]
-    value_b = b[sort_param]
-
-    value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
-    value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
-
-    sort_direction * (value_a <=> value_b)
-  end %>
-<% end %>
-
-<%= pb_rails("table", props: { data_table: true, vertical_border: true, id: "table-header" } ) do %>
+<%= pb_rails("table", props: { size: "lg"} ) do %>
   <thead>
     <tr>
       <%= pb_rails("table/table_header", props: {
         text: "Territory",
         id: "territory",
         sort_menu: [
-          { item: "Territory", link: "?sort=territory_asc#table-header", active: params["sort"] == "territory_asc", direction: "asc" },
-          { item: "Territory", link: "?sort=territory_desc#table-header", active: params["sort"] == "territory_desc", direction: "desc" }
+          { item: "Territory", link: "?sort=territory_desc", active: params["sort"] == "territory_desc", direction: "desc" },
+          { item: "Territory", link: "?sort=territory_asc", active: params["sort"] == "territory_asc", direction: "asc" }
         ],
       }) %>
       <%= pb_rails("table/table_header", props: {
@@ -39,36 +14,45 @@
         text: "Full Name",
         colspan: 2,
         sort_menu: [
-          { item: "First Name", link: "?sort=firstname_desc#table-header", active: params["sort"] == "firstname_desc", direction: "desc" },
-          { item: "First Name", link: "?sort=firstname_asc#table-header", active: params["sort"] == "firstname_asc", direction: "asc" },
-          { item: "Last Name", link: "?sort=lastname_desc#table-header", active: params["sort"] == "lastname_desc", direction: "desc" },
-          { item: "Last Name", link: "?sort=lastname_asc#table-header", active: params["sort"] == "lastname_asc", direction: "asc" }
+          { item: "First Name Descending", link: "?sort=firstname_desc", active: params["sort"] == "firstname_desc", direction: "desc" },
+          { item: "First Name Ascending", link: "?sort=firstname_asc", active: params["sort"] == "firstname_asc", direction: "asc" },
+          { item: "Last Name Descending", link: "?sort=lastname_desc", active: params["sort"] == "lastname_desc", direction: "desc" },
+          { item: "Last Name Ascending", link: "?sort=lastname_asc", active: params["sort"] == "lastname_asc", direction: "asc" }
         ],
       }) %>
       <%= pb_rails("table/table_header", props: {
         text: "Age",
         id: "age",
+        sort_dropdown: true,
         sort_menu: [
-          { item: "Age Descending", link: "?sort=age_desc#table-header", active: params["sort"] == "age_desc", direction: "desc" },
-          { item: "Age Ascending", link: "?sort=age_asc#table-header", active: params["sort"] == "age_asc", direction: "asc" }
+          { item: "Age Descending", link: "?sort=age_desc", active: params["sort"] == "age_desc", direction: "desc" },
+          { item: "Age Ascending", link: "?sort=age_asc", active: params["sort"] == "age_asc", direction: "asc" }
         ],
       }) %>
       <%= pb_rails("table/table_header", props: { text: "Job Title" }) %>
     </tr>
   </thead>
   <tbody>
-    <% data_rows.each do |row| %>
-      <tr>
-        <% row.each do |key, value| %>
-          <%= pb_rails("background", props: {
-              background_color: (params["sort"] && params["sort"].start_with?(key) ? "info_subtle" : "card_light"),
-              text_align: (value.is_a?(Integer) ? "right" : ""),
-              tag: "td"
-          }) do %>
-            <%= value %>
-          <% end %>
-        <% end %>
-      </tr>
-    <% end %>
+    <tr>
+      <td>Ter 1</td>
+      <td>First Name 1</td>
+      <td>Last Name 1</td>
+      <td>Age 1</td>
+      <td>Job 1</td>
+    </tr>
+    <tr>
+      <td>Ter 2</td>
+      <td>First Name 2</td>
+      <td>Last Name 2</td>
+      <td>Age 2</td>
+      <td>Job 2</td>
+    </tr>
+    <tr>
+      <td>Ter 3</td>
+      <td>First Name 3</td>
+      <td>Last Name 3</td>
+      <td>Age 3</td>
+      <td>Job 3</td>
+    </tr>
   </tbody>
 <% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_header.md

@@ -6,8 +6,3 @@ presence of `sort_menu` enables the sort link within the header
 * `sort_dropdown` (boolean) optionally declares that (true) clicking a header's sort link opens a dropdown of sort options, or (false) each sort link click cycles through available sort_menu items in the order they are passed
   * passing a valid `colspan` will render sort options within a dropdown by default, without requiring `sort_dropdown` explicitly. Alternatively, the default sort dropdown can be prevented on headers with `colspan` by setting `sort_dropdown: false`, which reverts the column to sorting to multi-click default (each click of the sort link cycles through the available sort_menu items in the order they are passed)
 * `id` (string) is required for headers that have a dropdown (for popover reference); otherwise they are optional
-
-</br>
-<div class="pb_pill_kit_warning"><div class="pb_title_kit_size_4 pb_pill_text">Disclaimer</div></div>
-
-This example uses a custom sort method that may need to be modified or replaced within your project.

data/app/pb_kits/playbook/pb_table/table_header.html.erb

@@ -3,7 +3,7 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: "pb-th#{object.id}" ) do %>
+    id: "pb-th#{object.id}") do %>
   <% unless sorting_style? %>
     <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
       <%= content.presence || object.text %>
@@ -28,16 +28,15 @@
                                       position: object.placement ,
                                       padding: 'none'}) do %>
         <%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
-          <% object.sort_items.each do |sort_item| %>
-            <% item = active_or_first_item(sort_items_for(sort_item)) %>
+          <% object.sort_menu.each_with_index do |item, index| %>
             <%= pb_rails("nav/item", props: {
               text: item[:item],
-              link: next_link(sort_item: sort_item),
+              link: item[:link],
               highlighted_border: false,
               padding: "xs",
               icon_right: sort_icon(item[:direction], item[:active]),
               active: item[:active],
-              classname: "header_nav_item"
+              classname: "header_nav_item #{'header_first_item' if index == 0} #{'header_last_item' if index == object.sort_menu.size - 1}"
             }) %>
           <% end %>
         <% end %>

data/app/pb_kits/playbook/pb_table/table_header.rb

@@ -32,43 +32,20 @@ module Playbook
         align.present? ? "align_#{align}" : nil
       end
 
-      def next_link(sort_item: "")
-        sort_menu_for = if sort_item.blank?
-                          sort_menu
-                        else
-                          sort_items_for(sort_item)
-                        end
-
-        return sort_menu_for[0][:link] if sort_menu_for.all? { |item| item[:active] == false }
+      def next_link
+        return sort_menu[0][:link] if sort_menu.all? { |item| item[:active] == false }
 
         link = ""
 
-        sort_menu_for.each_with_index do |item, index|
+        sort_menu.each_with_index do |item, index|
           if item[:active] == true
-            next_index = (index + 1) % sort_menu_for.length
-            link = sort_menu_for[next_index][:link]
+            next_index = (index + 1) % sort_menu.length
+            link = sort_menu[next_index][:link]
           end
         end
         link
       end
 
-      def sort_items
-        sort_menu.map { |hash| hash[:item] }.uniq
-      end
-
-      def sort_items_for(sort_item)
-        sort_menu.find_all { |hash| hash[:item] == sort_item }
-      end
-
-      def active_or_first_item(items)
-        active_item = items.find { |hash| hash[:active] == true }
-        if active_item.present?
-          active_item
-        else
-          items[0]
-        end
-      end
-
       def sorting_style?
         sort_menu != [{}]
       end