hds-web 1.16.8 → 1.17.0

package/package.json

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

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

@@ -54,7 +54,7 @@ export default function TalkCard2(props) {
                                 props.para && (
                                     <a href={props.readUrl}>
                                         <HDSButton
-                                            label='Read more'
+                                        label={props.videoUrl ? 'Watch video': 'Read more'}
                                             type='secondaryLink'
                                             leftIconVariant='none'
                                             rightIconVariant='none'

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

@@ -37,27 +37,26 @@ export default function TalkDetailCard(props) {
     }
   }, []);
   return (
-    <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 className="grid grid-cols-1 tb-m:grid-cols-2 gap-6 db:gap-28 tb-m:gap-16">
+      <div className="tb-m:sticky tb-m:self-start tb-m:top-36">
+        <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>
-
         {
           props.tag_line && (<Typography textStyle='h6' className='text-blue-600 uppercase pt-4 pb-2'>{props.tag_line}</Typography>)
         }
@@ -120,7 +119,7 @@ export default function TalkDetailCard(props) {
                     </div>
                   </>
                 ) : (
-                  <>
+                  <div className="p-5 md:pt-10 md:px-6 lg:px-9 rounded-3xl border border-neutral-200">
                     <Typography textStyle="h6" as="h6" className="text-neutral-800 uppercase flex items-center">
                       <Icon height="w-6 h-6 mr-3 stroke-neutral-800 stroke-[1.5px]" variant="ticket01" strokeColor="#1F2A37" />
                       {props.formTitle}
@@ -130,7 +129,7 @@ export default function TalkDetailCard(props) {
                       formId={props.paperformId}
                       styleClass="paper-form-wrapper"
                     />
-                  </>
+                  </div>
                 )
               }
             </div>

package/src/styles/tailwind.css

@@ -10513,6 +10513,17 @@ select{
   }
 }
 
+@media (min-width: 768px){
+  .md\:px-6{
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .md\:pt-10{
+    padding-top: 2.5rem;
+  }
+}
+
 @media (min-width: 800px){
   .tb-m\:sticky{
     position: -webkit-sticky;
@@ -10523,6 +10534,10 @@ select{
     top: -5rem;
   }
 
+  .tb-m\:top-36{
+    top: 9rem;
+  }
+
   .tb-m\:mr-0{
     margin-right: 0px;
   }
@@ -10547,6 +10562,10 @@ select{
     scroll-snap-align: start;
   }
 
+  .tb-m\:grid-cols-2{
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .tb-m\:flex-row{
     flex-direction: row;
   }
@@ -10555,6 +10574,14 @@ select{
     justify-content: flex-start;
   }
 
+  .tb-m\:gap-16{
+    gap: 4rem;
+  }
+
+  .tb-m\:self-start{
+    align-self: flex-start;
+  }
+
   .tb-m\:border-t-0{
     border-top-width: 0px;
   }
@@ -10841,6 +10868,11 @@ select{
     padding-right: 2rem;
   }
 
+  .lg\:px-9{
+    padding-left: 2.25rem;
+    padding-right: 2.25rem;
+  }
+
   .db-s\:mb-0{
     margin-bottom: 0px;
   }