IBX-10606: Base ChoiceInput with Label

packages/assets/src/scss/_choice-input-field.scss

@@ -0,0 +1,7 @@
+@use 'functions' as *;
+
+.ids-choice-input-field {
+    display: flex;
+    align-items: center;
+    gap: calculateRem(8px);
+}

packages/assets/src/scss/_choice-input-label.scss

@@ -1,6 +1,7 @@
-@use './variables' as *;
+@use 'variables' as *;
 
 .ids-choice-input-label {
     color: $color-neutral-240;
     font-size: $text-font-size-m;
+    cursor: pointer;
 }

packages/assets/src/scss/_choice-input.scss

@@ -0,0 +1,3 @@
+.ids-choice-input {
+    line-height: 0;
+}

packages/assets/src/scss/styles.scss

@@ -4,6 +4,8 @@
 @use 'accordion';
 @use 'autosave';
 @use 'buttons';
+@use 'choice-input';
+@use 'choice-input-field';
 @use 'choice-input-label';
 @use 'expander';
 @use 'fonts';

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

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import BaseInput from '@ids-internal/partials/BaseInput';
+import { createCssClassNames } from '@ibexa/ids-core/helpers/cssClassNames';
 
 import { BaseChoiceInputProps } from './BaseChoiceInput.types';
 
@@ -23,6 +24,10 @@ const BaseChoiceInput = ({
     title = '',
     value = '',
 }: BaseChoiceInputProps) => {
+    const componentClassName = createCssClassNames({
+        'ids-choice-input': true,
+        [className]: !!className,
+    });
     const componentOnBlur = (event: React.FocusEvent<HTMLInputElement>) => {
         onBlur(event);
     };
@@ -37,7 +42,7 @@ const BaseChoiceInput = ({
     };
 
     return (
-        <div className={className}>
+        <div className={componentClassName}>
             <BaseInput
                 className={inputClassName}
                 disabled={disabled}

packages/components/src/internal/partials/BaseChoiceInputField/BaseChoiceInputField.stories.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import BaseChoiceInputField from './BaseChoiceInputField';
+import { RadioButtonStateful } from '../../../inputs/RadioButton';
+
+const meta: Meta<typeof BaseChoiceInputField> = {
+    title: 'components/src/base/BaseChoiceInputField',
+    component: BaseChoiceInputField,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs', 'foundation', 'base'],
+    argTypes: {
+        className: { control: 'text' },
+        renderInput: { control: false },
+    },
+    args: {
+        id: 'default-radio',
+        renderInput: () => <RadioButtonStateful checked={false} id="default-radio" name="default-radio" value="default" />,
+    },
+    decorators: [
+        (Story) => {
+            return (
+                <form name="default-form">
+                    <Story />
+                </form>
+            );
+        },
+    ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BaseChoiceInputField>;
+
+export const Default: Story = {
+    name: 'Default',
+    args: {
+        children: 'Lorem Ipsum',
+    },
+};
+
+export const withHTML: Story = {
+    name: 'With HTML',
+    args: {
+        children: (
+            <>
+                <b>Lorem</b>&nbsp;<u>Ipsum</u>
+            </>
+        ),
+    },
+};

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

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import ChoiceInputLabel from '../../../ChoiceInputLabel';
+import { createCssClassNames } from '@ibexa/ids-core/helpers/cssClassNames';
+
+import { BaseChoiceInputFieldProps } from './BaseChoiceInputField.types';
+
+const BaseChoiceInputField = ({
+    children,
+    className = '',
+    id,
+    inputWrapperClassName = '',
+    labelClassName = '',
+    renderInput,
+}: BaseChoiceInputFieldProps) => {
+    const componentClassName = createCssClassNames({
+        'ids-choice-input-field': true,
+        [className]: true,
+    });
+    const componentInputWrapperClassName = createCssClassNames({
+        'ids-choice-input-field__input-wrapper': true,
+        [inputWrapperClassName]: true,
+    });
+    const componentLabelClassName = createCssClassNames({
+        'ids-choice-input-field__label': true,
+        [labelClassName]: true,
+    });
+
+    return (
+        <div className={componentClassName}>
+            <div className={componentInputWrapperClassName}>{renderInput()}</div>
+            <ChoiceInputLabel className={componentLabelClassName} htmlFor={id}>
+                {children}
+            </ChoiceInputLabel>
+        </div>
+    );
+};
+
+export default BaseChoiceInputField;

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

@@ -0,0 +1,9 @@
+import { BaseComponentAriaAttributes } from '@ids-types/general';
+
+export interface BaseChoiceInputFieldProps extends BaseComponentAriaAttributes {
+    children: React.ReactNode;
+    id: string;
+    inputWrapperClassName?: string;
+    labelClassName?: string;
+    renderInput: () => React.ReactNode;
+}

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

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