hds-web 1.6.8 → 1.7.0

package/src/HDS/components/Cards/Misc/iconCard.js

@@ -3,17 +3,34 @@ import { Icon } from "../../common-components/Icon";
 import { HDSColor } from '../../../foundation/ColorPalette'
 import { Typography } from '../../../foundation/Typography'
 import { HDSButton } from "../../Buttons";
-
+import ReactMarkdown from "react-markdown";
 const cardVariant = {
     "withButton": {
         'cardStyle': 'p-10 ',
         'iconWidthStyle': 'h-20 w-20',
         'iconStyle': 'h-10 w-10',
+        'titleTextStyle': 'h4',
+        'titleClasses': 'mb-1 text-blue-800 text-hds-m-h4 tb:text-hds-t-h4 db:text-hds-d-h4',
+        'descTextStyle': 'body1c',
+        'descClasses': 'text-neutral-1000 text-hds-m-body1c tb:text-hds-t-body1c db:text-hds-d-body1c'
     },
     "withoutButton": {
         'cardStyle': 'p-6',
         'iconWidthStyle': 'h-12 w-12',
         'iconStyle': 'h-6 w-6',
+        'titleTextStyle': 'h5',
+        'titleClasses': 'mb-1 text-blue-600 text-hds-m-h5 tb:text-hds-t-h5 db:text-hds-d-h5',
+        'descTextStyle': 'body1',
+        'descClasses': 'text-neutral-1000 text-hds-m-body1 tb:text-hds-t-body1 db:text-hds-d-body1'
+    },
+    "sm": {
+        'cardStyle': 'p-6',
+        'iconWidthStyle': 'h-12 w-12',
+        'iconStyle': 'h-6 w-6',
+        'titleTextStyle': 'body3c',
+        'titleClasses': 'mb-1 text-neutral-800 text-hds-m-body3c-bold tb:text-hds-t-body3c-bold db:text-hds-d-body3c-bold',
+        'descTextStyle': 'body3',
+        'descClasses': 'text-neutral-800 text-hds-m-body3 tb:text-hds-t-body3 db:text-hds-d-body3'
     }
 }
 
@@ -21,68 +38,62 @@ export default function IconCard(props) {
     const iconBG = HDSColor(props.iconBg);
     return (
         <div
-            className={`bg-neutral-0 rounded-3xl shadow ${cardVariant[props.cardType]['cardStyle']}`}
+            className={`bg-neutral-0 grid h-full rounded-3xl shadow ${cardVariant[props.cardType]['cardStyle']}`}
         >
-            <div
-                className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
-            >
-                <Icon
-                    height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
-                    variant={props.iconVariant}
-                    strokeColor={props.iconStroke}
-                    strokeClass={HDSColor(props.iconStrokeClass)} />
-            </div>
-            <div
-                className="flex-1">
-                {props.cardType === 'withoutButton' ? (
-                    <>
-                        <Typography
-                            textStyle="h5"
-                            as="h5"
-                            className="mb-1 text-blue-600">
-                            {props.title}
-                        </Typography>
-                        <Typography
-                            textStyle="body1"
-                            className="text-neutral-1000">
-                            {props.description}
-                        </Typography>
-                    </>
-                )
-                    :
-                    (
-                        <>
-                            <Typography
-                                textStyle="h4"
-                                as="h4"
-                                className="mb-1 text-blue-800">
-                                {props.title}
-                            </Typography>
-                            <Typography
-                                textStyle="body1c"
-                                className="text-neutral-1000">
-                                {props.description}
-                            </Typography>
-                        </>
-                    )
-                }
-                {props.cardType === 'withButton' && (
-                    <div className="flex mt-7">
-                        <HDSButton
-                            label='Start free'
-                            type='secondary'
-                            leftIconVariant='none'
-                            rightIconVariant='none'
-                            state='default'
-                            size='sm'
-                            rightAnimatedArrow={true}
-                            rightAnimatedArrowColor='#3970FD'
-                            className=' mt-7'
-                        />
-                    </div>
-                )}
+            <div className=" self-start">
+                <div
+                    className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
+                >
+                    <Icon
+                        height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
+                        variant={props.iconVariant}
+                        strokeColor={props.iconStroke}
+                        strokeClass={HDSColor(props.iconStrokeClass)} />
+                </div>
+                <div
+                    className="flex-1">
+
+                    {props.cardType &&
+                        (
+                            <>
+                                <Typography
+                                    textStyle={cardVariant[props.cardType]['titleTextStyle']}
+                                    as={cardVariant[props.cardType]['titleTextStyle']}
+                                    className={cardVariant[props.cardType]['titleClasses']}
+                                >
+                                    {props.title}
+                                </Typography>
 
+                                <Typography
+                                    textStyle={cardVariant[props.cardType]['descTextStyle']}
+                                    className={`${cardVariant[props.cardType]['descClasses']} [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600`}
+                                >
+                                    <ReactMarkdown>
+                                        {props.description}
+                                    </ReactMarkdown>
+                                </Typography>
+                            </>
+                        )
+                    }
+                </div>
             </div>
+            {props.cardType === 'withButton' && (
+                <div className="flex self-end mt-7">
+                    <HDSButton
+                        label='Start free'
+                        type='secondary'
+                        leftIconVariant='none'
+                        rightIconVariant='none'
+                        state='default'
+                        size='sm'
+                        rightAnimatedArrow={true}
+                        rightAnimatedArrowColor='#3970FD'
+                        className=' mt-7'
+                    />
+                </div>
+            )}
+
+
 
         </div>
     )

package/src/HDS/components/Cards/Misc/index.js

@@ -1,2 +1,3 @@
 export {default as TalkCard} from './talkCard';
+export {default as TalkCard2} from './talkcard2';
 export {default as IconCard} from './iconCard';

package/src/HDS/components/Cards/Misc/talkCard.js

@@ -4,18 +4,19 @@ import { Typography } from '../../../foundation/Typography'
 import { ProfileAvatar } from '../../Avatars'
 import { Time } from "../../../helpers/Time";
 import { HDSButton } from '../../Buttons'
+import ReactMarkdown from "react-markdown";
 
 export default function TalkCard(props) {
     let CardClass = ''
-    if (props.speakerSet === undefined && props.eventTime === undefined) {
+    if (props.speakerSet === undefined) {
         CardClass = 'flex';
     }
-    else CardClass = 'grid shadow';
+    else CardClass = 'flex tb-l:flex-row flex-col';
     return (
 
-        <div className=" ">
-            <div className={`${CardClass} rounded-3xl  bg-neutral-0 grid-cols-1 tb:grid-cols-2  border border-neutral-200 w-full max-w-[882px]`}>
-                <div className="px-8 py-6 border-b rounded-3xl border-b-neutral-150 tb:border-0 tb:border-r tb:border-r-neutral-150" >
+        <div className="grid w-full">
+            <div className={`${CardClass} w-full max-w-[882px]`}>
+                <div className={"px-8 py-6" + ((props.speakerSet) ? " border-b tb-l:w-[62%] border-b-neutral-150 tb:border-0 tb:border-r tb:border-r-neutral-150" : "")}>
                     <Badges
                         size={props.badges.size}
                         color={props.badges.color}
@@ -24,19 +25,19 @@ export default function TalkCard(props) {
                         children={props.badges.label}
                     />
 
-                    <Typography
-                        className='my-2 text-blue-800'
-                        textStyle='h5'>{props.title}
-                    </Typography>
-                    <Typography
-                        className='my-2 text-neutral-700'
-                        textStyle='body1'>{props.para}</Typography>
-                </div>
+                    <Typography className='my-2 text-blue-800' textStyle='h5'>{props.title}</Typography>
+
+                    {props.para &&
+                        <Typography
+                            className='line-clamp-3 text-neutral-700'
+                            textStyle='body1c'>
+                                {props.para}
+                        </Typography>}
 
-                {props.speakerSet &&
-                    props.eventTime &&
+                </div>
 
-                    <div className="flex flex-col pt-0 tb:pt-[2.875rem] justify-between">
+                {props.speakerSet && (
+                    <div className="flex flex-col tb-l:w-[38%] pt-0 tb:pt-[2.875rem] justify-between">
                         {
                             props.speakerSet && (
                                 <div className="pl-6 flex gap-6 mt-9 tb:mt-0 mb-9 flex-col ">
@@ -67,10 +68,10 @@ export default function TalkCard(props) {
                                 label=''
                             />
                         </div>
-                    </div>}
+                    </div>)}
             </div>
         </div>
 
     )
 
-}
+}

package/src/HDS/components/Cards/Misc/talkcard2.js

@@ -0,0 +1,118 @@
+import React from "react";
+import { Badges } from '../../BadgesCaption';
+import { Typography } from '../../../foundation/Typography'
+import { ProfileAvatar } from '../../Avatars'
+import { Time } from "../../../helpers/Time";
+import { HDSButton } from '../../Buttons'
+import ReactMarkdown from "react-markdown";
+import { HDSColor } from "../../../foundation/ColorPalette";
+
+export default function TalkCard2(props) {
+    let CardClass = ''
+    if (props.speakerSet) {
+        CardClass = 'tb-l:justify-between';
+    }
+    else CardClass = 'tb-l:justify-center';
+
+
+    return (
+
+        <div className="grid">
+            <div className={`flex flex-col tb-l:flex-row tb-l:justify-between `}>
+                <div className={"px-6 pt-6 tb-l:px-8 tb-l:pb-6  tb-l:border-r tb-l:border-r-neutral-200"}>
+                    <div className="flex flex-row flex-wrap tb:gap-3 gap-2">
+                        {props.badges &&
+                            props.badges.map((value, index) => (
+                                <div key={index} className='flex  whitespace-nowrap'>
+                                    <Badges
+                                        size={value.size}
+                                        color={value.color}
+                                        leftIconVariant={value.leftIconVariant}
+                                        leftIconColor={value.leftIconColor}
+                                        leftIconColorClass={HDSColor(value.leftIconColorClass)}
+                                        children={value.label}
+
+                                    />
+                                </div>
+                            ))
+                        }
+
+                    </div>
+                    <div className="tb-l:w-[380px] db:w-[520px] flex flex-col tb:justify-between">
+                        <div>
+                            <Typography className='mt-2 text-blue-800' textStyle='h5'>{props.title}</Typography>
+                            {props.para &&
+                                <Typography
+                                    className='line-clamp-3 mt-2 text-neutral-700'
+                                    textStyle='body1c'>
+                                    {props.para}
+                                </Typography>
+                            }
+                        </div>
+                        <div className="flex pb-6 tb-l:pb-0">
+                            {props.readUrl &&
+                                props.para && (
+                                    <a href={props.readUrl}>
+                                        <HDSButton
+                                            label='Read more'
+                                            type='secondaryLink'
+                                            leftIconVariant='none'
+                                            rightIconVariant='none'
+                                            state='default'
+                                            size='md'
+                                            rightAnimatedArrow={true}
+                                            rightAnimatedArrowColor='#3970FD'
+                                            className='mt-2'
+                                            btnTextColorClass='text-blue-500'
+                                            animatedHoverStroke='stroke-blue-500'
+                                        />
+                                    </a>
+                                )}
+                        </div>
+                    </div>
+                </div>
+
+                <div className={`${CardClass} tb-l:divide-y-2 divide-neutral-200 flex tb-l:w-full flex-col pt-0`} >
+                    {
+                        props.speakerSet && (
+                            <div className="px-6 py-6 border-t border-neutral-200 flex flex-col gap-6 tb:mt-0 tb-l:border-0 tb-l:h-full tb-l:justify-center  ">
+                                {props.speakerSet.map((value, i) => (
+                                    <div key={i} className="block">
+
+                                        <ProfileAvatar
+                                            name={value.name}
+                                            size='md'
+                                            designation={value.designation}
+                                            imageUrl={value.imageUrl}
+                                            avatarBgColor={props.avatarBgColor}
+                                        />
+                                    </div>
+
+                                ))}
+                            </div>
+                        )
+                    }
+                    {props.eventTime &&
+                        <div className="border-t border-neutral-200 tb-l:border-0 w-full pl-6 p-6 flex flex-row justify-between items-center">
+                            <Typography textStyle='h6' className='text-blue-800 uppercase'>{props.eventTime}</Typography>
+                            {props.addCalendarUrl &&
+                                <a href={props.addCalendarUrl}>
+                                    <HDSButton
+                                        leftIconVariant='calendarplus02'
+                                        leftIconColor="#1E56E3"
+                                        rightIconVariant='none'
+                                        state='default'
+                                        size='sm'
+                                        type="iconOnly"
+                                        label=''
+                                    />
+                                </a>
+                            }
+                        </div>}
+                </div>
+            </div>
+        </div>
+
+    )
+
+}

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

@@ -1,68 +1,99 @@
 import React from "react";
 import PropTypes from 'prop-types';
-import {HDSColor} from '../../../foundation/ColorPalette';
+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-6 db:gap-28 tb:gap-16">
+      <div>
+      <div className="flex flex-row flex-wrap tb:gap-3 gap-2">
+        {props.badges &&
+          props.badges.map((value, index) => (
+            <div key={index} className='flex  whitespace-nowrap'>
+              <Badges
+                size={value.size}
+                color={value.color}
+                leftIconVariant={value.leftIconVariant}
+                leftIconColor={value.leftIconColor}
+                leftIconColorClass={HDSColor(value.leftIconColorClass)}
+                children={value.label}
+
+              />
+              
+            </div>
+          ))
+        }
+        </div>
+
+        {
+          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-6 db:pb-0'>{props.title}</Typography>)
+        }
+        {
+          props.social_share && (
+            <div className='flex pb-6 tb:pt-0 tb:pb-0 items-center '>
+              {
+                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 className="border-t border-neutral-200 border-b pb-6 tb:border-0 tb:pb-0">
+              <Typography textStyle='h6' as='h6' className='uppercase   text-neutral-500 pb-6 pt-6 tb:pt-14'>speakers</Typography>
+            
+                {
+                  props.speaker_card.map((speaker, i) => (
+                    <div key={i} className='pb-4 last:pb-0'>
+                      <ProfileAvatar
+                        name={speaker.name}
+                        size='md'
+                        designation={speaker.designation}
+                        imageUrl={speaker.imageUrl}
+                        avatarVariant="circle"
+                        avatarBgColor={props.avatarBgColor}
+                      />
+                    </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: '',
 };