hds-web 1.0.1 → 1.0.3

package/package.json

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

package/src/HDS/components/Avatars/profileAvatar.js

@@ -7,34 +7,39 @@ const imgSizes = {
     'md': 'h-12 w-12',
     'lg': 'h-[60px] w-[60px]',
 }
+const AvatarVariant = {
+    'circular': 'shadow rounded-full border-[1.5px] border-neutral-0',
+    'square': 'rounded-lg',
+}
+
 
 const nameTextStyle = {
-    'xs': 'text-sm-medium',
-    'sm': 'text-sm-medium',
-    'md': 'text-md-medium',
-    'lg': 'text-lg-medium'
+    'xs': 'text-d-body1c-bold',
+    'sm': 'text-d-body1c-bold',
+    'md': 'text-d-body1c-bold',
+    'lg': 'text-d-body1c-bold'
 }
 
 const desgnTextStyle = {
-    'xs': 'text-xs-regular',
-    'sm': 'text-sm-regular',
-    'md': 'text-md-regular',
-    'lg': 'text-md-regular'
+    'xs': 'text-hds-d-body3c ',
+    'sm': 'text-hds-d-body3c ',
+    'md': 'text-hds-d-body3c ',
+    'lg': 'text-hds-d-body3c '
 }
 
-export default function ProfileAvatar({ name, designation, size, imageUrl }) {
-    const imgSizeClass = imgSizes[size] || imgSizes.medium;
+export default function ProfileAvatar({ name, designation, size, imageUrl, avatarVariant }) {
+    const imgSizeClass = imgSizes[size] || imgSizes.md;
+    const avatarVariantClass = AvatarVariant[avatarVariant] || AvatarVariant.circular;
     const defaultAvatarIcon = "user03";
     const hasImageUrl = imageUrl && imageUrl.length > 0;
     return (
-        <a href="#" className="group block flex-shrink-0">
+        <div className="group block flex-shrink-0">
             <div className="flex items-center">
                 <div>
                     {hasImageUrl ? (
                         <img
-                            className={`${imgSizeClass} inline-block  shadow rounded-full border-[1.5px] border-neutral-0`}
+                            className={`${imgSizeClass} ${avatarVariantClass} rounded inline-block`}
                             src={imageUrl}
-                            
                         />
                     ) : (
                         <Icon
@@ -45,11 +50,18 @@ export default function ProfileAvatar({ name, designation, size, imageUrl }) {
                     )}
                 </div>
                 <div className="ml-3">
-                    <p className={`${nameTextStyle[`${size}`]}  text-neutral-900 group-hover:text-gray-900`}>{name}</p>
-                    <p className={`${desgnTextStyle[`${size}`]}  text-neutral-500 group-hover:text-gray-700`}>{designation}</p>
+                    <p
+                        className={`${nameTextStyle[`${size}`]}text-neutral-900 group-hover:text-gray-900`}
+                    >
+                        {name}
+                    </p>
+                    <p
+                        className={`${desgnTextStyle[`${size}`]}  text-neutral-500 group-hover:text-gray-700`}>
+                        {designation}
+                    </p>
                 </div>
             </div>
-        </a>
+        </div>
     )
 }
 

package/src/HDS/components/BadgesCaption/badges.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Icon } from '../common-components/Icon';
+import {Typography} from '../../foundation/Typography'
 const sizeClasses = {
   sm: 'py-0.5 px-2 hds-d-body3c',
   default: 'py-1 px-3',
@@ -13,17 +14,16 @@ const iconClasses = {
 };
 
 const colorVariants = {
-  blue: 'bg-blue-600 text-blue-800 hover:bg-blue-300 dark:bg-blue-500 dark:text-blue-100 dark:hover:bg-blue-600',
-  grey: 'bg-neutral-600 text-neutral-800 hover:bg-neutral-300 dark:bg-neutral-500 dark:text-neutral-100 dark:hover:bg-neutral-600',
-  purple: 'bg-purple-600 text-purple-800 hover:bg-purple-300 dark:bg-purple-500 dark:text-purple-100 dark:hover:bg-purple-600',
-  pink: 'bg-pink-600 text-pink-800 hover:bg-pink-300 dark:bg-pink-500 dark:text-pink-100 dark:hover:bg-pink-600',
-  amber: 'bg-amber-600 text-amber-800 hover:bg-amber-300 dark:bg-amber-500 dark:text-amber-100 dark:hover:bg-amber-600',
-  cyan: 'bg-cyan-600 text-cyan-800 hover:bg-cyan-300 dark:bg-cyan-500 dark:text-cyan-100 dark:hover:bg-cyan-600',
-  green: 'bg-green-600 text-green-800 hover:bg-green-300 dark:bg-green-500 dark:text-green-100 dark:hover:bg-green-600',
+  blue: 'bg-blue-200 text-blue-800 group-hover:bg-blue-300 border border-blue-400 ',
+  grey: 'bg-neutral-200 text-neutral-800 group-hover:bg-neutral-300 border border-neutral-400  ',
+  purple: 'bg-purple-200 text-purple-800 group-hover:bg-purple-300 border border-purple-400 ',
+  pink: 'bg-pink-200 text-pink-800 group-hover:bg-pink-300 border border-pink-400 ',
+  amber: 'bg-amber-200 text-amber-800 group-hover:bg-amber-300 border border-amber-400 ',
+  cyan: 'bg-cyan-200 text-cyan-800 group-hover:bg-cyan-300 border border-cyan-400 ',
+  cyan200: 'bg-cyan-200 text-cyan-600 border border-cyan-400 border border-cyan-400 ',
+  green: 'bg-green-200 text-green-800 group-hover:bg-green-300 border border-green-400 ',
 }
 
-
-
 export default function Badge({
   leftIconVariant,
   leftIconColor,
@@ -55,7 +55,7 @@ export default function Badge({
             <Icon height={'h-4 w-4'} variant={leftIconVariant} strokeColor={leftIconColor} />
           </div>
         )}
-        {children}
+        <Typography textStyle='h6'>{children}</Typography>
 
         {rightIconVariant && rightIconVariant !== 'none' && (
           <div className='ml-1'>

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

@@ -93,7 +93,12 @@ const Buttonclasses = {
       'sm': 'rounded-full',
       'md': 'rounded-full p-2.5',
       'lg': 'trounded-full p-3'
-    }
+    },
+    'links': {
+      'sm': 'text-hds-d-body3c-medium rounded-full',
+      'md': 'text-hds-d-body3c-medium rounded-full',
+      'lg': 'text-hds-d-body1c-medium rounded-full'
+    },
   }
 }
 export default function Button(props) {
@@ -126,6 +131,7 @@ export default function Button(props) {
 
   let sizeType = 'default';
   if(type=='iconOnly'){sizeType='iconOnly'}
+  if(type=='secondaryLink' || type=='primaryLink' ){sizeType='links'}
 
 
   const buttonClasses = [
@@ -190,12 +196,17 @@ Button.propTypes = {
 };
 
 Button.defaultProps = {
-  size: 'sm',
+  size: 'md',
   type: 'primary',
-  leftIconVariant: 'home03',
+  leftIconVariant: 'none',
   rightIconVariant: 'home3',
-  rightIconColor: '#80ff00',
-  leftIconColor: '#80ff00',
-  animatedHoverStroke:''
-
+  rightIconColor: '#FFFFFF',
+  leftIconColor: '#FFFFFF',
+  animatedHoverStroke:'#FFFFFF',
+  state: 'default',
+  label: 'Button',
+  rightAnimatedArrow: 'True' ,
+  rightAnimatedArrowColor: '#FFFFFF',
+  animatedHoverStroke: 'group-hover:stroke-neutral-0',
+  
 };

package/src/HDS/components/Cards/Feedback/feedback.js

@@ -0,0 +1,25 @@
+import React from "react";
+import {HDSColor} from '../../../foundation/ColorPalette'
+import { ProfileAvatar } from '../../Avatars'
+import { Typography } from '../../../foundation/Typography'
+
+
+export default function FeedbackCard(props) {
+  return (
+    <div className='bg-neutral-0 rounded-3xl shadow p-6 tb-l:p-10'>
+      <div className='pb-8'>
+        <img src={props.brandImgUrl} alt={props.brandImgAlt} />
+      </div>
+      <div className="pb-10">
+        <Typography textStyle="quote" className='text-neutral-1000'>{props.description}</Typography>
+      </div>
+      <ProfileAvatar
+        name={props.speakerName}
+        size='md'
+        designation={props.speakerDesignation}
+        imageUrl={props.speakerImgUrl}
+        avatarVariant="square"
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1 @@
+export {default as FeedbackCard} from './feedback';

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

@@ -0,0 +1,2 @@
+export {default as LinkCard} from './link';
+export {default as ResourcesCard} from './resources';

package/src/HDS/components/Cards/Link/link.js

@@ -0,0 +1,86 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import { Icon } from "../../common-components/Icon";
+import { HDSColor } from '../../../foundation/ColorPalette'
+import { Typography } from '../../../foundation/Typography'
+
+
+export default function LinkCard(props) {
+    const iconStrokeColor = HDSColor(props.iconStrokeColor);
+    const cardBgColorClass = HDSColor(props.cardBgColor)
+    const cardHoverClasses = `hover:${HDSColor(props.cardHoverBg)}` + ' hover:shadow-xl';
+    return (
+        <>
+            <a
+                href={props.linkUrl}
+                className={`${cardHoverClasses} ${cardBgColorClass} min-w-[15rem] rounded-2xl border border-neutral-150 p-6 block`}
+            >
+                {props.brandImageUrl ?
+                    (
+                        <div className="flex flex-col">
+                            <div className="flex justify-end items-end pr-6">
+                                {props.iconArrowVariant &&
+                                    (<Icon
+                                        height={'w-6 h-6 stroke-[1.5px] stroke-blue-400'}
+                                        variant={props.iconArrowVariant}
+                                        strokeColor={props.iconArrowStrokeColor}
+                                    />)
+                                }
+                            </div>
+                            <img src={props.brandImageUrl} alt={props.brandImageAlt} />
+
+                        </div>
+                    )
+                    :
+                    (
+                        <>
+                            <div className='flex items-center'>
+                                <div className='flex items-center flex-1'>
+                                    {props.iconVariant &&
+                                        (<Icon
+                                            height={'w-6 h-6 mr-2 stroke-[1.5px] '}
+                                            variant={props.iconVariant}
+                                            strokeColor={iconStrokeColor}
+                                        />)}
+                                    <Typography
+                                        as="h5"
+                                        textStyle="body1c-bold"
+                                        className="text-neutral-1000">
+                                        {props.title}
+                                    </Typography>
+                                </div>
+                                {props.iconArrowVariant &&
+                                    (<Icon
+                                        height={'w-6 h-6 stroke-[1.5px] stroke-blue-400'}
+                                        variant={props.iconArrowVariant}
+                                        strokeColor={props.iconArrowStrokeColor}
+                                    />)
+                                }
+                            </div>
+                            {props.description &&
+                                (<Typography
+                                    textStyle="body3"
+                                    className="text-neutral-1000 mt-2">
+                                    {props.description}
+                                </Typography>)}
+                        </>
+                    )
+                }
+            </a>
+        </>
+    )
+}
+
+LinkCard.defaultProps = {
+    brandImageUrl: '',
+    brandImageAlt:'',
+    linkUrl: '#',
+    cardBgColor: 'bg-neutral-0',
+    cardHoverBg: 'bg-neutral-0',
+    iconVariant: 'videorecorder',
+    iconStrokeColor: 'blue-500',
+    iconArrowVariant: 'arrownarrowupright',
+    iconArrowStrokeColor: 'blue-400',
+    title: 'Webinar',
+    description: 'Model Level Authorization System for GraphQL with Hasura',
+};

package/src/HDS/components/Cards/Link/resources.js

@@ -0,0 +1,53 @@
+import React from "react";
+import { Icon } from "../../common-components/Icon";
+import { HDSColor } from '../../../foundation/ColorPalette';
+import { Typography } from '../../../foundation/Typography';
+import PropTypes from 'prop-types';
+
+
+export default function ResourcesCard(props) {
+    const iconBG = HDSColor(props.iconBg);
+    console.log(props.resourcesArr);
+    return (
+        <>
+            <div className={`p-8 ${props.cardBg} min-w-[18rem] rounded-3xl`}>
+
+                {props.title && (
+                    <Typography
+                        textStyle='h6'
+                        className={`uppercase ${props.title_text_color}`}>
+                        {props.title}
+                    </Typography>
+                )}
+                <div className="mt-6">
+                    {props.resourcesArr.map((value) => (
+                        <a href={value.cta_linkUrl} className="flex gap-2 mt-4">
+                            <Icon
+                                height={'w-6 h-6 mr-2 stroke-[1.5px] stroke-blue-600'}
+                                variant={value.cta_icon}
+                                strokeClass={value.cta_stroke}
+                            />
+                            <Typography
+                                textStyle='body2c'
+                                className={value.cta_text_color}>
+                                {value.cta_text}
+                            </Typography>
+                        </a>
+                    ))}
+                </div>
+            </div>
+        </>
+    )
+}
+ResourcesCard.defaultProps = {
+    cardBg: 'bg-neutral-0',
+    title: 'Resources Card', 
+    title_text_color: 'text-blue-600',
+    resourcesArr: [
+        { cta_text: 'This is one really long link that may spill onto the next line', cta_icon: 'linkexternal01', cta_text_color: 'text-neutral-700 hover:text-blue-600 ', cta_stroke: 'stroke-blue-600', cta_linkUrl: '#' },
+        { cta_text: 'This is a regular link that fits in one line', cta_text_color: 'text-neutral-700', cta_icon: 'linkexternal01', cta_stroke: 'stroke-blue-600',  cta_linkUrl: '#'  },
+        { cta_text: 'text3', cta_text_color: 'text-neutral-700', cta_icon: 'linkexternal01', cta_stroke: 'stroke-blue-600',  cta_linkUrl: '#'  },
+        { cta_text: 'text4', cta_text_color: 'text-neutral-700', cta_icon: 'linkexternal01', cta_stroke: 'stroke-blue-600',  cta_linkUrl: '#'  },
+
+    ]
+}

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

@@ -34,6 +34,7 @@ export default function FlyoutB(props) {
                         size='sm'
                         rightAnimatedArrow={true}
                         rightAnimatedArrowColor='#6C737F'
+                        className='mt-4'
                     />
                     </div>
                     <Typography className='mt-2 text-neutral-800' textStyle='body3'>{mainDescription}</Typography>

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

@@ -10,8 +10,8 @@ export default function TalkCard(props) {
 
         <div className=" ">
 
-            <div className="grid rounded-3xl shadow bg-neutral-0  grid-cols-2  border border-neutral-200 min-w-[882px] ">
-                <div className="px-8 py-6 border-r border-r-neutral-150" >
+            <div className="grid rounded-3xl shadow 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 border-b-neutral-150 tb:border-0 tb:border-r tb:border-r-neutral-150" >
 
 
                     <Badges
@@ -22,25 +22,29 @@ export default function TalkCard(props) {
                         children={props.badges.label}
                     />
 
-                    <Typography className='my-2 text-neutral-800' textStyle='h5'>{props.title}</Typography>
-                    <Typography className='my-2 text-neutral-600' textStyle='body1'>{props.para}</Typography>
+                    <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>
 
-                <div className="flex flex-col pt-[2.875rem] justify-between">
-                    <div className="pl-6 flex gap-6 mb-9 flex-col ">
-                        {props.speakerSet.map((value, i) => (
-                            <div key={i} className="">
+                <div className="flex flex-col 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 ">
+                            {props.speakerSet.map((value, i) => (
+                                <div key={i} className="">
 
-                                <ProfileAvatar
-                                    name={value.name}
-                                    size='md'
-                                    designation={value.designation}
-                                    imageUrl={value.imageUrl}
-                                />
-                            </div>
+                                    <ProfileAvatar
+                                        name={value.name}
+                                        size='md'
+                                        designation={value.designation}
+                                        imageUrl={value.imageUrl}
+                                    />
+                                </div>
 
-                        ))}
-                    </div>
+                            ))}
+                        </div>
+                      )
+                    }
                     <div className=" w-full border-t border-t-neutral-150 p-6 flex flex-row justify-between items-center">
                         <Typography textStyle='h6' className='text-blue-800'>{props.eventTime}</Typography>
                         <HDSButton
@@ -50,7 +54,7 @@ export default function TalkCard(props) {
                             state='default'
                             size='sm'
                             type="iconOnly"
-
+                            label=''
                         />
                     </div>
                 </div>

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

@@ -0,0 +1 @@
+export {default as TalkDetailCard} from './talkDetailCard';

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

@@ -0,0 +1,68 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import {HDSColor} from '../../../foundation/ColorPalette';
+import { Badges } from '../../BadgesCaption';
+import { ProfileAvatar } from '../../Avatars'
+import { Typography } from "../../../foundation/Typography";
+
+
+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>
+  )
+}
+
+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: '',
+};

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

@@ -31,7 +31,6 @@ export default function Hero({ heroData, logo, scrollArrow, fontSize }) {
                 {
                   heroData.tag_line && (
                     <div
-
                     >
                       <Typography textStyle="h6" as="h6" className={"pb-6 uppercase text-center db:text-left font-normal tb-l:text-left " + ((heroData.tag_line_color) ? heroData.tag_line_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}
                       >