playbook_ui 12.20.0.pre.alpha.title2667 → 12.21.0.pre.alpha.PLAY807RTEcustomtoolbar680

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.20.0.pre.alpha.title2667
+  version: 12.21.0.pre.alpha.PLAY807RTEcustomtoolbar680
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-05-15 00:00:00.000000000 Z
+date: 2023-05-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1721,6 +1721,7 @@ files:
 - app/pb_kits/playbook/pb_radio/radio.test.js
 - app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx
 - app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts
+- app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx
 - app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx
 - app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx
 - app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx
@@ -1740,6 +1741,8 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb
@@ -2318,12 +2321,12 @@ files:
 - app/pb_kits/playbook/pb_user/user.html.erb
 - app/pb_kits/playbook/pb_user/user.rb
 - app/pb_kits/playbook/pb_user/user.test.js
-- app/pb_kits/playbook/pb_user_badge/_user_badge.jsx
 - app/pb_kits/playbook/pb_user_badge/_user_badge.scss
-- app/pb_kits/playbook/pb_user_badge/badges/million-dollar.jsx
+- app/pb_kits/playbook/pb_user_badge/_user_badge.tsx
 - app/pb_kits/playbook/pb_user_badge/badges/million-dollar.svg
-- app/pb_kits/playbook/pb_user_badge/badges/veteran.jsx
+- app/pb_kits/playbook/pb_user_badge/badges/million-dollar.tsx
 - app/pb_kits/playbook/pb_user_badge/badges/veteran.svg
+- app/pb_kits/playbook/pb_user_badge/badges/veteran.tsx
 - app/pb_kits/playbook/pb_user_badge/docs/_description.md
 - app/pb_kits/playbook/pb_user_badge/docs/_footer.md
 - app/pb_kits/playbook/pb_user_badge/docs/_user_badge_default.html.erb
@@ -2335,8 +2338,9 @@ 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_user_badge/user_badge.test.js
 - app/pb_kits/playbook/pb_walkthrough/_walkthrough.scss
+- app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx
 - 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

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

@@ -1,363 +0,0 @@
-import * as React from "react"
-
-const MillionDollar = (props) => (
-  <svg
-      style={{
-      enableBackground: "new 0 0 242.9 242.9",
-    }}
-      viewBox="0 0 242.9 242.9"
-      xmlSpace="preserve"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-  >
-    <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.jsx

@@ -1,28 +0,0 @@
-import * as React from "react"
-
-const Veteran = (props) => (
-  <svg
-      viewBox="0 0 200 250"
-      xmlSpace="preserve"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-  >
-    <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_walkthrough/_walkthrough.jsx

@@ -1,197 +0,0 @@
-/* eslint-disable react/display-name */
-/* eslint-disable no-unused-vars */
-
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-import Joyride 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?: 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
-      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"
-      />
-        )}
-      <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>
-  </div>
-))
-
-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