From 449a1592f36fc508b57fb900076d3f145b9c15e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Tue, 17 Dec 2024 10:07:07 +0100 Subject: [PATCH] feat(Forms): add `label` and `showLabel` prop to Form.SubmitIndicator --- .../Form/SubmitIndicator/SubmitIndicator.tsx | 28 +++++-------- .../SubmitIndicator/SubmitIndicatorDocs.ts | 10 +++++ .../__tests__/SubmitIndicator.test.tsx | 41 ++++++++++++++++-- .../style/dnb-form-submit-indicator.scss | 42 ++++++++++--------- .../forms/constants/locales/en-GB.ts | 3 ++ .../forms/constants/locales/nb-NO.ts | 3 ++ 6 files changed, 86 insertions(+), 41 deletions(-) diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicator.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicator.tsx index 3e6de9c123f..638f7cd8ee4 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicator.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicator.tsx @@ -1,14 +1,13 @@ import React, { useCallback, useMemo, useRef, useState } from 'react' import classnames from 'classnames' -import { Icon, Space, Tooltip } from '../../../../components' +import { Space } from '../../../../components' import type { SpaceProps } from '../../../../components/Space' -import { check } from '../../../../icons' import type { SubmitState } from '../../types' import { omitSpacingProps, pickSpacingProps, } from '../../../../components/flex/utils' -import { useTranslation } from '../../../../shared' +import useTranslation from '../../hooks/useTranslation' import { convertJsxToString } from '../../../../shared/component-helper' // SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85 @@ -17,20 +16,23 @@ const useLayoutEffect = export type Props = { state: SubmitState + label?: React.ReactNode + showLabel?: boolean className?: string - successLabel?: string children?: React.ReactNode } & SpaceProps function SubmitIndicator(props: Props) { + const translation = useTranslation() + const { className, children, state, - successLabel = 'Saved', + showLabel, + label = translation.SubmitIndicator.label, ...rest } = props - const translation = useTranslation() const childrenRef = useRef(null) const [willWrap, setWillWrap] = useState(false) const key = useMemo(() => convertJsxToString(children), [children]) @@ -65,7 +67,7 @@ function SubmitIndicator(props: Props) { ? { role: 'status', 'aria-busy': true, - 'aria-label': translation.ProgressIndicator.indicator_label, + 'aria-label': convertJsxToString(label), } : { 'aria-hidden': true, @@ -78,16 +80,8 @@ function SubmitIndicator(props: Props) { {...ariaAttributes} {...omitSpacingProps(rest)} > - {state === 'success' && ( - - - - } - > - {successLabel} - + {showLabel && ( + {label} )} {state && state !== 'success' && state !== 'abort' && ( <> diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicatorDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicatorDocs.ts index 160d8c08265..b903dac6ee5 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicatorDocs.ts +++ b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicatorDocs.ts @@ -6,6 +6,16 @@ export const SubmitIndicatorProperties: PropertiesTableProps = { type: 'string', status: 'required', }, + showLabel: { + doc: 'If `true`, the label will be shown.', + type: 'boolean', + status: 'optional', + }, + label: { + doc: 'Provide a label that will be shown next to the indicator.', + type: 'string', + status: 'optional', + }, children: { doc: 'If content is provided, the component will try to find out if the indicator needs to be put on a new row or not. This way it will animate the height nicely.', type: 'React.Node', diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.test.tsx index 411032ba549..b5c65628aa8 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.test.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.test.tsx @@ -3,8 +3,8 @@ import { render, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { Form } from '../../..' import { axeComponent } from '../../../../../core/jest/jestSetup' +import locales from '../../../constants/locales' -import locales from '../../../../../shared/locales' const nbNO = locales['nb-NO'] describe('Form.SubmitIndicator', () => { @@ -118,10 +118,43 @@ describe('Form.SubmitIndicator', () => { '.dnb-forms-submit-indicator__content' ) - expect(dots).toHaveAttribute( - 'aria-label', - nbNO.ProgressIndicator.indicator_label + expect(dots).toHaveAttribute('aria-label', nbNO.SubmitIndicator.label) + }) + + it('should have aria-label with custom label', () => { + render() + + const dots = document.querySelector( + '.dnb-forms-submit-indicator__content' ) + + expect(dots).toHaveAttribute('aria-label', 'Custom label') + }) + + it('should render when showLabel is true', () => { + render() + + const label = document.querySelector( + '.dnb-forms-submit-indicator__label' + ) + + expect(label).toHaveTextContent(nbNO.SubmitIndicator.label) + }) + + it('should render custom label', () => { + render( + + ) + + const label = document.querySelector( + '.dnb-forms-submit-indicator__label' + ) + + expect(label).toHaveTextContent('Custom label') }) it('should set class with given state', () => { diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/style/dnb-form-submit-indicator.scss b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/style/dnb-form-submit-indicator.scss index 4ddd80d5ae1..e1d4417715a 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/style/dnb-form-submit-indicator.scss +++ b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/style/dnb-form-submit-indicator.scss @@ -1,16 +1,32 @@ @import '../../../../../style/core/utilities.scss'; .dnb-forms-submit-indicator { + --padding-left: 0.5em; + --font-animation: font-size var(--font-animation-duration, 400ms) + var(--easing-default); + --opacity-animation: opacity var(--opacity-animation-duration, 0ms) + var(--easing-default) var(--opacity-animation-delay, 0ms); + + &:has(&__label) { + --font-animation-duration: 400ms; + --opacity-animation-duration: 400ms; + --opacity-animation-delay: 250ms; + } + display: inline; - --padding-left: 0.5em; + &__label { + padding: 0.5em 0; + } &__content { + align-items: center; font-size: 0; + opacity: 0; line-height: 1em; - will-change: font-size; - transition: font-size 800ms var(--easing-default); + will-change: font-size opacity; + transition: var(--font-animation), var(--opacity-animation); b { padding-left: 0.125em; @@ -37,28 +53,14 @@ html[data-visual-test] & { animation: none; } + + font-weight: var(--font-weight-bold); } } &--state-pending &__content { font-size: 1em; - font-weight: var(--font-weight-bold); - } - &--state-success &__content { - font-size: 1em; - - .dnb-icon { - padding-left: var(--padding-left); - color: var(--color-success-green); - } - .dnb-icon--default { - font-size: 1em; - } - - &__label { - font-size: var(--font-size-small); - padding-left: calc(var(--padding-left) * 2); - } + opacity: 1; } &--inline-wrap &__content { display: flex; diff --git a/packages/dnb-eufemia/src/extensions/forms/constants/locales/en-GB.ts b/packages/dnb-eufemia/src/extensions/forms/constants/locales/en-GB.ts index b108ac91e13..af29b349039 100644 --- a/packages/dnb-eufemia/src/extensions/forms/constants/locales/en-GB.ts +++ b/packages/dnb-eufemia/src/extensions/forms/constants/locales/en-GB.ts @@ -16,6 +16,9 @@ export default { text: 'Send', sendText: 'Send', }, + SubmitIndicator: { + label: 'In progress', + }, Isolation: { commitButtonText: 'Add', }, diff --git a/packages/dnb-eufemia/src/extensions/forms/constants/locales/nb-NO.ts b/packages/dnb-eufemia/src/extensions/forms/constants/locales/nb-NO.ts index f5c353f6a55..9bbfe860782 100644 --- a/packages/dnb-eufemia/src/extensions/forms/constants/locales/nb-NO.ts +++ b/packages/dnb-eufemia/src/extensions/forms/constants/locales/nb-NO.ts @@ -15,6 +15,9 @@ export default { text: 'Send', sendText: 'Send inn', }, + SubmitIndicator: { + label: 'Under arbeid', + }, Isolation: { commitButtonText: 'Legg til', },