In NoRent preview, show letter in Spanish and English if needed. #1502
Conversation
| const Microcopy: React.FC<{ children: React.ReactNode }> = (props) => ( | ||
| <p className="is-uppercase is-size-7">{props.children}</p> | ||
| ); |
There was a problem hiding this comment.
It's possible we're really using React instead of CSS here, but it sorta makes the code more readable?
There was a problem hiding this comment.
Hmmm yeah this is a tough one. I personally don't like to make react components that are just purely styling related, because when I see the custom component I would assume that it's doing something more complicated than just styling the element, and would then need to take the extra step of tracing back to the definition of the component to verify. But, of course this does make things more DRY and everyone has their own preferences. Totally your call on this!
| <Trans description="heading of formal letter"> | ||
| <dt>To</dt> | ||
| <LandlordAddress {...props} /> | ||
| <dt>From</dt> | ||
| <Address {...props} /> | ||
| </Trans> |
There was a problem hiding this comment.
@sraby, I realized that we do actually store the entire localized letter on the server-side for future presentation to the user, when they want to view their archived letters (this was added in #1473 if you remember reviewing that). So I decided to follow your advice in #1496 (comment) and make the whole thing a <Trans> to provide better context, but I also factored out <LandlordAddress> and <Address> to make it less tag-soupy for translators.
There was a problem hiding this comment.
Nice! Yeah I think this is a perfect middle ground!
| .jf-letter-translation ul li { | ||
| font-weight: inherit; | ||
| } | ||
|
|
There was a problem hiding this comment.
Ew, I don't like it when I have to "undo" another rule's styling just to get something to look like one would expect it to... At least it's right next to the rule it's overriding though!
There was a problem hiding this comment.
Ugh yeah that is annoying to have to do. I've tried using the :not() selectors as much as possible for things like that but that seems very hard to try and maneuver in this scenario!
toolness
changed the title
|
Ok @sraby I'm going to merge this now so we can hopefully get the Spanish version out before June 1, but let me know if there's anything in here you think should be changed and we can follow up on it later! |
This adds special content to the NoRent letter builder page for the case where the user's native language isn't English. All new copy and visuals are based on the Figma mocks.
Below is what the partly-translated version looks like. Strings added in this PR, and others added in very recent PRs (such as the letter and email localization done in #1496) are still in English and/or just show their ids, so it's a bit confusing, but at least it's better than nothing:
This can also be manually tested using our language garbler by running
node localebuilder.js --garble && yarn lingui:compile.Note that the English text at one point says "(name of your language) translation" but this text will never actually appear in English, only in the user's language, and it's meant to say e.g. "Spanish translation", in Spanish, if the user's locale is Spanish. I've tried adding a
descriptionprop to the<Trans>tag for this to help localizers understand how to localize it, but it is definitely a weird situation, so any alternative strategies are appreciated.