Skip to content

Commit abeb0ee

Browse files
eshankvaisheshankvaish
committed
feat: add Feature Description Modal
1 parent 205bb05 commit abeb0ee

File tree

9 files changed

+287
-0
lines changed

9 files changed

+287
-0
lines changed

‎src/Common/Types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,7 @@ export interface ErrorScreenNotAuthorizedProps {
166166
export enum ImageType {
167167
Large = 'large',
168168
Medium = 'medium',
169+
SMALL = 'small',
169170
}
170171

171172
export interface InfoColourBarType {

‎src/Shared/Components/FeatureDescription/FeatureDescriptionModal.tsx

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/*
2+
* Copyright (c) 2024. Devtron Inc.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import { VisibleModal, stopPropagation } from '../../../Common'
18+
import { BUTTON_TEXT } from './constant'
19+
import { FeatureDescriptionModalProps } from './types'
20+
import './featureDescription.scss'
21+
import { ReactComponent as ArrowOutSquare } from '../../../Assets/Icon/ic-arrow-square-out.svg'
22+
import { getImageSize } from './utils'
23+
24+
export const FeatureDescriptionModal = ({
25+
title,
26+
renderDescriptionContent,
27+
closeModalText = BUTTON_TEXT.GOT_IT,
28+
docLink = '',
29+
closeModal,
30+
imageVariant,
31+
SVGImage,
32+
imageStyles = {},
33+
}: FeatureDescriptionModalProps) => {
34+
const renderImage = () => {
35+
if (!SVGImage) {
36+
return null
37+
}
38+
return (
39+
<div className="flexbox dc__align-center dc__justify-center mt-16 mb-12">
40+
<SVGImage
41+
style={{
42+
...imageStyles,
43+
width: `${getImageSize(imageVariant).width}`,
44+
height: `${getImageSize(imageVariant).height}`,
45+
}}
46+
/>
47+
</div>
48+
)
49+
}
50+
const renderDescriptionBody = () => (
51+
<div className="pl-20 pr-20 pt-16 pb-16 dc__gap-16">
52+
<div className="flex left w-100 fs-16 fw-6">{title}</div>
53+
{renderImage()}
54+
{typeof renderDescriptionContent === 'function' && renderDescriptionContent()}
55+
</div>
56+
)
57+
58+
const renderFooter = () => (
59+
<div
60+
className={`flex right w-100 dc__align-right pt-16 dc__border-top-n1 pb-16 pl-20 pr-20 pt-6 pb-6 ${docLink ? 'dc__content-space' : 'right'}`}
61+
>
62+
{docLink.length > 0 && (
63+
<a
64+
className="flex dc__link en-2 bw-1 pl-8 pr-8 dc__gap-6 br-4 fw-6 lh-20 pt-6 pb-6 h-32"
65+
href={docLink}
66+
target="_blank"
67+
rel="noreferrer"
68+
>
69+
{BUTTON_TEXT.VIEW_DOCUMENTATION}
70+
<ArrowOutSquare className="icon-dim-16 scb-5" />
71+
</a>
72+
)}
73+
<button className="cta flex small" type="submit" onClick={closeModal}>
74+
{closeModalText}
75+
</button>
76+
</div>
77+
)
78+
79+
return (
80+
<VisibleModal className="" close={closeModal}>
81+
<div
82+
className="feature-description modal__body w-600 mt-40 flex column p-0 fs-13 dc__overflow-hidden"
83+
onClick={stopPropagation}
84+
>
85+
{renderDescriptionBody()}
86+
{renderFooter()}
87+
</div>
88+
</VisibleModal>
89+
)
90+
}

‎src/Shared/Components/FeatureDescription/FeatureTitleWithInfo.tsx

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/*
2+
* Copyright (c) 2024. Devtron Inc.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import { useState } from 'react'
18+
import { DescriptorProps } from './types'
19+
import { ReactComponent as ICHelpOutline } from '../../../Assets/Icon/ic-help-outline.svg'
20+
import { BreadCrumb } from '../../../Common'
21+
import { FeatureDescriptionModal } from './FeatureDescriptionModal'
22+
23+
const FeatureTitleWithInfo = ({
24+
additionalContainerClasses,
25+
breadCrumbs,
26+
children,
27+
iconClassName,
28+
title,
29+
renderDescriptionContent,
30+
closeModalText,
31+
docLink,
32+
SVGImage,
33+
}: DescriptorProps) => {
34+
const [showFeatureDescriptionModal, setShowFeatureDescriptionModal] = useState(false)
35+
const onClickInfoIcon = () => {
36+
setShowFeatureDescriptionModal(true)
37+
}
38+
39+
const closeModal = () => {
40+
setShowFeatureDescriptionModal(false)
41+
}
42+
return (
43+
<>
44+
<div
45+
className={`feature-description flexbox dc__content-space dc__align-items-center w-100 ${additionalContainerClasses ?? ''}`}
46+
>
47+
<div className="flexbox dc__align-items-center dc__gap-4">
48+
<BreadCrumb breadcrumbs={breadCrumbs} />
49+
<ICHelpOutline className={`${iconClassName} icon-dim-20 cursor fcn-6`} onClick={onClickInfoIcon} />
50+
</div>
51+
52+
{children}
53+
</div>
54+
{showFeatureDescriptionModal && (
55+
<FeatureDescriptionModal
56+
title={title}
57+
renderDescriptionContent={renderDescriptionContent}
58+
closeModalText={closeModalText}
59+
docLink={docLink}
60+
closeModal={closeModal}
61+
SVGImage={SVGImage}
62+
/>
63+
)}
64+
</>
65+
)
66+
}
67+
68+
export default FeatureTitleWithInfo

‎src/Shared/Components/FeatureDescription/constant.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/*
2+
* Copyright (c) 2024. Devtron Inc.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
export enum BUTTON_TEXT {
18+
GOT_IT = 'Got it',
19+
VIEW_DOCUMENTATION = 'View Documentation',
20+
}
21+
22+
export enum IMAGE_VARIANT {
23+
SMALL = 'small',
24+
LARGE = 'large',
25+
}

‎src/Shared/Components/FeatureDescription/featureDescription.scss

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/*
2+
* Copyright (c) 2024. Devtron Inc.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
.feature-description {
18+
.large {
19+
width: 560px;
20+
height: 250px;
21+
}
22+
}

‎src/Shared/Components/FeatureDescription/index.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/*
2+
* Copyright (c) 2024. Devtron Inc.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
export * from './FeatureDescriptionModal'
18+
export { default as FeatureTitleWithInfo } from './FeatureTitleWithInfo'

‎src/Shared/Components/FeatureDescription/types.ts

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/*
2+
* Copyright (c) 2024. Devtron Inc.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import { ImageType } from '../../../Common'
18+
import { Breadcrumb } from '../../../Common/BreadCrumb/Types'
19+
20+
export interface FeatureDescriptionModalProps {
21+
title: string
22+
renderDescriptionContent?: () => JSX.Element
23+
closeModalText?: string
24+
docLink?: string
25+
closeModal?: () => void
26+
imageVariant?: ImageType
27+
SVGImage?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
28+
imageStyles?: React.CSSProperties
29+
}
30+
31+
export interface DescriptorProps extends FeatureDescriptionModalProps {
32+
breadCrumbs: Breadcrumb[]
33+
additionalContainerClasses?: string
34+
iconClassName?: string
35+
children?: React.ReactNode
36+
}

‎src/Shared/Components/FeatureDescription/utils.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/*
2+
* Copyright (c) 2024. Devtron Inc.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import { ImageType } from '../../../Common'
18+
19+
export const getImageSize = (imageType: ImageType) => {
20+
switch (imageType) {
21+
case ImageType.SMALL:
22+
return { width: '100%', height: '200px' }
23+
default:
24+
return { width: '100%', height: '250px' }
25+
}
26+
}

‎src/Shared/Components/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,4 @@ export * from './ButtonWithLoader'
1919
export * from './ButtonWithSelector'
2020
export * from './ModalSidebarPanel'
2121
export * from './ImageWithFallback'
22+
export * from './FeatureDescription'

0 commit comments

Comments
 (0)