hds-web 1.1.9 → 1.2.1

package/package.json

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

package/src/HDS/components/Buttons/button.js

@@ -54,7 +54,7 @@ const Buttonclasses = {
   },
   'primaryLink': {
     'default': {
-      'base': 'db:w-fit tb:w-fit w-full justify-center text-blue-500',
+      'base': 'db:w-fit tb:w-fit w-full justify-center ',
       'hover': 'hover:text-neutral-0',
       'focus': 'focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none focus:text-blue-600',
     },
@@ -62,7 +62,7 @@ const Buttonclasses = {
   },
   'secondaryLink': {
     'default': {
-      'base': 'db:w-fit tb:w-fit w-full  justify-center text-neutral-800',
+      'base': 'db:w-fit tb:w-fit w-full  justify-center ',
       'hover': 'hover:text-neutral-900 ',
       'focus': 'focus:text-neutral-900 focus:outline-none focus:shadow-[0px_0px_0px_4px_#E5E7EB]',
     },

package/src/HDS/components/Cards/Menu/flyout.js

@@ -1,7 +1,8 @@
-import { Fragment } from 'react'
-import { Popover, Transition } from '@headlessui/react'
-import { Icon } from '../../common-components/Icon'
-import { Typography } from '../../../foundation/Typography'
+import React from "react";;
+import { Fragment } from 'react';
+import { Popover, Transition } from '@headlessui/react';
+import { Icon } from '../../common-components/Icon';
+import { Typography } from '../../../foundation/Typography';
 export default function flyout(props) {
   const {
     label,

package/src/HDS/components/Cards/Menu/flyoutA.js

@@ -1,7 +1,8 @@
-import { Fragment } from 'react'
-import { Popover, Transition } from '@headlessui/react'
-import { Icon } from '../../common-components/Icon'
-import { Typography } from '../../../foundation/Typography'
+import React from "react";
+import { Fragment } from 'react';
+import { Popover, Transition } from '@headlessui/react';
+import { Icon } from '../../common-components/Icon';
+import { Typography } from '../../../foundation/Typography';
 export default function FlyoutA(props) {
   const {
     label,

package/src/HDS/components/Cards/Menu/flyoutFull.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { Fragment } from 'react'
 import { Popover, Transition } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'

package/src/HDS/components/Cards/TalkDetailCard/talkDetailCard.js

@@ -4,65 +4,84 @@ import {HDSColor} from '../../../foundation/ColorPalette';
 import { Badges } from '../../BadgesCaption';
 import { ProfileAvatar } from '../../Avatars'
 import { Typography } from "../../../foundation/Typography";
+import ReactMarkdown from "react-markdown";
 
 
 export default function TalkDetailCard(props) {
   const badgeLeftIconColor = HDSColor(props.badgeLeftIconColor);
   return (
-    <div>
-      <Badges
-        color={props.badgeColor}
-        leftIconColor={badgeLeftIconColor}
-        leftIconVariant='home03'
-        size='default'
-      >
-        {props.talk_type}
-      </Badges>
-      <Typography textStyle='h6' className='text-blue-600 uppercase pt-4 pb-2'>{props.tag_line}</Typography>
-      <Typography textStyle='h3' as='h3' className='text-blue-900 pb-4'>{props.title}</Typography>
-      {
-        props.social_share && (
-          <div className='flex items-center pb-14'>
-            {
-              props.social_share.map((socialShare, i) => (
-                <div className='mx-2 first:ml-0 last:mr-0'>
-                  <img src={socialShare.img_url} alt={socialShare.img_alt} />
-                </div>
-              ))
-            }
-          </div>
-        )
-      }
-      {
-        props.speaker_card && (
-          <div>
-            <Typography textStyle='h6' as='h6' className='uppercase text-neutral-500 pb-6'>speakers</Typography>
-            {
-              props.speaker_card.map((speaker, i) => (
-                <div className='pb-4 last:pb-0'>
-                  <ProfileAvatar
-                    name={speaker.name}
-                    size='md'
-                    designation={speaker.designation}
-                    imageUrl={speaker.speakerImgUrl}
-                    avatarVariant="circle"
-                  />
-                </div>
-              ))
-            }
-          </div>
-        )
-      }
+    <div className="grid grid-cols-1 tb:grid-cols-2 gap-16 db:gap-28 tb:gap-16">
+      <div>
+        {
+          props.badgeColor && (
+            <Badges
+              color={props.badgeColor}
+              size='sm'
+            >
+              {props.talk_type}
+            </Badges>
+          )
+        }
+        {
+          props.tag_line && (<Typography textStyle='h6' className='text-blue-600 uppercase pt-4 pb-2'>{props.tag_line}</Typography>)
+        }
+        {
+          props.title && (<Typography textStyle='h3' as='h3' className='text-blue-900 pb-4'>{props.title}</Typography>)
+        }
+        {
+          props.social_share && (
+            <div className='flex items-center pb-8 tb:pb-14'>
+              {
+                props.social_share.map((socialShare, i) => (
+                  <a href={socialShare.share_url} className='mx-2 first:ml-0 last:mr-0'>
+                    <img src={socialShare.img_url} alt={socialShare.img_alt} />
+                  </a>
+                ))
+              }
+            </div>
+          )
+        }
+        {
+          props.speaker_card && (
+            <div>
+              <Typography textStyle='h6' as='h6' className='uppercase text-neutral-500 pb-6'>speakers</Typography>
+              {
+                props.speaker_card.map((speaker, i) => (
+                  <div className='pb-4 last:pb-0'>
+                    <ProfileAvatar
+                      name={speaker.name}
+                      size='md'
+                      designation={speaker.designation}
+                      imageUrl={speaker.speakerImgUrl}
+                      avatarVariant="circle"
+                    />
+                  </div>
+                ))
+              }
+            </div>
+          )
+        }
+      </div>
+      <div>
+        <Typography textStyle="h4" as="h4" className="text-neutral-800 pb-4">About the Talk</Typography>
+        {
+          props.description && (
+            <Typography className='text-neutral-800 [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0' textStyle='body1'>
+              <ReactMarkdown>{props.description}</ReactMarkdown>
+            </Typography>
+          )
+        }
+      </div>
     </div>
   )
 }
 
 TalkDetailCard.defaultProps = {
-  badgeColor: 'green',
-  badgeLeftIconColor: 'stroke-neutral-0',
-  talk_type: 'Talk',
-  tag_line: 'June 20-22, 2023 | VIRTUAL | Free',
-  title: 'Deploying Hasura apps the fast way with the new Vercel integration',
-  social_share: '',
-  speaker_card: '',
+  // badgeColor: 'green',
+  // badgeLeftIconColor: 'stroke-neutral-0',
+  // talk_type: 'Talk',
+  // tag_line: 'June 20-22, 2023 | VIRTUAL | Free',
+  // title: 'Deploying Hasura apps the fast way with the new Vercel integration',
+  // social_share: '',
+  // speaker_card: '',
 };

package/src/HDS/components/Headers/v3Header.js

@@ -142,14 +142,14 @@ export default function V3Header(props) {
     )
 
     return (
-        <Popover className="relative bg-white">
+        <Popover className="relative">
             <div className="flex items-center bg-neutral-50 justify-between p-6 md:justify-start md:space-x-6">
                 <div>
-                    <a href="#" className="flex items-center">
-                        <Icon variant={'hasuraPrimary'} strokeColor={''} />
+                    <a href={props.headerUrl} className="flex items-center">
+                        <Icon height='w-[103px] h-[33px]' variant={'hasuraPrimary'} strokeColor={''} />
                     </a>
                 </div>
-                <div className="-my-2 -mr-2 md:hidden">
+                <div className="tb:hidden">
                     <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                         <span className="sr-only">Open menu</span>
                         <div className=' gap-6 flex'>
@@ -158,7 +158,7 @@ export default function V3Header(props) {
                         </div>
                     </Popover.Button>
                 </div>
-                <div className="hidden md:flex md:flex-1 md:items-center md:justify-between">
+                <div className="hidden tb:flex tb:flex-1 tb:items-center tb:justify-between">
                     <Popover.Group as="nav" className="flex space-x-6">
                         {headerListfn(props.HEADER_LIST)}
                     </Popover.Group>
@@ -364,5 +364,6 @@ V3Header.defaultProps = {
             ]
         },
 
-    ]
+    ],
+    headerUrl:'https://hasura.io/'
 }

package/src/HDS/components/Hero/h2.js

@@ -166,8 +166,8 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
 
   const imageCard = (heroData) => (
     heroData.imageUrl && (
-      <div className="w-1/2 tb-l:w-full tb:flex tb:flex-col tb:justify-center">
-        <img src={heroData.imageUrl} alt={heroData.imageAlt} className='w-full ' />
+      <div className="">
+        <img src={heroData.imageUrl} alt={heroData.imageAlt} className='tb-l:w-full w-1/2' />
       </div>
     )
   )
@@ -178,8 +178,8 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
       <div className="">
         <div className={"max-w-7xl mx-auto px-20 py-20 rounded-3xl overflow-hidden " + ((heroData.bg_color) ? heroData.bg_color : "")} >
           <div className="w-full">
-            <div className={"tb-l:flex tb-l:items-center tb-l:flex-row db:w-full flex flex-col-reverse tb:gap-x-16 db:gap-x-10 min-[1880px]:gap-x-72" + ((heroData.video_url) ? " " : " tb:flex")}>
-              <div className='w-full tb:flex items-start tb:flex-col mt-4 tb:mt-0'
+            <div className={"tb-l:flex tb-l:justify-between tb-l:items-center tb-l:flex-row db:w-full flex flex-col-reverse tb:gap-x-16 db:gap-x-10 min-[1880px]:gap-x-72" + ((heroData.video_url) ? " " : " tb:flex")}>
+              <div className='max-w-[29.18rem] w-full tb:flex items-start tb:flex-col mt-4 tb:mt-0'
               >
                 {
                   heroData.tag_line && (
@@ -208,7 +208,11 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
 
 
               </div>
+              <div className="">
+
+              
               {imageCard(heroData)}
+              </div>
             </div>
 
             {LinkCardsFn(heroData)}

package/src/styles/tailwind.css

@@ -915,6 +915,10 @@ select {
   top: 0px;
 }
 
+.bottom-10 {
+  bottom: 2.5rem;
+}
+
 .isolate {
   isolation: isolate;
 }
@@ -1365,6 +1369,10 @@ select {
   height: 100%;
 }
 
+.h-\[33px\] {
+  height: 33px;
+}
+
 .max-h-\[26\.25\] {
   max-height: 26.25;
 }
@@ -1491,6 +1499,14 @@ select {
   width: 100vw;
 }
 
+.w-\[104px\] {
+  width: 104px;
+}
+
+.w-\[103px\] {
+  width: 103px;
+}
+
 .min-w-\[15rem\] {
   min-width: 15rem;
 }
@@ -1559,6 +1575,10 @@ select {
   max-width: min-content;
 }
 
+.max-w-\[29\.18rem\] {
+  max-width: 29.18rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1829,6 +1849,10 @@ select {
   gap: 25rem;
 }
 
+.gap-16 {
+  gap: 4rem;
+}
+
 .gap-x-1 {
   -webkit-column-gap: 0.25rem;
           column-gap: 0.25rem;
@@ -8015,6 +8039,10 @@ select {
     max-width: 530px;
   }
 
+  .tb\:flex-1 {
+    flex: 1 1 0%;
+  }
+
   .tb\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -8043,6 +8071,10 @@ select {
     justify-content: center;
   }
 
+  .tb\:justify-between {
+    justify-content: space-between;
+  }
+
   .tb\:gap-0 {
     gap: 0px;
   }
@@ -8116,6 +8148,10 @@ select {
     padding-top: 2.875rem;
   }
 
+  .tb\:pb-14 {
+    padding-bottom: 3.5rem;
+  }
+
   .tb\:text-left {
     text-align: left;
   }
@@ -8572,6 +8608,14 @@ select {
     justify-content: flex-start;
   }
 
+  .tb-l\:justify-end {
+    justify-content: flex-end;
+  }
+
+  .tb-l\:justify-between {
+    justify-content: space-between;
+  }
+
   .tb-l\:gap-0 {
     gap: 0px;
   }
@@ -8721,6 +8765,10 @@ select {
     gap: 9rem;
   }
 
+  .db\:gap-28 {
+    gap: 7rem;
+  }
+
   .db\:gap-x-10 {
     -webkit-column-gap: 2.5rem;
             column-gap: 2.5rem;
@@ -9076,6 +9124,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;