playbook_ui_docs 16.3.0 → 16.4.0.pre.alpha.displaybreakpoints15091

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props.jsx

@@ -0,0 +1,152 @@
+import React, { useState } from "react"
+import { Button, Date as DateKit, DatePicker, Dropdown, Select, Table, TextInput, Typeahead, Flex } from "playbook-ui"
+
+ // Mock Data for Table  
+  const users = [
+    { id: 1, name: "Jennifer", title: "Associate Scrum Master", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-01" },
+    { id: 2, name: "Nick", title: "UX Engineer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-02" },
+    { id: 3, name: "Nida", title: "Senior UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-03" },
+    { id: 4, name: "Justin", title: "Director of User Experience Engineering", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-04" },
+    { id: 5, name: "Edward", title: "UX Designer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-05" },
+    { id: 6, name: "Elisa", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-06" },
+    { id: 7, name: "Gary", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-07" },
+    { id: 8, name: "Barkley", title: "Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-08" },
+    { id: 9, name: "Aaron", title: "Associate Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-09" },
+  ]
+
+const TableWithFilterWithCardTitleProps = () => {
+  const [territory, setTerritory] = useState("")
+
+  // --------Filter content example ------
+  const filterContent = ({ closePopover }) => (
+          <>
+            <TextInput
+                label="Territory ID"
+                onChange={event => setTerritory(event.target.value)}
+                value={territory}
+            />
+
+            <Typeahead
+                label="Title"
+                options={[
+                  { key: "senior-ux-engineer", label: "Senior UX Engineer", value: "senior-ux-engineer" },
+                  { key: "ux-engineer", label: "UX Engineer", value: "ux-engineer" },
+                  { key: "ux-designer", label: "UX Designer", value: "ux-designer" }
+                ]}
+            />
+
+            <Select
+                blankSelection="All Departments"
+                label="Department"
+                options={[
+                  { value: "Business Technology", label: "Business Technology", key: "business-technology" },
+                  { value: "Customer Development", label: "Customer Development", key: "customer-development" },
+                  { value: "Talent Acquisition", label: "Talent Acquisition", key: "talent-acquisition" }
+                ]}
+            />
+
+            <Dropdown
+                label="Branch"
+                options={[
+                  { key: "Philadelphia", label: "Philadelphia", value: "philadelphia" },
+                  { key: "New York", label: "New York", value: "new-york" },
+                  { key: "Austin", label: "Austin", value: "austin" }
+                ]}
+            />
+
+            <DatePicker
+                label="Start Date"
+                paddingY="sm"
+                pickerId="startedOn"
+            />
+            <Flex spacing="between">
+            <Button
+                onClick={() => {
+                  alert("No filtering functionality - just a pattern demo!")
+                  closePopover()
+                }}
+                text="Filter"
+            />
+            <Button
+                text="Defaults"
+                variant="secondary"
+            />
+            </Flex>
+          </>
+        )
+  // -------End Filter content example ------
+  
+  return (
+    <Table 
+        cardProps={{marginX: {
+                        xs: "sm",
+                        sm: "sm",
+                        md: "xl",
+                        lg: "xl",
+                        xl: "xl",
+                        default: "xl",
+                    }}}
+        filterContent={filterContent}
+        filterProps={{
+          results: 50,
+          sortOptions: {
+            territory_id: "Territory ID",
+            first_name: "Name",
+            started_on: "Start Date",
+            department_name: "Department",
+            title_name: "Title",
+            branch_branch_name: "Branch",
+          },
+          sortValue: [{ name: 'started_on', dir: 'asc' }],
+        }}
+        title="Table Title Here"
+        titleProps={{
+          paddingLeft:{
+            xs: "sm",
+            sm: "sm",
+            md: "xl",
+            lg: "xl",
+            xl: "xl",
+            default: "xl",
+          }
+        }}
+        variant="withFilter"
+    >
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>{'Territory ID'}</Table.Header>
+          <Table.Header>{'Name'}</Table.Header>
+          <Table.Header>{'Title'}</Table.Header>
+          <Table.Header>{'Department'}</Table.Header>
+          <Table.Header>{'Branch'}</Table.Header>
+          <Table.Header textAlign="right">{'Start Date'}</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        {users.map((user) => (
+          <Table.Row key={user.id}>
+            <Table.Cell 
+                marginX={{ xs: "sm" }}
+                numberSpacing="tabular"
+            >
+                {user.id}
+            </Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.name}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.title}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.department}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.branch}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>
+              <DateKit 
+                  alignment="right"
+                  showCurrentYear
+                  value={user.startDate}
+              />
+            </Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  )
+}
+
+export default TableWithFilterWithCardTitleProps

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

@@ -0,0 +1,17 @@
+The `withFilter` variant also offers 2 additional optional props:
+
+`cardProps`: An object containing Card-specific props.
+`titleProps`: An object containing Title-specific props.
+
+#### Default Card Props
+
+The Table kit automatically sets these Card defaults (which you can override via `cardProps`):
+
+- `padding="none"`
+
+#### Default Title Props
+
+The Table kit automatically sets these Title defaults (which you can override via `titleProps`):
+
+- `size={3}`
+- `paddingY="md"`

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

@@ -0,0 +1,121 @@
+    <% users = [
+        { id: 1, name: "Jennifer", title: "Associate Scrum Master", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 1) },
+        { id: 2, name: "Nick", title: "UX Engineer II", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 2) },
+        { id: 3, name: "Nida", title: "Senior UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 3) },
+        { id: 4, name: "Justin", title: "Director of User Experience Engineering", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 4) },
+        { id: 5, name: "Edward", title: "UX Designer II", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 5) },
+        { id: 6, name: "Elisa", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 6) },
+        { id: 7, name: "Gary", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 7) },
+        { id: 8, name: "Barkley", title: "Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 8) },
+        { id: 9, name: "Aaron", title: "Associate Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 9) },
+    ] %>
+
+<% filter_content = 
+    pb_rails("text_input", props: {
+      label: "Territory ID",
+      placeholder: "Enter Territory ID"
+    }) +
+    pb_rails("typeahead", props: {
+      label: "Title",
+      options: [
+        { label: "Senior UX Engineer", value: "senior-ux-engineer" },
+        { label: "UX Engineer", value: "ux-engineer" },
+        { label: "UX Designer", value: "ux-designer" }
+      ]
+    }) +
+    pb_rails("select", props: {
+      blank_selection: "All Departments",
+      label: "Department",
+      options: [
+        { value: "Business Technology", text: "Business Technology" },
+        { value: "Customer Development", text: "Customer Development" },
+        { value: "Talent Acquisition", text: "Talent Acquisition" }
+      ]
+    }) +
+    pb_rails("dropdown", props: {
+      label: "Branch",
+      options: [
+        { label: "Philadelphia", value: "philadelphia" },
+        { label: "New York", value: "new-york" },
+        { label: "Austin", value: "austin" }
+      ]
+    }) +
+    pb_rails("date_picker", props: {
+      label: "Start Date",
+      padding_y: "sm",
+      picker_id: "startedOn"
+    }) +
+    pb_rails("flex", props: { spacing: "between" }) do
+      pb_rails("button", props: {
+        text: "Filter",
+      }) +
+      pb_rails("button", props: {
+        text: "Defaults",
+        variant: "secondary"
+      })
+    end
+%>
+
+<%= pb_rails("table", props: {
+  card_props: {
+    margin_x: {
+      xs: "sm",
+      sm: "sm",
+      md: "xl",
+      lg: "xl",
+      xl: "xl",
+      default: "xl",
+    }
+  },
+  variant: "with_filter",
+  title: "Table Title Here",
+  title_props: {
+    padding_left:{
+      xs: "sm",
+      sm: "sm",
+      md: "xl",
+      lg: "xl",
+      xl: "xl",
+      default: "xl",
+    }
+  },
+  filter_content: filter_content,
+  filter_props: {
+    id: "user-table-filters-1",
+    results: 9,
+    sort_menu: [
+        { item: "Start Date", link: "?q[sorts]=started_on+asc", active: true, direction: "asc" },
+        { item: "First Name", link: "?q[sorts]=name+asc", active: false },
+        { item: "Title", link: "?q[sorts]=title+asc", active: false },
+        { item: "Department", link: "?q[sorts]=department+asc", active: false },
+        { item: "Branch", link: "?q[sorts]=branch+asc", active: false },
+        { item: "Territory ID", link: "?q[sorts]=territory_id+asc", active: false },
+    ],
+  }
+}) do %>
+  <%= pb_rails("table/table_head") do %>
+    <%= pb_rails("table/table_row") do %>
+      <%= pb_rails("table/table_header", props: { text: "Territory ID" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Name" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Title" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Department" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Branch" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Start Date", text_align: "right" }) %>
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("table/table_body") do %>
+    <% users.each do |user| %>
+      <%= pb_rails("table/table_row") do %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" }, number_spacing: "tabular" }) { user[:id].to_s } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:name] } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:title] } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:department] } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:branch] } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) do %>
+           <%= pb_rails("date", props: {alignment: "right", date: user[:start_date].to_s, show_current_year: true } ) %>        
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,17 @@
+The `with_filter` variant also offers 2 additional optional props:
+
+`card_props`: An object containing Card-specific props.
+`title_props`: An object containing Title-specific props.
+
+#### Default Card Props
+
+The Table kit automatically sets these Card defaults (which you can override via `card_props`):
+
+- `padding:"none"`
+
+#### Default Title Props
+
+The Table kit automatically sets these Title defaults (which you can override via `title_props`):
+
+- `size:3`
+- `paddingY:"md"`

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

@@ -42,6 +42,7 @@ examples:
     - table_with_header_style_floating: Header Style Floating
     - table_with_filter_variant_rails: Variant with Filter
     - table_with_filter_variant_with_pagination_rails: Variant with Filter and Pagination
+    - table_with_filter_with_card_title_props_rails: Variant with Filter (with Card and Title Props)
 
   react:
     - table_sm: Small
@@ -85,3 +86,4 @@ examples:
     - table_with_header_style_floating: Header Style Floating
     - table_with_filter_variant: Variant with Filter
     - table_with_filter_variant_with_pagination: Variant with Filter and Pagination
+    - table_with_filter_with_card_title_props: Variant with Filter (with Card and Title Props)

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

@@ -40,3 +40,4 @@ export { default as TableWithHeaderStyleBorderless } from './_table_with_header_
 export { default as TableWithHeaderStyleFloating } from './_table_with_header_style_floating.jsx'
 export { default as TableWithFilterVariant } from './_table_with_filter_variant.jsx'
 export { default as TableWithFilterVariantWithPagination } from './_table_with_filter_variant_with_pagination.jsx'
+export { default as TableWithFilterWithCardTitleProps } from './_table_with_filter_with_card_title_props.jsx'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.3.0
+  version: 16.4.0.pre.alpha.displaybreakpoints15091
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-02-25 00:00:00.000000000 Z
+date: 2026-03-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -43,6 +43,8 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_cascade_collapse.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_cascade_collapse.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.html.erb
@@ -153,6 +155,8 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_parent_only.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_parent_only.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column_for_multi_column.jsx
@@ -859,6 +863,10 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options_rails.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options_rails.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_event_type.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_event_type.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb
@@ -1049,6 +1057,10 @@ files:
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.md
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md
+- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin.html.erb
+- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin.jsx
+- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin_rails.md
+- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin_react.md
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.html.erb
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.md
@@ -1857,6 +1869,10 @@ files:
 - app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx
 - app/pb_kits/playbook/pb_popover/docs/_popover_list.md
+- app/pb_kits/playbook/pb_popover/docs/_popover_placement.jsx
+- app/pb_kits/playbook/pb_popover/docs/_popover_placement_react.md
+- app/pb_kits/playbook/pb_popover/docs/_popover_position.html.erb
+- app/pb_kits/playbook/pb_popover/docs/_popover_position_rails.md
 - app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx
 - app/pb_kits/playbook/pb_popover/docs/_popover_z_index.html.erb
@@ -1968,31 +1984,10 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.md
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.html.erb
-- 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_label.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.md
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.md
 - 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_required_indicator.html.erb
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.html.erb
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.html.erb
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.html.erb
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml
@@ -2309,6 +2304,10 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.md
+- app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props.jsx
+- app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props.md
+- app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props_rails.html.erb
+- app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props_rails.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb

@@ -1,5 +0,0 @@
-<%= pb_rails("rich_text_editor", props: {
-  aria: { label: "rich-textarea" },
-  data: { key: "value", key2: "value2" },
-  name: "textarea-label",
-}) %>

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

@@ -1,15 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-
-const RichTextEditorAttributes = (props) => (
-  <div>
-    <RichTextEditor
-        aria={{ label: 'rich textarea' }}
-        data={{ key: 'value', key2: 'value2' }}
-        name="name-attribute"
-        {...props}
-    />
-  </div>
-)
-
-export default RichTextEditorAttributes

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb

@@ -1 +0,0 @@
-<%= pb_rails("rich_text_editor", props: {input_options: { id: 'hidden_input_id', name: "hidden_input_name" }, value: "Add your text here. You can format your text, add links, quotes, and bullets."}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.html.erb

@@ -1,3 +0,0 @@
-<%= pb_rails("rich_text_editor", props: {focus: true}) %>
-<br>
-<%= pb_rails("rich_text_editor", props: {focus: true}) %>

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

@@ -1,17 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-
-const RichTextEditorFocus = (props) => (
-  <>
-    <RichTextEditor
-        focus
-        {...props}
-    />
-    <br />
-    <RichTextEditor
-        focus
-        {...props}
-    />
-  </>
-)
-export default RichTextEditorFocus

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb

@@ -1,6 +0,0 @@
-<%= pb_rails("rich_text_editor", props: {
-  id: "inline",
-  inline: true,
-  toolbar_bottom: true,
-  value: "Try hovering over this text. Then try modifying it or adding more of your own text."
-}) %>

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

@@ -1,16 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-
-const RichTextEditorInline = (props) => (
-  <div>
-    <RichTextEditor
-        id="inline"
-        inline
-        toolbarBottom
-        value="Try hovering over this text. Then try modifying it or adding more of your own text."
-        {...props}
-    />
-  </div>
-)
-
-export default RichTextEditorInline

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

@@ -1,28 +0,0 @@
-import React, { useState } from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-
-const RichTextEditorLabel = (props) => {
-  const [value, setValue] = useState(''),
-  handleOnChange = (html) => setValue(html)
-
-  return (
-    <div>
-      <RichTextEditor
-          id="example"
-          label="Example Label"
-          onChange={handleOnChange}
-          value={value}
-          {...props}
-      />
-      <br/>
-      <RichTextEditor
-          label="Example Label No ID"
-          onChange={handleOnChange}
-          value={value}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default RichTextEditorLabel

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

@@ -1 +0,0 @@
-The optional `label` prop adds a visible label to the editor. Passing in the `id` prop associates the `label` with the editor for accessibility, enabling screen reader support and label-based focus behavior.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb

@@ -1,35 +0,0 @@
-
-<%= pb_rails("rich_text_editor", props: { id: "content-preview-editor" }) %>
-<div id="card-obfuscation" style="display:none">
-  <%= pb_rails("card", props: { margin_top: "md", max_width: "md", padding: "sm" }) do %>
-   <div id="content-preview" class="trix-content">
-   </div>
-  <% end %>
-</div>
-<%= pb_rails("button", props: { id: "preview-button", variant: "secondary", margin_top: "md" }) do %>
-  <span>Preview Output</span>
-<% end %>
-
-<script>
-  document.addEventListener('DOMContentLoaded', () => {
-    function handleButtonClick() {
-      const editorContainer = [...document.querySelectorAll('[data-pb-react-props]')]
-        .find(element => element.getAttribute('data-pb-react-props')?.includes('"id":"content-preview-editor"'))
-
-      const editorElement = editorContainer?.querySelector('trix-editor')
-      const inputId = editorElement?.getAttribute('input')
-      const inputElement = inputId && document.getElementById(inputId)
-      
-      const editorContent = inputElement?.value || '' 
-      const previewArea = document.getElementById('content-preview')
-      const cardDiv = document.getElementById('card-obfuscation')
-
-      if (previewArea && cardDiv) {
-        previewArea.innerHTML = editorContent 
-        cardDiv.style.display = 'block'
-      }
-    }
-
-    document.getElementById('preview-button')?.addEventListener('click', handleButtonClick)
-  })
-</script>

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

@@ -1,45 +0,0 @@
-import React, { useState } from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import Button from '../../pb_button/_button'
-import Card from '../../pb_card/_card'
-
-const RichTextEditorPreview = (props) => {
-  const [showPreview, setShowPreview] = useState(false)
-  const [previewText, setPreviewText] = useState(<div />)
-
-  const handleChange = (event) => setPreviewText(event)
-  const handleClick = () => {
-    setShowPreview(true)
-  }
-
-  return (
-    <div>
-      <RichTextEditor
-          id="content-preview-editor"
-          onChange={handleChange}
-          {...props}
-      />
-      {showPreview && (
-        <Card marginTop="md">
-          <div
-              className="trix-content"
-              // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML={{ __html: previewText }}
-              id="preview-content"
-          />
-        </Card>
-      )}
-      {!showPreview && (
-        <div />
-      )}
-      <Button
-          id="preview-button"
-          marginTop="md"
-          onClick={handleClick}
-          text="Preview Output"
-          variant="secondary"
-      />
-    </div>
-  )
-}
-export default RichTextEditorPreview

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb

@@ -1,10 +0,0 @@
-<%= pb_rails("rich_text_editor", props: {
-  id: "required-indicator",
-  input_options: {
-    id: 'hidden_input_id',
-    name: "hidden_input_name"
-  },
-  label: "Label",
-  required_indicator: true,
-  value: "Add your text here. You can format your text, add links, quotes, and bullets."
-}) %>