@nnc-digital/nnc-design-system 1.0.0-alpha1 → 1.0.0-alpha10

package/build/index.js

@@ -7842,7 +7842,7 @@ const Container$11 = styled__default.default.div`
 
 var Row$1 = function (_a) {
     var _b = _a.hasBorder, hasBorder = _b === void 0 ? false : _b, _c = _a.isList, isList = _c === void 0 ? false : _c, _d = _a.hasWrap, hasWrap = _d === void 0 ? true : _d, children = _a.children;
-    return (React__default.default.createElement(Container$11, { "data-testid": "Row", hasBorder: hasBorder, hasWrap: hasWrap, as: isList ? 'ul' : 'div' }, children));
+    return (React__default.default.createElement(Container$11, { "data-testid": "Row", "$hasBorder": hasBorder, "$hasWrap": hasWrap, as: isList ? 'ul' : 'div' }, children));
 };
 
 const calculateWidth = (size) => {
@@ -23805,6 +23805,7 @@ const PromoTile = styled__default.default.a`
   display: block;
   width: 100%;
   height: 100%;
+  padding: 5px 10px;
   background: ${(props) =>
     props.theme.cardinal_name === 'north'
       ? props.theme.theme_vars.colours.white
@@ -24417,11 +24418,11 @@ const Container$E = styled__default.default.div`
   padding: ${(props) => props.theme.theme_vars.spacingSizes.medium} 0;
   background: ${(props) =>
     props.$alertType === 'alert'
-      ? props.theme.theme_vars.colours.negative
+      ? props.theme.theme_vars.colours.alert_background
       : props.$alertType === 'warning'
-      ? props.theme.theme_vars.colours.focus
+      ? props.theme.theme_vars.colours.warning_background
       : props.$alertType === 'positive'
-      ? props.theme.theme_vars.colours.positive
+      ? props.theme.theme_vars.colours.positive_background
       : props.$alertType === 'london_bridge'
       ? props.theme.theme_vars.colours.black
       : props.theme.theme_vars.colours.negative};
@@ -24429,7 +24430,7 @@ const Container$E = styled__default.default.div`
   button {
     line-height: 1.3;
     color: ${(props) =>
-      props.alertType === 'warning' || props.alertType === 'positive'
+      props.$alertType === 'warning' || props.$alertType === 'positive'
         ? props.theme.theme_vars.colours.black
         : props.theme.theme_vars.colours.white} !important;
   }
@@ -24437,7 +24438,7 @@ const Container$E = styled__default.default.div`
   a {
     ${(props) => props.theme.linkStyles}
     color: ${(props) =>
-      props.alertType === 'warning' || props.alertType === 'positive'
+      props.$alertType === 'warning' || props.$alertType === 'positive'
         ? props.theme.theme_vars.colours.black
         : props.theme.theme_vars.colours.white} !important;
 
@@ -24447,13 +24448,13 @@ const Container$E = styled__default.default.div`
     &:focus {
       ${(props) => props.theme.linkStylesFocus}
       color: ${(props) =>
-        props.alertType === 'warning' || props.alertType === 'positive'
+        props.$alertType === 'warning' || props.$alertType === 'positive'
           ? props.theme.theme_vars.colours.white
           : props.theme.theme_vars.colours.black} !important;
       background: ${(props) =>
-        props.alertType === 'warning' || props.alertType === 'positive'
+        props.$alertType === 'warning' || props.$alertType === 'positive'
           ? props.theme.theme_vars.colours.action
-          : props.theme.theme_vars.colours.focus} !important;
+          : props.theme.theme_vars.colours.warning_background} !important;
     }
     &:active {
       ${(props) => props.theme.linkStylesActive}
@@ -24462,7 +24463,7 @@ const Container$E = styled__default.default.div`
 
   svg {
     fill: ${(props) =>
-      props.alertType === 'warning' || props.alertType === 'positive'
+      props.$alertType === 'warning' || props.$alertType === 'positive'
         ? props.theme.theme_vars.colours.black
         : props.theme.theme_vars.colours.white} !important;
   }
@@ -24506,19 +24507,19 @@ const HideLink = styled__default.default.button`
     outline: none;
     border-radius: ${(props) => props.theme.theme_vars.border_radius};
     color: ${(props) =>
-      props.alertType === 'warning' || props.alertType === 'positive'
+      props.$alertType === 'warning' || props.$alertType === 'positive'
         ? props.theme.theme_vars.colours.white
         : props.theme.theme_vars.colours.black} !important;
     background: ${(props) =>
-      props.alertType === 'warning' || props.alertType === 'positive'
+      props.$alertType === 'warning' || props.$alertType === 'positive'
         ? props.theme.theme_vars.colours.action
-        : props.theme.theme_vars.colours.focus} !important;
+        : props.theme.theme_vars.colours.warning_background} !important;
     border-bottom: 3px solid ${(props) => props.theme.theme_vars.colours.black};
 
     svg {
       path {
         fill: ${(props) =>
-          props.alertType === 'warning' || props.alertType === 'positive'
+          props.$alertType === 'warning' || props.$alertType === 'positive'
             ? props.theme.theme_vars.colours.white
             : props.theme.theme_vars.colours.black} !important;
       }
@@ -27000,6 +27001,18 @@ const Container$l = styled__default.default.main`
     padding: 10px;
     text-align: left;
   }
+
+  td > a:only-child {
+    padding: 12px 20px;
+    display: inline-block;
+    min-height: 44px;
+    min-width: 44px;
+  }
+
+  td > a:not(:only-child) {
+    padding: 0;
+  }
+
   th {
     font-weight: bold;
   }
@@ -28286,7 +28299,6 @@ const QuicklinkList = styled__default.default.ul`
 const QuicklinkItem = styled__default.default.li`
   margin-bottom: 10px;
   padding: 0 !important;
-  padding-left: 25px;
   position: relative;
   left: 0;
 
@@ -28311,6 +28323,7 @@ const Quicklink = styled__default.default.a`
   ${(props) => props.theme.linkStyles}
   font-weight: 400 !important;
   text-decoration: none !important;
+  padding: 5px 10px;
 
   &:hover {
     ${(props) => props.theme.linkStylesHover}