diff --git a/.changeset/thirty-ads-think.md b/.changeset/thirty-ads-think.md new file mode 100644 index 000000000..00bfa6d9f --- /dev/null +++ b/.changeset/thirty-ads-think.md @@ -0,0 +1,5 @@ +--- +'@microsoft/atlas-site': minor +--- + +Add button for easier manual right to left testing. diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 9e0ead4b6..9ca885915 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,5 +1,3 @@ -Task: task-[work-item-number] - Link: [preview](http://localhost:1111/) [Explain the context of this pull request here] @@ -20,3 +18,4 @@ Link: [preview](http://localhost:1111/) - [ ] Did you submit a changeset? Changesets are required for all code changes. - [ ] Does your pull request implement complex UI logic (js/ts)? Consider adding an integration test to test your user flow. - [ ] Does your pull request add a new page to the documentation site? Add your new page for automated accessibility testing in /integration/tests/accessibility. +- [ ] Does your pull request change any transforms? Did you test they work on right to left? diff --git a/site/src/scaffold/index.scss b/site/src/scaffold/index.scss index 1d09ab698..71252b172 100644 --- a/site/src/scaffold/index.scss +++ b/site/src/scaffold/index.scss @@ -6,6 +6,7 @@ @import './styles/code-block.scss'; @import './styles/burger.scss'; @import './styles/layout-buttons.scss'; +@import './styles/direction-change.scss'; // hack to mark markdown logo on '/' look a tad different, excludes header logo main img[src^='/atlas-light.'] { diff --git a/site/src/scaffold/index.ts b/site/src/scaffold/index.ts index 2aec3f7fd..05c654a6c 100644 --- a/site/src/scaffold/index.ts +++ b/site/src/scaffold/index.ts @@ -12,6 +12,7 @@ import { handleFocusableIfScrollable } from './scripts/focusable-if-scrollable'; import { initFullScreenToggle } from './scripts/full-screen-toggle'; import { initLayoutPageControls } from './scripts/layout-page'; import { handleFullScreenNavButton } from './scripts/mobile-navigation'; +import { initReadingDirectionButtons } from './scripts/direction-buttons'; initTheme(); initDismiss(); @@ -25,3 +26,4 @@ handleFocusableIfScrollable(); handleFullScreenNavButton(); initLayoutPageControls(); initLayout(); +initReadingDirectionButtons(); diff --git a/site/src/scaffold/scripts/direction-buttons.ts b/site/src/scaffold/scripts/direction-buttons.ts new file mode 100644 index 000000000..e2f48ca67 --- /dev/null +++ b/site/src/scaffold/scripts/direction-buttons.ts @@ -0,0 +1,17 @@ +export function initReadingDirectionButtons() { + window.addEventListener('click', (e: MouseEvent) => { + const target = + e.target instanceof Element && + (e.target.closest('[data-direction-change]') as HTMLButtonElement); + if (!target) { + return; + } + + const direction = target.dataset.directionChange; + if (direction !== 'ltr' && direction !== 'rtl') { + throw new Error('Misconfigured direction button'); + } + + document.documentElement.dir = direction; + }); +} diff --git a/site/src/scaffold/standard.html b/site/src/scaffold/standard.html index d108b4890..33024ff97 100644 --- a/site/src/scaffold/standard.html +++ b/site/src/scaffold/standard.html @@ -1,5 +1,5 @@ - + @@ -104,7 +104,7 @@

Missing h1

{{{breadcrumbs}}} -
+
+ + Missing h1 +
diff --git a/site/src/scaffold/styles/direction-change.scss b/site/src/scaffold/styles/direction-change.scss new file mode 100644 index 000000000..9aa2b58ad --- /dev/null +++ b/site/src/scaffold/styles/direction-change.scss @@ -0,0 +1,7 @@ +.display-none-rtl:dir(rtl) { + display: none !important; +} + +.display-none-ltr:dir(ltr) { + display: none !important; +} diff --git a/site/src/scaffold/token.html b/site/src/scaffold/token.html index 3a09000d4..aabee047f 100644 --- a/site/src/scaffold/token.html +++ b/site/src/scaffold/token.html @@ -103,7 +103,7 @@

Missing h1

{{{breadcrumbs}}} -
+
+ +