playbook_ui_docs 16.10.0 → 16.11.0.pre.rc.0

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_custom_trigger.jsx

@@ -0,0 +1,71 @@
+import React from "react";
+import FullScreen from "../../pb_full_screen/_full_screen";
+import useFullScreen from "../../pb_full_screen/useFullScreen";
+import AdvancedTable from "../../pb_advanced_table/_advanced_table";
+import Flex from "../../pb_flex/_flex";
+import MOCK_DATA from "../../pb_advanced_table/docs/advanced_table_mock_data.json";
+import CircleIconButton from "../../pb_circle_icon_button/_circle_icon_button";
+
+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",
+  },
+];
+
+const FullScreenCustomTrigger = (props) => {
+  const [isFullscreen, setIsFullscreen] = useFullScreen(false);
+
+  return (
+    <>
+      <Flex justify="end">
+        <CircleIconButton
+            icon="expand"
+            marginBottom="md"
+            onClick={() => setIsFullscreen(true)}
+            {...props}
+        />
+      </Flex>
+
+      <FullScreen
+          headerText="Fullscreen Table"
+          isFullscreen={isFullscreen}
+          onClose={() => setIsFullscreen(false)}
+          {...props}
+      >
+        <AdvancedTable
+            columnDefinitions={columnDefinitions}
+            tableData={MOCK_DATA}
+            {...props}
+        />
+      </FullScreen>
+    </>
+  );
+};
+
+export default FullScreenCustomTrigger;

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_custom_trigger.md

@@ -0,0 +1 @@
+Use `useFullScreen` when the trigger belongs somewhere else on the page, such as a toolbar or table action area. Pass the hook state to `isFullscreen`, open the overlay from your external control, and reset the state with `onClose`.

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_default.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("full_screen") do %>
+  Full Screen content
+<% end %>

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_default.jsx

@@ -0,0 +1,63 @@
+import React from "react";
+import FullScreen from "../../pb_full_screen/_full_screen";
+import AdvancedTable from "../../pb_advanced_table/_advanced_table";
+import Button from "../../pb_button/_button";
+import MOCK_DATA from "../../pb_advanced_table/docs/advanced_table_mock_data.json";
+
+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",
+  },
+];
+
+const FullScreenDefault = (props) => {
+
+  return (
+    <FullScreen
+        headerText="Fullscreen Table"
+        trigger={({ onClick, isOpen }) => (
+          <Button
+              marginBottom="md"
+              onClick={onClick}
+              text={isOpen ? "Exit Fullscreen" : "Enter Fullscreen"}
+              {...props}
+          />
+        )}
+        {...props}
+    >
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </FullScreen>
+  );
+};
+
+export default FullScreenDefault;

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_default.md

@@ -0,0 +1 @@
+Use the `trigger` prop for the simplest setup. The trigger render function receives the fullscreen state and toggle handler, so the control can open and close the overlay without managing separate state.

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_header_text_styling.jsx

@@ -0,0 +1,68 @@
+import React from "react";
+import FullScreen from "../../pb_full_screen/_full_screen";
+import useFullScreen from "../../pb_full_screen/useFullScreen";
+import AdvancedTable from "../../pb_advanced_table/_advanced_table";
+import Button from "../../pb_button/_button";
+import MOCK_DATA from "../../pb_advanced_table/docs/advanced_table_mock_data.json";
+
+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",
+  },
+];
+
+const FullScreenHeaderTextStyling = (props) => {
+  const [isFullscreen, setIsFullscreen] = useFullScreen(false);
+
+  return (
+    <>
+      <Button
+          marginBottom="md"
+          onClick={() => setIsFullscreen(true)}
+          text="Enter Fullscreen"
+          {...props}
+      />
+      <FullScreen
+          headerText="Fullscreen Table"
+          headerTextStyling="body"
+          isFullscreen={isFullscreen}
+          onClose={() => setIsFullscreen(false)}
+          {...props}
+      >
+        <AdvancedTable
+            columnDefinitions={columnDefinitions}
+            tableData={MOCK_DATA}
+            {...props}
+        />
+      </FullScreen>
+    </>
+  );
+};
+
+export default FullScreenHeaderTextStyling;

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_header_text_styling.md

@@ -0,0 +1 @@
+Use `headerTextStyling` to match the header text to the weight of the fullscreen experience. The default `title_4` treatment works well for primary workflows, while `body` creates a quieter header for utility views.

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_sticky_header.jsx

@@ -0,0 +1,68 @@
+import React from "react";
+import FullScreen from "../../pb_full_screen/_full_screen";
+import useFullScreen from "../../pb_full_screen/useFullScreen";
+import AdvancedTable from "../../pb_advanced_table/_advanced_table";
+import Button from "../../pb_button/_button";
+import MOCK_DATA from "../../pb_advanced_table/docs/advanced_table_mock_data.json";
+
+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",
+  },
+];
+
+const FullScreenStickyHeader = (props) => {
+  const [isFullscreen, setIsFullscreen] = useFullScreen(false);
+
+  return (
+    <>
+      <Button
+          marginBottom="md"
+          onClick={() => setIsFullscreen(true)}
+          text="Enter Fullscreen"
+          {...props}
+      />
+      <FullScreen
+          headerText="Fullscreen Table"
+          isFullscreen={isFullscreen}
+          onClose={() => setIsFullscreen(false)}
+          stickyHeader={false}
+          {...props}
+      >
+        <AdvancedTable
+            columnDefinitions={columnDefinitions}
+            tableData={MOCK_DATA}
+            {...props}
+        />
+      </FullScreen>
+    </>
+  );
+};
+
+export default FullScreenStickyHeader;

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_sticky_header.md

@@ -0,0 +1 @@
+The fullscreen header stays sticky by default, keeping the title and close action visible while content scrolls. Set `stickyHeader` to `false` when the header should move with the rest of the fullscreen content.

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_table_and_filter.jsx

@@ -0,0 +1,149 @@
+import React, { useState } from "react";
+import FullScreen from "../../pb_full_screen/_full_screen";
+import useFullScreen from "../../pb_full_screen/useFullScreen";
+import AdvancedTable from "../../pb_advanced_table/_advanced_table";
+import Button from "../../pb_button/_button";
+import Filter from "../../pb_filter/_filter";
+import TextInput from "../../pb_text_input/_text_input";
+import Dropdown from "../../pb_dropdown/_dropdown";
+import Flex from "../../pb_flex/_flex";
+import SectionSeparator from "../../pb_section_separator/_section_separator";
+import Card from "../../pb_card/_card";
+import MOCK_DATA from "../../pb_advanced_table/docs/advanced_table_mock_data.json";
+
+const dropdownOptions = [
+  {
+    label: "United States",
+    value: "unitedStates",
+    id: "us"
+  },
+  {
+    label: "Canada",
+    value: "canada",
+    id: "ca"
+  },
+  {
+    label: "Pakistan",
+    value: "pakistan",
+    id: "pk"
+  }
+];  
+
+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",
+  },
+];
+
+const FullScreenTableAndFilter = (props) => {
+  const [isFullscreen, setIsFullscreen] = useFullScreen(false);
+  const [territory, setTerritory] = useState("");
+
+  return (
+    <>
+      <Button
+          marginBottom="md"
+          onClick={() => setIsFullscreen(true)}
+          text="Enter Fullscreen"
+          {...props}
+      />
+      <FullScreen
+          headerText="Fullscreen Table"
+          isFullscreen={isFullscreen}
+          onClose={() => setIsFullscreen(false)}
+          {...props}
+      >
+        <Card padding="none">
+          <Flex
+              align="stretch"
+              flexDirection="column"
+              gap="none"
+          >
+            <Filter
+                background={false}
+                double
+                maxHeight="50vh"
+                minWidth="xs"
+                popoverProps={{ width: "350px", appendTo: ".fullscreen-overlay" }}
+                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" }]}
+            >
+              {({ closePopover }) => (
+                <>
+                  <TextInput
+                      label="Territory ID"
+                      onChange={(event) => setTerritory(event.target.value)}
+                      value={territory}
+                  />
+                  <Dropdown
+                      label="Territory"
+                      marginBottom="sm"
+                      options={dropdownOptions}
+                  />
+                  <Flex spacing="between">
+                    <Button
+                        onClick={() => {
+                          alert(
+                            "No filtering functionality - just a pattern demo!",
+                          );
+                          closePopover();
+                        }}
+                        text="Filter"
+                    />
+                    <Button
+                        text="Defaults"
+                        variant="secondary"
+                    />
+                  </Flex>
+                </>
+              )}
+            </Filter>
+            <SectionSeparator />
+            <AdvancedTable
+                columnDefinitions={columnDefinitions}
+                tableData={MOCK_DATA}
+                tableProps={{ container: false }}
+                {...props}
+            />
+          </Flex>
+        </Card>
+      </FullScreen>
+    </>
+  );
+};
+
+export default FullScreenTableAndFilter;

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_table_and_filter.md

@@ -0,0 +1 @@
+Full Screen can host composed workflows such as a filter paired with a data table. For popovers inside the overlay, set the popover append target to `.fullscreen-overlay` so menus render within the fullscreen layer.

data/app/pb_kits/playbook/pb_full_screen/docs/_playground.json

@@ -0,0 +1,155 @@
+{
+  "template": "<FullScreen{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "contentPadding": "lg",
+    "escToExit": true,
+    "headerText": "Enrollment Review",
+    "headerTextStyling": "title_4",
+    "onClose": "() => console.log('Fullscreen closed')",
+    "onOpen": "() => console.log('Fullscreen opened')",
+    "stickyHeader": true
+  },
+  "groups": [
+    {
+      "name": "Header",
+      "props": [
+        "headerText",
+        "headerTextStyling",
+        "stickyHeader"
+      ]
+    },
+    {
+      "name": "Content",
+      "props": [
+        "contentPadding"
+      ]
+    },
+    {
+      "name": "Behavior",
+      "props": [
+        "escToExit"
+      ]
+    },
+    {
+      "name": "Callbacks",
+      "props": [
+        "trigger",
+        "onOpen",
+        "onClose"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "contentPadding": "lg",
+        "escToExit": true,
+        "headerText": "Enrollment Review",
+        "headerTextStyling": "title_4",
+        "stickyHeader": true,
+        "trigger": "({ onClick, isOpen }) => (\n  <Button\n    marginBottom=\"md\"\n    onClick={onClick}\n  >\n    {isOpen ? \"Exit Fullscreen\" : \"Enter Fullscreen\"}\n  </Button>\n)"
+      }
+    },
+    {
+      "name": "Hook trigger",
+      "structureMode": "hook_trigger",
+      "props": {
+        "contentPadding": "lg",
+        "escToExit": true,
+        "headerText": "Enrollment Review",
+        "headerTextStyling": "title_4",
+        "stickyHeader": true
+      },
+      "children": "<Card padding=\"md\">\n  <Title size={4} text=\"Enrollment Review\" />\n  <Body marginTop=\"xs\" text=\"The hook lets the trigger live anywhere while FullScreen owns the overlay content.\" />\n</Card>"
+    },
+    {
+      "name": "Medium padding",
+      "props": {
+        "contentPadding": "md",
+        "headerText": "Medium Padding",
+        "stickyHeader": true
+      }
+    },
+    {
+      "name": "No padding",
+      "props": {
+        "contentPadding": "none",
+        "headerText": "Edge-to-edge Content",
+        "stickyHeader": true
+      }
+    },
+    {
+      "name": "Non-sticky header",
+      "props": {
+        "contentPadding": "lg",
+        "headerText": "Scrolling Header",
+        "stickyHeader": false
+      }
+    },
+    {
+      "name": "Body header",
+      "props": {
+        "headerText": "A quieter header treatment",
+        "headerTextStyling": "body",
+        "stickyHeader": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "hook_trigger": {
+      "presetName": "Hook trigger",
+      "message": "Use the hook pattern when the trigger needs to live outside the FullScreen wrapper.",
+      "type": "info"
+    },
+    "content_padding": {
+      "when": {
+        "contentPadding": "none"
+      },
+      "message": "Use no padding when the fullscreen content already provides its own spacing or needs an edge-to-edge layout.",
+      "type": "info"
+    },
+    "sticky_header": {
+      "when": {
+        "stickyHeader": false
+      },
+      "message": "Turn off stickyHeader when the header should scroll away with the fullscreen content.",
+      "type": "info"
+    }
+  },
+  "children": {
+    "editable": true,
+    "default": "<Card padding=\"md\">\n  <Title size={4} text=\"Enrollment Review\" />\n  <Body marginTop=\"xs\" text=\"Open fullscreen to review a focused workspace with enough content to test header behavior and padding.\" />\n</Card>"
+  },
+  "structureModes": {
+    "default": "trigger_prop",
+    "modes": {
+      "trigger_prop": {
+        "label": "Trigger Prop",
+        "template": "<FullScreen{{props}}>\n  {{children}}\n</FullScreen>",
+        "children": "<Card padding=\"md\">\n  <Title size={4} text=\"Enrollment Review\" />\n  <Body marginTop=\"xs\" text=\"Open fullscreen to review a focused workspace with enough content to test header behavior and padding.\" />\n</Card>",
+        "props": {
+          "headerText": "Enrollment Review",
+          "trigger": "({ onClick, isOpen }) => (\n  <Button\n    marginBottom=\"md\"\n    onClick={onClick}\n  >\n    {isOpen ? \"Exit Fullscreen\" : \"Enter Fullscreen\"}\n  </Button>\n)"
+        }
+      },
+      "hook_trigger": {
+        "label": "Hook Trigger",
+        "template": "<FullScreen\n  isFullscreen={isFullscreen}\n  onClose={() => setIsFullscreen(false)}{{props}}\n>\n  {{children}}\n</FullScreen>",
+        "children": "<Card padding=\"md\">\n  <Title size={4} text=\"Enrollment Review\" />\n  <Body marginTop=\"xs\" text=\"The hook lets the trigger live anywhere while FullScreen owns the overlay content.\" />\n</Card>",
+        "imports": [
+          "useFullScreen"
+        ],
+        "props": {
+          "headerText": "Enrollment Review"
+        },
+        "wrapper": "const FullScreenPlaygroundExample = () => {\n  const [isFullscreen, setIsFullscreen, toggleFullScreen] = useFullScreen(false)\n\n  return (\n    <>\n      <Flex justify=\"end\">\n        <CircleIconButton\n          icon=\"expand\"\n          marginBottom=\"md\"\n          onClick={toggleFullScreen}\n        />\n      </Flex>\n      {{component}}\n    </>\n  )\n}\n\n<FullScreenPlaygroundExample />"
+      }
+    }
+  },
+  "hiddenProps": [
+    "isFullscreen"
+  ]
+}