@nnc-digital/nnc-design-system 1.0.0-beta21 → 1.0.0-beta22

package/build/index.esm.js

@@ -6415,8 +6415,8 @@ var PromoBanner = function (_a) {
             React.createElement(CTA, { href: ctaUrl }, ctaText))));
 };
 
-const imageHeightMobile$1 = 150;
-const imageHeightDesktop$1 = 200;
+const imageHeightMobile$2 = 150;
+const imageHeightDesktop$2 = 200;
 
 /**
  * Container for the 1-3 promo tiles
@@ -6493,7 +6493,7 @@ const PromoTile = styled.a`
 const PromoImage = styled.span`
   display: block;
   width: 100%;
-  height: ${imageHeightMobile$1}px;
+  height: ${imageHeightMobile$2}px;
   overflow: hidden;
   background-image: url('${(props) => props.$background}');
   background-size: cover;
@@ -6501,11 +6501,11 @@ const PromoImage = styled.span`
   justify-self: center;
 
   @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.s}) {
-    min-height: ${imageHeightDesktop$1}px;
+    min-height: ${imageHeightDesktop$2}px;
   }
   @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
     flex: none;
-    height: ${imageHeightDesktop$1}px;
+    height: ${imageHeightDesktop$2}px;
   }
 `;
 
@@ -6514,11 +6514,11 @@ const PromoImage = styled.span`
  */
 const PromoText = styled.div`
   padding: 15px;
-  height: calc(100% - ${imageHeightMobile$1 + 30}px);
+  height: calc(100% - ${imageHeightMobile$2 + 30}px);
   ${(props) => props.theme.fontStyles};
 
   @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.s}) {
-    height: calc(100% - ${imageHeightDesktop$1 + 30}px);
+    height: calc(100% - ${imageHeightDesktop$2 + 30}px);
   }
 `;
 
@@ -9017,8 +9017,8 @@ var NewsArticleDate = function (_a) {
         React.createElement(DisplayDate, { text: text, format: format })));
 };
 
-const imageHeightMobile = 150;
-const imageHeightDesktop = 200;
+const imageHeightMobile$1 = 150;
+const imageHeightDesktop$1 = 200;
 
 const Container$r = styled.div`
   ${(props) => props.theme.fontStyles};
@@ -9119,7 +9119,7 @@ const ArticleContent$1 = styled.div`
 const ImageContainer$3 = styled.span`
   display: block;
   width: 100%;
-  height: ${imageHeightMobile}px;
+  height: ${imageHeightMobile$1}px;
   overflow: hidden;
   background-image: url('${(props) => props.$background}');
   background-size: contain;
@@ -9130,11 +9130,11 @@ const ImageContainer$3 = styled.span`
   @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.s}) {
     flex: 0 0 40%;
     height: 100%;
-    min-height: ${imageHeightMobile}px;
+    min-height: ${imageHeightMobile$1}px;
   }
   @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
     flex: none;
-    height: ${imageHeightDesktop}px;
+    height: ${imageHeightDesktop$1}px;
   }
 `;
 
@@ -9420,6 +9420,9 @@ var NewsArticleImage = function (_a) {
             imageCaption && React.createElement(Small, { itemProp: "copyrightHolder" }, imageCaption))); })));
 };
 
+const imageHeightMobile = 150;
+const imageHeightDesktop = 200;
+
 const Container$o = styled.div`
   ${(props) => props.theme.fontStyles};
 `;
@@ -9499,10 +9502,28 @@ const ArticleContent = styled.div`
   }
 `;
 
+const ImageWrapper = styled.div`
+  width: 100%;
+
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.s}) {
+    width: 180px;
+    flex: 0 0 180px;
+  }
+
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
+    width: 50%;
+    flex: none;
+  }
+
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
+    width: 33%;
+  }
+`;
+
 const ImageContainer$1 = styled.span`
   display: block;
   width: 100%;
-  height: 150px;
+  height: ${imageHeightMobile}px;
   overflow: hidden;
   background-image: url('${(props) => props.$background}');
   background-size: contain;
@@ -9511,15 +9532,10 @@ const ImageContainer$1 = styled.span`
   justify-self: center;
 
   @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.s}) {
-    order: 1;
-    height: auto;
-    min-width: 180px;
+    height: ${imageHeightMobile}px;
   }
   @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
-    width: 50%;
-  }
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
-    width: 33%;
+    height: ${imageHeightDesktop}px;
   }
 `;
 
@@ -9544,9 +9560,10 @@ var NewsArticleList = function (_a) {
         return (React.createElement(Container$o, { "data-testid": "NewsArticleList" },
             React.createElement(Row$1, { isList: true }, results.map(function (article) { return (React.createElement(Column, { isList: true, small: "full", medium: "full", large: "full", key: article.id },
                 React.createElement(ArticleContainer, { href: article.url, title: article.title },
-                    article.image720x405 && (React.createElement(LazyImage, { src: article.image720x405, placeholder: article.image72x41, visibilitySensorProps: {
-                            partialVisibility: true,
-                        } }, function (src) { return (React.createElement(ImageContainer$1, { className: "news-article-list__image", "$background": src, role: "img", "aria-label": article.imageAltText ? article.imageAltText : 'News article' })); })),
+                    article.image720x405 && (React.createElement(ImageWrapper, null,
+                        React.createElement(LazyImage, { src: article.image720x405, placeholder: article.image72x41, visibilitySensorProps: {
+                                partialVisibility: true,
+                            } }, function (src) { return (React.createElement(ImageContainer$1, { className: "news-article-list__image", "$background": src, role: "img", "aria-label": article.imageAltText ? article.imageAltText : 'News article' })); }))),
                     React.createElement(ArticleContent, { "$withImage": article.image720x405 ? true : false },
                         React.createElement(Title$4, { className: "news-article-list__title" }, article.title),
                         article.excerpt.length > extractLength