Merge pull request #1141 from ZopaPublic/errorMsgIcon2

Error msg icon2
ZopaPublic · Aug 19, 2024 · dcecad7 · dcecad7
2 parents b24fbe0 + 5760966
commit dcecad7
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 10 deletions.
diff --git a/.changeset/long-beds-compete.md b/.changeset/long-beds-compete.md
@@ -0,0 +1,5 @@
+---
+'@zopauk/react-components': patch
+---
+
+New icon for ErrorMessage
diff --git a/src/components/atoms/ErrorMessage/ErrorMessage.tsx b/src/components/atoms/ErrorMessage/ErrorMessage.tsx
@@ -6,9 +6,7 @@ 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';
+import CircleExclamation2Icon from '../../styles/icons/circleExclamation2';
 
 const StyledErrorMessage = styled(Text).attrs({
   role: 'alert',
@@ -52,9 +50,7 @@ const ErrorMessage = ({ children, className, id, ...rest }: ErrorMessageProps) =
 
   if (theme.errorMessage.iconVariant) {
     const iconMap = {
-      'circle-exclamation': CircleExclamationIcon,
-      'triangle-exclamation': TriangleExclamationIcon,
-      'info-circle': InfoCircleIcon,
+      'circle-exclamation2': CircleExclamation2Icon,
     };
 
     const iconVariant = theme.errorMessage.iconVariant;

diff --git a/src/components/organisms/Form/FormSection/__snapshots__/FormSection.test.tsx.snap b/src/components/organisms/Form/FormSection/__snapshots__/FormSection.test.tsx.snap
@@ -67,7 +67,7 @@ Object {
       class="py-6"
     >
       <h5
-        class="sc-gipzik jmoHBR mb-2"
+        class="sc-iRbamj gTdRfb mb-2"
       >
         Form Section
       </h5>

diff --git a/src/components/styles/Theme/ThemeProvider.tsx b/src/components/styles/Theme/ThemeProvider.tsx
@@ -16,7 +16,7 @@ import { Severity } from '../../atoms/Alert/Alert';
 import { spacing } from '../../../constants';
 import { ProductTemplateV2 } from '../../templates/ProductTemplate/ProductTemplate/ProductTemplateV2';
 
-export type CustomIconVariant = 'circle-exclamation' | 'info-circle' | 'triangle-exclamation';
+export type CustomIconVariant = 'circle-exclamation' | 'circle-exclamation2' | 'info-circle' | 'triangle-exclamation';
 
 export interface ButtonTheme {
   text: string;
@@ -66,7 +66,7 @@ export type AlertTheme = Record<
     text: string;
     component?: () => ReactElement;
     faVariant?: { prefix: IconPrefix; iconName: IconName };
-    customVariant?: { iconName: CustomIconVariant; color: string };
+    customVariant?: { iconName: Exclude<CustomIconVariant, 'circle-exclamation2'>; color: string };
   }
 >;
 
@@ -86,7 +86,7 @@ export interface ErrorMessageTheme {
   backgroundColor: string;
   padding: string;
   icon: boolean;
-  iconVariant?: { name: CustomIconVariant; color: string };
+  iconVariant?: { name: Extract<CustomIconVariant, 'circle-exclamation2'>; color: string };
 }
 
 export interface FooterTheme {

diff --git a/src/components/styles/icons/circleExclamation2.tsx b/src/components/styles/icons/circleExclamation2.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+const CircleExclamationIconWrapper = styled.div`
+  width: 22.5px;
+  height: 22.5px;
+`;
+
+const CircleExclamation2Icon = ({ color }: { color: string }) => (
+  <CircleExclamationIconWrapper>
+    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none">
+      <g fill={color} clipPath="url(#a)">
+        <path d="M8 1.28c3.72 0 6.72 3.04 6.72 6.72 0 3.68-3 6.72-6.72 6.72-3.72 0-6.72-3-6.72-6.72 0-3.72 3-6.72 6.72-6.72ZM8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8Z" />
+        <path d="M8.8 3.92H7.12V9.4H8.8V3.92ZM7.96 10.36a.82.82 0 0 0-.84.84c0 .48.36.84.84.84s.84-.36.84-.84a.82.82 0 0 0-.84-.84Z" />
+      </g>
+      <defs>
+        <clipPath id="a">
+          <path fill="#fff" d="M0 0h16v16H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  </CircleExclamationIconWrapper>
+);
+export default CircleExclamation2Icon;