-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(TextCounter): add new fragment used in Textarea (#3250)
This is to compliment PR #3210 and make it possible to easier use it in other cases as well.
- Loading branch information
1 parent
ed115d5
commit 3093c28
Showing
38 changed files
with
510 additions
and
82 deletions.
There are no files selected for viewing
15 changes: 15 additions & 0 deletions
15
...s/dnb-design-system-portal/src/docs/uilib/components/fragments/text-counter.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| --- | ||
| title: 'TextCounter' | ||
| description: 'The TextCounter is a component designed to provide real-time character count feedback in text input fields.' | ||
| showTabs: true | ||
| theme: 'sbanken' | ||
| status: null | ||
| hideTabs: | ||
| - title: Events | ||
| --- | ||
|
|
||
| import Info from './text-counter/info' | ||
| import Demos from './text-counter/demos' | ||
|
|
||
| <Info /> | ||
| <Demos /> |
77 changes: 77 additions & 0 deletions
77
...es/dnb-design-system-portal/src/docs/uilib/components/fragments/text-counter/Examples.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| /** | ||
| * UI lib Component Example | ||
| * | ||
| */ | ||
|
|
||
| import React from 'react' | ||
| import ComponentBox from '../../../../../shared/tags/ComponentBox' | ||
| import { TextCounter } from '@dnb/eufemia/src/fragments' | ||
| import { Field, Form } from '@dnb/eufemia/src/extensions/forms' | ||
| import { Flex } from '@dnb/eufemia/src' | ||
| import type { TextCounterProps } from '@dnb/eufemia/src/fragments/text-counter/TextCounter' | ||
|
|
||
| export function CountCharactersDown() { | ||
| return ( | ||
| <ComponentBox data-visual-test="text-counter-down"> | ||
| <TextCounter variant="down" text="test" max={10} /> | ||
| </ComponentBox> | ||
| ) | ||
| } | ||
|
|
||
| export function CountCharactersUp() { | ||
| return ( | ||
| <ComponentBox data-visual-test="text-counter-up"> | ||
| <TextCounter variant="up" text="test" max={10} /> | ||
| </ComponentBox> | ||
| ) | ||
| } | ||
|
|
||
| export function CountCharactersInteractive() { | ||
| return ( | ||
| <ComponentBox> | ||
| {() => { | ||
| const Counter = () => { | ||
| const { data } = Form.useData('text-counter-up', initialData) | ||
| return ( | ||
| <Flex.Stack divider="line"> | ||
| <Flex.Vertical spacing="x-small"> | ||
| <Field.String | ||
| label="Text" | ||
| path="/text" | ||
| maxLength={data.max} | ||
| /> | ||
| <TextCounter | ||
| variant={data.variant} | ||
| text={data.text} | ||
| max={data.max} | ||
| /> | ||
| </Flex.Vertical> | ||
| <Field.Toggle | ||
| valueOn="down" | ||
| valueOff="up" | ||
| textOn="Down" | ||
| textOff="Up" | ||
| variant="buttons" | ||
| label="Variant" | ||
| path="/variant" | ||
| /> | ||
| </Flex.Stack> | ||
| ) | ||
| } | ||
|
|
||
| const variant: TextCounterProps['variant'] = 'down' | ||
| const initialData = { | ||
| max: 10, | ||
| variant, | ||
| text: 'Count me!', | ||
| } | ||
|
|
||
| return ( | ||
| <Form.Handler id="text-counter-up"> | ||
| <Counter /> | ||
| </Form.Handler> | ||
| ) | ||
| }} | ||
| </ComponentBox> | ||
| ) | ||
| } |
19 changes: 19 additions & 0 deletions
19
...design-system-portal/src/docs/uilib/components/fragments/text-counter/demos.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| --- | ||
| showTabs: true | ||
| --- | ||
|
|
||
| import * as Examples from './Examples' | ||
|
|
||
| ## Demos | ||
|
|
||
| ### Count characters downwards | ||
|
|
||
| <Examples.CountCharactersDown /> | ||
|
|
||
| ### Count characters upwards | ||
|
|
||
| <Examples.CountCharactersUp /> | ||
|
|
||
| ### Interactive | ||
|
|
||
| <Examples.CountCharactersInteractive /> |
11 changes: 11 additions & 0 deletions
11
...-design-system-portal/src/docs/uilib/components/fragments/text-counter/info.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| --- | ||
| showTabs: true | ||
| --- | ||
|
|
||
| ## Description | ||
|
|
||
| The `TextCounter` is a component designed to provide real-time character count feedback in text input fields. | ||
|
|
||
| It provides the correct text translations and color and a visual indicator of the remaining characters. | ||
|
|
||
| It is used in the [Textarea](/uilib/components/textarea/) component. |
13 changes: 13 additions & 0 deletions
13
...n-system-portal/src/docs/uilib/components/fragments/text-counter/properties.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| --- | ||
| showTabs: true | ||
| --- | ||
|
|
||
| ## Properties | ||
|
|
||
| | Properties | Description | | ||
| | --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `text` | _(required)_ The text to count characters from. | | ||
| | `max` | _(required)_ The maximum number of characters allowed. | | ||
| | `variant` | _(optional)_ The counting variant. Can be either `up` (counts up from zero) or `down` (counts down from max). Default is `down`. | | ||
| | `bypassAriaLive` | _(optional)_ If true, AriaLive is bypassed. This is useful to signal that a given input field value should not be read out. | | ||
| | [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.