playbook_ui 10.0.3.pre.alpha.walkthrough2 → 10.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a0d7b0a5f03e8c5d72349aa1f47d8676503726e773004908182f3f8bd5b561fb
-  data.tar.gz: 7b7d054667d75d26ac8ab67f5d6a28892da6904c9b599a7ec26866b2d86aad2b
+  metadata.gz: 4eac1f539de9ef040a2d8a04d06f67006e1f7fe858a2161cbc526a8303c66ff7
+  data.tar.gz: 91710c901df8071c7d3752a8d10c57a2595ae014137cc021cb65c7b43ef71e4f
 SHA512:
-  metadata.gz: fb4e5c64ae4259353b33fc55bceda5714af43cfdd481d9efc3d559ece69593f0c91d5cff29258ba1e132f83491a68f51bfc21228448497615385b73476b47a03
-  data.tar.gz: 350362aa3f56caa426c3e1cdb765f8cf2821ce585a7d638b635c655f98ed3dabe614f6d71703e650b6a2ef11b12e2db7bdfacf858d09a7e80a7b8802c76665b2
+  metadata.gz: c922a03b5f6f030294fe9765db29f0e30ad2efda6667269a68a77c438d809fc9c57fc40f3096d4bcf54710e3814e34feb6c8b71d347691577c7d68c717860bea
+  data.tar.gz: e074aa18cee2a0a17211040f8891f6e29625fdc9dc256399961702aa20680be8ec6ea5185af4dfd23573e982790c7709c03917e65ecb766f730bdbafc80508f8

data/app/pb_kits/playbook/_playbook.scss

@@ -90,7 +90,6 @@
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';
 @import 'pb_time_stacked/time_stacked';
-@import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import './utilities/spacing';
 @import './utilities/max_width';

data/app/pb_kits/playbook/data/menu.yml

@@ -101,4 +101,3 @@ kits:
     - title_count
     - title_detail
   - user_badge
-  - walkthrough

data/app/pb_kits/playbook/index.js

@@ -4,7 +4,6 @@ import 'lazysizes/plugins/attrchange/ls.attrchange'
 import 'lazysizes'
 
 // vvv React Component JSX Imports from the React Kits vvv
-export { default as Walkthrough } from './pb_walkthrough/_walkthrough'
 export { default as Avatar } from './pb_avatar/_avatar'
 export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar_action_button'
 export { default as Background } from './pb_background/_background'

data/app/pb_kits/playbook/pb_popover/_popover.scss

@@ -19,14 +19,6 @@
   to {
     opacity: 0;
   }
-  .pb_popover_body {
-    @include pb_card;
-    border: 0;
-    box-shadow: $shadow_deeper;
-  }
-  .overflow_handling {
-    overflow: auto;
-  }
 }
 
 .pb_popover_tooltip {

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

@@ -1,6 +1,6 @@
-/* eslint-disable no-unused-vars */
 // !!! IMPORTANT: This file is autogenerated. Please do not edit.!!!
 import WebpackerReact from 'webpacker-react'
+import ujs from 'webpacker-react/ujs'
 
 // KIT EXAMPLES
 import 'pb_form/pb_form_validation'
@@ -94,10 +94,9 @@ import * as Toggle from 'pb_toggle/docs'
 import * as Typeahead from 'pb_typeahead/docs'
 import * as User from 'pb_user/docs'
 import * as UserBadge from 'pb_user_badge/docs'
-import * as Walkthrough from 'pb_walkthrough/docs'
 import * as WeekdayStacked from 'pb_weekday_stacked/docs'
 
-WebpackerReact.setup({
+WebpackerReact.registerComponents({
   ...Avatar,
   ...AvatarActionButton,
   ...Background,
@@ -188,6 +187,9 @@ WebpackerReact.setup({
   ...Typeahead,
   ...User,
   ...UserBadge,
-  ...Walkthrough,
   ...WeekdayStacked,
 })
+ujs.setup(
+  () => WebpackerReact.mountComponents(),
+  () => WebpackerReact.unmountComponents()
+)

data/app/pb_kits/playbook/playbook-rails-react-bindings.js

@@ -14,7 +14,6 @@ import LineGraph from './pb_line_graph/_line_graph'
 import Passphrase from './pb_passphrase/_passphrase'
 import RichTextEditor from './pb_rich_text_editor/_rich_text_editor'
 import Typeahead from './pb_typeahead/_typeahead'
-import Walkthrough from './pb_walkthrough/_walkthrough'
 
 WebpackerReact.registerComponents({
   BarGraph,
@@ -28,7 +27,6 @@ WebpackerReact.registerComponents({
   Passphrase,
   RichTextEditor,
   Typeahead,
-  Walkthrough,
 })
 
 ujs.setup(

data/dist/reset.css

@@ -1,61 +1,2 @@
-/* CLEAN UP AND REMOVE */
-/* Headings */
-/* Standard Font Weights */
-/* Non_Standard Font Weights */
-/*=====================================
-Base colors should not be documented.
-Only document color use.
-
-Colors -----------------------------*/
-/* Specialty Gradient -----------------*/
-/* Interface colors -------------------*/
-/* Main colors ------------------------*/
-/*=====================================
-
-Background colors ------------------*/
-/* Card colors ------------------*/
-/* Active colors ----------------------*/
-/* Hover colors -----------------------*/
-/* Focus colors -----------------------*/
-/* Border colors ----------------------*/
-/* Shadow colors ----------------------*/
-/* Text colors ------------------------*/
-/* Data colors ------------------------*/
-/* Status colors ----------------------*/
-/* Link colors ------------------------*/
-/* Product colors ---------------------*/
-/* Category colors ---------------------*/
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0; }
-  *:before, *:after {
-    box-sizing: border-box; }
-
-html {
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  height: 100vh;
-  overflow-x: hidden; }
-
-body {
-  font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
-  font-size: 16px;
-  line-height: 1.5;
-  background-color: #F3F7FB;
-  height: 100%;
-  letter-spacing: 0;
-  font-weight: 400;
-  font-style: normal;
-  text-rendering: optimizeLegibility;
-  -moz-font-feature-settings: "liga" on;
-  color: #242B42;
-  margin: 0 !important;
-  padding: 0 !important;
-  box-sizing: border-box;
-  min-height: 100vh;
-  padding: 50px; }
-
-a {
-  text-decoration: none;
-  color: #0056CF; }
+*{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans_serif;font-size:16px;line-height:1.5;background-color:#F3F7FB;height:100%;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242B42;margin:0 !important;padding:0 !important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056CF}
 

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.0.0"
-  VERSION = "10.0.3.pre.alpha.walkthrough2"
+  PREVIOUS_VERSION = "10.0.1"
+  VERSION = "10.1.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.0.3.pre.alpha.walkthrough2
+  version: 10.1.0
 platform: ruby
 authors:
 - Power UX
@@ -1958,17 +1958,6 @@ files:
 - app/pb_kits/playbook/pb_user_badge/docs/index.js
 - app/pb_kits/playbook/pb_user_badge/user_badge.html.erb
 - app/pb_kits/playbook/pb_user_badge/user_badge.rb
-- app/pb_kits/playbook/pb_walkthrough/_walkthrough.jsx
-- app/pb_kits/playbook/pb_walkthrough/_walkthrough.scss
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/example.yml
-- app/pb_kits/playbook/pb_walkthrough/docs/index.js
-- app/pb_kits/playbook/pb_walkthrough/walkthrough.test.jsx
 - app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx
 - app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.scss
 - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.html.erb
@@ -2076,9 +2065,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubyforge_project:
 rubygems_version: 2.7.3

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

@@ -1,194 +0,0 @@
-/* eslint-disable react/display-name */
-/* eslint-disable no-unused-vars */
-
-/* @flow */
-
-import React, { useState } from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
-import Joyride, { ACTIONS, EVENTS, STATUS } from 'react-joyride'
-import CircleIconButton from '../pb_circle_icon_button/_circle_icon_button'
-import Button from '../pb_button/_button'
-import Card from '../pb_card/_card'
-import Flex from '../pb_flex/_flex'
-import SectionSeparator from '../pb_section_separator/_section_separator'
-import Title from '../pb_title/_title'
-
-type WalkthroughProps = {
-  aria?: object,
-  callback?: () => void,
-  className?: string,
-  continuous?: boolean,
-  data?: object,
-  id?: string,
-  run?: boolean,
-  steps?: array,
-  stepIndex?: number,
-  debug?: Boolean,
-  disableCloseOnEsc?: Boolean,
-  disableOverlay?: Boolean,
-  disableOverlayClose?: Boolean,
-  disableScrolling?: Boolean,
-  floaterProps?: object,
-  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?: array<React.ReactNode> | React.ReactNode | String,
-      target: String,
-      disableBeacon?: Boolean,
-    },
-    skip?: Boolean,
-    backProps?: object,
-    closeProps?: object,
-    primaryProps?: object,
-    skipProps?: object,
-    tooltipProps?: object,
-  }
-
-const Tooltip = React.forwardRef((props: TooltipProps, ref) => (
-  <div
-      {...props.tooltipProps}
-  >
-    <Card
-        borderNone
-        padding="none"
-    >
-      {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"
-          />
-        )}
-        <Choose>
-          <When condition={props.continuous && !props.isLastStep}>
-            <Button
-                {...props.primaryProps}
-                id="next"
-                text="Next"
-            />
-          </When>
-          <When condition={!props.continuous}>
-            <Button
-                {...props.closeProps}
-                id="close"
-                text="Close"
-            />
-          </When>
-          <Otherwise>
-            <Button
-                {...props.closeProps}
-                id="close"
-                text="Close"
-            />
-          </Otherwise>
-        </Choose>
-      </Flex>
-    </Card>
-  </div>
-))
-
-const Walkthrough = (props: WalkthroughProps) => {
-  const {
-    aria = {},
-    callback,
-    className,
-    continuous = false,
-    data = {},
-    disableOverlay,
-    id,
-    run = false,
-    steps,
-    styles,
-    showSkipButton,
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_walkthrough'), globalProps(props), className)
-
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      <Joyride
-          callback={callback}
-          continuous={continuous}
-          disableOverlay={disableOverlay}
-          disableScrolling
-          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,68 +0,0 @@
-import React, { useState } from 'react'
-import { Button, Walkthrough } from '../../'
-
-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,70 +0,0 @@
-import React, { useState } from 'react'
-import { Button, Walkthrough } from '../../'
-
-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,109 +0,0 @@
-import React, { useState } from 'react'
-import { Button, Walkthrough } from '../../'
-
-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,75 +0,0 @@
-import React, { useState } from 'react'
-import { Button, Walkthrough } from '../../'
-
-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,75 +0,0 @@
-import React, { useState } from 'react'
-import { Button, Walkthrough } from '../../'
-
-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,75 +0,0 @@
-import React, { useState } from 'react'
-import { Button, Walkthrough } from '../../'
-
-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'

data/app/pb_kits/playbook/pb_walkthrough/walkthrough.test.jsx

@@ -1,34 +0,0 @@
-/* eslint-disable no-unused-vars */
-import { ensureAccessible, render, renderKit, screen } from '../utilities/test-utils'
-import React from 'react'
-import { Walkthrough } from '../'
-
-/* See these resources for more testing info:
-  - https://github.com/testing-library/jest-dom#usage for useage and examples
-  - https://jestjs.io/docs/en/using-matchers
-*/
-
-const testId = 'walkthroughKitTest',
-  kitClass = 'pb_walkthrough'
-
-test('expect kit to exist', () => {
-  const props = {
-    data: { testid: testId },
-  }
-
-  const kit = renderKit(Walkthrough, props)
-  expect(kit).toBeInTheDocument()
-  expect(kit).toHaveClass(kitClass)
-})
-
-test('returns namespaced class name', () => {
-  render(
-    <Walkthrough
-        className="additional_class"
-        data={{ testid: testId }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass('additional_class')
-})