diff --git a/frontend/packages/policy-editor/src/components/ExpandablePolicyCard/ExpandablePolicyCard.module.css b/frontend/packages/policy-editor/src/components/ExpandablePolicyCard/ExpandablePolicyCard.module.css index 25aa1e7525b..01750c63ab1 100644 --- a/frontend/packages/policy-editor/src/components/ExpandablePolicyCard/ExpandablePolicyCard.module.css +++ b/frontend/packages/policy-editor/src/components/ExpandablePolicyCard/ExpandablePolicyCard.module.css @@ -32,3 +32,7 @@ .inputParagraph { margin-bottom: 5px; } + +.descriptionInput { + margin-top: 30px; +} diff --git a/frontend/packages/policy-editor/src/components/ExpandablePolicyCard/ExpandablePolicyCard.tsx b/frontend/packages/policy-editor/src/components/ExpandablePolicyCard/ExpandablePolicyCard.tsx index 95acba02b0e..76eb09cb4c9 100644 --- a/frontend/packages/policy-editor/src/components/ExpandablePolicyCard/ExpandablePolicyCard.tsx +++ b/frontend/packages/policy-editor/src/components/ExpandablePolicyCard/ExpandablePolicyCard.tsx @@ -5,7 +5,7 @@ import { ErrorMessage, Select, Paragraph, - LegacyTextArea, + Textarea, } from '@digdir/design-system-react'; import { PlusIcon } from '@navikt/aksel-icons'; import classes from './ExpandablePolicyCard.module.css'; @@ -29,56 +29,17 @@ import { import { useTranslation } from 'react-i18next'; export type ExpandablePolicyCardProps = { - /** - * The rule to display in the card - */ policyRule: PolicyRuleCard; - /** - * The possible actions to select from - */ actions: PolicyAction[]; - /** - * The possible subjects to select from - */ subjects: PolicySubject[]; - /** - * The list of all the rules - */ rules: PolicyRuleCard[]; - /** - * useState function to update the list of rules - */ setPolicyRules: React.Dispatch>; - /** - * The ID of the resource - */ resourceId: string; - /** - * The type of the resource - */ resourceType: string; - /** - * Function to be executed when clicking duplicate rule - * @returns void - */ handleCloneRule: () => void; - /** - * Function to be executed when clicking delete rule - * @returns void - */ handleDeleteRule: () => void; - /** - * Flag to decide if errors should be shown or not - */ showErrors: boolean; - /** - * Function to save the policy - * @returns - */ savePolicy: (rules: PolicyRuleCard[]) => void; - /** - * The usage type of the policy editor - */ usageType: PolicyEditorUsage; }; @@ -518,17 +479,16 @@ export const ExpandablePolicyCard = ({ {showErrors && hasSubjectsError && displayWarningCard(t('policy_editor.rule_card_subjects_error'))} -
- handleChangeDescription(e.currentTarget.value)} rows={5} onBlur={() => savePolicy(rules)} id={`description-${uniqueId}`} + className={classes.descriptionInput} />
diff --git a/frontend/resourceadm/components/ResourcePageInputs/ResourceLanguageTextArea.tsx b/frontend/resourceadm/components/ResourcePageInputs/ResourceLanguageTextArea.tsx index f279c0c3e3e..f999c46cfc6 100644 --- a/frontend/resourceadm/components/ResourcePageInputs/ResourceLanguageTextArea.tsx +++ b/frontend/resourceadm/components/ResourcePageInputs/ResourceLanguageTextArea.tsx @@ -1,56 +1,19 @@ import React, { forwardRef } from 'react'; import classes from './ResourcePageInputs.module.css'; -import { Paragraph, Label, LegacyTextArea } from '@digdir/design-system-react'; +import { Textarea } from '@digdir/design-system-react'; import { InputFieldErrorMessage } from './InputFieldErrorMessage'; type ResourceLanguageTextAreaProps = { - /** - * The label of the text field - */ label: string; - /** - * The description of the text field - */ description: string; - /** - * The value in the field - */ value: string; - /** - * Function that updates the value in the field - * @param value the new value - * @returns void - */ onChangeValue: (value: string) => void; - /** - * Function to be executed when the field is focused - * @returns void - */ onFocus: () => void; - /** - * The id of the field - */ id: string; - /** - * Flag for if the value is valid - */ isValid: boolean; - /** - * Function to be executed on key down - */ onKeyDown?: React.KeyboardEventHandler; - /** - * Function to be executed on blur - * @returns void - */ onBlur: () => void; - /** - * Flag for if the error message should be shown - */ showErrorMessage?: boolean; - /** - * The text to be shown - */ errorText?: string; }; @@ -95,21 +58,17 @@ export const ResourceLanguageTextArea = forwardRef< return ( <>
-
- - {description} - - onChangeValue(e.currentTarget.value)} onFocus={onFocus} rows={5} id={id} - isValid={isValid} + error={!isValid} ref={ref} onKeyDown={onKeyDown} onBlur={onBlur} diff --git a/frontend/resourceadm/components/RightTranslationBar/RightTranslationBar.tsx b/frontend/resourceadm/components/RightTranslationBar/RightTranslationBar.tsx index 3a8736b711c..dad18e57558 100644 --- a/frontend/resourceadm/components/RightTranslationBar/RightTranslationBar.tsx +++ b/frontend/resourceadm/components/RightTranslationBar/RightTranslationBar.tsx @@ -1,44 +1,18 @@ import React, { forwardRef } from 'react'; import classes from './RightTranslationBar.module.css'; import { GlobeIcon } from '@navikt/aksel-icons'; -import { Textfield, Alert, Paragraph, Heading, LegacyTextArea } from '@digdir/design-system-react'; +import { Textfield, Alert, Paragraph, Heading, Textarea } from '@digdir/design-system-react'; import type { SupportedLanguage } from 'resourceadm/types/global'; import type { SupportedLanguageKey } from 'app-shared/types/ResourceAdm'; import { useTranslation } from 'react-i18next'; export type RightTranslationBarProps = { - /** - * The title of the selected inputfield - */ title: string; - /** - * Optional Boolean flag to decide if a text area should be used instead of a text field - */ usesTextArea?: boolean; - /** - * The value to display in the input field - */ value: SupportedLanguageKey; - /** - * Function that updates the value when changes are made in the input field. - * @param value The language object - */ onLanguageChange: (value: SupportedLanguage) => void; - /** - * Flag to handle when to show the errors - */ showErrors: boolean; - /** - * Function to be executed when leaving the last field in the translation bar - * - * @param e the keyboard event - * @returns void - */ onLeaveLastField: (e: React.KeyboardEvent) => void; - /** - * Function to be executed on blur - * @returns - */ onBlur: () => void; }; @@ -96,16 +70,16 @@ export const RightTranslationBar = forwardRef< if (usesTextArea) { return ( - handleChange(lang, e.currentTarget.value)} rows={5} label={label} - isValid={!(showErrors && value[lang] === '')} + error={showErrors && value[lang] === ''} ref={!isLast ? (ref as React.Ref) : undefined} onKeyDown={(e) => (isLast ? handleTabOutOfTranslationBar(e) : undefined)} onBlur={onBlur} + size='small' /> ); }