playbook_ui 7.14.0.pre.alpha1 → 7.14.0

data/app/pb_kits/playbook/pb_popover/docs/_popover_close_dark.html.erb

@@ -0,0 +1,43 @@
+<%= pb_rails("flex", props: {dark: true, classname: "flex-container", spacing: "between"}) do %>
+  <span>
+    <%= pb_rails("button", props: { dark: true, text: "Click Inside", variant: "primary", id: 'inside-popover-2' }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "inside",
+      trigger_element_id: "inside-popover-2",
+      tooltip_id: "inside-tooltip-2",
+      position: 'bottom',
+      offset: true
+    }) do %>
+      Click on me!
+    <% end %>
+  </span>
+  <span>
+    <%= pb_rails("button", props: { text: "Click Outside", variant: "primary", id: 'outside-popover-2' }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "outside-popover-2",
+      tooltip_id: "outside-tooltip-1",
+      position: 'left',
+      offset: true
+    }) do %>
+        Click anywhere but me!
+      <% end %>
+  </span>
+  <span>
+    <%= pb_rails("button", props: {
+      dark: true, 
+      text: "Click Anywhere",
+      variant: "primary",
+      id: 'any-popover-2'
+    }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "any",
+      trigger_element_id: "any-popover-2",
+      tooltip_id: "any-tooltip-3",
+      position: 'top',
+      offset: true
+    }) do %>
+      Click anything!
+    <% end %>
+  </span>
+<% end %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_close_dark.jsx

@@ -0,0 +1,105 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  Flex,
+  PbReactPopover,
+} from '../..'
+
+const PopoverCloseDark = (props) => {
+  const [showInsidePopover, setInsideShowPopover] = useState(false)
+  const [showOutsidePopover, setOutsideShowPopover] = useState(false)
+  const [showAnyPopover, setAnyShowPopover] = useState(false)
+
+  const handleInsideShouldClosePopover = (shouldClosePopover) => {
+    setInsideShowPopover(!shouldClosePopover)
+  }
+
+  const handleInsideTogglePopover = () => {
+    setInsideShowPopover(!showInsidePopover)
+  }
+
+  const handleOutsideShouldClosePopover = (shouldClosePopover) => {
+    setOutsideShowPopover(!shouldClosePopover)
+  }
+
+  const handleOutsideTogglePopover = () => {
+    setOutsideShowPopover(!showOutsidePopover)
+  }
+
+  const handleAnyShouldClosePopover = (shouldClosePopover) => {
+    setAnyShowPopover(!shouldClosePopover)
+  }
+
+  const handleAnyTogglePopover = () => {
+    setAnyShowPopover(!showOutsidePopover)
+  }
+
+  const insidePopoverTrigger = (
+    <Button
+        dark
+        onClick={handleInsideTogglePopover}
+        text="Click Inside"
+        variant="primary"
+    />
+  )
+
+  const outsidePopoverTrigger = (
+    <Button
+        dark
+        onClick={handleOutsideTogglePopover}
+        text="Click Outside"
+        variant="primary"
+    />
+  )
+
+  const anyPopoverTrigger = (
+    <Button
+        dark
+        onClick={handleAnyTogglePopover}
+        text="Click Anywhere"
+        variant="primary"
+    />
+  )
+
+  return (
+    <Flex spacing="between">
+      <PbReactPopover
+          closeOnClick="inside"
+          offset
+          placement="bottom"
+          reference={insidePopoverTrigger}
+          shouldClosePopover={handleInsideShouldClosePopover}
+          show={showInsidePopover}
+          {...props}
+      >
+        {'Click on me!'}
+      </PbReactPopover>
+
+      <PbReactPopover
+          closeOnClick="outside"
+          offset
+          placement="top"
+          reference={outsidePopoverTrigger}
+          shouldClosePopover={handleOutsideShouldClosePopover}
+          show={showOutsidePopover}
+          {...props}
+      >
+        {'Click anywhere but me!'}
+      </PbReactPopover>
+
+      <PbReactPopover
+          closeOnClick="any"
+          offset
+          placement="right"
+          reference={anyPopoverTrigger}
+          shouldClosePopover={handleAnyShouldClosePopover}
+          show={showAnyPopover}
+          {...props}
+      >
+        {'Click anything!'}
+      </PbReactPopover>
+    </Flex>
+  )
+}
+
+export default PopoverCloseDark

data/app/pb_kits/playbook/pb_popover/docs/_popover_dark.html.erb

@@ -0,0 +1,25 @@
+<%= pb_rails("flex", props: {
+    dark: true,
+    orientation: "row",
+    vertical: "center"
+    }) do %>
+    <%= pb_rails("body", props: { 
+        dark: true, 
+        text: "Click info for more details" 
+    }) %>
+    &nbsp;
+    <%= pb_rails("circle_icon_button", props: {
+        dark: true,
+        variant: "secondary",
+        icon: "info",
+        id: "regular-popover-5"
+    }) %>
+    <%= pb_rails("popover", props: {
+        trigger_element_id: "regular-popover-5",
+        tooltip_id: "tooltip-5",
+        offset: true,
+        position: "top",
+    }) do %>
+        I'm a popover. I can show content of any size.
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_dark.jsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+import {
+  Body,
+  CircleIconButton,
+  Flex,
+  PbReactPopover,
+} from '../..'
+
+const PopoverDark = (props) => {
+  const [showPopover, setShowPopover] = useState(false)
+
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
+  }
+  const popoverReference = (
+    <CircleIconButton
+        dark
+        icon="info"
+        onClick={handleTogglePopover}
+        variant="secondary"
+    />
+  )
+
+  return (
+    <Flex
+        dark
+        orientation="row"
+        vertical="center"
+        {...props}
+    >
+      <Body
+          dark
+          text="Click info for more details"
+          {...props}
+      />
+      &nbsp;
+      <PbReactPopover
+          dark
+          offset
+          placement="top"
+          reference={popoverReference}
+          show={showPopover}
+          {...props}
+      >
+        {'I\'m a popover. I can show content of any size.'}
+      </PbReactPopover>
+    </Flex>
+  )
+}
+
+export default PopoverDark

data/app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.html.erb

@@ -0,0 +1,13 @@
+<%= pb_rails("button", props: { dark: true, variant: "primary", id: 'list-5' }) do %>
+    Filter By
+    <%= pb_rails("icon", props: { dark: true, icon: "angle-down"}) %>
+<% end %>
+<%= pb_rails("popover", props: {trigger_element_id: "list-5", tooltip_id: "list-tooltip-5", position: 'bottom', padding: "none"}) do %>
+    <%= pb_rails("list", props: {ordered: false, dark: true, borderless: false, xpadding: true}) do %>
+        <%= pb_rails("list/item") do %><a>Popularity</a><% end %>
+        <%= pb_rails("list/item") do %><a>Title</a><% end %>
+        <%= pb_rails("list/item") do %><a>Duration</a><% end %>
+        <%= pb_rails("list/item") do %><a>Date Started</a><% end %>
+        <%= pb_rails("list/item") do %><a>Date Ended </a><% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  Icon,
+  List,
+  ListItem,
+  PbReactPopover,
+} from '../..'
+
+const PopoverWithButton = (props) => {
+  const [showPopover, setShowPopover] = useState(false)
+
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
+  }
+
+  const popoverReference = (
+    <Button
+        dark
+        onClick={handleTogglePopover}
+        variant="primary"
+        {...props}
+    >
+      {'Filter By'}
+      <Icon
+          dark
+          fixedWidth
+          icon="angle-down"
+          {...props}
+      />
+    </Button>
+  )
+
+  return (
+    <PbReactPopover
+        dark
+        padding="none"
+        placement="bottom"
+        reference={popoverReference}
+        show={showPopover}
+        {...props}
+    >
+      <List xpadding>
+        <ListItem><a>{'Popularity'}</a></ListItem>
+        <ListItem><a>{'Title'}</a></ListItem>
+        <ListItem><a>{'Duration'}</a></ListItem>
+        <ListItem><a>{'Date Started'}</a></ListItem>
+        <ListItem><a>{'Date Ended'}</a></ListItem>
+      </List>
+    </PbReactPopover>
+  )
+}
+
+export default PopoverWithButton

data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height_dark.html.erb

@@ -0,0 +1,25 @@
+<%= pb_rails("button", props: { dark: true, variant: "primary", id: 'scroll-height-5', text: "Click Me" }) %>
+<%= pb_rails("popover", props: {
+    trigger_element_id: "scroll-height-5",
+    tooltip_id: "scroll-height-5",
+    position: 'top',
+    close_on_click: "any",
+    max_height: "150px",
+    max_width: "240px",
+    offset: true
+    }) do %>
+    <%= pb_rails("body", props: {
+        margin_bottom: "sm",
+        text: "So many people live within unhappy circumstances and yet will
+          not take the initiative to change their situation because they are
+          conditioned to a life of security, conformity, and conservation, all of
+          which may appear to give one peace of mind, but in reality, nothing is
+          more damaging to the adventurous spirit."
+    }) %>
+    <%= pb_rails("title", props: {
+        dark:true,
+        size: 4,
+        text: "- Christopher McCandless"
+    }) %>
+<% end %>
+      

data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height_dark.jsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react'
+import {
+  Body,
+  Button,
+  PbReactPopover,
+  Title,
+} from '../..'
+
+const PopoverScrollHeightDark = (props) => {
+  const [showPopover, setShowPopover] = useState(false)
+
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
+  }
+
+  const handleShouldClosePopover = (shouldClosePopover) => {
+    setShowPopover(!shouldClosePopover)
+  }
+
+  const popoverTrigger = (
+    <Button
+        dark
+        onClick={handleTogglePopover}
+        text="Click Me"
+        variant="primary"
+    />
+  )
+
+  return (
+    <PbReactPopover
+        closeOnClick="any"
+        maxHeight="150px"
+        maxWidth="240px"
+        offset
+        placement="top"
+        reference={popoverTrigger}
+        shouldClosePopover={handleShouldClosePopover}
+        show={showPopover}
+        {...props}
+    >
+      <Body
+          marginBottom="sm"
+          text=" Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this."
+          {...props}
+      />
+      <Title
+          dark
+          size={4}
+          text="- Abraham Lincoln"
+          {...props}
+      />
+
+    </PbReactPopover>
+  )
+}
+
+export default PopoverScrollHeightDark

data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index_dark.html.erb

@@ -0,0 +1,14 @@
+<div style="position: relative; z-index: 2">
+    <%= pb_rails("body", props: {text: "I've got a z-index of 2", margin_bottom: "md"}) %>
+</div>
+<%= pb_rails("button", props: { variant: "primary", id: 'tooltip-z-index-5', text: "Click Me", }) %>
+<%= pb_rails("popover", props: {
+    trigger_element_id: "tooltip-z-index-5",
+    tooltip_id: "tooltip-z-index-5",
+    position: 'top',
+    z_index: "3",
+    offset: true
+}) do %>
+    I've got a z-index of 3
+<% end %>
+

data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index_dark.jsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+import {
+  Body,
+  Button,
+  PbReactPopover,
+} from '../..'
+
+const PopoverZIndexDark = (props) => {
+  const [showPopover, setShowPopover] = useState(false)
+
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
+  }
+
+  const handleShouldClosePopover = (shouldClosePopover) => {
+    setShowPopover(!shouldClosePopover)
+  }
+
+  const popoverTrigger = (
+    <Button
+        dark
+        onClick={handleTogglePopover}
+        text="Click Me"
+        variant="primary"
+    />
+  )
+
+  return (
+    <>
+      <div style={{ position: 'relative', zIndex: 2 }}>
+        <Body
+            dark
+            marginBottom="md"
+            text="I've got a z-index of 2"
+            {...props}
+        />
+      </div>
+      <PbReactPopover
+          closeOnClick="outside"
+          offset
+          placement="top"
+          reference={popoverTrigger}
+          shouldClosePopover={handleShouldClosePopover}
+          show={showPopover}
+          zIndex={3}
+          {...props}
+      >
+        {'I have a custom z-index of 3'}
+      </PbReactPopover>
+    </>
+  )
+}
+
+export default PopoverZIndexDark