playbook_ui 10.0.2.pre.alpha.pre.iconfix → 10.0.3.pre.alpha.walkthrough

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 62b6bcb6b36c501d383c226bf3445bc4339d43d222175f242bb68db89ef44152
-  data.tar.gz: b15b4e307f4f97a66db2761b2cba1973a67e19bd5e8a8ab6ef747655bb8985e0
+  metadata.gz: 7d8d8989dd23f539baf18ba85a01dd08457cf3a1e0770b549a909567ac8be0d8
+  data.tar.gz: d1d92d88f08b6c88acc436126d8b6bd219e1778a63df8113179cbb8304dc3dc8
 SHA512:
-  metadata.gz: dc869834053fe2289cd31fc58350bb291d4a19658b6dce38b5a674e2ec38bc855912d3bbbe2c7dacc92a0968b6ae1f5172959721d3df469e3e4393259c63110e
-  data.tar.gz: 174f6d032e05b7e6f5718bfa4dc002959613d339265bbdebc8e2d8c48f0436ded74ada3635f08ad217f00acb0d2b059e359a6044c72bffbbeb710dfaeabcbf88
+  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_rich_text_editor/_rich_text_editor.scss

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

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

@@ -0,0 +1,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.2-alpha-iconfix"
+  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.2.pre.alpha.pre.iconfix
+  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
@@ -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