playbook_ui 12.19.0 → 12.20.0.pre.alpha.movemarkdown668

data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban_responsive.html.erb

@@ -1,57 +0,0 @@
-<%= pb_rails("layout", props: {layout: "kanban", responsive: true}) do %>
-  <%= pb_rails("layout/body") do %>
-    <%= pb_rails("caption", props: {text: 'Queued'}) %>
-    <%= pb_rails("card") do %>
-      Runway Ticket #1
-    <% end %>
-  <% end %>
-  <%= pb_rails("layout/body") do %>
-    <%= pb_rails("caption", props: {text: 'In Progress'}) %>
-    <%= pb_rails("card") do %>
-      Runway Ticket #4
-    <% end %>
-    <%= pb_rails("card") do %>
-      Runway Ticket #5
-    <% end %>
-    <%= pb_rails("card") do %>
-      Runway Ticket #6
-    <% end %>
-  <% end %>
-  <%= pb_rails("layout/body") do %>
-    <%= pb_rails("caption", props: {text: 'Validation'}) %>
-    <%= pb_rails("card") do %>
-      Runway Ticket #7
-    <% end %>
-    <%= pb_rails("card") do %>
-      Runway Ticket 8
-    <% end %>
-    <%= pb_rails("card") do %>
-      Runway Ticket #9
-    <% end %>
-  <% end %>
-  <%= pb_rails("layout/body") do %>
-    <%= pb_rails("caption", props: {text: 'Done'}) %>
-    <%= pb_rails("card") do %>
-      More
-    <% end %>
-    <%= pb_rails("card") do %>
-      Stuff
-    <% end %>
-    <%= pb_rails("card") do %>
-      Here
-    <% end %>
-  <% end %>
-  <%= pb_rails("layout/body") do %>
-    <%= pb_rails("caption", props: {text: 'Backlog'}) %>
-    <%= pb_rails("card") do %>
-      Lots 
-    <% end %>
-    <%= pb_rails("card") do %>
-      of
-    <% end %>
-    <%= pb_rails("card") do %>
-      Stuff
-    <% end %>
-  <% end %>
-
-<% end %>

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

@@ -1,51 +0,0 @@
-import React from 'react'
-
-import Layout from '../_layout'
-
-import Card from '../../pb_card/_card'
-import Caption from '../../pb_caption/_caption'
-
-const LayoutKanbanResponsive = (props) => {
-  return (
-    <div>
-      <Layout
-          layout="kanban"
-          responsive
-          {...props}
-      >
-        <Layout.Body>
-          <Caption>{'Queue'}</Caption>
-          <Card>{'Card content'}</Card>
-          <Card>{'Card content'}</Card>
-          <Card>{'Card content'}</Card>
-        </Layout.Body>
-        <Layout.Body>
-          <Caption>{'In Progress'}</Caption>
-          <Card>{'Card content'}</Card>
-          <Card>{'Card content'}</Card>
-          <Card>{'Card content'}</Card>
-        </Layout.Body>
-        <Layout.Body>
-          <Caption>{'Validation'}</Caption>
-          <Card>{'Card content'}</Card>
-          <Card>{'Card content'}</Card>
-          <Card>{'Card content'}</Card>
-        </Layout.Body>
-        <Layout.Body>
-          <Caption>{'Done'}</Caption>
-          <Card>{'Card content'}</Card>
-          <Card>{'Card content'}</Card>
-          <Card>{'Card content'}</Card>
-        </Layout.Body>
-        <Layout.Body>
-          <Caption>{'Another Column'}</Caption>
-          <Card>{'Card content'}</Card>
-          <Card>{'Card content'}</Card>
-          <Card>{'Card content'}</Card>
-        </Layout.Body>
-      </Layout>
-    </div>
-  )
-}
-
-export default LayoutKanbanResponsive

data/app/pb_kits/playbook/pb_layout/docs/_layout_masonry.html.erb

@@ -1,48 +0,0 @@
-<%= pb_rails("layout", props: {layout: "masonry"}) do %>
-  <%= pb_rails("layout/body") do %>
-
-    <%= pb_rails("layout/item") do %>
-      <%= pb_rails("image", props: { url: "https://unsplash.it/500/400/?image=634" }) %>
-    <% end %>
-    <%= pb_rails("layout/item") do %>
-      <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1611932084285-4fc50bfb7102?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
-    <% end %>
-    <%= pb_rails("layout/item", props: { size: "md" }) do %>
-      <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1611934529218-748707e1d066?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2307&q=80" }) %>
-    <% end %>
-    <%= pb_rails("layout/item", props: { size: "md" }) do %>
-      <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1611927263897-c2f1156bc760?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyMHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
-    <% end %>
-    <%= pb_rails("layout/item", props: { size: "lg"}) do %>
-      <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1606851685679-2a35cfdd62d6?ixid=MXwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
-    <% end %>
-    <%= pb_rails("layout/item", props: { size: "md" }) do %>
-      <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1612144349227-1555ef8f2467?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzM3x8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
-    <% end %>
-    <%= pb_rails("layout/item") do %>
-      <%= pb_rails("image", props: { url: "https://unsplash.it/500/400/?image=634" }) %>
-    <% end %>
-    <%= pb_rails("layout/item") do %>
-      <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1611932084285-4fc50bfb7102?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
-    <% end %>
-    <%= pb_rails("layout/item", props: { size: "md" }) do %>
-      <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1611934529218-748707e1d066?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2307&q=80" }) %>
-    <% end %>
-    <%= pb_rails("layout/item") do %>
-      <%= pb_rails("image", props: { url: "https://unsplash.it/500/400/?image=634" }) %>
-    <% end %>
-    <%= pb_rails("layout/item", props: { size: "md" }) do %>
-      <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1606851685679-2a35cfdd62d6?ixid=MXwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
-    <% end %>
-    <%= pb_rails("layout/item") do %>
-      <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1612123912968-5f6e964e8ea5?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0N3x8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
-    <% end %>
-    <%= pb_rails("layout/item") do %>
-      <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1612092172331-d788286028d5?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3Mnx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
-    <% end %>
-    <%= pb_rails("layout/item") do %>
-      <%= pb_rails("image", props: { url: "https://unsplash.it/500/400/?image=634" }) %>
-    <% end %>
-
-  <% end %>
-<% end %>

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

@@ -1,64 +0,0 @@
-import React from 'react'
-
-import Layout from '../_layout'
-
-import Image from '../../pb_image/_image'
-
-const LayoutMasonry = (props) => {
-  return (
-    <Layout
-        layout="masonry"
-        {...props}
-    >
-      <Layout.Body>
-        <Layout.Item>
-          <Image
-              url="https://images.unsplash.com/photo-1611932084285-4fc50bfb7102?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
-          />
-        </Layout.Item>
-        <Layout.Item size="md">
-          <Image
-              url="https://images.unsplash.com/photo-1611934529218-748707e1d066?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2307&q=80"
-          />
-        </Layout.Item>
-        <Layout.Item>
-          <Image
-              url="https://images.unsplash.com/photo-1611927263897-c2f1156bc760?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyMHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
-          />
-        </Layout.Item>
-        <Layout.Item size="lg">
-          <Image
-              url="https://images.unsplash.com/photo-1611927263897-c2f1156bc760?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyMHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
-          />
-        </Layout.Item>
-        <Layout.Item>
-          <Image
-              url="https://images.unsplash.com/photo-1606851685679-2a35cfdd62d6?ixid=MXwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
-          />
-        </Layout.Item>
-        <Layout.Item size="md">
-          <Image
-              url="https://images.unsplash.com/photo-1612092172331-d788286028d5?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3Mnx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
-          />
-        </Layout.Item>
-        <Layout.Item>
-          <Image
-              url="https://images.unsplash.com/photo-1612123912968-5f6e964e8ea5?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0N3x8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
-          />
-        </Layout.Item>
-        <Layout.Item size="md">
-          <Image
-              url="https://images.unsplash.com/photo-1606851685679-2a35cfdd62d6?ixid=MXwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
-          />
-        </Layout.Item>
-        <Layout.Item>
-          <Image
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </Layout.Item>
-      </Layout.Body>
-    </Layout>
-  )
-}
-
-export default LayoutMasonry

data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes.html.erb

@@ -1,32 +0,0 @@
-<%= pb_rails("layout", props: {position: "left", size: "xs", collapse: "xs"}) do %>
-  <%= pb_rails("layout/sidebar") do %> Side <% end %>
-  <%= pb_rails("layout/body") do %> Body <% end %>
-<% end %>
-
-<br/><br/>
-
-<%= pb_rails("layout", props: {position: "left", size: "sm", collapse: "sm"}) do %>
-  <%= pb_rails("layout/sidebar") do %> Side <% end %>
-  <%= pb_rails("layout/body") do %> Body <% end %>
-<% end %>
-
-<br/><br/>
-
-<%= pb_rails("layout", props: {position: "left", size: "md", collapse: "sm"}) do %>
-  <%= pb_rails("layout/sidebar") do %> Side <% end %>
-  <%= pb_rails("layout/body") do %> Body <% end %>
-<% end %>
-
-<br/><br/>
-
-<%= pb_rails("layout", props: {position: "left", size: "lg", collapse: "sm"}) do %>
-  <%= pb_rails("layout/sidebar") do %> Side <% end %>
-  <%= pb_rails("layout/body") do %> Body <% end %>
-<% end %>
-
-<br/><br/>
-
-<%= pb_rails("layout", props: {position: "left", size: "xl", collapse: "sm"}) do %>
-  <%= pb_rails("layout/sidebar") do %> Side <% end %>
-  <%= pb_rails("layout/body") do %> Body <% end %>
-<% end %>

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

@@ -1,93 +0,0 @@
-import React from 'react'
-
-import Layout from '../_layout'
-
-const LayoutSizes = (props) => {
-  return (
-    <div>
-      <Layout
-          collapse="xs"
-          position="left"
-          size="xs"
-          {...props}
-      >
-        <Layout.Side>
-          {'Side'}
-        </Layout.Side>
-        <Layout.Body>
-          {'Body'}
-        </Layout.Body>
-      </Layout>
-
-      <br />
-      <br />
-
-      <Layout
-          collapse="xs"
-          position="left"
-          size="sm"
-          {...props}
-      >
-        <Layout.Side>
-          {'Side'}
-        </Layout.Side>
-        <Layout.Body>
-          {'Body'}
-        </Layout.Body>
-      </Layout>
-
-      <br />
-      <br />
-
-      <Layout
-          collapse="xs"
-          position="left"
-          size="md"
-          {...props}
-      >
-        <Layout.Side>
-          {'Side'}
-        </Layout.Side>
-        <Layout.Body>
-          {'Body'}
-        </Layout.Body>
-      </Layout>
-
-      <br />
-      <br />
-
-      <Layout
-          collapse="xs"
-          position="left"
-          size="lg"
-          {...props}
-      >
-        <Layout.Side>
-          {'Side'}
-        </Layout.Side>
-        <Layout.Body>
-          {'Body'}
-        </Layout.Body>
-      </Layout>
-
-      <br />
-      <br />
-
-      <Layout
-          collapse="xs"
-          position="left"
-          size="xl"
-          {...props}
-      >
-        <Layout.Side>
-          {'Side'}
-        </Layout.Side>
-        <Layout.Body>
-          {'Body'}
-        </Layout.Body>
-      </Layout>
-    </div>
-  )
-}
-
-export default LayoutSizes

data/app/pb_kits/playbook/pb_layout/docs/_layout_transparent.html.erb

@@ -1,8 +0,0 @@
-<%= pb_rails("layout", props: {position: "left", size: "xs", collapse: "sm", transparent: true}) do %>
-  <%= pb_rails("layout/sidebar") do %>
-    <%= pb_rails("body", props: { text: "Side" }) %>
-  <% end %>
-  <%= pb_rails("layout/body") do %>
-    <%= pb_rails("body", props: { text: "Body" }) %>
-  <% end %>
-<% end %>

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

@@ -1,26 +0,0 @@
-import React from 'react'
-
-import Layout from '../_layout'
-
-const LayoutTransparent = (props) => {
-  return (
-    <div>
-      <Layout
-          collapse="sm"
-          position="left"
-          size="xs"
-          transparent
-          {...props}
-      >
-        <Layout.Side>
-          {'Side'}
-        </Layout.Side>
-        <Layout.Body>
-          {'Body'}
-        </Layout.Body>
-      </Layout>
-    </div>
-  )
-}
-
-export default LayoutTransparent

data/app/pb_kits/playbook/pb_layout/docs/example.yml

@@ -1,21 +0,0 @@
-examples:
-  rails:
-  - layout_colors: Colors
-  - layout_transparent: Transparent
-  - layout_sizes: Sizes
-  - layout_collection: Collection Layout
-  - layout_collection_detail: Collection Detail Layout
-  - layout_kanban: Kanban Layout
-  - layout_content: Content Layout
-  - layout_masonry: Masonry Layout
-
-  react:
-  - layout_colors: Colors
-  - layout_transparent: Transparent
-  - layout_sizes: Sizes
-  - layout_collection: Collection Layout
-  - layout_collection_detail: Collection Detail Layout
-  - layout_kanban: Kanban Layout
-  - layout_content: Content Layout
-  - layout_masonry: Masonry Layout
-

data/app/pb_kits/playbook/pb_layout/docs/index.js

@@ -1,10 +0,0 @@
-export { default as LayoutColors } from './_layout_colors.jsx'
-export { default as LayoutTransparent } from './_layout_transparent.jsx'
-export { default as LayoutSizes } from './_layout_sizes.jsx'
-export { default as LayoutCollection } from './_layout_collection.jsx'
-export { default as LayoutKanban } from './_layout_kanban.jsx'
-export { default as LayoutKanbanResponsive } from './_layout_kanban_responsive.jsx'
-export { default as LayoutCollectionDetail } from './_layout_collection_detail.jsx'
-export { default as LayoutContent } from './_layout_content.jsx'
-export { default as LayoutMasonry } from './_layout_masonry.jsx'
-

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

@@ -1 +0,0 @@
-A key used to compare the variables and their value in any given graph.

data/app/pb_kits/playbook/pb_legend/docs/_footer.md

@@ -1,2 +0,0 @@
-### Things to Avoid
-Do not use as bullet points in a list.

data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.html.erb

@@ -1,4 +0,0 @@
-<%= pb_rails("legend", props: { color: "data_8", text: "Data 8" }) %>
-<%= pb_rails("legend", props: { color: "warning", text: "Warning" }) %>
-<%= pb_rails("legend", props: { color: "product_6_highlight", text: "Product 6 (highlight)" }) %>
-<%= pb_rails("legend", props: { color: "category_7", text: "Category 7" }) %>

data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import { Legend } from '../..'
-
-const LegendColors = (props) => (
-  <div>
-    <Legend
-        color="data_8"
-        text="Data 8"
-        {...props}
-    />
-    <Legend
-        color="warning"
-        text="Warning"
-        {...props}
-    />
-    <Legend
-        color="product_6_highlight"
-        text="Product 6 (highlight)"
-        {...props}
-    />
-    <Legend
-        color="category_7"
-        text="Category 7"
-        {...props}
-    />
-  </div>
-)
-
-export default LegendColors

data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.md

@@ -1,2 +0,0 @@
-By default legend kit uses `data_1` color.
-Pass the color prop and use any desired value from `$data_colors`, `$status_colors`, `$product_colors` and `$category_colors` list.

data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.html.erb

@@ -1,3 +0,0 @@
-<%= pb_rails("legend", props: { color: "#dc418a", text: "Custom Legend Color 1" }) %>
-<%= pb_rails("legend", props: { color: "#3ef0b8", text: "Custom Legend Color 2" }) %>
-<%= pb_rails("legend", props: { color: "#ab8b04", text: "Custom Legend Color 3" }) %>

data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import { Legend } from '../..'
-
-const LegendCustomColors = (props) => (
-  <div>
-    <Legend
-        color="#dc418a"
-        text="Custom Legend Color 1"
-        {...props}
-    />
-    <Legend
-        color="#3ef0b8"
-        text="Custom Legend Color 2"
-        {...props}
-    />
-    <Legend
-        color="#ab8b04"
-        text="Custom Legend Color 3"
-        {...props}
-    />
-  </div>
-)
-
-export default LegendCustomColors

data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.md

@@ -1 +0,0 @@
-The color prop also allows for use of custom colors passed in as HEX codes. 

data/app/pb_kits/playbook/pb_legend/docs/_legend_default.html.erb

@@ -1,5 +0,0 @@
-<% labels = %W[Windows Doors Roofing Siding Solar Gutters Insulation Other] %>
-
-<% (0..7).each do |n, i| %>
-   <%= pb_rails("legend", props: { color: "data_#{n + 1}", text: "#{labels[n]}" }) %>
-<% end %>

data/app/pb_kits/playbook/pb_legend/docs/_legend_default.jsx

@@ -1,22 +0,0 @@
-import React from 'react'
-
-import Legend from '../_legend'
-
-const products = ['Windows', 'Doors', 'Roofing', 'Siding', 'Solar', 'Gutters', 'Insulation', 'Other']
-
-const LegendDefault = (props) => (
-  <div>
-    {
-      products.map((product, i) => (
-        <Legend
-            color={`data_${i + 1}`}
-            key={`legend_${i + 1}`}
-            text={product}
-            {...props}
-        />
-      ))
-    }
-  </div>
-)
-
-export default LegendDefault

data/app/pb_kits/playbook/pb_legend/docs/_legend_prefix.html.erb

@@ -1 +0,0 @@
-<%= pb_rails("legend", props: { color: "data_3", prefix_text: "10", text: "Windows" }) %>

data/app/pb_kits/playbook/pb_legend/docs/_legend_prefix.jsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import { Legend } from '../..'
-
-const LegendPrefix = (props) => (
-  <div>
-    <Legend
-        color="data_3"
-        prefixText="10"
-        text="Windows"
-        {...props}
-    />
-  </div>
-)
-
-export default LegendPrefix

data/app/pb_kits/playbook/pb_legend/docs/example.yml

@@ -1,13 +0,0 @@
-examples:
-
-  rails:
-  - legend_default: Default
-  - legend_prefix: With Prefix Text
-  - legend_colors: Colors
-  - legend_custom_colors: Custom Colors
-
-  react:
-  - legend_default: Default
-  - legend_prefix: With Prefix Text
-  - legend_colors: Colors
-  - legend_custom_colors: Custom Colors

data/app/pb_kits/playbook/pb_legend/docs/index.js

@@ -1,4 +0,0 @@
-export { default as LegendDefault } from './_legend_default.jsx'
-export { default as LegendPrefix } from './_legend_prefix.jsx'
-export { default as LegendColors } from './_legend_colors'
-export { default as LegendCustomColors} from './_legend_custom_colors'

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

@@ -1 +0,0 @@
-The Lightbox kit is a popup window overlay that will appear on top of your webpage and cover the entirety of the screen. It can be used to display a group of images that the user can swipe through, zoom into and view. The button in the top left of the header can be used to close the overlay and exit back to your webpage. Click the images in the examples below to see Lightbox in action.

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx

@@ -1,74 +0,0 @@
-/* @flow */
-/* eslint-disable jsx-control-statements/jsx-use-if-tag */
-import React, { useState } from 'react'
-import { Flex, Image } from '../../'
-import Lightbox from '../_lightbox.tsx'
-
-const LightboxCompoundComponent = (props) => {
-  const photos = [
-    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
-    'https://images.unsplash.com/photo-1501045337096-542a73dafa4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2052&q=80',
-    'https://images.unsplash.com/photo-1563693998336-93c10e5d8f91?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80,',
-  ]
-  const [selectedPhoto, setSelectedPhoto] = useState(0)
-  const [showLightbox, toggleShowLightbox] = useState(false)
-
-  const handleCloseLightbox = () => {
-    toggleShowLightbox(!showLightbox)
-    setSelectedPhoto(null)
-  }
-
-  const onPhotoClick = (photo) => {
-    toggleShowLightbox(!showLightbox)
-    setSelectedPhoto(photo)
-  }
-
-  const exampleStyles = {
-    width: "100%",
-    overflow: "auto"
-  }
-
-  return (
-    <>
-      <div>
-        {showLightbox ? (
-          <Lightbox
-              description='Description Content Goes Here.'
-              initialPhoto={selectedPhoto}
-              onClose={handleCloseLightbox}
-              photos={photos}
-              title='Windows, Sidings, & Gutters'
-              {...props}
-          />
-        ) : (
-          <div className="PhotoViewer"
-              style={exampleStyles}
-          >
-            <Flex>
-              {photos.map((photo, index) => {
-                return (
-                  <div
-                      key={index}
-                      onClick={() => onPhotoClick(index)}
-                  >
-                    <Image
-                        cursor="pointer"
-                        marginRight="xl"
-                        rounded
-                        size="lg"
-                        url={photo}
-                    />
-
-                    <div className="overlay" />
-                  </div>
-                )
-              })}
-            </Flex>
-          </div>
-        )}
-      </div>
-    </>
-  )
-}
-
-export default LightboxCompoundComponent

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.md

@@ -1 +0,0 @@
-`title` and `description` are optional props that can be passed to the kit if needed. Each of these props can take a string OR a custom component. This example highlights what the kit will look like when only strings are passed as `title` and `description`.