playbook_ui 12.17.0 → 12.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cd6838e0560cc93f906cf9adc9ca3b2ddf760b04eb217a758de88cf4d55f5921
-  data.tar.gz: 7fe4be39b88ef061b65beb11d35680d3faf0ffe9eea5696f4cffdb0385eff6a5
+  metadata.gz: 066fe5069146426c6fb9111de27a23e19513b840bc5c0173fe862f05c9a6ad3a
+  data.tar.gz: b72f2e69c675d622a6dbdebec865da68d2914cadafa00b2f729319cb66b9e442
 SHA512:
-  metadata.gz: 50fb6671787a4142632f88b003d143dc5731ca71e06e8c3cbe94ecf6e4650c803466e79365047133bd9eb43049c0f0731b504ee8d013c73ab03f0cca7794dc46
-  data.tar.gz: 7965856ed4ff7d6c7197f5bdaead0960549c67673c94da1f659b4d1a65cb2c179c0fa8800900c6323675afb823e06a5ab24d1735d58a7d8fadc28b9cc843e4ac
+  metadata.gz: ac985c76a200cc24cfb19fc1c7cf58f0ff7d1d514c5f1d3b25f49e191498a283096d57b046a3fdafbece5f51373c1bb3c92b03fe2b5c62557243b6b38813eb49
+  data.tar.gz: bc02a9551e56ff2ba4ac05d4afa7cf9b488abe1d5b3293347798ceb8b563bea793fe6f64b1925eb70d4da1d649b6556e18e7586501feb12d73eb2850baf2bbce

data/app/pb_kits/playbook/index.js

@@ -127,4 +127,4 @@ export { default as PbTypeahead } from './pb_typeahead'
 export { default as dialogHelper } from './pb_dialog/dialogHelper'
 
 //Theming
-export {default as mapTheme} from './pb_map/pbMapTheme'
+export {default as mapTheme} from './pb_map/pbMapTheme'

data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb

@@ -7,8 +7,7 @@
         <%= pb_rails("tooltip", props: {
           trigger_element_id: object.tooltip_id,
           tooltip_id: "tooltip-2",
-          position: 'top',
-          dark: true,
+          position: 'top'
         }) do %>
           <%= object.tooltip_text %>
         <% end %>

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -59,8 +59,8 @@ const Collapsible = ({
   const dataProps = buildDataProps(data)
   const classes = classnames(
     buildCss('pb_collapsible_kit'),
-    className,
-    globalProps(props, { padding })
+    globalProps(props, { padding }),
+    className
   )
 
   return (

data/app/pb_kits/playbook/pb_docs/kit_api.html.erb

@@ -15,7 +15,6 @@
               <th>Props</th>
               <th>Type</th>
               <th>Values</th>
-              <th>Default</th>
             </tr>
           </thead>
           <tbody>
@@ -35,11 +34,34 @@
                     <%= pb_rails("body", props: {
                       classname: "kearning"
                     }) do %>
-                        <%= value[:type].downcase %>
+                        <% if key =~ /^padding|^margin/ %>
+                            <%= "array" %>
+                        <% else %>
+                          <%= value[:type].to_s.downcase %>
+                        <% end %>
                     <% end %>
                   <% end %>
                 </td>
                 <td>
+                  <% if key =~ /^padding|^margin/ %>
+                  <% padding_margin_values.each do |item| %>
+                      <%= pb_rails("card", props: {
+                          flex_direction: "row",
+                          classname: "card",
+                          padding: "xxs",
+                          background: "light",
+                          border_none: true,
+                          border_radius: "sm",
+                          margin: "xxs"
+                        })  do %>
+                          <%= pb_rails("body", props: {
+                              classname: "kearning"
+                          }) do %>
+                            <%= item %>
+                          <% end %>
+                        <% end %>
+                      <% end %>
+                  <% else %>
                   <% if value[:values].present? %>
                     <% value[:values].each do |item| %>
                       <% if item != nil %>
@@ -61,22 +83,6 @@
                       <% end %>
                     <% end %>
                   <% end %>
-                </td>
-                <td>
-                  <% if value[:default].present? || value[:default].is_a?(TrueClass) || value[:default].is_a?(FalseClass) %>
-                    <%= pb_rails("card", props: {
-                            classname: "card",
-                            padding: "xxs",
-                            background: "light",
-                            border_none: true,
-                            border_radius: "sm"
-                      })  do %>
-                        <%= pb_rails("body", props: {
-                          classname: "kearning"
-                        }) do %>
-                            <%= value[:default] %>
-                        <% end %>
-                      <% end %>
                   <% end %>
                 </td>
               </tr>
@@ -110,7 +116,6 @@
               <th>Props</th>
               <th>Type</th>
               <th>Values</th>
-              <th>Default</th>
             </tr>
           </thead>
           <tbody>
@@ -130,11 +135,34 @@
                     <%= pb_rails("body", props: {
                       classname: "kearning"
                     }) do %>
-                        <%= value[:type].downcase %>
+                        <% if key =~ /^padding|^margin/ %>
+                            <%= "array" %>
+                        <% else %>
+                          <%= value[:type].to_s.downcase %>
+                        <% end %>
                     <% end %>
                   <% end %>
                 </td>
                 <td>
+                  <% if key =~ /^padding|^margin/ %>
+                  <% padding_margin_values.each do |item| %>
+                      <%= pb_rails("card", props: {
+                          flex_direction: "row",
+                          classname: "card",
+                          padding: "xxs",
+                          background: "light",
+                          border_none: true,
+                          border_radius: "sm",
+                          margin: "xxs"
+                        })  do %>
+                          <%= pb_rails("body", props: {
+                              classname: "kearning"
+                          }) do %>
+                            <%= item %>
+                          <% end %>
+                        <% end %>
+                      <% end %>
+                  <% else %>
                   <% if value[:values].present? %>
                     <% value[:values].each do |item| %>
                       <% if item != nil %>
@@ -156,22 +184,6 @@
                       <% end %>
                     <% end %>
                   <% end %>
-                </td>
-                <td>
-                  <% if value[:default].present? || value[:default].is_a?(TrueClass) || value[:default].is_a?(FalseClass) %>
-                    <%= pb_rails("card", props: {
-                            classname: "card",
-                            padding: "xxs",
-                            background: "light",
-                            border_none: true,
-                            border_radius: "sm"
-                      })  do %>
-                        <%= pb_rails("body", props: {
-                          classname: "kearning"
-                        }) do %>
-                            <%= value[:default] %>
-                        <% end %>
-                      <% end %>
                   <% end %>
                 </td>
               </tr>

data/app/pb_kits/playbook/pb_docs/kit_api.rb

@@ -13,6 +13,10 @@ module Playbook
         local
       end
 
+      def padding_margin_values
+        %w[none xxs xs sm md lg xl]
+      end
+
       def local_prop_data
         local_props = {}
 
@@ -27,22 +31,106 @@ module Playbook
       end
 
       def kit_global_props
-        global = []
+        global_props = {}
+        global_prop_names = []
+        global_prop_values = {}
+        global_props_with_values = {}
+        global_props_without_values = []
+        parent_child_object = {}
+        updated_global_props_with_values = {}
+
+        # extracts the modules from kit_base.rb, which is where we import all the global props that we inject into every rails kit
+        pb_module = Playbook::KitBase.included_modules.select { |mod| mod.to_s.include?("Playbook::") }
+
+        # loops through the kits and extracts each prop with its values and pushes that to the global_props hash
         kit_props.each do |key, value|
-          value.kit == Playbook::KitBase && global.push({ key: key, value: value })
+          value.kit == Playbook::KitBase && global_props[key.to_sym] = value
+        end
+
+        # loops through the global_props and extracts the name of each prop and pushes that to global_prop_names array
+        global_props.each do |name, _values|
+          global_prop_names.push(name)
+        end
+
+        # Loops through each module in pb_module and searches for methods that end in _values, as these methods hold the values for each prop
+        # we then save the values and type and push that to the values hash as a key value pair
+        pb_module.each do |mod|
+          mod.instance_methods.each do |method_name|
+            next unless method_name.to_s.end_with?("_values")
+
+            value = send(method_name)
+            type = value.class
+            global_prop_values[method_name.to_s.chomp("_values").to_sym] = { "type": type, "values": value }
+          end
+        end
+
+        # loops through the global_prop_names array
+        # then loops through the global_prop_values hash and extracts the values that have the same name found in global_prop_names
+        # this loop helps ensure only global props values are actually extracted, as there could be other methods that end in _values in the modules we are iterating over
+        # these verified global props with values are then pushed to the global_props_with_values hash
+        global_prop_names.each do |name, _prop|
+          global_prop_values.each do |key, value|
+            global_props_with_values[key] = value if key == name
+          end
+        end
+
+        # now we grab all the global_prop_names that do not have a matching key in global_prop_values.
+        # This gives us any global prop that did not have any predefined value. like classname and dark
+        global_props_without_values = global_prop_names - global_prop_values.keys
+
+        # Loops through each module in pb_module and searches for methods that end in _options, as these methods hold all the props in the module
+        # save the prop names prop values and  and parent module name to parent_child_object hash
+        # this is a comprehensive list of all parent module and children props for edge cases like spacing.rb, that is not named after the props it represents
+        pb_module.each do |mod|
+          mod.instance_methods.each do |method_name|
+            next unless method_name.to_s.end_with?("_options")
+
+            props = send(method_name)
+            parent = mod.to_s.split("::").last
+            values = send("#{parent.underscore}_values")
+            parent_child_object[parent] = { "props": props, "values": values }
+          end
+        end
+
+        # loops through each object in parent_child_object and extracts its children (props and values)
+        # loops through each child and extracts the individual props
+        # Checks if the props match any of the props in global_props_without_values
+        # if it does, then we push that prop to global_props_with_values hash
+        # This extracts the props in the spacing.rb file and any file that is not named after the props it represents
+        parent_child_object.each do |_parent, children|
+          children.each do |_child, props|
+            props.each do |prop, _value|
+              type = children[:values].class
+              values = children[:values]
+              global_props_with_values[prop] = { "type": type, "values": values } if global_props_without_values.include?(prop)
+            end
+          end
+        end
+
+        # loop through the global_props hash and the global_props_with_values hash.
+        # extract the props from global_props that are not found in global_props_with_values into updated_global_props_with_values
+        # This is the last piece that grabs the global props that did not have values at all, like classname and dark, and adds it to our hash
+        global_props.each do |prop, value|
+          unless global_props_with_values.include?(prop)
+            type = value.class.to_s.split("::").last
+            updated_global_props_with_values[prop] = { "type": type }
+          end
         end
-        global
+
+        # Merge updated_global_props_with_values into global_props_with_values
+        # global_props_with_values will now hold all the global props thier values and type
+        global_props_with_values.merge!(updated_global_props_with_values)
+
+        global_props_with_values
       end
 
       def global_prop_data
         global_props = {}
 
-        kit_global_props.each do |key, _value|
-          name = key[:value].instance_variable_get(:@name)
-          type = key[:value].class.to_s.split("::").last
-          default = key[:value].instance_variable_get(:@default)
-          values = key[:value].instance_variable_get(:@values)
-          global_props[name.to_sym] = { "type": type, "default": default, "values": values }
+        kit_global_props.each do |key, value|
+          type = value[:type]
+          values = value[:values]
+          global_props[key] = { "type": type, "values": values }
         end
         global_props
       end

data/app/pb_kits/playbook/pb_docs/kit_example.html.erb

@@ -10,7 +10,7 @@
 
   <% if show_code %>
     <div class="markdown pb--kit-example-markdown <%= dark ? "dark" : "" %>">
-      <%= markdown(description) %>
+      <%= render_markdown(description) %>
     </div>
     <div id="code-wrapper">
       <div class="pb--codeControls">

data/app/pb_kits/playbook/pb_docs/kit_example.rb

@@ -23,7 +23,7 @@ module Playbook
       end
 
       def description
-        @description ||= read_kit_file("_#{example_key}.md")
+        @description ||= read_kit_file("docs", "_#{example_key}.md")
       end
 
       def highlighter
@@ -33,11 +33,15 @@ module Playbook
       def source
         @source ||= begin
           extension = type == "react" ? "jsx" : "html.erb"
-          stringified_code = read_kit_file("_#{example_key}.#{extension}")
+          stringified_code = read_kit_file("docs", "_#{example_key}.#{extension}")
           sanitize_code(stringified_code)
         end
       end
 
+      def tsx_source
+        read_kit_file("", "_#{example_key}.tsx")
+      end
+
     private
 
       def sanitize_code(stringified_code)
@@ -53,11 +57,11 @@ module Playbook
         elsif type == "rails" && dark
           stringified_code = stringified_code.gsub("props: {", "props: {\n    dark: true,")
         end
-        stringified_code
+        stringified_code.gsub(" {...props}", "")
       end
 
-      def read_kit_file(*args)
-        path = ::Playbook.kit_path(kit, "docs", *args)
+      def read_kit_file(folder, *args)
+        path = ::Playbook.kit_path(kit, folder, *args)
         path.exist? ? path.read : ""
       end
     end

data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx

@@ -47,12 +47,15 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
   } = props
 
   const [activePhoto, setActivePhoto] = useState(initialPhoto)
+
   useEffect(() => {
     onChange(activePhoto)
   },[activePhoto])
 
   useEffect(() => {
+    currentPhotoIndex !== undefined && currentPhotoIndex !== null && (
     setActivePhoto(currentPhotoIndex)
+    )
   },[currentPhotoIndex])
 
   const ariaProps = buildAriaProps(aria)

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx

@@ -10,14 +10,17 @@ const LightboxCompoundComponent = (props) => {
     'https://images.unsplash.com/photo-1501045337096-542a73dafa4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2052&q=80',
     'https://images.unsplash.com/photo-1563693998336-93c10e5d8f91?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80,',
   ]
+  const [selectedPhoto, setSelectedPhoto] = useState(0)
   const [showLightbox, toggleShowLightbox] = useState(false)
 
   const handleCloseLightbox = () => {
     toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(null)
   }
 
-  const onPhotoClick = () => {
+  const onPhotoClick = (photo) => {
     toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(photo)
   }
 
   const exampleStyles = {
@@ -31,6 +34,7 @@ const LightboxCompoundComponent = (props) => {
         {showLightbox ? (
           <Lightbox
               description='Description Content Goes Here.'
+              initialPhoto={selectedPhoto}
               onClose={handleCloseLightbox}
               photos={photos}
               title='Windows, Sidings, & Gutters'

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx

@@ -118,4 +118,4 @@ const LightboxCurrentPhoto = (props) => {
   )
 }
 
-export default LightboxCurrentPhoto
+export default LightboxCurrentPhoto

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx

@@ -10,14 +10,17 @@ const LightboxCustomHeader = (props) => {
     "https://images.unsplash.com/photo-1501045337096-542a73dafa4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2052&q=80",
     "https://images.unsplash.com/photo-1563693998336-93c10e5d8f91?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80,",
   ];
+  const [selectedPhoto, setSelectedPhoto] = useState(0);
   const [showLightbox, toggleShowLightbox] = useState(false);
 
   const handleCloseLightbox = () => {
     toggleShowLightbox(!showLightbox);
+    setSelectedPhoto(null);
   };
 
-  const onPhotoClick = () => {
+  const onPhotoClick = (photo) => {
     toggleShowLightbox(!showLightbox);
+    setSelectedPhoto(photo);
   };
 
   const exampleStyles = {
@@ -52,6 +55,7 @@ const LightboxCustomHeader = (props) => {
       {showLightbox ? (
           <Lightbox
               description={customDescription}
+              initialPhoto={selectedPhoto}
               navRight="All Photos"
               onClickRight={()=> alert("Clicked!")}
               onClose={handleCloseLightbox}

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx

@@ -8,14 +8,17 @@ const LightboxDefault = (props) => {
   const photos = [
     'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
   ]
+  const [selectedPhoto, setSelectedPhoto] = useState(0)
   const [showLightbox, toggleShowLightbox] = useState(false)
 
   const handleCloseLightbox = () => {
     toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(null)
   }
 
-  const onPhotoClick = () => {
+  const onPhotoClick = (photoIndex) => {
     toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(photoIndex)
   }
 
   return (
@@ -24,6 +27,7 @@ const LightboxDefault = (props) => {
         {showLightbox ? (
           <Lightbox
               icon="times"
+              initialPhoto={selectedPhoto}
               onClose={handleCloseLightbox}
               photos={photos}
               {...props}

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md

@@ -1 +1 @@
-Lightbox contains several props: `photos` (an array of urls), `onClickLeft` (an optional callback function for top left close button), `title` and `description` (string or custom components), `icon` ( optional prop for the close button in the top left of the header), `navRight` (optional prop that renders clickable text in the top right section of the header), `onClickRight` (optional callback function of navRight) and `onChange` (optional event handler prop exposing index of current photo).
+Lightbox contains several props: `photos` (an array of urls), `initialPhoto` (a number), `onClickLeft` (an optional callback function for top left close button), `title` and `description` (string or custom components), `icon` ( optional prop for the close button in the top left of the header), `navRight` (optional prop that renders clickable text in the top right section of the header), `onClickRight` (optional callback function of navRight) and `onChange` (optional event handler prop exposing index of current photo).

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx

@@ -29,14 +29,17 @@ const LightboxMultiple = (props) => {
     'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
     'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
   ]
+  const [selectedPhoto, setSelectedPhoto] = useState(0)
   const [light, toggleLight] = useState(false)
 
   const handleCloseLightbox = () => {
     toggleLight(!light)
+    setSelectedPhoto(null)
   }
 
-  const onPhotoClick = () => {
+  const onPhotoClick = (photo) => {
     toggleLight(!light)
+    setSelectedPhoto(photo)
   }
 
   const exampleStyles = {
@@ -49,6 +52,7 @@ const LightboxMultiple = (props) => {
       {light ? (
         <Lightbox
             icon="times"
+            initialPhoto={selectedPhoto}
             onChange={(index) => console.log(`current photo index: ${index}`)}
             onClose={handleCloseLightbox}
             photos={photos}

data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx

@@ -18,6 +18,7 @@ test('Kit renders', () => {
         data={{ testid: testId }}
         icon="close"
         id="test1"
+        initialPhoto={1}
         onClose={() => {}}
         photos={TEST_PHOTOS}
     />
@@ -34,6 +35,7 @@ test('Shows selected images', () => {
         data={{ testid: testId }}
         icon="close"
         id="test1"
+        initialPhoto={1}
         onClose={() => {}}
         photos={TEST_PHOTOS}
     />
@@ -41,7 +43,7 @@ test('Shows selected images', () => {
   const kit = screen.getByTestId(testId)
   const slide = kit.getElementsByClassName('Slide')[0]
   const image = slide.getElementsByTagName('img')[0]
-  expect(image).toHaveAttribute('src', TEST_PHOTOS[0])
+  expect(image).toHaveAttribute('src', TEST_PHOTOS[1])
 
   const thumbnails = kit.getElementsByClassName('Thumbnail')
 
@@ -75,6 +77,7 @@ test('Closes on escape key', async () => {
         data={{ testid: testId }}
         icon="close"
         id="test1"
+        initialPhoto={0}
         onClose={mockClose}
         photos={TEST_PHOTOS}
     />
@@ -103,6 +106,7 @@ test('Closes on close button', async () => {
         data={{ testid: testId }}
         icon="close"
         id="test1"
+        initialPhoto={0}
         onClose={mockClose}
         photos={TEST_PHOTOS}
     />

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Icon from '../pb_icon/_icon'
 import Image from '../pb_image/_image'
@@ -13,15 +13,15 @@ type NavItemProps = {
   children?: React.ReactNode[] | React.ReactNode,
   className?: string,
   data?: object,
-  iconLeft: string,
-  iconRight: string,
+  iconLeft?: string,
+  iconRight?: string,
   id?: string,
-  imageUrl: string,
-  link: string,
+  imageUrl?: string,
+  link?: string,
   onClick?: React.MouseEventHandler<HTMLElement>,
   target?: '_blank' | '_self' | '_parent' | '_top',
   text: string,
-}
+} & GlobalProps
 
 const NavItem = (props: NavItemProps) => {
   const {

data/app/pb_kits/playbook/pb_nav/_nav.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Caption from '../pb_caption/_caption'
 
@@ -17,10 +17,10 @@ type NavProps = {
   id?: string,
   onClick?: React.MouseEventHandler<HTMLElement>,
   orientation?: "vertical" | "horizontal",
-  link: string,
-  title: string,
+  link?: string,
+  title?: string,
   variant?: "normal" | "subtle",
-}
+} & GlobalProps
 
 const Nav = (props: NavProps) => {
   const {

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+import Icon from "../../pb_icon/_icon";
+import Flex from "../../pb_flex/_flex";
+import Tooltip from "../../pb_tooltip/_tooltip";
+
+
+type EditorButtonProps = {
+  classname?: string,
+  onclick?: () => {} | void,
+  icon?: string;
+  text?: string;
+  disable?: boolean
+};
+
+const EditorButton = ({
+  classname,
+  disable,
+  onclick,
+  icon,
+  text,
+}: EditorButtonProps) => {
+  return (
+    <Tooltip 
+      delay={{
+        open: 2000
+      }}
+      interaction 
+      placement="top" 
+      text={text}
+    >
+      <button
+        className={classname}
+        onClick={onclick}
+        disabled={disable}
+      >
+        <Flex 
+          align="center"
+          className="toolbar_button_icon"
+          justify="center"
+        >
+          <Icon icon={icon} size="lg" />
+        </Flex>
+      </button>
+    </Tooltip>
+  );
+};
+
+export default EditorButton

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts

@@ -0,0 +1,9 @@
+export type ToolbarTypes = {
+    node?: string,
+    icon?: string,
+    isActive?: string | null,
+    text?: string,
+    onclick?: () => {}
+    classname?: string
+    disable?: boolean
+}