diff --git a/packages/assets/src/scss/_form-control.scss b/packages/assets/src/scss/_form-control.scss new file mode 100644 index 00000000..7ce30ba7 --- /dev/null +++ b/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); + } +} diff --git a/packages/assets/src/scss/_helper-text.scss b/packages/assets/src/scss/_helper-text.scss index 21b01ebd..8eac48b5 100644 --- a/packages/assets/src/scss/_helper-text.scss +++ b/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); } diff --git a/packages/assets/src/scss/styles.scss b/packages/assets/src/scss/styles.scss index fb321713..e8d63235 100644 --- a/packages/assets/src/scss/styles.scss +++ b/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'; diff --git a/packages/components/src/internal/partials/BaseFormControl/BaseFormControl.tsx b/packages/components/src/internal/partials/BaseFormControl/BaseFormControl.tsx new file mode 100644 index 00000000..709d26ae --- /dev/null +++ b/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 ( +
+ +
+ ); + }; + const renderHelperText = () => { + if (!helperText) { + return null; + } + + const { children: helperTextContent, ...helperTextProps } = helperText; + + return ( +
+ {helperTextContent} +
+ ); + }; + + return ( +
+ {renderLabel()} +
{children}
+ {renderHelperText()} +
+ ); +}; + +export default BaseFormControl; diff --git a/packages/components/src/internal/partials/BaseFormControl/BaseFormControl.types.ts b/packages/components/src/internal/partials/BaseFormControl/BaseFormControl.types.ts new file mode 100644 index 00000000..18ddaac9 --- /dev/null +++ b/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; +} diff --git a/packages/components/src/internal/partials/BaseFormControl/index.ts b/packages/components/src/internal/partials/BaseFormControl/index.ts new file mode 100644 index 00000000..0bed2430 --- /dev/null +++ b/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 };