-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[open-formulieren/open-forms#4543] Added summary progress to the form…
…step
- Loading branch information
Showing
18 changed files
with
171 additions
and
4 deletions.
There are no files selected for viewing
Submodule design-tokens
updated
3 files
+2 −2 | package-lock.json | |
+1 −1 | package.json | |
+12 −0 | src/components/summary-progress.tokens.json |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
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
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,21 @@ | ||
import {ArgTypes, Canvas, Meta, Story} from '@storybook/blocks'; | ||
|
||
import SummaryProgress from '.'; | ||
import * as SummaryProgressStories from './SummaryProgress.stories'; | ||
|
||
<Meta of={SummaryProgressStories} /> | ||
|
||
# Summary progress | ||
|
||
The summary progress displays a short summary of the steps, including the number of the current step | ||
and the number of the total steps of the form. The total number of the steps is updated accordingly | ||
when there are logic rules which may define in a different way the steps through the form | ||
submission. | ||
|
||
## Form start | ||
|
||
On initial load, no submission is available yet, and the summary is not visible. | ||
|
||
## Props | ||
|
||
<ArgTypes of={SummaryProgress} /> |
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 @@ | ||
import {withRouter} from 'storybook-addon-remix-react-router'; | ||
|
||
import SummaryProgress from '.'; | ||
|
||
export default { | ||
title: 'Private API / SummaryProgress', | ||
component: SummaryProgress, | ||
decorators: [withRouter], | ||
args: { | ||
total: 2, | ||
current: 1, | ||
}, | ||
}; | ||
|
||
export const Default = {}; |
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,30 @@ | ||
import PropTypes from 'prop-types'; | ||
import React from 'react'; | ||
import {FormattedMessage} from 'react-intl'; | ||
|
||
/** | ||
* A single summary progress indicator. | ||
* | ||
* It shows the short progress summary, indicating the current step number and total amount of steps. | ||
*/ | ||
export const SummaryProgress = ({current, total}) => { | ||
return ( | ||
<div className="openforms-summary-progress"> | ||
<FormattedMessage | ||
description="Summary progress label" | ||
defaultMessage="Step {current} of {total}" | ||
values={{ | ||
current: current, | ||
total: total, | ||
}} | ||
/> | ||
</div> | ||
); | ||
}; | ||
|
||
SummaryProgress.propTypes = { | ||
current: PropTypes.number.isRequired, | ||
total: PropTypes.number.isRequired, | ||
}; | ||
|
||
export default SummaryProgress; |
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
@use 'microscope-sass/lib/bem'; | ||
|
||
.openforms-summary-progress { | ||
padding-block-start: var(--of-summary-progress-padding-block-start, 0px); | ||
padding-block-end: var(--of-summary-progress-padding-block-end, 20px); | ||
|
||
@include mobile-only { | ||
padding-block-start: var(--of-summary-progress-mobile-padding-block-start, 0px); | ||
padding-block-end: var(--of-summary-progress-mobile-padding-block-end, 20px); | ||
} | ||
} |
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