IBX-10537: Base Form Control

packages/assets/src/scss/_form-control.scss

@@ -0,0 +1,11 @@
+@use 'functions' as *;
+
+.ids-form-control {
+    &__label-wrapper {
+        margin-bottom: calculateRem(8px);
+    }
+
+    &__helper-text-wrapper {
+        margin-top: calculateRem(8px);
+    }
+}

packages/assets/src/scss/_helper-text.scss

@@ -10,14 +10,14 @@ $helper-text-types: (
 .ids-helper-text {
     $self: &;
 
-    font-size: $text-font-size-m;
+    font-size: $text-font-size-s;
     color: #{map.get($helper-text-types, 'default')};
     display: flex;
 
     &__icon-wrapper {
         display: flex;
         align-items: center;
-        height: $text-font-size-m * $base-line-height;
+        height: $text-font-size-s * $base-line-height;
         padding-right: calculateRem(4px);
     }
 

packages/assets/src/scss/styles.scss

@@ -6,10 +6,11 @@
 @use 'buttons';
 @use 'expander';
 @use 'fonts';
+@use 'form-control';
+@use 'helper-text';
 @use 'icons';
 @use 'input';
 @use 'label';
-@use 'helper-text';
 
 @use 'inputs/input-text';
 

packages/components/src/internal/partials/BaseFormControl/BaseFormControl.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import HelperText from '../../../HelperText';
+import Label from '../../../Label';
+
+import { createCssClassNames } from '@ibexa/ids-core/helpers/cssClassNames';
+
+import { BaseFormControlProps } from './BaseFormControl.types';
+
+const BaseFormControl = ({ children, className = '', helperText, label, type }: BaseFormControlProps) => {
+    const classes = createCssClassNames({
+        'ids-form-control': true,
+        [`ids-form-control--${type}`]: true,
+        [className]: !!className,
+    });
+    const renderLabel = () => {
+        if (!label) {
+            return null;
+        }
+
+        const { children: labelContent, ...labelProps } = label;
+
+        return (
+            <div className="ids-form-control__label-wrapper">
+                <Label {...labelProps}>{labelContent}</Label>
+            </div>
+        );
+    };
+    const renderHelperText = () => {
+        if (!helperText) {
+            return null;
+        }
+
+        const { children: helperTextContent, ...helperTextProps } = helperText;
+
+        return (
+            <div className="ids-form-control__helper-text-wrapper">
+                <HelperText {...helperTextProps}>{helperTextContent}</HelperText>
+            </div>
+        );
+    };
+
+    return (
+        <div className={classes}>
+            {renderLabel()}
+            <div className="ids-form-control__source-wrapper">{children}</div>
+            {renderHelperText()}
+        </div>
+    );
+};
+
+export default BaseFormControl;

packages/components/src/internal/partials/BaseFormControl/BaseFormControl.types.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+
+import { BaseComponentAttributes } from '@ids-types/general';
+
+import { HelperTextProps } from '../../../HelperText/HelperText.types';
+import { LabelProps } from '../../../Label/Label.types';
+
+export interface BaseFormControlProps extends BaseComponentAttributes {
+    children: ReactNode;
+    type: string;
+    helperText?: HelperTextProps;
+    label?: LabelProps;
+}

packages/components/src/internal/partials/BaseFormControl/index.ts

@@ -0,0 +1,5 @@
+import BaseFormControl from './BaseFormControl';
+import { BaseFormControlProps } from './BaseFormControl.types';
+
+export default BaseFormControl;
+export type { BaseFormControlProps };