-
-
Notifications
You must be signed in to change notification settings - Fork 632
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: migrate logos, slack and roadmap components to typescript (#2763)
- Loading branch information
1 parent
eca41b7
commit be9e29c
Showing
12 changed files
with
692 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
import { useEffect, useRef } from 'react'; | ||
|
||
interface IModalProps { | ||
title: string; | ||
children: React.ReactNode; | ||
onModalClose?: () => void; | ||
} | ||
|
||
/** | ||
* @description Modal component. | ||
* @param {string} props.title - The title of the modal. | ||
* @param {React.ReactNode} props.children - The content of the modal. | ||
* @param {function} props.onModalClose=()=>{} - Function to handle modal close event. | ||
*/ | ||
export default function Modal({ | ||
title, | ||
children, | ||
onModalClose = () => {} | ||
}: IModalProps) { | ||
const modalRef = useRef<HTMLDivElement>(null); | ||
|
||
// Focus the modal when it mounts | ||
useEffect(() => { | ||
if (modalRef.current) modalRef.current.focus(); | ||
}, []); | ||
|
||
/** | ||
* @description Handles the backdrop click event. | ||
* @param {React.MouseEvent<HTMLDivElement>} e - The event object. | ||
*/ | ||
function backdropClickHandler(e: React.MouseEvent<HTMLDivElement>) { | ||
if (modalRef.current && (modalRef.current === e.target || !modalRef.current.contains(e.target as Node))) { | ||
onModalClose(); | ||
} | ||
} | ||
|
||
/** | ||
* @description Handles the key up event. | ||
* @param {React.KeyboardEvent<HTMLDivElement>} e - The event object. | ||
*/ | ||
function onKeyUpHandler(e: React.KeyboardEvent<HTMLDivElement>) { | ||
if (e.key === 'Escape') onModalClose(); | ||
} | ||
|
||
return ( | ||
<div ref={modalRef} tabIndex={-1} className='fixed inset-0 z-30 my-auto mt-2 flex min-h-full items-end justify-center bg-black/30 p-4 text-center backdrop-blur sm:items-center sm:p-0' onClick={backdropClickHandler} onKeyUp={onKeyUpHandler}> | ||
<div className='relative m-auto overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:w-full sm:max-w-4xl sm:p-6'> | ||
<div className='mb-6 flex justify-between'> | ||
<h1 className='mr-4 truncate text-lg font-bold'>{title}</h1> | ||
<button onClick={() => onModalClose()} data-testid='Modal-close'> | ||
<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' strokeWidth={1.5} stroke='currentColor' className='size-6'> | ||
<path strokeLinecap='round' strokeLinejoin='round' d='M6 18L18 6M6 6l12 12' /> | ||
</svg> | ||
</button> | ||
</div> | ||
<div className='max-h-[65vh] w-full overflow-auto lg:max-h-[70vh]'> | ||
{children} | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
/** | ||
* @description Logo for Adidas | ||
* @param {string} className - used to style the svg | ||
*/ | ||
export default function AdidasLogo({ className }: { className?: string }) { | ||
return ( | ||
<svg className={className || 'inline-block'} fill='currentColor' viewBox='0 0 1065.5 254.5'> | ||
<g id='XMLID_1_'> | ||
<path | ||
id='XMLID_16_' | ||
d='M1030.713,10.174c12.585,0,22.597,10.299,22.597,23.741c0,12.299-10.012,22.596-22.597,22.596c-12.586,0-22.596-10.297-22.596-22.596C1008.117,20.473,1018.413,10.174,1030.713,10.174z M1030.713,13.322c-11.44,0-19.45,9.15-19.45,20.593c0,10.297,8.296,19.449,19.45,19.449c10.298,0,19.449-9.152,19.449-19.449 | ||
C1050.448,22.76,1041.011,13.322,1030.713,13.322z M1035.86,34.201c1.146,0,4.005,0.857,4.005,5.148v7.15h-4.005v-3.146 | ||
c0-5.148-1.144-7.438-4.003-7.438h-5.148v10.297h-4.004V20.473h8.294c5.147,0,9.152,3.146,9.152,7.436 | ||
C1040.151,30.77,1037.863,34.201,1035.86,34.201z M1026.709,24.762v7.15h4.004c2.002,0,5.147-1.143,5.147-3.146 | ||
c0-2.289-2.286-4.005-4.003-4.005H1026.709' | ||
/> | ||
<path | ||
id='XMLID_17_' | ||
d='M974.937,248.436c43.19,0,79.517-17.447,79.517-60.638c0-24.598-17.447-41.188-45.478-48.625 | ||
c-28.889-7.15-65.787-6.007-65.787-24.598c2.002-12.299,13.444-15.445,30.892-15.445c26.886,0,28.029,14.302,29.175,23.739h44.048 | ||
c-3.146-34.037-30.892-57.778-75.226-57.778c-46.336,0-73.223,24.6-73.223,56.921c0,18.591,9.153,35.181,24.598,43.188 | ||
c11.155,5.15,26.601,9.153,45.479,12.586c19.449,2.002,36.896,4.005,38.04,17.448c0,9.153-9.151,20.594-30.032,20.594 | ||
c-30.033,0-36.038-16.589-36.038-27.744h-46.337C895.708,223.551,925.454,248.436,974.937,248.436' | ||
/> | ||
<path | ||
id='XMLID_20_' | ||
d='M781.297,248.436c19.736,0,37.184-6.292,51.771-15.445v11.44h44.334V67.094h-44.62v13.443 | ||
c-14.302-10.296-31.749-15.444-51.771-15.444c-50.341,0-92.672,40.329-92.672,91.813 | ||
C688.625,207.247,730.956,248.436,781.297,248.436z M732.1,156.62c0-28.03,23.741-51.771,51.486-51.771 | ||
c26.885,0,49.482,23.74,49.482,51.771c0,26.601-22.598,50.627-49.482,50.627C755.555,207.247,732.1,183.221,732.1,156.62' | ||
/> | ||
<path | ||
id='XMLID_23_' | ||
d='M630.847,6.171v74.08c-15.444-10.296-32.894-15.444-52.63-15.444c-50.625,0-91.813,40.329-91.813,91.813 | ||
c0,50.627,41.188,91.529,91.813,91.529c19.451,0,38.042-6.292,52.63-15.445v11.44h43.19V5.885h-43.19V6.171z M529.021,156.62 | ||
c0-28.03,23.741-51.771,50.341-51.771c28.03,0,51.771,23.74,51.771,51.771c0,26.601-23.74,50.627-51.771,50.627 | ||
C552.476,207.247,529.021,183.221,529.021,156.62' | ||
/> | ||
<path | ||
id='XMLID_26_' | ||
d='M424.907,244.145h43.19V66.809h-43.19V244.145z M424.907,50.505h43.19V6.171h-43.19V50.505' | ||
/> | ||
<path | ||
id='XMLID_29_' | ||
d='M306.206,248.436c19.45,0,36.897-6.292,52.628-15.445v11.44h44.333V6.171h-44.333v74.08 | ||
c-15.445-10.296-32.892-15.444-52.628-15.444c-50.627,0-92.674,40.329-92.674,91.813 | ||
C213.532,207.247,255.579,248.436,306.206,248.436z M255.579,156.62c0-28.03,23.741-51.771,52.628-51.771 | ||
c26.887,0,50.627,23.74,50.627,51.771c0,26.601-23.741,50.627-50.627,50.627C279.32,207.247,255.579,183.221,255.579,156.62' | ||
/> | ||
<path | ||
id='XMLID_32_' | ||
d='M101.982,248.436c20.593,0,38.041-6.292,53.487-15.445v11.44h43.19V67.094h-43.19v13.443 | ||
c-15.446-10.296-34.037-15.444-53.487-15.444c-50.627,0-91.529,40.329-91.529,91.813 | ||
C10.453,207.247,51.641,248.436,101.982,248.436z M52.499,156.62c0-28.03,23.74-51.771,50.627-51.771 | ||
c28.889,0,52.629,23.74,52.629,51.771c0,26.601-23.741,50.627-52.629,50.627C76.239,207.247,52.499,183.221,52.499,156.62' | ||
/> | ||
</g> | ||
</svg> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
/** | ||
* @description Logo for Axway | ||
* @param {string} className - used to style the svg | ||
*/ | ||
export default function AxwayLogo({ className }: { className?: string }) { | ||
return ( | ||
<svg className={className || 'inline-block'} fill='currentColor' viewBox='0 0 749.5 261.5'> | ||
<g id='Page-1'> | ||
<g id='Home' transform='translate(-380 -13)'> | ||
<g id='Nav'> | ||
<g id='Axway-Logo' transform='translate(380 13)'> | ||
<path id='Fill-1' d='M33.393,169.374l21.84-3.681c5.399-0.859,6.38-3.681,6.38-6.381c0-6.38-4.54-11.778-15.46-11.778 | ||
s-16.319,6.38-17.301,14.601l-21.84-4.54c1.84-14.601,14.601-29.938,39.019-29.938c28.221,0,39.018,16.319,39.018,34.479v44.54 | ||
c0,4.54,0.859,10.92,0.859,14.602H64.313c-0.859-2.7-0.859-7.239-0.859-10.921c-4.54,7.239-13.62,13.62-26.38,13.62 | ||
c-19.141,0-30.92-12.761-30.92-27.239C6.153,180.295,17.933,171.215,33.393,169.374 M62.472,184.834v-3.681l-20,2.699 | ||
c-6.38,0.859-10.92,4.54-10.92,11.779c0,5.398,3.681,10.92,11.779,10.92C52.534,205.816,62.472,200.295,62.472,184.834'/> | ||
<path id='Fill-3' d='M121.613,175.755l-31.779-45.399h29.08c2.699,4.54,14.601,21.841,18.16,27.239l18.159-27.239h27.24 | ||
l-31.779,44.54l32.761,46.381h-28.221l-19.141-28.221c-3.681,4.539-15.46,22.699-18.159,28.221H90.693 | ||
C90.693,221.153,121.613,175.755,121.613,175.755z'/> | ||
<path id='Fill-5' d='M266.03,130.355l20,58.16l16.319-58.16h24.54l-28.221,90.921h-24.54l-20.859-61.841l-20.858,61.841h-24.54 | ||
l-29.08-90.921h25.521l17.301,58.16l19.142-58.16H266.03z'/> | ||
<path id='Fill-7' d='M351.552,169.374l21.841-3.681c5.398-0.859,6.381-3.681,6.381-6.381c0-6.38-4.54-11.778-15.461-11.778 | ||
c-10.92,0-16.318,6.38-17.301,14.601l-21.84-4.54c1.841-14.601,14.602-29.938,39.019-29.938 | ||
c28.221,0,39.019,16.319,39.019,34.479v44.54c0,4.54,0.858,10.92,0.858,14.602h-22.699c-0.859-2.7-0.859-7.239-0.859-10.921 | ||
c-4.54,7.239-13.619,13.62-26.38,13.62c-19.142,0-30.92-12.761-30.92-27.239C324.19,180.295,336.092,171.215,351.552,169.374 | ||
M380.632,184.834v-3.681l-20,2.699c-6.38,0.859-10.92,4.54-10.92,11.779c0,5.398,3.681,10.92,11.779,10.92 | ||
C370.57,205.816,380.632,200.295,380.632,184.834'/> | ||
<path id='Fill-9' d='M419.65,256.613l20.858-47.239l-38.159-79.019h27.239l24.54,53.62l21.841-53.62h26.38l-57.301,126.381 | ||
H419.65V256.613z'/> | ||
<g className='group-hover:text-[#de262c]'> | ||
<g id='Group-13' transform='translate(56.41 .062)'> | ||
<path id='Fill-11' fill='currentColor' d='M685.952,97.241v-30.92l-46.381-22.699v46.38L462.394,5.462v30.92l202.699,96.319V87.302 | ||
L685.952,97.241z'/> | ||
</g> | ||
<path id='Fill-14' fill='currentColor' d='M564.19,119.436v30.92l32.761,15.461l-52.761,55.46h34.479l61.84-65.399L564.19,119.436z' | ||
/> | ||
<path id='Fill-16' fill='currentColor' d='M721.368,148.516L543.209,63.116v30.921l141.718,68.098L721.368,148.516z' /> | ||
</g> | ||
</g> | ||
</g> | ||
</g> | ||
</g> | ||
</svg> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import { useState } from 'react'; | ||
|
||
/** | ||
* @description Logo for SAP | ||
* @param {string} className - used to style the svg | ||
*/ | ||
export default function SapLogo({ className }: { className?: string }) { | ||
const [isHovered, setIsHovered] = useState(false); | ||
|
||
const handleMouseEnter = () => { | ||
setIsHovered(true); | ||
}; | ||
const handleMouseLeave = () => { | ||
setIsHovered(false); | ||
}; | ||
|
||
return ( | ||
<svg className={className || 'inline-block'} fill='currentColor' viewBox='0 0 1024 522' | ||
onMouseEnter={handleMouseEnter} | ||
onMouseLeave={handleMouseLeave} | ||
> | ||
<linearGradient id='path3060_1_' gradientUnits='userSpaceOnUse' x1='-127.4302' y1='661.6777' x2='-126.4722' y2='661.6777' gradientTransform='matrix(0 513.7015 -513.7015 0 340415.5625 65474.9453)'> | ||
<stop offset='0' style={{ stopColor: isHovered ? '#1661BE' : 'currentColor' }} /> | ||
<stop offset='1' style={{ stopColor: isHovered ? '#019CE0' : 'currentColor' }} /> | ||
</linearGradient> | ||
<path id='path3060' fill='url(#path3060_1_)' d='M13.43,13.621v491.971h502.559l491.915-491.915l0,0H13.43V13.621z' /> | ||
<path id='path5384' fill='url(#path3060_1_)' d='M649.993,455.304v36.691h5.538v-15.923h6.229l10.039,15.923h6.23l-10.731-15.923c5.362-0.665,9.692-3.783,9.692-10.385c0-7.232-4.427-10.384-13.152-10.384H649.993z M655.531,460.149h7.614c3.745,0,7.962,0.609,7.962,5.191c0,5.728-4.271,6.232-9,6.232h-6.576V460.149z M662.454,441.803c-17.567,0-32.539,13.537-32.539,31.846c0,18.442,14.971,32.192,32.539,32.192c17.324,0,31.846-13.747,31.846-32.192C694.3,455.34,679.778,441.803,662.454,441.803z M662.454,446.996c14.332,0,25.613,11.578,25.613,26.652c0,15.332-11.281,26.654-25.613,26.654c-14.578,0-26.307-11.322-26.307-26.654C636.147,458.574,647.876,446.996,662.454,446.996z'/> | ||
<path id='path3100' fill='#FFFFFF' d='M609.321,249.022h-21.555V170.19h21.555c28.777,0,51.684,9.481,51.684,38.913C661.005,239.497,638.099,249.022,609.321,249.022 M377.321,305.381c-11.409,0-22.109-2.083-31.358-5.561l31.048-97.918h0.665l30.405,98.184c-9.16,3.278-19.583,5.295-30.727,5.295 M603.606,106.145h-97.885v232.754l-85.512-232.754h-84.758l-73.062,194.595c-7.72-49.047-58.529-66.028-98.472-78.688c-26.329-8.474-54.353-20.924-54.098-34.714c0.222-11.276,15.053-21.732,44.307-20.17c19.716,0.997,37.107,2.592,71.633,19.285l34.005-59.238c-31.502-16.094-75.155-26.196-110.867-26.274h-0.221c-41.66,0-76.374,13.58-97.907,35.811c-14.965,15.552-23.062,35.224-23.427,57.123c-0.554,29.996,10.49,51.285,33.606,68.31c19.562,14.333,44.517,23.561,66.56,30.472c27.193,8.386,49.391,15.707,49.136,31.314c-0.221,5.682-2.337,11.01-6.446,15.219c-6.768,7.034-17.169,9.637-31.558,9.958c-27.736,0.554-48.305-3.766-81.07-23.128l-30.228,60.068c32.665,18.598,71.333,29.476,110.8,29.476h5.106c34.338-0.665,62.074-10.468,84.238-28.279l3.588-3.135l-9.792,26.318h88.89l14.932-45.403c15.618,5.284,33.407,8.252,52.237,8.252c18.376,0,35.711-2.769,51.053-7.819l14.355,44.971h145.037v-94.041h31.646c76.429,0,121.688-38.9,121.688-104.187c0-72.663-43.952-105.993-137.528-105.993'/> | ||
</svg> | ||
); | ||
} |
Oops, something went wrong.