playbook_ui 12.20.0 → 12.21.0.pre.alpha.PLAY807RTEcustomtoolbar680

data/app/pb_kits/playbook/pb_user_badge/badges/million-dollar.tsx

@@ -0,0 +1,358 @@
+import * as React from "react"
+
+const MillionDollar = () => (
+  <svg
+    viewBox="0 0 242.9 242.9"
+    xmlSpace="preserve"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx={121.5}
+      cy={121.5}
+      r={121.5}
+    />
+    <linearGradient
+      gradientUnits="userSpaceOnUse"
+      id="a"
+      x1={42.483}
+      x2={200.309}
+      y1={35.645}
+      y2={35.645}
+    >
+      <stop
+        offset={0}
+        style={{
+          stopColor: "#e6b711",
+        }}
+      />
+      <stop
+        offset={0.128}
+        style={{
+          stopColor: "#eac23c",
+        }}
+      />
+      <stop
+        offset={0.278}
+        style={{
+          stopColor: "#ec6",
+        }}
+      />
+      <stop
+        offset={0.413}
+        style={{
+          stopColor: "#f1d485",
+        }}
+      />
+      <stop
+        offset={0.527}
+        style={{
+          stopColor: "#f2d998",
+        }}
+      />
+      <stop
+        offset={0.607}
+        style={{
+          stopColor: "#f3db9f",
+        }}
+      />
+      <stop
+        offset={1}
+        style={{
+          stopColor: "#e6b711",
+        }}
+      />
+    </linearGradient>
+    <path
+      d="M56.4 53.8c16.9-16.2 39.8-26.2 65-26.2 25.2 0 48.1 10 64.9 26.2h14c-19.1-22.2-47.4-36.3-78.9-36.3-31.5 0-59.8 14.1-78.9 36.3h13.9z"
+      style={{
+        fill: "url(#a)",
+      }}
+    />
+    <linearGradient
+      gradientUnits="userSpaceOnUse"
+      id="b"
+      x1={17.407}
+      x2={44.897}
+      y1={132.179}
+      y2={132.179}
+    >
+      <stop
+        offset={0}
+        style={{
+          stopColor: "#e6b711",
+        }}
+      />
+      <stop
+        offset={0.128}
+        style={{
+          stopColor: "#eac23c",
+        }}
+      />
+      <stop
+        offset={0.278}
+        style={{
+          stopColor: "#ec6",
+        }}
+      />
+      <stop
+        offset={0.413}
+        style={{
+          stopColor: "#f1d485",
+        }}
+      />
+      <stop
+        offset={0.527}
+        style={{
+          stopColor: "#f2d998",
+        }}
+      />
+      <stop
+        offset={0.607}
+        style={{
+          stopColor: "#f3db9f",
+        }}
+      />
+      <stop
+        offset={1}
+        style={{
+          stopColor: "#e6b711",
+        }}
+      />
+    </linearGradient>
+    <path
+      d="M44.9 175.7c-10.9-15.3-17.3-34-17.3-54.2 0-14.1 3.1-27.5 8.8-39.5H25.3c-5 12.2-7.8 25.5-7.8 39.5 0 22.7 7.3 43.8 19.8 60.9l7.6-6.7z"
+      style={{
+        fill: "url(#b)",
+      }}
+    />
+    <linearGradient
+      gradientUnits="userSpaceOnUse"
+      id="c"
+      x1={52.914}
+      x2={189.715}
+      y1={212.573}
+      y2={212.573}
+    >
+      <stop
+        offset={0}
+        style={{
+          stopColor: "#e6b711",
+        }}
+      />
+      <stop
+        offset={0.128}
+        style={{
+          stopColor: "#eac23c",
+        }}
+      />
+      <stop
+        offset={0.278}
+        style={{
+          stopColor: "#ec6",
+        }}
+      />
+      <stop
+        offset={0.413}
+        style={{
+          stopColor: "#f1d485",
+        }}
+      />
+      <stop
+        offset={0.527}
+        style={{
+          stopColor: "#f2d998",
+        }}
+      />
+      <stop
+        offset={0.607}
+        style={{
+          stopColor: "#f3db9f",
+        }}
+      />
+      <stop
+        offset={1}
+        style={{
+          stopColor: "#e6b711",
+        }}
+      />
+    </linearGradient>
+    <path
+      d="M173 199.8c-14.8 9.8-32.5 15.5-51.6 15.5s-37-5.8-51.8-15.6H52.9c18.3 16.1 42.3 25.8 68.5 25.8 26.1 0 50-9.7 68.3-25.7H173z"
+      style={{
+        fill: "url(#c)",
+      }}
+    />
+    <linearGradient
+      gradientUnits="userSpaceOnUse"
+      id="d"
+      x1={31.123}
+      x2={207.766}
+      y1={136.159}
+      y2={136.159}
+    >
+      <stop
+        offset={0}
+        style={{
+          stopColor: "#e6b711",
+        }}
+      />
+      <stop
+        offset={0.128}
+        style={{
+          stopColor: "#eac23c",
+        }}
+      />
+      <stop
+        offset={0.278}
+        style={{
+          stopColor: "#ec6",
+        }}
+      />
+      <stop
+        offset={0.413}
+        style={{
+          stopColor: "#f1d485",
+        }}
+      />
+      <stop
+        offset={0.527}
+        style={{
+          stopColor: "#f2d998",
+        }}
+      />
+      <stop
+        offset={0.607}
+        style={{
+          stopColor: "#f3db9f",
+        }}
+      />
+      <stop
+        offset={1}
+        style={{
+          stopColor: "#e6b711",
+        }}
+      />
+    </linearGradient>
+    <path
+      d="M139.2 193v-1.8c5-.4 10.2-.5 13.4-5 3.8-5.2 3.2-15.4 3.2-21.5V78.5l-47.3 120.4L61.2 81.2v61.1c0 13.6.5 35.1 12.5 44.2 4.3 3.2 9 3.9 14.2 4.7v1.8H31.1v-1.8c1.6-.4 3.2-.7 4.8-1.1 22.6-5.7 22.9-32.4 22.9-51.1v-37.8c0-6.1.5-13.3-3.2-18.5-4.5-6.1-13.4-7.2-20.4-7.5v-1.8H96l29.6 75.4 29.9-75.4h52.3v1.8c-4.8.4-10.2.9-13.4 5-3.8 4.8-3.2 15.9-3.2 21.9v62.5c0 6.3-.7 16.1 3.2 21.5 3.2 4.3 6.2 4.7 11.2 5v1.8h-66.4z"
+      style={{
+        fill: "url(#d)",
+      }}
+    />
+    <linearGradient
+      gradientUnits="userSpaceOnUse"
+      id="e"
+      x1={30.453}
+      x2={213.794}
+      y1={63.629}
+      y2={63.629}
+    >
+      <stop
+        offset={0}
+        style={{
+          stopColor: "#e6b711",
+        }}
+      />
+      <stop
+        offset={0.128}
+        style={{
+          stopColor: "#eac23c",
+        }}
+      />
+      <stop
+        offset={0.278}
+        style={{
+          stopColor: "#ec6",
+        }}
+      />
+      <stop
+        offset={0.413}
+        style={{
+          stopColor: "#f1d485",
+        }}
+      />
+      <stop
+        offset={0.527}
+        style={{
+          stopColor: "#f2d998",
+        }}
+      />
+      <stop
+        offset={0.607}
+        style={{
+          stopColor: "#f3db9f",
+        }}
+      />
+      <stop
+        offset={1}
+        style={{
+          stopColor: "#e6b711",
+        }}
+      />
+    </linearGradient>
+    <path
+      d="M30.5 60.6h183.3v6.1H30.5z"
+      style={{
+        fill: "url(#e)",
+      }}
+    />
+    <linearGradient
+      gradientUnits="userSpaceOnUse"
+      id="f"
+      x1={196.676}
+      x2={225.538}
+      y1={132.923}
+      y2={132.923}
+    >
+      <stop
+        offset={0}
+        style={{
+          stopColor: "#e6b711",
+        }}
+      />
+      <stop
+        offset={0.128}
+        style={{
+          stopColor: "#eac23c",
+        }}
+      />
+      <stop
+        offset={0.278}
+        style={{
+          stopColor: "#ec6",
+        }}
+      />
+      <stop
+        offset={0.413}
+        style={{
+          stopColor: "#f1d485",
+        }}
+      />
+      <stop
+        offset={0.527}
+        style={{
+          stopColor: "#f2d998",
+        }}
+      />
+      <stop
+        offset={0.607}
+        style={{
+          stopColor: "#f3db9f",
+        }}
+      />
+      <stop
+        offset={1}
+        style={{
+          stopColor: "#e6b711",
+        }}
+      />
+    </linearGradient>
+    <path
+      d="M196.7 177.5c11.5-15.6 18.7-35.2 18.7-56 0-14.1-3.1-27.5-8.8-39.5h11.1c5 12.2 7.8 25.5 7.8 39.5 0 23.4-7.8 45-20.9 62.4l-7.9-6.4z"
+      style={{
+        fill: "url(#f)",
+      }}
+    />
+  </svg>
+)
+
+export default MillionDollar

data/app/pb_kits/playbook/pb_user_badge/badges/veteran.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+
+const Veteran = () => (
+    <svg
+        viewBox="0 0 200 250"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M198.4 71.5V71c-.2-1.2-1.4-2.1-1.4-2.1L103.2 2.7c-.7-.4-1-.6-1.6-.6-1.3 0-2.3 1-2.3 2.3v67.1h-.6v29.6h99.8l-.1-29.6z"
+            fill="#004876"
+        />
+        <path
+            d="M172.9 159.2c-31.4 23-33.2 24.3-33.2 24.3l-40.5 3.2v-29.4l73.7 1.9z"
+            fill="#FFF"
+        />
+        <path
+            d="M99.3 125.4V33.5L1.6 102.7l-.1.1c-1 .7-1.5 1.8-1.5 3v67.4c0 1.2.6 2.3 1.5 3l.1.1 93.5 66.3c1.7 1.2 4.1 0 4.1-2.1v-28.9l40.5-28-40.5.7v-25h73.7l25.4-16.9.2-16.8H99.3z"
+            fill="#BB2432"
+        />
+        <path d="M99.3 101.1h99.3v24.3H99.3z"
+            fill="#FFF"
+        />
+    </svg>
+)
+
+export default Veteran

data/app/pb_kits/playbook/pb_user_badge/user_badge.test.js

@@ -0,0 +1,67 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import UserBadge from './_user_badge'
+
+const testId = 'userBadge'
+const className = 'custom-class-name'
+
+const UserBadgeDefault = (props) => (
+    <>
+        <UserBadge
+            aria={{ label: testId }}
+            className={className}
+            data={{ testid: testId }}
+            id={testId}
+            {...props}
+        />
+    </>
+)
+
+test('should pass data prop', () => {
+    render(<UserBadgeDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toBeInTheDocument()
+})
+
+test('should pass className prop', () => {
+    render(<UserBadgeDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(className)
+})
+
+test('should pass aria prop', () => {
+    render(<UserBadgeDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('aria-label', testId)
+})
+
+test('should pass id prop', () => {
+    render(<UserBadgeDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveProperty('id', testId)
+})
+
+test('should be million-dollar badge by default', () => {
+    render(<UserBadgeDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toContainHTML('<circle cx="121.5" cy="121.5" r="121.5" />')
+})
+
+test('should pass badge prop', () => {
+    render(<UserBadgeDefault badge="veteran" />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).not.toContainHTML('<circle cx="121.5" cy="121.5" r="121.5" />')
+})
+
+test('should be md size by default', () => {
+    render(<UserBadgeDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_user_badge_kit_md')
+})
+
+test('should pass size prop', () => {
+    render(<UserBadgeDefault size="sm" />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_user_badge_kit_sm')
+})

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

@@ -0,0 +1,193 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+import Joyride, { TooltipRenderProps } from 'react-joyride'
+import Button from '../pb_button/_button'
+import Flex from '../pb_flex/_flex'
+import SectionSeparator from '../pb_section_separator/_section_separator'
+import Title from '../pb_title/_title'
+
+type WalkthroughProps = {
+  aria?: { [key: string]: string },
+  callback?: () => void,
+  className?: string,
+  continuous?: boolean,
+  data?: { [key: string]: string },
+  id?: string,
+  run?: boolean,
+  steps?: [],
+  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?: 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) => (
+  <div
+    className="pb_card_kit_border_none p_none"
+    {...props.tooltipProps}
+  >
+    {props.step.title && <div>
+      <Flex
+        align="center"
+        justify="between"
+        padding="xs"
+      >
+        <Title
+          paddingLeft="xs"
+          size={4}
+        >
+          {props.step.title}
+        </Title>
+        {props.skip && (<Button
+          {...props.skipProps}
+          id="skip"
+          text="Skip Tour"
+          variant="link"
+        />)}
+        <Button
+          {...props.skipProps}
+          id="skip"
+          text="Skip Tour"
+          variant="link"
+        />
+      </Flex>
+      <SectionSeparator />
+    </div>}
+
+    <Flex padding="sm">{props.step.content}</Flex>
+    <SectionSeparator />
+    <Flex
+      justify={props.index == 0 ? 'end' : 'between'}
+      padding="xs"
+    >
+
+      {props.index > 0 && (
+        <Button
+          {...props.backProps}
+          id="back"
+          text="Back"
+        />
+      )}
+
+      {props.continuous && !props.isLastStep &&
+        <Button
+          {...props.primaryProps}
+          id="next"
+          text="Next"
+        />
+      }
+
+      {!props.continuous &&
+        <Button
+          {...props.closeProps}
+          id="close"
+          text="Close"
+        />
+      }
+
+      {!((props.continuous && !props.isLastStep) || (!props.continuous)) &&
+        <Button
+          {...props.closeProps}
+          id="close"
+          text="Close"
+        />
+      }
+    </Flex>
+  </div>
+)) as unknown as React.ForwardRefRenderFunction<HTMLDivElement, TooltipRenderProps>
+
+const Walkthrough = (props: WalkthroughProps) => {
+  const {
+    aria = {},
+    callback,
+    className,
+    continuous = false,
+    data = {},
+    disableOverlay,
+    floaterProps = {
+      offset: 50,
+    },
+    id,
+    run = false,
+    steps,
+    styles = {
+      options: {
+        zIndex: 20000,
+      },
+    },
+    showSkipButton,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_walkthrough'), globalProps(props), className)
+
+  return (
+    <div
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
+    >
+      <Joyride
+        callback={callback}
+        continuous={continuous}
+        disableOverlay={disableOverlay}
+        disableScrolling
+        floaterProps={floaterProps}
+        run={run}
+        showSkipButton={showSkipButton}
+        steps={steps}
+        styles={styles}
+        tooltipComponent={Tooltip}
+        {...props}
+      />
+    </div>
+
+  )
+}
+
+export default Walkthrough

data/dist/menu.yml

@@ -31,6 +31,7 @@ kits:
     - form
     - form_group
     - form_pill
+    - multi_level_select
     - passphrase
     - phone_number_input
     - radio
@@ -57,7 +58,6 @@ kits:
   - list
   - loading_inline
   - map
-  - multi_level_select
   - nav
   - tags:
     - badge

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.19.0"
-  VERSION = "12.20.0"
+  PREVIOUS_VERSION = "12.21.0"
+  VERSION = "12.21.0.pre.alpha.PLAY807RTEcustomtoolbar680"
 end