hds-web 1.2.0 → 1.2.2

package/src/HDS/helpers/Media/mediabox.js

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { Icon } from '../../components/common-components/Icon';
+
+const MediaViewer = ({ img_url, video_url, video_poster, width }) => {
+  const [isVideoPlaying, setIsVideoPlaying] = useState(false);
+
+  const handleVideoClick = () => {
+    setIsVideoPlaying(true);
+  };
+
+  const handleVideoClose = () => {
+    setIsVideoPlaying(false);
+  };
+
+  return (
+    <div>
+      {img_url && (
+        <div className='flex justify-center'>
+        <img src={img_url} alt="Image" style={{ width }} onClick={handleVideoClick} />
+        </div>
+      )}
+
+      {video_url && (
+        <div>
+          {!isVideoPlaying ? (
+            <div className='relative flex justify-center'>
+              <div className='flex items-center'>
+                
+               <a
+                  className=" left-[45%] z-10 cursor-pointer absolute w-12 h-12  flex justify-center items-center rounded-full border border-neutral-0"
+                  onClick={() => {
+                    setIsVideoPlaying(true);
+                  }}
+                >
+                  
+                  <Icon variant='play' height='h-6 w-6' strokeClass='stroke-neutral-0' />
+                </a>
+                </div>
+                <div>
+              <img
+                src={video_poster}
+                alt="Video Poster"
+                style={{ width }}
+                onClick={handleVideoClick}
+                className="cursor-pointer"
+              />
+              </div>
+            </div>
+          ) : (
+            <div className="fixed inset-0 flex justify-center items-center z-50">
+              <div className="relative w-screen h-screen flex items-start p-10">
+                <a
+                  className=" z-10 cursor-pointer left-14 top-2 relative w-12 h-12 bg-neutral-0 flex justify-center items-center rounded-full"
+                  onClick={handleVideoClose}
+                >
+                  <Icon variant='xclose' height='h-6 w-6' strokeClass='stroke-neutral-800' />
+                </a>
+                <video
+                  controls={false}
+                  autoPlay
+                  muted
+                  className="object-contain max-w-full max-h-full"
+                >
+                  <source src={video_url} type="video/mp4" />
+                </video>
+
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MediaViewer;

package/src/HDS/modules/index.js

@@ -1 +1,2 @@
-export * from './TextCard';
+export * from './TextCard';
+export * from './navCard';

package/src/HDS/modules/navCard/index.js

@@ -0,0 +1 @@
+export {default as NavCard} from './navCard'

package/src/HDS/modules/navCard/navCard.js

@@ -0,0 +1,106 @@
+import { React, useState } from 'react';
+import { MediaBox } from '../../helpers/Media';
+import { Typography } from '../../foundation/Typography';
+import { HDSButton } from '../../components/Buttons';
+import { HDSColor } from '../../foundation/ColorPalette';
+import { Tab } from '../../components/Tabs';
+import PropTypes from 'prop-types';
+
+const tabCard = (tabContent) => (
+    <>
+        <div className='px-3'>
+            <Typography textStyle='h4' className={HDSColor(tabContent.title_color)}>{tabContent.title}</Typography>
+
+            <Typography textStyle='body1c' className={HDSColor(tabContent.sub_title_color)}>{tabContent.sub_title}</Typography>
+        </div>
+        <div className='flex pl-3 pt-6 pb-8'>
+            <HDSButton
+                label={tabContent.btnLabel}
+                type='secondaryLink'
+                leftIconVariant='none'
+                rightIconVariant='none'
+                state='default'
+                size='sm'
+                rightAnimatedArrow={true}
+                rightAnimatedArrowColor='#1E56E3'
+                animatedHoverStroke='group-hover:stroke-neutral-900'
+                className='flex'
+                btnTextColorClass='text-blue-600'
+            />
+        </div>
+        <div className=''>
+            <MediaBox
+                img_url={tabContent.img_url}
+                video_url={tabContent.video_url}
+                video_poster={tabContent.video_poster}
+                width={400}
+            />
+        </div>
+    </>
+)
+
+export default function NavCard(props) {
+    const tabNames = Object.keys(props.tabContent);
+    const [activeTab, setActiveTab] = useState(tabNames[0]);
+    
+    function handleTabClick(tab) {
+        setActiveTab(tab.name);
+        // Perform any other actions based on the clicked tab
+    }
+    return (
+        <>
+            {props.navTabs &&
+
+                <div className='max-w-[44.44rem] p-16 bg-neutral-0 shadow rounded-2xl'>
+
+                    <div className='flex justify-center pb-8'>
+                        <Tab
+                            onTabClick={handleTabClick}
+                            tabs={props.navTabs}
+                        />
+                    </div>
+                    <div className='transition-all ease-in-out duration-1000'>
+                    {props.tabContent &&
+                        props.tabContent[activeTab] &&
+                        tabCard(props.tabContent[activeTab])}
+                     </div>
+
+                </div>}
+        </>
+    )
+}
+
+NavCard.defaultProps = {
+    tabContent: {
+        'Performance': {
+            title: '1Get blazing-fast APIs without the extra work',
+            sub_title: 'Hasura simplifies data access and reduces latency for optimizing performance via a Haskell core, JIT query compiler, predicate pushdown, and application-level caching out of the box.',
+        },
+        'Company': {
+            title: '2Get blazing-fast APIs without the extra work',
+            sub_title: 'Hasura simplifies data access and reduces latency for optimizing performance via a Haskell core, JIT query compiler, predicate pushdown, and application-level caching out of the box.',
+        },
+        'Authorization': {
+            title: '3Get blazing-fast APIs without the extra work',
+            sub_title: 'Hasura simplifies data access and reduces latency for optimizing performance via a Haskell core, JIT query compiler, predicate pushdown, and application-level caching out of the box.',
+        },
+    },
+        
+    navTabs: [
+        {
+            current: true,
+            href: '',
+            name: 'Performance'
+        },
+        {
+            current: 'Insant Api',
+            href: '',
+            name: 'Company'
+        },
+        {
+            current: '[Circular]',
+            href: '',
+            name: 'Authorization'
+        },
+    ]
+}

package/src/styles/tailwind.css

@@ -879,6 +879,10 @@ select {
   left: 50%;
 }
 
+.left-14 {
+  left: 3.5rem;
+}
+
 .left-2 {
   left: 0.5rem;
 }
@@ -891,6 +895,10 @@ select {
   left: 17.6%;
 }
 
+.left-\[45\%\] {
+  left: 45%;
+}
+
 .left-\[82\.3\%\] {
   left: 82.3%;
 }
@@ -915,6 +923,10 @@ select {
   top: 0px;
 }
 
+.top-2 {
+  top: 0.5rem;
+}
+
 .isolate {
   isolation: isolate;
 }
@@ -1093,10 +1105,6 @@ select {
   margin-left: -1px;
 }
 
-.-mr-2 {
-  margin-right: -0.5rem;
-}
-
 .-mt-5 {
   margin-top: -1.25rem;
 }
@@ -1241,6 +1249,13 @@ select {
   margin-top: 2.25rem;
 }
 
+.line-clamp-3 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
 .block {
   display: block;
 }
@@ -1353,6 +1368,10 @@ select {
   height: 130px;
 }
 
+.h-\[33px\] {
+  height: 33px;
+}
+
 .h-\[60px\] {
   height: 60px;
 }
@@ -1365,14 +1384,18 @@ select {
   height: 100%;
 }
 
-.h-\[33px\] {
-  height: 33px;
+.h-screen {
+  height: 100vh;
 }
 
 .max-h-\[26\.25\] {
   max-height: 26.25;
 }
 
+.max-h-full {
+  max-height: 100%;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -1441,6 +1464,10 @@ select {
   width: 24rem;
 }
 
+.w-\[103px\] {
+  width: 103px;
+}
+
 .w-\[22\.5rem\] {
   width: 22.5rem;
 }
@@ -1495,14 +1522,6 @@ select {
   width: 100vw;
 }
 
-.w-\[104px\] {
-  width: 104px;
-}
-
-.w-\[103px\] {
-  width: 103px;
-}
-
 .min-w-\[15rem\] {
   min-width: 15rem;
 }
@@ -1549,6 +1568,14 @@ select {
   max-width: 22rem;
 }
 
+.max-w-\[29\.18rem\] {
+  max-width: 29.18rem;
+}
+
+.max-w-\[44\.44rem\] {
+  max-width: 44.44rem;
+}
+
 .max-w-\[6rem\] {
   max-width: 6rem;
 }
@@ -1557,6 +1584,10 @@ select {
   max-width: 882px;
 }
 
+.max-w-full {
+  max-width: 100%;
+}
+
 .max-w-max {
   max-width: -webkit-max-content;
   max-width: max-content;
@@ -1571,10 +1602,6 @@ select {
   max-width: min-content;
 }
 
-.max-w-\[29\.18rem\] {
-  max-width: 29.18rem;
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1813,6 +1840,10 @@ select {
   gap: 3rem;
 }
 
+.gap-16 {
+  gap: 4rem;
+}
+
 .gap-2 {
   gap: 0.5rem;
 }
@@ -1981,6 +2012,14 @@ select {
   border-color: rgb(229 231 235 / var(--tw-divide-opacity));
 }
 
+.self-start {
+  align-self: flex-start;
+}
+
+.self-end {
+  align-self: flex-end;
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -5080,6 +5119,10 @@ select {
   padding: 2.5rem;
 }
 
+.p-16 {
+  padding: 4rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -5256,10 +5299,6 @@ select {
   padding-bottom: 2.5rem;
 }
 
-.pb-14 {
-  padding-bottom: 3.5rem;
-}
-
 .pb-16 {
   padding-bottom: 4rem;
 }
@@ -5392,6 +5431,10 @@ select {
   text-align: right;
 }
 
+.font-petrona {
+  font-family: Petrona, sans;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -6365,6 +6408,10 @@ select {
   transition-duration: 100ms;
 }
 
+.duration-1000 {
+  transition-duration: 1000ms;
+}
+
 .duration-150 {
   transition-duration: 150ms;
 }
@@ -7886,6 +7933,10 @@ select {
   stroke: #FFFFFF;
 }
 
+.group:hover .group-hover\:stroke-neutral-900 {
+  stroke: #111927;
+}
+
 .group:hover .group-hover\:opacity-30 {
   opacity: 0.3;
 }
@@ -8124,6 +8175,10 @@ select {
     padding-right: 2rem;
   }
 
+  .tb\:pb-14 {
+    padding-bottom: 3.5rem;
+  }
+
   .tb\:pb-8 {
     padding-bottom: 2rem;
   }
@@ -8500,30 +8555,14 @@ select {
     margin-left: 3rem;
   }
 
-  .md\:flex {
-    display: flex;
-  }
-
   .md\:hidden {
     display: none;
   }
 
-  .md\:flex-1 {
-    flex: 1 1 0%;
-  }
-
-  .md\:items-center {
-    align-items: center;
-  }
-
   .md\:justify-start {
     justify-content: flex-start;
   }
 
-  .md\:justify-between {
-    justify-content: space-between;
-  }
-
   .md\:space-x-6 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(1.5rem * var(--tw-space-x-reverse));
@@ -8560,14 +8599,6 @@ select {
     width: 50%;
   }
 
-  .tb-l\:w-\[70\%\] {
-    width: 70%;
-  }
-
-  .tb-l\:w-full {
-    width: 100%;
-  }
-
   .tb-l\:w-\[38\%\] {
     width: 38%;
   }
@@ -8576,6 +8607,14 @@ select {
     width: 62%;
   }
 
+  .tb-l\:w-\[70\%\] {
+    width: 70%;
+  }
+
+  .tb-l\:w-full {
+    width: 100%;
+  }
+
   .tb-l\:min-w-\[400px\] {
     min-width: 400px;
   }
@@ -8596,10 +8635,6 @@ select {
     justify-content: flex-start;
   }
 
-  .tb-l\:justify-end {
-    justify-content: flex-end;
-  }
-
   .tb-l\:justify-between {
     justify-content: space-between;
   }
@@ -8749,6 +8784,10 @@ select {
     gap: 0px;
   }
 
+  .db\:gap-28 {
+    gap: 7rem;
+  }
+
   .db\:gap-36 {
     gap: 9rem;
   }
@@ -9084,10 +9123,6 @@ select {
   padding-bottom: 0.5rem;
 }
 
-.\[\&\>p\]\:last\:pb-0:last-child>p {
-  padding-bottom: 0px;
-}
-
 .last\:\[\&\>p\]\:pb-0>p:last-child {
   padding-bottom: 0px;
 }
@@ -9108,6 +9143,10 @@ select {
   padding-bottom: 0px;
 }
 
+.last\:\[\&\>ul\>li\]\:pb-0>ul>li:last-child {
+  padding-bottom: 0px;
+}
+
 .\[\&\>ul\]\:ps-4>ul {
   -webkit-padding-start: 1rem;
           padding-inline-start: 1rem;

package/tailwind.config.js

@@ -19,6 +19,7 @@ module.exports = {
         '"Segoe UI Symbol"',
         '"Noto Color Emoji"',
       ],
+      petrona: ['Petrona', 'sans']
     },
     
     colors: {