playbook_ui 12.19.0 → 12.20.0.pre.alpha.movemarkdown668

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

@@ -1 +0,0 @@
-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

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

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

@@ -1,15 +0,0 @@
-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

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

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

@@ -1,17 +0,0 @@
-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

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

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

@@ -1,6 +0,0 @@
-<%= 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

@@ -1,45 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,42 +0,0 @@
-<%= 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

@@ -1,102 +0,0 @@
-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

@@ -1,21 +0,0 @@
-<%= 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

@@ -1,44 +0,0 @@
-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

@@ -1,35 +0,0 @@
-<%= 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

@@ -1,58 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,24 +0,0 @@
-<%= 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

@@ -1,62 +0,0 @@
-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

@@ -1,14 +0,0 @@
-<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

@@ -1,53 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1 +0,0 @@
-<%= 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

@@ -1,17 +0,0 @@
-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

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