playbook_ui 10.1.0 → 10.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4eac1f539de9ef040a2d8a04d06f67006e1f7fe858a2161cbc526a8303c66ff7
-  data.tar.gz: 91710c901df8071c7d3752a8d10c57a2595ae014137cc021cb65c7b43ef71e4f
+  metadata.gz: a9fd55f16835a1073493a29d621ad19b241227468c076a28e7013b3e29b82f72
+  data.tar.gz: cfd6aef62c32ae2cf2faeaa99a140c52c0a8122cd79642aed4d541763f1f309c
 SHA512:
-  metadata.gz: c922a03b5f6f030294fe9765db29f0e30ad2efda6667269a68a77c438d809fc9c57fc40f3096d4bcf54710e3814e34feb6c8b71d347691577c7d68c717860bea
-  data.tar.gz: e074aa18cee2a0a17211040f8891f6e29625fdc9dc256399961702aa20680be8ec6ea5185af4dfd23573e982790c7709c03917e65ecb766f730bdbafc80508f8
+  metadata.gz: 61c3601c29b6264c195645f04116cb6cbc6904d9d6c331ba74eae3e877ae5a46b9f159fd3985913a28ab4c89a676167343262ae224db1ec7c4eaf51291de0578
+  data.tar.gz: 51a04ad2daeb8c89758c471f42d13adc28a28f677d626c41cbf1f3640bcb434d776c000d04286d8e3d2b2804ce2a2701236bff11a58a9c3d132ae2813a5481a8

data/app/pb_kits/playbook/_playbook.scss

@@ -90,6 +90,7 @@
 @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,3 +101,4 @@ kits:
     - title_count
     - title_detail
   - user_badge
+  - walkthrough

data/app/pb_kits/playbook/index.js

@@ -4,6 +4,7 @@ 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_nav/_horizontal_nav.scss

@@ -99,7 +99,7 @@ $selector: ".pb_nav_list";
         border-color: rgba($white, $opacity_3);
       }
       &[class*=_active] [class*=_link]{
-        border-color: $white;
+        border-color: $active_dark;
         [class*=_text],[class*=_icon]{
           color: $text_dk_default;
         }

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss

@@ -23,8 +23,6 @@
   overflow-x: auto;
 }
 [class^=pb_rich_text_editor_kit] {
-  // Fixes flex container resizing bug
-  overflow-x: auto;
   // Disables File Attatchment Button in Toolbar
   trix-toolbar [data-trix-button-group="file-tools"] {
     display: none;

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

@@ -0,0 +1,197 @@
+/* eslint-disable react/display-name */
+/* eslint-disable no-unused-vars */
+
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+import Joyride 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?: 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
+      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"
+      />
+        )}
+      <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>
+  </div>
+))
+
+const Walkthrough = (props: WalkthroughProps) => {
+  const {
+    aria = {},
+    callback,
+    className,
+    continuous = false,
+    data = {},
+    disableOverlay,
+    floaterProps = {
+      offset: 50,
+    },
+    id,
+    run = false,
+    steps,
+    styles = {
+      options: {
+        zIndex: 20000,
+      },
+    },
+    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
+          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,68 @@
+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

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

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

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

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

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

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

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

@@ -0,0 +1,34 @@
+/* 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')
+})

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,9 +94,10 @@ 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.registerComponents({
+WebpackerReact.setup({
   ...Avatar,
   ...AvatarActionButton,
   ...Background,
@@ -187,9 +188,6 @@ WebpackerReact.registerComponents({
   ...Typeahead,
   ...User,
   ...UserBadge,
+  ...Walkthrough,
   ...WeekdayStacked,
 })
-ujs.setup(
-  () => WebpackerReact.mountComponents(),
-  () => WebpackerReact.unmountComponents()
-)

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.0.1"
-  VERSION = "10.1.0"
+  PREVIOUS_VERSION = "10.2.1"
+  VERSION = "10.3.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.1.0
+  version: 10.3.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-07-14 00:00:00.000000000 Z
+date: 2021-07-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -221,22 +221,22 @@ dependencies:
   name: rspec-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.8'
     - - ">="
       - !ruby/object:Gem::Version
         version: 3.8.0
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.8'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.8'
     - - ">="
       - !ruby/object:Gem::Version
         version: 3.8.0
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.8'
 - !ruby/object:Gem::Dependency
   name: rubocop
   requirement: !ruby/object:Gem::Requirement
@@ -1958,6 +1958,17 @@ 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
@@ -2069,8 +2080,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubyforge_project:
-rubygems_version: 2.7.3
+rubygems_version: 3.0.3
 signing_key:
 specification_version: 4
 summary: Playbook Design System