playbook_ui 14.23.0.pre.alpha.play23129273 → 14.23.0.pre.rc.0

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md

@@ -1,3 +1 @@
-The `range` prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the `range` prop.
-
-Note: If the `total` pages prop is 0 or 1, the Pagination component will not be displayed, as there aren't multiple pages to navigate.
+The `range` prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the `range` prop.

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -38,7 +38,6 @@ type PhoneNumberInputProps = {
   required?: boolean,
   value?: string,
   formatAsYouType?: boolean,
-  strictMode?: boolean,
   countrySearch?: boolean,
 }
 
@@ -69,7 +68,7 @@ const containOnlyNumbers = (value: string) => {
   return /^[()+\-\ .\d]*$/g.test(value)
 }
 
-const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>) => {
+const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefObject<unknown>) => {
   const {
     aria = {},
     className,
@@ -95,7 +94,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     preferredCountries = [],
     value = "",
     formatAsYouType = false,
-    strictMode = false,
     countrySearch = false,
   } = props
 
@@ -108,16 +106,15 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     className
   )
 
-  const inputRef = useRef<HTMLInputElement | null>(null)
+  const inputRef = useRef<HTMLInputElement>()
   const itiRef = useRef<any>(null);
   const [inputValue, setInputValue] = useState(value)
   const [error, setError] = useState(props.error)
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
-  const [hasTyped, setHasTyped] = useState(false)
 
   useEffect(() => {
-    if ((error ?? '').length > 0) {
+    if (error?.length > 0) {
       onValidate(false)
     } else {
       onValidate(true)
@@ -134,7 +131,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       clearField() {
         setInputValue("")
         setError("")
-        setHasTyped(false)
       },
       inputNode() {
         return inputRef.current
@@ -205,8 +201,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   const validateErrors = () => {
-    if (!hasTyped && !error) return
-
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
     if (validateOnlyNumbers(itiRef.current)) return
     if (validateTooLongNumber(itiRef.current)) return
@@ -220,7 +214,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
-    if (!hasTyped) setHasTyped(true)
     setInputValue(evt.target.value)
     let phoneNumberData
     if (formatAsYouType) {
@@ -258,7 +251,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       countrySearch: countrySearch,
       fixDropdownWidth: false,
       formatAsYouType: formatAsYouType,
-      strictMode: strictMode,
       hiddenInput: hiddenInputs ? () => ({
         phone: `${name}_full`,
         country: `${name}_country_code`,
@@ -267,17 +259,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
     itiRef.current = telInputInit;
 
-    if (inputRef.current) {
-      inputRef.current.addEventListener("countrychange", (evt: Event) => {
-        const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
-        setSelectedData(phoneNumberData)
-        onChange(phoneNumberData)
-        validateErrors()
-      })
+    inputRef.current.addEventListener("countrychange", (evt: Event) => {
+      const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
+      setSelectedData(phoneNumberData)
+      onChange(phoneNumberData)
+      validateErrors()
+    })
+
+    inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
+    inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
 
-      inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
-      inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
-    }
     if (formatAsYouType) {
       inputRef.current?.addEventListener("input", (evt) => {
         handleOnChange(evt as unknown as React.ChangeEvent<HTMLInputElement>);
@@ -312,16 +303,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
         {...htmlProps}
     >
       <TextInput
-          ref={inputNode => {
-            if (ref) {
-              if (typeof ref === 'function') {
-                ref(inputNode)
-              } else {
-                (ref as React.MutableRefObject<HTMLInputElement | null>).current = inputNode
-              }
+          ref={
+            inputNode => {
+              ref ? ref.current = inputNode : null
+              inputRef.current = inputNode
             }
-            inputRef.current = inputNode
-          }}
+          }
           {...textInputProps}
       />
     </div>

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

@@ -10,7 +10,6 @@ examples:
   - phone_number_input_clear_field: Clearing the Input Field
   - phone_number_input_access_input_element: Accessing the Input Element
   - phone_number_input_format: Format as You Type
-  - phone_number_input_strict_mode: Strict Mode
   - phone_number_input_country_search: Country Search
 
   rails:
@@ -21,6 +20,5 @@ examples:
   - phone_number_input_exclude_countries: Exclude Countries
   - phone_number_input_validation: Form Validation
   - phone_number_input_format: Format as You Type
-  - phone_number_input_strict_mode: Strict Mode
   - phone_number_input_hidden_inputs: Hidden Inputs
   - phone_number_input_country_search: Country Search

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

@@ -7,5 +7,4 @@ export { default as PhoneNumberInputValidation } from './_phone_number_input_val
 export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
 export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
 export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
-export { default as PhoneNumberInputStrictMode } from './_phone_number_input_strict_mode'
 export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -25,8 +25,6 @@ module Playbook
                    default: ""
       prop :format_as_you_type, type: Playbook::Props::Boolean,
                                 default: false
-      prop :strict_mode, type: Playbook::Props::Boolean,
-                         default: false
       prop :hidden_inputs, type: Playbook::Props::Boolean,
                            default: false
       prop :country_search, type: Playbook::Props::Boolean,
@@ -43,7 +41,6 @@ module Playbook
           disabled: disabled,
           error: error,
           formatAsYouType: format_as_you_type,
-          strictMode: strict_mode,
           hiddenInputs: hidden_inputs,
           initialCountry: initial_country,
           label: label,

data/app/pb_kits/playbook/pb_select/select.rb

@@ -24,9 +24,7 @@ module Playbook
       prop :validation_message, type: Playbook::Props::String, default: ""
 
       def classnames
-        ([classname] + [inline_class, compact_class, show_arrow_class])
-          .reject(&:empty?)
-          .join(" ")
+        classname + inline_class + compact_class + show_arrow_class
       end
 
       def all_attributes
@@ -46,7 +44,7 @@ module Playbook
       end
 
       def inline_class
-        inline ? "inline" : ""
+        inline ? " inline " : " "
       end
 
       def compact_class

data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb

@@ -19,7 +19,6 @@
                     value: "checkbox-value",
                     name: "main-checkbox-selectable",
                     indeterminate_main: true,
-                    indeterminate_main_labels: ["", ""],
                     id: "checkbox-selectable"
                 }) %>
             <% end %>

data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx

@@ -20,7 +20,7 @@ const TitleTruncate = (props) => {
           marginBottom="md"
           size={4}
           text={lorem}
-          truncate={1}
+          truncate="1"
           {...props}
       />
 
@@ -32,7 +32,7 @@ const TitleTruncate = (props) => {
           marginBottom="md"
           size={4}
           text={lorem}
-          truncate={2}
+          truncate="2"
           {...props}
       />
 
@@ -43,7 +43,7 @@ const TitleTruncate = (props) => {
       <Title
           size={4}
           text={lorem}
-          truncate={3}
+          truncate="3"
           {...props}
       />
     </Flex>

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

@@ -9,7 +9,6 @@ examples:
   - tooltip_with_icon_circle: Icon Circle Tooltip
   - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip
-  - tooltip_click_open: Click to Open
 
   react:
   - tooltip_default_react: Default

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

@@ -19,75 +19,60 @@ export default class PbTooltip extends PbEnhancedElement {
     }
     
     this.triggerElements.forEach((trigger) => {
-      const method = this.effectiveTriggerMethod
+      const method = this.triggerMethod
       const interactionEnabled = this.tooltipInteraction
 
       if (method === 'click') {
-        trigger.addEventListener('click', (e) => {
-          if (this.useClickToOpen) {
-            e.preventDefault()
-            if (this.isTooltipVisible()) {
-              this.hideTooltip()
-            } else {
-              this.showTooltip(trigger)
-            }
-          } else {
-            this.showTooltip(trigger)
-          }
+        trigger.addEventListener('click', () => {
+          this.showTooltip(trigger)
         })
       } else {
-        if (!this.useClickToOpen) {
-          trigger.addEventListener('mouseenter', () => {
-            clearSafeZoneListener(this)
-            clearTimeout(this.mouseleaveTimeout)
-            this.currentTrigger = trigger
-            const delayOpen = this.delayOpen ? parseInt(this.delayOpen) : TOOLTIP_TIMEOUT
-            this.mouseenterTimeout = setTimeout(() => {
-              this.showTooltip(trigger)
-              if (interactionEnabled) {
-                this.checkCloseTooltip(trigger)
-              }
-            }, delayOpen)
-          })
+        trigger.addEventListener('mouseenter', () => {
+          clearSafeZoneListener(this)
+          clearTimeout(this.mouseleaveTimeout)
+          this.currentTrigger = trigger
+          const delayOpen = this.delayOpen ? parseInt(this.delayOpen) : TOOLTIP_TIMEOUT
+          this.mouseenterTimeout = setTimeout(() => {
+            this.showTooltip(trigger)
+            if (interactionEnabled) {
+              this.checkCloseTooltip(trigger)
+            }
+          }, delayOpen)
+        })
 
-          trigger.addEventListener('mouseleave', () => {
-            clearTimeout(this.mouseenterTimeout)
-            if (this.delayClose) {
-              const delayClose = parseInt(this.delayClose)
-              this.mouseleaveTimeout = setTimeout(() => {
-                if (interactionEnabled) {
-                  this.attachSafeZoneListener()
-                } else {
-                  this.hideTooltip()
-                }
-              }, delayClose)
-            } else {
+        trigger.addEventListener('mouseleave', () => {
+          clearTimeout(this.mouseenterTimeout)
+          if (this.delayClose) {
+            const delayClose = parseInt(this.delayClose)
+            this.mouseleaveTimeout = setTimeout(() => {
               if (interactionEnabled) {
                 this.attachSafeZoneListener()
               } else {
                 this.hideTooltip()
               }
+            }, delayClose)
+          } else {
+            if (interactionEnabled) {
+              this.attachSafeZoneListener()
+            } else {
+              this.hideTooltip()
             }
-          })
+          }
+        })
 
-          if (interactionEnabled) {
-            this.tooltip.addEventListener('mouseenter', () => {
-              clearSafeZoneListener(this)
-            })
+        if (interactionEnabled) {
+          this.tooltip.addEventListener('mouseenter', () => {
+            clearSafeZoneListener(this)
+          })
 
-            this.tooltip.addEventListener('mouseleave', () => {
-              this.attachSafeZoneListener()
-            })
-          }
+          this.tooltip.addEventListener('mouseleave', () => {
+            this.attachSafeZoneListener()
+          })
         }
       }
     })
   }
 
-  isTooltipVisible() {
-    return this.tooltip && this.tooltip.classList.contains('show')
-  }
-
   attachSafeZoneListener() {
     clearSafeZoneListener(this)
     this.safeZoneHandler = (e) => {
@@ -160,7 +145,7 @@ export default class PbTooltip extends PbEnhancedElement {
 
     this.tooltip.classList.add('show')
 
-    if (this.effectiveTriggerMethod === 'click' && !this.useClickToOpen) {
+    if (this.triggerMethod === 'click') {
       clearTimeout(this.autoHideTimeout)
       this.autoHideTimeout = setTimeout(() => {
         this.hideTooltip()
@@ -239,14 +224,6 @@ export default class PbTooltip extends PbEnhancedElement {
     return this.element.dataset.pbTooltipTriggerMethod || 'hover'
   }
 
-  get useClickToOpen() {
-    return this.element.dataset.pbTooltipUseClickToOpen === 'true'
-  }
-
-  get effectiveTriggerMethod() {
-    return this.useClickToOpen ? 'click' : this.triggerMethod
-  }
-
   get tooltipInteraction() {
     return this.element.dataset.pbTooltipInteraction === 'true'
   }

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -21,8 +21,6 @@ module Playbook
       prop :trigger_method, type: Playbook::Props::Enum,
                             values: %w[hover click],
                             default: "hover"
-      prop :use_click_to_open, type: Playbook::Props::Boolean,
-                               default: false
       prop :width
 
       def classname
@@ -48,10 +46,6 @@ module Playbook
         out
       end
 
-      def effective_trigger_method
-        use_click_to_open ? "click" : (trigger_method || "hover")
-      end
-
       def data
         data = Hash(values[:data]).merge(
           pb_tooltip_kit: true,
@@ -60,9 +54,8 @@ module Playbook
           pb_tooltip_trigger_element_id: trigger_element_id,
           pb_tooltip_tooltip_id: tooltip_id,
           pb_tooltip_show_tooltip: true,
-          pb_tooltip_trigger_method: effective_trigger_method,
-          pb_tooltip_interaction: interaction,
-          pb_tooltip_use_click_to_open: use_click_to_open
+          pb_tooltip_trigger_method: trigger_method,
+          pb_tooltip_interaction: interaction
         )
         data = data.merge(pb_tooltip_delay_open: delay_open) if delay_open
         data = data.merge(pb_tooltip_delay_close: delay_close) if delay_close

data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx

@@ -0,0 +1,202 @@
+/* eslint-disable react/no-multi-comp */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+import Joyride, { TooltipRenderProps } from 'react-joyride'
+import Button from '../pb_button/_button'
+import Flex from '../pb_flex/_flex'
+import SectionSeparator from '../pb_section_separator/_section_separator'
+import Title from '../pb_title/_title'
+
+type WalkthroughProps = {
+  aria?: { [key: string]: string },
+  callback?: () => void,
+  className?: string,
+  continuous?: boolean,
+  data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string,
+  run?: boolean,
+  steps?: [],
+  stepIndex?: number,
+  debug?: boolean,
+  disableCloseOnEsc?: boolean,
+  disableOverlay?: boolean,
+  disableOverlayClose?: boolean,
+  disableScrolling?: boolean,
+  floaterProps?: Record<string, unknown>,
+  hideBackButton?: boolean,
+  hideCloseButton?: boolean,
+  showProgress?: boolean,
+  showSkipButton?: boolean,
+  spotlightClicks?: boolean,
+  spotlightPadding?: number,
+  styles?: {
+    options: {
+      beaconSize?: number,
+      arrowColor?: string,
+      backgroundColor?: string,
+      primaryColor?: string,
+      overlayColor?: string,
+      spotlightShadow?: string,
+      width?: number,
+      zIndex?: number,
+    },
+  },
+}
+
+type TooltipProps = {
+  continuous?: boolean,
+  className?: string,
+  index?: number,
+  isLastStep?: boolean,
+  size?: number,
+  step: {
+    title?: string,
+    content?: React.ReactNode[] | React.ReactNode | string,
+    target: string,
+    disableBeacon?: boolean,
+  },
+  skip?: boolean,
+  backProps?: Record<string, unknown>,
+  closeProps?: Record<string, unknown>,
+  primaryProps?: Record<string, unknown>,
+  skipProps?: Record<string, unknown>,
+  tooltipProps?: Record<string, unknown>,
+}
+
+// eslint-disable-next-line react/display-name
+const Tooltip = React.forwardRef((props: TooltipProps) => (
+<div
+    className="pb_card_kit_border_none p_none"
+    {...props.tooltipProps}
+>
+  {props.step.title && <div>
+  <Flex
+      align="center"
+      justify="between"
+      padding="xs"
+  >
+      <Title
+          paddingLeft="xs"
+          size={4}
+      >
+      {props.step.title}
+      </Title>
+      {props.skip && (
+      <Button
+          {...props.skipProps}
+          id="skip"
+          text="Skip Tour"
+          variant="link"
+      />
+      )}
+      <Button
+          {...props.skipProps}
+          id="skip"
+          text="Skip Tour"
+          variant="link"
+      />
+  </Flex>
+  <SectionSeparator />
+  </div>}
+
+  <Flex padding="sm">{props.step.content}</Flex>
+  <SectionSeparator />
+  <Flex
+      justify={props.index == 0 ? 'end' : 'between'}
+      padding="xs"
+  >
+
+  {props.index > 0 && (
+      <Button
+          {...props.backProps}
+          id="back"
+          text="Back"
+      />
+  )}
+
+  {props.continuous && !props.isLastStep &&
+      <Button
+          {...props.primaryProps}
+          id="next"
+          text="Next"
+      />
+  }
+
+  {!props.continuous &&
+      <Button
+          {...props.closeProps}
+          id="close"
+          text="Close"
+      />
+  }
+
+  {!((props.continuous && !props.isLastStep) || (!props.continuous)) &&
+      <Button
+          {...props.closeProps}
+          id="close"
+          text="Close"
+      />
+  }
+  </Flex>
+</div>
+)) as unknown as React.ForwardRefRenderFunction<HTMLDivElement, TooltipRenderProps>
+
+const Walkthrough = (props: WalkthroughProps): React.ReactElement => {
+  const {
+    aria = {},
+    callback,
+    className,
+    continuous = false,
+    data = {},
+    disableOverlay,
+    floaterProps = {
+      offset: 50,
+    },
+    htmlOptions = {},
+    id,
+    run = false,
+    steps,
+    styles = {
+      options: {
+        zIndex: 20000,
+      },
+    },
+    showSkipButton,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+  const classes = classnames(buildCss('pb_walkthrough'), globalProps(props), className)
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
+    >
+      <Joyride
+          callback={callback}
+          continuous={continuous}
+          disableOverlay={disableOverlay}
+          disableScrolling
+          floaterProps={floaterProps}
+          run={run}
+          showSkipButton={showSkipButton}
+          steps={steps}
+          styles={styles}
+          tooltipComponent={Tooltip}
+          {...props}
+      />
+    </div>
+
+  )
+}
+
+export default Walkthrough

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react'
+import Button from '../../pb_button/_button'
+import Walkthrough from '../../pb_walkthrough/_walkthrough'
+
+const WalkthroughContinuous = (props) => {
+  const [state, setState] = useState({
+    run: false,
+    steps: [
+      {
+        title: 'Example Title',
+        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
+        target: '.examplePaused',
+      },
+      {
+        title: 'Toggle',
+        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
+        target: '.pb_toggle_control',
+      },
+      {
+        title: 'Top Nav',
+        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
+        target: '.pb--page--topNav',
+      },
+    ],
+  })
+
+  return (
+    <div>
+      <div
+          className="examplePaused"
+          style={{ 'display': 'inline' }}
+      >
+        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
+      </div>
+      <br />
+      <br />
+      <Button
+          onClick={() => {
+            setState({ ...state,
+              run: true,
+            })
+          }}
+      >
+        {'Start Tour'}
+      </Button>
+      <br />
+      <br />
+      <Button
+          onClick={() => {
+          setState({
+            ...state,
+            run: false,
+          })
+        }}
+      >
+        {'Reset/Stop Tour'}
+      </Button>
+
+      <Walkthrough
+          run={state.run}
+          steps={state.steps}
+          {...props}
+          continuous
+      />
+    </div>
+  )
+}
+
+export default WalkthroughContinuous