diff --git a/components/atom/input/demo/index.js b/components/atom/input/demo/index.js index e843b50e7..faba06d87 100644 --- a/components/atom/input/demo/index.js +++ b/components/atom/input/demo/index.js @@ -151,6 +151,28 @@ const TypeDemo = () => { ) } ], + [ + 'MASK WITH RIGHT ICON', + { + type: inputTypes.MASK, + mask: {mask: Number}, + placeholder: 'ES00 0000 0000 00 0000000000', + charsSize: 31, + value: '100000', + rightIcon: '€', + radix: ',', + thousandsSeparator: '.', + mapToRadix: ['.'] + }, + { + description: ( + <> + Let the user define its own mask for custom purposes. More info at{' '} + http://shorturl.at/foBF1 + + ) + } + ], [ 'NUMBER', { diff --git a/components/atom/input/src/Mask/iMask.js b/components/atom/input/src/Mask/iMask.js index 03a3efd58..e25003319 100644 --- a/components/atom/input/src/Mask/iMask.js +++ b/components/atom/input/src/Mask/iMask.js @@ -1,6 +1,6 @@ import {IMaskMixin} from 'react-imask' -import Input from '../Input/Component/index.js' +import Input from '../Input/index.js' const IMask = IMaskMixin(({inputRef, value, size, ...props}) => { return diff --git a/components/atom/input/test/index.test.js b/components/atom/input/test/index.test.js index 9931cd7f2..800b297f8 100644 --- a/components/atom/input/test/index.test.js +++ b/components/atom/input/test/index.test.js @@ -387,6 +387,32 @@ describe(json.name, () => { expect(findClassName(container.innerHTML)).to.be.null expect(value).to.equal('') }) + + it('should be able to display addons', () => { + const props = { + className: 'extended-classNames', + type: pkg.inputTypes.MASK, + mask: {mask: Number}, + placeholder: 'Ex: 100.000,00', + charsSize: 31, + value: '100000', + rightIcon: '€', + radix: ',', + thousandsSeparator: '.', + mapToRadix: ['.'], + leftAddon: 'leftAddon', + rightAddon: 'rightAddon' + } + + // When + const {getByRole, getByText} = setup(props) + const input = getByRole('textbox') + + // Then + expect(input).to.have.value('100.000') + expect(getByText('leftAddon')).to.exist + expect(getByText('rightAddon')).to.exist + }) }) describe(`${Component.displayName} ${pkg.inputTypes.SUI_PASSWORD}`, () => {