playbook_ui 10.0.1.alpha.rtflexfix → 10.0.3.pre.alpha.walkthrough

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e5e3db15b69710f1f18b55e24642b90c7dcbc00b2a19d568aeb0d234b59c5e74
-  data.tar.gz: 6af1e23b3f4b42eb24319c3649d0cb308db273289e5e231e6e7cc08abd95ad41
+  metadata.gz: 7d8d8989dd23f539baf18ba85a01dd08457cf3a1e0770b549a909567ac8be0d8
+  data.tar.gz: d1d92d88f08b6c88acc436126d8b6bd219e1778a63df8113179cbb8304dc3dc8
 SHA512:
-  metadata.gz: 59bf90d751af319a439aa23617e8a933a6d14357832a01332f4be1f8f27ee85923a94ea3948ff509cd12c798ad8543f46335d114682adb9e30790434c0738d95
-  data.tar.gz: 6b257eec72921d6030a02c3844c3fec35f3069827c1623dc5bbd9753d14c045cbaf642ec00e6e7002c6aa6bac4f0490fcb898028b82e5f861746bf828c8b8d60
+  metadata.gz: 43244a13a534d399aa2b4e80760a2cfe0cbdf012bca40c54da11ef75b269a99f1f1a17259a81c5dec1f2a85f3e1e88d6c1e6a3324d66821e15fb1b7b9b8a0a22
+  data.tar.gz: 77024ce1631997dd284b58c98e083555e184d98b31a865e7c1f90817530b42ffe2aac7385505c24823569023e682cce93ef5d4fa29adaeb412be2a3ff0b6913a

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.jsx'
 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_button/_button.scss

@@ -1,6 +1,7 @@
 @import "./button_mixins";
 
 [class^=pb_button_kit]{
+  @include pb_button;
   // Variants =================
   &[class*=_primary]  {
     @include pb_button_primary;

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -12,8 +12,17 @@ $pb_button_h_padding: 34px;
 $pb_button_hover_darken: 4%;
 $pb_button_border_width: 0px;
 
+@mixin pb_button_variant($bg: $primary_action, $color: $text_dk_default, $border: transparent) {
+  background-color: $bg;
+  color: $color;
+  border-color: $border;
+
+  &:active {
+    border-color: darken($bg, $pb_button_hover_darken);
+  }
+}
 
-@mixin pb_button($bg: $primary_action, $color: $text_dk_default, $border: transparent) {
+@mixin pb_button {
   text-rendering: optimizeLegibility;
   font-size: $font_small;
   font-weight: $bold;
@@ -21,15 +30,12 @@ $pb_button_border_width: 0px;
   vertical-align: middle;
   text-transform: none;
   border-width: $pb_button_border_width;
-  border-color: $border;
   border-style: solid;
   border-radius: $border_rad_light;
   min-height: $pb_button_size;
   line-height: 1.5;
   padding: $pb_button_v_padding $pb_button_h_padding;
   cursor: pointer;
-  background-color: $bg;
-  color: $color;
   outline: none;
   transition: background $transition_default ease, color $transition_default ease;
   box-sizing: border-box;
@@ -57,7 +63,6 @@ $pb_button_border_width: 0px;
   &:active {
     outline: none;
     border-width: $pb_button_border_width;
-    border-color: darken($bg, $pb_button_hover_darken);
   }
   
 };
@@ -68,7 +73,7 @@ $pb_button_border_width: 0px;
 
 // Primary ======================
 @mixin pb_button_primary {
-  @include pb_button;
+  @include pb_button_variant($primary_action, $text_dk_default, transparent);
 
   @media (hover:hover) {
     &:hover {
@@ -79,7 +84,7 @@ $pb_button_border_width: 0px;
 
 // Secondary ====================
 @mixin pb_button_secondary {
-  @include pb_button(rgba($primary_action, 0.05), $primary_action);
+  @include pb_button_variant(rgba($primary_action, 0.05), $primary_action);
 
   @media (hover:hover) {
     &:hover {
@@ -90,7 +95,7 @@ $pb_button_border_width: 0px;
 
 // Link =========================
 @mixin pb_button_link {
-  @include pb_button($transparent, $primary_action);
+  @include pb_button_variant($transparent, $primary_action);
 
   @media (hover:hover) {
     &:hover {
@@ -102,7 +107,7 @@ $pb_button_border_width: 0px;
 // Disabled ====================
 @mixin pb_button_disabled {
   $disabled_color: rgba($charcoal, $opacity_5);
-  @include pb_button(rgba($slate, $opacity_4), $disabled_color);
+  @include pb_button_variant(rgba($slate, $opacity_4), $disabled_color);
   pointer-events: none;
 }
 
@@ -127,7 +132,7 @@ $pb_button_border_width: 0px;
 
 // Dark Primary =================
 @mixin pb_button_primary_dark{
-  @include pb_button($primary_action);
+  @include pb_button_variant($primary_action);
 
   @media (hover:hover) {
     &:hover {
@@ -138,7 +143,7 @@ $pb_button_border_width: 0px;
 
 // Dark Secondary ==============
 @mixin pb_button_secondary_dark{
-  @include pb_button(rgba($white, 0.2), $white);
+  @include pb_button_variant(rgba($white, 0.2), $white);
 
   @media (hover:hover) {
     &:hover {
@@ -149,7 +154,7 @@ $pb_button_border_width: 0px;
 
 // Dark Link =============
 @mixin pb_button_link_dark {
-  @include pb_button($transparent, $white);
+  @include pb_button_variant($transparent, $white);
 
   @media (hover:hover) {
     &:hover {
@@ -161,6 +166,6 @@ $pb_button_border_width: 0px;
 // Dark Disabled ====================
 @mixin pb_button_disabled_dark {
   $disabled_color: rgba($white, $opacity_5);
-  @include pb_button(rgba($slate, $opacity_5), $disabled_color);
+  @include pb_button_variant(rgba($slate, $opacity_5), $disabled_color);
   pointer-events: none;
 }

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/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_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/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.rtflexfix"
+  PREVIOUS_VERSION = "10.0.0"
+  VERSION = "10.0.3.pre.alpha.walkthrough"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.0.1.alpha.rtflexfix
+  version: 10.0.3.pre.alpha.walkthrough
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-07-08 00:00:00.000000000 Z
+date: 2021-07-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1005,6 +1005,7 @@ files:
 - 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.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
@@ -1957,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
@@ -1999,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
@@ -2025,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
@@ -2066,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