hds-web 1.3.0 → 1.3.1

package/package.json

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

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

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Icon } from '../common-components/Icon';
 import {Typography} from '../../foundation/Typography'
+import { HDSColor } from '../../foundation/ColorPalette';
 const sizeClasses = {
   sm: 'py-0.5 px-2 hds-d-body3c',
   default: 'py-1 px-3',
@@ -27,8 +28,10 @@ const colorVariants = {
 export default function Badge({
   leftIconVariant,
   leftIconColor,
+  leftIconColorClass,
   rightIconVariant,
   rightIconColor,
+  rightIconColorClass,
   size,
   children,
   color,
@@ -44,7 +47,7 @@ export default function Badge({
 
   return (
     <button
-      className={`${sizeClasses[size]} ${
+      className={` cursor-default ${sizeClasses[size]} ${
         colorVariants[color]
       } inline-flex items-center rounded-full`}
       onClick={handleClick}
@@ -52,14 +55,14 @@ export default function Badge({
     >
        {leftIconVariant && leftIconVariant !== 'none' && (
           <div className='mr-1'>
-            <Icon height={'h-4 w-4'} variant={leftIconVariant} strokeColor={leftIconColor} />
+            <Icon height={'h-4 w-4'} variant={leftIconVariant} strokeColor={leftIconColor} strokeClass={HDSColor(leftIconColorClass)} />
           </div>
         )}
         <Typography textStyle='body3c-medium'>{children}</Typography>
 
         {rightIconVariant && rightIconVariant !== 'none' && (
           <div className='ml-1'>
-            <Icon height={'h-4'} variant={rightIconVariant} strokeColor={rightIconColor} />
+            <Icon height={'h-4'} variant={rightIconVariant} strokeColor={rightIconColor} rightIconColorClass={HDSColor(rightIconColorClass)} />
           </div>
         )}
     </button>

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

@@ -29,11 +29,9 @@ export default function TalkCard(props) {
 
                     {props.para &&
                         <Typography
-                            className='line-clamp-3 text-neutral-700 [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 [&>ul>li]:last:pb-0'
-                            textStyle='body1'>
-                            <ReactMarkdown>
+                            className='line-clamp-3 text-neutral-700'
+                            textStyle='body1c'>
                                 {props.para}
-                            </ReactMarkdown>
                         </Typography>}
 
                 </div>

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

@@ -0,0 +1,112 @@
+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";
+
+export default function TalkCard2(props) {
+    let CardClass = ''
+    if (props.speakerSet === undefined) {
+        CardClass = 'tb-l:justify-center';
+    }
+    else CardClass = 'tb-l:justify-between';
+
+    return (
+
+        <div className="grid">
+            <div className={`flex flex-col tb-l:flex-row tb-l:justify-between `}>
+                <div className={"px-8 py-6 tb-l:border-r tb-l:border-r-neutral-200"}>
+                    <div className="flex 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={value.leftIconColorClass}
+                                        children={value.label}
+
+                                    />
+                                </div>
+                            ))
+                        }
+
+                    </div>
+                    <div className="tb-l:w-[520px]">
+
+                        <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.readUrl && (
+                            <a href={props.readUrl}>
+                                <HDSButton
+                                    label='Read more'
+                                    type='secondaryLink'
+                                    leftIconVariant='none'
+                                    rightIconVariant='none'
+                                    state='default'
+                                    size='md'
+                                    rightAnimatedArrow={true}
+                                    rightAnimatedArrowColor='#3970FD'
+                                    className='mt-4'
+                                    btnTextColorClass='text-blue-500'
+                                    animatedHoverStroke='stroke-blue-500'
+                                />
+                            </a>
+                        )}
+
+
+                    </div>
+
+                </div>
+
+                <div className={`${CardClass} divide-y divide-neutral-150 flex tb-l:w-full flex-col pt-0`} >
+                    {
+                        props.speakerSet && (
+                            <div className="pl-8 flex gap-6 tb-l:pt-12 tb:mt-0 tb-l:pb-12 pb-6 flex-col ">
+                                {props.speakerSet.map((value, i) => (
+                                    <div key={i} className="block">
+
+                                        <ProfileAvatar
+                                            name={value.name}
+                                            size='md'
+                                            designation={value.designation}
+                                            imageUrl={value.imageUrl}
+                                        />
+                                    </div>
+
+                                ))}
+                            </div>
+                        )
+                    }
+                   {props.eventTime && <div className=" w-full pl-8 p-6 flex flex-row justify-between items-center">
+                        <Typography textStyle='h6' className='text-blue-800'>{props.eventTime}</Typography>
+                        <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/styles/tailwind.css

@@ -1221,10 +1221,6 @@ select {
   margin-top: 3rem;
 }
 
-.mt-14 {
-  margin-top: 3.5rem;
-}
-
 .mt-16 {
   margin-top: 4rem;
 }
@@ -1538,8 +1534,24 @@ select {
   width: 100vw;
 }
 
-.w-1 {
-  width: 0.25rem;
+.w-\[520px\] {
+  width: 520px;
+}
+
+.w-\[62\%\] {
+  width: 62%;
+}
+
+.w-\[18\%\] {
+  width: 18%;
+}
+
+.w-\[82\%\] {
+  width: 82%;
+}
+
+.w-\[434px\] {
+  width: 434px;
 }
 
 .min-w-\[11\.5rem\] {
@@ -1622,6 +1634,14 @@ select {
   max-width: min-content;
 }
 
+.max-w-\[430px\] {
+  max-width: 430px;
+}
+
+.max-w-\[520px\] {
+  max-width: 520px;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1751,6 +1771,10 @@ select {
   cursor: pointer;
 }
 
+.cursor-default {
+  cursor: default;
+}
+
 .select-none {
   -webkit-user-select: none;
           user-select: none;
@@ -1900,6 +1924,10 @@ select {
   gap: 25rem;
 }
 
+.gap-8 {
+  gap: 2rem;
+}
+
 .gap-x-1 {
   -webkit-column-gap: 0.25rem;
           column-gap: 0.25rem;
@@ -2011,6 +2039,12 @@ select {
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
 
+.divide-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
+}
+
 .divide-blue-600\/10 > :not([hidden]) ~ :not([hidden]) {
   border-color: rgb(30 86 227 / 0.1);
 }
@@ -2050,14 +2084,6 @@ select {
   overflow: visible;
 }
 
-.overflow-scroll {
-  overflow: scroll;
-}
-
-.overflow-x-auto {
-  overflow-x: auto;
-}
-
 .overflow-y-auto {
   overflow-y: auto;
 }
@@ -2130,11 +2156,6 @@ select {
   border-radius: 0.75rem;
 }
 
-.rounded-b-2xl {
-  border-bottom-right-radius: 1rem;
-  border-bottom-left-radius: 1rem;
-}
-
 .rounded-b-3xl {
   border-bottom-right-radius: 1.5rem;
   border-bottom-left-radius: 1.5rem;
@@ -2227,6 +2248,10 @@ select {
   border-top-width: 1px;
 }
 
+.border-r-2 {
+  border-right-width: 2px;
+}
+
 .border-solid {
   border-style: solid;
 }
@@ -5457,12 +5482,24 @@ select {
   padding-top: 1rem;
 }
 
+.pt-5 {
+  padding-top: 1.25rem;
+}
+
 .pt-6 {
   padding-top: 1.5rem;
 }
 
-.pt-5 {
-  padding-top: 1.25rem;
+.pt-12 {
+  padding-top: 3rem;
+}
+
+.pb-9 {
+  padding-bottom: 2.25rem;
+}
+
+.pl-8 {
+  padding-left: 2rem;
 }
 
 .text-left {
@@ -5736,6 +5773,13 @@ select {
   font-weight: 700;
 }
 
+.text-hds-m-h7 {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  letter-spacing: 0.08em;
+  font-weight: 700;
+}
+
 .text-hds-m-quote {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -5772,13 +5816,6 @@ select {
   line-height: 1rem;
 }
 
-.text-hds-m-h7 {
-  font-size: 0.75rem;
-  line-height: 1.25rem;
-  letter-spacing: 0.08em;
-  font-weight: 700;
-}
-
 .font-medium {
   font-weight: 500;
 }
@@ -6445,14 +6482,6 @@ select {
   transition-duration: 150ms;
 }
 
-.delay-100 {
-  transition-delay: 100ms;
-}
-
-.delay-200 {
-  transition-delay: 200ms;
-}
-
 .delay-300 {
   transition-delay: 300ms;
 }
@@ -6485,10 +6514,6 @@ select {
   transition-duration: 700ms;
 }
 
-.duration-1000 {
-  transition-duration: 1000ms;
-}
-
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
@@ -8069,10 +8094,6 @@ select {
     margin-top: -4px;
   }
 
-  .tb\:mt-14 {
-    margin-top: 3.5rem;
-  }
-
   .tb\:block {
     display: block;
   }
@@ -8200,14 +8221,6 @@ select {
             column-gap: 4rem;
   }
 
-  .tb\:rounded-2xl {
-    border-radius: 1rem;
-  }
-
-  .tb\:rounded-3xl {
-    border-radius: 1.5rem;
-  }
-
   .tb\:rounded {
     border-radius: 0.25rem;
   }
@@ -8238,8 +8251,9 @@ select {
     padding: 4rem;
   }
 
-  .tb\:p-8 {
-    padding: 2rem;
+  .tb\:px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 
   .tb\:px-4 {
@@ -8252,11 +8266,6 @@ select {
     padding-right: 2rem;
   }
 
-  .tb\:px-3 {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-  }
-
   .tb\:pb-14 {
     padding-bottom: 3.5rem;
   }
@@ -8269,6 +8278,10 @@ select {
     padding-right: 0px;
   }
 
+  .tb\:pt-10 {
+    padding-top: 2.5rem;
+  }
+
   .tb\:pt-8 {
     padding-top: 2rem;
   }
@@ -8277,14 +8290,6 @@ select {
     padding-top: 2.875rem;
   }
 
-  .tb\:pt-14 {
-    padding-top: 3.5rem;
-  }
-
-  .tb\:pt-10 {
-    padding-top: 2.5rem;
-  }
-
   .tb\:text-left {
     text-align: left;
   }
@@ -8517,6 +8522,13 @@ select {
     font-weight: 700;
   }
 
+  .tb\:text-hds-t-h7 {
+    font-size: 0.75rem;
+    line-height: 1.25rem;
+    letter-spacing: 0.08em;
+    font-weight: 700;
+  }
+
   .tb\:text-hds-t-quote {
     font-size: 1.125rem;
     line-height: 1.75rem;
@@ -8537,13 +8549,6 @@ select {
     letter-spacing: -0.01em;
     font-weight: 400;
   }
-
-  .tb\:text-hds-t-h7 {
-    font-size: 0.75rem;
-    line-height: 1.25rem;
-    letter-spacing: 0.08em;
-    font-weight: 700;
-  }
 }
 
 @media (min-width: 640px) {
@@ -8696,6 +8701,10 @@ select {
     width: 100%;
   }
 
+  .tb-l\:w-\[520px\] {
+    width: 520px;
+  }
+
   .tb-l\:min-w-\[400px\] {
     min-width: 400px;
   }
@@ -8746,6 +8755,29 @@ select {
     align-self: center;
   }
 
+  .tb-l\:border-l {
+    border-left-width: 1px;
+  }
+
+  .tb-l\:border-r {
+    border-right-width: 1px;
+  }
+
+  .tb-l\:border-neutral-200 {
+    --tw-border-opacity: 1;
+    border-color: rgb(229 231 235 / var(--tw-border-opacity));
+  }
+
+  .tb-l\:border-l-neutral-200 {
+    --tw-border-opacity: 1;
+    border-left-color: rgb(229 231 235 / var(--tw-border-opacity));
+  }
+
+  .tb-l\:border-r-neutral-200 {
+    --tw-border-opacity: 1;
+    border-right-color: rgb(229 231 235 / var(--tw-border-opacity));
+  }
+
   .tb-l\:bg-gradient-to-r {
     background-image: linear-gradient(to right, var(--tw-gradient-stops));
   }
@@ -8763,6 +8795,22 @@ select {
     padding-left: 2rem;
   }
 
+  .tb-l\:pt-12 {
+    padding-top: 3rem;
+  }
+
+  .tb-l\:pb-9 {
+    padding-bottom: 2.25rem;
+  }
+
+  .tb-l\:pl-32 {
+    padding-left: 8rem;
+  }
+
+  .tb-l\:pb-12 {
+    padding-bottom: 3rem;
+  }
+
   .tb-l\:text-left {
     text-align: left;
   }
@@ -8825,14 +8873,6 @@ select {
     margin-left: 0px;
   }
 
-  .db\:mt-16 {
-    margin-top: 4rem;
-  }
-
-  .db\:mt-24 {
-    margin-top: 6rem;
-  }
-
   .db\:inline {
     display: inline;
   }
@@ -8841,10 +8881,6 @@ select {
     display: flex;
   }
 
-  .db\:max-h-\[374px\] {
-    max-height: 374px;
-  }
-
   .db\:w-1\/2 {
     width: 50%;
   }
@@ -8871,6 +8907,10 @@ select {
     width: 100%;
   }
 
+  .db\:w-\[520px\] {
+    width: 520px;
+  }
+
   .db\:min-w-\[625px\] {
     min-width: 625px;
   }
@@ -8891,10 +8931,6 @@ select {
     max-width: 625px;
   }
 
-  .db\:max-w-\[353px\] {
-    max-width: 353px;
-  }
-
   .db\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
@@ -8903,14 +8939,6 @@ select {
     justify-content: flex-start;
   }
 
-  .db\:justify-center {
-    justify-content: center;
-  }
-
-  .db\:justify-between {
-    justify-content: space-between;
-  }
-
   .db\:gap-0 {
     gap: 0px;
   }
@@ -8989,8 +9017,8 @@ select {
     padding-top: 8rem;
   }
 
-  .db\:pt-24 {
-    padding-top: 6rem;
+  .db\:pt-0 {
+    padding-top: 0px;
   }
 
   .db\:text-left {
@@ -9221,6 +9249,13 @@ select {
     font-weight: 700;
   }
 
+  .db\:text-hds-d-h7 {
+    font-size: 0.75;
+    line-height: 1.25;
+    letter-spacing: 0.08em;
+    font-weight: 700;
+  }
+
   .db\:text-hds-d-quote {
     font-size: 1.5rem;
     line-height: 2.25rem;
@@ -9241,13 +9276,6 @@ select {
     letter-spacing: -0.01em;
     font-weight: 400;
   }
-
-  .db\:text-hds-d-h7 {
-    font-size: 0.75;
-    line-height: 1.25;
-    letter-spacing: 0.08em;
-    font-weight: 700;
-  }
 }
 
 @media (min-width: 1880px) {

package/tailwind.config.js

@@ -1,7 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./src/**/*.{html,js,jsx}"],
-  darkMode: 'class',
   theme: {
     fontFamily: {
       sans: [