hds-web 1.13.2 → 1.13.4

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Typography} from '../../foundation/Typography';
+import  NavCard  from './navCard';
+
+export default function NavTabCard(props){
+    return (
+        <div className="flex tb-l:flex-row flex-col justify-between">
+            <div>
+                <Typography textStyle='h4' className='text-neutral-1000'>{props.title}</Typography>
+                <Typography textStyle='body1' className='mt-4 text-neutral-700 max-w-[430px]'>
+                    {props.description}
+                    </Typography>
+            </div>
+            <div className="max-w-[583px] pt-8 tb-l:pt-0">
+                <NavCard
+                    navTabs={[
+                        {
+                            current: '[Circular]',
+                            href: '',
+                            name: 'Performance'
+                        },
+                        {
+                            current: '[Circular]',
+                            href: '',
+                            name: 'Company'
+                        },
+                        {
+                            current: '[Circular]',
+                            href: '',
+                            name: 'Authorization'
+                        },
+                        {
+                            current: '[Circular]',
+                            href: '',
+                            name: 'Observability'
+                        },
+                        {
+                            current: '[Circular]',
+                            href: '',
+                            name: 'API Security'
+                        }
+                    ]}
+                    tabContent={{
+                        'API Security': {
+                            img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
+                            subTitle: '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.',
+                            title: '5Get blazing-fast APIs without the extra work',
+                            video_poster: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
+                            video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4'
+                        },
+                        Authorization: {
+                            img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
+                            subTitle: '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.',
+                            title: '3Get blazing-fast APIs without the extra work',
+                            video_poster: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
+                            video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4'
+                        },
+                        Company: {
+
+                            img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
+                            subTitle: '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.',
+                            title: '2Get blazing-fast APIs without the extra work',
+                            video_poster: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
+                            video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4'
+                        },
+                        Observability: {
+                            img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
+                            subTitle: '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.',
+                            title: '4Get blazing-fast APIs without the extra work',
+                            video_poster: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
+                            video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4'
+                        },
+                        Performance: {
+                            img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
+                            readMore_cta: 'Read More About Performance',
+                            subTitle: '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.',
+                            title: '1Get blazing-fast APIs without the extra work',
+                            video_poster: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
+                            video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4'
+                        }
+                    }}
+                />
+            </div>
+        </div>
+    )
+}
+
+NavTabCard.defaultProps={
+    title:'Build any supergraph topology',
+    description: `Build a supergraph using Hasura, use Hasura to implement a GraphQL gateway pattern or use Hasura to federate existing resources into another supergraph. Hasura allows you to shape any supergraph topology that works for you. 
+
+Check out some of the Federation architecture patterns implemented by our users.`
+}

package/src/styles/tailwind.css

@@ -1937,6 +1937,14 @@ select{
   max-width: min-content;
 }
 
+.max-w-\[430px\]{
+  max-width: 430px;
+}
+
+.max-w-\[583px\]{
+  max-width: 583px;
+}
+
 .flex-1{
   flex: 1 1 0%;
 }
@@ -1992,6 +2000,12 @@ select{
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.-translate-y-1\/2{
+  --tw-translate-y: -50%;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .translate-x-0{
   --tw-translate-x: 0px;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -7219,6 +7233,11 @@ select{
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-neutral-1000{
+  --tw-shadow-color: #000615;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .outline{
   outline-style: solid;
 }
@@ -8615,6 +8634,12 @@ select{
   border-top-color: rgb(13 65 198 / var(--tw-border-opacity));
 }
 
+.after\:bg-blue-700::after{
+  content: var(--tw-content);
+  --tw-bg-opacity: 1;
+  background-color: rgb(13 65 198 / var(--tw-bg-opacity));
+}
+
 .after\:bg-gradient-to-r::after{
   content: var(--tw-content);
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
@@ -10835,6 +10860,10 @@ select{
     padding-left: 2rem;
   }
 
+  .tb-l\:pt-0{
+    padding-top: 0px;
+  }
+
   .tb-l\:text-left{
     text-align: left;
   }