playbook_ui 12.17.1 → 12.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bfed6f95e6594050c37a607fb9cad4b2cb4d4273e5783f31d2ef3d95ac8738f2
-  data.tar.gz: ad22ab4499b111356d7f9533afd9069bb10be334cbdb01f4d2e93ad034a3d93e
+  metadata.gz: 066fe5069146426c6fb9111de27a23e19513b840bc5c0173fe862f05c9a6ad3a
+  data.tar.gz: b72f2e69c675d622a6dbdebec865da68d2914cadafa00b2f729319cb66b9e442
 SHA512:
-  metadata.gz: 95349ca92cf7040d34fcc7d166e32513bf34d973e1dbc2b406a2523b60ea010a390a9e28ae8cd86c7747e48acf84b71fc550a9bed7f4832babb92f96d8d26c8b
-  data.tar.gz: f74e854a1c37a6d6050e4a8913ebb3c550633a6eb894f013f8a96b188cb0cad29f7fd39cc8723a0727e47fee1ab0342c850fda11a69ff86f09647e563156d5b7
+  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

@@ -12,6 +12,7 @@ type LightboxType = {
   aria?: {[key: string]: string},
   children: React.ReactNode[] | React.ReactNode | string,
   className?: string,
+  currentPhotoIndex?: number,
   data?: {[key: string]: string | number},
   description?: string | any,
   id?: string,
@@ -31,6 +32,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
     aria = {},
     children,
     className,
+    currentPhotoIndex,
     data = {},
     description,
     id = '',
@@ -50,6 +52,12 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
     onChange(activePhoto)
   },[activePhoto])
 
+  useEffect(() => {
+    currentPhotoIndex !== undefined && currentPhotoIndex !== null && (
+    setActivePhoto(currentPhotoIndex)
+    )
+  },[currentPhotoIndex])
+
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(

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

@@ -0,0 +1,121 @@
+/* @flow */
+/* eslint-disable jsx-control-statements/jsx-use-if-tag */
+import React, { useState } from 'react'
+import { Flex, Image, Button, Body, FlexItem } from '../../'
+import Lightbox from '../_lightbox.tsx'
+
+const LightboxCurrentPhoto = (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',
+    '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',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    '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',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    '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',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    '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',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    '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',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    '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',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    '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 [light, toggleLight] = useState(false)
+  //Setting state with the index of the current slide exposed by the onChange prop
+  const [active, setActive] = useState(0)
+  //Setting state for the current photo to pass to the kit
+  const [currentPhoto, setCurrentPhoto] = useState(active)
+
+  const handleCloseLightbox = () => {
+    toggleLight(!light)
+  }
+
+  const onPhotoClick = () => {
+    toggleLight(!light)
+  }
+
+  const exampleStyles = {
+    width: "100%",
+    overflow: "auto"
+  }
+
+  return (
+    <div className="lightbox_doc_example_custom">
+      {light ? (
+        <>
+          <Flex alignItems="center" 
+              className='custom_lightbox_sidebar'
+              justifyContent="center"
+          >
+            <Flex margin='lg'
+                orientation='column'
+            >
+              <Body marginBottom='md'>
+                This UI is for demonstration purposes only to demonstrate how external buttons can be used to change the slides.
+              </Body>
+              <FlexItem alignSelf="center">
+                <Flex justifyContent="center">
+                  <Button 
+                      onClick={()=> setCurrentPhoto(active > 0 ? active - 1 : 0)}
+                  >
+                    Back
+                  </Button>
+                  <Button marginLeft='sm'
+                      onClick={() => setCurrentPhoto(active < photos.length - 1 ? active + 1 : photos.length - 1)}
+                  >
+                    Next
+                  </Button>
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Flex>
+          <Lightbox
+              currentPhotoIndex={currentPhoto}
+              icon="times"
+              onChange={(index) => setActive(index)}
+              onClose={handleCloseLightbox}
+              photos={photos}
+              {...props}
+          />
+        </>
+      ) : (
+        <div
+            className="PhotoViewer"
+            style={exampleStyles}
+        >
+          <Flex>
+            {photos.map((photo, index) => {
+              return (
+                <div
+                    key={index}
+                    onClick={() => onPhotoClick(index)}
+                >
+                  <Image
+                      cursor="pointer"
+                      marginRight="xl"
+                      rounded
+                      size="lg"
+                      url={photo}
+                  />
+
+                  <div className="overlay" />
+                </div>
+              )
+            })}
+          </Flex>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default LightboxCurrentPhoto

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

@@ -0,0 +1 @@
+The `currentPhotoIndex` prop allows the user to pass a number to the lightbox that will set the current slide by index. This can be leveraged if the user wants to change slides using custom buttons. To do this, the user must also make use of the current slide's index that is exposed by the `onChange` prop. 

data/app/pb_kits/playbook/pb_lightbox/docs/example.yml

@@ -5,3 +5,4 @@ examples:
   - lightbox_multiple: Multiple
   - lightbox_compound_component: Compound Component
   - lightbox_custom_header: Custom Header
+  - lightbox_current_photo: Current Photo

data/app/pb_kits/playbook/pb_lightbox/docs/index.js

@@ -2,3 +2,4 @@ export { default as LightboxDefault } from './_lightbox_default.jsx'
 export { default as LightboxMultiple } from './_lightbox_multiple.jsx'
 export { default as LightboxCompoundComponent } from './_lightbox_compound_component.jsx'
 export { default as LightboxCustomHeader } from './_lightbox_custom_header'
+export { default as LightboxCurrentPhoto } from './_lightbox_current_photo'

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
+}