playbook_ui 14.22.0 → 14.23.0.pre.alpha.PLAY2121enableexpandedfield9199

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

@@ -1,202 +0,0 @@
-/* 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

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

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

@@ -1,71 +0,0 @@
-import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
-
-const WalkthroughDefault = (props) => {
-  const [state, setState] = useState({
-    run: false,
-    steps: [
-      {
-        title: 'Example title',
-        content:
-      'This was an example of a Beacon in the Walkthrough Kit it is used as a simple indicator to inform users about a particular thing',
-        target: '.example',
-      },
-      {
-        title: 'Toggle',
-        content:
-        'By default the walkthrough kit will cycle through each step provided.',
-        target: '.pb_toggle_control',
-      },
-      {
-        title: 'Top Nav',
-        content:
-          'By default the walkthrough kit will cycle through each step provided.',
-        target: '.pb--page--topNav',
-      },
-    ],
-  })
-
-  return (
-    <div>
-      <div
-          className="example"
-          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}
-      />
-    </div>
-  )
-}
-
-export default WalkthroughDefault

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

@@ -1,110 +0,0 @@
-import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
-
-const WalkthroughMultiBeacon = (props) => {
-  const [stateA, setStateA] = useState({
-    run: false,
-    steps: [
-      {
-        title: 'Example title',
-        content:
-          'This was an example of a Beacon in the Walkthrough Kit it is used as a simple indicator to inform users about a particular thing',
-        target: '.exampleMulti',
-      },
-    ],
-  })
-
-  const [stateB, setStateB] = useState({
-    run: false,
-    steps: [
-      {
-        title: 'Toggle',
-        content:
-          'By default the walkthrough kit will cycle through each step provided.',
-        target: '.pb_toggle_control',
-      },
-    ],
-  })
-
-  const [stateC, setStateC] = useState({
-    run: false,
-    steps: [
-      {
-        title: 'Top Nav',
-        content:
-          'By default the walkthrough kit will cycle through each step provided.',
-        target: '.pb--page--topNav',
-      },
-    ],
-  })
-
-  return (
-    <div>
-      <div
-          className="exampleMulti"
-          style={{ 'display': 'inline' }}
-      >
-        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
-      </div>
-      <br />
-      <br />
-      <Button
-          onClick={() => {
-          setStateA({
-            ...stateA,
-            run: true,
-          })
-          setStateB({
-            ...stateB,
-            run: true,
-          })
-          setStateC({
-            ...stateC,
-            run: true,
-          })
-          }}
-      >
-        {'Start Tour'}
-      </Button>
-      <br />
-      <br />
-      <Button
-          onClick={() => {
-          setStateA({
-            ...stateA,
-            run: false,
-          })
-          setStateB({
-            ...stateB,
-            run: false,
-          })
-          setStateC({
-            ...stateC,
-            run: false,
-          })
-        }}
-      >
-        {'Reset/Stop Tour'}
-      </Button>
-
-      <Walkthrough
-          run={stateA.run}
-          steps={stateA.steps}
-          {...props}
-      />
-      <Walkthrough
-          run={stateB.run}
-          steps={stateB.steps}
-          {...props}
-      />
-      <Walkthrough
-          run={stateC.run}
-          steps={stateC.steps}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default WalkthroughMultiBeacon

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

@@ -1,76 +0,0 @@
-import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
-
-const WalkthroughNoBeacon = (props) => {
-  const [state, setState] = useState({
-    callback: (data) => {
-      if (data.action === 'close' && data.type === 'step:after') {
-        // This explicitly stops the tour (otherwise it displays a "beacon" to resume the tour)
-        setState({ ...state, run: false })
-      }
-    },
-    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: '.exampleNoBeacon',
-        disableBeacon: true,
-      },
-      {
-        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="exampleNoBeacon"
-          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 WalkthroughNoBeacon

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

@@ -1,76 +0,0 @@
-import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
-
-const WalkthroughNoOverlay = (props) => {
-  const [noOverlay, setNoOverlayState] = useState({
-    callback: (data) => {
-      if (data.action === 'close' && data.type === 'step:after') {
-        // This explicitly stops the tour (otherwise it displays a "beacon" to resume the tour)
-        setNoOverlayState({ ...noOverlay, run: false })
-      }
-    },
-    disableOverlay: true,
-    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: '.exampleNoOverlay',
-      },
-      {
-        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="exampleNoOverlay"
-          style={{ 'display': 'inline' }}
-      >
-        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
-      </div>
-      <br />
-      <br />
-      <Button
-          onClick={() => {
-            setNoOverlayState({ ...noOverlay,
-              run: true,
-            })
-          }}
-      >
-        {'Start Tour'}
-      </Button>
-      <br />
-      <br />
-      <Button
-          onClick={() => {
-          setNoOverlayState({
-            ...noOverlay,
-            run: false,
-          })
-        }}
-      >
-        {'Reset/Stop Tour'}
-      </Button>
-
-      <Walkthrough
-          disableOverlay
-          run={noOverlay.run}
-          steps={noOverlay.steps}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default WalkthroughNoOverlay

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

@@ -1,76 +0,0 @@
-import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
-
-const WalkthroughStyled = (props) => {
-  const [state, setState] = useState({
-    run: false,
-    steps: [
-      {
-        title: 'Example title',
-        content:
-      'This was an example of a Beacon in the Walkthrough Kit it is used as a simple indicator to inform users about a particular thing',
-        target: '.styled',
-      },
-      {
-        title: 'Toggle',
-        content:
-        'By default the walkthrough kit will cycle through each step provided.',
-        target: '.pb_toggle_control',
-      },
-      {
-        title: 'Top Nav',
-        content:
-          'By default the walkthrough kit will cycle through each step provided.',
-        target: '.pb--page--topNav',
-      },
-    ],
-  })
-
-  return (
-    <div>
-      <div
-          className="styled"
-          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}
-          styles={{
-            options: {
-            beaconSize: 120,
-            },
-          }}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default WalkthroughStyled

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

@@ -1,10 +0,0 @@
-examples:
-  
-  
-  react:
-  - walkthrough_default: Default
-  - walkthrough_continuous: Continuous
-  - walkthrough_no_beacon: No Beacon
-  - walkthrough_no_overlay: No Overlay
-  - walkthrough_multi_beacon: Multi Beacon
-  - walkthrough_styled: Styled

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

@@ -1,6 +0,0 @@
-export { default as WalkthroughDefault } from './_walkthrough_default.jsx'
-export { default as WalkthroughContinuous } from './_walkthrough_continuous.jsx'
-export { default as WalkthroughNoBeacon } from './_walkthrough_no_beacon.jsx'
-export { default as WalkthroughMultiBeacon } from './_walkthrough_multi_beacon.jsx'
-export { default as WalkthroughNoOverlay } from './_walkthrough_no_overlay.jsx'
-export { default as WalkthroughStyled } from './_walkthrough_styled.jsx'