playbook_ui 11.3.0 → 11.4.0.pre.alpha.rubytheme1

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -23,6 +23,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 }
 
 [class^="pb_tooltip_kit"] {
+  ~ .tooltip_tooltip,
   .tooltip_tooltip {
     display: block;
     opacity: 0;
@@ -52,15 +53,42 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
       border-width: 10px;
       margin-bottom: 50px;
     }
+
+    &.visible, 
     &.show {
-      opacity: 1;
       z-index: $z_9;
-      margin-bottom: $space_sm;
-      background-color: $white;
       padding: $space_xs $space_sm;
       box-shadow: $shadow_deeper;
       border-radius: $border_rad_light;
+    }
 
+    // react only
+    &.visible {
+      color: $white;
+      background-color: rgba($black, $opacity_9);
+      &.right {
+        box-shadow: -8px 0 28px 0 $tooltip_shadow;
+      }
+      &.bottom {
+        box-shadow: 0 -12px 28px 0 $tooltip_shadow;
+      }
+      &.left {
+        box-shadow: 8px 0 28px 0 $tooltip_shadow;
+      }
+      // react arrow
+      .arrow_bg {
+        width: 10px;
+        height: 10px;
+        background-color: rgba($black, $opacity_9);
+        transform: rotate(45deg);
+      }
+    }
+
+    //rails only
+    &.show {
+      opacity: 1;
+      margin-bottom: $space_sm;
+      background-color: $white;
       &.fade_out {
         animation-name: fadeOut;
         animation-duration: 150ms;
@@ -69,14 +97,29 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
       }
     }
   }
+
+  &.dark,
   &[class*=_dark]{
-    .tooltip_tooltip{
-      color: $white;
-      background-color: rgba($black, $opacity_9);
+    ~.tooltip_tooltip,
+    .tooltip_tooltip {
+      //react
+      &.visible {
+        color: $charcoal;
+        background-color: $white;
+      }
+      //rails
+      &.show {
+        color: $white;
+        background-color: rgba($black, $opacity_9);
+      }
       .arrow {
         border-color: $black transparent transparent transparent;
         opacity: $opacity_9;
       }
+      // react arrow
+      .arrow_bg {
+        background-color: $white;
+      }
       &.flipped {
         .arrow {
           border-color: transparent transparent $black transparent;

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -0,0 +1,144 @@
+/* @flow*/
+
+import React, { useRef, useState } from "react"
+import classnames from "classnames"
+import {
+  Placement,
+  offset,
+  arrow,
+  shift,
+  useFloating,
+  useInteractions,
+  useHover,
+  flip,
+  safePolygon,
+} from "@floating-ui/react-dom-interactions"
+import { GlobalProps, globalProps } from "../utilities/globalProps"
+import { buildAriaProps, buildDataProps } from "../utilities/props"
+import Flex from "../pb_flex/_flex"
+
+type TooltipProps = {
+  aria?: { [key: string]: string },
+  data?: { [key: string]: string },
+  text: string,
+  icon?: string,
+  interaction?: boolean,
+  placement?: Placement,
+  children: JSX.Element,
+  zIndex?: Pick<GlobalProps, "ZIndex">,
+} & GlobalProps
+
+const Tooltip = (props: TooltipProps) => {
+  const {
+    aria = {},
+    children,
+    data = {},
+    icon = null,
+    interaction = false,
+    text,
+    placement: preferredPlacement = "top",
+    zIndex,
+    ...rest
+  } = props
+
+  console.log(rest)
+
+  const dataProps: { [key: string]: any } = buildDataProps(data)
+  const ariaProps: { [key: string]: any } = buildAriaProps(aria)
+
+  const css = classnames(globalProps({...rest}))
+  const [open, setOpen] = useState(false)
+  const arrowRef = useRef(null)
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    strategy,
+    context,
+    placement,
+    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
+  } = useFloating({
+    placement: preferredPlacement,
+    open,
+    onOpenChange(open) {
+      setOpen(open)
+    },
+    middleware: [
+      offset(10),
+      shift(),
+      flip({
+        fallbackPlacements: ["top", "right", "bottom", "left"],
+        fallbackStrategy: "initialPlacement",
+        flipAlignment: false,
+      }),
+      arrow({
+        element: arrowRef,
+      }),
+    ],
+  })
+
+  const { getFloatingProps } = useInteractions([
+    useHover(context, {
+      handleClose: interaction ? safePolygon({
+        blockPointerEvents: false
+      }) : null,
+    })
+  ])
+
+  const staticSide = {
+    top: "bottom",
+    right: "left",
+    bottom: "top",
+    left: "right",
+  }[placement.split("-")[0]]
+
+  return (
+    <>
+      <div
+        ref={reference}
+        className={`pb_tooltip_kit ${css}`}
+        style={{ display: "inline-flex" }}
+        role="tooltip_trigger"
+        {...ariaProps}
+        {...dataProps}
+      >
+        {children}
+      </div>
+      {open && (
+        <div
+          {...getFloatingProps({
+            role: "tooltip",
+            ref: floating,
+            className: `tooltip_tooltip ${placement} visible`,
+            style: {
+              position: strategy,
+              top: y ?? 0,
+              left: x ?? 0,
+              zIndex: zIndex ?? 0,
+            },
+          })}
+        >
+          <Flex gap="xs" align="center">
+            {icon && (
+            <i className={`pb_icon_kit far fa-${icon} fa-fw`} />
+            )}
+            {text}
+          </Flex>
+          <div
+            ref={arrowRef}
+            className="arrow_bg"
+            style={{
+              position: strategy,
+              left: arrowX != null ? `${arrowX}px` : "",
+              top: arrowY != null ? `${arrowY}px` : "",
+              [staticSide]: "-5px",
+            }}
+          />
+        </div>
+      )}
+    </>
+  )
+}
+
+export default Tooltip

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx

@@ -0,0 +1,59 @@
+// @flow
+
+import React from 'react'
+import { Tooltip, Flex, FlexItem } from '../..';
+
+const TooltipDefaultReact = (props) => {
+
+  return (
+   <Flex 
+       flexDirection='row'
+       gap='md'
+       justifyContent='center'
+       wrap
+   >
+    <FlexItem>
+      <Tooltip 
+          placement='top' 
+          text="Whoa. I'm a Tooltip" 
+          zIndex={10}
+          {...props}
+      >
+        {'Hover here (Top)'}
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+     <Tooltip 
+         placement='bottom' 
+         text="Whoa. I'm a Tooltip" 
+         zIndex={10}
+         {...props}
+     >
+        {'Hover here (Bottom)'}
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip 
+          placement='right' 
+          text="Whoa. I'm a Tooltip" 
+          zIndex={10}
+          {...props}
+      >
+        {'Hover here (Right)'}
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip 
+          placement='left' 
+          text="Whoa. I'm a Tooltip" 
+          zIndex={10}
+          {...props}
+      >
+        {'Hover here (Left)'}
+      </Tooltip>
+    </FlexItem>
+   </Flex>
+  )
+}
+
+export default TooltipDefaultReact

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md

@@ -0,0 +1,5 @@
+You can define the tooltip placement sending the prop `placement` with one of the available options: `top | right | bottom | left`.
+
+If you don't specify a desired `placement`, the component will automatically choose the one that fits better. 
+
+If the desired `placement` doesn't fit on screen, the component will automatically switch to the one that fits better.

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("icon_circle", props: { icon: "paper-plane", id: "result-1-sample-email-link" }) %>
+
+<%= pb_rails("tooltip", props: {
+  trigger_element_id: "result-1-sample-email-link",
+  tooltip_id: "sample-email-tooltip-result-1",
+  position: "top",
+  dark: true
+}) do %>
+  Send Email
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx

@@ -0,0 +1,52 @@
+// @flow
+
+import React from 'react'
+import { Tooltip, Button, Flex } from '../..'
+
+const TooltipIcon = (props) => {
+  return (
+    <Flex flexDirection='row'
+        gap='md'
+        wrap
+    >
+      <Tooltip
+          icon='paper-plane'
+          placement='top'
+          text='Send Email'
+          zIndex={10}
+          {...props}
+      >
+        <Button text='Tooltip With Icon' />
+      </Tooltip>
+      <Tooltip
+          icon='paper-plane'
+          placement='bottom'
+          text='Send Email'
+          zIndex={10}
+          {...props}
+      >
+        <Button text='Tooltip With Icon' />
+      </Tooltip>
+      <Tooltip
+          icon='paper-plane'
+          placement='right'
+          text='Send Email'
+          zIndex={10}
+          {...props}
+      >
+        <Button text='Tooltip With Icon' />
+      </Tooltip>
+      <Tooltip
+          icon='paper-plane'
+          placement='left'
+          text='Send Email'
+          zIndex={10}
+          {...props}
+      >
+        <Button text='Tooltip With Icon' />
+      </Tooltip>
+    </Flex>
+  )
+}
+
+export default TooltipIcon

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.md

@@ -0,0 +1 @@
+Set the prop `icon` with the desired icon to display inside the tooltip.

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx

@@ -0,0 +1,40 @@
+// @flow
+
+import React from 'react'
+import { Tooltip, Button, Flex, FlexItem } from '../..';
+
+const TooltipInteraction = (props) => {
+
+  return (
+   <Flex 
+       flexDirection='row'
+       gap='md'
+       justifyContent='center'
+       wrap
+   >
+    <FlexItem>
+      <Tooltip 
+          interaction 
+          placement='top' 
+          text="You can copy me"
+          zIndex={10}
+          {...props}
+      >
+        <Button text="With Interaction"/>
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+     <Tooltip 
+         placement='top' 
+         text="I'm just a regular tooltip" 
+         zIndex={10}
+         {...props}
+     >
+        <Button text="No Interaction"/>
+      </Tooltip>
+    </FlexItem>
+   </Flex>
+  )
+}
+
+export default TooltipInteraction

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.md

@@ -0,0 +1 @@
+Set the prop `interaction` as `true` for cases that require users to copy the content inside the tooltip.

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx

@@ -0,0 +1,39 @@
+// @flow
+
+import React from 'react'
+import { Tooltip, Flex, CircleIconButton } from '../..'
+
+const TooltipMargin = (props) => {
+  return (
+    <Flex 
+        flexDirection='row' 
+        justifyContent='center' 
+        wrap
+    >
+      <Tooltip
+          margin='md'
+          placement='top'
+          text='Send Email'
+          zIndex={10}
+          {...props}
+      >
+        <CircleIconButton 
+            icon='paper-plane'
+        />
+      </Tooltip>
+      <Tooltip 
+          margin='md' 
+          placement='top' 
+          text='Send Email' 
+          zIndex={10} 
+          {...props}
+      >
+        <CircleIconButton 
+            icon='paper-plane'
+        />
+      </Tooltip>
+    </Flex>
+  )
+}
+
+export default TooltipMargin

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.md

@@ -0,0 +1,3 @@
+You should set `margin` in the `tooltip` component itself. If you add this prop to the child, it will cause the tooltip to be pulled away from the trigger.
+
+It is not recommended to set `padding` in the `tooltip` nor its child, doing so will cause it to be pulled away from its trigger element.

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb

@@ -7,4 +7,4 @@
   dark: true
 }) do %>
   Send Email
-<% end %>
+<% end %>

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

@@ -4,4 +4,10 @@ examples:
   - tooltip_default: Default
   - tooltip_selectors: Using Common Selectors
   - tooltip_white: White
-  - tooltip_with_icon_circle: Icon Circle Tooptip
+  - tooltip_with_icon_circle: Icon Circle Tooltip
+
+  react:
+  - tooltip_default_react: Default
+  - tooltip_interaction: Content Interaction
+  - tooltip_margin: Margin
+  - tooltip_icon: Tooltip with Icon

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

@@ -0,0 +1,4 @@
+export { default as TooltipDefaultReact } from './_tooltip_default_react'
+export { default as TooltipInteraction } from './_tooltip_interaction'
+export { default as TooltipMargin } from './_tooltip_margin'
+export { default as TooltipIcon } from './_tooltip_icon'

data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { cleanup, render, screen, fireEvent } from "../utilities/test-utils";
+import { Button, Tooltip } from "..";
+
+function TooltipTest() {
+  const text = "this is a text",
+    placement = "top",
+    triggerText = "hover me",
+    zIndex = "10";
+
+  return (
+    <Tooltip
+        data={{ testid: "primary-test" }}
+        placement={placement}
+        text={text}
+        zIndex={zIndex}
+    >
+      <Button text={triggerText} />
+    </Tooltip>
+  );
+}
+
+test("renders the component", () => {
+  render(<TooltipTest />);
+
+  const kit = screen.getByTestId("primary-test");
+  expect(kit).toBeInTheDocument();
+  expect(kit).toHaveClass("pb_tooltip_kit");
+
+  cleanup();
+});
+
+test("opens on mouseenter", () => {
+  render(<TooltipTest />);
+
+  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
+  expect(screen.queryByRole("tooltip")).toBeInTheDocument();
+
+  cleanup();
+});
+
+test("closes on mouseleave", () => {
+  render(<TooltipTest />);
+
+  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
+  fireEvent.mouseLeave(screen.getByRole("tooltip_trigger"));
+  expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+
+  cleanup();
+});

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.html.erb

@@ -0,0 +1,37 @@
+<%
+  options = [
+    { label: 'Windows', value: '#FFA500' },
+    { label: 'Siding', value: '#FF0000' },
+    { label: 'Doors', value: '#00FF00' },
+    { label: 'Roofs', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-pills-example1",
+    placeholder: "All Colors",
+    options: options, 
+    label: "Colors",
+    name: :foo,
+    is_multi: false
+  })
+%>
+
+<!-- This section is an example of the available JavaScript event hooks -->
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-select", function(event) {
+    console.log('Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-remove", function(event) {
+    console.log('Option removed')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-clear", function() {
+    console.log('All options cleared')
+  })
+
+  document.querySelector('#clear-pills').addEventListener('click', function() {
+    document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
+  })
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.md

@@ -0,0 +1 @@
+Passing `is_multi: false` will allow the user to only select one option from the drop down. Note: this will disable `pills` prop.

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

@@ -3,6 +3,7 @@ examples:
     - typeahead_default: Default
     - typeahead_with_context: With Context
     - typeahead_with_pills: With Pills
+    - typeahead_without_pills: Without Pills (Single Select)
     - typeahead_with_pills_async: With Pills (Async Data)
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
     - typeahead_inline: Inline

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb

@@ -1,5 +1,5 @@
-<% if object.pills %>
-  <%= react_component('Typeahead', object.typeahead_with_pills_options) %>
+<% if object.is_react? %>
+  <%= react_component('Typeahead', object.typeahead_react_options) %>
 <% else %>
   <%= content_tag(:div,
                 id: object.id,

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -19,6 +19,10 @@ module Playbook
                      default: []
       prop :input_options, type: Playbook::Props::Hash,
                            default: {}
+
+      prop :is_multi, type: Playbook::Props::Boolean,
+                      default: true
+
       prop :pills, type: Playbook::Props::Boolean,
                    default: false
 
@@ -45,13 +49,17 @@ module Playbook
         )
       end
 
-      def typeahead_with_pills_options
+      def is_react?
+        pills || !is_multi
+      end
+
+      def typeahead_react_options
         base_options = {
           dark: dark,
           defaultValue: default_options,
           id: id,
           inline: inline,
-          isMulti: true,
+          isMulti: is_multi,
           label: label,
           multiKit: multi_kit,
           name: name,

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx

@@ -8,7 +8,7 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import Caption from '../pb_caption/_caption'
 import Title from '../pb_title/_title'
 
-import DateTime from '../pb_kit/dateTime.js'
+import DateTime from '../pb_kit/dateTime'
 
 type WeekdayStackedProps = {
   align?: "left" | "center" | "right",

data/app/pb_kits/playbook/playbook-doc.js

@@ -92,6 +92,7 @@ import * as Title from 'pb_title/docs'
 import * as TitleCount from 'pb_title_count/docs'
 import * as TitleDetail from 'pb_title_detail/docs'
 import * as Toggle from 'pb_toggle/docs'
+import * as Tooltip from 'pb_tooltip/docs'
 import * as TreemapChart from 'pb_treemap_chart/docs'
 import * as Typeahead from 'pb_typeahead/docs'
 import * as User from 'pb_user/docs'
@@ -188,6 +189,7 @@ WebpackerReact.setup({
   ...TitleCount,
   ...TitleDetail,
   ...Toggle,
+  ...Tooltip,
   ...TreemapChart,
   ...Typeahead,
   ...User,