RubyGems - playbook_ui - Versions diffs - 6.2.0 → 6.4.1 - Mend

playbook_ui 6.2.0 → 6.4.1

Files changed (252) hide show

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

@@ -0,0 +1,102 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  Flex,
+  PbReactPopover,
+} from '../..'
+const PopoverCloseDark = () => {
+  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}
+      >
+        {'Click on me!'}
+      </PbReactPopover>
+      <PbReactPopover
+          closeOnClick="outside"
+          offset
+          placement="top"
+          reference={outsidePopoverTrigger}
+          shouldClosePopover={handleOutsideShouldClosePopover}
+          show={showOutsidePopover}
+      >
+        {'Click anywhere but me!'}
+      </PbReactPopover>
+      <PbReactPopover
+          closeOnClick="any"
+          offset
+          placement="right"
+          reference={anyPopoverTrigger}
+          shouldClosePopover={handleAnyShouldClosePopover}
+          show={showAnyPopover}
+      >
+        {'Click anything!'}
+      </PbReactPopover>
+    </Flex>
+  )
+}
+export default PopoverCloseDark

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

@@ -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 ADDED

@@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+import {
+  Body,
+  CircleIconButton,
+  Flex,
+  PbReactPopover,
+} from '../..'
+const PopoverDark = () => {
+  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"
+    >
+      <Body
+          dark
+          text="Click info for more details"
+      />
+      &nbsp;
+      <PbReactPopover
+          dark
+          offset
+          placement="top"
+          reference={popoverReference}
+          show={showPopover}
+      >
+        {'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_default.html.erb CHANGED

@@ -1,4 +1,5 @@
 <%= pb_rails("flex", props: {
+    dark: true,
     orientation: "row",
     vertical: "center"
     }) do %>

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

@@ -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 ADDED

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  Icon,
+  List,
+  ListItem,
+  PbReactPopover,
+} from '../..'
+const PopoverWithButton = () => {
+  const [showPopover, setShowPopover] = useState(false)
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
+  }
+  const popoverReference = (
+    <Button
+        dark
+        onClick={handleTogglePopover}
+        variant="primary"
+    >
+      {'Filter By'}
+      <Icon
+          dark
+          fixedWidth
+          icon="angle-down"
+      />
+    </Button>
+  )
+  return (
+    <PbReactPopover
+        dark
+        padding="none"
+        placement="bottom"
+        reference={popoverReference}
+        show={showPopover}
+    >
+      <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 ADDED

@@ -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 ADDED

@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+import {
+  Body,
+  Button,
+  PbReactPopover,
+  Title,
+} from '../..'
+const PopoverScrollHeightDark = () => {
+  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}
+    >
+      <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."
+      />
+      <Title
+          dark
+          size={4}
+          text="- Abraham Lincoln"
+      />
+    </PbReactPopover>
+  )
+}
+export default PopoverScrollHeightDark

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

@@ -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 ADDED

@@ -0,0 +1,52 @@
+import React, { useState } from 'react'
+import {
+  Body,
+  Button,
+  PbReactPopover,
+} from '../..'
+const PopoverZIndexDark = () => {
+  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"
+        />
+      </div>
+      <PbReactPopover
+          closeOnClick="outside"
+          offset
+          placement="top"
+          reference={popoverTrigger}
+          shouldClosePopover={handleShouldClosePopover}
+          show={showPopover}
+          zIndex={3}
+      >
+        {'I have a custom z-index of 3'}
+      </PbReactPopover>
+    </>
+  )
+}
+export default PopoverZIndexDark

data/app/pb_kits/playbook/pb_popover/docs/example.yml CHANGED

@@ -5,6 +5,11 @@ examples:
     - popover_close: Close Options
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
+    - popover_dark: Dark
+    - popover_list_dark: List Dark
+    - popover_close_dark: Close Dark
+    - popover_z_index_dark: Z-Index Dark
+    - popover_scroll_height_dark: Scroll and Height Settings Dark
   react:
     - popover_default: Default
@@ -12,6 +17,11 @@ examples:
     - popover_close: Close Options
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
+    - popover_dark: Dark
+    - popover_list_dark: List Dark
+    - popover_close_dark: Close Dark
+    - popover_z_index_dark: Z-Index Dark
+    - popover_scroll_height_dark: Scroll and Height Settings Dark

data/app/pb_kits/playbook/pb_popover/docs/index.js CHANGED

@@ -3,3 +3,8 @@ export { default as PopoverList } from './_popover_list.jsx'
 export { default as PopoverClose } from './_popover_close.jsx'
 export { default as PopoverZIndex } from './_popover_z_index.jsx'
 export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
+export { default as PopoverDark } from './_popover_dark.jsx'
+export { default as PopoverListDark } from './_popover_list_dark.jsx'
+export { default as PopoverCloseDark } from './_popover_close_dark.jsx'
+export { default as PopoverZIndexDark } from './_popover_z_index_dark.jsx'
+export { default as PopoverScrollHeightDark } from './_popover_scroll_height_dark.jsx'

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.html.erb CHANGED

@@ -16,5 +16,5 @@
         <span class="pb_progress_pill<%= object.active_step(step) %><%= object.dark_pill %>"></span>
       <% end %>
     </div>
 <% end %>

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx CHANGED

@@ -37,7 +37,7 @@ const showSteps = (steps, active, dark) => {
 const ProgressPill = ({ active, dark, step }: ProgressPillProps) => (
   <div
       className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${
-      dark ? '_dark' : ''
+      dark ? ' dark' : ''
     }`}
       key={step}
   />
@@ -55,11 +55,10 @@ const ProgressPills = (props: ProgressPillsProps) => {
     value,
     dark = false,
   } = props
-  const darkClass = dark ? '_dark' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_progress_pills_kit', darkClass), className, globalProps(props))
+  const classes = classnames(buildCss('pb_progress_pills_kit'), globalProps(props), className)
   return (
     <div