Fix left/right naming

[rezrah]

Changes left and right to start and end for improved i18n support and closer alignment with our Figma naming conventions

Example of change:

- <River align="left">
- <River align="right">
+ <River align="start">
+ <River align="end">

Warning
This is a breaking change.

[changeset-bot]

🦋 Changeset detected

Latest commit: ca2f5c2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react-brand	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[rfearing]

@rezrah Everything looks great from the Docs. I tried to check the Storybook instance locally (codespaces) or by clicking on "storybook" from the deployment preview but that didn't work for me (errors locally and 404 on deploy).

If that is genuinely a problem, I don't think that has anything to do with this PR. If we can verify Storybook looks the same as before, I'm cool to 👍🏼.

Curiosity question: Do you mind explaining how the new verbiage improves i18n support? I believe it, but would like to have a better understanding of how (for my own knowledge)

[rezrah]

@rezrah Everything looks great from the Docs. I tried to check the Storybook instance locally (codespaces) or by clicking on "storybook" from the deployment preview but that didn't work for me (errors locally and 404 on deploy).

Yes, sorry the link to Storybook from the homepage is broken on previews because of way Pages does deployments.

Here's the link if you're interested: https://primer-99a5d0fcde-26139705.drafts.github.io/storybook/

If that is genuinely a problem, I don't think that has anything to do with this PR. If we can verify Storybook looks the same as before, I'm cool to 👍🏼.

Curiosity question: Do you mind explaining how the new verbiage improves i18n support? I believe it, but would like to have a better understanding of how (for my own knowledge)

Sure thing, so left and right don't really work for Arabic or Hebrew readers because their browsers will typically use dir="rtl", which inverts the meanings of left and right. For this reason, start and end is linguistically-neutral in comparison as we're not indicating reading direction, but rather alluding to the beginning and end of content priority.

We're also using these naming conventions more across Primer, which is increasingly important as we begin to support more languages in the product.

It's also part of w3c best practices: https://www.w3.org/International/geo/html-tech/tech-bidi.html#ri20030728.093644822

[ashygee]

🚀

[ashygee]

I've also aligned with this more neutral naming within Figma too so the designers will have an understanding of these values in the API @rfearing.