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

package/build/index.esm.js

@@ -6344,6 +6344,15 @@ const Container$I = styled.div`
   }
 `;
 
+const ImageColumn = styled.div`
+  width: 100%;
+
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
+    width: 50%;
+    min-height: 300px;
+  }
+`;
+
 const ImageLink = styled.a`
   background-image: url('${(props) => props.$img}');
   background-size: cover;
@@ -6353,7 +6362,6 @@ const ImageLink = styled.a`
   display: block;
 
   @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
-    width: 50%;
     min-height: 300px;
   }
 `;
@@ -6397,17 +6405,18 @@ const CTA = styled.a`
 var PromoBanner = function (_a) {
     var title = _a.title, image1440x810 = _a.image1440x810, image144x81 = _a.image144x81, ctaText = _a.ctaText, ctaUrl = _a.ctaUrl, children = _a.children;
     return (React.createElement(Container$I, null,
-        React.createElement(LazyImage, { src: image1440x810, placeholder: image144x81, visibilitySensorProps: {
-                partialVisibility: true,
-            } }, function (src) { return React.createElement(ImageLink, { "$img": src, href: ctaUrl, title: ctaText }); }),
+        React.createElement(ImageColumn, null,
+            React.createElement(LazyImage, { src: image1440x810, placeholder: image144x81, visibilitySensorProps: {
+                    partialVisibility: true,
+                } }, function (src) { return React.createElement(ImageLink, { "$img": src, href: ctaUrl, title: ctaText }); })),
         React.createElement(Wrapper$4, null,
             React.createElement(Heading, { text: title }),
             React.createElement(Content$4, null, children),
             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
@@ -6484,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;
@@ -6492,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;
   }
 `;
 
@@ -6505,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);
   }
 `;
 
@@ -9008,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};
@@ -9110,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;
@@ -9121,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;
   }
 `;
 
@@ -9411,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};
 `;
@@ -9490,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;
@@ -9502,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;
   }
 `;
 
@@ -9535,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
@@ -14863,7 +14889,7 @@ var Event = function (_a) {
         id: 'org-1',
         name: 'Wicksteed Park',
         description: 'A family theme park and nature reserve in Kettering',
-        logo: 'https://via.placeholder.com/200x100?text=Wicksteed+Park',
+        logo: 'https://placehold.co/200x100?text=Wicksteed+Park',
         url: 'https://www.wicksteedpark.co.uk',
     },
     location: {
@@ -14971,7 +14997,7 @@ var Event = function (_a) {
         id: 'org-2',
         name: 'Northamptonshire Family Support',
         description: 'Supporting families across Northamptonshire',
-        logo: 'https://via.placeholder.com/200x100?text=Family+Support',
+        logo: 'https://placehold.co/200x100?text=Family+Support',
         url: 'https://www.northantsfamilysupport.org.uk',
     },
     location: {