playbook_ui 14.23.0.pre.alpha.PLAY2138advtableselectablerowsindeterminatecheckboxes9289 → 14.23.0.pre.alpha.PLAY2146dropdownactivestylesreact9141

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -3,8 +3,6 @@
 module Playbook
   module PbAdvancedTable
     class TableHeader < Playbook::KitBase
-      prop :id, type: Playbook::Props::String,
-                default: ""
       prop :column_definitions, type: Playbook::Props::Array,
                                 default: []
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
@@ -58,10 +56,8 @@ module Playbook
                      classname: additional_classes.join(" "),
                    }) do
             pb_rails("checkbox", props: {
-                       id: "#{id ? "#{id}-" : ''}select-all-rows",
-                       indeterminate_main: true,
-                       indeterminate_main_labels: ["", ""],
-                       name: "#{id ? "#{id}-" : ''}select-all-rows",
+                       id: "select-all-rows",
+                       name: "select-all-rows",
                      })
           end
         end
@@ -71,10 +67,8 @@ module Playbook
       def render_select_all_checkbox
         if selectable_rows
           pb_rails("checkbox", props: {
-                     id: "#{id ? "#{id}-" : ''}select-all-rows",
-                     indeterminate_main: true,
-                     indeterminate_main_labels: ["", ""],
-                     name: "#{id ? "#{id}-" : ''}select-all-rows",
+                     id: "select-all-rows",
+                     name: "select-all-rows",
                      data: {
                        action: "click->pb-advanced-table#toggleAllRowSelection",
                      },

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -29,10 +29,6 @@ module Playbook
                                      default: "header"
       prop :row_styling, type: Playbook::Props::Array,
                          default: []
-      prop :last_row, type: Playbook::Props::Boolean,
-                      default: false
-      prop :immediate_parent_row_id, type: Playbook::Props::String,
-                                     default: ""
 
       def data
         Hash(prop(:data)).merge(table_data_attributes)
@@ -58,14 +54,12 @@ module Playbook
       # Selectable Rows No Subrows - checkboxes in their own first cell
       def render_checkbox_cell
         if selectable_rows
-          prefix = id ? "#{id}-" : ""
           pb_rails("table/table_cell", props: {
                      classname: "checkbox-cell",
                    }) do
             pb_rails("checkbox", props: {
-                       id: "#{prefix}select-row-#{row_id || row.object_id}",
-                       indeterminate_parent: "#{id ? "#{id}-" : ''}select-all-rows",
-                       name: "#{prefix}select-row-#{row_id || row.object_id}",
+                       id: "select-row-#{row_id || row.object_id}",
+                       name: "select-row-#{row_id || row.object_id}",
                        data: {
                          row_id: row_id || row.object_id.to_s,
                          flat_advanced_table_select: true,
@@ -78,20 +72,9 @@ module Playbook
       # Selectable Rows w/ Subrows - checkboxes part of toggleable first cell
       def render_row_checkbox
         if selectable_rows
-          prefix = id ? "#{id}-" : ""
-          indeterminate_parent =
-            if depth.zero?
-              "#{prefix}select-all-rows"
-            else
-              "#{prefix}select-row-#{immediate_parent_row_id}"
-            end
-
           pb_rails("checkbox", props: {
-                     id: "#{prefix}select-row-#{row_id || row.object_id}",
-                     indeterminate_main: !last_row,
-                     indeterminate_main_labels: ["", ""],
-                     indeterminate_parent: indeterminate_parent,
-                     name: "#{prefix}select-row-#{row_id || row.object_id}",
+                     id: "select-row-#{row_id || row.object_id}",
+                     name: "select-row-#{row_id || row.object_id}",
                      data: {
                        row_id: row_id || row.object_id.to_s,
                      },

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

@@ -10,239 +10,49 @@ export default class PbCheckbox extends PbEnhancedElement {
   connect() {
     const mainCheckboxWrapper = this.element;
     const mainCheckbox = mainCheckboxWrapper.querySelector('input')
-    const directChildCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
+    const childCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
 
-    // Helper function to get all descendant checkboxes
-    const getAllDescendantCheckboxes = () => {
-      const descendants = [];
-      const queue = [...directChildCheckboxes];
-      
-      // Breadth-first search to find all nested descendants
-      while (queue.length > 0) {
-        const checkbox = queue.shift();
-        descendants.push(checkbox);
-        
-        // Find children of this checkbox
-        const checkboxWrapper = checkbox.closest('[data-pb-checkbox-indeterminate-main="true"]');
-        if (checkboxWrapper) {
-          const childCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${checkboxWrapper.id}"] input[type="checkbox"]`);
-          queue.push(...childCheckboxes);
-        }
-      }
-      
-      // Also include any non-"main" checkboxes that have this as a parent
-      const nonMainChildCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
-      nonMainChildCheckboxes.forEach(cb => {
-        if (!descendants.includes(cb)) {
-          descendants.push(cb);
-        }
-      });
-      
-      return descendants;
-    };
-
-    // Helper function to determine checkbox state
-    const getCheckboxState = (checkboxes) => {
-      const checkedCount = checkboxes.filter(cb => cb.checked).length;
-      const totalCount = checkboxes.length;
-      
-      return {
-        allChecked: checkedCount === totalCount,
-        noneChecked: checkedCount === 0,
-        indeterminate: !(checkedCount === totalCount || checkedCount === 0),
-        checkedCount,
-        totalCount
-      };
-    };
-
-    // Helper function to update checkbox visual state
-    const updateCheckboxVisualState = (checkbox, isIndeterminate, isChecked) => {
-      checkbox.indeterminate = isIndeterminate;
-      checkbox.checked = isChecked;
-    };
-
-    // Helper function to update checkbox label and icons
-    const updateCheckboxLabelAndIcons = (wrapper, isIndeterminate, checkedCount) => {
-      const checkAllLabel = wrapper.dataset.pbCheckboxIndeterminateMainLabelCheck ?? 'Check All';
-      const uncheckAllLabel = wrapper.dataset.pbCheckboxIndeterminateMainLabelUncheck ?? 'Uncheck All';
+    const updateMainCheckbox = () => {
+      // Count the number of checked child checkboxes
+      const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
+      // Determine if the main checkbox should be in an indeterminate state
+      const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
+      
+      // Set the main checkbox states
+      mainCheckbox.indeterminate = indeterminate;
+      mainCheckbox.checked = checkedCount > 0;
+
+      // Determine the main checkbox label based on the number of checked checkboxes
+      const checkAllLabel = mainCheckboxWrapper.dataset.pbCheckboxIndeterminateMainLabelCheck ?? 'Check All'
+      const uncheckAllLabel = mainCheckboxWrapper.dataset.pbCheckboxIndeterminateMainLabelUncheck ?? 'Uncheck All'
       const text = checkedCount === 0 ? checkAllLabel : uncheckAllLabel;
 
-      // Update label
-      const bodyKitElement = wrapper.getElementsByClassName('pb_body_kit')[0];
-      if (bodyKitElement) {
-        bodyKitElement.textContent = text;
-      }
-      
-      // Update icons
-      const iconSpan = wrapper.querySelector('[data-pb-checkbox-icon-span]');
-      if (iconSpan) {
-        const iconClassToAdd = isIndeterminate ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
-        const iconClassToRemove = isIndeterminate ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
-        iconSpan.classList.add(iconClassToAdd);
-        iconSpan.classList.remove(iconClassToRemove);
-      }
-      
-      // Toggle icon visibility
-      const indeterminateIcon = wrapper.getElementsByClassName("indeterminate_icon")[0];
-      const checkIcon = wrapper.getElementsByClassName("check_icon")[0];
-      
-      if (indeterminateIcon) {
-        indeterminateIcon.classList.toggle('hidden', !isIndeterminate);
-      }
-      if (checkIcon) {
-        checkIcon.classList.toggle('hidden', isIndeterminate);
-      }
-    };
+      // Determine the icon class to add and remove based on the number of checked checkboxes
+      const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
+      const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
 
-    // Main function to update this checkbox's state
-    const updateMainCheckbox = () => {
-      const allDescendantCheckboxes = getAllDescendantCheckboxes();
-      const state = getCheckboxState(allDescendantCheckboxes);
+      // Update main checkbox label
+      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
       
-      updateCheckboxVisualState(mainCheckbox, state.indeterminate, state.allChecked);
-      updateCheckboxLabelAndIcons(mainCheckboxWrapper, state.indeterminate, state.checkedCount);
-    };
-
-    // Function to update parent checkboxes recursively
-    const updateParentCheckboxes = () => {
-      const parentId = mainCheckboxWrapper.dataset.pbCheckboxIndeterminateParent;
-      if (parentId) {
-        const parentCheckbox = document.getElementById(parentId);
-        if (parentCheckbox) {
-          const parentWrapper = parentCheckbox.closest('[data-pb-checkbox-indeterminate-main="true"]');
-          if (parentWrapper) {
-            const parentInstance = parentWrapper.pbCheckboxInstance;
-            if (parentInstance && parentInstance.updateMainCheckbox) {
-              parentInstance.updateMainCheckbox();
-              parentInstance.updateParentCheckboxes();
-            }
-          }
-        }
-      }
-    };
-
-    // Function to update non-main checkboxes when their children change
-    const setupNonMainCheckboxUpdates = () => {
-      const allCheckboxesWithChildren = document.querySelectorAll('input[type="checkbox"]');
-      allCheckboxesWithChildren.forEach(cb => {
-        const checkboxWrapper = cb.closest('[data-pb-checkbox-indeterminate-main="true"]');
-        if (checkboxWrapper && checkboxWrapper !== mainCheckboxWrapper) {
-          return; // Skip different "main" checkboxes
-        }
-        
-        const childCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${cb.id}"] input[type="checkbox"]`);
-        if (childCheckboxes.length > 0) {
-          childCheckboxes.forEach(childCb => {
-            childCb.addEventListener('change', () => {
-              const state = getCheckboxState(Array.from(childCheckboxes));
-              updateCheckboxVisualState(cb, state.indeterminate, state.allChecked);
-              
-              // Trigger updates on all main checkboxes that might be affected
-              const mainCheckboxes = document.querySelectorAll('[data-pb-checkbox-indeterminate-main="true"]');
-              mainCheckboxes.forEach(mainCb => {
-                const mainInstance = mainCb.pbCheckboxInstance;
-                if (mainInstance && mainInstance.updateMainCheckbox) {
-                  setTimeout(() => {
-                    mainInstance.updateMainCheckbox();
-                  }, 0);
-                }
-              });
-            });
-          });
-        }
-      });
+      // Add and remove the icon class to the main checkbox wrapper
+      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
+      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
+      
+      // Toggle the visibility of the checkbox icon based on the indeterminate state
+      mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
+      mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
     };
 
-
-
-    // Initialize checkbox state
+    // Set indeterminate icon on main checkbox if initial children checkboxes are checked
     updateMainCheckbox();
 
-    // Handle main checkbox change - propagate to all descendants
-    mainCheckbox.addEventListener('change', function() {
-      const allDescendantCheckboxes = getAllDescendantCheckboxes();
-      const state = getCheckboxState(allDescendantCheckboxes);
-      
-      if (state.indeterminate) {
-        // If indeterminate, uncheck all descendants and the parent
-        allDescendantCheckboxes.forEach(cb => {
-          cb.checked = false;
-          // Dispatch custom event for programmatic changes- change styles in advanced table
-          cb.dispatchEvent(new Event('checkbox-programmatic-change', { bubbles: true }));
-        });
-        this.checked = false;
-      } else {
-        // Otherwise, set all descendants to the same state as this checkbox
-        allDescendantCheckboxes.forEach(cb => {
-          cb.checked = this.checked;
-          // Dispatch custom event for programmatic changes- change styles in advanced table
-          cb.dispatchEvent(new Event('checkbox-programmatic-change', { bubbles: true }));
-        });
-      }
-      
-      // Update this checkbox first, then parents after a delay
+    this.element.querySelector('input').addEventListener('change', function() {
+      childCheckboxes.forEach(cb => cb.checked = this.checked);
       updateMainCheckbox();
-      setTimeout(() => {
-        updateParentCheckboxes();
-      }, 0);
-      
-      // Also trigger updates on all main checkboxes to ensure proper state propagation
-      triggerAllMainCheckboxUpdates();
     });
 
-    // Handle child checkbox changes
-    directChildCheckboxes.forEach(cb => {
+    childCheckboxes.forEach(cb => {
       cb.addEventListener('change', updateMainCheckbox);
     });
-
-    // Handle deeper descendant changes
-    const allDescendantCheckboxes = getAllDescendantCheckboxes();
-    allDescendantCheckboxes.forEach(cb => {
-      if (!Array.from(directChildCheckboxes).includes(cb)) {
-        cb.addEventListener('change', updateMainCheckbox);
-      }
-    });
-
-    // Handle non-main child checkboxes
-    const allChildCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
-    allChildCheckboxes.forEach(cb => {
-      if (!allDescendantCheckboxes.includes(cb)) {
-        cb.addEventListener('change', updateMainCheckbox);
-      }
-    });
-    
-    // Also trigger updates on all main checkboxes when any checkbox changes
-    let updateTimeout = null;
-    const triggerAllMainCheckboxUpdates = () => {
-      // Debounce the updates to prevent excessive calls
-      if (updateTimeout) {
-        clearTimeout(updateTimeout);
-      }
-      updateTimeout = setTimeout(() => {
-        const mainCheckboxes = document.querySelectorAll('[data-pb-checkbox-indeterminate-main="true"]');
-        mainCheckboxes.forEach(mainCb => {
-          const mainInstance = mainCb.pbCheckboxInstance;
-          if (mainInstance && mainInstance.updateMainCheckbox) {
-            mainInstance.updateMainCheckbox();
-          }
-        });
-      }, 10); // Small delay to batch updates
-    };
-    
-    // Store the original updateMainCheckbox function and create a new one that also triggers updates
-    const originalUpdateMainCheckbox = updateMainCheckbox;
-    const enhancedUpdateMainCheckbox = () => {
-      originalUpdateMainCheckbox();
-      triggerAllMainCheckboxUpdates();
-    };
-    
-    // Replace the updateMainCheckbox function
-    mainCheckboxWrapper.pbCheckboxInstance = {
-      updateMainCheckbox: enhancedUpdateMainCheckbox,
-      updateParentCheckboxes
-    };
-
-    // Setup updates for non-main checkboxes with children
-    setupNonMainCheckboxUpdates();
   }
 }

data/app/pb_kits/playbook/pb_pagination/_pagination.tsx

@@ -134,10 +134,6 @@ const Pagination = ( props: PaginationProps) => {
     className
   )
 
-  if (total <= 1) {
-    return null;
-  }
-
   return (
     <div 
         {...ariaProps}

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

@@ -3,6 +3,4 @@ Our Pagination kit depends on the <a href="https://github.com/mislav/will_pagina
 
 Once you have perfomed the paginated query in your controller file you can use our kit (see code example below) instead of `<%= will_paginate @users %>` in your view file.
 
-You need to add: <code>require "playbook/pagination_renderer"</code> in your apps controller file.
-
-Note: If the total page count is 0 or 1, the Pagination kit will not be displayed as there aren't multiple pages to navigate.
+You need to add: <code>require "playbook/pagination_renderer"</code> in your apps controller file.

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_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_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