Skip to content

Commit

Permalink
feat(ui-components): implement events for number input (#937)
Browse files Browse the repository at this point in the history 
* feat(ui-components): implement events for number input
---------

Co-authored-by: Christian Hoffmann <112889877+ChristianHoffmannS2@users.noreply.github.com>
Co-authored-by: JpunktWpunkt <jessica.wittig@accenture.com>
  • Loading branch information
@remmycat @ChristianHoffmannS2 @JpunktWpunkt
3 people authored Mar 13, 2024
1 parent 8c2b19a commit 9363f94
Show file tree
Hide file tree
Showing 7 changed files with 222 additions and 119 deletions.
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
13 changes: 13 additions & 0 deletions packages/js-example-app/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const blrButton = document.getElementsByTagName('blr-button-text')[0];
const blrCheckbox = document.getElementsByTagName('blr-checkbox')[0];
const blrSelect = document.getElementsByTagName('blr-select')[0];
const blrInputFieldText = document.getElementsByTagName('blr-input-field-text')[0];
const blrInputFieldNumber = document.getElementsByTagName('blr-input-field-number')[0];
const blrTextArea = document.getElementsByTagName('blr-textarea')[0];

const addLog = (log) => {
Expand Down Expand Up @@ -81,6 +82,18 @@ blrInputFieldText.addEventListener('blrTextValueChange', () => {
addLog('blr-input-field-text changed');
});

blrInputFieldNumber.addEventListener('blrFocus', () => {
addLog('blr-number-input focused');
});

blrInputFieldNumber.addEventListener('blrBlur', () => {
addLog('blr-number-input blurred');
});

blrInputFieldNumber.addEventListener('blrNumberValueChange', () => {
addLog('blr-number-input value changed');
});

blrTextArea.addEventListener('blrFocus', () => {
addLog('blr-textarea focused');
});
Expand Down
79 changes: 28 additions & 51 deletions packages/ui-library/src/components/input-field-number/index.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { FormSizes, Units } from '../../globals/constants';
import { Themes } from '../../foundation/_tokens-generated/index.themes';
import { PureIconKeys } from '@boiler/icons/icons-optimized';
import { html } from 'lit-html';
import { action } from '@storybook/addon-actions';

// this loads the all components instances and registers their html tags
import '../../index';
Expand All @@ -20,7 +19,7 @@ const sharedStyles = html`

const defaultParams: BlrInputFieldNumberType = {
theme: 'Light',
size: 'md',
sizeVariant: 'md',
stepperVariant: 'vertical',
placeholder: 'Placeholder-text',
value: undefined,
Expand Down Expand Up @@ -51,10 +50,6 @@ export default {
args: {
...defaultParams,
name: 'InputFieldNumber',
onChange: () => action('onChange'),
onSelect: () => action('onSelect'),
onFocus: () => action('onFocus'),
onBlur: () => action('onBlur'),
},
argTypes: {
theme: {
Expand All @@ -64,17 +59,15 @@ export default {
category: 'Appearance',
},
},
size: {
name: 'sizeVariant',
description: ' Choose size of the component. ',
sizeVariant: {
description: ' Choose sizeVariant of the component. ',
options: FormSizes,
control: { type: 'radio' },
table: {
category: 'Appearance',
},
},
stepperVariant: {
name: 'stepperVariant',
description: 'Choose stepperVariant of the stepper that is used in the component.',
options: ['vertical', 'horizontal', 'split'],
control: {
Expand All @@ -90,15 +83,13 @@ export default {
},
},
placeholder: {
name: 'placeholder',
description: 'Enter string used as placeholder text.',
defaultValue: 'Placeholder-text',
table: {
category: 'Content / Settings',
},
},
value: {
name: 'value',
description: 'Enter the value the component should have.',
table: {
category: 'Content / Settings',
Expand All @@ -109,7 +100,6 @@ export default {
},
},
decimals: {
name: 'decimals',
description: 'Enter how many decimals the value of the component has.',
table: {
category: 'Content / Settings',
Expand All @@ -119,7 +109,6 @@ export default {
},
},
leadingZeros: {
name: 'leadingZeros',
description: 'Enter how many leading zeros the value of the component has.',
table: {
category: 'Content / Settings',
Expand All @@ -129,14 +118,12 @@ export default {
},
},
prependUnit: {
name: 'prependUnit',
description: 'Choose if unit is displayed as a prefix or suffix.',
table: {
category: 'Content / Settings',
},
},
unit: {
name: 'unit',
description: 'Select a unit which is displayed next to the input.',
options: [undefined, ...Units],
control: {
Expand All @@ -147,7 +134,6 @@ export default {
},
},
step: {
name: 'step',
description: 'Enter how much the value should change when the stepper buttons are used.',
control: {
type: 'number',
Expand All @@ -158,7 +144,6 @@ export default {
},

hasLabel: {
name: 'hasLabel',
description: 'Choose if component has a label.',
defaultValue: true,
control: { type: 'boolean' },
Expand All @@ -167,7 +152,6 @@ export default {
},
},
label: {
name: 'label',
description: 'Enter string used as label text.',
control: {
type: 'text',
Expand All @@ -178,7 +162,6 @@ export default {
if: { arg: 'hasLabel', eq: true },
},
labelAppendix: {
name: 'labelAppendix',
description:
'Enter string used as an appendix to the label. Use this to inform the user in case this field is required.',
control: {
Expand All @@ -190,7 +173,6 @@ export default {
if: { arg: 'hasLabel', eq: true },
},
hasHint: {
name: 'hasHint',
description: ' Choose if component has a hint message. ',
defaultValue: true,
control: {
Expand Down Expand Up @@ -218,7 +200,6 @@ export default {
},
},
disabled: {
name: 'disabled',
description:
'Choose if component is disabled. Prevents the user to select or change the value of this component. ',
defaultValue: false,
Expand All @@ -227,7 +208,6 @@ export default {
},
},
readonly: {
name: 'readonly',
description: 'Choose if component is readonly. The user can select but not change the value of this component.',
defaultValue: false,
table: {
Expand All @@ -236,23 +216,20 @@ export default {
},
// Validation
required: {
name: 'required',
description: 'Choose if the component must hold a value after an interaction or a submit.',
defaultValue: false,
table: {
category: 'Validations',
},
},
hasError: {
name: 'hasError',
description: 'Choose if component has an error.',
defaultValue: false,
table: {
category: 'Validations',
},
},
errorMessage: {
name: 'errorMessage',
description: 'Enter string used used as error message.',
table: {
category: 'Validations',
Expand All @@ -271,67 +248,67 @@ export default {
},
//Technical attributes
inputFieldNumberId: {
name: 'inputFieldNumberId',
description: 'Unique identifier for this component.',
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.',
table: {
category: 'Technical Attributes',
},
control: { type: 'text', label: 'Input Field Number' },
},
onChange: {
name: 'onChange',
//Events
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: {
category: 'Events',
},
},
blrNumberStepperClick: {
name: 'blrNumberStepperClick',
description: 'Fires when one of the stepper buttons is clicked.',
action: 'blrNumberStepperClick',
table: {
disable: false,
category: 'Events',
},
},
// Accessibility attributes
stepIncreaseAriaLabel: {
name: 'stepIncreaseAriaLabel',
description: 'Labels the "up" or increase stepper button to assistive technologies, such as screen readers.',
table: {
category: 'Accessibility',
},
control: { type: 'text', defaultValue: '+' },
},
stepDecreaseAriaLabel: {
name: 'stepDecreaseAriaLabel',
description:
'Labels the "down" or decrease stepper button to assistive technologies, such as screen readers.\nNote that the default value is not a hyphen (-) but the minus sign \\u2212 (\u2212).',
table: {
Expand Down Expand Up @@ -387,7 +364,7 @@ export const SizeVariant = (params: BlrInputFieldNumberType) => {
${BlrInputFieldNumberRenderFunction({
...params,
labelAppendix: undefined,
size: 'sm',
sizeVariant: 'sm',
label: 'Input field number SM',
value: undefined,
inputFieldNumberId: 'test-sm',
Expand All @@ -397,7 +374,7 @@ export const SizeVariant = (params: BlrInputFieldNumberType) => {
${BlrInputFieldNumberRenderFunction({
...params,
labelAppendix: undefined,
size: 'md',
sizeVariant: 'md',
label: 'Input field number MD',
value: undefined,
inputFieldNumberId: 'test-md',
Expand All @@ -407,7 +384,7 @@ export const SizeVariant = (params: BlrInputFieldNumberType) => {
${BlrInputFieldNumberRenderFunction({
...params,
labelAppendix: undefined,
size: 'lg',
sizeVariant: 'lg',
label: 'Input field number LG',
value: undefined,
inputFieldNumberId: 'test-lg',
Expand Down Expand Up @@ -470,7 +447,7 @@ export const Placeholder = (params: BlrInputFieldNumberType) => {
<div class="wrapper">
${BlrInputFieldNumberRenderFunction({
...params,
size: 'md',
sizeVariant: 'md',
label: 'With placeholder',
labelAppendix: undefined,
value: undefined,
Expand All @@ -480,7 +457,7 @@ export const Placeholder = (params: BlrInputFieldNumberType) => {
<div class="wrapper">
${BlrInputFieldNumberRenderFunction({
...params,
size: 'md',
sizeVariant: 'md',
label: 'Without placeholder',
labelAppendix: undefined,
placeholder: '',
Expand Down
Loading

0 comments on commit 9363f94

Please sign in to comment.