diff --git a/packages/ui-library/src/components/input-field-text/index.stories.ts b/packages/ui-library/src/components/input-field-text/index.stories.ts index ee3b993a8..6c322dda9 100644 --- a/packages/ui-library/src/components/input-field-text/index.stories.ts +++ b/packages/ui-library/src/components/input-field-text/index.stories.ts @@ -29,7 +29,7 @@ export default { title: 'Components/Input Field Text', argTypes: { //Appearance - size: { + sizeVariant: { name: 'sizeVariant', description: ' Choose size of the component. ', options: FormSizes, @@ -111,8 +111,7 @@ export default { }, if: { arg: 'hasLabel', eq: true }, }, - // todo it has to be renamed? Checke this - showInputIcon: { + hasIcon: { description: 'Choose if component has an icon.', options: [undefined, ...PureIconKeys], control: { type: 'boolean' }, @@ -120,18 +119,15 @@ export default { category: 'Content / Settings', }, }, - // todo it has to be renamed? Checke this - inputIcon: { + icon: { description: 'Select an icon which is displayed inside of the input.', options: [undefined, ...PureIconKeys], control: { type: 'select' }, - if: { arg: 'showInputIcon', eq: true }, + if: { arg: 'hasIcon', eq: true }, table: { category: 'Content / Settings', }, }, - - // todo renaming from hintText to hasHint in the blrFormRenderFunction, partially solution with name overwriting hasHint: { name: 'hasHint', description: ' Choose if component has a hint message. ', @@ -143,8 +139,7 @@ export default { category: 'Content / Settings', }, }, - // todo renaming from hintIcon to hintMessageIcon in the blrFormRenderFunction, partially solution with name overwriting - hintIcon: { + hintMessageIcon: { name: 'hintMessageIcon', description: 'Select an icon which is displayed in front of the hint message.', options: [undefined, ...PureIconKeys], @@ -154,7 +149,6 @@ export default { category: 'Content / Settings', }, }, - // todo renaming from hintText to hasHint in the blrFormRenderFunction, partially solution with name overwriting hintMessage: { name: 'hintMessage', description: 'Enter string used used as hint message.', @@ -163,7 +157,6 @@ export default { category: 'Content / Settings', }, }, - //States disabled: { name: 'disabled', description: @@ -181,7 +174,6 @@ export default { category: 'States', }, }, - // Validation required: { name: 'required', description: 'Choose if the component must hold a value after an interaction or a submit.', @@ -198,8 +190,7 @@ export default { category: 'Validation', }, }, - // todo renaming from errorIcon to errorMessageIcon, partially solution with name overwriting - errorIcon: { + errorMessageIcon: { name: 'errorMessageIcon', description: 'Select an icon which is displayed in front of the error message.', options: [undefined, ...PureIconKeys], @@ -216,7 +207,6 @@ export default { category: 'Validation', }, }, - //Accessibility arialabel: { name: 'ariaLabel', description: @@ -225,7 +215,6 @@ export default { category: 'Accessibility', }, }, - // Events blrTextValueChange: { name: 'blrTextValueChange', description: 'Fires when the value changes.', @@ -258,17 +247,17 @@ export default { category: 'Events', }, }, - //Technical attributes - inputFieldTextId: { - name: 'inputFieldTextId', - description: 'Unique identifier for this component.', + name: { + name: 'name', + description: 'For a < form > element, the name attribute is used as a reference when the data is submitted. ', table: { category: 'Technical Attributes', }, }, - name: { - name: 'name', - description: 'For a < form > element, the name attribute is used as a reference when the data is submitted. ', + //Technical attributes + inputFieldTextId: { + name: 'inputFieldTextId', + description: 'Unique identifier for this component.', table: { category: 'Technical Attributes', }, @@ -325,30 +314,29 @@ BlrInputFieldText.storyName = 'Input Field Text'; // Default parameters for Input Field Text component const defaultParams: BlrInputFieldTextType = { - size: 'md', + theme: 'Light', + sizeVariant: 'md', + type: 'text', placeholder: 'Placeholder-text', value: '', maxLength: 140, + hasLabel: true, label: 'Label-text', labelAppendix: '(Appendix)', + hasIcon: true, + icon: 'blr360', hasHint: false, hintMessage: 'This is a small hint message', - hintIcon: 'blrInfo', - arialabel: 'InputFieldText', - name: 'InputFieldText', - theme: 'Light', - inputFieldTextId: 'Input Id', - hasLabel: true, - required: false, + hintMessageIcon: 'blrInfo', disabled: false, readonly: false, + required: false, hasError: false, errorMessage: '', - errorIcon: 'blrInfo', - - type: 'text', - inputIcon: 'blr360', - showInputIcon: true, + errorMessageIcon: 'blrInfo', + arialabel: 'InputFieldText', + name: 'InputFieldText', + inputFieldTextId: 'Input Id', }; BlrInputFieldText.args = defaultParams; @@ -356,7 +344,8 @@ BlrInputFieldText.args = defaultParams; //disabledArgTypesTable to deactivate the controls-Panel for a story in storybook const argTypesToDisable = [ 'theme', - 'size', + 'sizeVariant', + 'type', 'isResizeable', 'placeholder', 'value', @@ -367,16 +356,15 @@ const argTypesToDisable = [ 'labelAppendix', 'hasHint', 'hintText', - 'hintIcon', - 'type', - 'showInputIcon', + 'hintMessageIcon', + 'hasIcon', 'inputFieldTextId', 'disabled', 'readonly', 'required', 'hasError', 'errorMessage', - 'errorIcon', + 'errorMessageIcon', 'arialabel', 'name', 'blrTextValueChange', @@ -413,27 +401,27 @@ export const SizeVariant = () => { ${BlrInputFieldTextRenderFunction({ ...defaultParams, theme: 'Light', - size: 'sm', + sizeVariant: 'sm', label: 'Input Field Text SM', - showInputIcon: false, + hasIcon: false, placeholder: '', value: '', })} ${BlrInputFieldTextRenderFunction({ ...defaultParams, theme: 'Light', - size: 'md', + sizeVariant: 'md', label: 'Input Field Text MD', - showInputIcon: false, + hasIcon: false, placeholder: '', value: '', })} ${BlrInputFieldTextRenderFunction({ ...defaultParams, theme: 'Light', - size: 'lg', + sizeVariant: 'lg', label: 'Input Field Text LG', - showInputIcon: false, + hasIcon: false, placeholder: '', value: '', })} @@ -463,9 +451,9 @@ export const Type = () => { ...defaultParams, theme: 'Light', type: 'text', - size: 'md', + sizeVariant: 'md', label: 'Enter text', - showInputIcon: false, + hasIcon: false, labelAppendix: '', placeholder: '', value: '', @@ -474,7 +462,7 @@ export const Type = () => { ...defaultParams, theme: 'Light', type: 'password', - size: 'md', + sizeVariant: 'md', label: 'Enter password', labelAppendix: '', placeholder: '', @@ -502,20 +490,20 @@ export const Placeholder = () => { ${BlrInputFieldTextRenderFunction({ ...defaultParams, theme: 'Light', - size: 'md', + sizeVariant: 'md', label: 'With placeholder', placeholder: 'Add a message here', - showInputIcon: false, + hasIcon: false, labelAppendix: '', value: '', })} ${BlrInputFieldTextRenderFunction({ ...defaultParams, theme: 'Light', - size: 'md', + sizeVariant: 'md', label: 'Without placeholder', labelAppendix: '', - showInputIcon: false, + hasIcon: false, placeholder: '', value: '', })} @@ -542,9 +530,9 @@ export const Disabled = () => { ${BlrInputFieldTextRenderFunction({ ...defaultParams, theme: 'Light', - size: 'md', + sizeVariant: 'md', label: 'Disabled', - showInputIcon: false, + hasIcon: false, placeholder: '', labelAppendix: '', disabled: true, @@ -572,10 +560,10 @@ export const Readonly = () => { ${BlrInputFieldTextRenderFunction({ ...defaultParams, theme: 'Light', - size: 'md', + sizeVariant: 'md', label: 'Readonly', readonly: true, - showInputIcon: false, + hasIcon: false, placeholder: '', value: '', })} @@ -601,11 +589,11 @@ export const Required = () => { ${BlrInputFieldTextRenderFunction({ ...defaultParams, theme: 'Light', - size: 'md', + sizeVariant: 'md', placeholder: '', label: 'Label-text', labelAppendix: '(required)', - showInputIcon: false, + hasIcon: false, value: '', })} @@ -635,13 +623,13 @@ export const HasError = () => { ${BlrInputFieldTextRenderFunction({ ...defaultParams, theme: 'Light', - size: 'md', + sizeVariant: 'md', hasError: true, placeholder: '', label: 'Error', labelAppendix: '', errorMessage: '', - errorIcon: undefined, + errorMessageIcon: undefined, value: '', })} @@ -666,11 +654,11 @@ export const FormLabel = () => { ${BlrInputFieldTextRenderFunction({ ...defaultParams, theme: 'Light', - size: 'md', + sizeVariant: 'md', placeholder: '', label: 'Label', labelAppendix: '(Appendix)', - showInputIcon: false, + hasIcon: false, value: '', })} @@ -694,7 +682,7 @@ export const Icon = () => { ${BlrInputFieldTextRenderFunction({ ...defaultParams, theme: 'Light', - size: 'md', + sizeVariant: 'md', placeholder: '', label: 'With Icon', labelAppendix: '', @@ -704,10 +692,10 @@ export const Icon = () => { ${BlrInputFieldTextRenderFunction({ ...defaultParams, theme: 'Light', - size: 'md', + sizeVariant: 'md', placeholder: '', label: 'Without Icon', - showInputIcon: false, + hasIcon: false, labelAppendix: '', value: '', })} @@ -729,26 +717,26 @@ export const FormCaptionGroup = () => { ${BlrInputFieldTextRenderFunction({ ...defaultParams, theme: 'Light', - size: 'md', + sizeVariant: 'md', placeholder: '', label: 'Hint message', labelAppendix: '', hasHint: true, - showInputIcon: false, + hasIcon: false, value: '', })} ${BlrInputFieldTextRenderFunction({ ...defaultParams, theme: 'Light', - size: 'md', + sizeVariant: 'md', placeholder: '', label: ' Hint and error message', labelAppendix: '', hasHint: true, hasError: true, errorMessage: "OMG it's an error", - errorIcon: 'blrErrorFilled', - showInputIcon: false, + errorMessageIcon: 'blrErrorFilled', + hasIcon: false, value: '', })} diff --git a/packages/ui-library/src/components/input-field-text/index.test.ts b/packages/ui-library/src/components/input-field-text/index.test.ts index b091c1be1..d59c5346c 100644 --- a/packages/ui-library/src/components/input-field-text/index.test.ts +++ b/packages/ui-library/src/components/input-field-text/index.test.ts @@ -9,7 +9,7 @@ import { getRandomString } from '../../utils/get-random.string'; const sampleParams: BlrInputFieldTextType = { theme: 'Light', - size: 'md', + sizeVariant: 'md', type: 'text', placeholder: 'Placeholder-text', value: '', @@ -17,17 +17,17 @@ const sampleParams: BlrInputFieldTextType = { hasLabel: true, label: 'Label', labelAppendix: '(Appendix)', - showInputIcon: true, - inputIcon: 'blr360', + hasIcon: true, + icon: 'blr360', hasHint: false, hintMessage: 'This is a small hint message', - hintIcon: 'blrInfo', + hintMessageIcon: 'blrInfo', disabled: false, readonly: false, required: false, hasError: false, errorMessage: '', - errorIcon: 'blrInfo', + errorMessageIcon: 'blrInfo', arialabel: 'InputFieldText', inputFieldTextId: 'Input Id', name: 'InputFieldText', @@ -103,9 +103,9 @@ describe('blr-input-field-text', () => { BlrInputFieldTextRenderFunction({ ...sampleParams, hasHint: true, - hintIcon: 'blrInfo', + hintMessageIcon: 'blrInfo', hasError: true, - errorIcon: 'blrErrorFilled', + errorMessageIcon: 'blrErrorFilled', }) ); @@ -131,7 +131,7 @@ describe('blr-input-field-text', () => { }); it('has a size sm when "size" is set to "sm" ', async () => { - const element = await fixture(BlrInputFieldTextRenderFunction({ ...sampleParams, size: 'sm' })); + const element = await fixture(BlrInputFieldTextRenderFunction({ ...sampleParams, sizeVariant: 'sm' })); const inputWrapper = querySelectorDeep('.blr-input-wrapper', element.getRootNode() as HTMLElement); const className = inputWrapper?.className; diff --git a/packages/ui-library/src/components/input-field-text/index.ts b/packages/ui-library/src/components/input-field-text/index.ts index 4f27b40c4..33b7d1914 100644 --- a/packages/ui-library/src/components/input-field-text/index.ts +++ b/packages/ui-library/src/components/input-field-text/index.ts @@ -40,29 +40,29 @@ export type BlrInputFieldTextEventHandlers = { */ export class BlrInputFieldText extends LitElement { static styles = [styleCustom]; - @property() inputFieldTextId!: string; @property() type: InputTypes = 'text'; @property() arialabel!: string; + @property() hasLabel!: boolean; @property() label!: string; @property() labelAppendix?: string; @property() value!: string; @property() placeholder?: string; @property() disabled?: boolean; @property() readonly?: boolean; - @property() size?: FormSizesType = 'md'; + @property() sizeVariant?: FormSizesType = 'md'; @property() required?: boolean; @property() maxLength?: number; @property() pattern?: string; @property() hasError?: boolean; @property() errorMessage?: string; - @property() showInputIcon = true; - @property() inputIcon: SizelessIconType = 'blr360'; + @property() hasIcon = true; + @property() icon: SizelessIconType = 'blr360'; @property() hasHint = true; @property() hintMessage?: string; - @property() hintIcon?: SizelessIconType; - @property() errorIcon?: SizelessIconType; - @property() hasLabel!: boolean; + @property() hintMessageIcon?: SizelessIconType; + @property() errorMessageIcon?: SizelessIconType; + @property() name!: string; @property() theme: ThemeType = 'Light'; @@ -100,29 +100,29 @@ export class BlrInputFieldText extends LitElement { }; protected render() { - if (this.size) { + if (this.sizeVariant) { const dynamicStyles = this.theme === 'Light' ? [formLight, inputFieldTextLight] : [formDark, inputFieldTextDark]; const wasInitialPasswordField = Boolean(this.type === 'password'); const classes = classMap({ - [`${this.size}`]: this.size, + [`${this.sizeVariant}`]: this.sizeVariant, }); const inputClasses = classMap({ - [`${this.size}`]: this.size, + [`${this.sizeVariant}`]: this.sizeVariant, }); const inputContainerClasses = classMap({ 'focus': this.isFocused || false, 'error-input': this.hasError || false, 'disabled': this.disabled || false, - [`${this.size}`]: this.size, + [`${this.sizeVariant}`]: this.sizeVariant, }); const iconClasses = classMap({ 'blr-input-icon': true, - [`${this.size}`]: this.size, + [`${this.sizeVariant}`]: this.sizeVariant, 'noPointerEvents': Boolean(this.disabled || this.readonly), }); @@ -136,26 +136,26 @@ export class BlrInputFieldText extends LitElement { 'inputfield', 'icon', 'sizevariant', - this.size, + this.sizeVariant, ]).toLowerCase() as SizesType; const captionContent = html` - ${this.hasHint && (this.hintMessage || this.hintIcon) + ${this.hasHint && (this.hintMessage || this.hintMessageIcon) ? BlrFormCaptionRenderFunction({ variant: 'hint', theme: this.theme, - sizeVariant: this.size, + sizeVariant: this.sizeVariant, message: this.hintMessage, - icon: this.hintIcon, + icon: this.hintMessageIcon, }) : nothing} - ${this.hasError && (this.errorMessage || this.errorIcon) + ${this.hasError && (this.errorMessage || this.errorMessageIcon) ? BlrFormCaptionRenderFunction({ variant: 'error', theme: this.theme, - sizeVariant: this.size, + sizeVariant: this.sizeVariant, message: this.errorMessage, - icon: this.errorIcon, + icon: this.errorMessageIcon, }) : nothing} `; @@ -170,7 +170,7 @@ export class BlrInputFieldText extends LitElement {
${BlrFormLabelRenderFunction({ label: this.label, - sizeVariant: this.size, + sizeVariant: this.sizeVariant, labelAppendix: this.labelAppendix, forValue: this.inputFieldTextId, theme: this.theme, @@ -201,12 +201,12 @@ export class BlrInputFieldText extends LitElement { @select=${this.handleSelect} />
- ${this.showInputIcon && !wasInitialPasswordField && !this.readonly + ${this.hasIcon && !wasInitialPasswordField && !this.readonly ? html`${BlrIconRenderFunction( { icon: this.hasError ? calculateIconName(`blrErrorFilled`, iconSizeVariant) - : calculateIconName(this.inputIcon, iconSizeVariant), + : calculateIconName(this.icon, iconSizeVariant), sizeVariant: iconSizeVariant, classMap: iconClasses, fillParent: false, @@ -216,7 +216,7 @@ export class BlrInputFieldText extends LitElement { 'name': (this.hasError ? calculateIconName(`blrErrorFilled`, iconSizeVariant) - : calculateIconName(this.inputIcon, iconSizeVariant)) || '', + : calculateIconName(this.icon, iconSizeVariant)) || '', } )}` : nothing} @@ -238,7 +238,7 @@ export class BlrInputFieldText extends LitElement { : nothing} ${this.hasHint || this.hasError - ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.size }, captionContent) + ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, captionContent) : nothing} `;