Add Close Button for infopopup component

Author: roshni73

packages/go-ui-storybook/src/stories/InfoPopup.stories.tsx

@@ -6,7 +6,8 @@ import type {
 
 import InfoPopup from './InfoPopup';
 
-type Story = StoryObj<InfoPopupProps>;
+type InfoPoppupSpecificProps = InfoPopupProps<string>;
+type Story = StoryObj<InfoPoppupSpecificProps>;
 
 const meta: Meta<typeof InfoPopup> = {
     title: 'Components/InfoPopup',

packages/go-ui-storybook/src/stories/InfoPopup.tsx

@@ -3,7 +3,7 @@ import {
     InfoPopupProps,
 } from '@ifrc-go/ui';
 
-function InfoPopup(props: InfoPopupProps) {
+function InfoPopup <N extends string>(props: InfoPopupProps<N>) {
     return (
         <PureInfoPopup {...props} />// eslint-disable-line react/jsx-props-no-spreading
     );

packages/ui/src/components/Button/styles.module.css

@@ -11,6 +11,7 @@
     display: inline-flex;
     position: relative;
     align-items: center;
+    text-align: center;
     border: var(--go-ui-width-separator-sm) solid var(--color-border);
     border-radius: var(--border-radius);
     background-color: var(--color-background);
@@ -21,7 +22,7 @@
     max-width: 100%;
     overflow: hidden;
     text-transform: var(--text-transform);
-    line-height: var(--go-ui-line-height-xs);
+    line-height: 21px;
     color: var(--color-text);
     font-family: inherit;
     font-size: var(--font-size);

packages/ui/src/components/DropdownMenu/styles.module.css

@@ -17,4 +17,8 @@
     display: flex;
     flex-direction: column;
     padding: var(--go-ui-spacing-sm) 0;
+
+    :hover {
+        background-color:var(--go-ui-color-gray)
+    }
 }

packages/ui/src/components/Heading/styles.module.css

@@ -4,7 +4,7 @@
     margin: 0;
     line-height: var(--line-height);
     font-size: var(--font-size);
-    font-weight: var(--go-ui-font-weight-semibold);
+    font-weight: 500;
 
     &.modal-font-weight {
         font-weight: var(--go-ui-font-weight-medium);

packages/ui/src/components/InfoPopup/index.tsx

@@ -1,12 +1,18 @@
-import { InformationLineIcon } from '@ifrc-go/icons';
+import { useCallback } from 'react';
+import {
+    CloseLineIcon,
+    InformationLineIcon,
+} from '@ifrc-go/icons';
 import { _cs } from '@togglecorp/fujs';
 
+import Button from '#components/Button';
 import Container from '#components/Container';
 import DropdownMenu from '#components/DropdownMenu';
 
 import styles from './styles.module.css';
 
-export interface Props {
+export interface Props<N> {
+    name: N;
     icon?: React.ReactNode;
     withoutIcon?: boolean;
     infoLabel?: React.ReactNode;
@@ -15,20 +21,32 @@ export interface Props {
     descriptionClassName?: string;
     popupClassName?: string;
     className?: string;
+    onCloseButtonClick?: (name: string) => void;
 }
 
-function InfoPopup(props: Props) {
+function InfoPopup<N extends string>(props: Props<N>) {
     const {
+        name,
         className,
         icon = <InformationLineIcon />,
         infoLabel,
         title,
         description,
         withoutIcon,
+        onCloseButtonClick,
         popupClassName,
         descriptionClassName,
     } = props;
 
+    const handleCloseButtonClick = useCallback(
+        () => {
+            if (onCloseButtonClick) {
+                onCloseButtonClick(name);
+            }
+        },
+        [onCloseButtonClick, name],
+    );
+
     return (
         <DropdownMenu
             label={(
@@ -50,6 +68,17 @@ function InfoPopup(props: Props) {
                 heading={title}
                 childrenContainerClassName={_cs(descriptionClassName, styles.content)}
                 withInternalPadding
+                withHeaderBorder
+                actions={(
+                    <Button
+                        name={undefined}
+                        onClick={handleCloseButtonClick}
+                        variant="tertiary"
+                        title="Close"
+                    >
+                        <CloseLineIcon className={styles.closeIcon} />
+                    </Button>
+                )}
             >
                 {description}
             </Container>

packages/ui/src/components/InfoPopup/styles.module.css

@@ -23,5 +23,13 @@
         white-space: pre-wrap;
         gap: var(--go-ui-spacing-xs);
         font-size: var(--go-ui-font-size-sm);
+
+        .heading {
+            font-weight: 500;
+        }
+    }
+    .close-icon {
+        font-size: var(--go-ui-font-size-2xl);
     }
+    
 }

packages/ui/src/components/InputContainer/styles.module.css

@@ -10,7 +10,7 @@
         padding: 0 var(--go-ui-spacing-sm);
 
         .input {
-            padding: var(--go-ui-spacing-xs) 0;
+            padding-left:12px;
             height: 32px;
         }
     }