Merge branch 'develop' into fix/965-remove-icon-link

packages/ui-library/src/components/select/index.stories.ts

@@ -20,13 +20,13 @@ const sharedStyles = html`
 `;
 const defaultParams: BlrSelectType = {
   theme: 'Light',
-  size: 'md',
+  sizeVariant: 'md',
   label: 'Label-text',
   labelAppendix: '(Appendix)',
   icon: 'blrChevronDown',
   hasHint: false,
   hintMessage: 'This is a small hint message',
-  hintIcon: 'blrInfo',
+  hintMessageIcon: 'blrInfo',
   disabled: false,
   required: false,
   hasError: false,
@@ -42,7 +42,7 @@ export default {
   title: 'Components/Select',
   argTypes: {
     // Appearance
-    size: {
+    sizeVariant: {
       name: 'sizeVariant',
       description: 'Choose size of the component.',
       options: FormSizes,
@@ -103,7 +103,7 @@ export default {
         category: 'Content / Settings',
       },
     },
-    hintIcon: {
+    hintMessageIcon: {
       name: 'hintMessageIcon',
       description: 'Select an icon which is displayed in front of the hint message.',
       options: [undefined, ...PureIconKeys],
@@ -193,23 +193,22 @@ export default {
       },
     },
     // Events
-    onChange: {
-      action: 'onChange',
+    blrSelectedValueChange: {
+      action: 'blrSelectedValueChange',
       description: 'Fires when the value changes.',
       table: {
         category: 'Events',
       },
     },
-    onFocus: {
-      name: 'onFocus',
-      action: 'onFocus',
+    blrFocus: {
+      action: 'blrFocus',
       description: 'Fires when the component is focused.',
       table: {
         category: 'Events',
       },
     },
-    onBlur: {
-      action: 'onBlur',
+    blrBlur: {
+      action: 'blrBlur',
       description: 'Fires when the component lost focus.',
       table: {
         category: 'Events',
@@ -264,14 +263,14 @@ BlrSelect.args = defaultParams;
 //disabledArgTypesTable to deactivate the controls-Panel for a story in storybook
 const argTypesToDisable = [
   'theme',
-  'size',
+  'sizeVariant',
   'hasIcon',
   'hasLabel',
   'label',
   'labelAppendix',
   'hasHint',
   'hintText',
-  'hintIcon',
+  'hintMessageIcon',
   'disabled',
   'required',
   'hasError',
@@ -310,7 +309,7 @@ export const SizeVariant = () => {
       ${BlrSelectRenderFunction(
         {
           ...defaultParams,
-          size: 'sm',
+          sizeVariant: 'sm',
           label: 'Select SM',
           labelAppendix: '',
         },
@@ -319,7 +318,7 @@ export const SizeVariant = () => {
       ${BlrSelectRenderFunction(
         {
           ...defaultParams,
-          size: 'md',
+          sizeVariant: 'md',
           label: 'Select MD',
           labelAppendix: '',
         },
@@ -328,7 +327,7 @@ export const SizeVariant = () => {
       ${BlrSelectRenderFunction(
         {
           ...defaultParams,
-          size: 'lg',
+          sizeVariant: 'lg',
           label: 'Select LG',
           labelAppendix: '',
         },

packages/ui-library/src/components/select/index.test.ts

@@ -11,11 +11,11 @@ const sampleParams: BlrSelectType = {
   name: 'Text Input',
   label: 'Label',
   labelAppendix: '(Optional)',
-  size: 'md',
+  sizeVariant: 'md',
   errorMessage: 'This is error message',
   hasHint: true,
   hintMessage: 'Field is used for hint',
-  hintIcon: 'blrInfo',
+  hintMessageIcon: 'blrInfo',
   selectId: 'Peter',
   errorMessageIcon: 'blrErrorFilled',
   theme: 'Light',
@@ -46,7 +46,7 @@ describe('blr-select', () => {
       BlrSelectRenderFunction({
         ...sampleParams,
         hasHint: true,
-        hintIcon: 'blrInfo',
+        hintMessageIcon: 'blrInfo',
         hasError: true,
         errorMessageIcon: 'blrErrorFilled',
       })
@@ -76,7 +76,7 @@ describe('blr-select', () => {
   });
 
   it('has a size sm when "size" is set to "sm" ', async () => {
-    const element = await fixture(BlrSelectRenderFunction({ ...sampleParams, size: 'sm' }));
+    const element = await fixture(BlrSelectRenderFunction({ ...sampleParams, sizeVariant: 'sm' }));
 
     const selectWrapper = querySelectorDeep('.blr-select-wrapper', element.getRootNode() as HTMLElement);
     const className = selectWrapper?.className;
@@ -85,7 +85,7 @@ describe('blr-select', () => {
   });
 
   it('is rendering options inside slot', async () => {
-    const element = await fixture(BlrSelectRenderFunction({ ...sampleParams, size: 'sm' }, optionsAsChildren));
+    const element = await fixture(BlrSelectRenderFunction({ ...sampleParams, sizeVariant: 'sm' }, optionsAsChildren));
     const options = querySelectorAllDeep('.blr-select-option', element?.getRootNode() as HTMLElement);
     const optionsLength = optionsAsChildren.strings[0].trim().split('</option>').filter(Boolean).length;
     expect(options).to.be.lengthOf(optionsLength);

packages/ui-library/src/components/select/index.ts

@@ -34,15 +34,15 @@ export class BlrSelect extends LitElement {
   @property() hasLabel?: boolean;
   @property() label!: string;
   @property() disabled?: boolean;
-  @property() size?: FormSizesType = 'md';
+  @property() sizeVariant?: FormSizesType = 'md';
   @property() required?: boolean;
-  @property() onBlur?: HTMLElement['blur'];
-  @property() onFocus?: HTMLElement['focus'];
+  @property() blrBlur?: HTMLElement['blur'];
+  @property() blrFocus?: HTMLElement['focus'];
 
   @property() hasError?: boolean;
   @property() errorMessage?: string;
   @property() hintMessage?: string;
-  @property() hintIcon?: SizelessIconType;
+  @property() hintMessageIcon?: SizelessIconType;
   @property() errorMessageIcon?: SizelessIconType;
   @property() hasHint?: boolean;
   @property() icon?: SizelessIconType = 'blrChevronDown';
@@ -73,14 +73,14 @@ export class BlrSelect extends LitElement {
   }
 
   protected renderIcon(classes: DirectiveResult<typeof ClassMapDirective>) {
-    if (this.size) {
+    if (this.sizeVariant) {
       const iconSizeVariant = getComponentConfigToken([
         'sem',
         'forms',
         'inputfield',
         'icon',
         'sizevariant',
-        this.size,
+        this.sizeVariant,
       ]).toLowerCase() as SizesType;
 
       if (this.hasError) {
@@ -113,36 +113,36 @@ export class BlrSelect extends LitElement {
   }
 
   protected render() {
-    if (this.size) {
+    if (this.sizeVariant) {
       const dynamicStyles = this.theme === 'Light' ? [formLight, selectInputLight] : [formDark, selectInputDark];
 
       const inputClasses = classMap({
         'error': this.hasError || false,
         'error-input': this.hasError || false,
-        [`${this.size}`]: this.size,
+        [`${this.sizeVariant}`]: this.sizeVariant,
         'disabled': this.disabled || false,
         'focus': this.isFocused || false,
       });
 
       const iconClasses = classMap({
         'blr-input-icon': true,
-        [this.size]: this.size,
+        [this.sizeVariant]: this.sizeVariant,
       });
       const captionContent = html`
-        ${this.hasHint && (this.hintMessage || this.hintIcon)
+        ${this.hasHint && (this.hintMessage || this.hintMessageIcon)
           ? BlrFormCaptionRenderFunction({
               variant: 'hint',
               theme: this.theme,
-              size: this.size,
+              size: this.sizeVariant,
               message: this.hintMessage,
-              icon: this.hintIcon,
+              icon: this.hintMessageIcon,
             })
           : nothing}
         ${this.hasError && (this.errorMessage || this.errorMessageIcon)
           ? BlrFormCaptionRenderFunction({
               variant: 'error',
               theme: this.theme,
-              size: this.size,
+              size: this.sizeVariant,
               message: this.errorMessage,
               icon: this.errorMessageIcon,
             })
@@ -156,14 +156,14 @@ export class BlrSelect extends LitElement {
 
         <slot @slotchange=${this.handleSlotChange}></slot>
 
-        <div class="blr-select ${this.size}">
+        <div class="blr-select ${this.sizeVariant}">
           ${this.hasLabel
             ? html`
                 <div class="label-wrapper">
                   ${BlrFormLabelRenderFunction({
                     label: this.label,
                     labelAppendix: this.labelAppendix,
-                    sizeVariant: this.size,
+                    sizeVariant: this.sizeVariant,
                     forValue: this.selectId,
                     theme: this.theme,
                     hasError: Boolean(this.hasError),
@@ -174,7 +174,7 @@ export class BlrSelect extends LitElement {
           <div class="blr-select-wrapper ${inputClasses}">
             <div class="blr-select-inner-container">
               <select
-                aria-label=${this.arialabel || nothing}
+                aria-label=${this.ariaLabel || nothing}
                 class="blr-form-select ${inputClasses}"
                 id=${this.selectId || nothing}
                 name=${this.name || nothing}
@@ -201,7 +201,7 @@ export class BlrSelect extends LitElement {
             ${this.renderIcon(iconClasses)}
           </div>
           ${this.hasHint || this.hasError
-            ? BlrFormCaptionGroupRenderFunction({ size: this.size }, captionContent)
+            ? BlrFormCaptionGroupRenderFunction({ size: this.sizeVariant }, captionContent)
             : nothing}
         </div>
       `;

packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.test.ts

@@ -0,0 +1,52 @@
+import '@boiler/ui-library/dist';
+
+import { BlrRangeLegendMinMaxSliderRenderFunction } from './renderFunction';
+import type { BlrRangeLegendMinMaxSliderType } from '.';
+
+import { expect, fixture } from "@open-wc/testing";
+import { querySelectorAllDeep, querySelectorDeep } from 'query-selector-shadow-dom';
+
+const sampleParams: BlrRangeLegendMinMaxSliderType = {
+    theme: 'Light',
+    rangeInputId: 'range-legend-cmpt',
+    startValue: '200$',
+    endValue: '400$',
+    size: 'lg',
+    list: [
+        '100$',
+        '200$',
+        '300$',
+        '400$',
+        '500$',
+    ],
+    stepFactor: 1,
+    btnVariant: 'primary',
+    incrementIcon: 'blrPlus',
+    decrementIcon: 'blrMinus',
+    onChange: () => null,
+};
+
+describe('blr-range-legend-min-max-slider', () => {
+    it('is having two sliders containing the right className', async () => {
+        const element = await fixture(BlrRangeLegendMinMaxSliderRenderFunction(sampleParams));
+        const inputWrapper = querySelectorDeep('.range-wrapper', element.getRootNode() as HTMLElement);
+        const textareas = querySelectorAllDeep('input', inputWrapper?.getRootNode() as HTMLElement);
+        const classNameInputOne = textareas[0]?.className;
+        const classNameInputTwo = textareas[1]?.className;
+
+       expect(classNameInputOne).to.contain('range'); 
+       expect(classNameInputTwo).to.contain('range'); 
+    });
+
+    it('properly renders legend', async () => {
+        const element = await fixture(BlrRangeLegendMinMaxSliderRenderFunction(sampleParams));
+        const inputWrapper = querySelectorDeep('.range-wrapper', element.getRootNode() as HTMLElement);
+        const rangeNumbersElement = querySelectorDeep('.range__numbers', inputWrapper?.getRootNode() as HTMLElement);
+        const allRangePoints = querySelectorAllDeep('.range__point', rangeNumbersElement?.getRootNode() as HTMLParagraphElement);
+
+        allRangePoints.forEach(point => {
+            expect(point).to.exist;
+        });
+        expect(allRangePoints.length).to.equal(sampleParams.list.length)
+    });
+})

packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.ts

@@ -22,17 +22,17 @@ export class BlrRangeLegendMinMaxSlider extends LitElement {
 
   @property() startValue!: string;
   @property() endValue!: string;
-  @property() list!: Array<string>;
-  @property() stepFactor!: number;
+  @property({ type: Array }) list!: Array<string>;
+  @property({ type: Number }) stepFactor!: number;
 
   @property() size: FormSizesType = 'md';
   @property() btnVariant: ActionVariantType = 'silent';
 
   @property() incrementIcon!: SizelessIconType;
   @property() decrementIcon!: SizelessIconType;
 
-  @property() showLegend?: boolean = true;
-  @property() disabled?: boolean = false;
+  @property({ type: Boolean }) showLegend?: boolean = true;
+  @property({ type: Boolean }) disabled?: boolean = false;
 
   @property() theme: ThemeType = 'Light';
 

packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.ts

@@ -18,21 +18,21 @@ export class BlrRangeMinMaxSlider extends LitElement {
 
   @property() rangeInputId!: string;
 
-  @property() startValue!: number;
-  @property() endValue!: number;
-  @property() minValue!: number;
-  @property() maxValue!: number;
+  @property({ type: Number }) startValue!: number;
+  @property({ type: Number }) endValue!: number;
+  @property({ type: Number }) minValue!: number;
+  @property({ type: Number }) maxValue!: number;
   @property() units?: string = '';
-  @property() stepFactor!: number;
+  @property({ type: Number }) stepFactor!: number;
 
   @property() size: FormSizesType = 'md';
   @property() btnVariant: ActionVariantType = 'silent';
 
   @property() incrementIcon!: SizelessIconType;
   @property() decrementIcon!: SizelessIconType;
 
-  @property() showLegend?: boolean = true;
-  @property() disabled?: boolean = false;
+  @property({ type: Boolean }) showLegend?: boolean = true;
+  @property({ type: Boolean }) disabled?: boolean = false;
 
   @property() theme: ThemeType = 'Light';