playbook_ui 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.title2665

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

@@ -0,0 +1 @@
+A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color here: https://playbook.powerapp.cloud/utilities

data/app/pb_kits/playbook/pb_pill/docs/_pill_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("pill", props: { text: "Default" }) %>

data/app/pb_kits/playbook/pb_pill/docs/_pill_default.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import Pill from '../_pill'
+
+const PillDefault = (props) => {
+  return (
+    <div>
+      <Pill
+          text="default"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default PillDefault

data/app/pb_kits/playbook/pb_pill/docs/_pill_example.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("pill", props: { text_transform: "none" , text: "Success" , variant: "success" }) %>

data/app/pb_kits/playbook/pb_pill/docs/_pill_example.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import Pill from '../_pill'
+
+const PillExample = (props) => {
+  return (
+    <div>
+      <Pill
+          text="Success"
+          textTransform="none"
+          variant="success"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default PillExample

data/app/pb_kits/playbook/pb_pill/docs/_pill_example.md

@@ -0,0 +1 @@
+Pass `textTransform = "none"` prop and the text will remain without modification.

data/app/pb_kits/playbook/pb_pill/docs/_pill_variants.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("pill", props: { text: "success" , variant: "success" }) %>
+<%= pb_rails("pill", props: { text: "error" , variant: "error" }) %>
+<%= pb_rails("pill", props: { text: "warning" , variant: "warning" }) %>
+<%= pb_rails("pill", props: { text: "info" , variant: "info" }) %>
+<%= pb_rails("pill", props: { text: "neutral" , variant: "neutral" }) %>
+<%= pb_rails("pill", props: { text: "primary" , variant: "primary" }) %>

data/app/pb_kits/playbook/pb_pill/docs/_pill_variants.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import Pill from '../_pill'
+
+const PillVariants = (props) => {
+  return (
+    <div>
+      <Pill
+          text="success"
+          variant="success"
+          {...props}
+      />
+
+      <Pill
+          text="error"
+          variant="error"
+          {...props}
+      />
+
+      <Pill
+          text="warning"
+          variant="warning"
+          {...props}
+      />
+
+      <Pill
+          text="info"
+          variant="info"
+          {...props}
+      />
+
+      <Pill
+          text="neutral"
+          variant="neutral"
+      />
+
+      <Pill
+          text="primary"
+          variant="primary"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default PillVariants

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

@@ -0,0 +1,13 @@
+examples:
+  
+  rails:
+  - pill_default: Default
+  - pill_variants: Variants
+  - pill_example: Example
+ 
+  
+  
+  react:
+  - pill_default: Default
+  - pill_variants: Variants
+  - pill_example: Example

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

@@ -0,0 +1,3 @@
+export { default as PillDefault } from './_pill_default.jsx'
+export { default as PillVariants } from './_pill_variants.jsx'
+export { default as PillExample } from './_pill_example.jsx'

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

@@ -0,0 +1,13 @@
+A `popover` is a way to toggle content on top of other content. It can be used for small texts, small forms, or even dropdowns. By default, popover will toggle open/closed by simply clicking the trigger element.
+
+### Enhancements
+
+In addition, you may also choose to enable enhanced functionality so that the popover may be toggled by clicking outside of the "trigger element" and/or popover itself.
+
+#### Usecase #1 - Close on click into popover content
+
+You are building a single page application where clicking into the popover itself triggers some asynchronous actions which mutate the UI instantaneously. As a result, may want the popover to automatically close after a selection has been made from the popover contents.
+
+#### Usecase #2 - Close only on click outside of popover content
+
+You are building an custom in-page results filter list which is contained inside of the popover's content area. Since the filter list contains 5 filters, you may want to keep the popover open so that users may select multiple filters then only close the popover when users click outside of the popover.

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

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

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

@@ -0,0 +1,102 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  Flex,
+  PbReactPopover,
+} from '../..'
+
+const PopoverClose = (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(!showAnyPopover)
+  }
+
+  const insidePopoverTrigger = (
+    <Button
+        onClick={handleInsideTogglePopover}
+        text="Click Inside"
+        variant="secondary"
+    />
+  )
+
+  const outsidePopoverTrigger = (
+    <Button
+        onClick={handleOutsideTogglePopover}
+        text="Click Outside"
+        variant="secondary"
+    />
+  )
+
+  const anyPopoverTrigger = (
+    <Button
+        onClick={handleAnyTogglePopover}
+        text="Click Anywhere"
+        variant="secondary"
+    />
+  )
+
+  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 PopoverClose

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

@@ -0,0 +1,21 @@
+<%= pb_rails("flex", props: {
+    dark: true,
+    orientation: "row",
+    vertical: "center"
+    }) do %>
+    <%= pb_rails("body", props: { text: "Click info for more details" }) %>
+    &nbsp;
+    <%= pb_rails("circle_icon_button", props: {
+        variant: "secondary",
+        icon: "info",
+        id: "regular-popover-1"
+    }) %>
+    <%= pb_rails("popover", props: {
+        trigger_element_id: "regular-popover-1",
+        tooltip_id: "tooltip-1",
+        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_default.jsx

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

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

@@ -0,0 +1,35 @@
+<%= pb_rails("button", props: { variant: "secondary", id: 'list' }) do %>
+    <%= pb_rails("flex", props: {align: "center"}) do %>
+        Filter By 
+        <%= pb_rails("flex/flex_item", props: {margin_left: "xxs"}) do %>
+        <div id="arrow-icon" style="display: flex"></div>
+        <% end %>
+    <% end %>
+<% end %>
+<%= pb_rails("popover", props: {trigger_element_id: "list", tooltip_id: "list-tooltip", position: 'bottom', padding: "none"}) do %>
+    <%= pb_rails("list", props: {ordered: false, dark: false, 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 %>
+
+
+<script type="text/javascript">
+const button = document.querySelector("#list")
+let buttonClicked = false
+
+const arrowDiv = document.querySelector("#arrow-icon")
+arrowDiv.innerHTML = '<i class="far fa-angle-down"></i>'
+
+button.onclick = () => {
+    buttonClicked = !buttonClicked    
+    if (buttonClicked) {
+        arrowDiv.innerHTML = '<i class="far fa-angle-up"></i>'
+    } else {
+        arrowDiv.innerHTML = '<i class="far fa-angle-down"></i>'
+    }
+}
+</script>

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

@@ -0,0 +1,58 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  Icon,
+  List,
+  ListItem,
+  PbReactPopover,
+  Flex,
+} from '../..'
+
+const PopoverWithButton = (props) => {
+  const [showPopover, setShowPopover] = useState(false)
+
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
+  }
+
+  const popoverReference = (
+    <Button
+        onClick={handleTogglePopover}
+        variant="secondary"
+    >
+      <Flex align="center">
+        {"Filter By"}
+        <Flex
+            className={showPopover ? "fa-flip-vertical" : ""}
+            display="inline_flex"
+        >
+          <Icon 
+              fixedWidth 
+              icon="angle-down" 
+              margin-left="xxs" 
+          />
+        </Flex>
+      </Flex>
+    </Button>
+  )
+
+  return (
+    <PbReactPopover
+        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_list.md

@@ -0,0 +1 @@
+Notice `offset` is not set so the popover is flush with the content.

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

@@ -0,0 +1,24 @@
+<%= pb_rails("button", props: { variant: "secondary", id: 'scroll-height', text: "Click Me" }) %>
+<%= pb_rails("popover", props: {
+    trigger_element_id: "scroll-height",
+    tooltip_id: "scroll-height-1",
+    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: {
+        size: 4,
+        text: "- Christopher McCandless"
+    }) %>
+<% end %>
+      

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

@@ -0,0 +1,62 @@
+import React, { useState } from 'react'
+import {
+  Body,
+  Button,
+  PbReactPopover,
+  Title,
+} from '../..'
+
+const PopoverScrollHeight = (props) => {
+  const [showPopover, setShowPopover] = useState(false)
+
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
+  }
+
+  const handleShouldClosePopover = (shouldClosePopover) => {
+    setShowPopover(!shouldClosePopover)
+  }
+
+  const popoverTrigger = (
+    <Button
+        onClick={handleTogglePopover}
+        text="Click Me"
+        variant="secondary"
+    />
+  )
+
+  return (
+    <PbReactPopover
+        closeOnClick="any"
+        maxHeight="150px"
+        maxWidth="240px"
+        offset
+        padding="md"
+        paddingBottom="sm"
+        paddingTop="sm"
+        placement="top"
+        reference={popoverTrigger}
+        shouldClosePopover={handleShouldClosePopover}
+        show={showPopover}
+        {...props}
+    >
+      <Body
+          marginBottom="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."
+          {...props}
+      />
+      <Title
+          size={4}
+          text="- Christopher McCandless"
+          {...props}
+      />
+
+    </PbReactPopover>
+  )
+}
+
+export default PopoverScrollHeight

data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.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: "secondary", id: 'tooltip-z-index-1', text: "Click Me", }) %>
+<%= pb_rails("popover", props: {
+    trigger_element_id: "tooltip-z-index-1",
+    tooltip_id: "tooltip-z-index",
+    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.jsx

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

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

@@ -0,0 +1,15 @@
+examples:
+  rails:
+    - popover_default: Default
+    - popover_list: Example as dropdown
+    - popover_close: Close Options
+    - popover_z_index: Set Z-Index
+    - popover_scroll_height: Scroll and Height Settings
+
+  react:
+    - popover_default: Default
+    - popover_list: Dropdown example
+    - popover_close: Close Options
+    - popover_z_index: Set Z-Index
+    - popover_scroll_height: Scroll and Height Settings
+    

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

@@ -0,0 +1,5 @@
+export { default as PopoverDefault } from './_popover_default.jsx'
+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'

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

@@ -0,0 +1,3 @@
+Progress pills indicate a specific point in time of a series of sequential steps. They are used to track progress of something over time.
+
+Note: be sure to make use of the aria attribute as shown in the example if you want this kit to be web accessible.

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("progress_pills", props: { aria: { label: "2 out of 3 steps complete" }, steps: 3, active: 2 }) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import ProgressPills from '../_progress_pills'
+
+const ProgressPillsDefault = (props) => {
+    return (
+        <>
+            <ProgressPills
+                active={2}
+                aria={{ label: '2 out of 3 steps complete' }}
+                steps={3}
+                {...props}
+            />
+        </>
+    )
+}
+
+export default ProgressPillsDefault

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("progress_pills", props: { aria: { label: "2 out of 3 steps complete" }, steps: 3, active: 2, title:"Status:", value:"Orientation" }) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import ProgressPills from '../_progress_pills'
+
+const ProgressPillsStatus = (props) => {
+    return (
+        <>
+            <ProgressPills
+                active={2}
+                aria={{ label: '2 out of 3 steps complete' }}
+                steps={3}
+                title="Status:"
+                value="Orientation"
+                {...props}
+            />
+        </>
+    )
+}
+
+export default ProgressPillsStatus