playbook_ui 13.10.0 → 13.11.0

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 @@
+Because our default variant's toolbar requires [Tiptap's StarterKit](https://tiptap.dev/api/extensions/starter-kit) which may include features that are not relevant to your project or even block some custom extensions, optionally setting `advancedEditorToolbar` to `false` creates an editor without a toolbar, using only the minimum requirements.
+
+__NOTE__: Omitting the Starter Kit requires that the editor’s default extensions (`document`, `paragraph`, and `text`) __must__ be imported directly from Tiptap or as a custom extensions.

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,12 +1,37 @@
-<%= pb_rails("table", props: { size: "lg"} ) do %>
+<%# 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 %>
   <thead>
     <tr>
       <%= pb_rails("table/table_header", props: {
         text: "Territory",
         id: "territory",
         sort_menu: [
-          { 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" }
+          { 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" }
         ],
       }) %>
       <%= pb_rails("table/table_header", props: {
@@ -14,45 +39,36 @@
         text: "Full Name",
         colspan: 2,
         sort_menu: [
-          { 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" }
+          { item: "First Name Descending", link: "?sort=firstname_desc#table-header", active: params["sort"] == "firstname_desc", direction: "desc" },
+          { item: "First Name Ascending", link: "?sort=firstname_asc#table-header", active: params["sort"] == "firstname_asc", direction: "asc" },
+          { item: "Last Name Descending", link: "?sort=lastname_desc#table-header", active: params["sort"] == "lastname_desc", direction: "desc" },
+          { item: "Last Name Ascending", link: "?sort=lastname_asc#table-header", 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", active: params["sort"] == "age_desc", direction: "desc" },
-          { item: "Age Ascending", link: "?sort=age_asc", active: params["sort"] == "age_asc", direction: "asc" }
+          { 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" }
         ],
       }) %>
       <%= pb_rails("table/table_header", props: { text: "Job Title" }) %>
     </tr>
   </thead>
   <tbody>
-    <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>
+    <% 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 %>
   </tbody>
 <% end %>

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

@@ -6,3 +6,8 @@ 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 %>

data/dist/menu.yml

@@ -1,111 +1,285 @@
+web: &web ["rails", "react"]
+all: &all ["rails", "react", "swift"]
+rails_swift: &rails_swift ["rails", "swift"]
+react_swift: &react_swift ["swift", "react"]
+rails_only: &rails_only ["rails"]
+react_only: &react_only ["react"]
+swift_only: &swift_only ["swift"]
+
 kits:
-  - avatars:
-    - avatar
-    - avatar_action_button
-    - multiple_users
-    - multiple_users_stacked
-    - user
-  - background
-  - bread_crumbs
-  - buttons:
-    - button
-    - button_toolbar
-    - circle_icon_button
-  - card
-  - collapsible
-  - charts_and_graphs:
-    - bar_graph
-    - circle_chart
-    - distribution_bar
-    - gauge
-    - legend
-    - line_graph
-    - treemap_chart
-  - dialog
-  - filter
-  - fixed_confirmation_toast
-  - forms:
-    - checkbox
-    - date_picker
-    - file_upload
-    - form
-    - form_group
-    - form_pill
-    - multi_level_select
-    - passphrase
-    - phone_number_input
-    - radio
-    - rich_text_editor
-    - select
-    - selectable_card
-    - selectable_card_icon
-    - selectable_icon
-    - selectable_list
-    - text_input
-    - textarea
-    - toggle
-    - typeahead
-  - highlight
-  - icon
-  - icon_circle
-  - icon_stat_value
-  - icon_value
-  - image
-  - layouts:
-    - flex
-    - layout
-  - lightbox
-  - list
-  - loading_inline
-  - map
-  - nav
-  - tags:
-    - badge
-    - hashtag
-    - pill
-  - pagination
-  - popover
-  - progress:
-    - progress_pills
-    - progress_simple
-    - progress_step
-  - section_separator
-  - star_rating
-  - table
-  - timeline
-  - time_and_date:
-    - date
-    - date_range_inline
-    - date_range_stacked
-    - date_stacked
-    - date_time
-    - date_time_stacked
-    - date_year_stacked
-    - time
-    - time_range_inline
-    - time_stacked
-    - timestamp
-    - weekday_stacked
-  - tooltip
-  - typography:
-    - body
-    - caption
-    - detail
-    - title
-  - typography_patterns:
-    - contact
-    - currency
-    - dashboard_value
-    - home_address_street
-    - label_pill
-    - label_value
-    - message
-    - person
-    - person_contact
-    - source
-    - stat_change
-    - stat_value
-    - title_count
-    - title_detail
-  - user_badge
-  - walkthrough
+  - name: "avatars"
+    components:
+      - name: "avatar"
+        platforms: *all
+      - name: "avatar_action_button"
+        platforms: *web
+      - name: "multiple_users"
+        platforms: *web
+      - name: "multiple_users_stacked"
+        platforms: *web
+      - name: "user"
+        platforms: *web
+  - name: "background"
+    components:
+      - name: "background"
+        platforms: *web
+  - name: "bread_crumbs"
+    components:
+      - name: "bread_crumbs"
+        platforms: *web
+  - name: "buttons"
+    components:
+      - name: "button"
+        platforms: *web
+      - name: "button_toolbar"
+        platforms: *web
+      - name: "circle_icon_button"
+        platforms: *web
+  - name: "card"
+    components:
+      - name: "card"
+        platforms: *all
+  - name: "collapsible"
+    components:
+      - name: "collapsible"
+        platforms: *web
+  - name: "charts_and_graphs"
+    components:
+      - name: "bar_graph"
+        platforms: *web
+      - name: "circle_chart"
+        platforms: *web
+      - name: "distribution_bar"
+        platforms: *web
+      - name: "gauge"
+        platforms: *web
+      - name: "legend"
+        platforms: *web
+      - name: "line_graph"
+        platforms: *web
+      - name: "treemap_chart"
+        platforms: *web
+  - name: "dialog"
+    components:
+      - name: "dialog"
+        platforms: *web
+  - name: "filter"
+    components:
+      - name: "filter"
+        platforms: *web
+  - name: "fixed_confirmation_toast"
+    components:
+      - name: "fixed_confirmation_toast"
+        platforms: *web
+  - name: "forms"
+    components:
+      - name: "checkbox"
+        platforms: *web
+      - name: "date_picker"
+        platforms: *web
+      - name: "file_upload"
+        platforms: *web
+      - name: "form"
+        platforms: *rails_only
+      - name: "form_group"
+        platforms: *web
+      - name: "form_pill"
+        platforms: *web
+      - name: "multi_level_select"
+        platforms: *web
+      - name: "passphrase"
+        platforms: *web
+      - name: "phone_number_input"
+        platforms: *web
+      - name: "radio"
+        platforms: *all
+      - name: "rich_text_editor"
+        platforms: *web
+      - name: "select"
+        platforms: *web
+      - name: "selectable_card"
+        platforms: *web
+      - name: "selectable_card_icon"
+        platforms: *web
+      - name: "selectable_icon"
+        platforms: *web
+      - name: "selectable_list"
+        platforms: *web
+      - name: "text_input"
+        platforms: *web
+      - name: "textarea"
+        platforms: *web
+      - name: "toggle"
+        platforms: *web
+      - name: "typeahead"
+        platforms: *web
+  - name: "highlight"
+    components:
+      - name: "highlight"
+        platforms: *web
+  - name: "icon"
+    components:
+      - name: "icon"
+        platforms: *web
+  - name: "icon_circle"
+    components:
+      - name: "icon_circle"
+        platforms: *web
+  - name: "icon_stat_value"
+    components:
+      - name: "icon_stat_value"
+        platforms: *web
+  - name: "icon_value"
+    components:
+      - name: "icon_value"
+        platforms: *web
+  - name: "image"
+    components:
+      - name: "image"
+        platforms: *web
+  - name: "layouts"
+    components:
+      - name: "flex"
+        platforms: *web
+      - name: "layout"
+        platforms: *web
+  - name: "lightbox"
+    components:
+      - name: "lightbox"
+        platforms: *react_only
+  - name: "list"
+    components:
+      - name: "list"
+        platforms: *web
+  - name: "loading_inline"
+    components:
+      - name: "loading_inline"
+        platforms: *web
+  - name: "map"
+    components:
+      - name: "map"
+        platforms: *react_only
+  - name: "nav"
+    components:
+      - name: "nav"
+        platforms: *web
+  - name: "pagination"
+    components:
+      - name: "pagination"
+        platforms: *rails_only
+  - name: "popover"
+    components:
+      - name: "popover"
+        platforms: *web
+  - name: "progress"
+    components:
+      - name: "progress_pills"
+        platforms: *web
+      - name: "progress_simple"
+        platforms: *web
+      - name: "progress_step"
+        platforms: *web
+  - name: "section_separator"
+    components:
+      - name: "section_separator"
+        platforms: *web
+  - name: "star_rating"
+    components:
+      - name: "star_rating"
+        platforms: *web
+  - name: "table"
+    components:
+      - name: "table"
+        platforms: *web
+  - name: "tags"
+    components:
+      - name: "tags"
+        platforms: *web
+      - name: "badge"
+        platforms: *web
+      - name: "hashtag"
+        platforms: *web
+      - name: "pill"
+        platforms: *all
+  - name: "timeline"
+    components:
+      - name: "timeline"
+        platforms: *web
+  - name: "time_and_date"
+    components:
+      - name: "date"
+        platforms: *web
+      - name: "date_range_inline"
+        platforms: *web
+      - name: "date_range_stacked"
+        platforms: *web
+      - name: "date_stacked"
+        platforms: *web
+      - name: "date_time"
+        platforms: *web
+      - name: "date_time_stacked"
+        platforms: *web
+      - name: "date_year_stacked"
+        platforms: *web
+      - name: "time"
+        platforms: *web
+      - name: "time_range_inline"
+        platforms: *web
+      - name: "time_stacked"
+        platforms: *web
+      - name: "timestamp"
+        platforms: *all
+      - name: "weekday_stacked"
+        platforms: *web
+  - name: "tooltip"
+    components:
+      - name: "tooltip"
+        platforms: *web
+  - name: "typography"
+    components:
+      - name: "body"
+        platforms: *web
+      - name: "caption"
+        platforms: *web
+      - name: "detail"
+        platforms: *web
+      - name: "title"
+        platforms: *web
+  - name: "typography_patterns"
+    components:
+      - name: "contact"
+        platforms: *web
+      - name: "currency"
+        platforms: *web
+      - name: "dashboard_value"
+        platforms: *web
+      - name: "home_address_street"
+        platforms: *web
+      - name: "label_pill"
+        platforms: *web
+      - name: "label_value"
+        platforms: *web
+      - name: "message"
+        platforms: *web
+      - name: "person"
+        platforms: *web
+      - name: "person_contact"
+        platforms: *web
+      - name: "source"
+        platforms: *web
+      - name: "stat_change"
+        platforms: *web
+      - name: "stat_value"
+        platforms: *web
+      - name: "title_count"
+        platforms: *web
+      - name: "title_detail"
+        platforms: *web
+  - name: "user_badge"
+    components:
+      - name: "user_badge"
+        platforms: *web
+  - name: "walkthrough"
+    components:
+      - name: "walkthrough"
+        platforms: *web