Feature/add icon button with tooltip

.github/configs/draft-release.yml

@@ -32,7 +32,7 @@ version-resolver:
       - 'refactor'
   default: patch
 template: |
-  ## Changes within UI Kit
+  ## Changes within UI Library
 
   $CHANGES
 

.github/workflows/draft-next-release.yml

@@ -13,7 +13,7 @@ on:
 
 jobs:
   draft_release:
-    name: 'Draft UI Kit release'
+    name: 'Draft UI Library release'
     permissions:
       contents: write
       pull-requests: write

.github/workflows/publish.yml

@@ -1,4 +1,4 @@
-name: Publish UI Kit to GitHub Packages
+name: Publish UI Library to GitHub Packages
 
 on:
   release:

README.md

@@ -1,6 +1,6 @@
-# UI Kit
+# UI Library
 
-The HiveMQ UI Kit provides components on top of Chakra UI for various applications.
+The HiveMQ UI Library provides components on top of Chakra UI for various applications.
 
 ## Development
 

src/docs/Demo.mdx

@@ -6,15 +6,15 @@ import SimpleImplementation from './cookbook/SimpleImplementation?raw';
 
 <Meta title='Introduction' />
 
-# HiveMQ UI Kit 🐚
+# HiveMQ UI Library 🐚
 
-The HiveMQ UI Kit is a template that frames the content of a page.
+The HiveMQ UI Library is a template that frames the content of a page.
 It provides the most basic elements required to build a HiveMQ Application,
 such as the header, sidebar navigation, and overlays.
 
 ## Installation
 
-The HiveMQ UI Kit is available as an npm package in the GitHub Package Registry.
+The HiveMQ UI Library is available as an npm package in the GitHub Package Registry.
 For that you need to generate a personal access token with the `read:packages` scope.
 See [Authenticating to GitHub Packages](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#authenticating-to-github-packages) for more information.
 
@@ -34,11 +34,11 @@ npm install @hivemq/ui-library
 ## Cookbooks
 
 Let's get started with maximum speed you can ether use the [interactive demo](/?path=/story/demo-interactive--primary)
-or follow the steps below to add the UI Kit to your project.
+or follow the steps below to add the UI Library to your project.
 
 ## Demo
 
-Checkout the [interactive demo](/?path=/story/demo-interactive--primary) below to see the UI Kit in action.
+Checkout the [interactive demo](/?path=/story/demo-interactive--primary) below to see the UI Library in action.
 
 <Canvas of={DemoStories.Primary} layout='fullscreen' />
 

src/docs/cookbook/FullDemo.tsx

@@ -171,7 +171,7 @@ export function FullDemo() {
           </Heading>
 
           <Text>
-            This is a full demo of the HiveMQ UI Kit. You can interact with the sidebar to change
+            This is a full demo of the HiveMQ UI Library. You can interact with the sidebar to change
             the active item.
           </Text>
         </VStack>

src/lib.ts

@@ -2,6 +2,7 @@ export * from './modules/Shell'
 export * from './modules/Content'
 export * from './modules/Header'
 export * from './modules/Sidebar'
+export * from './modules/Buttons'
 
 // TODO make it a hook `useShellContext`
 export {

src/modules/Buttons/IconButtonWithTooltip.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react'
+import { IconButtonProps, TooltipProps, Tooltip, IconButton as CuiIconButton } from '@chakra-ui/react'
+
+export interface IconButtonWithTooltipProps extends Omit<IconButtonProps, 'icon'> {
+  icon: React.ReactElement
+  tooltipProps?: Omit<TooltipProps, 'aria-label' | 'hasArrow' | 'children'>
+}
+
+export const IconButtonWithTooltip: FC<IconButtonWithTooltipProps> = ({ 'aria-label': ariaLabel, tooltipProps, ...props }) => {
+  return (
+    <Tooltip label={ariaLabel} placement="top" {...tooltipProps} hasArrow data-testid="icon-button-tooltip">
+      <CuiIconButton aria-label={ariaLabel} {...props} />
+    </Tooltip>
+  )
+}

src/modules/Buttons/index.ts

@@ -0,0 +1,5 @@
+export {
+  IconButtonWithTooltip,
+  type IconButtonWithTooltipProps
+} from './IconButtonWithTooltip'
+

src/modules/Content/index.ts

@@ -8,7 +8,7 @@ export const Content = {
    */
   Base: ContentRoot,
   /**
-   * Root element for the UI Kit content that positions the HTML element on the grid and provides
+   * Root element for the UI Library content that positions the HTML element on the grid and provides
    * @requires Shell.Root - As the parent element that provides the layout / context for the Content.Root
    */
   Root: ContentRoot,

src/modules/Shell/index.ts

@@ -2,7 +2,7 @@ import { ShellContainer, ShellProvider, ShellRoot } from './ShellRoot'
 
 export const Shell = {
   /**
-   * Provider for the entire UI Kit this should be at the top of all elements,
+   * Provider for the entire UI Shell this should be at the top of all elements,
    * even above `Shell.Root`
    *
    * @deprecated use `Shell.Root` instead since it provides functionality for both `Shell.Provider` and `Shell.Container`