hds-web 1.24.4 → 1.24.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.24.4",
+  "version": "1.24.6",
   "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/modules/Events/eventsAgenda.js

@@ -0,0 +1,56 @@
+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 TextCard(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")}>
+            {
+              list.title && (
+                <Typography textStyle="h5" as="h5" className="text-neutral-700 pb-1">
+                  {list.title}
+                </Typography>
+              )
+            }
+            {
+              list.description && (
+                <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-4 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

@@ -1044,6 +1044,18 @@ select{
   top: 100%;
 }
 
+.left-40{
+  left: 10rem;
+}
+
+.top-\[218px\]{
+  top: 218px;
+}
+
+.right-20{
+  right: 5rem;
+}
+
 .isolate{
   isolation: isolate;
 }
@@ -1506,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;
@@ -1717,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;
 }
@@ -1963,6 +1999,14 @@ select{
   width: 100vw;
 }
 
+.w-\[18px\]{
+  width: 18px;
+}
+
+.w-\[400px\]{
+  width: 400px;
+}
+
 .min-w-\[11\.5rem\]{
   min-width: 11.5rem;
 }
@@ -2495,6 +2539,10 @@ select{
   gap: 25rem;
 }
 
+.gap-8{
+  gap: 2rem;
+}
+
 .gap-x-1{
   -webkit-column-gap: 0.25rem;
           column-gap: 0.25rem;
@@ -2626,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);
 }
@@ -3880,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;
 }
@@ -6228,6 +6287,10 @@ select{
   object-fit: fill;
 }
 
+.object-center{
+  object-position: center;
+}
+
 .p-0{
   padding: 0px;
 }
@@ -6644,6 +6707,10 @@ select{
   padding-top: 81px;
 }
 
+.pr-6{
+  padding-right: 1.5rem;
+}
+
 .text-left{
   text-align: left;
 }
@@ -10907,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;
   }
@@ -11032,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;
   }
@@ -11088,6 +11177,10 @@ select{
     padding-top: 2.875rem;
   }
 
+  .tb\:pr-6{
+    padding-right: 1.5rem;
+  }
+
   .tb\:text-left{
     text-align: left;
   }
@@ -12531,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));
@@ -12540,6 +12638,14 @@ select{
   padding-bottom: 0.5rem;
 }
 
+.\[\&\>p\]\:pb-1>p{
+  padding-bottom: 0.25rem;
+}
+
+.\[\&\>p\]\:pb-4>p{
+  padding-bottom: 1rem;
+}
+
 .\[\&\>p\]\:text-neutral-600>p{
   --tw-text-opacity: 1;
   color: rgb(77 87 97 / var(--tw-text-opacity));
@@ -12569,6 +12675,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;
 }