hds-web 1.19.3 → 1.19.4

package/package.json

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

package/src/HDS/components/Cards/Announcement/announcementMd.js

@@ -17,6 +17,7 @@ export default function AnnouncementMd(props) {
   const bgClass = props.bgColorClass ? HDSColor(props.bgColorClass) : 'bg-neutral-0';
   const linkTextClass = props.linkTextColorClass ? HDSColor(props.linkTextColorClass) : 'text-neutral-600';
   const tagClass = props.tagColor ? props.tagColor : 'purple';
+  const iconBgClass = props.iconBgColor ? HDSColor(props.iconBgColor) : 'bg-blue-200'
   if (isBannerActive) {
     return (
       <div className="py-6">
@@ -24,8 +25,15 @@ export default function AnnouncementMd(props) {
           <div className="block items-center tb:flex tb:justify-center">
             {
               props.brandImg && (
-                <div className="pl-3 tb:pl-14">
-                  <img className="max-h-[34px]" src={props.brandImg} alt={props.brandImgAlt} />
+                <div className="pl-3 tb:pl-14 tb:pr-2">
+                  <img className="max-h-[32px]" src={props.brandImg} alt={props.brandImgAlt} />
+                </div>
+              )
+            }
+            {
+              props.iconBgColor && (
+                <div className={`${iconBgClass} ml-3 tb:ml-14 tb:mr-2 w-8 h-8 min-w-[32px] rounded-full flex items-center justify-center`}>
+                  <Icon height={'block w-5 h-5 stroke-[2px] transition ease-in-out'} variant={props.iconVariant} strokeClass='stroke-neutral-1000' />
                 </div>
               )
             }

package/src/HDS/components/Cards/Feedback/feedback.js

@@ -21,21 +21,21 @@ export default function FeedbackCard(props) {
           avatarVariant="circle"
           avatarType="secondary"
         />
-        <div className={((props.dividerClass) ? "py-8" : "py-8")}>
-          <Typography textStyle='quote' className='text-neutral-1000'>{props.description}</Typography>
+        <div className={((props.dividerClass) ? "py-8" : "py-6")}>
+          <Typography textStyle='sub2' className='text-neutral-600'>{props.description}</Typography>
         </div>
       </div>
       <div className=" self-end">
         {
           props.dividerClass && (
-            <div className={`${HDSColor(props.dividerClass)} mb-2 tb:mb-8 `}></div>
+            <div className={`${HDSColor(props.dividerClass)} mb-2`}></div>
           )
         }
-        <div className={"tb:flex pt-1 tb:pt-0 items-start" + ((props.dividerClass) ? " pt-6" : "mt-0")}>
-          <div className={"border border-neutral-150 p-2 flex items-center justify-center rounded-[0.7rem] " +  logoBg + ((props.dividerClass) ? " w-[80px] h-[60px] min-w-[80px]" : " w-[80px] h-[60px] ")}>
+        <div className={"mb-s:flex items-start" + ((props.dividerClass) ? " pt-6" : "mt-0")}>
+          <div className={"border border-neutral-150 p-2 flex items-center justify-center rounded-2xl " +  logoBg + ((props.dividerClass) ? " w-[72px] h-[56px] min-w-[72px]" : " w-[112px] h-[90px] min-w-[112px] ")}>
             <img className="max-h-[20px]" src={props.brandImgUrl} alt={props.brandImgAlt}/>
           </div>
-          <div className={"pt-4 tb:pt-0 " + ((props.dividerClass) ? "tb:pl-6" : "tb:pl-8")}>
+          <div className={"pt-4 mb-s:pt-0 " + ((props.dividerClass) ? "mb-s:pl-6" : "mb-s:pl-8")}>
             <Typography textStyle={((props.dividerClass) ? "body2" : "body1")} className='text-neutral-600 pb-1'>{props.blurb}</Typography>
             <div className="flex">
               <HDSButton

package/src/HDS/foundation/Typography/Typography.js

@@ -43,7 +43,7 @@ export default function Typography(props) {
         'body3c-medium': 'text-hds-m-body3c-medium tb:text-hds-t-body3c-medium db:text-hds-d-body3c-medium',
         'body3c-semi-bold': 'text-hds-m-body3c-semi-bold tb:text-hds-t-body3c-semi-bold db:text-hds-d-body3c-semi-bold',
         'body3c-bold': 'text-hds-m-body3c-bold tb:text-hds-t-body3c-bold db:text-hds-d-body3c-bold',
-      'quote': 'font-petrona italic text-hds-m-quote tb:text-hds-t-quote db:text-hds-d-quote',
+        'quote': 'font-petrona font-normal italic text-hds-m-quote tb:text-hds-t-quote db:text-hds-d-quote',
         'code1': 'text-hds-m-code1 tb:text-hds-t-code1 db:text-hds-d-code1',
         'code2': 'text-hds-m-code2 tb:text-hds-t-code2 db:text-hds-d-code2',
       }

package/src/styles/tailwind.css

@@ -1459,10 +1459,6 @@ select{
   margin-top: 70px;
 }
 
-.mb-8{
-  margin-bottom: 2rem;
-}
-
 .line-clamp-3{
   overflow: hidden;
   display: -webkit-box;
@@ -1622,6 +1618,10 @@ select{
   height: 436px;
 }
 
+.h-\[56px\]{
+  height: 56px;
+}
+
 .h-\[600px\]{
   height: 600px;
 }
@@ -1634,6 +1634,10 @@ select{
   height: 80px;
 }
 
+.h-\[90px\]{
+  height: 90px;
+}
+
 .h-\[calc\(100\%-16px\)\]{
   height: calc(100% - 16px);
 }
@@ -1682,6 +1686,10 @@ select{
   max-height: 100vh;
 }
 
+.max-h-\[32px\]{
+  max-height: 32px;
+}
+
 .min-h-\[12px\]{
   min-height: 12px;
 }
@@ -1794,6 +1802,10 @@ select{
   width: 103px;
 }
 
+.w-\[112px\]{
+  width: 112px;
+}
+
 .w-\[147px\]{
   width: 147px;
 }
@@ -1842,12 +1854,12 @@ select{
   width: 709px;
 }
 
-.w-\[80\%\]{
-  width: 80%;
+.w-\[72px\]{
+  width: 72px;
 }
 
-.w-\[80px\]{
-  width: 80px;
+.w-\[80\%\]{
+  width: 80%;
 }
 
 .w-\[90\%\]{
@@ -1880,6 +1892,10 @@ select{
   min-width: 11.5rem;
 }
 
+.min-w-\[112px\]{
+  min-width: 112px;
+}
+
 .min-w-\[12px\]{
   min-width: 12px;
 }
@@ -1920,8 +1936,8 @@ select{
   min-width: 64px;
 }
 
-.min-w-\[80px\]{
-  min-width: 80px;
+.min-w-\[72px\]{
+  min-width: 72px;
 }
 
 .min-w-fit{
@@ -2602,10 +2618,6 @@ select{
   border-radius: 1.5rem;
 }
 
-.rounded-\[0\.7rem\]{
-  border-radius: 0.7rem;
-}
-
 .rounded-\[32px\]{
   border-radius: 32px;
 }
@@ -6456,10 +6468,6 @@ select{
   padding-top: 0px;
 }
 
-.pt-1{
-  padding-top: 0.25rem;
-}
-
 .pt-10{
   padding-top: 2.5rem;
 }
@@ -6784,9 +6792,9 @@ select{
 }
 
 .text-hds-m-quote{
-  font-size: 1.75rem;
-  line-height: 1.5;
-  letter-spacing: -0.016em;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  letter-spacing: -0.01em;
   font-weight: 400;
 }
 
@@ -10216,6 +10224,18 @@ select{
   .mb-s\:rounded-tr-none{
     border-top-right-radius: 0px;
   }
+
+  .mb-s\:pl-6{
+    padding-left: 1.5rem;
+  }
+
+  .mb-s\:pl-8{
+    padding-left: 2rem;
+  }
+
+  .mb-s\:pt-0{
+    padding-top: 0px;
+  }
 }
 
 @media (min-width: 400px){
@@ -10340,8 +10360,8 @@ select{
     margin-top: -4px;
   }
 
-  .tb\:mb-8{
-    margin-bottom: 2rem;
+  .tb\:mr-2{
+    margin-right: 0.5rem;
   }
 
   .tb\:block{
@@ -10684,14 +10704,6 @@ select{
     padding-left: 3.5rem;
   }
 
-  .tb\:pl-6{
-    padding-left: 1.5rem;
-  }
-
-  .tb\:pl-8{
-    padding-left: 2rem;
-  }
-
   .tb\:pr-0{
     padding-right: 0px;
   }
@@ -10728,6 +10740,10 @@ select{
     padding-top: 2.875rem;
   }
 
+  .tb\:pr-2{
+    padding-right: 0.5rem;
+  }
+
   .tb\:text-left{
     text-align: left;
   }
@@ -10968,9 +10984,9 @@ select{
   }
 
   .tb\:text-hds-t-quote{
-    font-size: 1.75rem;
-    line-height: 1.4;
-    letter-spacing: -0.016em;
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+    letter-spacing: -0.01em;
     font-weight: 400;
   }
 
@@ -12029,9 +12045,9 @@ select{
   }
 
   .db\:text-hds-d-quote{
-    font-size: 2rem;
-    line-height: 1.4;
-    letter-spacing: -0.016em;
+    font-size: 1.5rem;
+    line-height: 2.25rem;
+    letter-spacing: -0.01em;
     font-weight: 400;
   }
 

package/tailwind.config.js

@@ -155,7 +155,6 @@ module.exports = {
     },
     letterSpacing: {
       tightest: '-.02em',
-      tighter2: '-0.016em',
       tighter: '-.015em',
       tight: '-.01em',
       normal: '0',
@@ -794,21 +793,21 @@ module.exports = {
         // add more for more breakpoints
 
         // quote-style
-        'hds-m-quote': ['1.75rem', {
-          lineHeight: '1.5',
-          letterSpacing: '-0.016em',
+        'hds-m-quote': ['1.125rem', {
+          lineHeight: '1.75rem',
+          letterSpacing: '-0.01em',
           fontWeight: '400',
           fontStyle: 'italic',
         }],
-        'hds-t-quote': ['1.75rem', {
-          lineHeight: '1.4',
-          letterSpacing: '-0.016em',
+        'hds-t-quote': ['1.125rem', {
+          lineHeight: '1.75rem',
+          letterSpacing: '-0.01em',
           fontWeight: '400',
           fontStyle: 'italic',
         }],
-        'hds-d-quote': ['2rem', {
-          lineHeight: '1.4',
-          letterSpacing: '-0.016em',
+        'hds-d-quote': ['1.5rem', {
+          lineHeight: '2.25rem',
+          letterSpacing: '-0.01em',
           fontWeight: '400',
           fontStyle: 'italic',
         }],