playbook_ui_docs 14.17.0.pre.alpha.PLAY20547327 → 14.17.0.pre.alpha.alphaforaudiences7167

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.17.0.pre.alpha.PLAY20547327
+  version: 14.17.0.pre.alpha.alphaforaudiences7167
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-04-22 00:00:00.000000000 Z
+date: 2025-04-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -56,8 +56,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.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
@@ -95,14 +93,6 @@ files:
 - 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
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx
@@ -157,8 +147,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
@@ -461,8 +449,6 @@ files:
 - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb
 - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx
 - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.md
-- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx
-- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md
 - app/pb_kits/playbook/pb_copy_button/docs/example.yml
 - app/pb_kits/playbook/pb_copy_button/docs/index.js
 - app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.html.erb
@@ -720,35 +706,33 @@ files:
 - app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_default.jsx
 - app/pb_kits/playbook/pb_distribution_bar/docs/example.yml
 - app/pb_kits/playbook/pb_distribution_bar/docs/index.js
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_default_react.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_react.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_react.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_react.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_react.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_rails.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md
 - app/pb_kits/playbook/pb_draggable/docs/example.yml
 - app/pb_kits/playbook/pb_draggable/docs/index.js
@@ -1445,19 +1429,13 @@ files:
 - 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_color.jsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_default.html.erb
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.html.erb
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_rails.md
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_react.md
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md
 - 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
@@ -1970,13 +1948,9 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md
-- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_react.md
-- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx
@@ -2016,8 +1990,6 @@ files:
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_no_label.jsx
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_options.html.erb
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_props_swift.md
-- app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx
-- app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md
 - app/pb_kits/playbook/pb_text_input/docs/example.yml
 - app/pb_kits/playbook/pb_text_input/docs/index.js
 - app/pb_kits/playbook/pb_textarea/docs/_description.md

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

@@ -1,66 +0,0 @@
-import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-const AdvancedTableExpandByDepth = (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",
-    },
-  ]
-
-  const expandByDepth = [
-    {
-        depth: 0,
-        label: "Year",
-    },
-    {
-        depth: 1,
-        label: "Quarter",
-    },
-    {
-        depth: 2,
-        label: "Month",
-    }
-  ]
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          expandByDepth={expandByDepth}
-          onExpandByDepthClick={(depth, rows) => {console.log(depth, rows)}}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableExpandByDepth

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

@@ -1,10 +0,0 @@
-The `expandByDepth` prop enables users to expand or collapse table rows by specific levels of nesting. When provided, it renders a dropdown that appears when the toggle icon in the header is clicked.
-
-`expandByDepth` accepts an array of objects, where each object defines the depth level to target and the label to display in the dropdown. When a user selects an option:
-
-**Expanding a depth**: Expands all rows at the selected depth AND all parent levels above it (if parent levels were closed), ensuring nested content is visible.
-
-**Collapsing a depth**: Only collapses rows at the selected depth, keeping parent rows expanded for context.
-
-If you want to attach further logic to each option click, the **optional** `onExpandByDepthClick` prop can be used. This click event provides 2 arguments that can be hooked into: the depth level of the clicked item AND all flattened table rows. Any additional functionality provided through this onClick will be applied in addition to the default.
-

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

@@ -1,58 +0,0 @@
-import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-const AdvancedTableStickyColumns = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      id: "year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      id: "newEnrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-      id: "scheduledMeetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-      id: "attendanceRate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-      id: "completedClasses",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-      id: "classCompletionRate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-      id: "graduatedStudents",
-    },
-  ]
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          responsive="none"
-          stickyLeftColumn={["year"]}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableStickyColumns

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

@@ -1,6 +0,0 @@
-To render sticky columns for the Advanced Table, you can use the `stickyLeftColumn` prop. This prop expects an array of the column ids you want to be sticky.
-
-To achieve this:
-- Make sure to provide an id for each column via columnDefinitions as shown below. Id can be any string. 
-- One or multiple columns can be made sticky, it is recommended to set the ids within `stickyLeftColumn` in the order in which the columns are rendered.
-- It is recommended to set `responsive` to none when using `stickyLeftColumn` since responsive just makes the first column sticky and the slightly different styling for `responsive` and `stickyLeftColumn` may override each other in unexpected ways.

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

@@ -1,64 +0,0 @@
-import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-const AdvancedTableStickyColumnsAndHeader = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      id: "year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      id: "newEnrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-      id: "scheduledMeetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-      id: "attendanceRate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-      id: "completedClasses",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-      id: "classCompletionRate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-      id: "graduatedStudents",
-    },
-  ]
-
-  const tableProps = {
-    sticky: true
-  }
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          maxHeight="xs"
-          responsive="none"
-          stickyLeftColumn={["year"]}
-          tableData={MOCK_DATA}
-          tableProps={tableProps}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableStickyColumnsAndHeader

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

@@ -1,8 +0,0 @@
-To achieve a sticky header AND sticky columns together, in addition to the `stickyLeftColumn` logic outlined above, you can:
-
-- Set `sticky: true` via `tableProps`
-- Give the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. 
-
-**NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the column stickiness.
-
-Expand the table above to see this in action.

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

@@ -1,55 +0,0 @@
-import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-const AdvancedTableStickyHeader = (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",
-    },
-  ]
-
-  const tableProps = {
-    sticky: true
-  }
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          responsive="none"
-          tableData={MOCK_DATA}
-          tableProps={tableProps}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableStickyHeader

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

@@ -1,3 +0,0 @@
-The `TableProps` prop can also be used to render a sticky header for the Advanced Table.
-
-This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "Sticky Header for Responsive Table" doc example below.

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

@@ -1,33 +0,0 @@
-<% column_definitions = [
-    {
-      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",
-    }
-] %>
-
-<%= pb_rails("advanced_table", props: { id: "sticky_header_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>

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

@@ -1,3 +0,0 @@
-The `table_props` prop can also be used to render a sticky header for the Advanced Table.
-
-This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "[Sticky Header for Responsive Table](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header-for-responsive-table)" doc example below.

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

@@ -1,35 +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"
-        backgroundColor="category_21"
-        className="background lazyload"
-        imageOverlay="opacity_2"
-        imageUrl="https://unsplash.it/500/400/?image=633"
-        {...props}
-      >
-        <Flex
-            orientation="column"
-            vertical="center"
-            {...props}
-        >
-          <FlexItem>
-            <Title
-                dark
-                padding="lg"
-                size={1}
-                text="Background Kit Image"
-            />
-          </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_copy_button/docs/_copy_button_hook.jsx

@@ -1,54 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import usePBCopy from '../../pb_copy_button/usePBCopy'
-import Body from '../../pb_body/_body'
-import Textarea from '../../pb_textarea/_textarea'
-import Tooltip from '../../pb_tooltip/_tooltip'
-
-const CopyButtonHook = ({...props}) => {
-  // This is how you can use the copy button hook to copy text to the clipboard
-  // eslint-disable-next-line no-unused-vars
-  const [copied, copyToClipboard] = usePBCopy({ from: 'hookbody' })
-  // I added a tooltip so it looks better in the ui
-  const [showTooltip, setShowTooltip] = useState(false)
-
-  const handleCopy = () => {
-    copyToClipboard()
-    setShowTooltip(true)
-    setTimeout(() => setShowTooltip(false), 1500)
-  }
-
-  useEffect(() => {
-    const el = document.getElementById('hookbody')
-    if (!el) return
-
-    el.addEventListener('click', handleCopy)
-    return () => {
-      el.removeEventListener('click', handleCopy)
-    }
-  }, [copyToClipboard])
-
-  return (
-    <div>
-      <Tooltip
-          delay={{ close: 1000 }}
-          forceOpenTooltip={showTooltip}
-          placement="top"
-          showTooltip={false}
-          text="Copied!"
-      >
-        <Body
-            cursor="pointer"
-            id="hookbody"
-            text="I'm a custom copy hook! Click this body to copy this text!"
-        />
-      </Tooltip>
-
-      <Textarea
-          {...props}
-          placeholder="Paste here"
-      />
-    </div>
-  )
-}
-
-export default CopyButtonHook

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md

@@ -1,3 +0,0 @@
-We provide a `usePBCopy` hook that you can import to your project. This hook will return a function that you can call to copy the text to the clipboard.
-
-`usePBCopy({ from: 'your_id' })` will grab the `innerText` from `your_id` element, or `value` if it is an input element.