feature description modal integration

Author: shivani170

package-lock.json

@@ -0,0 +1,52 @@
+import { VisibleModal, noop } from '../../../Common'
+import { BUTTON_TEXT, IMAGE_VARIANT } from './constant'
+import { FeatureDescriptionModalProps } from './types'
+import './featureDescription.scss'
+
+export const FeatureDescriptionModal = ({
+    image,
+    title,
+    renderDescriptionContent,
+    closeModalText = BUTTON_TEXT.GOT_IT,
+    docLink = '',
+    closeModal,
+    imageVariant,
+}: FeatureDescriptionModalProps) => {
+    const renderDescriptionBody = () => (
+        <div className="pl-20 pr-20 pt-16 pb-16">
+            <div className="flex left w-100 fs-16 fw-6">{title}</div>
+            <img
+                src={image}
+                className={`${imageVariant === IMAGE_VARIANT.SMALL ? 'small' : 'large'} mt-16 mb-12`}
+                alt="feature-description"
+            />
+            {typeof renderDescriptionContent === 'function' && renderDescriptionContent()}
+        </div>
+    )
+
+    const renderFooter = () => (
+        <div
+            className={`flex right w-100 dc__align-right pt-16 dc__border-top-n1 pb-16 pl-20 pr-20 ${docLink ? 'dc__content-space' : 'right'}`}
+        >
+            {docLink && (
+                <button className="cta flex h-36" type="submit" onClick={noop}>
+                    <a className="" href={docLink} target="_blank" rel="noreferrer">
+                        {BUTTON_TEXT.VIEW_DOCUMENTATION}
+                    </a>
+                </button>
+            )}
+            <button className="cta flex h-36" type="submit" onClick={closeModal}>
+                {closeModalText}
+            </button>
+        </div>
+    )
+
+    return (
+        <VisibleModal className="">
+            <div className="feature-description modal__body w-600 mt-40 flex column dc__gap-16 p-0 fs-13">
+                {renderDescriptionBody()}
+                {renderFooter()}
+            </div>
+        </VisibleModal>
+    )
+}

src/Shared/Components/FeatureDescription/FeatureDescriptionModal.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react'
+import { DescriptorProps } from './types'
+import { ReactComponent as ICHelpOutline } from '../../../Assets/Icon/ic-help-outline.svg'
+import { BreadCrumb } from '../../../Common'
+import { FeatureDescriptionModal } from './FeatureDescriptionModal'
+
+const FeatureTitleWithInfo = ({
+    additionalContainerClasses,
+    breadCrumbs,
+    children,
+    iconClassName,
+    title,
+    image,
+    renderDescriptionContent,
+    closeModalText,
+    docLink,
+}: DescriptorProps) => {
+    const [showFeatureDescriptionModal, setShowFeatureDescriptionModal] = useState(false)
+    const onClickInfoIcon = () => {
+        setShowFeatureDescriptionModal(true)
+    }
+
+    const closeModal = () => {
+        setShowFeatureDescriptionModal(false)
+    }
+    return (
+        <>
+            <div
+                className={`feature-description flexbox dc__content-space dc__align-items-center w-100 ${additionalContainerClasses ?? ''}`}
+            >
+                <div className="flexbox dc__align-items-center dc__gap-4">
+                    <BreadCrumb breadcrumbs={breadCrumbs} />
+                    <ICHelpOutline className={`${iconClassName} icon-dim-20 cursor`} onClick={onClickInfoIcon} />
+                </div>
+
+                {children}
+            </div>
+            {showFeatureDescriptionModal && (
+                <FeatureDescriptionModal
+                    image={image}
+                    title={title}
+                    renderDescriptionContent={renderDescriptionContent}
+                    closeModalText={closeModalText}
+                    docLink={docLink}
+                    closeModal={closeModal}
+                />
+            )}
+        </>
+    )
+}
+
+export default FeatureTitleWithInfo

src/Shared/Components/FeatureDescription/FeatureTitleWithInfo.tsx

@@ -0,0 +1,9 @@
+export enum BUTTON_TEXT {
+    GOT_IT = 'Got it',
+    VIEW_DOCUMENTATION = 'View Documentation',
+}
+
+export enum IMAGE_VARIANT {
+    SMALL = 'small',
+    LARGE = 'large',
+}

src/Shared/Components/FeatureDescription/constant.ts

@@ -0,0 +1,6 @@
+.feature-description{
+    .large {
+        width: 560px;
+        max-height: 450px;
+    }
+}

src/Shared/Components/FeatureDescription/featureDescription.scss

@@ -0,0 +1,2 @@
+export * from './FeatureDescriptionModal'
+export { default as FeatureTitleWithInfo } from './FeatureTitleWithInfo'

src/Shared/Components/FeatureDescription/index.ts

@@ -0,0 +1,19 @@
+import { Breadcrumb } from '../../../Common/BreadCrumb/Types'
+import { IMAGE_VARIANT } from './constant'
+
+export interface FeatureDescriptionModalProps {
+    image
+    title: string
+    renderDescriptionContent?: () => JSX.Element
+    closeModalText?: string
+    docLink?: string
+    closeModal: () => void
+    imageVariant?: IMAGE_VARIANT
+}
+
+export interface DescriptorProps extends FeatureDescriptionModalProps {
+    breadCrumbs: Breadcrumb[]
+    additionalContainerClasses?: string
+    iconClassName?: string
+    children?: React.ReactNode
+}

src/Shared/Components/FeatureDescription/types.ts

@@ -17,3 +17,4 @@ export * from './Header'
 export * from './AnnouncementBanner'
 export * from './ButtonWithLoader'
 export * from './ButtonWithSelector'
+export * from './FeatureDescription'