From d45a2ac250b77f200c2d9fc420eefabd6711e754 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Wed, 20 Sep 2023 08:37:57 +0200
Subject: [PATCH] feat(ErrorMessage): :sparkles: Add new option to toggle error
 color

Added option to toggle error color. Good to use when you have features such as character count feedback that switches to error when limit is excedded. Defaults to `true` so no breaking change
---
 .../Typography/ErrorMessage/ErrorMessage.module.css  |  3 +++
 .../Typography/ErrorMessage/ErrorMessage.stories.tsx |  1 +
 .../Typography/ErrorMessage/ErrorMessage.tsx         | 12 +++++++++++-
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.module.css b/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.module.css
index c3ae3051fb..831d41eb4e 100644
--- a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.module.css
+++ b/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.module.css
@@ -3,6 +3,9 @@
   --fdsc-bottom-spacing: var(--fds-spacing-5);
 
   margin: 0;
+}
+
+.errorMessage.error {
   color: var(--fds-semantic-text-danger-default);
 }
 
diff --git a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.stories.tsx b/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.stories.tsx
index 0ec2535eb7..957623b22a 100644
--- a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.stories.tsx
+++ b/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.stories.tsx
@@ -16,5 +16,6 @@ export const Preview: Story = {
     children: 'Dette er en beskrivende feilmelding.',
     spacing: false,
     size: 'medium',
+    error: 'true',
   },
 };
diff --git a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx b/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx
index ed54e68fb9..ed0d9fbefb 100644
--- a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx
+++ b/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx
@@ -11,6 +11,8 @@ export type ErrorMessageProps = {
   size?: 'xsmall' | 'small' | 'medium';
   /** Adds margin-bottom */
   spacing?: boolean;
+  /** Toggle error color */
+  error?: boolean;
 } & HTMLAttributes<HTMLParagraphElement>;
 
 /** Use `ErrorMessage` to display text as error message. */
@@ -19,7 +21,14 @@ export const ErrorMessage: OverridableComponent<
   HTMLParagraphElement
 > = forwardRef(
   (
-    { className, size = 'medium', spacing, as: Component = 'p', ...rest },
+    {
+      className,
+      size = 'medium',
+      spacing,
+      as: Component = 'p',
+      error = true,
+      ...rest
+    },
     ref,
   ) => (
     <Component
@@ -31,6 +40,7 @@ export const ErrorMessage: OverridableComponent<
         {
           [classes.spacing]: !!spacing,
         },
+        error && classes.error,
         className,
       )}
     />