hds-web 1.28.5 → 1.28.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.28.5",
+  "version": "1.28.7",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/HDS/assets/icons/verifiedBlue.svg

@@ -0,0 +1,4 @@
+<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.01447 1.91542C8.40071 2.43846 7.6376 2.75455 6.83377 2.8187C4.95794 2.96839 3.46839 4.45794 3.3187 6.33377C3.25455 7.1376 2.93846 7.90071 2.41542 8.51447C1.19486 9.94672 1.19486 12.0533 2.41542 13.4855C2.93846 14.0993 3.25455 14.8624 3.3187 15.6662C3.46839 17.5421 4.95794 19.0316 6.83377 19.1813C7.6376 19.2455 8.40071 19.5615 9.01447 20.0846C10.4467 21.3051 12.5533 21.3051 13.9855 20.0846C14.5993 19.5615 15.3624 19.2455 16.1662 19.1813C18.0421 19.0316 19.5316 17.5421 19.6813 15.6662C19.7455 14.8624 20.0615 14.0993 20.5846 13.4855C21.8051 12.0533 21.8051 9.94672 20.5846 8.51447C20.0615 7.90071 19.7455 7.1376 19.6813 6.33377C19.5316 4.45794 18.0421 2.96839 16.1662 2.8187C15.3624 2.75455 14.5993 2.43846 13.9855 1.91542C12.5533 0.69486 10.4467 0.69486 9.01447 1.91542Z" fill="#1E56E3"/>
+<path d="M8.5 11L10.5 13L15 8.5M6.83377 2.8187C7.6376 2.75455 8.40071 2.43846 9.01447 1.91542C10.4467 0.69486 12.5533 0.69486 13.9855 1.91542C14.5993 2.43846 15.3624 2.75455 16.1662 2.8187C18.0421 2.96839 19.5316 4.45794 19.6813 6.33377C19.7455 7.1376 20.0615 7.90071 20.5846 8.51447C21.8051 9.94672 21.8051 12.0533 20.5846 13.4855C20.0615 14.0993 19.7455 14.8624 19.6813 15.6662C19.5316 17.5421 18.0421 19.0316 16.1662 19.1813C15.3624 19.2455 14.5993 19.5615 13.9855 20.0846C12.5533 21.3051 10.4467 21.3051 9.01447 20.0846C8.40071 19.5615 7.6376 19.2455 6.83377 19.1813C4.95794 19.0316 3.46839 17.5421 3.3187 15.6662C3.25455 14.8624 2.93846 14.0993 2.41542 13.4855C1.19486 12.0533 1.19486 9.94672 2.41542 8.51447C2.93846 7.90071 3.25455 7.1376 3.3187 6.33377C3.46839 4.45794 4.95794 2.96839 6.83377 2.8187Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/HDS/components/common-components/Icon/IconMap.js

@@ -1207,8 +1207,10 @@ import {ReactComponent as YoutubeCIcon} from "../../../assets/icons/youtubecolor
 import {ReactComponent as Facebookblue} from "../../../assets/icons/facebookblue.svg"
 import {ReactComponent as Linkedinblue} from "../../../assets/icons/linkedinblue.svg"
 import {ReactComponent as AIBotIcon} from "../../../assets/icons/bot.svg"
+import {ReactComponent as VerifiedIcon} from "../../../assets/icons/verifiedBlue.svg"
 
 const iconReferenceMap = {
+    verifiedBlue: VerifiedIcon,
     aibot:AIBotIcon,
     facebookBlue: Facebookblue,
     linkedinBlue: Linkedinblue,

package/src/HDS/foundation/Typography/Typography.js

@@ -44,7 +44,7 @@ export default function Typography(props) {
         'body3c-semi-bold': 'text-hds-m-body3c-semi-bold tb:text-hds-t-body3c-semi-bold db:text-hds-d-body3c-semi-bold',
         'body3c-bold': 'text-hds-m-body3c-bold tb:text-hds-t-body3c-bold db:text-hds-d-body3c-bold',
         'quote': 'font-petrona font-normal italic text-hds-m-quote tb:text-hds-t-quote db:text-hds-d-quote',
-        'code1': 'text-hds-m-code1 tb:text-hds-t-code1 db:text-hds-d-code1',
+        'code1': 'font-firaCode text-hds-m-code1 tb:text-hds-t-code1 db:text-hds-d-code1',
         'code2': 'text-hds-m-code2 tb:text-hds-t-code2 db:text-hds-d-code2',
       }
       return React.createElement(

package/src/HDS/modules/Cards/aboutSection.js

@@ -9,17 +9,17 @@ export default function AboutSection(props) {
             <div className="divide-y divide-neutral-200">
                 <div className=" pb-8">
                     <div>
-                        <div className="w-14 h-14 rounded-full border border-neutral-300 ">
+                        <div className=" w-14 h-14 relative rounded-full border border-neutral-300 ">
                             <img alt={props.title ?? 'connectorImage'} src={props.imgUrl} className="rounded-full w-full " />
+                            {props.is_verified  && <div className="absolute top-8 left-10">
+                                <Icon
+                                    height={'h-5 w-5 stroke-[1.5px]'}
+                                    variant='verifiedBlue'
 
+                                />
+                            </div>}
                         </div>
-                        {/* <div className="-mt-4">
-                            <Icon
-                                height={'h-5 w-5 stroke-[1.5px]'}
-                                variant='checkverified01'
-                                strokeClass='stroke-blue-600'
-                            />
-                        </div> */}
+
                         {props.tags &&
                             <div className="gap-2 pt-8 flex flex-wrap">
                                 {props.tags.map((tag, index) => (
@@ -36,7 +36,7 @@ export default function AboutSection(props) {
                         {props.title && <div className='pt-4 text-hds-t-h3 text-neutral-1000'>{props.title}</div>}
                         {props.description && <Typography textStyle='sub2' className='pt-2 text-neutral-500'>{props.description}</Typography>}
                     </div>
-                    <a href={props.btnLink} className='mt-4 flex' >
+                    {props.btnLink && <a href={props.btnLink} className='mt-4 flex' >
                         <HDSButton
                             type="secondary"
                             label={props.btnLabel ?? 'Deployment guide'}
@@ -45,37 +45,37 @@ export default function AboutSection(props) {
                             rightAnimatedArrow='true'
                             rightAnimatedArrowColor='#3970FD'
                         />
-                    </a>
+                    </a>}
 
                 </div>
                 <div className="py-8 ">
                     <Typography textStyle='h6' className='text-neutral-500 uppercase'>{props.aboutTitle ?? 'About'}</Typography>
                     <div className="pt-4 flex flex-col gap-2">
-                        <div className="flex gap-2">
+                        {props.versionValue && <div className="flex gap-2">
                             <Typography textStyle='body1-medium' className='text-neutral-500'>{props.version ?? 'Version'}</Typography>
                             <Badges
                                 color='blue'
                                 children={props.versionValue}
-                                // text_color='text-neutral-0'
+                            // text_color='text-neutral-0'
                             />
-                        </div>
-                        <div className="flex gap-2 items-center">
+                        </div>}
+                        {props.typeValue && <div className="flex gap-2 items-center">
                             <Typography textStyle='body1-medium' className='text-neutral-500'>{props.typeText ?? 'Type'}</Typography>
-                            <Icon 
+                            <Icon
                                 height={'h-5 w-5 stroke-[1.5px]'}
-                                variant='github' 
-                                />
+                                variant='github'
+                            />
                             <Typography textStyle='body1-medium' className='text-neutral-500'>{props.typeValue}</Typography>
 
-                        </div>
-                        <div className="flex gap-2">
+                        </div>}
+                        {props.releasedValue && <div className="flex gap-2">
                             <Typography textStyle='body1-medium' className='text-neutral-500'>{props.releasedText ?? 'Released'}</Typography>
                             <Typography textStyle='body1-medium' className='text-neutral-500'>{props.releasedValue}</Typography>
-                        </div>
-                        <div className="flex gap-2">
+                        </div>}
+                        {props.lastUpdateValue && <div className="flex gap-2">
                             <Typography textStyle='body1-medium' className='text-neutral-500'>{props.lastUpdatedText ?? 'Last Updated'}</Typography>
                             <Typography textStyle='body1-medium' className='text-neutral-500'>{props.lastUpdateValue}</Typography>
-                        </div>
+                        </div>}
                         {props.githubRepoLink && <a href={props.githubRepoLink} className="flex gap-2 items-center">
                             <Icon
                                 height={'h-5 w-5 stroke-[1.5px]'}
@@ -99,7 +99,7 @@ export default function AboutSection(props) {
                 </div>
                 <div className="py-8">
                     <Typography textStyle='h6' className='text-neutral-500 uppercase'>{props.creator ?? 'Creator'}</Typography>
-                    <a href={props.hasuraIncUrl} className="flex gap-2 items-center pt-4">
+                    {props.hasuraIncUrl && <a href={props.hasuraIncUrl} className="flex gap-2 items-center pt-4">
 
                         <Typography
                             textStyle='body1-medium'
@@ -112,14 +112,13 @@ export default function AboutSection(props) {
                             variant='linkexternal01'
                             strokeClass='stroke-blue-600'
                         />
-                    </a>
-                    <Typography
+                    </a>}
+                    {props.Email && <Typography
                         textStyle='body1-medium'
                         className='text-neutral-500 pt-2'
                     >
                         {props.Email ?? 'support@hasura.io'}
-                    </Typography>
-
+                    </Typography>}
                 </div>
             </div>
         </>

package/src/HDS/modules/Faq/faq.js

@@ -17,7 +17,7 @@ function DefaultAccordion(props) {
             animate={{ opacity: 1 }}
             transition={{ duration: 0.3, opacity: { ease: "easeIn" } }}
             className='h-5 w-5 mt-3.5'>
-            <div className=' h-5  cursor-pointer' >
+            <div className='w-5 h-5  cursor-pointer' >
                 <div
                     aria-hidden="true"
                     className={` block  absolute h-[2px] w-[14px] bg-blue-600 transform transition duration-300 `}
@@ -35,7 +35,9 @@ function DefaultAccordion(props) {
             {props.accordionData && props.accordionData.map((item, index) => (
                 <div 
                 key={index} 
-                className="py-6 flex items-start">
+                className="py-6 flex items-start"
+                onClick={() => handleOpen(index)}
+                >
                     <div 
                     className='pr-4'
                     >
@@ -45,7 +47,6 @@ function DefaultAccordion(props) {
 
                         <motion.div
                             className="cursor-pointer "
-                            onClick={() => handleOpen(index)}
                             initial={{ opacity: 0 }}
                             animate={{ opacity: 1 }}
                             exit={{ opacity: 1 }}

package/src/index.css

@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@1,200&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

package/src/styles/tailwind.css

@@ -1,5 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@1,200&display=swap');
 
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
+
 /*
 ! tailwindcss v3.3.1 | MIT License | https://tailwindcss.com
 */
@@ -928,6 +930,10 @@ select{
   left: 50%;
 }
 
+.left-10{
+  left: 2.5rem;
+}
+
 .left-14{
   left: 3.5rem;
 }
@@ -1012,6 +1018,10 @@ select{
   top: 1.25rem;
 }
 
+.top-8{
+  top: 2rem;
+}
+
 .top-\[112px\]{
   top: 112px;
 }
@@ -6749,6 +6759,10 @@ select{
   text-indent: 2rem;
 }
 
+.font-firaCode{
+  font-family: Fira Code, monospace;
+}
+
 .font-petrona{
   font-family: Petrona, serif;
 }

package/tailwind.config.js

@@ -20,6 +20,7 @@ module.exports = {
         '"Noto Color Emoji"',
       ],
       petrona: ['Petrona', 'serif'],
+      firaCode: ['Fira Code', 'monospace']
     },
     
     colors: {