From fdf6c9c8585a0daf3274150c75e49a490f81fc46 Mon Sep 17 00:00:00 2001
From: Kundan Pawar <kundan.pawar@accenture.com>
Date: Mon, 3 Apr 2023 10:41:23 +0200
Subject: [PATCH 1/2] feat: initial form hint component css will be added from
 input text coponent pr

---
 .../src/components/form-hint/index.ts          | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 packages/ui-library/src/components/form-hint/index.ts

diff --git a/packages/ui-library/src/components/form-hint/index.ts b/packages/ui-library/src/components/form-hint/index.ts
new file mode 100644
index 000000000..1163c34f7
--- /dev/null
+++ b/packages/ui-library/src/components/form-hint/index.ts
@@ -0,0 +1,18 @@
+import { html } from 'lit';
+import { IconType } from '@boiler/icons';
+
+type FormHintType = {
+  hintText: string;
+  iconName?: IconType;
+  errorText?: string;
+  hasError?: string;
+};
+
+export const BlrFormHint = ({ hintText, iconName, errorText, hasError }: FormHintType) => {
+  return html`
+    <span class="blr-hint-error ${hasError ? 'blr-error' : 'blr-hint'}">
+      <blr-icon name="${iconName}"></blr-icon>
+      <span>${hasError ? errorText : hintText}</span>
+    </span>
+  `;
+};

From f0d5936ad8375655f4a04f66de1441832cf6e9b6 Mon Sep 17 00:00:00 2001
From: Kundan <63604244+kundan0887@users.noreply.github.com>
Date: Mon, 3 Apr 2023 12:49:23 +0200
Subject: [PATCH 2/2] Update
 packages/ui-library/src/components/form-hint/index.ts

Update according to Ole suggestion

Co-authored-by: Oliver <3428288+orivaa@users.noreply.github.com>
---
 .../src/components/form-hint/index.ts         | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/ui-library/src/components/form-hint/index.ts b/packages/ui-library/src/components/form-hint/index.ts
index 1163c34f7..4b2d2e702 100644
--- a/packages/ui-library/src/components/form-hint/index.ts
+++ b/packages/ui-library/src/components/form-hint/index.ts
@@ -1,18 +1,22 @@
 import { html } from 'lit';
-import { IconType } from '@boiler/icons';
+import { classMap } from 'lit/directives/class-map.js';
+
+type HintVariant = 'hint' | 'error';
 
 type FormHintType = {
-  hintText: string;
-  iconName?: IconType;
-  errorText?: string;
-  hasError?: string;
+  message: string;
+  variant: HintVariant;
 };
 
-export const BlrFormHint = ({ hintText, iconName, errorText, hasError }: FormHintType) => {
+export const BlrFormHint = ({ message, variant }: FormHintType) => {
+  const classes = classMap({
+    [`${variant}`]: variant,
+  });
+
   return html`
-    <span class="blr-hint-error ${hasError ? 'blr-error' : 'blr-hint'}">
-      <blr-icon name="${iconName}"></blr-icon>
-      <span>${hasError ? errorText : hintText}</span>
+    <span class="blr-form-hint ${classes}">
+      <blr-icon name="${variant === 'error' ? 'blr360Xl' : 'blr360Xl'}"></blr-icon>
+      <span>${message}</span>
     </span>
   `;
 };