hds-web 1.2.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.2.0",
+  "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/Hero/h2.js

@@ -167,7 +167,7 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
   const imageCard = (heroData) => (
     heroData.imageUrl && (
       <div className="">
-        <img src={heroData.imageUrl} alt={heroData.imageAlt} className='w-full' />
+        <img src={heroData.imageUrl} alt={heroData.imageAlt} className='tb-l:w-full w-1/2' />
       </div>
     )
   )

package/src/styles/tailwind.css

@@ -915,6 +915,10 @@ select {
   top: 0px;
 }
 
+.bottom-10 {
+  bottom: 2.5rem;
+}
+
 .isolate {
   isolation: isolate;
 }
@@ -1845,6 +1849,10 @@ select {
   gap: 25rem;
 }
 
+.gap-16 {
+  gap: 4rem;
+}
+
 .gap-x-1 {
   -webkit-column-gap: 0.25rem;
           column-gap: 0.25rem;
@@ -8140,6 +8148,10 @@ select {
     padding-top: 2.875rem;
   }
 
+  .tb\:pb-14 {
+    padding-bottom: 3.5rem;
+  }
+
   .tb\:text-left {
     text-align: left;
   }
@@ -8753,6 +8765,10 @@ select {
     gap: 9rem;
   }
 
+  .db\:gap-28 {
+    gap: 7rem;
+  }
+
   .db\:gap-x-10 {
     -webkit-column-gap: 2.5rem;
             column-gap: 2.5rem;
@@ -9108,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;