playbook_ui 14.17.0.pre.alpha.PLAY20267223 → 14.17.0.pre.alpha.PLAY20547327

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -25,6 +25,7 @@ type BackgroundProps = {
   backgroundPosition?: ResponsiveProp<string> | string,
   backgroundRepeat?: ResponsiveProp<BackgroundRepeat> | BackgroundRepeat,
   imageUrl?: ResponsiveProp<string> | string,
+  imageOverlay?: 'opacity_1' | 'opacity_2' | 'opacity_3' | 'opacity_4' | 'opacity_5' | 'opacity_6' | 'opacity_7' | 'opacity_8' | 'opacity_9' | 'opacity_10',
   children?: React.ReactChild[] | React.ReactNode,
   className?: string,
   customColor?: string,
@@ -83,11 +84,12 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     data = {},
     htmlOptions = {},
     id,
+    imageOverlay,
     imageUrl = '',
     tag = 'div',
     transition = '',
   } = props
-  
+
   const [responsiveProps, setResponsiveProps] = useState({
     backgroundSize: getResponsiveValue(backgroundSize),
     backgroundPosition: getResponsiveValue(backgroundPosition),
@@ -132,6 +134,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
       [`pb_background_color_${resBackgroundColor}`]: resBackgroundColor && !customColor,
       [`pb_background_custom_color`]: !!customColor,
     },
+    imageOverlay ? `imageoverlay_${imageOverlay}` : "",
     className
   );
 
@@ -155,7 +158,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-  
+
   return (
     <Tag
         {...ariaProps}
@@ -168,7 +171,6 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     >
       {children}
     </Tag>
-  
   )
 }
 

data/app/pb_kits/playbook/pb_background/background.test.js

@@ -37,3 +37,8 @@ test('backgroundSize = auto', () => {
   const kit = renderKit(Background, props, { classname: "background-image", imageUrl: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", backgroundSize: 'auto' })
   expect(kit).toHaveStyle('background-size: auto')
 })
+
+test('applies correct overlay class when imageOverlay prop is provided', () => {
+  const kit = renderKit(Background, props, { imageOverlay: 'opacity_6' });
+  expect(kit).toHaveClass('imageoverlay_opacity_6');
+});

data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import Background from "../../pb_background/_background"
+import Flex from "../../pb_flex/_flex"
+import FlexItem from "../../pb_flex/_flex_item"
+import Title from "../../pb_title/_title"
+
+const BackgroundOverlay = (props) => {
+  return (
+    <Background
+        alt="colorful background"
+        backgroundColor="category_21"
+        className="background lazyload"
+        imageOverlay="opacity_2"
+        imageUrl="https://unsplash.it/500/400/?image=633"
+        {...props}
+      >
+        <Flex
+            orientation="column"
+            vertical="center"
+            {...props}
+        >
+          <FlexItem>
+            <Title
+                dark
+                padding="lg"
+                size={1}
+                text="Background Kit Image"
+            />
+          </FlexItem>
+        </Flex>
+      </Background>
+  )
+}
+
+export default BackgroundOverlay

data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md

@@ -0,0 +1 @@
+An overlay can be added to the background image by setting the `imageOverlay` prop and adding a `backgroundColor`. The `imageOverlay` prop can be set to any opacity ranging from `opacity_1` to `opacity_10`.

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

@@ -19,3 +19,4 @@ examples:
   - background_status_subtle: Status Subtle
   - background_category: Category
   - background_size: Size
+  - background_overlay: Overlay

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

@@ -6,3 +6,4 @@ export { default as BackgroundStatus } from './_background_status.jsx'
 export { default as BackgroundStatusSubtle } from './_background_status_subtle.jsx'
 export { default as BackgroundCategory } from './_background_category.jsx'
 export { default as BackgroundSize } from './_background_size.jsx'
+export { default as BackgroundOverlay } from './_background_overlay.jsx'

data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx

@@ -1,5 +1,4 @@
-
-import React, { useState } from 'react'
+import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
@@ -7,16 +6,19 @@ import { globalProps } from '../utilities/globalProps'
 import Button from '../pb_button/_button'
 import Tooltip from '../pb_tooltip/_tooltip'
 
+import usePBCopy from './usePBCopy'
+
 type CopyButtonProps = {
-  aria?: { [key: string]: string },
-  className?: string,
-  data?: { [key: string]: string },
-  id?: string,
-  from?: string,
-  text?: string,
-  tooltipPlacement?:  "top" | "right" | "bottom" | "left",
-  tooltipText?: string,
-  value?: string,
+  aria?: { [key: string]: string }
+  className?: string
+  data?: { [key: string]: string }
+  id?: string
+  from?: string
+  text?: string
+  tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left'
+  tooltipText?: string
+  value?: string
+  timeout?: number
 }
 
 const CopyButton = (props: CopyButtonProps) => {
@@ -27,62 +29,34 @@ const CopyButton = (props: CopyButtonProps) => {
     from = '',
     id,
     text= 'Copy',
+    timeout = 1000,
     tooltipPlacement= 'bottom',
     tooltipText = 'Copied!',
     value = '',
   } = props
 
-  const [copied, setCopied] = useState(false)
+  const [copied, copy] = usePBCopy({ value, from, timeout })
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(buildCss('pb_copy_button_kit'), globalProps(props), className)
 
-  const copy = () => {
-    if (!from && !value) {
-      return
-    }
-
-    if (value) {
-      navigator.clipboard.writeText(value)
-    } else if (from) {
-      const copyElement = document.getElementById(from);
-      let copyText = copyElement?.innerText
-
-      if (copyElement instanceof HTMLTextAreaElement || copyElement instanceof HTMLInputElement) {
-        copyText = copyElement.value;
-      }
-
-      if (copyText) {
-        navigator.clipboard.writeText(copyText)
-      }
-    }
-
-    setCopied(true)
-
-    setTimeout(() => {
-      setCopied(false)
-    }, 1000);
-  }
-
   return (
-    <div
-        {...ariaProps}
+    <div {...ariaProps}
         {...dataProps}
         className={classes}
         id={id}
     >
-      <Tooltip 
+      <Tooltip
           forceOpenTooltip={copied}
           placement={tooltipPlacement}
           showTooltip={false}
           text={tooltipText}
       >
-        <Button
-            icon='copy'
+        <Button icon="copy"
             onClick={copy}
         >
-          { text }
+          {text}
         </Button>
       </Tooltip>
     </div>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react'
+import usePBCopy from '../../pb_copy_button/usePBCopy'
+import Body from '../../pb_body/_body'
+import Textarea from '../../pb_textarea/_textarea'
+import Tooltip from '../../pb_tooltip/_tooltip'
+
+const CopyButtonHook = ({...props}) => {
+  // This is how you can use the copy button hook to copy text to the clipboard
+  // eslint-disable-next-line no-unused-vars
+  const [copied, copyToClipboard] = usePBCopy({ from: 'hookbody' })
+  // I added a tooltip so it looks better in the ui
+  const [showTooltip, setShowTooltip] = useState(false)
+
+  const handleCopy = () => {
+    copyToClipboard()
+    setShowTooltip(true)
+    setTimeout(() => setShowTooltip(false), 1500)
+  }
+
+  useEffect(() => {
+    const el = document.getElementById('hookbody')
+    if (!el) return
+
+    el.addEventListener('click', handleCopy)
+    return () => {
+      el.removeEventListener('click', handleCopy)
+    }
+  }, [copyToClipboard])
+
+  return (
+    <div>
+      <Tooltip
+          delay={{ close: 1000 }}
+          forceOpenTooltip={showTooltip}
+          placement="top"
+          showTooltip={false}
+          text="Copied!"
+      >
+        <Body
+            cursor="pointer"
+            id="hookbody"
+            text="I'm a custom copy hook! Click this body to copy this text!"
+        />
+      </Tooltip>
+
+      <Textarea
+          {...props}
+          placeholder="Paste here"
+      />
+    </div>
+  )
+}
+
+export default CopyButtonHook

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md

@@ -0,0 +1,3 @@
+We provide a `usePBCopy` hook that you can import to your project. This hook will return a function that you can call to copy the text to the clipboard.
+
+`usePBCopy({ from: 'your_id' })` will grab the `innerText` from `your_id` element, or `value` if it is an input element.

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

@@ -6,3 +6,4 @@ examples:
   react:
   - copy_button_default: Default
   - copy_button_from: Copy From
+  - copy_button_hook: Copy Hook

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

@@ -1,2 +1,3 @@
 export { default as CopyButtonDefault } from './_copy_button_default.jsx'
-export { default as CopyButtonFrom } from './_copy_button_from.jsx'
+export { default as CopyButtonFrom } from './_copy_button_from.jsx' 
+export { default as CopyButtonHook } from './_copy_button_hook.jsx'

data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts

@@ -0,0 +1,45 @@
+import { useState, useRef, useEffect } from 'react'
+
+type UsePBCopyProps = {
+  value?: string
+  from?: string
+  timeout?: number
+}
+
+export default function usePBCopy({
+  value = '',
+  from = '',
+  timeout = 0,
+}: UsePBCopyProps) {
+  const [copied, setCopied] = useState(false)
+  const timerRef = useRef<number>()
+
+  const copy = () => {
+    if (!value && !from) return
+
+    if (value) {
+      navigator.clipboard.writeText(value)
+    } else {
+      const el = document.getElementById(from)
+      let text = el?.innerText
+      if (el instanceof HTMLTextAreaElement || el instanceof HTMLInputElement) {
+        text = el.value
+      }
+      if (text) navigator.clipboard.writeText(text)
+    }
+
+    setCopied(true)
+    window.clearTimeout(timerRef.current)
+    timerRef.current = window.setTimeout(() => {
+      setCopied(false)
+    }, timeout)
+  }
+
+  useEffect(() => {
+    return () => {
+      window.clearTimeout(timerRef.current)
+    }
+  }, [])
+
+  return [copied, copy] as const
+}

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -35,7 +35,7 @@ type DropdownProps = {
     label?: string;
     onSelect?: (arg: GenericObject) => null;
     options: GenericObject;
-    separators: boolean;
+    separators?: boolean;
     triggerRef?: any;
     variant?: "default" | "subtle";
 };

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -22,7 +22,7 @@ type DropdownOptionProps = {
   data?: { [key: string]: string };
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
-  key?: string;
+  key?: string | number;
   option?: GenericObject;
   padding?: string;
 }  & GlobalProps;

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -85,11 +85,19 @@
     .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
-      border-right-width: 0;
+      border-right-color: transparent;
     }
+    [class^=pb_text_input_kit] .text_input_wrapper input:focus,
+    [class^=pb_text_input_kit] .text_input_wrapper .text_input:focus {
+      border-right-color: $primary;
+    } 
+    [class^=pb_text_input_kit].error .text_input_wrapper input,
+    [class^=pb_text_input_kit].error .text_input_wrapper .text_input {
+      border-right-color: $error;
+    }   
   }
 
-  & > [class^=pb_phone_number_input]:not(:first-child) {
+  & > [class^=pb_phone_number_input]:not(:first-child), [class^=pb_passphrase]:not(:first-child) {
     .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
@@ -107,8 +115,16 @@
     .text_input {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
-      border-right: none;
+      border-right-color: transparent;
     }
+    [class^=pb_text_input_kit] .text_input_wrapper input:focus,
+    [class^=pb_text_input_kit] .text_input_wrapper .text_input:focus {
+      border-right-color: $primary;
+    } 
+    [class^=pb_text_input_kit].error .text_input_wrapper input,
+    [class^=pb_text_input_kit].error .text_input_wrapper .text_input {
+      border-right-color: $error;
+    }  
   }
 
   &[class*=rails] > [class^=pb_date_picker_kit] {
@@ -227,4 +243,8 @@
       padding-left: calc(var(--iti-flag-width) + 1px);
     }
   }
+  
+  &:has(> [class^="pb_select"]):has(> .pb_passphrase) [class^="pb_select"] {
+      align-self: baseline;
+  }
 }

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb

@@ -1,5 +1,4 @@
-<div>
-
+<%= pb_rails("flex", props: {orientation: "column", row_gap:"md"}) do %>
   <%= pb_rails("form_group") do %>
     <%= pb_rails("text_input", props: { placeholder: "Enter Artist Name" }) %>
     <%= pb_rails("select", props: {
@@ -17,8 +16,6 @@
       ]
     }) %>
   <% end %>
-  <br>
-  <br>
   <%= pb_rails("form_group") do %>
     <%= pb_rails("select", props: {
         blank_selection: "Phone",
@@ -32,4 +29,17 @@
         id: "phone"
     }) %>
   <% end %>
-</div>
+  <%= pb_rails("form_group") do %>
+      <%= pb_rails("phone_number_input", props: {
+        id: "phone2"
+      }) %>
+      <%= pb_rails("select", props: {
+        blank_selection: "Phone",
+        options: [
+          { value: "Cell" },
+          { value: "Work" },
+          { value: "Home" },
+        ]
+      }) %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx

@@ -1,11 +1,16 @@
-import React from 'react'
+import React, {useState} from 'react'
 
 import FormGroup from '../_form_group'
 import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 import Select from '../../pb_select/_select'
 import TextInput from '../../pb_text_input/_text_input'
+import Flex from '../../pb_flex/_flex'
+import Passphrase from '../../pb_passphrase/_passphrase'
 
 const FormGroupSelect = (props) => {
+  const [input, setInput] = useState("");
+  const handleChange = (e) => setInput(e.target.value);
+
   const options = [
     { value: 'Country' },
     { value: 'Pop' },
@@ -25,7 +30,10 @@ const FormGroupSelect = (props) => {
   ]
 
   return (
-    <div>
+    <Flex 
+        orientation="column" 
+        rowGap="md"
+    >
       <FormGroup>
         <TextInput
             placeholder="Enter Artist Name"
@@ -37,18 +45,43 @@ const FormGroupSelect = (props) => {
             {...props}
         />
       </FormGroup>
-      <br />
-      <br />
       <FormGroup>
         <Select
             blankSelection="Phone"
             options={phoneOptions}
-            />
+            {...props}
+        />
         <PhoneNumberInput
             id='default'
+            {...props}
         />
     </FormGroup>
-    </div>
+    <FormGroup>
+      <PhoneNumberInput
+          id='default-2'
+          {...props}
+      />
+      <Select
+          blankSelection="Phone"
+          options={phoneOptions}
+          {...props}
+      />
+    </FormGroup>
+    <FormGroup>
+        <Select 
+            blankSelection="Phone" 
+            options={phoneOptions}
+            {...props}
+        />
+        <Passphrase
+            id="my-passphrase"
+            label=""
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+      </FormGroup>
+    </Flex>
   )
 }
 

data/app/pb_kits/playbook/pb_layout/_layout.scss

@@ -210,10 +210,78 @@ $bracket-border-width: 4px;
       border-right: $bracket-border-width solid $border_light;
     }
 
+    .polygon_node {
+      position: absolute;
+      top: calc(50% - 5px);
+      right: -10px;
+
+      width: 0;
+      height: 0;
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+      border-left: 10px solid $border_light;
+    }
+
     .layout_round_label {
       display: none;
     }
 
+    .layout_participant,
+    .layout_participant_winner,
+    .layout_participant_self,
+    .layout_participant_winner_self,
+    .layout_participant_winner_self_last {
+      height: 60px;
+    }
+
+    .layout_tbd {
+      height: 140px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    .layout_participant_winner,
+    .layout_participant_self,
+    .layout_participant_winner_self,
+    .layout_participant_winner_self_last {
+      position: relative;
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        width: 4px;
+        height: 100%;
+      }
+    }
+
+    .layout_participant_winner::after {
+      right: 0;
+      background: $product_6_highlight;
+    }
+
+    .layout_participant_self::after {
+      left: 0;
+      background: $category_1;
+    }
+
+    .layout_participant_winner_self::after {
+      right: 0;
+      background: $product_6_highlight;
+    }
+
+    .layout_participant_winner_self_last::after {
+      left: 0;
+      background: $category_1;
+    }
+
+    .game_separator {
+      &::before, &::after {
+        height: 2px;
+      }
+    }
+
     @media (max-width: $screen-md-max) {
       flex-direction: column;
       .layout_round_label {
@@ -221,7 +289,8 @@ $bracket-border-width: 4px;
       }
       .layout_round .layout_game::after,
       .connector_container,
-      .half_box {
+      .half_box,
+      .polygon_node {
         display: none !important;
       }
     }

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -6,6 +6,7 @@ import { GlobalProps, globalProps, globalInlineProps } from '../utilities/global
 
 import { Round, RoundLabel } from "./subcomponents/_round";
 import Game from "./subcomponents/_game";
+import Participant from "./subcomponents/_participant";
 
 type LayoutPropTypes = {
   aria?: {[key: string]: string},
@@ -176,13 +177,38 @@ const Layout = (props: LayoutPropTypes) => {
     (child: React.ReactElement & {type: {displayName: string}}) => child.type?.displayName !== 'Side'
   )
 
-  const numberOfRounds = Array.isArray(nonSideChildren) ? React.Children.toArray(children).filter(
+  const numberOfRounds = Array.isArray(children) ? React.Children.toArray(children).filter(
     (child) => {
       return (child as React.ReactElement).type === Layout.Round;
     }
   ).length : 0
+
+  const lastRoundWithSelf = React.Children.toArray(children).filter((child) => {
+    if ((child as React.ReactElement).type !== Layout.Round) {
+      return false
+    }
+  
+    const roundElement = child as React.ReactElement
+  
+    const gameChildren = React.Children.toArray(roundElement.props.children)
+  
+    const hasWinningSelfParticipant = gameChildren.some((gameChild) => {
+      const gameElement = gameChild as React.ReactElement
+  
+      const participantChildren = React.Children.toArray(gameElement.props.children)
+  
+      return participantChildren.some((participantChild) => {
+        const participantElement = participantChild as React.ReactElement
+        const { self } = participantElement.props
+        return self === true
+      })
+    })
+  
+    return hasWinningSelfParticipant
+  }).length
+
   const bracketChildren = nonSideChildren.map(child =>
-    React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds }) : child
+    React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds, lastRoundWithSelf }) : child
   )
   
   const filteredProps = {...props}
@@ -219,5 +245,6 @@ Layout.Footer = Footer
 Layout.Round = Round
 Layout.Game = Game
 Layout.RoundLabel = RoundLabel
+Layout.Participant = Participant
 
 export default Layout