feat(ui-components): implement events for number input

.vscode/settings.json

@@ -33,6 +33,9 @@
     "package-lock.json": true
   },
   "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.rulers": [
+    120 // prettier print width
+  ],
   "lit-plugin.rules.no-missing-import": "off",
   "lit-plugin.strict": true
 }

packages/js-example-app/src/index.js

@@ -9,6 +9,7 @@ const blrButton = document.getElementsByTagName('blr-text-button')[0];
 const blrCheckbox = document.getElementsByTagName('blr-checkbox')[0];
 const blrSelect = document.getElementsByTagName('blr-select')[0];
 const blrTextInput = document.getElementsByTagName('blr-text-input')[0];
+const blrNumberInput = document.getElementsByTagName('blr-number-input')[0];
 const blrTextArea = document.getElementsByTagName('blr-textarea')[0];
 
 const addLog = (log) => {
@@ -81,6 +82,18 @@ blrTextInput.addEventListener('blrTextValueChange', () => {
   addLog('blr-text-input changed');
 });
 
+blrNumberInput.addEventListener('blrFocus', () => {
+  addLog('blr-number-input focused');
+});
+
+blrNumberInput.addEventListener('blrBlur', () => {
+  addLog('blr-number-input blurred');
+});
+
+blrNumberInput.addEventListener('blrNumberValueChange', () => {
+  addLog('blr-number-input value changed');
+});
+
 blrTextArea.addEventListener('blrFocus', () => {
   addLog('blr-textarea focused');
 });

packages/ui-library/src/components/number-input/index.stories.ts

@@ -20,7 +20,7 @@ const sharedStyles = html`
 
 const defaultParams: BlrNumberInputType = {
   theme: 'Light',
-  size: 'md',
+  sizeVariant: 'md',
   stepperVariant: 'vertical',
   placeholder: 'Placeholder-text',
   value: undefined,
@@ -64,9 +64,9 @@ export default {
         category: 'Appearance',
       },
     },
-    size: {
+    sizeVariant: {
       name: 'sizeVariant',
-      description: ' Choose size of the component. ',
+      description: ' Choose sizeVariant of the component. ',
       options: FormSizes,
       control: { type: 'radio' },
       table: {
@@ -285,37 +285,47 @@ export default {
       },
       control: { type: 'text', label: 'Number Input' },
     },
-    onChange: {
-      name: 'onChange',
+    //Events
+    blrNumberValueChange: {
+      name: 'blrNumberValueChange',
       description: 'Fires when the value changes.',
-      action: 'onChange',
+      action: 'blrNumberValueChange',
       table: {
         disable: false,
         category: 'Events',
       },
     },
-    onSelect: {
-      name: 'onSelect',
+    blrSelect: {
+      name: 'blrSelect',
       description: 'Fires when some text is selected.',
-      action: 'onSelect',
+      action: 'blrSelect',
       table: {
         disable: false,
         category: 'Events',
       },
     },
-    onFocus: {
-      name: 'onFocus',
+    blrFocus: {
+      name: 'blrFocus',
       description: 'Fires when the component is focused.',
-      action: 'onFocus',
+      action: 'blrFocus',
       table: {
         disable: false,
         category: 'Events',
       },
     },
-    onBlur: {
-      name: 'onBlur',
+    blrBlur: {
+      name: 'blrBlur',
       description: 'Fires when the component lost focus.',
-      action: 'onBlur',
+      action: 'blrBlur',
+      table: {
+        disable: false,
+        category: 'Events',
+      },
+    },
+    blrNumberStepperClick: {
+      name: 'blrNumberStepperClick',
+      description: 'Fires when one of the stepper buttons is clicked.',
+      action: 'blrNumberStepperClick',
       table: {
         disable: false,
         category: 'Events',
@@ -352,7 +362,7 @@ export default {
         component: `<markdown>
       Number Input allows users to  enter numbers into a designated area. Users can interact with the Number Input component by clicking or tapping on it, which activates it for text entry. It often displays a blinking cursor to indicate the current number insertion point.
       - [**Appearance**](#appearance)
-        - [**Size Variant**](#size-variant)
+        - [**SizeVariant**](#sizeVariant)
         - [**Stepper Variant**](#stepper-variant)
       - [**Content / Settings**](#content--settings)
         - [**Placeholder**](#placeholder)
@@ -377,17 +387,17 @@ export const NumberInput = (params: BlrNumberInputType) => BlrNumberInputRenderF
 
 /**
  * ## Appearance
- *  ### Size Variant
+ *  ### Size
  * The Number Input component comes in 3 sizes: SM, MD and LG.
  */
-export const SizeVariant = (params: BlrNumberInputType) => {
+export const Size = (params: BlrNumberInputType) => {
   return html`
     ${sharedStyles}
     <div class="wrapper">
       ${BlrNumberInputRenderFunction({
         ...params,
         labelAppendix: undefined,
-        size: 'sm',
+        sizeVariant: 'sm',
         label: 'Number input SM',
         value: undefined,
         numberInputId: 'test-sm',
@@ -397,7 +407,7 @@ export const SizeVariant = (params: BlrNumberInputType) => {
       ${BlrNumberInputRenderFunction({
         ...params,
         labelAppendix: undefined,
-        size: 'md',
+        sizeVariant: 'md',
         label: 'Number input MD',
         value: undefined,
         numberInputId: 'test-md',
@@ -407,7 +417,7 @@ export const SizeVariant = (params: BlrNumberInputType) => {
       ${BlrNumberInputRenderFunction({
         ...params,
         labelAppendix: undefined,
-        size: 'lg',
+        sizeVariant: 'lg',
         label: 'Number input LG',
         value: undefined,
         numberInputId: 'test-lg',
@@ -416,7 +426,7 @@ export const SizeVariant = (params: BlrNumberInputType) => {
   `;
 };
 
-SizeVariant.story = { name: ' ' };
+Size.story = { name: ' ' };
 
 /**
 The Number Input component has 3 stepper variants: vertical, horizontal and split.
@@ -470,7 +480,7 @@ export const Placeholder = (params: BlrNumberInputType) => {
     <div class="wrapper">
       ${BlrNumberInputRenderFunction({
         ...params,
-        size: 'md',
+        sizeVariant: 'md',
         label: 'With placeholder',
         labelAppendix: undefined,
         value: undefined,
@@ -480,7 +490,7 @@ export const Placeholder = (params: BlrNumberInputType) => {
     <div class="wrapper">
       ${BlrNumberInputRenderFunction({
         ...params,
-        size: 'md',
+        sizeVariant: 'md',
         label: 'Without placeholder',
         labelAppendix: undefined,
         placeholder: '',

packages/ui-library/src/components/number-input/index.test.ts

@@ -3,9 +3,10 @@ import '@boiler/ui-library/dist/';
 import { BlrNumberInputRenderFunction } from './renderFunction';
 import type { BlrNumberInputType } from '.';
 
-import { fixture, expect, nextFrame } from '@open-wc/testing';
+import { fixture, expect, nextFrame, oneEvent } from '@open-wc/testing';
 import { querySelectorAllDeep, querySelectorDeep } from 'query-selector-shadow-dom';
 import { getRandomString } from '../../utils/get-random.string';
+import { BlrFocusEvent } from '../../globals/events';
 
 const sampleParams: BlrNumberInputType = {
   placeholder: 'Type your message here ..',
@@ -95,7 +96,7 @@ describe('blr-number-input', () => {
     expect(errorClassName).to.contain('error');
   });
 
-  it('has a size md by default', async () => {
+  it('has a sizeVariant md by default', async () => {
     const element = await fixture(BlrNumberInputRenderFunction(sampleParams));
 
     const numberInputWrapper = querySelectorDeep('.input-wrapper', element.getRootNode() as HTMLElement);
@@ -104,8 +105,8 @@ describe('blr-number-input', () => {
     expect(className).to.contain('md');
   });
 
-  it('has a size sm when "size" is set to "sm" ', async () => {
-    const element = await fixture(BlrNumberInputRenderFunction({ ...sampleParams, size: 'sm' }));
+  it('has a sizeVariant sm when "sizeVariant" is set to "sm" ', async () => {
+    const element = await fixture(BlrNumberInputRenderFunction({ ...sampleParams, sizeVariant: 'sm' }));
 
     const numberInputWrapper = querySelectorDeep('.input-wrapper', element.getRootNode() as HTMLElement);
     const className = numberInputWrapper?.className;
@@ -176,4 +177,29 @@ describe('blr-number-input', () => {
       // Clicking the stepper button with the decrease label decreases the value by our chosen step (6 - 5 = 1)
     });
   }
+
+  it('fires blrFocus and blrBlur events', async () => {
+    const element = await fixture(
+      BlrNumberInputRenderFunction({
+        ...sampleParams,
+      })
+    );
+
+    const input = querySelectorDeep('input', element.getRootNode() as HTMLElement);
+
+    setTimeout(() => {
+      input!.focus();
+    });
+    const focusEvent: BlrFocusEvent = await oneEvent(element, 'blrFocus');
+    expect(focusEvent.detail.originalEvent).to.exist;
+
+    // just finding something else to focus instead, it's not important what
+    const stepper = querySelectorDeep('button', element.getRootNode() as HTMLElement);
+
+    setTimeout(() => {
+      stepper!.focus();
+    });
+    const blurEvent: BlrFocusEvent = await oneEvent(element, 'blrBlur');
+    expect(blurEvent.detail.originalEvent).to.exist;
+  });
 });