diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/Examples.tsx index 914d6ef2cdf..e6a4c0ed49b 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/Examples.tsx @@ -128,3 +128,13 @@ export const WithinOtherComponents = () => { ) } + +export const WithinALabel = () => { + return ( + + + + + + ) +} diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/demos.mdx index b1d09b1264f..e7cbf6c79b1 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/demos.mdx @@ -29,3 +29,7 @@ Make a change in the input field. ### Used in other components + +### With a label + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/properties.mdx index 342a608dbc4..be14e61bfe6 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/properties.mdx @@ -2,9 +2,14 @@ showTabs: true --- +import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable' import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' import { SubmitIndicatorProperties } from '@dnb/eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicatorDocs' ## Properties + +## Translations + + diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitButton/__tests__/SubmitButton.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitButton/__tests__/SubmitButton.test.tsx index da0b312baf3..cb0a1008a44 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitButton/__tests__/SubmitButton.test.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitButton/__tests__/SubmitButton.test.tsx @@ -219,7 +219,7 @@ describe('Form.SubmitButton', () => { expect(indicatorContentElement).toHaveAttribute('role', 'status') expect(indicatorContentElement).toHaveAttribute( 'aria-label', - 'Vennligst vent ...' + nb.SubmitIndicator.label ) }) 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..97c1c224f73 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. Defaults to `false`.', + 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.screenshot.test.ts b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.screenshot.test.ts new file mode 100644 index 00000000000..234cbfc656e --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.screenshot.test.ts @@ -0,0 +1,17 @@ +import { + makeScreenshot, + setupPageScreenshot, +} from '../../../../../core/jest/jestSetupScreenshots' + +describe('Form.SubmitIndicator', () => { + setupPageScreenshot({ + url: '/uilib/extensions/forms/Form/SubmitIndicator/demos', + }) + + it('have to match submit-indicator-with-label', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="submit-indicator-with-label"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) +}) 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/__tests__/__image_snapshots__/formsubmitindicator-have-to-match-submit-indicator-with-label.snap.png b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/__image_snapshots__/formsubmitindicator-have-to-match-submit-indicator-with-label.snap.png new file mode 100644 index 00000000000..942d5722261 Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/__image_snapshots__/formsubmitindicator-have-to-match-submit-indicator-with-label.snap.png differ 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', },