feat(Help): add help button content in props

AxaFrance · Sep 12, 2023 · fe325ca · fe325ca
1 parent 545e2c6
commit fe325ca
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 32 deletions.
diff --git a/packages/action/src/button.scss b/packages/action/src/button.scss
@@ -296,11 +296,3 @@ $active-sort-table-th: $color-table-sorting !default;
     margin-left: 2rem;
   }
 }
-
-.af-more-help {
-  font-weight: bold;
-  font-family: $font-family-serif;
-  font-style: italic;
-  font-size: 1.2rem;
-  vertical-align: middle;
-}
diff --git a/packages/button/src/button.scss b/packages/button/src/button.scss
@@ -300,11 +300,3 @@ $active-sort-table-th: $color-table-sorting !default;
     margin-left: 2rem;
   }
 }
-
-.af-more-help {
-  font-weight: bold;
-  font-family: $font-family-serif;
-  font-style: italic;
-  font-size: 1.2rem;
-  vertical-align: middle;
-}
diff --git a/packages/help/src/Help.tsx b/packages/help/src/Help.tsx
@@ -1,30 +1,42 @@
-import React, { ComponentPropsWithoutRef } from 'react';
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
 import Popover, {
   PopoverBase,
   PopoverPlacements,
 } from '@axa-fr/react-toolkit-popover';
+import { getComponentClassName } from '@axa-fr/react-toolkit-core';
 
-export type Props = ComponentPropsWithoutRef<typeof Popover>;
+export type HelpProps = ComponentPropsWithoutRef<typeof Popover> & {
+  helpButtonContent?: ReactNode;
+};
 
 const Help = ({
   className,
   classModifier,
   children,
   mode = 'click',
   placement = PopoverPlacements.right,
-}: Props) => (
-  <Popover
-    className={className}
-    classModifier={classModifier}
-    placement={placement}
-    mode={mode}>
-    <PopoverBase.Pop>{children}</PopoverBase.Pop>
-    <PopoverBase.Over>
-      <button className="btn af-btn--circle" type="button">
-        <span className="af-more-help">i</span>
-      </button>
-    </PopoverBase.Over>
-  </Popover>
-);
+  helpButtonContent = <span className="af-more-help">i</span>,
+}: HelpProps) => {
+  const buttonClassName = getComponentClassName(
+    'btn af-btn--circle',
+    classModifier,
+    ''
+  );
+
+  return (
+    <Popover
+      className={className}
+      classModifier={classModifier}
+      placement={placement}
+      mode={mode}>
+      <PopoverBase.Pop>{children}</PopoverBase.Pop>
+      <PopoverBase.Over>
+        <button className={buttonClassName} type="button">
+          {helpButtonContent}
+        </button>
+      </PopoverBase.Over>
+    </Popover>
+  );
+};
 
 export default Help;
diff --git a/packages/help/src/__tests__/Help.spec.tsx b/packages/help/src/__tests__/Help.spec.tsx
@@ -4,6 +4,25 @@ import UserEvent from '@testing-library/user-event';
 import Help from '../Help';
 
 describe('Help', () => {
+  it('should show default help', () => {
+    render(<Help>Help content</Help>);
+
+    expect(screen.getByText('i')).toBeInTheDocument();
+  });
+
+  it('should show help passed in props', () => {
+    render(
+      <Help helpButtonContent={<i className="glyphicon glyphicon-warning" />}>
+        Help content
+      </Help>
+    );
+
+    expect(screen.queryByText('i')).not.toBeInTheDocument();
+    expect(
+      document.getElementsByClassName('glyphicon glyphicon-warning')
+    ).not.toEqual([]);
+  });
+
   describe('Mode click (default)', () => {
     it('should show help on when clicking on i', async () => {
       // Arrange

diff --git a/packages/help/src/help-custom.scss b/packages/help/src/help-custom.scss
@@ -56,3 +56,11 @@
     }
   }
 }
+
+.af-more-help {
+  font-weight: bold;
+  font-family: $font-family-serif;
+  font-style: italic;
+  font-size: 1.2rem;
+  vertical-align: middle;
+}