refactor(components): rewrite HelpButton component

2 files changed, 20 insertions, 20 deletions

diff --git a/src/components/molecules/tooltip/tooltip.module.scss b/src/components/molecules/tooltip/tooltip.module.scss
index 029767f..557d9c7 100644
--- a/src/components/molecules/tooltip/tooltip.module.scss
+++ b/src/components/molecules/tooltip/tooltip.module.scss
@@ -38,14 +38,6 @@
     opacity: 1;
     visibility: visible;
     transform: scale(1);
-
-    & ~ .btn {
-      background: var(--color-primary);
-
-      * {
-        color: var(--color-fg-inverted);
-      }
-    }
   }
 }
 
@@ -60,13 +52,15 @@
 
 .icon {
   align-self: stretch;
-  display: flex;
-  align-items: center;
   margin-right: var(--spacing-xs);
-  padding: 0 var(--spacing-2xs);
   background: var(--color-primary-dark);
   border: fun.convert-px(1) solid var(--color-primary-dark);
   box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow);
-  color: var(--color-fg-inverted);
-  font-weight: 600;
+
+  :global {
+    path {
+      fill: var(--color-fg-inverted);
+      margin-inline: var(--spacing-2xs);
+    }
+  }
 }
diff --git a/src/components/molecules/tooltip/tooltip.tsx b/src/components/molecules/tooltip/tooltip.tsx
index 43ceced..1f54d68 100644
--- a/src/components/molecules/tooltip/tooltip.tsx
+++ b/src/components/molecules/tooltip/tooltip.tsx
@@ -1,8 +1,9 @@
-import { FC, MouseEventHandler, useRef } from 'react';
-import { Heading, Modal, ModalProps } from '../../atoms';
+import { type FC, type MouseEventHandler, useRef } from 'react';
+import { useIntl } from 'react-intl';
+import { useOnClickOutside } from '../../../utils/hooks';
+import { Heading, Icon, Modal, type ModalProps } from '../../atoms';
 import { HelpButton } from '../buttons';
 import styles from './tooltip.module.scss';
-import { useOnClickOutside } from '../../../utils/hooks';
 
 export type TooltipProps = Omit<ModalProps, 'heading'> & {
   /**
@@ -47,6 +48,12 @@ export const Tooltip: FC<TooltipProps> = ({
   onToggle,
   ...props
 }) => {
+  const intl = useIntl();
+  const helpLabel = intl.formatMessage({
+    defaultMessage: 'Show help',
+    description: 'Tooltip: show help label',
+    id: '1Xgg7+',
+  });
   const directionModifier =
     direction === 'upwards' ? 'tooltip--up' : 'tooltip--down';
   const visibilityModifier = isOpen ? 'tooltip--visible' : 'tooltip--hidden';
@@ -70,9 +77,7 @@ export const Tooltip: FC<TooltipProps> = ({
         className={tooltipClass}
         heading={
           <Heading className={styles.heading} isFake level={6}>
-            <span aria-hidden className={styles.icon}>
-              ?
-            </span>
+            <Icon aria-hidden className={styles.icon} shape="help" size="sm" />
             {heading}
           </Heading>
         }
@@ -82,8 +87,9 @@ export const Tooltip: FC<TooltipProps> = ({
         {children}
       </Modal>
       <HelpButton
-        aria-pressed={isOpen}
         className={styles.btn}
+        isPressed={isOpen}
+        label={helpLabel}
         onClick={onToggle}
         ref={btnRef}
       />