playbook_ui_docs 13.34.1 → 14.0.0.pre.alpha.PLAY14113475

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 13.34.1
+  version: 14.0.0.pre.alpha.PLAY14113475
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-07-31 00:00:00.000000000 Z
+date: 2024-08-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -49,6 +49,8 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx
 - 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
@@ -1212,6 +1214,10 @@ files:
 - app/pb_kits/playbook/pb_online_status/docs/_description.md
 - app/pb_kits/playbook/pb_online_status/docs/_online_status_default.html.erb
 - app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx
+- app/pb_kits/playbook/pb_online_status/docs/_online_status_no_border.html.erb
+- app/pb_kits/playbook/pb_online_status/docs/_online_status_no_border.jsx
+- app/pb_kits/playbook/pb_online_status/docs/_online_status_size.html.erb
+- app/pb_kits/playbook/pb_online_status/docs/_online_status_size.jsx
 - app/pb_kits/playbook/pb_online_status/docs/example.yml
 - app/pb_kits/playbook/pb_online_status/docs/index.js
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_default.html.erb
@@ -1220,6 +1226,9 @@ files:
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.html.erb
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.md
+- app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.html.erb
+- app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.jsx
+- app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.md
 - app/pb_kits/playbook/pb_overlay/docs/example.yml
 - app/pb_kits/playbook/pb_overlay/docs/index.js
 - app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb
@@ -1923,19 +1932,12 @@ files:
 - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_variant.jsx
 - app/pb_kits/playbook/pb_weekday_stacked/docs/example.yml
 - app/pb_kits/playbook/pb_weekday_stacked/docs/index.js
-- dist/app/components/playbook/pb_docs/advanced_table_mock_data.json
-- dist/app/components/playbook/pb_docs/kit_api.html.erb
-- dist/app/components/playbook/pb_docs/kit_api.rb
-- dist/app/components/playbook/pb_docs/kit_example.html.erb
-- dist/app/components/playbook/pb_docs/kit_example.rb
-- dist/menu.yml
-- dist/pb_doc_helper.rb
 - dist/playbook-doc.js
 homepage: https://playbook.powerapp.cloud/
 licenses:
 - ISC
 metadata: {}
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -1951,7 +1953,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubygems_version: 3.5.3
-signing_key:
+signing_key: 
 specification_version: 4
 summary: Playbook Design System Docs
 test_files: []

data/dist/app/components/playbook/pb_docs/advanced_table_mock_data.json

@@ -1,278 +0,0 @@
-[
-  {
-    "year": "2021",
-    "quarter": null,
-    "month": null,
-    "day": null,
-    "newEnrollments": "20",
-    "scheduledMeetings": "10",
-    "attendanceRate": "51%",
-    "completedClasses": "3",
-    "classCompletionRate": "33%",
-    "graduatedStudents": "19",
-    "children": [
-      {
-        "year": "2021",
-        "quarter": "Q1",
-        "month": null,
-        "day": null,
-        "newEnrollments": "2",
-        "scheduledMeetings": "35",
-        "attendanceRate": "32%",
-        "completedClasses": "15",
-        "classCompletionRate": "52%",
-        "graduatedStudents": "36",
-        "children": [
-          {
-            "year": "2021",
-            "quarter": "Q1",
-            "month": "January",
-            "day": null,
-            "newEnrollments": "16",
-            "scheduledMeetings": "20",
-            "attendanceRate": "11%",
-            "completedClasses": "13",
-            "classCompletionRate": "47%",
-            "graduatedStudents": "28",
-            "children": [
-              {
-                "year": "2021",
-                "quarter": "Q1",
-                "month": "January",
-                "day": "10",
-                "newEnrollments": "34",
-                "scheduledMeetings": "28",
-                "attendanceRate": "97%",
-                "completedClasses": "20",
-                "classCompletionRate": "15%",
-                "graduatedStudents": "17"
-              },
-              {
-                "year": "2021",
-                "quarter": "Q1",
-                "month": "January",
-                "day": "20",
-                "newEnrollments": "43",
-                "scheduledMeetings": "23",
-                "attendanceRate": "66%",
-                "completedClasses": "26",
-                "classCompletionRate": "47%",
-                "graduatedStudents": "9"
-              }
-            ]
-          },
-          {
-            "year": "2021",
-            "quarter": "Q1",
-            "month": "February",
-            "day": null,
-            "newEnrollments": "20",
-            "scheduledMeetings": "41",
-            "attendanceRate": "95%",
-            "completedClasses": "26",
-            "classCompletionRate": "83%",
-            "graduatedStudents": "43",
-            "children": [
-              {
-                "year": "2021",
-                "quarter": "Q1",
-                "month": "February",
-                "day": "15",
-                "newEnrollments": "19",
-                "scheduledMeetings": "35",
-                "attendanceRate": "69%",
-                "completedClasses": "8",
-                "classCompletionRate": "75%",
-                "graduatedStudents": "23"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "year": "2022",
-    "quarter": null,
-    "month": null,
-    "day": null,
-    "newEnrollments": "25",
-    "scheduledMeetings": "17",
-    "attendanceRate": "75%",
-    "completedClasses": "5",
-    "classCompletionRate": "45%",
-    "graduatedStudents": "32",
-    "children": [
-      {
-        "year": "2022",
-        "quarter": "Q1",
-        "month": null,
-        "day": null,
-        "newEnrollments": "2",
-        "scheduledMeetings": "35",
-        "attendanceRate": "32%",
-        "completedClasses": "15",
-        "classCompletionRate": "52%",
-        "graduatedStudents": "36",
-        "children": [
-          {
-            "year": "2022",
-            "quarter": "Q1",
-            "month": "January",
-            "day": null,
-            "newEnrollments": "16",
-            "scheduledMeetings": "20",
-            "attendanceRate": "11%",
-            "completedClasses": "13",
-            "classCompletionRate": "47%",
-            "graduatedStudents": "28",
-            "children": [
-              {
-                "year": "2022",
-                "quarter": "Q1",
-                "month": "January",
-                "day": "15",
-                "newEnrollments": "34",
-                "scheduledMeetings": "28",
-                "attendanceRate": "97%",
-                "completedClasses": "20",
-                "classCompletionRate": "15%",
-                "graduatedStudents": "17"
-              },
-              {
-                "year": "2022",
-                "quarter": "Q1",
-                "month": "January",
-                "day": "25",
-                "newEnrollments": "43",
-                "scheduledMeetings": "23",
-                "attendanceRate": "66%",
-                "completedClasses": "26",
-                "classCompletionRate": "47%",
-                "graduatedStudents": "9"
-              }
-            ]
-          },
-          {
-            "year": "2022",
-            "quarter": "Q1",
-            "month": "May",
-            "day": null,
-            "newEnrollments": "20",
-            "scheduledMeetings": "41",
-            "attendanceRate": "95%",
-            "completedClasses": "26",
-            "classCompletionRate": "83%",
-            "graduatedStudents": "43",
-            "children": [
-              {
-                "year": "2022",
-                "quarter": "Q1",
-                "month": "May",
-                "day": "2",
-                "newEnrollments": "19",
-                "scheduledMeetings": "35",
-                "attendanceRate": "69%",
-                "completedClasses": "8",
-                "classCompletionRate": "75%",
-                "graduatedStudents": "23"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "year": "2023",
-    "quarter": null,
-    "month": null,
-    "day": null,
-    "newEnrollments": "10",
-    "scheduledMeetings": "15",
-    "attendanceRate": "65%",
-    "completedClasses": "4",
-    "classCompletionRate": "49%",
-    "graduatedStudents": "29",
-    "children": [
-      {
-        "year": "2023",
-        "quarter": "Q1",
-        "month": null,
-        "day": null,
-        "newEnrollments": "2",
-        "scheduledMeetings": "35",
-        "attendanceRate": "32%",
-        "completedClasses": "15",
-        "classCompletionRate": "52%",
-        "graduatedStudents": "36",
-        "children": [
-          {
-            "year": "2023",
-            "quarter": "Q1",
-            "month": "March",
-            "day": null,
-            "newEnrollments": "16",
-            "scheduledMeetings": "20",
-            "attendanceRate": "11%",
-            "completedClasses": "13",
-            "classCompletionRate": "47%",
-            "graduatedStudents": "28",
-            "children": [
-              {
-                "year": "2023",
-                "quarter": "Q1",
-                "month": "March",
-                "day": "10",
-                "newEnrollments": "34",
-                "scheduledMeetings": "28",
-                "attendanceRate": "97%",
-                "completedClasses": "20",
-                "classCompletionRate": "15%",
-                "graduatedStudents": "17"
-              },
-              {
-                "year": "2023",
-                "quarter": "Q1",
-                "month": "March",
-                "day": "11",
-                "newEnrollments": "43",
-                "scheduledMeetings": "23",
-                "attendanceRate": "66%",
-                "completedClasses": "26",
-                "classCompletionRate": "47%",
-                "graduatedStudents": "9"
-              }
-            ]
-          },
-          {
-            "year": "2023",
-            "quarter": "Q1",
-            "month": "April",
-            "day": null,
-            "newEnrollments": "20",
-            "scheduledMeetings": "41",
-            "attendanceRate": "95%",
-            "completedClasses": "26",
-            "classCompletionRate": "83%",
-            "graduatedStudents": "43",
-            "children": [
-              {
-                "year": "2023",
-                "quarter": "Q1",
-                "month": "April",
-                "day": "15",
-                "newEnrollments": "19",
-                "scheduledMeetings": "35",
-                "attendanceRate": "69%",
-                "completedClasses": "8",
-                "classCompletionRate": "75%",
-                "graduatedStudents": "23"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  }
-]

data/dist/app/components/playbook/pb_docs/kit_api.html.erb

@@ -1,321 +0,0 @@
-<% if !local_prop_data.present? %>
-  <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
-  <%= pb_rails("title", props: { text: "Available Props", size: 3, margin_bottom: "sm", dark: dark }) %>
-    <%= pb_rails("card", props: { padding: "none", dark: dark }) do %>
-      <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
-        <%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle", dark: dark }) do %>
-          <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", active: true, dark: dark }) %>
-        <% end %>
-      <% end %>
-      <%= pb_rails("section_separator", props:{ dark: dark }) %>
-      <%= pb_rails("card/card_body", props: {}) do %>
-        <%= pb_rails("table", props: {container: false, disable_hover: true, dark: dark }) do %>
-          <thead>
-            <tr>
-              <th>Props</th>
-              <th>Type</th>
-              <th>Values</th>
-            </tr>
-          </thead>
-          <tbody>
-            <% global_prop_data.each do |key, value|%>
-              <tr>
-                <td>
-                  <%= pb_rails("title", props: { text: key, tag: "h4", size: 4, dark: dark }) %>
-                </td>
-                <td>
-                  <%= pb_rails("card", props: {
-                    classname: "card",
-                    padding: "xxs",
-                    background: dark ? "dark" : "light",
-                    border_none: true,
-                    border_radius: "sm"
-                  })  do %>
-                    <%= pb_rails("body", props: {
-                      classname: "kearning",
-                      dark: dark
-                    }) do %>
-                        <% if key =~ /^padding|^margin/ %>
-                            <%= "array" %>
-                        <% else %>
-                          <%= value[:type].to_s.downcase %>
-                        <% end %>
-                    <% end %>
-                  <% end %>
-                </td>
-                <td>
-                  <% if key =~ /^padding|^margin/ %>
-                  <% padding_margin_values.each do |item| %>
-                      <%= pb_rails("card", props: {
-                          flex_direction: "row",
-                          classname: "card",
-                          padding: "xxs",
-                          background: dark ? "dark" : "light",
-                          border_none: true,
-                          border_radius: "sm",
-                          margin: "xxs"
-                        })  do %>
-                          <%= pb_rails("body", props: {
-                              classname: "kearning",
-                              dark: dark
-                          }) do %>
-                            <%= item %>
-                          <% end %>
-                        <% end %>
-                      <% end %>
-                  <% else %>
-                  <% if value[:values].present? %>
-                    <% value[:values].each do |item| %>
-                      <% if item != nil %>
-                        <%= pb_rails("card", props: {
-                          flex_direction: "row",
-                          classname: "card",
-                          padding: "xxs",
-                          background: dark ? "dark" : "light",
-                          border_none: true,
-                          border_radius: "sm",
-                          margin: "xxs"
-                        })  do %>
-                          <%= pb_rails("body", props: {
-                              classname: "kearning",
-                              dark: dark
-                          }) do %>
-                            <%= item %>
-                          <% end %>
-                        <% end %>
-                      <% end %>
-                    <% end %>
-                  <% end %>
-                  <% end %>
-                </td>
-              </tr>
-            <% end %>
-          </tbody>
-        <% end %>
-      <% end %>
-    <% end %>
-  </div>
-<% else %>
-  <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
-    <%= pb_rails("title", props: { text: "Available Props", size: 3, margin_bottom: "sm", dark: dark }) %>
-    <%= pb_rails("card", props: { padding: "none", dark: dark }) do %>
-      <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
-        <%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle", dark: dark }) do %>
-        <% if local_prop_data.present? %>
-          <%= pb_rails("nav/item", props: { text: "Kit Props", link: "#", active: true, id: "local-button-active", classname: "local-active", dark: dark }) %>
-        <% end %>
-        <% if local_prop_data.present? %>
-          <%= pb_rails("nav/item", props: { text: "Kit Props", link: "#", id: "local-button", classname: "global-active", dark: dark }) %>
-        <% end %>
-          <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", active: true, id: "global-button-active", classname: "global-active", dark: dark }) %>
-          <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", id: "global-button", classname: "local-active", dark: dark }) %>
-        <% end %>
-      <% end %>
-      <%= pb_rails("section_separator", props: { dark: dark }) %>
-      <%= pb_rails("card/card_body", props: { dark: dark }) do %>
-        <%= pb_rails("table", props: {container: false, disable_hover: true, id: "global-prop-table", classname: "global-active", dark: dark}) do %>
-          <thead>
-            <tr>
-              <th>Props</th>
-              <th>Type</th>
-              <th>Values</th>
-            </tr>
-          </thead>
-          <tbody>
-          <% global_prop_data.each do |key, value|%>
-              <tr>
-                <td>
-                  <%= pb_rails("title", props: { text: key, tag: "h4", size: 4, dark: dark }) %>
-                </td>
-                <td>
-                  <%= pb_rails("card", props: {
-                    classname: "card",
-                    padding: "xxs",
-                    background: dark ? "dark" : "light",
-                    border_none: true,
-                    border_radius: "sm"
-                  })  do %>
-                    <%= pb_rails("body", props: {
-                      classname: "kearning",
-                      dark: dark
-                    }) do %>
-                        <% if key =~ /^padding|^margin/ %>
-                            <%= "array" %>
-                        <% else %>
-                          <%= value[:type].to_s.downcase %>
-                        <% end %>
-                    <% end %>
-                  <% end %>
-                </td>
-                <td>
-                  <% if key =~ /^padding|^margin/ %>
-                  <% padding_margin_values.each do |item| %>
-                      <%= pb_rails("card", props: {
-                          flex_direction: "row",
-                          classname: "card",
-                          padding: "xxs",
-                          background: dark ? "dark" : "light",
-                          border_none: true,
-                          border_radius: "sm",
-                          margin: "xxs"
-                        })  do %>
-                          <%= pb_rails("body", props: {
-                              classname: "kearning",
-                              dark: dark
-                          }) do %>
-                            <%= item %>
-                          <% end %>
-                        <% end %>
-                      <% end %>
-                  <% else %>
-                  <% if value[:values].present? %>
-                    <% value[:values].each do |item| %>
-                      <% if item != nil %>
-                        <%= pb_rails("card", props: {
-                          flex_direction: "row",
-                          classname: "card",
-                          padding: "xxs",
-                          background: dark ? "dark" : "light",
-                          border_none: true,
-                          border_radius: "sm",
-                          margin: "xxs"
-                        })  do %>
-                          <%= pb_rails("body", props: {
-                              classname: "kearning",
-                              dark: dark
-                          }) do %>
-                            <%= item %>
-                          <% end %>
-                        <% end %>
-                      <% end %>
-                    <% end %>
-                  <% end %>
-                  <% end %>
-                </td>
-              </tr>
-            <% end %>
-          </tbody>
-        <% end %>
-        <%= pb_rails("table", props: {container: false, disable_hover: true, id: "local-prop-table", classname: "local-active", dark: dark }) do %>
-          <thead>
-            <tr>
-              <th>Props</th>
-              <th>Type</th>
-              <th>Values</th>
-              <th>Default</th>
-            </tr>
-          </thead>
-          <tbody>
-          <% local_prop_data.each do |key, value|%>
-              <tr>
-                <td>
-                  <%= pb_rails("title", props: { text: key, tag: "h4", size: 4, dark: dark }) %>
-                </td>
-                <td>
-                  <%= pb_rails("card", props: {
-                    classname: "card",
-                    dark: dark,
-                    padding: "xxs",
-                    background: dark ? "dark" : "light",
-                    border_none: true,
-                    border_radius: "sm"
-                  })  do %>
-                    <%= pb_rails("body", props: {
-                      classname: "kearning",
-                      dark: dark
-                    }) do %>
-                        <%= value[:type].downcase %>
-                    <% end %>
-                  <% end %>
-                </td>
-                <td>
-                  <% if value[:values].present? %>
-                    <% value[:values].each do |item| %>
-                      <% if item != nil %>
-                        <%= pb_rails("card", props: {
-                          flex_direction: "row",
-                          classname: "card",
-                          padding: "xxs",
-                          background: dark ? "dark" : "light",
-                          border_none: true,
-                          border_radius: "sm",
-                          margin: "xxs"
-                        })  do %>
-                          <%= pb_rails("body", props: {
-                              classname: "kearning",
-                              dark: dark,
-                          }) do %>
-                            <%= item %>
-                          <% end %>
-                        <% end %>
-                      <% end %>
-                    <% end %>
-                  <% end %>
-                </td>
-                <td>
-                  <% if value[:default].present? || value[:default].is_a?(TrueClass) || value[:default].is_a?(FalseClass) %>
-                    <%= pb_rails("card", props: {
-                            classname: "card",
-                            padding: "xxs",
-                            background: dark ? "dark" : "light",
-                            border_none: true,
-                            border_radius: "sm"
-                      })  do %>
-                        <%= pb_rails("body", props: {
-                          classname: "kearning",
-                          dark: dark,
-                        }) do %>
-                            <%= value[:default] %>
-                        <% end %>
-                      <% end %>
-                  <% end %>
-                </td>
-              </tr>
-            <% end %>
-          </tbody>
-        <% end %>
-      <% end %>
-    <% end %>
-  </div>
-<% end %>
-
-<script>
-
-const globalNavAndTable = document.querySelectorAll('.global-active');
-const localNavAndTable = document.querySelectorAll('.local-active');
-
-globalNavAndTable.forEach(element => {
-  element.style.display = 'none';
-});
-
-const globalButton = document.getElementById("global-button");
-if (globalButton) {
-  globalButton.addEventListener("click", showGlobal);
-}
-
-const localButton = document.getElementById("local-button");
-if (localButton) {
-  localButton.addEventListener("click", showLocal);
-}
-
-function showGlobal() {
-  localNavAndTable.forEach(element => {
-    element.style.display = 'none';
-  });
-
-  globalNavAndTable.forEach(element => {
-    element.style.display = 'table';
-  });
-}
-
-function showLocal() {
-  localNavAndTable.forEach(element => {
-    element.style.display = 'table';
-  });
-
-  globalNavAndTable.forEach(element => {
-    element.style.display = 'none';
-  });
-}
-
-</script>