playbook_ui_docs 14.0.0.pre.alpha.play1447alphatest3462 → 14.0.0

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.0.0.pre.alpha.play1447alphatest3462
+  version: 14.0.0
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-08-13 00:00:00.000000000 Z
+date: 2024-08-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -49,8 +49,6 @@ 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
@@ -1214,10 +1212,6 @@ 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
@@ -1226,9 +1220,6 @@ 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
@@ -1937,7 +1928,7 @@ homepage: https://playbook.powerapp.cloud/
 licenses:
 - ISC
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -1953,7 +1944,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/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx

@@ -1,67 +0,0 @@
-import React from "react"
-import { AdvancedTable } from "playbook-ui"
-import Title from '../../pb_title/_title'
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-const AdvancedTableResponsive = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    },
-  ]
-
-  return (
-    <div>
-      <Title
-          size={4}
-          text="Not Responsive"
-          {...props}
-      />
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          responsive="none"
-          tableData={MOCK_DATA}
-          {...props}
-      />
-      <Title
-          paddingTop="sm"
-          size={4}
-          text="Responsive as Default"
-          {...props}
-      />
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableResponsive

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.md

@@ -1 +0,0 @@
-The `responsive` prop can be set to "scroll" or "none", and is set to "scroll" by default to make Advanced Tables responsive. To disable, set `responsive="none"`.

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_no_border.html.erb

@@ -1 +0,0 @@
-<%= pb_rails("online_status", props: { no_border: true }) %>

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_no_border.jsx

@@ -1,14 +0,0 @@
-import React from 'react'
-
-import OnlineStatus from '../_online_status'
-
-const OnlineStatusNoBorder = (props) => (
-  <>
-    <OnlineStatus
-        noBorder
-        {...props}
-    />
-  </>
-)
-
-export default OnlineStatusNoBorder

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_size.html.erb

@@ -1,3 +0,0 @@
-<%= pb_rails("online_status", props: { size: "sm", margin_y: "xs" }) %>
-<%= pb_rails("online_status", props: { size: "md", margin_y: "xs" }) %>
-<%= pb_rails("online_status", props: { size: "lg", margin_y: "xs" }) %>

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_size.jsx

@@ -1,25 +0,0 @@
-import React from 'react'
-
-import OnlineStatus from '../_online_status'
-
-const OnlineStatusSize = (props) => (
-  <>
-    <OnlineStatus
-        marginY="xs"
-        size="sm"
-        {...props}
-    />
-    <OnlineStatus
-        marginY="xs"
-        size="md"
-        {...props}
-    />
-    <OnlineStatus
-        marginY="xs"
-        size="lg"
-        {...props}
-    />
-  </>
-)
-
-export default OnlineStatusSize

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.html.erb

@@ -1,61 +0,0 @@
-<div id="outer-container">
-    <%= pb_rails("overlay", props: { id: "overlay-container", overflow: "hidden" }) do %>
-        <div id="underlying-table">
-            <%= pb_rails("table", props: { size: "sm" }) do %>
-                <thead>
-                    <tr>
-                        <th>Column 1</th>
-                        <th>Column 2</th>
-                        <th>Column 3</th>
-                        <th>Column 4</th>
-                        <th>Column 5</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <% 7.times do %>
-                        <tr>
-                            <td>Value 1</td>
-                            <td>Value 2</td>
-                            <td>Value 3</td>
-                            <td>Value 4</td>
-                            <td>Value 5</td>
-                        </tr>
-                    <% end %>   
-                </tbody>
-            <% end %>
-        </div>
-    <% end %>
-    <%= pb_rails("button", props: { text: "Show More", id: "show-more-button", variant: "link", full_width: true, icon: "chevron-down", icon_right: true }) %>
-    <%= pb_rails("button", props: { text: "Show Less", id: "show-less-button", variant: "link", full_width: true, icon: "chevron-up", icon_right: true }) %>
-</div>
-
-<script type="text/javascript">
-document.addEventListener("DOMContentLoaded", () => {
-  const showMoreButton = document.getElementById("show-more-button");
-  const showLessButton = document.getElementById("show-less-button");
-  const overlayContainer = document.getElementById("overlay-container");
-  const underlyingTable = document.getElementById("underlying-table");
-  const outerContainer = document.getElementById("outer-container");
-
-  showLessButton.style.display = "none";
-  underlyingTable.style.height = "200px";
-
-  const showMore = () => {
-    outerContainer.appendChild(underlyingTable);
-    outerContainer.appendChild(showLessButton);
-    showMoreButton.style.display = "none";
-    showLessButton.style.display = "flex";
-    underlyingTable.style.height = "auto";
-  };
-
-  const showLess = () => {
-    overlayContainer.appendChild(underlyingTable);
-    showMoreButton.style.display = "flex";
-    showLessButton.style.display = "none";
-    underlyingTable.style.height = "200px";
-  };
-
-  showMoreButton.addEventListener("click", showMore);
-  showLessButton.addEventListener("click", showLess);
-});
-</script>

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.jsx

@@ -1,70 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React, { useState } from "react";
-import { Overlay, Table, Button } from "playbook-ui";
-
-const TableExample = () => {
-    return (
-        <Table size="sm">
-            <thead>
-                <tr>
-                    <th>{"Column 1"}</th>
-                    <th>{"Column 2"}</th>
-                    <th>{"Column 3"}</th>
-                    <th>{"Column 4"}</th>
-                    <th>{"Column 5"}</th>
-                </tr>
-            </thead>
-            <tbody>
-                {Array.from({ length: 7 }, (_, index) => (
-                    <tr key={index}>
-                        {Array.from({ length: 5 }, (_, columnIndex) => (
-                            <td key={columnIndex}>{`Value ${columnIndex + 1}`}</td>
-                        ))}
-                    </tr>
-                ))}
-            </tbody>
-        </Table>
-    );
-};
-
-const OverlayToggle = () => {
-    const [showOverlay, setShowOverlay] = useState(true);
-
-    return (
-        <>
-            {showOverlay ? (
-                <>
-                    <Overlay overflow="hidden">
-                        <div style={{ height: 200 }}>
-                            <TableExample />
-                        </div>
-                    </Overlay>
-                    <Button
-                        fullWidth
-                        icon="chevron-down"
-                        iconRight
-                        key="chevron-down"
-                        onClick={() => setShowOverlay(false)}
-                        text="Show More"
-                        variant="link"
-                    />
-                </>
-            ) : (
-                <>
-                    <TableExample />
-                    <Button
-                        fullWidth
-                        icon="chevron-up"
-                        iconRight
-                        key="chevron-up"
-                        onClick={() => setShowOverlay(true)}
-                        text="Show Less"
-                        variant="link"
-                    />
-                </>
-            )}
-        </>
-    );
-};
-
-export default OverlayToggle;

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.md

@@ -1 +0,0 @@
-To toggle an overlay, add a button with an event handler. Remove the overlay container to reveal the underlying content. Re-wrap the overlay container to add the overlay back.