Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BD-46] fix: correctly translate strings in Checkpoint component #2886

Merged
merged 2 commits into from
Dec 22, 2023
Merged

[BD-46] fix: correctly translate strings in Checkpoint component #2886

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2c25c30
fix: correctly translate strings in `Checkpoint` component
viktorrusakov Dec 3, 2023
2f0da9a
chore: define i18n messages in separate file
viktorrusakov Dec 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 11 additions & 5 deletions src/ProductTour/Checkpoint.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,10 +98,10 @@ const Checkpoint = React.forwardRef(({
>
<span className="sr-only">
<FormattedMessage
id="pgn.ProductTour.Checkpoint.position-text"
id="pgn.ProductTour.Checkpoint.top-position-text"
defaultMessage="Top of step {step}"
value={{ step: index + 1 }}
description="Screen-reader message to indicate the user's position in a sequence of checkpoints."
values={{ step: index + 1 }}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The variables for the string were provided incorrectly which resulted in the following text being rendered
image

this fixes the text to be
image

description="Screen-reader message to notify user that they are located at the bottom of the product tour step."
/>
</span>
{(title || !isOnlyCheckpoint) && (
Expand All @@ -117,8 +117,14 @@ const Checkpoint = React.forwardRef(({
{...props}
/>
<div id="pgn__checkpoint-arrow" data-popper-arrow />
{/* This text is not translated due to Paragon's lack of i18n support */}
<span className="sr-only">Bottom of step {index + 1}</span>
<span className="sr-only">
<FormattedMessage
id="pgn.ProductTour.Checkpoint.bottom-position-text"
defaultMessage="Bottom of step {step}"
values={{ step: index + 1 }}
description="Screen-reader message to notify user that they are located at the bottom of the product tour step."
/>
</span>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I propose to put everything related to translations (keys, descriptions, identifiers) into a separate messages.js file. We already have an example of how we did this in the ChipCarousel component. This will simplify the component code and make it thinner.

It may be worth considering this improvement in a separate task 🥇

Copy link
Contributor

@PKulkoRaccoonGang PKulkoRaccoonGang Dec 4, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These will help you:

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, sounds good, updated, thanks

</div>
);
});
Expand Down
3 changes: 2 additions & 1 deletion src/i18n/messages/ar.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "إغلاق قائمة الخيارات",
"pgn.FormAutosuggest.iconButtonOpened": "فتح قائمة الخيارات",
"pgn.Toast.closeLabel": "إغلاق ",
"pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
"pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
"pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
3 changes: 2 additions & 1 deletion src/i18n/messages/ca.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Close",
"pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
"pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
"pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
3 changes: 2 additions & 1 deletion src/i18n/messages/es_419.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
"pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
"pgn.Toast.closeLabel": "Cerrar",
"pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
"pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
"pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
3 changes: 2 additions & 1 deletion src/i18n/messages/es_AR.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
"pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
"pgn.Toast.closeLabel": "Cerrar",
"pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
"pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
"pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
3 changes: 2 additions & 1 deletion src/i18n/messages/es_ES.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
"pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
"pgn.Toast.closeLabel": "Cerrar",
"pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
"pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
"pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
3 changes: 2 additions & 1 deletion src/i18n/messages/fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Close",
"pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
"pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
"pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
3 changes: 2 additions & 1 deletion src/i18n/messages/he.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Close",
"pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
"pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
"pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
3 changes: 2 additions & 1 deletion src/i18n/messages/id.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Close",
"pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
"pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
"pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
3 changes: 2 additions & 1 deletion src/i18n/messages/it_IT.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Chiudi",
"pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
"pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
"pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
3 changes: 2 additions & 1 deletion src/i18n/messages/ko_KR.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Close",
"pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
"pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
"pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
3 changes: 2 additions & 1 deletion src/i18n/messages/pl.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Zamknij",
"pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
"pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
"pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
3 changes: 2 additions & 1 deletion src/i18n/messages/pt_BR.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Close",
"pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
"pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
"pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
3 changes: 2 additions & 1 deletion src/i18n/messages/pt_PT.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Fechar o menu de opções",
"pgn.FormAutosuggest.iconButtonOpened": "Abrir o menu de opções",
"pgn.Toast.closeLabel": "Fechar",
"pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
"pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
"pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
3 changes: 2 additions & 1 deletion src/i18n/messages/ru.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Close",
"pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
"pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
"pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
3 changes: 2 additions & 1 deletion src/i18n/messages/th.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Close",
"pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
"pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
"pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
3 changes: 2 additions & 1 deletion src/i18n/messages/tr_TR.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Seçenekler menüsünü kapat",
"pgn.FormAutosuggest.iconButtonOpened": "Seçenekler menüsünü aç",
"pgn.Toast.closeLabel": "Kapat",
"pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
"pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
"pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
3 changes: 2 additions & 1 deletion src/i18n/messages/uk.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Close",
"pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
"pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
"pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
3 changes: 2 additions & 1 deletion src/i18n/messages/zh_CN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Close",
"pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
"pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
"pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
6 changes: 5 additions & 1 deletion www/src/components/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,11 @@ ComponentNavItem.propTypes = {
title: PropTypes.string.isRequired,
status: PropTypes.string,
}).isRequired,
isActive: PropTypes.bool.isRequired,
isActive: PropTypes.bool,
};

ComponentNavItem.defaultProps = {
isActive: false,
};

export type MenuComponentListTypes = {
Expand Down