Merge pull request #1137 from ZopaPublic/errorMsgIcon

feat: allow different icon variants in ErrorMessage

.changeset/eighty-impalas-design.md

@@ -0,0 +1,5 @@
+---
+'@zopauk/react-components': patch
+---
+
+error message

CHANGELOG.md

@@ -1,5 +1,15 @@
 ## [5.49.0](https://github.com/zopaUK/react-components/compare/v5.48.3...v5.49.0) (2023-08-17)
 
+## 5.71.0
+
+### Minor Changes
+
+- f98b908: Allow ErrorMessage to specify an icon variant
+
+### Patch Changes
+
+- 14d097e: Cobranded navigation
+
 ## 5.70.1
 
 ### Patch Changes

package.json

@@ -2,7 +2,7 @@
   "name": "@zopauk/react-components",
   "sideEffects": false,
   "description": "Shared react styled components for all the Zopa projects.",
-  "version": "5.70.1",
+  "version": "5.71.0",
   "license": "MIT",
   "author": "Zopa Ltd <frontend-opensource@zopa.com> (https://zopa.com)",
   "main": "cjs/src/index.js",

src/components/atoms/ErrorMessage/ErrorMessage.tsx

@@ -6,6 +6,9 @@ import { typography } from '../../../constants/typography';
 import Text from '../Text/Text';
 import Icon from '../Icon/Icon';
 import { useThemeContext } from '../../styles/Theme';
+import TriangleExclamationIcon from '../../styles/icons/triangleExclamation';
+import CircleExclamationIcon from '../../styles/icons/circleExclamation';
+import InfoCircleIcon from '../../styles/icons/infoCircle';
 
 const StyledErrorMessage = styled(Text).attrs({
   role: 'alert',
@@ -44,11 +47,31 @@ type ErrorMessageProps = {
 
 const ErrorMessage = ({ children, className, id, ...rest }: ErrorMessageProps) => {
   const theme = useThemeContext();
+
+  let CustomIcon;
+
+  if (theme.errorMessage.iconVariant) {
+    const iconMap = {
+      'circle-exclamation': CircleExclamationIcon,
+      'triangle-exclamation': TriangleExclamationIcon,
+      'info-circle': InfoCircleIcon,
+    };
+
+    const iconVariant = theme.errorMessage.iconVariant;
+
+    const IconComponent = iconMap[iconVariant.name];
+    if (IconComponent) {
+      CustomIcon = <IconComponent color={iconVariant.color} />;
+    } else {
+      throw new Error(`Unknown custom icon name: ${iconVariant.name}`);
+    }
+  }
+
   return (
     <StyledErrorMessage className={className} {...rest} theme={theme} id={id}>
       {theme.errorMessage.icon ? (
         <IconWrapper>
-          <Icon color={colors.alert} className="pr-2" variant={faMinusCircle} />
+          {CustomIcon ? CustomIcon : <Icon color={colors.alert} className="pr-2" variant={faMinusCircle} />}
         </IconWrapper>
       ) : null}
       {children}

src/components/organisms/Form/FormSection/__snapshots__/FormSection.test.tsx.snap

@@ -67,7 +67,7 @@ Object {
       class="py-6"
     >
       <h5
-        class="sc-gPEVay BjryN mb-2"
+        class="sc-gipzik jmoHBR mb-2"
       >
         Form Section
       </h5>

src/components/styles/Theme/ThemeProvider.tsx

@@ -86,6 +86,7 @@ export interface ErrorMessageTheme {
   backgroundColor: string;
   padding: string;
   icon: boolean;
+  iconVariant?: { name: CustomIconVariant; color: string };
 }
 
 export interface FooterTheme {