Skip to content

Commit

Permalink
chore(InputMasked): refactor docs
Browse files Browse the repository at this point in the history
  • Loading branch information
tujoworker committed Jan 9, 2024
1 parent 16ed821 commit f0421e6
Show file tree
Hide file tree
Showing 7 changed files with 29 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -172,11 +172,11 @@ export const InputMaskedExamplePrefix = () => (
</Wrapper>
)

export const InputMaskedExamplePhone = () => (
export const InputMaskedExampleCustomMask = () => (
<Wrapper>
<ComponentBox data-visual-test="input-masked-phone">
<ComponentBox data-visual-test="input-masked-custom-mask">
<InputMasked
label="Masked input"
label="Custom mask"
mask={[
'0',
'0',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
InputMaskedExampleCustomNumberMask,
InputMaskedExampleNumberMask,
InputMaskedExamplePrefix,
InputMaskedExamplePhone,
InputMaskedExampleCustomMask,
InputMaskedExampleMulti,
} from 'Docs/uilib/components/input-masked/Examples'
import ChangeLocale from 'dnb-design-system-portal/src/core/ChangeLocale'
Expand Down Expand Up @@ -52,9 +52,13 @@ When you use `as_currency` it will create a mask for you and inherit the locale

<InputMaskedExamplePrefix />

### Phone Number, starting with 4
### Custom mask

<InputMaskedExamplePhone />
This is an example of how you can utilize a custom mask.

For a phone number input, use the [PhoneNumber](/uilib/extensions/forms/feature-fields/PhoneNumber/) field instead.

<InputMaskedExampleCustomMask />

### Mask with multiple inputs

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
Flex,
FormLabel,
} from '@dnb/eufemia/src'
import { FieldBlock, Form } from '@dnb/eufemia/src/extensions/forms'
import { Field, FieldBlock, Form } from '@dnb/eufemia/src/extensions/forms'
import { Provider } from '@dnb/eufemia/src/shared'

const Wrapper = styled.div`
Expand Down Expand Up @@ -360,3 +360,15 @@ export const InputScreenshotTests = () => {
</Wrapper>
)
}

export const CurrencyField = () => {
return (
<ComponentBox hideCode>
<Field.Currency
label="Amount"
value={1234}
onChange={(value) => console.log('onChange', value)}
/>
</ComponentBox>
)
}

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,14 @@
showTabs: true
---

import InlineImg from 'dnb-design-system-portal/src/shared/tags/Img'
import InputMaskedUsage from 'Docs/uilib/components/input/assets/input-masked.svg'
import * as Examples from './Examples'

## Description

The input component is an umbrella component for all inputs which share the same style as the classic `text` input field.

**NB:** Is [InputMasked](/uilib/components/input-masked/) what you are looking for?
### Masked input fields

<InlineImg
src={InputMaskedUsage}
caption="Consider using input field with a mask"
className="mint-green-12"
/>
You may consider to use [Currency](/uilib/extensions/forms/feature-fields/Currency/) or [InputMasked](/uilib/components/input-masked/) for

<Examples.CurrencyField />
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ describe.each(['ui', 'sbanken'])('Input for %s', (themeName) => {
const screenshot = await makeScreenshot({
style,
selector:
'[data-visual-test="input-masked-phone"] .dnb-input__shell',
'[data-visual-test="input-masked-custom-mask"] .dnb-input__shell',
})
expect(screenshot).toMatchImageSnapshot()
})
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit f0421e6

Please sign in to comment.