playbook_ui_docs 14.10.0.pre.alpha.play16825301 → 14.10.0.pre.rc.0

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.md

@@ -1 +0,0 @@
-The `link` prop accepts a string that is used as an href value and causes the button to act as a link. The default behavior of a link is to open in the current window. You can optionally alter the link behavior by adding the `newWindow` prop (boolean), which will open the link in a new window, or by calling the `target` prop, which accepts `_self`, `_blank`, `_parent`, `_top`, `child`, or any string, allowing you to specify any link target.

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.html.erb

@@ -1,10 +0,0 @@
-<%= pb_rails("section_separator", props: { text: "Default Separator" }) %>
-<%= pb_rails("section_separator", props: { color: "primary", text: "Primary Separator" }) %>
-<%= pb_rails("section_separator", props: { color: "primary", line_style: "dashed", text: "Primary Dashed Separator" }) %>
-<%= pb_rails("section_separator", props: { color: "primary" }) do %>
-  <%= pb_rails("flex", props: { padding: "xs" }) do %>
-    <%= pb_rails("icon", props: { color: "primary", icon: "arrow-down" }) %>
-    <%= pb_rails("detail", props: { text: "Children", size: "sm", color: "link" }) %>
-  <% end %>
-<% end %>
-

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx

@@ -1,42 +0,0 @@
-import React from "react"
-import { SectionSeparator, Flex, Detail, Icon } from "playbook-ui"
-
-const children = (
-  <Flex padding="xs">
-    <Icon color="primary"
-        icon="arrow-down"
-    />
-    <Detail
-        color="link"
-        size="sm"
-        text="Children"
-    />
-  </Flex>
-)
-
-const SectionSeparatorColor = (props) => {
-  return (
-    <div>
-      <SectionSeparator text="Default Separator"
-          {...props}
-      />
-      <SectionSeparator color="primary"
-          text="Primary Separator"
-          {...props}
-      />
-      <SectionSeparator
-          color="primary"
-          lineStyle="dashed"
-          text="Primary Dashed Separator"
-          {...props}
-      />
-       <SectionSeparator color="primary"
-           {...props}
-       >
-        {children}
-      </SectionSeparator>
-    </div>
-  )
-}
-
-export default SectionSeparatorColor

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

@@ -1,3 +0,0 @@
-Pass "primary" to the `color` prop to change any section separator color.
-
-**NOTE:** Passing `children` overrides any content provided via the `text` prop. The `color` prop does not affect the `text` prop's color, and the color of `children` is determined by the children's individual props. For greater control over text color customization, consider using a separator with `children`.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_description.md

@@ -1,3 +0,0 @@
-The Skeleton Loading kit can be used an intermediate loading state to give users a visual indication that content is loading. 
-
-**Please Note**: this kit is not meant to be integrated interally within other Playbook kits as a loading prop; rather, it can be used to create a composite of the section/kit/page with loading intermediataries, as demonstrated in the the "example component" doc examples.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.html.erb

@@ -1,9 +0,0 @@
-<%= pb_rails("flex", props: { justify: "evenly" }) do %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "50px", width: "100px"}) %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "xl", height: "50px", width: "100px"}) %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "lg", height: "50px", width: "100px"}) %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "md", height: "50px", width: "100px"}) %>
-    <%= pb_rails("skeleton_loading", props: { height: "50px", width: "100px"}) %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "xs", height: "50px", width: "100px"}) %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "none", height: "50px", width: "100px"}) %>
-<% end %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_rails.md

@@ -1 +0,0 @@
-The `border_radius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/visual_guidelines/border_radius) tokens, with `sm` as default.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.html.erb

@@ -1,7 +0,0 @@
-<%= pb_rails("card", props: { border_none: true }) do %>
-    <%= pb_rails("skeleton_loading") %>
-<% end %>
-
-<%= pb_rails("card", props: { background: "light", border_none: true }) do %>
-    <%= pb_rails("skeleton_loading", props: { color: "white" }) %>
-<% end %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.html.erb

@@ -1,119 +0,0 @@
-<%= pb_rails("button", props: { id: "toggle-filter-button", margin_bottom: "md", text: "Show Filter", variant: "secondary" }) %>
-
-<div id="skeleton-loading-filter-content">
-  <%= pb_rails("card", props: { margin_bottom: "lg" }) do %>
-    <%= pb_rails("flex", props: { align_items: "center", justify: "between", orientation: "row" }) do %>
-      <%= pb_rails("flex", props: { align_items: "center", justify: "start", orientation: "row" }) do %>
-        <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "40px", margin_right: "sm", width: "40px" }) %>
-        <%= pb_rails("skeleton_loading", props: { height: "16px", margin_right: "md", width: "80px" }) %>
-      <% end %>
-      <%= pb_rails("flex", props: { align_items: "center", justify: "end", orientation: "row" }) do %>
-        <%= pb_rails("skeleton_loading", props: { height: "18px", width: "120px" }) %>
-      <% end %>
-    <% end %>
-  <% end %>
-
-  <%= pb_rails("skeleton_loading", props: { height: "127px", width: "100%" }) %>
-</div>
-
-<div id="filter-content" style="display: none;">
-  <%= pb_rails("filter", props: {
-    margin_bottom: "xl",
-    min_width: "360px",
-    id: "2",
-    filters: [
-      { name: "name", value: "John Wick" }
-    ],
-    sort_menu: [
-      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
-      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
-      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
-    ],
-    results: 546,
-    template: "single"
-  }) do %>
-    <% example_collection = [
-      OpenStruct.new(name: "USA", value: 1),
-      OpenStruct.new(name: "Canada", value: 2),
-      OpenStruct.new(name: "Brazil", value: 3),
-      OpenStruct.new(name: "Philippines", value: 4),
-      OpenStruct.new(name: "A galaxy far far away...", value: 5)
-    ] %>
-
-    <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-      <%= form.text_field :example_text_field, props: { label: true } %>
-      <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-
-      <%= form.actions do |action| %>
-        <%= action.submit props: {
-          text: "Apply",
-          data: {
-            disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-        },}%>
-        <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
-      <% end %>
-    <% end %>
-  <% end %>
-
-  <%= pb_rails("filter", props: {
-    min_width: "360px",
-    id: "1",
-    filters: [
-      { name: "name", value: "John Wick" },
-      { name: "city", value: "San Francisco"}
-    ],
-    sort_menu: [
-      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
-      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
-      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
-    ],
-    template: "default",
-    results: 1,
-  }) do %>
-    <% example_collection = [
-      OpenStruct.new(name: "USA", value: 1),
-      OpenStruct.new(name: "Canada", value: 2),
-      OpenStruct.new(name: "Brazil", value: 3),
-      OpenStruct.new(name: "Philippines", value: 4),
-      OpenStruct.new(name: "A galaxy far far away...", value: 5)
-    ] %>
-    <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-      <%= form.text_field :example_text_field, props: { label: true } %>
-      <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-
-      <%= form.actions do |action| %>
-        <%= action.submit props: {
-          text: "Apply",
-          data: {
-            disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-        },}%>
-        <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
-      <% end %>
-    <% end %>
-  <% end %>
-</div>
-
-<script>
-  document.addEventListener("DOMContentLoaded", function() {
-    const toggleButton = document.getElementById('toggle-filter-button')
-    const skeletonFilterContentDiv = document.getElementById('skeleton-loading-filter-content')
-    const filterContentDiv = document.getElementById('filter-content')
-    const secondFilterContentDiv = document.getElementById('second-filter-content')
-
-    let isLoading = true
-
-    toggleButton.addEventListener('click', function() {
-      isLoading = !isLoading
-
-      if (isLoading) {
-        skeletonFilterContentDiv.style.display = 'block'
-        filterContentDiv.style.display = 'none'
-        toggleButton.textContent = 'Show Filter'
-      } else {
-        skeletonFilterContentDiv.style.display = 'none'
-        filterContentDiv.style.display = 'block'
-        toggleButton.textContent = 'Show Skeleton Loading'
-      }
-    })
-  })
-</script>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx

@@ -1,174 +0,0 @@
-import React, { useState } from 'react';
-import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
-
-const SortingChangeCallback = (sortOptions) => {
-  alert(JSON.stringify(sortOptions[0]))
-}
-
-const SkeletonLoadingFilter = (props) => {
-  const [isLoading, setIsLoading] = useState(true)
-  const toggleLoading = () => setIsLoading((prev) => !prev)
-
-  const options = [
-    { value: 'USA' },
-    { value: 'Canada' },
-    { value: 'Brazil' },
-    { value: 'Philippines' },
-    { value: 'A galaxy far far away, like really far away...' },
-  ]
-
-  return (
-    <div>
-      <Button 
-          marginBottom="md" 
-          onClick={toggleLoading} 
-          variant="secondary"
-      >
-          {isLoading ? "Show Filter" : "Show Skeleton Loading"}
-      </Button>
-      <div>
-        {isLoading ? (
-          <Card 
-              marginBottom="lg" 
-              {...props}
-          >
-              <Flex 
-                  alignItems="center" 
-                  justify="between"
-                  orientation="row"
-              >
-                  <Flex 
-                      alignItems="center" 
-                      justify="start"
-                      orientation="row"
-                  >
-                      <SkeletonLoading
-                          borderRadius="rounded"
-                          height="40px"
-                          marginRight="sm"
-                          width="40px"
-                          {...props}
-                      />
-                      <SkeletonLoading 
-                          height="16px" 
-                          marginRight="md"
-                          width="80px"
-                          {...props}
-                      />
-                  </Flex>
-                  <Flex 
-                      alignItems="center" 
-                      justify="end"
-                      orientation="row"
-                  >
-                      <SkeletonLoading 
-                          height="18px" 
-                          width="120px"
-                          {...props}
-                      />
-                  </Flex>
-              </Flex>
-          </Card>
-        ) : (
-          <Filter
-              filters={{ 'Full Name': 'John Wick' }}
-              marginBottom="lg" 
-              minWidth="375px"
-              results={546}
-              sortOptions={{
-                popularity: 'Popularity',
-                // eslint-disable-next-line
-                manager_title: 'Manager\'s Title',
-                // eslint-disable-next-line
-                manager_name: 'Manager\'s Name',
-              }}
-              sortValue={[{ name: 'popularity', dir: 'desc' }]}
-          >
-            {({ closePopover }) => (
-              <form>
-                <TextInput 
-                    label="Example Text Field" 
-                    placeholder="Enter Text"
-                />
-                <Select
-                    blankSelection="Select One..."
-                    label="Example Collection Select"
-                    name="Collection Select"
-                    options={options}
-                />
-                <Flex spacing="between">
-                    <Button 
-                        onClick={closePopover} 
-                        text="Filter"
-                    />
-                    <Button 
-                        text="Defaults" 
-                        variant="secondary"
-                    />
-                </Flex>
-              </form>
-            )}
-          </Filter>
-        )}
-      </div>
-      <div>
-        {isLoading ? (
-          <SkeletonLoading 
-              height="127px" 
-              marginBottom="lg"
-              width="100%"
-              {...props}
-          />
-        ) : (
-          <Filter
-              double
-              filters={{
-                'Full Name': 'John Wick',
-                'City': 'San Francisco',
-              }}
-              marginBottom="xl"
-              minWidth="375px"
-              onSortChange={SortingChangeCallback}
-              results={1}
-              sortOptions={{
-                popularity: 'Popularity',
-                // eslint-disable-next-line
-                manager_title: 'Manager\'s Title',
-                // eslint-disable-next-line
-                manager_name: 'Manager\'s Name',
-              }}
-              sortValue={[{ name: 'popularity', dir: 'desc' }]}
-          >
-            {({ closePopover }) => (
-              <form>
-                <TextInput 
-                    label="Full Name" 
-                    placeholder="Enter name"
-                />
-                <Select
-                    blankSelection="Select One..."
-                    label="Territory"
-                    maxWidth="sm"
-                    name="location"
-                    options={options}
-                />
-                <Flex spacing="between">
-                    <Button 
-                        onClick={closePopover}
-                        text="Filter" 
-                    />
-                    <Button 
-                        text="Defaults"
-                        variant="secondary"
-                    />
-                </Flex>
-              </form>
-            )}
-          </Filter>
-        )}
-      </div>      
-    </div>
-  )
-}
-
-export default SkeletonLoadingFilter;

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.html.erb

@@ -1,15 +0,0 @@
-<%= pb_rails("skeleton_loading", props: { height: "100px", width: "50%" }) %>
-
-<%= pb_rails("skeleton_loading", props: { gap: "md", height: "20px", margin_y: "md", stack: 3, width: "50px" }) %>
-
-<%= pb_rails("card", props: { height: "200px", margin_bottom: "md", padding: "none", width: "100%" }) do %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "md", gap: "xl", height: "50%", width: "300px" }) %>
-<% end %>
-
-<%= pb_rails("card", props: { height: "200px", margin_bottom: "md", padding: "none", width: "100%" }) do %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "md", gap: "xl", height: "30%", stack: 2, width: "70%" }) %>
-<% end %>
-
-<%= pb_rails("skeleton_loading", props: { height: "150px", margin_y: "md", width: "150px" }) %>
-
-<%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "150px", width: "150px" }) %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width_rails.md

@@ -1,3 +0,0 @@
-The `height` and `width` props accept pixel and percentage values. If using a percentage for `height`, the parent container must have a set height.
-
-Set the `height` and `width` props to the same value to make a square. A `rounded` border_radius will make a square a circle. If using percentages to make a square, your parent container must also be a square.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.html.erb

@@ -1,3 +0,0 @@
-<%= pb_rails("skeleton_loading", props: { stack: 5 }) %>
-
-<%= pb_rails("skeleton_loading", props: { gap: "md", padding_top: "xl", stack: 3 }) %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.html.erb

@@ -1,63 +0,0 @@
-<%= pb_rails("button", props: { id: "toggle-user-button", margin_bottom: "md", text: "Show User", variant: "secondary" }) %>
-
-<div id="skeleton-loading-user-content">
-    <%= pb_rails("flex", props: { align_items: "center" }) do %>
-        <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "38px", padding_right: "sm", width: "38px"}) %>
-        <%= pb_rails("skeleton_loading", props: { gap: "xxs", height: "18px", stack: 2, width: "161px"}) %>
-    <% end %>
-    <%= pb_rails("flex", props: { align_items: "start", padding_top: "md" }) do %>
-        <%= pb_rails("flex", props: { align_items: "center", flex_direction: "column" }) do %>
-            <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "100px", padding_bottom: "xs", width: "100px"}) %>
-            <%= pb_rails("skeleton_loading", props: { height: "32px", padding_bottom: "xxs", width: "144px"}) %>
-            <%= pb_rails("skeleton_loading", props: { height: "21px", width: "164px"}) %>
-        <% end %>
-    <% end %>
-</div>
-
-<div id="user-content" style="display: none;">
-    <div>
-        <%= pb_rails("user", props: {
-            name: "Anna Black",
-            title: "Remodeling Consultant",
-            orientation: "horizontal",
-            align: "left",
-            avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
-        }) %>
-    </div>
-    <div>
-        <%= pb_rails("flex", props: { align_items: "start", padding_top: "md" }) do %>
-            <%= pb_rails("user", props: {
-                name: "Anna Black",
-                title: "Remodeling Consultant",
-                orientation: "vertical",
-                align: "center",
-                size: "lg",
-                avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
-            }) %>
-        <% end %>
-    </div>
-</div>
-
-<script>
-  document.addEventListener("DOMContentLoaded", function() {
-    const toggleButton = document.getElementById('toggle-user-button')
-    const skeletonUserContentDiv = document.getElementById('skeleton-loading-user-content')
-    const userContentDiv = document.getElementById('user-content')
-
-    let isLoading = true
-
-    toggleButton.addEventListener('click', function() {
-      isLoading = !isLoading
-
-      if (isLoading) {
-        skeletonUserContentDiv.style.display = 'block'
-        userContentDiv.style.display = 'none'
-        toggleButton.textContent = 'Show User'
-      } else {
-        skeletonUserContentDiv.style.display = 'none'
-        userContentDiv.style.display = 'block'
-        toggleButton.textContent = 'Show Skeleton Loading'
-      }
-    })
-  })
-</script>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx

@@ -1,97 +0,0 @@
-import React, { useState } from 'react';
-import { Button, Flex, SkeletonLoading, User } from "playbook-ui";
-
-const SkeletonLoadingUser = (props) => {
-  const [isLoading, setIsLoading] = useState(true)
-  const toggleLoading = () => setIsLoading((prev) => !prev)
-
-  return (
-    <div>
-      <Button 
-          marginBottom="md" 
-          onClick={toggleLoading} 
-          variant="secondary"
-      >
-          {isLoading ? "Show User" : "Show Skeleton Loading"}
-      </Button>
-      <div>
-        {isLoading ? (
-          <Flex alignItems="center">
-              <SkeletonLoading 
-                  borderRadius="rounded" 
-                  height="38px" 
-                  paddingRight="sm"
-                  width="38px" 
-                  {...props} 
-              />
-                <SkeletonLoading 
-                    gap="xxs"
-                    height="18px" 
-                    stack="2"
-                    width="161px"
-                    {...props}
-                />
-          </Flex>
-        ) : (
-          <User
-              align="left"
-              avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
-              name="Anna Black"
-              orientation="horizontal"
-              title="Remodeling Consultant"
-              {...props}
-          />
-        )}
-      </div>
-      <div>
-        {isLoading ? (
-          <Flex 
-              alignItems="start"
-              paddingTop="md"
-          >
-              <Flex 
-                  alignItems="center" 
-                  flexDirection="column"
-              >
-                  <SkeletonLoading 
-                      borderRadius="rounded" 
-                      height="80px" 
-                      paddingBottom="xs" 
-                      width="80px" 
-                      {...props}
-                  />
-                  <SkeletonLoading 
-                      height="32px" 
-                      paddingBottom="xxs" 
-                      width="144px" 
-                      {...props} 
-                  />
-                  <SkeletonLoading 
-                      height="21px" 
-                      width="164px" 
-                      {...props}
-                  />
-              </Flex>
-          </Flex>
-        ) : (
-          <Flex
-              alignItems="start" 
-              paddingTop="md"
-          >
-              <User
-                  align="center"
-                  avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
-                  name="Anna Black"
-                  orientation="vertical"
-                  size="lg"
-                  title="Remodeling Consultant"
-                  {...props}
-              />
-          </Flex>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default SkeletonLoadingUser;

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx

@@ -1,88 +0,0 @@
-import React from 'react'
-import Table from '../_table'
-
-const TableStickyColumns = () => {
-    return (
-        <Table
-            responsive="scroll"
-            size="md"
-            stickyLeftColumn={["a"]}
-            stickyRightColumn={["b"]}
-        >
-            <thead>
-                <tr>
-                    <th id="a">{'Column 1'}</th>
-                    <th>{'Column 2'}</th>
-                    <th>{'Column 3'}</th>
-                    <th>{'Column 4'}</th>
-                    <th>{'Column 5'}</th>
-                    <th>{'Column 6'}</th>
-                    <th>{'Column 7'}</th>
-                    <th>{'Column 8'}</th>
-                    <th>{'Column 9'}</th>
-                    <th>{'Column 10'}</th>
-                    <th>{'Column 11'}</th>
-                    <th>{'Column 12'}</th>
-                    <th>{'Column 13'}</th>
-                    <th>{'Column 14'}</th>
-                    <th id="b">{'Column 15'}</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td id="a">{'Value 1'}</td>
-                    <td>{'Value 2'}</td>
-                    <td>{'Value 3'}</td>
-                    <td>{'Value 4'}</td>
-                    <td>{'Value 5'}</td>
-                    <td>{'Value 6'}</td>
-                    <td>{'Value 7'}</td>
-                    <td>{'Value 8'}</td>
-                    <td>{'Value 9'}</td>
-                    <td>{'Value 10'}</td>
-                    <td>{'Value 11'}</td>
-                    <td>{'Value 12'}</td>
-                    <td>{'Value 13'}</td>
-                    <td>{'Value 14'}</td>
-                    <td id="b">{'Value 15'}</td>
-                </tr>
-                <tr>
-                    <td id="a">{'Value 1'}</td>
-                    <td>{'Value 2'}</td>
-                    <td>{'Value 3'}</td>
-                    <td>{'Value 4'}</td>
-                    <td>{'Value 5'}</td>
-                    <td>{'Value 6'}</td>
-                    <td>{'Value 7'}</td>
-                    <td>{'Value 8'}</td>
-                    <td>{'Value 9'}</td>
-                    <td>{'Value 10'}</td>
-                    <td>{'Value 11'}</td>
-                    <td>{'Value 12'}</td>
-                    <td>{'Value 13'}</td>
-                    <td>{'Value 14'}</td>
-                    <td id="b">{'Value 15'}</td>
-                </tr>
-                <tr>
-                    <td id="a">{'Value 1'}</td>
-                    <td>{'Value 2'}</td>
-                    <td>{'Value 3'}</td>
-                    <td>{'Value 4'}</td>
-                    <td>{'Value 5'}</td>
-                    <td>{'Value 6'}</td>
-                    <td>{'Value 7'}</td>
-                    <td>{'Value 8'}</td>
-                    <td>{'Value 9'}</td>
-                    <td>{'Value 10'}</td>
-                    <td>{'Value 11'}</td>
-                    <td>{'Value 12'}</td>
-                    <td>{'Value 13'}</td>
-                    <td>{'Value 14'}</td>
-                    <td id="b">{'Value 15'}</td>
-                </tr>
-            </tbody>
-        </Table>
-    )
-}
-
-export default TableStickyColumns

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md

@@ -1,3 +0,0 @@
-The `stickyLeftColumn` and `stickyRightColumn` props can be used together on the same table as needed.
-
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.