@nnc-digital/nnc-design-system 1.0.0-beta11 → 1.0.0-beta13

package/build/index.mjs.js

@@ -1,5 +1,5 @@
 import React, { Component, cloneElement, useState, useContext, useEffect, useRef, useId, createContext } from 'react';
-import styled, { css, ThemeContext, ThemeProvider, createGlobalStyle } from 'styled-components';
+import styled, { css, ThemeContext, createGlobalStyle } from 'styled-components';
 import axios from 'axios';
 import require$$0 from 'tty';
 import require$$2 from 'path';
@@ -7724,8 +7724,21 @@ const PromotedLinks$1 = styled.div`
 `;
 
 const PromotedLink$1 = styled.a`
-  display: block;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   height: 100%;
+  text-align: center;
+
+  /* Memorial theme styling - horizontal layout like HeadingWithIconLink */
+  ${props => props.theme.is_memorial && `
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    text-align: left;
+    padding: 20px;
+  `}
   @media screen and (min-width: calc(${(props) => props.theme.theme_vars.breakpoints.l} + 60px)) {
     box-sizing: border-box;
   }
@@ -7748,6 +7761,48 @@ const PromotedLink$1 = styled.a`
 
   span {
     ${(props) => props.theme.linkStyles};
+    margin-top: 10px;
+
+    /* Memorial theme - larger text like Heading component */
+    ${props => props.theme.is_memorial && `
+      font-size: 24px;
+      font-size: 1.3rem;
+      line-height: 1.4;
+      margin-top: 0;
+      margin-left: 15px;
+
+      @media screen and (min-width: ${props.theme.theme_vars.breakpoints.m}) {
+        font-size: 36px;
+        font-size: 1.5rem;
+        line-height: 1.3;
+      }
+    `}
+  }
+
+  [data-testid="DynamicIcon"] {
+    margin-bottom: 10px;
+
+    .service-icon-hover {
+      display: none;
+    }
+
+    /* Memorial theme - no bottom margin, icon on left */
+    ${props => props.theme.is_memorial && `
+      margin-bottom: 0;
+      margin-right: 0;
+    `}
+  }
+
+  &:hover,
+  &:focus {
+    [data-testid="DynamicIcon"] {
+      .service-icon {
+        display: none;
+      }
+      .service-icon-hover {
+        display: block !important;
+      }
+    }
   }
 
   &:hover {
@@ -7903,6 +7958,7 @@ var PromotedLinks = function (_a) {
         return (React.createElement(PromotedLinks$1, { "data-testid": "PromotedLinks", "$oneCol": oneCol },
             React.createElement(Row$1, { isList: true, hasWrap: true }, promotedLinksArray.map(function (link, i) { return (React.createElement(Column, { isList: true, small: "full", medium: "one-half", large: "one-third", key: i },
                 React.createElement(PromotedLink$1, { "$oneCol": oneCol, href: link.url, title: link.title },
+                    link.iconKey && React.createElement(DynamicIcon, { icon: link.iconKey, level: 2 }),
                     React.createElement("span", null, link.title)))); }))));
     }
     else {
@@ -26583,76 +26639,20 @@ const Image$1 = styled.div`
   }
 `;
 
-styled.div`
-  background-color: ${(props) => props.theme.theme_vars.colours.grey};
-`;
-
-styled.div`
-  background-color: ${(props) => props.theme.theme_vars.colours.grey};
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  align-content: stretch;
-  flex-wrap: nowrap;
-  flex-direction: column-reverse;
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
-    flex-direction: row;
-  }
-`;
-
-styled.div`
-  padding: 30px 0px;
-  width: 100%;
-  box-sizing: border-box;
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
-    width: 60%;
-    padding: 10px 30px;
-  }
-`;
-
-styled.div`
-  transition: all 0.25s ease;
-  background-image: url('${(props) => props.image}');
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-color: blue;
-  width: 100%;
-  height: 300px;
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
-    height: 500px;
-  }
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
-    height: 700px;
-  }
-`;
-
-styled.div`
-  ${(props) => props.theme.fontStyles}
-  margin-right: 15px;
-  margin-left: 15px;
-
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
-    margin-right: 0px;
-    margin-left: 0px;
-  }
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.s}) {
-    margin-right: 0px;
-    margin-left: 0px;
-  }
-  @media screen and (min-width: calc(${(props) => props.theme.theme_vars.breakpoints.l} + 60px)) {
-  }
-`;
-
 const HiddenH1 = styled.h1`
-  visibility: hidden;
-  margin: 0;
+  position: absolute;
+  width: 1px;
+  height: 1px;
   padding: 0;
-  font-size: 0px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 `;
 
 var MemorialHero = function (_a) {
-    var src = _a.src, placeholder = _a.placeholder, alt = _a.alt, theme = _a.theme, children = _a.children, councilServices = _a.councilServices;
+    var src = _a.src, placeholder = _a.placeholder, alt = _a.alt, children = _a.children, councilServices = _a.councilServices; _a.searchSuggestions;
     var themeContext = useContext(ThemeContext);
     return (React.createElement(React.Fragment, null,
         React.createElement(Wrapper$2, { "aria-label": "Memorial Hero" },
@@ -26662,7 +26662,7 @@ var MemorialHero = function (_a) {
             React.createElement(Container$s, null,
                 React.createElement(Left, null,
                     children,
-                    React.createElement(ThemeProvider, { theme: theme }, councilServices)),
+                    councilServices),
                 React.createElement(Right, null,
                     React.createElement(LazyImage, { src: src, placeholder: placeholder, visibilitySensorProps: {
                             partialVisibility: true,