hds-web 1.24.3 → 1.24.5

package/package.json

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

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

@@ -20,6 +20,10 @@ const ProfileAvatarVariant = {
         'titleTextStyle': 'text-hds-m-body2c-bold tb:text-hds-t-body2c-bold db:text-hds-d-body2c-bold',
         'desgnTextStyle': 'text-hds-m-body3c tb:text-hds-t-body3c db:text-hds-d-body3c'
     },
+    'primary': {
+        'titleTextStyle': 'text-hds-m-body1-semi-bold tb:text-hds-t-body1-semi-bold db:text-hds-d-body1-semi-bold',
+        'desgnTextStyle': 'text-hds-m-body2 tb:text-hds-t-body2 db:text-hds-d-body2'
+    },
     'secondary': {
         'titleTextStyle': 'text-hds-m-sub2 tb:text-hds-t-sub2 db:text-hds-d-sub2',
         'desgnTextStyle': 'text-hds-m-body2 tb:text-hds-t-body2 db:text-hds-d-body2'

package/src/HDS/components/Cards/EventCards/eventschedule.js

@@ -0,0 +1,98 @@
+import React from "react";
+import { HDSColor } from '../../../foundation/ColorPalette'
+import { ProfileAvatar } from '../../Avatars'
+import { Typography } from '../../../foundation/Typography'
+import { HDSButton } from "../../Buttons";
+import { Badges } from "../../BadgesCaption";
+import { Icon } from "../../common-components";
+
+
+export default function EventScheduleCard(props) {
+
+    const scheduleSection = () => (
+        <div className="flex tb:divide-x divide-y tb:divide-y-0 divide-neutral-200 py-6 tb:flex-row flex-col">
+
+            <div className="flex flex-col tb:pr-6 pb-4 tb:pb-0">
+                <div className="flex gap-2">
+                    <Icon height='h-[18px] w-[18px]' variant='calendar' strokeClass='stroke-neutral-600' />
+                    <Typography textStyle='h6' className='capitalize text-neutral-600' ></Typography>
+                </div>
+                <Typography textStyle='sub2' className='text-neutral-700'>
+
+                    {/* date */}2.00-5.00 PM PT
+                </Typography>
+            </div>
+            <div className="flex flex-col tb:px-6 py-4 tb:py-0">
+                <div className="flex gap-2">
+                    <Icon height='h-[18px] w-[18px]' variant='clock' strokeClass='stroke-neutral-600' />
+                    <Typography textStyle='h6' className='capitalize text-neutral-600'  ></Typography>
+                </div>
+                <Typography textStyle='sub2' className='text-neutral-700'>
+
+                    {/* date */}2.00-5.00 PM PT
+                </Typography>
+            </div>
+            <div className="flex flex-col tb:px-6 py-4 tb:py-0 ">
+                <div className="flex gap-2">
+                    <Icon height='h-[18px] w-[18px]' variant='markerpin03' strokeClass='stroke-neutral-600' />
+                    <Typography textStyle='h6' className='capitalize text-neutral-600'  ></Typography>
+                </div>
+                <Typography textStyle='sub2' className='text-neutral-700'>
+
+                    {/* date */}TopGolf El Segundo
+                </Typography>
+            </div>
+            <div className="px-6">
+                {/* share button */}
+            </div>
+        </div>
+    )
+    const speakerSection = (speaker) => (
+        <div className="">
+            <ProfileAvatar
+                name={speaker?.speakerName}
+                size='md'
+                designation={speaker?.speakerDesignation}
+                imageUrl={speaker?.speakerImgUrl}
+                avatarVariant="circle"
+                avatarType="primary"
+            />
+        </div>
+    )
+    return (
+        <>
+            <div>
+                <div className="pb-2">
+                    <Badges
+                        color='green'
+                        children='das'
+                        text_color='text-neutral-0'
+                    />
+                </div>
+                {props.title &&
+                    <Typography
+                        textStyle='h3'
+                        className={HDSColor(props.titleTextColor)}>
+                        {props.title}
+                    </Typography>}
+                {scheduleSection(props)}
+                {props.subtitle &&
+                    <Typography
+                        textStyle='h5'
+                        className='text-neutral-700 pb-2'>
+                        {props.subtitle}
+                    </Typography>}
+                {props.description &&
+                    <Typography
+                        textStyle='sub2'
+                        className='text-neutral-700 pb-6'>
+                        {props.description}
+                    </Typography>}
+                <div className="pt-6 border-t border-neutral-200">
+
+                    {speakerSection()}
+                </div>
+            </div>
+        </>
+    )
+}

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

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

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

@@ -9,4 +9,5 @@ export * from './CommunityCard';
 export * from './Announcement';
 export * from './VideoCard';
 export * from './Testimonials';
-export * from './StoryCard';
+export * from './StoryCard';
+export * from './EventCards'

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

@@ -0,0 +1,34 @@
+import React from "react";
+import { Typography } from "../../foundation/Typography";
+import { HDSPaperForm } from "../../helpers/Paperform";
+import { Icon } from "../common-components";
+export default function HeroEvents(props) {
+
+    return (
+        <div className="max-w-7xl">
+            <div className="relative">
+                <img loading="lazy" src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1692355512/hasura-design-system/heroevents2_c8mpzp.png" alt={props.img_alt} className='bg-discord h-[336px] object-cover ' />
+            </div>
+            <div className="flex items-start py-12 px-20">
+                <div className="flex-1">
+             
+                </div>
+                <div className="bg-neutral-0 rounded-3xl w-[400px] z-[1] -mt-[200px] p-10 border border-neutral-200">
+                    <div className="flex gap-2 items-center pb-6">
+                        <Icon height='h-5 w-5' variant='videorecorder' strokeClass='stroke-blue-600' />
+                        <Typography textStyle='h5' className='text-neutral-1000'></Typography>
+                    </div>
+                    <div>
+                        <HDSPaperForm
+                            formId='hf-1051'
+                            styleClass="paper-form-wrapper"
+                        />
+                    </div>
+                </div>
+
+            </div>
+
+        </div>
+
+    )
+}

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

@@ -2,3 +2,4 @@ export {default as Hero1} from './h1'
 export {default as HeroSecondary} from './h2'
 export {default as HeroCapability} from './h3'
 export {default as HeroIntegration} from './heroIntegration'
+export {default as HeroEvents} from './heroEvents'

package/src/HDS/components/Tabs/index.js

@@ -2,3 +2,4 @@ export {default as Tabone} from './TabOne';
 export {default as Tabthree} from './TabThree';
 export {default as Tabtwo} from './TabTwo';
 export {default as Tab} from './tab';
+export {default as V3Tab} from './v3tab';

package/src/HDS/components/Tabs/v3tab.js

@@ -0,0 +1,60 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { HDSColor } from '../../foundation/ColorPalette';
+import { Typography } from '../../foundation/Typography'
+import { motion } from 'framer-motion';
+
+export default function V3Tab(props) {
+    const {
+        tabs,
+        onTabClick,
+        pillColor,
+    } = props;
+    const initialActiveTab = tabs.find(tab => tab.current)?.name || tabs[0].name;
+    const [activeTab, setActiveTab] = useState(initialActiveTab);
+    let pillColorClass = '';
+    if (pillColor) {
+        pillColorClass = HDSColor(pillColor);
+    }
+    const handleTabClick = (clickedTab) => {
+        setActiveTab(clickedTab.name);
+        if (onTabClick) {
+            onTabClick(clickedTab);
+        }
+
+    };
+    return (
+        <div className="">
+            <div className="block ">
+                <nav className="relative inline-flex gap-2 rounded-[32px] " aria-label="Tabs">
+                    {tabs && tabs.map((tab) => (
+                        <button
+                            key={tab.name}
+                            onClick={() => {
+                                handleTabClick(tab);
+                            }}
+                            className={`${activeTab === tab.name ? ' text-neutral-0 transition-all duration-300' : ' hover:bg-neutral-500/30 text-neutral-400'} relative  px-3 py-1 whitespace-nowrap rounded-full hover:text-neutral-0`}
+                        >
+                            {activeTab === tab.name && (
+                                <motion.div
+                                    layoutId="active-pill"
+                                    className={`absolute inset-0 ${pillColorClass}`}
+                                    style={{ borderRadius: 32 }}
+                                //  transition={{ duration:1 }}
+
+                                />
+                            )}
+                            <Typography textStyle="body3c-medium" className={`relative z-10 `}>
+                                {tab.name}
+                            </Typography>
+                        </button>
+                    ))}
+                </nav>
+            </div>
+        </div>
+    );
+}
+
+
+V3Tab.defaultProps = {
+    pillColor: 'bg-blue-500',
+}

package/src/HDS/modules/Events/eventsAgenda.js

@@ -0,0 +1,70 @@
+import React from "react";
+import { Typography } from "../../foundation/Typography";
+// import { HDSColor } from "../../foundation/ColorPalette";
+import { Icon } from '../../components/common-components/Icon';
+import ReactMarkdown from "react-markdown";
+
+export default function EventsAgenda(props) {
+  // const titleColor = HDSColor(props.title_color);
+
+  return (
+    <>
+      {
+        props.tagline && (
+          <Typography
+            textStyle="body1-medium"
+            className="flex items-center text-neutral-700 pb-4">
+            {props.tagIcon &&
+              <Icon
+                height={'h-6 w-6 stroke-[1.5px] mr-2'}
+                variant={props.tagIcon}
+                strokeClass="stroke-neutral-700" />}
+            {props.tagline}
+          </Typography>
+        )
+      }
+      {
+        props.agendaTitle && (
+          <Typography
+            textStyle="h3"
+            as="h3"
+            className="text-neutral-1000 pb-4">
+            {props.agendaTitle}
+          </Typography>
+        )
+      }
+      {
+        props.agendaList &&
+        props.agendaList.map((list, index) => (
+          <div
+            key={index}
+            className={((index === 0) ? "" : "pt-4")}
+          >
+            <Typography
+              textStyle="h5"
+              as="h5"
+              className="text-neutral-700 pb-1"
+            >
+              {list.title}
+            </Typography>
+            <Typography
+              textStyle="body1"
+              className="text-neutral-700 [&>p]:pb-1 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-1 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600 [&>p>a:hover]:text-blue-800"
+            >
+              <ReactMarkdown>{list.description}</ReactMarkdown>
+            </Typography>
+          </div>
+        ))
+      }
+      {
+        props.closingNotes && (
+          <Typography
+            textStyle="body1"
+            className="text-neutral-700 pt-4 [&>p]:pb-1 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-1 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600 [&>p>a:hover]:text-blue-800">
+            <ReactMarkdown>{props.closingNotes}</ReactMarkdown>
+          </Typography>
+        )
+      }
+    </>
+  )
+}

package/src/HDS/modules/Events/index.js

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

package/src/HDS/modules/index.js

@@ -1,3 +1,4 @@
 export * from './TextCard';
 export * from './navCard';
-export * from './Cards';
+export * from './Cards';
+export * from './Events';

package/src/styles/tailwind.css

@@ -952,6 +952,10 @@ select{
   left: 17.6%;
 }
 
+.left-\[400px\]{
+  left: 400px;
+}
+
 .left-\[45\%\]{
   left: 45%;
 }
@@ -1040,6 +1044,18 @@ select{
   top: 100%;
 }
 
+.left-40{
+  left: 10rem;
+}
+
+.top-\[218px\]{
+  top: 218px;
+}
+
+.right-20{
+  right: 5rem;
+}
+
 .isolate{
   isolation: isolate;
 }
@@ -1253,6 +1269,11 @@ select{
   margin-bottom: 2rem;
 }
 
+.mx-8{
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
 .-mb-\[112\%\]{
   margin-bottom: -112%;
 }
@@ -1497,6 +1518,14 @@ select{
   margin-top: 70px;
 }
 
+.-mt-\[200\]{
+  margin-top: -200;
+}
+
+.-mt-\[200px\]{
+  margin-top: -200px;
+}
+
 .line-clamp-3{
   overflow: hidden;
   display: -webkit-box;
@@ -1624,6 +1653,10 @@ select{
   height: 2.25rem;
 }
 
+.h-\[1000px\]{
+  height: 1000px;
+}
+
 .h-\[130px\]{
   height: 130px;
 }
@@ -1668,10 +1701,6 @@ select{
   height: 60px;
 }
 
-.h-\[700px\]{
-  height: 700px;
-}
-
 .h-\[800px\]{
   height: 800px;
 }
@@ -1708,6 +1737,22 @@ select{
   height: 100vh;
 }
 
+.h-\[700px\]{
+  height: 700px;
+}
+
+.h-3\.5{
+  height: 0.875rem;
+}
+
+.h-\[18px\]{
+  height: 18px;
+}
+
+.h-\[336px\]{
+  height: 336px;
+}
+
 .max-h-\[181px\]{
   max-height: 181px;
 }
@@ -1954,6 +1999,14 @@ select{
   width: 100vw;
 }
 
+.w-\[18px\]{
+  width: 18px;
+}
+
+.w-\[400px\]{
+  width: 400px;
+}
+
 .min-w-\[11\.5rem\]{
   min-width: 11.5rem;
 }
@@ -2486,6 +2539,10 @@ select{
   gap: 25rem;
 }
 
+.gap-8{
+  gap: 2rem;
+}
+
 .gap-x-1{
   -webkit-column-gap: 0.25rem;
           column-gap: 0.25rem;
@@ -2617,6 +2674,12 @@ select{
   border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
 }
 
+.divide-x-2 > :not([hidden]) ~ :not([hidden]){
+  --tw-divide-x-reverse: 0;
+  border-right-width: calc(2px * var(--tw-divide-x-reverse));
+  border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
+}
+
 .divide-blue-600\/10 > :not([hidden]) ~ :not([hidden]){
   border-color: rgb(30 86 227 / 0.1);
 }
@@ -3871,6 +3934,11 @@ select{
   background-color: rgb(133 77 24 / var(--tw-bg-opacity));
 }
 
+.bg-discord{
+  --tw-bg-opacity: 1;
+  background-color: rgb(88 101 242 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-20{
   --tw-bg-opacity: 0.2;
 }
@@ -6219,6 +6287,10 @@ select{
   object-fit: fill;
 }
 
+.object-center{
+  object-position: center;
+}
+
 .p-0{
   padding: 0px;
 }
@@ -6635,6 +6707,10 @@ select{
   padding-top: 81px;
 }
 
+.pr-6{
+  padding-right: 1.5rem;
+}
+
 .text-left{
   text-align: left;
 }
@@ -9335,11 +9411,6 @@ select{
   border-color: rgb(13 65 198 / var(--tw-border-opacity));
 }
 
-.hover\:border-neutral-0:hover{
-  --tw-border-opacity: 1;
-  border-color: rgb(255 255 255 / var(--tw-border-opacity));
-}
-
 .hover\:border-neutral-300:hover{
   --tw-border-opacity: 1;
   border-color: rgb(210 214 219 / var(--tw-border-opacity));
@@ -9829,10 +9900,6 @@ select{
   background-color: rgb(133 77 24 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-neutral-0\/20:hover{
-  background-color: rgb(255 255 255 / 0.2);
-}
-
 .hover\:bg-neutral-500\/30:hover{
   background-color: rgb(108 115 127 / 0.3);
 }
@@ -10029,11 +10096,6 @@ select{
   color: rgb(30 86 227 / var(--tw-text-opacity));
 }
 
-.focus\:text-blue-700:focus{
-  --tw-text-opacity: 1;
-  color: rgb(13 65 198 / var(--tw-text-opacity));
-}
-
 .focus\:text-neutral-0:focus{
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -10912,6 +10974,18 @@ select{
     row-gap: 4rem;
   }
 
+  .tb\:divide-x > :not([hidden]) ~ :not([hidden]){
+    --tw-divide-x-reverse: 0;
+    border-right-width: calc(1px * var(--tw-divide-x-reverse));
+    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+  }
+
+  .tb\:divide-y-0 > :not([hidden]) ~ :not([hidden]){
+    --tw-divide-y-reverse: 0;
+    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
+    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
+  }
+
   .tb\:rounded-3xl{
     border-radius: 1.5rem;
   }
@@ -11037,6 +11111,16 @@ select{
     padding-bottom: 0.5rem;
   }
 
+  .tb\:px-6{
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .tb\:py-0{
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
   .tb\:pb-0{
     padding-bottom: 0px;
   }
@@ -11093,6 +11177,10 @@ select{
     padding-top: 2.875rem;
   }
 
+  .tb\:pr-6{
+    padding-right: 1.5rem;
+  }
+
   .tb\:text-left{
     text-align: left;
   }
@@ -12536,6 +12624,11 @@ select{
   display: inline-block;
 }
 
+.\[\&\>p\>a\:hover\]\:text-blue-800>p>a:hover{
+  --tw-text-opacity: 1;
+  color: rgb(0 40 142 / var(--tw-text-opacity));
+}
+
 .\[\&\>p\>a\]\:text-blue-600>p>a{
   --tw-text-opacity: 1;
   color: rgb(30 86 227 / var(--tw-text-opacity));
@@ -12545,6 +12638,10 @@ select{
   padding-bottom: 0.5rem;
 }
 
+.\[\&\>p\]\:pb-1>p{
+  padding-bottom: 0.25rem;
+}
+
 .\[\&\>p\]\:text-neutral-600>p{
   --tw-text-opacity: 1;
   color: rgb(77 87 97 / var(--tw-text-opacity));
@@ -12574,6 +12671,10 @@ select{
   padding-bottom: 0.5rem;
 }
 
+.\[\&\>ul\>li\]\:pb-1>ul>li{
+  padding-bottom: 0.25rem;
+}
+
 .\[\&\>ul\>li\]\:last\:pb-0:last-child>ul>li{
   padding-bottom: 0px;
 }