diff --git a/src/app-components/Input/Input.module.css b/src/app-components/Input/Input.module.css index 3c7571fa9..5252ad252 100644 --- a/src/app-components/Input/Input.module.css +++ b/src/app-components/Input/Input.module.css @@ -4,3 +4,16 @@ input[type='search'] { background-repeat: no-repeat; padding-right: calc(1.5rem + 10px * 2); } + +.text-padding { + padding: 0 var(--fds-spacing-2); + line-height: 32px; +} + +.focusable:focus-visible { + --fds-focus-border-width: 3px; + outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline); + outline-offset: var(--fds-focus-border-width); + box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow); + border-radius: var(--fds-border_radius-medium); +} diff --git a/src/app-components/Input/Input.tsx b/src/app-components/Input/Input.tsx index 0c8c1d765..e1cc2fc05 100644 --- a/src/app-components/Input/Input.tsx +++ b/src/app-components/Input/Input.tsx @@ -1,13 +1,12 @@ import React from 'react'; import type { InputHTMLAttributes, ReactNode } from 'react'; -import { Textfield } from '@digdir/designsystemet-react'; +import { Paragraph, Textfield } from '@digdir/designsystemet-react'; import type { CharacterLimitProps } from '@digdir/designsystemet-react/dist/types/components/form/CharacterCounter'; +import classes from 'src/app-components/Input/Input.module.css'; import type { InputType } from 'src/app-components/Input/constants'; -import 'src/app-components/Input/Input.module.css'; - export type InputProps = { size?: 'sm' | 'md' | 'lg'; prefix?: string; @@ -18,6 +17,7 @@ export type InputProps = { id?: string; readOnly?: boolean; type?: InputType; + textOnly?: boolean; } & Pick< InputHTMLAttributes, | 'value' @@ -36,6 +36,24 @@ export type InputProps = { export function Input(props: InputProps) { const { size = 'sm', ...rest } = props; + if (props.textOnly) { + const { value, id, className } = props; + if (value === null || (typeof value === 'string' && value.length === 0)) { + return null; + } + + return ( + + {value} + + ); + } + return ( - {value} - - ); - } - - return ( - - ); -} - export type IInputProps = PropsFromGenericComponent<'Input'>; export const InputComponent: React.FunctionComponent = ({ node, overrideDisplay }) => { @@ -118,6 +84,8 @@ export const InputComponent: React.FunctionComponent = ({ node, ove const characterLimit = useCharacterLimit(maxLength); const variant = getVariantWithFormat(inputVariant, reactNumberFormatConfig?.number); + const textOnly = overrideDisplay?.rowReadOnly && readOnly; + const className = formatting?.align ? classes[`text-align-${formatting.align}`] : ''; return ( = ({ node, ove }} > {(variant.type === 'search' || variant.type === 'text') && ( - = ({ node, ove aria-label={ariaLabel} aria-describedby={textResourceBindings?.description ? getDescriptionId(id) : undefined} autoComplete={autocomplete} - className={formatting?.align ? classes[`text-align-${formatting.align}`] : ''} + className={className} readOnly={readOnly} required={required} onBlur={debounce} error={!isValid} + textOnly={textOnly} {...variant.format} onValueChange={(values, sourceInfo) => { if (sourceInfo.source === 'prop') { @@ -184,8 +153,9 @@ export const InputComponent: React.FunctionComponent = ({ node, ove aria-label={ariaLabel} aria-describedby={textResourceBindings?.description ? getDescriptionId(id) : undefined} autoComplete={autocomplete} - className={formatting?.align ? classes[`text-align-${formatting.align}`] : ''} + className={className} readOnly={readOnly} + textOnly={textOnly} required={required} onBlur={debounce} error={!isValid} diff --git a/test/e2e/integration/frontend-test/grid.ts b/test/e2e/integration/frontend-test/grid.ts index 1d903d8cc..a3f5e7149 100644 --- a/test/e2e/integration/frontend-test/grid.ts +++ b/test/e2e/integration/frontend-test/grid.ts @@ -50,11 +50,7 @@ describe('Grid component', () => { .eq(5) .findByRole('textbox', { name: /Prosentandel av gjeld i kredittkort/i }) .type('5'); - cy.get(appFrontend.grid.grid) - .find('tr') - .eq(6) - .findByRole('textbox', { name: /Utregnet totalprosent/i }) - .should('have.value', '85 %'); + cy.get(appFrontend.grid.grid).find('tr').eq(6).findByText('85 %'); cy.get(appFrontend.grid.bolig.percentComponent).should('not.contain.text', 'Prosentandel av gjeld i boliglÄn'); cy.get(appFrontend.errorReport).should('not.exist');