IBX-10604: ChoiceInput Label

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

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

packages/assets/src/scss/styles.scss

@@ -4,6 +4,7 @@
 @use 'accordion';
 @use 'autosave';
 @use 'buttons';
+@use 'choice-input-label';
 @use 'expander';
 @use 'fonts';
 @use 'form-control';

packages/components/src/ChoiceInputLabel/ChoiceInputLabel.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ChoiceInputLabel from './ChoiceInputLabel';
+
+const meta: Meta<typeof ChoiceInputLabel> = {
+    component: ChoiceInputLabel,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        className: {
+            control: 'text',
+        },
+        title: {
+            control: 'text',
+        },
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChoiceInputLabel>;
+
+export const Default: Story = {
+    name: 'Default',
+    args: {
+        children: 'Lorem Ipsum',
+        htmlFor: 'default-input',
+    },
+};
+
+export const withHTML: Story = {
+    name: 'With HTML',
+    args: {
+        children: (
+            <>
+                <b>Lorem</b>&nbsp;<u>Ipsum</u>
+            </>
+        ),
+        htmlFor: 'default-input',
+    },
+};

packages/components/src/ChoiceInputLabel/ChoiceInputLabel.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { createCssClassNames } from '@ibexa/ids-core/helpers/cssClassNames';
+
+import { ChoiceInputLabelProps } from './ChoiceInputLabel.types';
+
+const ChoiceInputLabel = ({ children, htmlFor, className = '', title = '' }: ChoiceInputLabelProps) => {
+    const labelClassName = createCssClassNames({
+        'ids-choice-input-label': true,
+        [className]: !!className,
+    });
+
+    return (
+        <label className={labelClassName} htmlFor={htmlFor} title={title}>
+            {children}
+        </label>
+    );
+};
+
+export default ChoiceInputLabel;

packages/components/src/ChoiceInputLabel/ChoiceInputLabel.types.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+import { BaseComponentAttributes } from '@ids-types/general';
+
+export interface ChoiceInputLabelProps extends BaseComponentAttributes {
+    children: ReactNode;
+    htmlFor: string;
+}

packages/components/src/ChoiceInputLabel/index.ts

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