hds-web 1.21.6 → 1.21.7

package/package.json

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

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

@@ -24,8 +24,8 @@ export default function StoryCardXL(props) {
                     }
                     {props.title &&
                         (
-                            <div className="flex pt-6 flex-col gap-6 tb-l:max-w-[547px]">
-                                <Typography textStyle='h3' className='text-neutral-1000 tb-l:block hidden'>{props.title}</Typography>
+                            <div className="flex pt-6 flex-col gap-6 tb-l:max-w-[547px] ">
+                            <Typography textStyle='h3' className='text-neutral-1000 tb-l:block hidden max-h-[144px] overflow-clip'>{props.title}</Typography>
                                 {props.heroList &&
                                     (
                                         <div>
@@ -63,7 +63,7 @@ export default function StoryCardXL(props) {
                     props.heroImageAlt) ?
                     (
                         <>
-                            <div className="flex mt-4 tb:mt-0 justify-start tb-l:justify-end tb-l:pt-20 tb:max-w-[600px]">
+                            <div className="flex mt-4 tb:mt-0 justify-center tb:justify-start tb-l:justify-end tb-l:pt-20 tb:max-w-[600px]">
                                 <img
                                     src={props.heroImageURL}
                                     alt={props.heroImageAlt}
@@ -92,8 +92,8 @@ export default function StoryCardXL(props) {
                 <div className="tb-l:hidden pb-6">
                     {props.brandImageURL &&
                         props.brandImageAlt && (
-                            <div>
-                                <img src={props.brandImageURL} alt={props.brandImageAlt} className="pb-6 " />
+                        <div className="pb-4 ">
+                            <img src={props.brandImageURL} alt={props.brandImageAlt} className="max-h-[28px]" />
                             </div>
                         )
                     }

package/src/HDS/components/Carousels/customerStories.js

@@ -160,10 +160,10 @@ export default function Carousels ({ components, variants }) {
                     </motion.button>
                 </div>
             </div>
-            <div className='db-s:hidden flex flex-row overflow-scroll pb-10 pt-4 tb:pb-16 tb:pt-10 px-4 scrollbar-hide gap-2 mb-m:gap-4 tb-m:gap-4'>
+            <div className='tb-l:hidden flex overflow-x-scroll pb-10 pt-4 tb:pb-16 tb:pt-10 px-4 gap-2 mb-m:gap-4 tb-m:gap-4'>
                 {components.map((component, index) => (
                     <React.Fragment key={index}>
-                        <div className='tb-l:min-w-[700px] tb:min-w-[500px] mb-s:min-w-[350px]'>
+                        <div className='tb-l:min-w-[700px] tb:min-w-[500px] mb-s:min-w-[350px] min-w-[300px]'>
                             {component}
                         </div>
                     </React.Fragment>

package/src/styles/tailwind.css

@@ -1696,6 +1696,20 @@ select{
   height: auto;
 }
 
+.h-\[518px\]{
+  height: 518px;
+}
+
+.h-\[200px\]{
+  height: 200px;
+}
+
+.h-fit{
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
 .max-h-\[181px\]{
   max-height: 181px;
 }
@@ -1736,6 +1750,18 @@ select{
   max-height: 40px;
 }
 
+.max-h-\[518px\]{
+  max-height: 518px;
+}
+
+.max-h-\[144px\]{
+  max-height: 144px;
+}
+
+.max-h-\[200px\]{
+  max-height: 200px;
+}
+
 .min-h-\[12px\]{
   min-height: 12px;
 }
@@ -1768,6 +1794,10 @@ select{
   min-height: 64px;
 }
 
+.min-h-\[144px\]{
+  min-height: 144px;
+}
+
 .\!w-full{
   width: 100% !important;
 }
@@ -2000,6 +2030,18 @@ select{
   min-width: 100%;
 }
 
+.min-w-\[350px\]{
+  min-width: 350px;
+}
+
+.min-w-\[240px\]{
+  min-width: 240px;
+}
+
+.min-w-\[300px\]{
+  min-width: 300px;
+}
+
 .max-w-2xl{
   max-width: 42rem;
 }
@@ -10660,6 +10702,10 @@ select{
     max-height: 25.25rem;
   }
 
+  .tb\:max-h-\[144px\]{
+    max-height: 144px;
+  }
+
   .tb\:min-h-\[245px\]{
     min-height: 245px;
   }