feat(widgets): add refresh icon and className to Tooltip component (#…

…5251)

### Description

<!--
What's included in this PR?
-->

- Export new Refresh Icon
- Add tooltipClassName as a prop to Tooltip and added the default value
to be the one used in this
[PR](hyperlane-xyz/hyperlane-explorer#147)

### Drive-by changes

<!--
Are there any minor or drive-by changes also included?
-->

No
### Related issues

<!--
- Fixes #[issue number here]
-->
Refresh button will be used to add refresh functionality to explorer

### Backward compatibility

<!--
Are these changes backward compatible? Are there any infrastructure
implications, e.g. changes that would prohibit deploying older commits
using this infra tooling?

Yes/No
-->
Yes
### Testing

<!--
What kind of testing have these changes undergone?

None/Manual/Unit Tests
-->
Storybook

.changeset/nervous-dragons-applaud.md

@@ -0,0 +1,5 @@
+---
+'@hyperlane-xyz/widgets': minor
+---
+
+Refresh Icon and Tooltip class Name

typescript/widgets/src/components/Tooltip.tsx

@@ -1,3 +1,4 @@
+import { clsx } from 'clsx';
 import React, { AnchorHTMLAttributes } from 'react';
 import { PlacesType, Tooltip as ReactTooltip } from 'react-tooltip';
 
@@ -9,14 +10,16 @@ type Props = AnchorHTMLAttributes<HTMLAnchorElement> & {
   content: string;
   size?: number;
   placement?: PlacesType;
+  tooltipClassName?: string;
 };
 
 export function Tooltip({
   id,
   content,
-  size = 16,
   className,
   placement = 'top-start',
+  size = 16,
+  tooltipClassName,
   ...rest
 }: Props) {
   return (
@@ -26,6 +29,10 @@ export function Tooltip({
         data-tooltip-place={placement}
         data-tooltip-id={id}
         data-tooltip-html={content}
+        data-tooltip-class-name={clsx(
+          'htw-max-w-[calc(100%-10px)] sm:htw-max-w-[526px]',
+          tooltipClassName,
+        )}
         {...rest}
       >
         <Circle size={size} className="htw-bg-gray-200 htw-border-gray-300">

typescript/widgets/src/icons/Refresh.tsx

@@ -0,0 +1,18 @@
+import React, { memo } from 'react';
+
+import { ColorPalette } from '../color.js';
+
+import { DefaultIconProps } from './types.js';
+
+function _RefreshIcon({ color, ...rest }: DefaultIconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" {...rest}>
+      <path
+        d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"
+        fill={color || ColorPalette.Black}
+      />
+    </svg>
+  );
+}
+
+export const RefreshIcon = memo(_RefreshIcon);

typescript/widgets/src/index.ts

@@ -45,6 +45,7 @@ export { PencilIcon } from './icons/Pencil.js';
 export { PlusIcon } from './icons/Plus.js';
 export { PlusCircleIcon } from './icons/PlusCircle.js';
 export { QuestionMarkIcon } from './icons/QuestionMark.js';
+export { RefreshIcon } from './icons/Refresh.js';
 export { SearchIcon } from './icons/Search.js';
 export { ShieldIcon } from './icons/Shield.js';
 export { SpinnerIcon } from './icons/Spinner.js';

typescript/widgets/src/stories/Tooltip.stories.tsx

@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Tooltip } from '../components/Tooltip.js';
+
+const meta = {
+  title: 'Tooltip',
+  component: Tooltip,
+} satisfies Meta<typeof Tooltip>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const DefaultTooltip = {
+  args: {
+    id: 'id-01',
+    content:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis odio ac sem dictum tincidunt. Suspendisse interdum purus et quam ornare, at tempor risus pretium.',
+  },
+} satisfies Story;
+
+export const WithTooltipClassnameTooltip = {
+  args: {
+    id: 'id-01',
+    content:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis odio ac sem dictum tincidunt. Suspendisse interdum purus et quam ornare, at tempor risus pretium.',
+    tooltipClassName: 'sm:htw-max-w-[300px]',
+  },
+} satisfies Story;