From c841cd9bfbf0b81057da4247191fa1e58f7b8775 Mon Sep 17 00:00:00 2001
From: joannasikora <jo.sikora21@gmail.com>
Date: Thu, 23 Jan 2025 11:57:35 +0100
Subject: [PATCH 1/2] feat(FormField): add boldLabel prop for InputPromo

---
 .../components/FormField/FormField.stories.tsx   | 16 +++++++++++++++-
 .../src/components/FormField/FormField.tsx       |  7 ++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/src/components/FormField/FormField.stories.tsx b/packages/react-components/src/components/FormField/FormField.stories.tsx
index 3b83676e3..bcc5e1fc5 100644
--- a/packages/react-components/src/components/FormField/FormField.stories.tsx
+++ b/packages/react-components/src/components/FormField/FormField.stories.tsx
@@ -2,7 +2,7 @@ import { Info } from '@livechat/design-system-icons';
 import { Meta, StoryFn } from '@storybook/react';
 
 import { Icon } from '../Icon';
-import { Input } from '../Input';
+import { Input, InputPromo } from '../Input';
 import { IInputProps } from '../Input/types';
 
 import { FormField as FormFieldComponent, FormFieldProps } from './FormField';
@@ -23,6 +23,11 @@ export default {
     labelRightNode: {
       control: false,
     },
+    parameters: {
+      controls: {
+        exclude: ['boldLabel'],
+      },
+    },
   },
 } as Meta<typeof FormFieldComponent>;
 
@@ -30,6 +35,9 @@ const ExampleIcon = () => <Icon source={Info} />;
 const ExampleInput = ({ ...args }: IInputProps) => (
   <Input placeholder="Placeholder text" {...args} />
 );
+const ExampleInputPromo = ({ ...args }: IInputProps) => (
+  <InputPromo placeholder="Placeholder text" {...args} />
+);
 const LabelText = 'Email';
 const DescriptionText = 'Enter your email address';
 const PlaceholderText = 'e.g., john@example.com';
@@ -93,3 +101,9 @@ export const TextFieldWithError: StoryFn<FormFieldProps> = () => (
     <ExampleInput error />
   </FormFieldComponent>
 );
+
+export const BoldLabelWithPromoInput: StoryFn<FormFieldProps> = () => (
+  <FormFieldComponent labelText="Username" boldLabel>
+    <ExampleInputPromo />
+  </FormFieldComponent>
+);
diff --git a/packages/react-components/src/components/FormField/FormField.tsx b/packages/react-components/src/components/FormField/FormField.tsx
index 277d4730e..084c4d676 100644
--- a/packages/react-components/src/components/FormField/FormField.tsx
+++ b/packages/react-components/src/components/FormField/FormField.tsx
@@ -23,6 +23,10 @@ export interface FormFieldProps {
    * Define to associate the label with the field
    */
   labelFor?: string;
+  /**
+   * Makes the label text bold. Note: This prop should only be used together with PromoInput.
+   */
+  boldLabel?: boolean;
   /**
    * The CSS class for field container
    */
@@ -59,6 +63,7 @@ export const FormField: React.FC<React.PropsWithChildren<FormFieldProps>> = ({
   labelFor,
   children,
   labelRightNode,
+  boldLabel = false,
 }) => {
   const childrenRef = React.useRef<HTMLDivElement>(null);
   const [labelHeight, setLabelHeight] = React.useState('auto');
@@ -125,7 +130,7 @@ export const FormField: React.FC<React.PropsWithChildren<FormFieldProps>> = ({
                   className={styles[`${baseClass}__label-left-node`]}
                   htmlFor={labelFor}
                 >
-                  <Text as="span" size="sm">
+                  <Text as="span" size="sm" bold={boldLabel}>
                     {labelText}
                   </Text>
                 </label>

From 2719638d423da8ef57530700bf8c5bbf6fd13024 Mon Sep 17 00:00:00 2001
From: joannasikora <jo.sikora21@gmail.com>
Date: Thu, 23 Jan 2025 12:39:28 +0100
Subject: [PATCH 2/2] feat(FormField): update margin-bottom to use spacing
 variable

---
 .../src/components/FormField/FormField.module.scss              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/src/components/FormField/FormField.module.scss b/packages/react-components/src/components/FormField/FormField.module.scss
index 681f0d0b8..f93c8c0ae 100644
--- a/packages/react-components/src/components/FormField/FormField.module.scss
+++ b/packages/react-components/src/components/FormField/FormField.module.scss
@@ -17,7 +17,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
-    margin-bottom: 4px;
+    margin-bottom: var(--spacing-1);
 
     label {
       margin-bottom: 0;