diff --git a/packages/ui-library/src/components/checkbox/index.stories.ts b/packages/ui-library/src/components/checkbox/index.stories.ts
index 0c1b32a91..807f54bcc 100644
--- a/packages/ui-library/src/components/checkbox/index.stories.ts
+++ b/packages/ui-library/src/components/checkbox/index.stories.ts
@@ -64,7 +64,7 @@ export default {
category: 'Content / Settings',
},
},
- indeterminatedIcon: {
+ indeterminateIcon: {
description: 'Select an icon which is displayed when checkbox is indeterminate.',
options: [undefined, ...PureIconKeys],
control: { type: 'select' },
@@ -87,6 +87,17 @@ export default {
},
if: { arg: 'hasLabel', eq: true },
},
+ labelAppendix: {
+ description:
+ ' Enter string used as an appendix to the label. Use this to inform the user if this field is required or not.',
+ control: {
+ type: 'text',
+ },
+ table: {
+ category: 'Content / Settings',
+ },
+ if: { arg: 'hasLabel', eq: true },
+ },
hasHint: {
description: 'Choose if component has a hint message.',
control: { type: 'boolean' },
@@ -126,6 +137,15 @@ export default {
category: 'States',
},
},
+
+ //Validation
+ required: {
+ description: 'Choose if the component must hold a value after an interaction or a submit.',
+ defaultValue: false,
+ table: {
+ category: 'Validation',
+ },
+ },
hasError: {
description: 'Choose if component has an error.',
defaultValue: false,
@@ -221,6 +241,7 @@ export default {
- [**Disabled**](#disabled)
- [**Readonly**](#readonly)
- [**Validation**](#validation)
+ - [**Required**](#required)
- [**Has Error**](#has-error)
- [**Dependencies**](#dependencies)
- [**Form-Label**](#form-label)
@@ -238,7 +259,7 @@ const defaultParams: BlrCheckboxType = {
checked: false,
checkedIcon: 'blrCheckmark',
indeterminate: false,
- indeterminatedIcon: 'blrMinus',
+ indeterminateIcon: 'blrMinus',
hasLabel: true,
label: 'Label-text',
hasHint: false,
@@ -246,6 +267,7 @@ const defaultParams: BlrCheckboxType = {
hintMessageIcon: 'blrInfo',
disabled: false,
readonly: false,
+ required: false,
hasError: false,
errorMessage: ' ',
errorMessageIcon: undefined,
@@ -258,6 +280,42 @@ export const BlrCheckbox = (params: BlrCheckboxType) => BlrCheckboxRenderFunctio
BlrCheckbox.storyName = 'Checkbox';
BlrCheckbox.args = defaultParams;
+//disabledArgTypesTable to deactivate the controls-Panel for a story in storybook
+const argTypesToDisable = [
+ 'theme',
+ 'sizeVariant',
+ 'checked',
+ 'checkedIcon',
+ 'indeterminate',
+ 'indeterminateIcon',
+ 'hasLabel',
+ 'label',
+ 'hasHint',
+ 'hintMessage',
+ 'hintMessageIcon',
+ 'disabled',
+ 'readonly',
+ 'required',
+ 'hasError',
+ 'errorMessage',
+ 'errorMessageIcon',
+ 'arialabel',
+ 'checkboxId',
+ 'name',
+];
+const generateDisabledArgTypes = (argTypes: string[]) => {
+ const disabledArgTypes = {};
+ argTypes.forEach((argType: string) => {
+ disabledArgTypes[argType] = {
+ table: {
+ disable: true,
+ },
+ };
+ });
+ return disabledArgTypes;
+};
+const disabledArgTypes = generateDisabledArgTypes(argTypesToDisable);
+
// All Stories
//Appearance Size Story
/**
@@ -392,32 +450,39 @@ export const Readonly = () => {
Readonly.story = {
name: ' ',
};
-// todo will be implemented with ticket no. #673
-// /**
-// * ## Validation
-// *
-// * ### Required
-// * The Checkbox component can be set as required. If set as required, an error should be thrown, when the Checkbox component was not checked, before it was submitted. It is recommended to indicate in the label appendix, whether a component is required or not. For more information on the label and label appendix have a look at the [Form Label](/docs/components-form-label--docs) component in the dependencies section below.
-// */
-// export const Required = () => {
-// return html`
-// ${sharedStyles}
-//
-//
-// ${BlrCheckboxRenderFunction({
-// ...defaultParams,
-// label: 'Required',
-// })}
-//
-//
-// `;
-// };
-// Required.story = {
-// name: ' ',
-// };
-
/**
* ## Validation
+ * ### Required
+ * The Checkbox component can be set as required. If set as required, an error should be thrown, when the Text Area component was not filled, before it was submitted. It is recommended to indicate in the label appendix, whether a component is required or not. For more information on the label and label appendix have a look at the [Form Label](#form-label) component in the dependencies section below.
+ */
+export const Required = () => {
+ return html`
+ ${sharedStyles}
+
+
+ ${BlrCheckboxRenderFunction({
+ ...defaultParams,
+ theme: 'Light',
+ sizeVariant: 'md',
+ label: 'Required',
+ placeholder: '',
+ hintMessage: '',
+ required: true,
+ labelAppendix: '(required)',
+ value: '',
+ })}
+
+
+ `;
+};
+Required.argTypes = {
+ ...disabledArgTypes,
+};
+Required.story = {
+ name: ' ',
+};
+
+/**
* ### Has Error
* The Checkbox component can be set to have an error. An error can be displayed after submitting a wrong value, after leaving/deselecting the Checkbox or in case the Checkbox was set as required and has not been checked before submitting. For more information on the error message have a look at the [Form Caption Group](#form-caption-group) in the dependencies section below.
*/
diff --git a/packages/ui-library/src/components/checkbox/index.ts b/packages/ui-library/src/components/checkbox/index.ts
index 1225e83a6..2d331c0fc 100644
--- a/packages/ui-library/src/components/checkbox/index.ts
+++ b/packages/ui-library/src/components/checkbox/index.ts
@@ -57,11 +57,12 @@ export class BlrCheckbox extends LitElementCustom {
@property() accessor hasLabel!: boolean;
@property() accessor name: string | undefined;
@property() accessor checkedIcon: SizelessIconType | undefined = 'blrCheckmark';
- @property() accessor indeterminatedIcon: SizelessIconType | undefined = 'blrMinus';
+ @property() accessor indeterminateIcon: SizelessIconType | undefined = 'blrMinus';
@property() accessor sizeVariant: FormSizesType | undefined = 'md';
@property() accessor theme: ThemeType = 'Light';
+ @property({ type: Boolean }) accessor required: boolean | undefined;
@state() protected accessor currentCheckedState: boolean | undefined = this.checked;
@state() protected accessor currentIndeterminateState: boolean | undefined = this.indeterminate;
@@ -87,7 +88,7 @@ export class BlrCheckbox extends LitElementCustom {
createBlrCheckedChangeEvent({
originalEvent: event,
checkedState: this.currentCheckedState,
- })
+ }),
);
}
}
@@ -95,7 +96,7 @@ export class BlrCheckbox extends LitElementCustom {
@state() protected accessor focused = false;
protected handleFocus = (event: FocusEvent) => {
- if (!this.disabled && !this.readonly) {
+ if (!this.disabled) {
this.focused = true;
this.dispatchEvent(createBlrFocusEvent({ originalEvent: event }));
@@ -103,7 +104,7 @@ export class BlrCheckbox extends LitElementCustom {
};
protected handleBlur = (event: FocusEvent) => {
- if (!this.disabled && !this.readonly) {
+ if (!this.disabled) {
this.focused = false;
this.dispatchEvent(createBlrBlurEvent({ originalEvent: event }));
@@ -157,6 +158,7 @@ export class BlrCheckbox extends LitElementCustom {
'hover': this.hovered || false,
'active': this.active || false,
'checked': this.currentCheckedState || false,
+ 'required': this.required || false,
'readonly': this.readonly || false,
'indeterminate': this.currentIndeterminateState || false,
});
@@ -168,6 +170,7 @@ export class BlrCheckbox extends LitElementCustom {
'hover': this.hovered || false,
'active': this.active || false,
'checked': this.currentCheckedState || false,
+ 'required': this.required || false,
'readonly': this.readonly || false,
'indeterminate': this.currentIndeterminateState || false,
'focus': this.focused || false,
@@ -262,6 +265,7 @@ export class BlrCheckbox extends LitElementCustom {
?checked=${this.currentCheckedState}
?indeterminate=${this.currentIndeterminateState}
?readonly=${this.readonly}
+ ?required="${this.required}"
?hasError=${this.hasError}
@change=${this.handleChange}
aria-hidden="true"
@@ -271,12 +275,12 @@ export class BlrCheckbox extends LitElementCustom {
${this.currentIndeterminateState
? BlrIconRenderFunction(
{
- icon: calculateIconName(this.indeterminatedIcon, checkerIconSizeVariant),
+ icon: calculateIconName(this.indeterminateIcon, checkerIconSizeVariant),
classMap: checkerIconClasses,
},
{
'aria-hidden': true,
- }
+ },
)
: BlrIconRenderFunction(
{
@@ -285,7 +289,7 @@ export class BlrCheckbox extends LitElementCustom {
},
{
'aria-hidden': true,
- }
+ },
)}