playbook_ui_docs 14.17.0.pre.alpha.play1499backgroundkitoverlay7110 → 14.17.0.pre.rc.0

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.17.0.pre.alpha.play1499backgroundkitoverlay7110
+  version: 14.17.0.pre.rc.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-04-03 00:00:00.000000000 Z
+date: 2025-03-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -58,8 +58,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md
@@ -147,8 +145,6 @@ files:
 - app/pb_kits/playbook/pb_background/docs/_background_image.md
 - app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_light.jsx
-- app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx
-- app/pb_kits/playbook/pb_background/docs/_background_overlay.md
 - app/pb_kits/playbook/pb_background/docs/_background_size.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_size.jsx
 - app/pb_kits/playbook/pb_background/docs/_background_size.md
@@ -1151,8 +1147,6 @@ files:
 - app/pb_kits/playbook/pb_label_value/docs/example.yml
 - app/pb_kits/playbook/pb_label_value/docs/index.js
 - app/pb_kits/playbook/pb_layout/docs/_description.md
-- app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx
-- app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md
 - app/pb_kits/playbook/pb_layout/docs/_layout_collection.html.erb
 - app/pb_kits/playbook/pb_layout/docs/_layout_collection.jsx
 - app/pb_kits/playbook/pb_layout/docs/_layout_collection.md
@@ -1682,7 +1676,6 @@ files:
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_swift.md
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.html.erb
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.jsx
-- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.md
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical_swift.md
 - app/pb_kits/playbook/pb_section_separator/docs/example.yml
 - app/pb_kits/playbook/pb_section_separator/docs/index.js

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx

@@ -1,90 +0,0 @@
-import React, { useState } from "react"
-import { AdvancedTable, Button, Flex } from "playbook-ui"
-import MOCK_DATA from "./advanced_table_mock_data.json"
-import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
-
-const AdvancedTableFullscreen = (props) => {
-  const [fullscreenToggleSmall, setFullscreenToggleSmall] = useState(null)
-  const [fullscreenToggleLarge, setFullscreenToggleLarge] = useState(null)
-
-  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 tableProps = {
-    sticky: true
-  }
-
-  return (
-    <div>
-      <Flex justify="end">
-          <Button
-              marginBottom="sm"
-              onClick={() => fullscreenToggleSmall?.()}
-              text="Fullscreen Small Table"
-              variant="secondary"
-          />
-      </Flex>
-      <AdvancedTable
-          allowFullScreen
-          columnDefinitions={columnDefinitions}
-          fullScreenControl={({ toggleFullscreen }) => setFullscreenToggleSmall(() => toggleFullscreen)}
-          tableData={MOCK_DATA}
-          {...props}
-      >
-          <AdvancedTable.Header enableSorting />
-          <AdvancedTable.Body />
-      </AdvancedTable>
-      <Flex justify="end">
-          <Button
-              marginY="sm"
-              onClick={() => fullscreenToggleLarge?.()}
-              text="Fullscreen Large Table"
-              variant="secondary"
-          />
-      </Flex>
-      <AdvancedTable
-          allowFullScreen
-          columnDefinitions={columnDefinitions}
-          fullScreenControl={({ toggleFullscreen }) => setFullscreenToggleLarge(() => toggleFullscreen)}
-          responsive="none"
-          tableData={PAGINATION_MOCK_DATA}
-          tableProps={tableProps}
-          {...props}
-      >
-          <AdvancedTable.Header enableSorting />
-          <AdvancedTable.Body />
-      </AdvancedTable>
-    </div>
-  )
-}
-
-export default AdvancedTableFullscreen

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

@@ -1,3 +0,0 @@
-Trigger Fullscreen mode with the `allowFullScreen`and `fullScreenControl` props.  `allowFullScreen` is a boolean that enables Fullscreen functionality for an Advanced Table. `fullScreenControl` is a callback function that receives an object containing the table's internal `toggleFullscreen` function, allowing you to store and trigger Fullscreen from the parent component. An external trigger (like a button) must be used to activate Fullscreen mode.
-
-Exit Fullscreen mode by clicking the minimize top-right-corner icon or by pressing the "Escape" keyboard key.

data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import Background from "../../pb_background/_background"
-import Flex from "../../pb_flex/_flex"
-import FlexItem from "../../pb_flex/_flex_item"
-import Title from "../../pb_title/_title"
-
-const BackgroundOverlay = (props) => {
-  return (
-    <Background
-        alt="colorful background"
-        className="background lazyload"
-        imageOverlay="opacity_6"
-        imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
-        {...props}
-        backgroundColor="light"
-      >
-        <Flex
-            orientation="column"
-            vertical="center"
-            {...props}
-        >
-          <FlexItem>
-            <Title
-                dark
-                padding="lg"
-                size={1}
-                text="Background Kit Image"
-                {...props}
-            />
-          </FlexItem>
-        </Flex>
-      </Background>
-  )
-}
-
-export default BackgroundOverlay

data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md

@@ -1 +0,0 @@
-An overlay can be added to the background image by setting the `imageOverlay` prop and adding a `backgroundColor`. The `imageOverlay` prop can be set to any opacity ranging from `opacity_1` to `opacity_10`.

data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx

@@ -1,190 +0,0 @@
-import React from 'react'
-
-import Layout from '../../pb_layout/_layout'
-import Flex from '../../pb_flex/_flex'
-import Body from '../../pb_body/_body'
-import Caption from '../../pb_caption/_caption'
-import SectionSeparator from '../../pb_section_separator/_section_separator'
-
-const LayoutBracket = () => {
-  return (
-    <div>
-      <Layout
-          layout="bracket"
-      >
-        <Layout.RoundLabel>
-          <Caption>Wild Card</Caption>
-          <SectionSeparator marginY="sm"/>
-        </Layout.RoundLabel>
-        <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Packers</Body>
-              <Body>10</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Eagles</strong></Body>
-              <Body>22</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Vikings</Body>
-              <Body>9</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Rams</strong></Body>
-              <Body>27</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body><strong>Lions</strong></Body>
-            </Flex>
-            <Flex justify="between">
-              <Body>BYE</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body><strong>Commanders</strong></Body>
-              <Body>23</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body>Buccaneers</Body>
-              <Body>20</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body><strong>Chiefs</strong></Body>
-            </Flex>
-            <Flex justify="between">
-              <Body>BYE</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Chargers</Body>
-              <Body>12</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Texans</strong></Body>
-              <Body>32</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Broncos</Body>
-              <Body>7</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Bills</strong></Body>
-              <Body>31</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Steelers</Body>
-              <Body>14</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Ravens</strong></Body>
-              <Body>28</Body>
-            </Flex>
-          </Layout.Game>
-        </Layout.Round>
-        <Layout.RoundLabel>
-          <Caption>Divisional</Caption>
-          <SectionSeparator marginY="sm"/>
-        </Layout.RoundLabel>
-        <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Rams</Body>
-              <Body>22</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Eagles</strong></Body>
-              <Body>28</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body><strong>Commanders</strong></Body>
-              <Body>45</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body>Lions</Body>
-              <Body>31</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Texans</Body>
-              <Body>14</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Chiefs</strong></Body>
-              <Body>23</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Ravens</Body>
-              <Body>25</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Bills</strong></Body>
-              <Body>27</Body>
-            </Flex>
-          </Layout.Game>
-        </Layout.Round>
-        <Layout.RoundLabel>
-          <Caption>Conference</Caption>
-          <SectionSeparator marginY="sm"/>
-        </Layout.RoundLabel>
-        <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Commanders</Body>
-              <Body>23</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Eagles</strong></Body>
-              <Body>55</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Bills</Body>
-              <Body>29</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Chiefs</strong></Body>
-              <Body>32</Body>
-            </Flex>
-          </Layout.Game>
-        </Layout.Round>
-        <Layout.RoundLabel>
-          <Caption>Super Bowl</Caption>
-          <SectionSeparator marginY="sm"/>
-        </Layout.RoundLabel>
-        <Layout.Round>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Chiefs</Body>
-              <Body>22</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Eagles</strong></Body>
-              <Body>40</Body>
-            </Flex>
-          </Layout.Game>
-        </Layout.Round>
-      </Layout>
-    </div>
-  )
-}
-
-export default LayoutBracket

data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md

@@ -1,5 +0,0 @@
-Use `<Layout.RoundLabel>`, `<Layout.Round>`, and `<Layout.Game>` to make a bracket layout.
-
-On mobile devices, `<Layout.RoundLabel>` will display (on desktop these components are hidden) and the bracket will be in one column.
-
-Ensure that each `<Layout.Game>` maintains a consistent height for the bracket lines to lay out properly.

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

@@ -1 +0,0 @@
-To guarantee the vertical section separator displays properly, please add the `vertical: "stretch"`/`vertical="stretch"` property to the parent container (which is commonly a Flex container). This will stretch the container’s child elements vertically and ensure the section separator appears as expected.