playbook_ui 10.0.1.alpha.railscusticon → 10.0.3.pre.alpha.walkthrough2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2fac834bfee4b1e2becacc6beb81454bc07c2245b4aa5868ce39f15680f17b75
-  data.tar.gz: 3906161634d9eff14a41c5c754f754b371aeb7ab9e9619a050f4b4bec81eaa59
+  metadata.gz: a0d7b0a5f03e8c5d72349aa1f47d8676503726e773004908182f3f8bd5b561fb
+  data.tar.gz: 7b7d054667d75d26ac8ab67f5d6a28892da6904c9b599a7ec26866b2d86aad2b
 SHA512:
-  metadata.gz: 3e85c115a8506cf4b388bdb0e07e3fa34b516f861ed72e7796355caff50439489c5073484c5691b995192a914395ed40ddd906c85fedc0e97843486699619a3d
-  data.tar.gz: 4f875cce483498737eca8abab11167a83272706cb345f2068a70d928f50ef67e6a0ddaa267ab7a716c005bdeeb7c0b88d0407efad90b59045892e5f198155e85
+  metadata.gz: fb4e5c64ae4259353b33fc55bceda5714af43cfdd481d9efc3d559ece69593f0c91d5cff29258ba1e132f83491a68f51bfc21228448497615385b73476b47a03
+  data.tar.gz: 350362aa3f56caa426c3e1cdb765f8cf2821ce585a7d638b635c655f98ed3dabe614f6d71703e650b6a2ef11b12e2db7bdfacf858d09a7e80a7b8802c76665b2

data/app/pb_kits/playbook/_playbook.scss

@@ -90,7 +90,9 @@
 @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';
 @import './utilities/positioning';
+@import './utilities/number_spacing';

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_icon/_icon.jsx

@@ -77,12 +77,13 @@ const Icon = (props: IconProps) => {
   // Lets check and see if the icon prop is referring to a custom Power icon...
   // If so, then set fa-icon to "custom"
   // this ensures the JS will not do any further operations
-  faClasses[`fa-${icon}`] = customIcon ? 'custom' : icon
+  // faClasses[`fa-${icon}`] = customIcon ? 'custom' : icon
+  if (!customIcon) faClasses[`fa-${icon}`] = icon
 
   const classes = classnames(
     flipMap[flip],
     'pb_icon_kit',
-    'far',
+    customIcon ? '' : 'far',
     faClasses,
     globalProps(props),
     className

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -1,12 +1,3 @@
 [class^=pb_icon_kit]{
 
 }
-
-// Rails custom icon styles
-svg.pb_custom_icon {
-  width: 1em;
-  fill: currentColor;
-  path {
-    fill: currentColor;
-  }
-}

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx

@@ -5,7 +5,7 @@ import { Icon } from '../../'
 const config = {
   moon: (
     <svg
-        aria-hidden="true"
+        ariaHidden="true"
         focusable="false"
         role="img"
         viewBox="0 0 512 512"

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md

@@ -0,0 +1,11 @@
+### Experimental: Not currently available in the Rails version!
+
+When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
+
+Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
+
+Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with   <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
+
+Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
+
+You must source *your own SVG into the React component/view* you are working in. This can easily be done in a programmatic and maintainable way. So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.

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

@@ -7,7 +7,6 @@ examples:
   - icon_pull: Icon Pull
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
-  - icon_custom: Icon Custom
 
   react:
   - icon_default: Icon Default

data/app/pb_kits/playbook/pb_icon/icon.html.erb

@@ -1,13 +1,7 @@
-<% if object.custom_icon %>
-  <%= object.render_svg(object.custom_icon) %>
-<% else %>
-  <%= content_tag(:i, nil,
-      id: object.id,
-      data: object.data,
-      class: object.classname
-  ) %>
-  <%= content_tag(:span, nil,
-      aria: { label: "#{object.icon} icon" }.merge(object.aria),
-      hidden: true
-  ) %>
-<% end %>
+<%= content_tag(:i, nil,
+    id: object.id,
+    data: object.data,
+    class: object.classname ) %>
+<%= content_tag(:span, nil,
+    aria: { label: "#{object.icon} icon" }.merge(object.aria),
+    hidden: true ) %>

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 
-require "open-uri"
-
 module Playbook
   module PbIcon
     class Icon < Playbook::KitBase
@@ -12,9 +10,7 @@ module Playbook
       prop :flip, type: Playbook::Props::Enum,
                   values: ["horizontal", "vertical", "both", nil],
                   default: nil
-      prop :icon
-      prop :custom_icon, type: Playbook::Props::String,
-                         default: nil
+      prop :icon, required: true
       prop :inverse, type: Playbook::Props::Boolean,
                      default: false
       prop :list_item, type: Playbook::Props::Boolean,
@@ -52,34 +48,6 @@ module Playbook
         )
       end
 
-      def custom_icon_classname
-        generate_classname(
-          "pb_icon_kit",
-          border_class,
-          fixed_width_class,
-          flip_class,
-          inverse_class,
-          list_item_class,
-          pull_class,
-          pulse_class,
-          rotation_class,
-          size_class,
-          spin_class,
-          separator: " "
-        )
-      end
-
-      def render_svg(path)
-        if File.extname(path) == ".svg"
-          doc = Nokogiri::XML(open(path)) # rubocop:disable Security/Open
-          svg = doc.at_css "svg"
-          svg["class"] = "pb_custom_icon " + object.custom_icon_classname
-          raw doc
-        else
-          raise("Custom icon must be an svg. Please check your path and file type.")
-        end
-      end
-
     private
 
       def border_class

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx

@@ -23,6 +23,7 @@ type SelectableCardProps = {
   checked: boolean,
   children?: array<React.ReactChild>,
   className?: string,
+  customIcon?: SVGElement,
   dark?: boolean,
   data: object,
   disabled?: boolean,
@@ -43,6 +44,7 @@ const SelectableCard = ({
   checked = false,
   children,
   className,
+  customIcon,
   dark = false,
   data = {},
   disabled = false,
@@ -76,6 +78,7 @@ const SelectableCard = ({
       return (
         <div className="pb_selectable_card_circle">
           <Icon
+              customIcon={customIcon}
               fixedWidth
               icon="check"
           />

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.jsx

@@ -19,6 +19,7 @@ type SelectableCardIconProps = {
   checked?: boolean,
   checkmark: boolean,
   className?: string,
+  customIcon?: SVGElement,
   dark?: boolean,
   data?: Object,
   disabled?: boolean,
@@ -38,6 +39,7 @@ const SelectableCardIcon = (props: SelectableCardIconProps) => {
     checkmark = false,
     checked = false,
     className,
+    customIcon,
     dark = false,
     data = {},
     disabled = false,
@@ -72,6 +74,7 @@ const SelectableCardIcon = (props: SelectableCardIconProps) => {
     >
       <SelectableCard
           checked={checked}
+          customIcon={customIcon}
           dark={dark}
           disabled={disabled}
           icon={checkmark}
@@ -84,6 +87,7 @@ const SelectableCardIcon = (props: SelectableCardIconProps) => {
         {
           <>
             <SelectableIcon
+                customIcon={customIcon}
                 icon={icon}
                 inputs="disabled"
                 size="2x"

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.jsx

@@ -17,6 +17,7 @@ type SelectableIconProps = {
   aria?: Object,
   checked?: boolean,
   className?: string,
+  customIcon?: SVGElement,
   disabled?: boolean,
   data?: Object,
   icon: string,
@@ -32,6 +33,7 @@ const SelectableIcon = ({
   aria = {},
   className,
   checked = false,
+  customIcon,
   data = {},
   disabled = false,
   icon,
@@ -69,6 +71,7 @@ const SelectableIcon = ({
       <If condition={inputs === 'disabled'}>
         <>
           <Icon
+              customIcon={customIcon}
               icon={icon}
               size="2x"
           />
@@ -92,6 +95,7 @@ const SelectableIcon = ({
           />
           <label htmlFor={inputIdPresent}>
             <Icon
+                customIcon={customIcon}
                 icon={icon}
                 size="2x"
             />

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss

@@ -7,7 +7,7 @@
 	transition: all $transition_short ease;
 	@media (hover:hover) {
 		&:hover * {
-			transition: all $transition_short ease;
+			transition: transform $transition_short ease;
 			transform: translateY(-2px);
 		}
 	}

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

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

@@ -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/app/pb_kits/playbook/playbook-rails-react-bindings.js

@@ -14,6 +14,7 @@ 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,
@@ -27,6 +28,7 @@ WebpackerReact.registerComponents({
   Passphrase,
   RichTextEditor,
   Typeahead,
+  Walkthrough,
 })
 
 ujs.setup(

data/app/pb_kits/playbook/utilities/_number_spacing.scss

@@ -0,0 +1,3 @@
+.ns_tabular {
+  font-variant-numeric: tabular-nums !important;
+}

data/app/pb_kits/playbook/utilities/globalProps.js

@@ -39,6 +39,12 @@ const darkProps = ({ dark }) => {
   return css
 }
 
+const numberSpacingProps = ({ numberSpacing }) => {
+  let css = ''
+  css += numberSpacing ? `ns_${numberSpacing} ` : ''
+  return css
+}
+
 const maxWidthProps = ({ maxWidth }) => {
   let css = ''
   css += maxWidth ? `max_width_${maxWidth } ` : ''
@@ -54,7 +60,7 @@ const zIndexProps = ({ zIndex }) => {
 // All Exported as a single function
 export const globalProps = (props, defaultProps = {}) => {
   const allProps = { ...props, ...defaultProps }
-  return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps)
+  return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps) + numberSpacingProps(allProps)
 }
 
 export const deprecatedProps = (kit, props = []) => {

data/dist/reset.css

@@ -1,2 +1,61 @@
-*{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}
+/* 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; }
 

data/lib/playbook/classnames.rb

@@ -15,6 +15,7 @@ module Playbook
         dark_props,
         max_width_props,
         z_index_props,
+        number_spacing_props,
       ].compact.join(" ")
     end
 

data/lib/playbook/kit_base.rb

@@ -3,6 +3,7 @@
 require "playbook/classnames"
 require "playbook/spacing"
 require "playbook/z_index"
+require "playbook/number_spacing"
 
 module Playbook
   class KitBase < ViewComponent::Base
@@ -11,6 +12,7 @@ module Playbook
     include Playbook::Classnames
     include Playbook::Spacing
     include Playbook::ZIndex
+    include Playbook::NumberSpacing
 
     prop :id
     prop :data, type: Playbook::Props::Hash, default: {}

data/lib/playbook/number_spacing.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Playbook
+  module NumberSpacing
+    def self.included(base)
+      base.prop :number_spacing
+    end
+
+  private
+
+    def number_spacing_props
+      selected_index_props = number_spacing_options.keys.select { |sk| try(sk) }
+      return nil unless selected_index_props.present?
+
+      selected_index_props.map do |k|
+        index_value = send(k)
+        "ns_#{index_value}" if number_spacing_values.include? index_value
+      end.compact.join(" ")
+    end
+
+    def number_spacing_options
+      {
+        number_spacing: "ns",
+      }
+    end
+
+    def number_spacing_values
+      %w[tabular]
+    end
+  end
+end

data/lib/playbook/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.0.1.alpha.railscusticon
+  version: 10.0.3.pre.alpha.walkthrough2
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-07-09 00:00:00.000000000 Z
+date: 2021-07-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1004,8 +1004,8 @@ files:
 - app/pb_kits/playbook/pb_icon/docs/_icon_animate.md
 - app/pb_kits/playbook/pb_icon/docs/_icon_border.html.erb
 - app/pb_kits/playbook/pb_icon/docs/_icon_border.jsx
-- app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb
 - app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx
+- app/pb_kits/playbook/pb_icon/docs/_icon_custom.md
 - app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb
 - app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx
 - app/pb_kits/playbook/pb_icon/docs/_icon_flip.html.erb
@@ -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
@@ -2000,6 +2011,7 @@ files:
 - app/pb_kits/playbook/utilities/_background_colors.scss
 - app/pb_kits/playbook/utilities/_colors.scss
 - app/pb_kits/playbook/utilities/_max_width.scss
+- app/pb_kits/playbook/utilities/_number_spacing.scss
 - app/pb_kits/playbook/utilities/_positioning.scss
 - app/pb_kits/playbook/utilities/_spacing.scss
 - app/pb_kits/playbook/utilities/globalProps.js
@@ -2026,6 +2038,7 @@ files:
 - lib/playbook/markdown.rb
 - lib/playbook/markdown/helper.rb
 - lib/playbook/markdown/template_handler.rb
+- lib/playbook/number_spacing.rb
 - lib/playbook/pb_doc_helper.rb
 - lib/playbook/pb_forms_helper.rb
 - lib/playbook/pb_kit_helper.rb
@@ -2067,7 +2080,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubygems_version: 3.1.4
+rubyforge_project:
+rubygems_version: 2.7.3
 signing_key:
 specification_version: 4
 summary: Playbook Design System

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb

@@ -1,22 +0,0 @@
-<%# SVG fill color inherited from css color property %>
-<div class="icon-wrapper" style="color:blue;">
-
-  <p><%= pb_rails("icon", props: { custom_icon: "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg", size: "2x" } ) %></p>
-  <p><%= pb_rails("icon", props: { custom_icon: "app/javascript/images/powergon.svg", size: "3x" } ) %></p>
-  
-  <%= pb_rails("icon", props: { flip: "vertical", custom_icon: "app/javascript/images/powergon.svg", size: "5x" } ) %>
-  <%= pb_rails("icon", props: { rotation: 90, custom_icon: "app/javascript/images/powergon.svg", size: "5x" } ) %>
-  <%= pb_rails("icon", props: { spin: true, custom_icon: "app/javascript/images/powergon.svg", size: "5x" } ) %>
-  <%= pb_rails("icon", props: { custom_icon: "app/javascript/images/powergon.svg", size: "8x" } ) %>
-
-
-  <%# <%= pb_rails("icon", props: { custom_icon: "https://en.wikipedia.org/wiki/Portable_Network_Graphics#/media/File:PNG_transparency_demonstration_1.png", size: "8x" } ) %>
-
-
-  <%= pb_rails("body", props: { 
-    text: "Custom icons must be SVGs. They can be locally or remotely
-    sourced and are compatible with other icon props (size, rotation,
-    spin, flip, etc). Their SVG fill colors will be inherited from
-    parent element's css color properties."
-  } ) %>
-</div>