playbook_ui 4.6.1 → 4.7.0

data/app/pb_kits/playbook/pb_home_address_street/_street_emphasis.html.erb

@@ -0,0 +1,31 @@
+<%= pb_rails "title", props: {
+  classname: "pb_home_address_street_address",
+  size: 4,
+  text: object.address_house_style,
+  dark: object.dark
+} %>
+<%= pb_rails "title", props: {
+  classname: "pb_home_address_street_address",
+  size: 4,
+  text: object.address_house_style2,
+  dark: object.dark
+} %>
+<%= pb_rails "body", props: {
+  color: "light",
+  text: object.city_state_zip,
+  dark: object.dark
+} %>
+
+<% if object.home_id %>
+  <%= pb_rails("hashtag", props: {
+    text: "#{object.home_id}",
+    url: object.home_url || "#",
+    type: "home",
+    dark: object.dark,
+    classname: "home-hashtag"}) %>
+<% end %>
+
+<%= pb_rails "body", props: { color: "light", tag: "span", dark: object.dark } do %>
+  <small><%= object.territory %></small>
+<% end %>
+

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.html.erb

@@ -0,0 +1,27 @@
+<%= pb_rails("home_address_street", props: {
+  address: "70 Prospect Ave",
+  address_cont: "Apt M18",
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  house_style: "Colonial",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>
+
+<br>
+<br>
+
+<%= pb_rails("home_address_street", props: {
+  address: "70 Prospect Ave",
+  address_cont: "Apt M18",
+  city: "West Chester",
+  emphasis: "city",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  house_style: "Colonial",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { HomeAddressStreet } from '../../'
+
+const HomeAddressStreetEmphasis = () => {
+  return (
+    <div>
+      <HomeAddressStreet
+          address="70 Prospect Ave"
+          addressCont="Apt M18"
+          city="West Chester"
+          homeId={8250263}
+          homeUrl="https://powerhrg.com/"
+          houseStyle="Colonial"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+      />
+      <br />
+      <br />
+      <HomeAddressStreet
+          address="70 Prospect Ave"
+          addressCont="Apt M18"
+          city="West Chester"
+          emphasis="city"
+          homeId={8250263}
+          homeUrl="https://powerhrg.com/"
+          houseStyle="Colonial"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+      />
+    </div>
+  )
+}
+
+export default HomeAddressStreetEmphasis

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.md

@@ -0,0 +1,2 @@
+Emphasis on street happens by default. (no prop needed)
+Emphasis on "city" makes the city emphasized, rather than the street.

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

@@ -2,12 +2,14 @@ examples:
 
   rails:
   - home_address_street_default: Default
+  - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
   - home_address_street_dark: Dark
 
 
   react:
   - home_address_street_default: Default
+  - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
   - home_address_street_dark: Dark
 

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

@@ -1,3 +1,4 @@
 export { default as HomeAddressStreetDefault } from './_home_address_street_default.jsx'
+export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
 export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
 export { default as HomeAddressStreetDark } from './_home_address_street_dark.jsx'

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -10,6 +10,9 @@ module Playbook
       prop :address
       prop :address_cont
       prop :city
+      prop :emphasis, type: Playbook::Props::Enum,
+                      values: %w[street city],
+                      default: "street"
       prop :home_id, type: Playbook::Props::Number
       prop :home_url
       prop :house_style
@@ -26,6 +29,14 @@ module Playbook
         "#{city.titleize}, #{state} #{zipcode}"
       end
 
+      def city_state
+        "#{city.titleize}, #{state}"
+      end
+
+      def zip
+        zipcode.to_s
+      end
+
       def address_house_style
         "#{address.titleize} #{separator} #{house_style}"
       end

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -10,14 +10,20 @@ import {
   Reference as PopperReference,
 } from 'react-popper'
 
-import { buildCss } from '../utilities/props'
+import {
+  buildCss,
+  noop,
+} from '../utilities/props'
+
 import { Card } from '../'
 
 type PbPopoverProps = {
   className?: String,
+  closeOnClick?: 'outside' | 'inside',
   offset?: Boolean,
   reference: PopperReference,
   show?: Boolean,
+  shouldClosePopover?: () => Boolean,
 } & PopperProps
 
 const POPOVER_OFFSET_Y = {
@@ -65,57 +71,100 @@ const Popover = ({
   </Popper>
 )
 
-const PbReactPopover = ({
-  className,
-  children,
-  modifiers = {},
-  offset = false,
-  placement = 'left',
-  portal = 'body',
-  reference,
-  referenceElement,
-  show = false,
-  usePortal = false,
-}: PbPopoverProps) => {
-  const popoverComponent = (
-    <Popover
-        className={className}
-        modifiers={modifiers}
-        offset={offset}
-        placement={placement}
-        referenceElement={referenceElement}
-        show={show}
-    >
-      {children}
-    </Popover>
-  )
-
-  return (
-    <PopperManager>
-      <If condition={reference && !referenceElement}>
-        <PopperReference>
-          {({ ref }) => (
-            <span
-                className="pb_popover_reference_wrapper"
-                ref={ref}
-            >
-              <reference.type
-                  {...reference.props}
-              />
-            </span>
+export default class PbReactPopover extends React.Component<PbPopoverProps> {
+  static defaultProps = {
+    modifiers: {},
+    offset: false,
+    placement: 'left',
+    portal: 'body',
+    show: false,
+    shouldClosePopover: noop,
+    usePortal: false,
+  }
+
+  componentDidMount() {
+    const { closeOnClick, shouldClosePopover } = this.props
+
+    if (!closeOnClick) return
+
+    document.body.addEventListener('click', ({ target }) => {
+      const targetIsPopover = target.closest('[class^=popover_tooltip]') !== null
+      const targetIsReference = target.closest('.pb_popover_reference_wrapper') !== null
+
+      if (targetIsReference) return
+
+      switch (closeOnClick) {
+      case 'outside':
+        if (!targetIsPopover) {
+          shouldClosePopover(true)
+        }
+        break
+      case 'inside':
+        if (targetIsPopover) {
+          shouldClosePopover(true)
+        }
+        break
+      case 'any':
+        shouldClosePopover(true)
+        break
+      }
+    })
+  }
+
+  props: PbPopoverProps
+
+  render() {
+    const {
+      className,
+      children,
+      modifiers,
+      offset,
+      placement,
+      portal,
+      reference,
+      referenceElement,
+      show,
+      usePortal,
+    } = this.props
+
+    const popoverComponent = (
+      <Popover
+          className={className}
+          modifiers={modifiers}
+          offset={offset}
+          placement={placement}
+          referenceElement={referenceElement}
+          show={show}
+      >
+        {children}
+      </Popover>
+    )
+
+    return (
+      <PopperManager>
+        <If condition={reference && !referenceElement}>
+          <PopperReference>
+            {({ ref }) => (
+              <span
+                  className="pb_popover_reference_wrapper"
+                  ref={ref}
+              >
+                <reference.type
+                    {...reference.props}
+                />
+              </span>
+            )}
+          </PopperReference>
+        </If>
+        <If condition={usePortal}>
+          {ReactDOM.createPortal(
+            popoverComponent,
+            document.querySelector(portal)
           )}
-        </PopperReference>
-      </If>
-      <If condition={usePortal}>
-        {ReactDOM.createPortal(
-          popoverComponent,
-          document.querySelector(portal)
-        )}
-        <Else />
-        {popoverComponent}
-      </If>
-    </PopperManager>
-  )
+          <Else />
+          {popoverComponent}
+        </If>
+      </PopperManager>
+    )
+  }
 }
-
-export default PbReactPopover

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

@@ -1 +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.
+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_click_any.html.erb

@@ -0,0 +1,19 @@
+<%= pb_rails("button", props: {
+  text: "Click me then 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: 'right',
+  offset: false
+}) do %>
+    Whoa. I'm a popover that can be closed by clicking anywhere.
+<% end %>
+
+
+
+

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

@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  PbReactPopover,
+} from '../..'
+
+const PopoverClickAny = () => {
+  const [showPopover, setShowPopover] = useState(false)
+
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
+  }
+
+  const handleShouldClosePopover = (shouldClosePopover) => {
+    setShowPopover(!shouldClosePopover)
+  }
+
+  const popoverTrigger = (
+    <Button
+        onClick={handleTogglePopover}
+        text="Button Secondary"
+        variant="secondary"
+    />
+  )
+
+  return (
+    <PbReactPopover
+        closeOnClick="any"
+        offset
+        placement="bottom"
+        reference={popoverTrigger}
+        shouldClosePopover={handleShouldClosePopover}
+        show={showPopover}
+    >
+      {'Whoa. I\'m a popover.'}
+    </PbReactPopover>
+  )
+}
+
+export default PopoverClickAny

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

@@ -0,0 +1,14 @@
+<%= pb_rails("button", props: { text: "Click me then click the popover", 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: 'right',
+  offset: false
+}) do %>
+    Whoa. I'm a popover that can be closed by clicking inside of me.
+<% end %>
+
+
+
+

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

@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  PbReactPopover,
+} from '../..'
+
+const PopoverClickInside = () => {
+  const [showPopover, setShowPopover] = useState(false)
+
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
+  }
+
+  const handleShouldClosePopover = (shouldClosePopover) => {
+    setShowPopover(!shouldClosePopover)
+  }
+
+  const popoverTrigger = (
+    <Button
+        onClick={handleTogglePopover}
+        text="Button Secondary"
+        variant="secondary"
+    />
+  )
+
+  return (
+    <PbReactPopover
+        closeOnClick="inside"
+        offset
+        placement="bottom"
+        reference={popoverTrigger}
+        shouldClosePopover={handleShouldClosePopover}
+        show={showPopover}
+    >
+      {'Whoa. I\'m a popover.'}
+    </PbReactPopover>
+  )
+}
+
+export default PopoverClickInside