css fixes for feature description

Author: shivani170

src/Common/BreadCrumb/BreadcrumbStore.tsx

@@ -1,9 +1,14 @@
 import React, { createContext, useState } from 'react'
+import { BreadcrumbTextProps } from './Types'
 
 const initialState = {
     alias: {},
 }
 
+export const BreadcrumbText = ({ heading, isActive }: BreadcrumbTextProps) => (
+    <h2 className={`m-0 fs-16 fw-6 lh-32 ${isActive ? 'cn-9' : 'cb-5'}`}>{heading}</h2>
+)
+
 const Store = ({ children }) => {
     const [state, setState] = useState(initialState)
     return <BreadcrumbContext.Provider value={{ state, setState }}>{children}</BreadcrumbContext.Provider>

src/Common/BreadCrumb/Types.ts

@@ -27,3 +27,8 @@ export interface Breadcrumbs {
 }
 
 export type UseBreadcrumbOptionalProps = UseBreadcrumbProps | null
+
+export interface BreadcrumbTextProps {
+    heading: string
+    isActive?: boolean
+}

src/Common/Types.ts

@@ -159,6 +159,7 @@ export interface ErrorScreenNotAuthorizedProps {
 export enum ImageType {
     Large = 'large',
     Medium = 'medium',
+    SMALL = 'small',
 }
 
 export interface InfoColourBarType {

src/Common/index.ts

@@ -14,7 +14,7 @@ export * from './Modals/OpaqueModal'
 export * from './Modals/VisibleModal'
 export * from './Modals/VisibleModal2'
 export { BreadCrumb, useBreadcrumb } from './BreadCrumb/BreadCrumb'
-export { default as BreadcrumbStore } from './BreadCrumb/BreadcrumbStore'
+export { default as BreadcrumbStore, BreadcrumbText } from './BreadCrumb/BreadcrumbStore'
 export { default as RadioGroup } from './RadioGroup'
 export { default as RadioGroupItem } from './RadioGroupItem'
 export { default as PopupMenu } from './PopupMenu'

src/Shared/Components/FeatureDescription/FeatureDescriptionModal.tsx

@@ -1,8 +1,9 @@
 import { VisibleModal } from '../../../Common'
-import { BUTTON_TEXT, IMAGE_VARIANT } from './constant'
+import { BUTTON_TEXT } from './constant'
 import { FeatureDescriptionModalProps } from './types'
 import './featureDescription.scss'
 import { ReactComponent as ArrowOutSquare } from '../../../Assets/Icon/ic-arrow-square-out.svg'
+import { getImageSize } from './utils'
 
 export const FeatureDescriptionModal = ({
     image,
@@ -12,18 +13,47 @@ export const FeatureDescriptionModal = ({
     docLink = '',
     closeModal,
     imageVariant,
+    SVGImage,
+    imageStyles = {},
 }: FeatureDescriptionModalProps) => {
+    const renderImage = () => {
+        if (!image && !SVGImage) {
+            return null
+        }
+        if (image) {
+            return (
+                <div className="} dc__overflow-auto">
+                    <img
+                        src={image}
+                        style={{
+                            ...imageStyles,
+                            width: `${getImageSize(imageVariant).width}`,
+                            height: `${getImageSize(imageVariant).height}`,
+                        }}
+                        className="image-class-name mt-16 mb-12"
+                        alt="feature-description"
+                    />
+                    image
+                </div>
+            )
+        }
+        return (
+            <div className="flexbox dc__align-center dc__justify-center mt-16 mb-12">
+                <SVGImage
+                    style={{
+                        ...imageStyles,
+                        width: `${getImageSize(imageVariant).width}`,
+                        height: `${getImageSize(imageVariant).height}`,
+                    }}
+                />
+            </div>
+        )
+    }
     const renderDescriptionBody = () => (
         <div className="pl-20 pr-20 pt-16 pb-16 dc__gap-16">
             <div className="flex left w-100 fs-16 fw-6">{title}</div>
-            <div className={`${imageVariant === IMAGE_VARIANT.SMALL ? 'mxh-350' : 'mxh-450'} dc__overflow-auto`}>
-                <img
-                    src={image}
-                    className={`${imageVariant === IMAGE_VARIANT.SMALL ? 'small' : 'large'}  mt-16 mb-12`}
-                    alt="feature-description"
-                />
-                {typeof renderDescriptionContent === 'function' && renderDescriptionContent()}
-            </div>
+            {renderImage()}
+            {typeof renderDescriptionContent === 'function' && renderDescriptionContent()}
         </div>
     )
 
@@ -49,7 +79,7 @@ export const FeatureDescriptionModal = ({
     )
 
     return (
-        <VisibleModal className="">
+        <VisibleModal className="" close={closeModal}>
             <div className="feature-description modal__body w-600 mt-40 flex column p-0 fs-13 dc__overflow-hidden">
                 {renderDescriptionBody()}
                 {renderFooter()}

src/Shared/Components/FeatureDescription/FeatureTitleWithInfo.tsx

@@ -14,6 +14,7 @@ const FeatureTitleWithInfo = ({
     renderDescriptionContent,
     closeModalText,
     docLink,
+    SVGImage,
 }: DescriptorProps) => {
     const [showFeatureDescriptionModal, setShowFeatureDescriptionModal] = useState(false)
     const onClickInfoIcon = () => {
@@ -43,6 +44,7 @@ const FeatureTitleWithInfo = ({
                     closeModalText={closeModalText}
                     docLink={docLink}
                     closeModal={closeModal}
+                    SVGImage={SVGImage}
                 />
             )}
         </>

src/Shared/Components/FeatureDescription/types.ts

@@ -1,14 +1,16 @@
+import { ImageType } from '../../../Common'
 import { Breadcrumb } from '../../../Common/BreadCrumb/Types'
-import { IMAGE_VARIANT } from './constant'
 
 export interface FeatureDescriptionModalProps {
-    image
+    image?
     title: string
     renderDescriptionContent?: () => JSX.Element
     closeModalText?: string
     docLink?: string
     closeModal?: () => void
-    imageVariant?: IMAGE_VARIANT
+    imageVariant?: ImageType
+    SVGImage?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
+    imageStyles?: React.CSSProperties
 }
 
 export interface DescriptorProps extends FeatureDescriptionModalProps {

src/Shared/Components/FeatureDescription/utils.ts

@@ -0,0 +1,10 @@
+import { ImageType } from '../../../Common'
+
+export const getImageSize = (imageType: ImageType) => {
+    switch (imageType) {
+        case ImageType.SMALL:
+            return { width: '100%', height: '200px' }
+        default:
+            return { width: '100%', height: '250px' }
+    }
+}