RubyGems - playbook_ui - Versions diffs - 11.3.0 → 11.4.0 - Mend

playbook_ui 11.3.0 → 11.4.0

Files changed (52) hide show

data/app/pb_kits/playbook/pb_time/_time.tsx ADDED Viewed

@@ -0,0 +1,92 @@
+import React from "react";
+import classnames from "classnames";
+import DateTime from "../pb_kit/dateTime";
+import { buildCss } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+import Body from "../pb_body/_body";
+import Caption from "../pb_caption/_caption";
+import Icon from "../pb_icon/_icon";
+type TimeProps = {
+  align?: "left" | "center" | "right";
+  className?: string | string[];
+  data?: string;
+  date: string;
+  dark?: boolean;
+  id?: string;
+  showIcon?: boolean;
+  size?: "md" | "sm";
+  showTimezone?: boolean;
+  timeZone?: string;
+};
+const Time = (props: TimeProps) => {
+  const {
+    align,
+    className,
+    date,
+    showIcon,
+    size,
+    timeZone,
+    showTimezone = true,
+  } = props;
+  const classes = classnames(
+    buildCss("pb_time_kit", align, size),
+    globalProps(props),
+    className
+  );
+  const dateTimestamp = new DateTime({ value: date, zone: timeZone });
+  return (
+    <div className={classes}>
+      {showIcon && (
+        <>
+          <Body color="light" tag="span">
+            <Icon fixedWidth icon="clock" size={size === "md" ? "" : "sm"} />
+          </Body>{" "}
+        </>
+      )}
+      <time dateTime={date}>
+        <span>
+          {size === "md" ? (
+            <>
+              <Body
+                className="pb_time"
+                tag="span"
+                text={dateTimestamp.toTimeWithMeridian()}
+              />{" "}
+              {showTimezone && (
+                <Body
+                  color="light"
+                  tag="span"
+                  text={dateTimestamp.toTimezone()}
+                />
+              )}
+            </>
+          ) : (
+            <>
+              <Caption
+                color="light"
+                tag="span"
+                text={dateTimestamp.toTimeWithMeridian()}
+              />{" "}
+              {showTimezone && (
+                <Caption
+                  color="light"
+                  tag="span"
+                  text={dateTimestamp.toTimezone()}
+                />
+              )}
+            </>
+          )}
+        </span>
+      </time>
+    </div>
+  );
+};
+export default Time;

data/app/pb_kits/playbook/pb_time/docs/_time_align.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Time from '../_time.jsx'
+import Time from '../_time'
 const TimeAlign = (props) => {
   return (

data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Time from '../_time.jsx'
+import Time from '../_time'
 const TimeDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react'
-import Time from '../_time.jsx'
+import Time from '../_time'
 const TimeSizes = (props) => {
   return (

data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Time from '../_time.jsx'
+import Time from '../_time'
 const TimeStamp = (props) => {
   return (

data/app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Time from '../_time.jsx'
+import Time from '../_time'
 const TimeTimezone = (props) => {
   const zones = {

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx CHANGED Viewed

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
-import DateTime from '../pb_kit/dateTime.js'
+import DateTime from '../pb_kit/dateTime'
 import { buildCss, buildDataProps } from '../utilities/props'
 import { deprecatedProps, globalProps } from '../utilities/globalProps'

data/app/pb_kits/playbook/pb_title/_title.tsx CHANGED Viewed

@@ -5,7 +5,7 @@ import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalPr
 type TitleProps = {
   aria?: {[key: string]: string},
-  children?: React.ReactChild[],
+  children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: {[key: string]: string},

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

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

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

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

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

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

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

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

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

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

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

@@ -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 CHANGED Viewed

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

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

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

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

@@ -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();
+});