ODC and confirm email refactor (#15739)

* use class name instead of id

* storybook rename

* refactor types

* linting

* prettier

* classname in react component

* lint error

* add classname in confirm-email success

* remove decorators

* allow focusing with the tab key to get information about the progress

* group form and radio chip elements

* single type assertion

---------

Co-authored-by: Rebeka <o.dekany@gmail.com>
GitOrigin-RevId: 58a64ebdde5c57619a81ae4b68cdb8a6b44dc295
This commit is contained in:
Domagoj Kriskovic 2023-11-24 11:43:31 +01:00 committed by Copybot
parent eba745ba96
commit 9c4cc289d2
4 changed files with 9 additions and 2 deletions

View file

@ -874,6 +874,7 @@
"processing": "", "processing": "",
"processing_uppercase": "", "processing_uppercase": "",
"professional": "", "professional": "",
"progress_bar_percentage": "",
"project_approaching_file_limit": "", "project_approaching_file_limit": "",
"project_figure_modal": "", "project_figure_modal": "",
"project_flagged_too_many_compiles": "", "project_flagged_too_many_compiles": "",

View file

@ -1,12 +1,16 @@
import classNames from 'classnames' import classNames from 'classnames'
import { useTranslation } from 'react-i18next'
export function Stepper({ steps, active }: { steps: number; active: number }) { export function Stepper({ steps, active }: { steps: number; active: number }) {
const { t } = useTranslation()
return ( return (
<div <div
className="stepper" className="stepper"
role="progressbar" role="progressbar"
aria-label={t('progress_bar_percentage')}
aria-valuenow={active + 1} aria-valuenow={active + 1}
aria-valuemax={steps} aria-valuemax={steps}
tabIndex={0}
> >
{Array.from({ length: steps }).map((_, i) => ( {Array.from({ length: steps }).map((_, i) => (
<div <div

View file

@ -1,4 +1,4 @@
#confirm-email { .onboarding-confirm-email {
max-width: 400px; max-width: 400px;
padding: 24px; padding: 24px;
margin: 0 auto; margin: 0 auto;
@ -31,7 +31,7 @@
} }
} }
#onboarding-data-collection { .onboarding-data-collection-form {
max-width: 720px; max-width: 720px;
padding: 24px; padding: 24px;
margin: 0 auto; margin: 0 auto;
@ -58,6 +58,7 @@
.onboarding-question-title { .onboarding-question-title {
font-size: 20px; font-size: 20px;
border-bottom: none;
} }
p { p {

View file

@ -1347,6 +1347,7 @@
"processing_uppercase": "Processing", "processing_uppercase": "Processing",
"processing_your_request": "Please wait while we process your request.", "processing_your_request": "Please wait while we process your request.",
"professional": "Professional", "professional": "Professional",
"progress_bar_percentage": "Progress bar from 0 to 100%",
"project": "project", "project": "project",
"project_approaching_file_limit": "This project is approaching the file limit", "project_approaching_file_limit": "This project is approaching the file limit",
"project_figure_modal": "Project", "project_figure_modal": "Project",