hds-web 1.22.9 → 1.23.1

package/package.json

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

package/src/HDS/components/Cards/StoryCard/storysm.js

@@ -11,6 +11,8 @@ export default function StoryCard(props) {
         <>
             <a
                 href={props.linkUrl}
+                target={props.isExternalLink ? '_blank' : ""}
+                rel={props.isExternalLink ? 'noopener noreferrer' : ""}
                 className={`rounded-2xl hover:shadow-xl p-8 h-full flex flex-col justify-between group/sc border border-neutral-200 hover:border-opacity-0 min-h-[260px] group`}
             >
                 <>
@@ -85,11 +87,12 @@ export default function StoryCard(props) {
 
 StoryCard.defaultProps = {
     descTextColor: 'text-neutral-700',
+    isExternalLink:'false',
     iconTag: 'Customer Stories',
     titleTextColor: '',
     brandImageUrl: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1690909443/hasura-design-system/swiggy_m2hjxy.png',
     brandImageAlt: 'pipe',
-    linkUrl: '#',
+    linkUrl: '?path=/story/hasura-design-system--hasura-design-system&globals=backgrounds.value:!hex(3b5998)',
     iconVariant: 'videorecorder',
     iconStrokeColor: 'blue-500',
     iconArrowVariant: 'home03',

package/src/HDS/components/Cards/StoryCard/storyxl.js

@@ -8,7 +8,7 @@ export default function StoryCardXL(props) {
         <>
             <div className="flex flex-col-reverse px-6 py-10 tb-l:px-0 tb-l:py-0 tb-l:flex-row tb-l:gap-10 db:gap-32 tb-l:max-w-7xl min-h-[518px]">
 
-                <div className="flex flex-col tb-l:pl-20 tb-l:pt-20 tb-l:pb-14">
+                <div className="flex flex-col tb-l:pl-20 tb-l:pt-14 tb-l:pb-14">
                     {
                         props.tagline && (
                             <Typography textStyle='h6' className='text-blue-400 tb-l:block uppercase mb-2 hidden '>{props.tagline}</Typography>
@@ -24,7 +24,7 @@ export default function StoryCardXL(props) {
                     }
                     {props.title &&
                         (
-                            <div className="flex pt-6 flex-col gap-6 tb-l:max-w-[547px] ">
+                            <div className="flex flex-col gap-6 tb-l:max-w-[547px] ">
                                 <Typography textStyle='h3' className='text-neutral-1000 tb-l:block hidden min-h-[144px] overflow-clip'>{props.title}</Typography>
                                 {props.heroList &&
                                     (
@@ -51,7 +51,7 @@ export default function StoryCardXL(props) {
                             </div>
                         )}
                     {props.CTA &&
-                        <div className="mt-16 tb:mt-10 tb:flex">
+                        <div className="mt-10 tb:flex">
                             <a href={props.CTA['url']}>
                                 <HDSButton
                                     label={props.CTA['text']}
@@ -66,7 +66,7 @@ export default function StoryCardXL(props) {
                     props.heroImageAlt) ?
                     (
                         <>
-                            <div className="flex justify-center tb:justify-start tb-l:justify-end tb-l:pt-20 tb:max-w-[600px]">
+                            <div className="flex justify-center tb:justify-start tb-l:justify-end tb-l:pt-14 tb:max-w-[600px]">
                                 <img
                                     src={props.heroImageURL}
                                     alt={props.heroImageAlt}
@@ -129,16 +129,15 @@ StoryCardXL.defaultProps = {
     heroList: [
         {
             iconVariant: 'calendar',
-            title: '100 days from concept to production, 100 days from concept to production'
+            title: '100 days from concept to production'
         },
         {
             iconVariant: 'database03',
-            title: 'Vastly improved access to relevant data, 100 days from concept to production'
+            title: 'Vastly improved access to relevant data'
         },
         {
             iconVariant: 'settings01',
-            title: 'Simpler data and API management, 100 days from concept to production'
-        }
+            title: 'Simpler data and API management'}
     ]
     // video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1654760488/samples/sea-turtle.mp4'
 } 

package/src/styles/tailwind.css

@@ -1708,6 +1708,10 @@ select{
   height: 100vh;
 }
 
+.h-\[800px\]{
+  height: 800px;
+}
+
 .max-h-\[181px\]{
   max-height: 181px;
 }
@@ -1804,6 +1808,10 @@ select{
   min-height: 855px;
 }
 
+.min-h-\[200px\]{
+  min-height: 200px;
+}
+
 .\!w-full{
   width: 100% !important;
 }
@@ -6675,6 +6683,10 @@ select{
   padding-top: 81px;
 }
 
+.pt-1{
+  padding-top: 0.25rem;
+}
+
 .text-left{
   text-align: left;
 }
@@ -11994,6 +12006,10 @@ select{
     padding-top: 5rem;
   }
 
+  .tb-l\:pt-14{
+    padding-top: 3.5rem;
+  }
+
   .tb-l\:text-left{
     text-align: left;
   }