feat(ErrorMessage): ✨ Add new option to toggle error color (#836)

digdir · Sep 27, 2023 · 7d16bd9 · 7d16bd9
1 parent e7d1bf2
commit 7d16bd9
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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,
       )}
     />