playbook_ui 14.10.0.pre.alpha.play1465attempt25272 → 14.10.0.pre.alpha.play1662cssbargraph5193

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.10.0"
-  VERSION = "14.10.0.pre.alpha.play1465attempt25272"
+  VERSION = "14.10.0.pre.alpha.play1662cssbargraph5193"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.10.0.pre.alpha.play1465attempt25272
+  version: 14.10.0.pre.alpha.play1662cssbargraph5193
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2025-01-07 00:00:00.000000000 Z
+date: 2025-01-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -270,10 +270,8 @@ files:
 - 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
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx
@@ -799,6 +797,7 @@ files:
 - app/pb_kits/playbook/pb_currency/docs/_description.md
 - app/pb_kits/playbook/pb_currency/docs/example.yml
 - app/pb_kits/playbook/pb_currency/docs/index.js
+- app/pb_kits/playbook/pb_dashboard/BarGraphStyles.scss
 - app/pb_kits/playbook/pb_dashboard/commonSettings.js
 - app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.ts
 - app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts
@@ -2344,9 +2343,6 @@ files:
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.md
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children_swift.md
-- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.html.erb
-- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx
-- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.md
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.html.erb
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.jsx
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed_swift.md
@@ -2477,26 +2473,17 @@ files:
 - app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading.scss
 - app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading.tsx
 - app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading_mixins.scss
-- app/pb_kits/playbook/pb_skeleton_loading/docs/_description.md
-- app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.html.erb
 - app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.jsx
-- app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_rails.md
-- app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_react.md
-- app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.html.erb
+- app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.md
 - app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.jsx
 - app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.md
 - app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb
 - app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.jsx
-- app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.html.erb
 - app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx
-- app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.html.erb
 - app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
-- app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width_rails.md
-- app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width_react.md
-- app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.html.erb
+- app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.md
 - app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.jsx
 - app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.md
-- app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.html.erb
 - app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx
 - app/pb_kits/playbook/pb_skeleton_loading/docs/example.yml
 - app/pb_kits/playbook/pb_skeleton_loading/docs/index.js
@@ -2643,14 +2630,10 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_sticky.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_sticky.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_sticky.md
-- app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md
 - app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md
 - app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md
-- app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md
 - app/pb_kits/playbook/pb_table/docs/_table_striped.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_striped.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_striped.md
@@ -3234,11 +3217,11 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_typeahead-BhT5aXCY.js
-- dist/chunks/_weekday_stacked-DJOTNDSY.js
+- dist/chunks/_typeahead-BXXEtXbz.js
+- dist/chunks/_weekday_stacked-D0yBvHBb.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-B7sgJtGS.js
-- dist/chunks/pb_form_validation-C5Cc0-1v.js
+- dist/chunks/lib-sMFo2JZy.js
+- dist/chunks/pb_form_validation-CgvjWbOK.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.html.erb

@@ -1,43 +0,0 @@
-<% column_definitions = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    label: "Enrollment Data",
-    columns: [
-      {
-        accessor: "newEnrollments",
-        label: "New Enrollments",
-      },
-      {
-        accessor: "scheduledMeetings",
-        label: "Scheduled Meetings",
-      },
-    ],
-  },
-  {
-    label: "Performance Data",
-    columns: [
-      {
-        accessor: "attendanceRate",
-        label: "Attendance Rate",
-      },
-      {
-        accessor: "completedClasses",
-        label: "Completed Classes",
-      },
-      {
-        accessor: "classCompletionRate",
-        label: "Class Completion Rate",
-      },
-      {
-        accessor: "graduatedStudents",
-        label: "Graduated Students",
-      },
-    ],
-  },
-] %>
-
-<%= pb_rails("advanced_table", props: { id: "beta_table_with_headers", table_data: @table_data, column_definitions: column_definitions }) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.html.erb

@@ -1,58 +0,0 @@
-<% column_definitions = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    label: "Enrollment Data",
-    columns: [
-      {
-        label: "Enrollment Stats",
-        columns: [
-          {
-            accessor: "newEnrollments",
-            label: "New Enrollments",
-          },
-          {
-            accessor: "scheduledMeetings",
-            label: "Scheduled Meetings",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: "Performance Data",
-    columns: [
-      {
-        label: "Completion Metrics",
-        columns: [
-          {
-            accessor: "completedClasses",
-            label: "Completed Classes",
-          },
-          {
-            accessor: "classCompletionRate",
-            label: "Class Completion Rate",
-          },
-        ],
-      },
-      {
-        label: "Attendance",
-        columns: [
-          {
-            accessor: "attendanceRate",
-            label: "Attendance Rate",
-          },
-          {
-            accessor: "scheduledMeetings",
-            label: "Scheduled Meetings",
-          },
-        ],
-      },
-    ],
-  },
-] %>
-
-<%= pb_rails("advanced_table", props: { id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions }) %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.html.erb

@@ -1,10 +0,0 @@
-<%= pb_rails("section_separator", props: { text: "Default Separator" }) %>
-<%= pb_rails("section_separator", props: { color: "primary", text: "Primary Separator" }) %>
-<%= pb_rails("section_separator", props: { color: "primary", line_style: "dashed", text: "Primary Dashed Separator" }) %>
-<%= pb_rails("section_separator", props: { color: "primary" }) do %>
-  <%= pb_rails("flex", props: { padding: "xs" }) do %>
-    <%= pb_rails("icon", props: { color: "primary", icon: "arrow-down" }) %>
-    <%= pb_rails("detail", props: { text: "Children", size: "sm", color: "link" }) %>
-  <% end %>
-<% end %>
-

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx

@@ -1,42 +0,0 @@
-import React from "react"
-import { SectionSeparator, Flex, Detail, Icon } from "playbook-ui"
-
-const children = (
-  <Flex padding="xs">
-    <Icon color="primary"
-        icon="arrow-down"
-    />
-    <Detail
-        color="link"
-        size="sm"
-        text="Children"
-    />
-  </Flex>
-)
-
-const SectionSeparatorColor = (props) => {
-  return (
-    <div>
-      <SectionSeparator text="Default Separator"
-          {...props}
-      />
-      <SectionSeparator color="primary"
-          text="Primary Separator"
-          {...props}
-      />
-      <SectionSeparator
-          color="primary"
-          lineStyle="dashed"
-          text="Primary Dashed Separator"
-          {...props}
-      />
-       <SectionSeparator color="primary"
-           {...props}
-       >
-        {children}
-      </SectionSeparator>
-    </div>
-  )
-}
-
-export default SectionSeparatorColor

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.md

@@ -1,3 +0,0 @@
-Pass "primary" to the `color` prop to change any section separator color.
-
-**NOTE:** Passing `children` overrides any content provided via the `text` prop. The `color` prop does not affect the `text` prop's color, and the color of `children` is determined by the children's individual props. For greater control over text color customization, consider using a separator with `children`.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_description.md

@@ -1,3 +0,0 @@
-The Skeleton Loading kit can be used an intermediate loading state to give users a visual indication that content is loading. 
-
-**Please Note**: this kit is not meant to be integrated interally within other Playbook kits as a loading prop; rather, it can be used to create a composite of the section/kit/page with loading intermediataries, as demonstrated in the the "example component" doc examples.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.html.erb

@@ -1,9 +0,0 @@
-<%= pb_rails("flex", props: { justify: "evenly" }) do %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "50px", width: "100px"}) %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "xl", height: "50px", width: "100px"}) %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "lg", height: "50px", width: "100px"}) %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "md", height: "50px", width: "100px"}) %>
-    <%= pb_rails("skeleton_loading", props: { height: "50px", width: "100px"}) %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "xs", height: "50px", width: "100px"}) %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "none", height: "50px", width: "100px"}) %>
-<% end %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_rails.md

@@ -1 +0,0 @@
-The `border_radius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/visual_guidelines/border_radius) tokens, with `sm` as default.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.html.erb

@@ -1,7 +0,0 @@
-<%= pb_rails("card", props: { border_none: true }) do %>
-    <%= pb_rails("skeleton_loading") %>
-<% end %>
-
-<%= pb_rails("card", props: { background: "light", border_none: true }) do %>
-    <%= pb_rails("skeleton_loading", props: { color: "white" }) %>
-<% end %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.html.erb

@@ -1,119 +0,0 @@
-<%= pb_rails("button", props: { id: "toggle-filter-button", margin_bottom: "md", text: "Show Filter", variant: "secondary" }) %>
-
-<div id="skeleton-loading-filter-content">
-  <%= pb_rails("card", props: { margin_bottom: "lg" }) do %>
-    <%= pb_rails("flex", props: { align_items: "center", justify: "between", orientation: "row" }) do %>
-      <%= pb_rails("flex", props: { align_items: "center", justify: "start", orientation: "row" }) do %>
-        <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "40px", margin_right: "sm", width: "40px" }) %>
-        <%= pb_rails("skeleton_loading", props: { height: "16px", margin_right: "md", width: "80px" }) %>
-      <% end %>
-      <%= pb_rails("flex", props: { align_items: "center", justify: "end", orientation: "row" }) do %>
-        <%= pb_rails("skeleton_loading", props: { height: "18px", width: "120px" }) %>
-      <% end %>
-    <% end %>
-  <% end %>
-
-  <%= pb_rails("skeleton_loading", props: { height: "127px", width: "100%" }) %>
-</div>
-
-<div id="filter-content" style="display: none;">
-  <%= pb_rails("filter", props: {
-    margin_bottom: "xl",
-    min_width: "360px",
-    id: "2",
-    filters: [
-      { name: "name", value: "John Wick" }
-    ],
-    sort_menu: [
-      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
-      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
-      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
-    ],
-    results: 546,
-    template: "single"
-  }) do %>
-    <% example_collection = [
-      OpenStruct.new(name: "USA", value: 1),
-      OpenStruct.new(name: "Canada", value: 2),
-      OpenStruct.new(name: "Brazil", value: 3),
-      OpenStruct.new(name: "Philippines", value: 4),
-      OpenStruct.new(name: "A galaxy far far away...", value: 5)
-    ] %>
-
-    <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-      <%= form.text_field :example_text_field, props: { label: true } %>
-      <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-
-      <%= form.actions do |action| %>
-        <%= action.submit props: {
-          text: "Apply",
-          data: {
-            disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-        },}%>
-        <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
-      <% end %>
-    <% end %>
-  <% end %>
-
-  <%= pb_rails("filter", props: {
-    min_width: "360px",
-    id: "1",
-    filters: [
-      { name: "name", value: "John Wick" },
-      { name: "city", value: "San Francisco"}
-    ],
-    sort_menu: [
-      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
-      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
-      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
-    ],
-    template: "default",
-    results: 1,
-  }) do %>
-    <% example_collection = [
-      OpenStruct.new(name: "USA", value: 1),
-      OpenStruct.new(name: "Canada", value: 2),
-      OpenStruct.new(name: "Brazil", value: 3),
-      OpenStruct.new(name: "Philippines", value: 4),
-      OpenStruct.new(name: "A galaxy far far away...", value: 5)
-    ] %>
-    <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-      <%= form.text_field :example_text_field, props: { label: true } %>
-      <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-
-      <%= form.actions do |action| %>
-        <%= action.submit props: {
-          text: "Apply",
-          data: {
-            disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-        },}%>
-        <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
-      <% end %>
-    <% end %>
-  <% end %>
-</div>
-
-<script>
-  document.addEventListener("DOMContentLoaded", function() {
-    const toggleButton = document.getElementById('toggle-filter-button')
-    const skeletonFilterContentDiv = document.getElementById('skeleton-loading-filter-content')
-    const filterContentDiv = document.getElementById('filter-content')
-    const secondFilterContentDiv = document.getElementById('second-filter-content')
-
-    let isLoading = true
-
-    toggleButton.addEventListener('click', function() {
-      isLoading = !isLoading
-
-      if (isLoading) {
-        skeletonFilterContentDiv.style.display = 'block'
-        filterContentDiv.style.display = 'none'
-        toggleButton.textContent = 'Show Filter'
-      } else {
-        skeletonFilterContentDiv.style.display = 'none'
-        filterContentDiv.style.display = 'block'
-        toggleButton.textContent = 'Show Skeleton Loading'
-      }
-    })
-  })
-</script>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.html.erb

@@ -1,15 +0,0 @@
-<%= pb_rails("skeleton_loading", props: { height: "100px", width: "50%" }) %>
-
-<%= pb_rails("skeleton_loading", props: { gap: "md", height: "20px", margin_y: "md", stack: 3, width: "50px" }) %>
-
-<%= pb_rails("card", props: { height: "200px", margin_bottom: "md", padding: "none", width: "100%" }) do %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "md", gap: "xl", height: "50%", width: "300px" }) %>
-<% end %>
-
-<%= pb_rails("card", props: { height: "200px", margin_bottom: "md", padding: "none", width: "100%" }) do %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "md", gap: "xl", height: "30%", stack: 2, width: "70%" }) %>
-<% end %>
-
-<%= pb_rails("skeleton_loading", props: { height: "150px", margin_y: "md", width: "150px" }) %>
-
-<%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "150px", width: "150px" }) %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width_rails.md

@@ -1,3 +0,0 @@
-The `height` and `width` props accept pixel and percentage values. If using a percentage for `height`, the parent container must have a set height.
-
-Set the `height` and `width` props to the same value to make a square. A `rounded` border_radius will make a square a circle. If using percentages to make a square, your parent container must also be a square.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.html.erb

@@ -1,3 +0,0 @@
-<%= pb_rails("skeleton_loading", props: { stack: 5 }) %>
-
-<%= pb_rails("skeleton_loading", props: { gap: "md", padding_top: "xl", stack: 3 }) %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.html.erb

@@ -1,63 +0,0 @@
-<%= pb_rails("button", props: { id: "toggle-user-button", margin_bottom: "md", text: "Show User", variant: "secondary" }) %>
-
-<div id="skeleton-loading-user-content">
-    <%= pb_rails("flex", props: { align_items: "center" }) do %>
-        <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "38px", padding_right: "sm", width: "38px"}) %>
-        <%= pb_rails("skeleton_loading", props: { gap: "xxs", height: "18px", stack: 2, width: "161px"}) %>
-    <% end %>
-    <%= pb_rails("flex", props: { align_items: "start", padding_top: "md" }) do %>
-        <%= pb_rails("flex", props: { align_items: "center", flex_direction: "column" }) do %>
-            <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "100px", padding_bottom: "xs", width: "100px"}) %>
-            <%= pb_rails("skeleton_loading", props: { height: "32px", padding_bottom: "xxs", width: "144px"}) %>
-            <%= pb_rails("skeleton_loading", props: { height: "21px", width: "164px"}) %>
-        <% end %>
-    <% end %>
-</div>
-
-<div id="user-content" style="display: none;">
-    <div>
-        <%= pb_rails("user", props: {
-            name: "Anna Black",
-            title: "Remodeling Consultant",
-            orientation: "horizontal",
-            align: "left",
-            avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
-        }) %>
-    </div>
-    <div>
-        <%= pb_rails("flex", props: { align_items: "start", padding_top: "md" }) do %>
-            <%= pb_rails("user", props: {
-                name: "Anna Black",
-                title: "Remodeling Consultant",
-                orientation: "vertical",
-                align: "center",
-                size: "lg",
-                avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
-            }) %>
-        <% end %>
-    </div>
-</div>
-
-<script>
-  document.addEventListener("DOMContentLoaded", function() {
-    const toggleButton = document.getElementById('toggle-user-button')
-    const skeletonUserContentDiv = document.getElementById('skeleton-loading-user-content')
-    const userContentDiv = document.getElementById('user-content')
-
-    let isLoading = true
-
-    toggleButton.addEventListener('click', function() {
-      isLoading = !isLoading
-
-      if (isLoading) {
-        skeletonUserContentDiv.style.display = 'block'
-        userContentDiv.style.display = 'none'
-        toggleButton.textContent = 'Show User'
-      } else {
-        skeletonUserContentDiv.style.display = 'none'
-        userContentDiv.style.display = 'block'
-        toggleButton.textContent = 'Show Skeleton Loading'
-      }
-    })
-  })
-</script>

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

@@ -1,88 +0,0 @@
-import React from 'react'
-import Table from '../_table'
-
-const TableStickyColumns = () => {
-    return (
-        <Table
-            responsive="scroll"
-            size="md"
-            stickyLeftColumn={["a"]}
-            stickyRightColumn={["b"]}
-        >
-            <thead>
-                <tr>
-                    <th id="a">{'Column 1'}</th>
-                    <th>{'Column 2'}</th>
-                    <th>{'Column 3'}</th>
-                    <th>{'Column 4'}</th>
-                    <th>{'Column 5'}</th>
-                    <th>{'Column 6'}</th>
-                    <th>{'Column 7'}</th>
-                    <th>{'Column 8'}</th>
-                    <th>{'Column 9'}</th>
-                    <th>{'Column 10'}</th>
-                    <th>{'Column 11'}</th>
-                    <th>{'Column 12'}</th>
-                    <th>{'Column 13'}</th>
-                    <th>{'Column 14'}</th>
-                    <th id="b">{'Column 15'}</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td id="a">{'Value 1'}</td>
-                    <td>{'Value 2'}</td>
-                    <td>{'Value 3'}</td>
-                    <td>{'Value 4'}</td>
-                    <td>{'Value 5'}</td>
-                    <td>{'Value 6'}</td>
-                    <td>{'Value 7'}</td>
-                    <td>{'Value 8'}</td>
-                    <td>{'Value 9'}</td>
-                    <td>{'Value 10'}</td>
-                    <td>{'Value 11'}</td>
-                    <td>{'Value 12'}</td>
-                    <td>{'Value 13'}</td>
-                    <td>{'Value 14'}</td>
-                    <td id="b">{'Value 15'}</td>
-                </tr>
-                <tr>
-                    <td id="a">{'Value 1'}</td>
-                    <td>{'Value 2'}</td>
-                    <td>{'Value 3'}</td>
-                    <td>{'Value 4'}</td>
-                    <td>{'Value 5'}</td>
-                    <td>{'Value 6'}</td>
-                    <td>{'Value 7'}</td>
-                    <td>{'Value 8'}</td>
-                    <td>{'Value 9'}</td>
-                    <td>{'Value 10'}</td>
-                    <td>{'Value 11'}</td>
-                    <td>{'Value 12'}</td>
-                    <td>{'Value 13'}</td>
-                    <td>{'Value 14'}</td>
-                    <td id="b">{'Value 15'}</td>
-                </tr>
-                <tr>
-                    <td id="a">{'Value 1'}</td>
-                    <td>{'Value 2'}</td>
-                    <td>{'Value 3'}</td>
-                    <td>{'Value 4'}</td>
-                    <td>{'Value 5'}</td>
-                    <td>{'Value 6'}</td>
-                    <td>{'Value 7'}</td>
-                    <td>{'Value 8'}</td>
-                    <td>{'Value 9'}</td>
-                    <td>{'Value 10'}</td>
-                    <td>{'Value 11'}</td>
-                    <td>{'Value 12'}</td>
-                    <td>{'Value 13'}</td>
-                    <td>{'Value 14'}</td>
-                    <td id="b">{'Value 15'}</td>
-                </tr>
-            </tbody>
-        </Table>
-    )
-}
-
-export default TableStickyColumns

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

@@ -1,3 +0,0 @@
-The `stickyLeftColumn` and `stickyRightColumn` props can be used together on the same table as needed.
-
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.