[docs] separate copy and link icons on headers/ collapsibles (#24448)

# Why
A follow-up to https://github.com/expo/expo/pull/24293 based on feedback
from @brentvatne . The goal is to create more c

[docs] separate copy and link icons on headers/ collapsibles (#24448)

# Why
A follow-up to https://github.com/expo/expo/pull/24293 based on feedback
from @brentvatne . The goal is to create more consistency and clarity
between the anchor link and copy anchor link functionality on both
headers and collapsibles.

**UPDATE**: After talking with Brent, I removed the copy functionality,
the idea being that, now that clicking the link icon everywhere gets you
an updated URL, it's easy enough to copy. So, this really just updates
collapsibles and removes copy functionality from the headings. I left
the icon switch in there in case there was some appeal to that, since
the link icon seemed to be a one-off.

# How (old)
There's a few ways to slice this, but this approach is to try separating
the functionality into two icons. I've definitely seen this elsewhere,
can't remember where tho.
<img width="419" alt="image"
src="https://github.com/expo/expo/assets/8053974/19917dd5-eeae-4bcd-9152-242608fbf39c">
<img width="554" alt="image"
src="https://github.com/expo/expo/assets/8053974/12164972-6728-4e08-b993-2d3c38026ba4">

Now we have consistent rules for both headers and collapsibles:
- the link icon always navigates to the anchor tag on click
- the copy icon always copies the anchor tag on click (and __only__
copies, no updating of the URL here!)

Additionally, we now have better copy feedback:
<img width="301" alt="image"
src="https://github.com/expo/expo/assets/8053974/2587ad54-bd3f-4977-9361-97092ef8f3c6">
<img width="301" alt="image"
src="https://github.com/expo/expo/assets/8053974/946fae82-c6bf-4225-a097-3836e95b028d">

Design notes:
- I removed the arrow from the tooltip since, if the heading is at the
top of the page, the tooltip moves below the icon, but the arrow still
points down ��
- I didn't see a copy icon in the docs, noticed it seemed like a lot of
other icons were going in the styleguide direction, so I switched both
icons to styleguide. I have no idea how to see all the icons, so I'm not
sure if this is the best of the like 20 different link icons.

## Special collapsible stuff
- Unlike a heading, where you can click anywhere and navigate to the
anchor tag, you have to click the link icon in order to navigate anchor
tag here. This is so you can expand the collapsible without also
scrolling the page.
- If you click the link icon and the collapsible is closed, it will
expand the collapsible as well as updating the URL. However, if the
collapsible is already open, clicking the link icon will not close it.
Thus, clicking the link icon will always leave you in the same state as
if you copied the URL with anchor tag and opened it in another tab.
- The copy icon also expands the collapsible but will not close it.

# Test Plan
- [x] clicking on header text updates URL with anchor tag
- [x] Headers: clicking on link icon updates URL with anchor tag
~~- [x] Headers: clicking on copy icon copies URL (doesn't navigate)~~
- [x] Collapsibles: clicking on header expands/ collapses section ONLY
- [x] Collapsibles: clicking on link expands and navigates
~~- [x] Collapsibles: clicking on copy expands and copies (doesn't
navigate)~~
~~- [x] Collapsibles: clicking on link or copy when already opened
doesn't close~~
~~- [x] Copy tooltip: updates to "Copied!" on click~~

# Checklist

<!--
Please check the appropriate items below if they apply to your diff.
This is required for changes to Expo modules.
-->

- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [ ] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [ ] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).

show more ...

Revert "separate copy/ link icons on headers and collapsibles"

This reverts commit 857493dcbcd6761210ef538660efdca44afe2a00.

Revert "remove round arrow from tippy to prevent opposite facing arrow when scrolled to page top"

This reverts commit 623daeb3e279007b48e035f807c654e2e550b198.

remove round arrow from tippy to prevent opposite facing arrow when scrolled to page top

separate copy/ link icons on headers and collapsibles

[docs] Make Copiable header links / Anchor tags for collapsible headers (#24293)

# Why

https://linear.app/expo/issue/ENG-9863/make-collapsible-headers-as-anchor-links

Fun story:
1. I origina

[docs] Make Copiable header links / Anchor tags for collapsible headers (#24293)

# Why

https://linear.app/expo/issue/ENG-9863/make-collapsible-headers-as-anchor-links

Fun story:
1. I originally though @brentvatne was asking for a quick copy button
for the anchor links for headers
2. So I did that, and __then__ I read @amandeepmittal's Linear issue.
3. So then I made anchor tags for collapsible headers
4. ...which required the quick copy button to be useful.

# How
## Copiable header links
I took inspiration from the [React Native Upgrade
Advisor](https://react-native-community.github.io/upgrade-helper/?from=0.71.11&to=0.72.1):
<img width="428" alt="image"
src="https://github.com/expo/expo/assets/8053974/d6bf26e5-2ade-481a-ad01-16a264b3e480">
Right now, it only shows the first tooltip. I would like it have it
change on copy like the upgrade advisor, but the tooltip disappears on
copy, and then when you hover over it again, it shows both tooltips, so
there's some figuring out about how tippy.js works to do to make this
work:
<img width="221" alt="image"
src="https://github.com/expo/expo/assets/8053974/304639f9-e146-4a6e-87b8-249a0cbec029">

Like the Upgrade Advisor links, I made the anchor button itself not move
the page/ set the URL, since it seemed kind of nice to be able to do
just do the copy. I could see going the other way, though

## Anchors for collapsible links
Some of this code is copied from `Permalink` in order to make the
`details` component be aware of the anchor tag, opening the details when
navigating to the anchor.

These headers/ anchor links definitely do not set the URL, so the page
doesn't jump while it's also expanding an element. Thus, the only way to
get the anchor is by pressing the copy icon. But pasting in the URL will
take you to the collapsible section and expand it, while still allowing
you to collapse it again.

# Test Plan
- [x] didn't break existing headers/ permalink functionality
- [x] copy works
- [x] didn't break existing collapsible functionality
- [x] can copy a collapsible link
- [x] can navigate directly to a collapsible and it expands
- [x] can still collapse a collapsible after navigating

# Checklist

<!--
Please check the appropriate items below if they apply to your diff.
This is required for changes to Expo modules.
-->

- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [ ] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [ ] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).

---------

Co-authored-by: Bartosz Kaszubowski <[email protected]>

show more ...

[docs] a11y: customize focus appearance, ensure visibility (#23093)

[docs] migrate to new styleguide packages (#21557)

[docs] APISection tweaks, prevent hydration issue (#20653)

[docs] add Algolia Crawler related data props to the new components (#20461)

[docs] use mostly new components to render MDX files, unify links appearance (#20429)

[docs] update to Next 13, refactor links (#19698)

[docs] simplify Permalinks, fix scroll shift (#19688)

[docs] improve typings after React 18 migration (#18269)

[docs] bump Next, switch to React 18 (#18256)

[docs] Simplify markdown layout system (#14636)

* [docs] Add new version of the mdx headings plugin

This plugin is uncoupled from the existing frontmatter change in the custom webpack loader. It

[docs] Simplify markdown layout system (#14636)

* [docs] Add new version of the mdx headings plugin

This plugin is uncoupled from the existing frontmatter change in the custom webpack loader. It also has a fix for mixed children content type, and it can pipe through the ID from plugins like remark-slug

* [docs] Move heading manager over to the new plugin

* [docs] Move document page higher order component to simple component

* [docs] Add empty array to all heading manager tests

* [docs] Fix linting issue in remark export headings

* [docs] Fix esbuild warning and add minimizer

* [docs] Remove esbuild minimizer to clear up memory

* [docs] Replace or with nullish coalescing

Co-authored-by: James Ide <[email protected]>

* [docs] Rename documentation elements without with prefix

* [docs] Disable linting all links in docs workflow

Co-authored-by: James Ide <[email protected]>

show more ...

[docs] Add auto-generating permission tables for android and ios (#13730)

* [docs] Add auto-generating permission tables for android and ios

* [docs] Add proper question mark icon and tweaked and

[docs] Add auto-generating permission tables for android and ios (#13730)

* [docs] Add auto-generating permission tables for android and ios

* [docs] Add proper question mark icon and tweaked android descriptions

* [docs] Hide the granted by column on Android permissions

This would still be a useful feature to add, but it has to be communicated properly

* [docs] Allow permission customization in the permissions table

* [docs] Add anchor links to the permissions

* [docs] Add note about commented code in Android permissions table

* [docs] Rename descriptionLong to explanation and add documentation

show more ...

[docs] cleanup and update Emotion setup (#12785)

[docs] Force permalink content to be inline with icon (#10731)

* [docs] Force permalink content to be inline with icon

* [docs] Update snapshots with updated permalink style

[docs] Move anchor icon to the right and make header clickable (#10597)

* [docs] Move anchor icon to the right and make header clickable

* [docs] Update app config snapshot tests

* [docs] Forc

[docs] Move anchor icon to the right and make header clickable (#10597)

* [docs] Move anchor icon to the right and make header clickable

* [docs] Update app config snapshot tests

* [docs] Force content of permalink within inline-block

show more ...

[docs] Migrate codebase to TypeScript (#10324)

* Configure Next.js to use TypeScript

* Migrate 'docs/common' to TypeScript

* Migrate some components to TS

* General components migrated

*

[docs] Migrate codebase to TypeScript (#10324)

* Configure Next.js to use TypeScript

* Migrate 'docs/common' to TypeScript

* Migrate some components to TS

* General components migrated

* Migrate base components

* Migrate icons

* Migrate plugins

* Tape patch window globals

* Migrate _app

* Migrate global-styles

* Migrate _error and _document

* Fixes

* Exclude static files

* Add slugger types, remove ts-ignores

* Improve headingManger typing

* Rebase, use React.FC where possible, prettier fixes

* Add ESLint config

* tsc watch script, updated test snapshots

* Apply code review suggestions
Apply suggestions

* [docs] Enable TypeScript 'strict' mode (#10380)

* Resolved TSC strict errors

* Fix heading metadata typing

* Simplify version handling

* Enable 'noImplicitAny'

* Update icons

* Add mdx-js types

show more ...