chore(many): remove hash symbol from internal links

INSTUI-4750

Author: ToMESSKa

docs/contributor-docs/api-guidelines.md

@@ -8,7 +8,7 @@ order: 4
 
 ### Component Properties
 
-- All components should pass through additional props down to the root DOM element using the `passthroughProps` utility. (e.g. `<div {...passthroughProps(this.props)}>`). Note that in addition to allowing only valid DOM node attributes, `passthroughProps` will remove the `className` and `style` props to prevent unexpected style issues. These need to be set explicitly and used with caution. It also removes the `styles` and `makesStyles` properties added by the [withStyle](#withStyle) decorator.
+- All components should pass through additional props down to the root DOM element using the `passthroughProps` utility. (e.g. `<div {...passthroughProps(this.props)}>`). Note that in addition to allowing only valid DOM node attributes, `passthroughProps` will remove the `className` and `style` props to prevent unexpected style issues. These need to be set explicitly and used with caution. It also removes the `styles` and `makesStyles` properties added by the [withStyle](withStyle) decorator.
 - Avoid props that could be computed from other props. (e.g. prefer `<Select filter={handleFilter} />` over `<Select shouldFilter filter={handleFilter} />`. Prefer determining whether filtering should happen based on the presence of the `filter` function prop.)
 - Avoid situations where certain prop combinations are not supported. Prefer splitting the component into separate components with fewer props or using `PropTypes.oneOf`.
 - Set default prop values for non-required props when possible.
@@ -48,7 +48,7 @@ order: 4
 
 - In the `styles.js`, use the name of the component in camelCase (e.g. `appNav`) as the key of the root element's style object. Use camelCase for the keys of child elements as well (e.g. `list` and `listItem`).
 - All style object names should be semantic (describe the content, not what it looks like).
-- We make use of the `label` property of [Emotion.js](https://emotion.sh/) so that it gets displayed in the generated class name for easy readability and targetability. We use a naming convention based on [BEM naming convention](#http://getbem.com/naming/):
+- We make use of the `label` property of [Emotion.js](https://emotion.sh/) so that it gets displayed in the generated class name for easy readability and targetability. We use a naming convention based on [BEM naming convention](http://getbem.com/naming/):
   - For the root element, add a label with the name of the component in camelCase \
     (e.g. `appNav: { label: 'appNav' }`).
   - For the child elements, use the double underscore separator to indicate the parent-child relation with the `[rootElementName]__[childName}` format \

docs/contributor-docs/contributing.md

@@ -23,7 +23,7 @@ constructed from the existing ones. For these reasons adding a new component has
 
 ### Building InstUI from the source
 
-Please follow the steps on the [how to build guide page](#building-instui).
+Please follow the steps on the [how to build guide page](building-instui).
 
 ### Running the documentation app
 
@@ -41,7 +41,7 @@ Please follow the steps on the [how to build guide page](#building-instui).
 
 ### Testing
 
-See the [testing documentation](#testing-components) for details.
+See the [testing documentation](testing-components) for details.
 
 ### Linters and Code Formatting
 
@@ -119,6 +119,6 @@ Please update the documentation and examples with any changes.
 
 All components should:
 
-1. Be accessible (See the [accessibility requirements](#accessibility) for more information).
+1. Be accessible (See the [accessibility requirements](accessibility) for more information).
 1. Support RTL languages.
 1. Localize all dates, times, numbers and strings (or require localized content passed in via props).

docs/contributor-docs/theming/theming-basics.md

@@ -32,7 +32,7 @@ It accepts a `theme` prop, which should be an Instructure UI theme.
 
 It can be used in two ways. On the top level, you can provide the theme for the whole application or nested anywhere inside it. You can also provide an object with theme or component theme overrides.
 
-**For detailed usage info and examples, see the [InstUISettingsProvider](#InstUISettingsProvider) documentation page.**
+**For detailed usage info and examples, see the [InstUISettingsProvider](InstUISettingsProvider) documentation page.**
 
 ```jsx
 ---
@@ -53,13 +53,13 @@ const RenderApp = () => {
 
 ### Theme overrides
 
-A themeable component’s theme can be configured by wrapping it in an [InstUISettingsProvider](#InstUISettingsProvider) component, and/or set explicitly via its `themeOverride` prop.
+A themeable component’s theme can be configured by wrapping it in an [InstUISettingsProvider](InstUISettingsProvider) component, and/or set explicitly via its `themeOverride` prop.
 
 #### themeOverride prop
 
 The themeable components accept a `themeOverride` prop which lets you override it's component theme object. It accepts an override object or a function, which has the current `componentTheme` as its parameter.
 
-**See more on the [withStyle](#withStyle/#applying-themes) and [Using theme overrides](/#using-theme-overrides) doc pages for more info.**
+**See more on the [withStyle](withStyle/#applying-themes) and [Using theme overrides](/#using-theme-overrides) doc pages for more info.**
 
 ```js
 ---

docs/contributor-docs/theming/theming-class-based.md

@@ -6,7 +6,7 @@ order: 3
 
 ## Making class-based themed components
 
-Make a component themeable with the [withStyle](#withStyle) decorator. It adds a `makeStyles` function and the generated `styles` object to the decorated Component's props.
+Make a component themeable with the [withStyle](withStyle) decorator. It adds a `makeStyles` function and the generated `styles` object to the decorated Component's props.
 
 Import the style generator (`generateStyle`) from `styles.js` and the component theme generator (`generateComponentTheme`) from `theme.js`, and pass them to the decorator.
 
@@ -87,14 +87,14 @@ const generateComponentTheme = (theme) => {
 export default generateComponentTheme
 ```
 
-The arguments to the generator function are the [global theme variables](#canvas). In the above example, we've defined the default theme for the Button component.
+The arguments to the generator function are the [global theme variables](canvas). In the above example, we've defined the default theme for the Button component.
 
 The purpose of the generator function is to take the global variables and apply them as values to the functional component level variables.
 When coming up with names for the component level variables, try to make them describe how they are used in the component (vs describing the variable value).
 
 ### Supporting multiple themes
 
-If we want to make the Button transform the global theme variables differently with another theme, (e.g. [canvas-high-contrast](#canvas-high-contrast)) we can make specific styling for that theme:
+If we want to make the Button transform the global theme variables differently with another theme, (e.g. [canvas-high-contrast](canvas-high-contrast)) we can make specific styling for that theme:
 
 ```js
 ---
@@ -134,7 +134,7 @@ The rest of the variables will pick up from the default Button theme generator (
 
 In the `styles.js` file, the `generateStyle` method receives the theme variable object (`componentTheme`) generated by `theme.js`.
 
-Add your styling for each element in the component, and give them [labels](https://emotion.sh/docs/labels#gatsby-focus-wrapper) for easy readability and targetability. _Naming convention_: similar to [BEM naming convention](#http://getbem.com/naming/), use the name of the component in camelCase for the root element ('button'), and the double underscore suffix for children ('button\_\_icon').
+Add your styling for each element in the component, and give them [labels](https://emotion.sh/docs/labels#gatsby-focus-wrapper) for easy readability and targetability. _Naming convention_: similar to [BEM naming convention](http://getbem.com/naming/), use the name of the component in camelCase for the root element ('button'), and the double underscore suffix for children ('button\_\_icon').
 
 Use [Emotion's Object Styles documentation](https://emotion.sh/docs/object-styles) as a guide to add styles.
 

docs/contributor-docs/theming/theming-functional.md

@@ -7,7 +7,7 @@ order: 2
 ## Making InstUI-like components with theming
 
 InstUI uses [Emotion](https://emotion.sh/docs/introduction) under the hood to theme and style its components.
-If you want to read about the design behind the system and how to build `class-based` components with InstUI, please read [this](#theming-class-based).
+If you want to read about the design behind the system and how to build `class-based` components with InstUI, please read [this](theming-class-based).
 
 This page will show you how to build `functional` react components with InstUI.
 

docs/contributor-docs/upgrade-guide.md

@@ -22,7 +22,7 @@ We recommend upgrading your application for each major version gradually, e.g. i
 then migrate first to the latest 9.x and then to version 10.
 
 The places where your code can break during the upgrade are related to theme overrides, color props and color utilities.
-Please check the [theming components](#theming-components) guide to understand the new color system.
+Please check the [theming components](theming-components) guide to understand the new color system.
 
 If you override the theme colors, you must use the new colors provided either in the `canvas-high-contrast` or in the `canvas` theme object.
 The previous color system has been removed, the old color names are no longer available.
@@ -53,7 +53,7 @@ If you had component level overrides of colors you need to migrate using the fol
 | `colors.porcelain` | `colors.contrasts.grey1111`   |
 | `colors.white`     | `colors.contrasts.white1010`  |
 
-You can use the latest [codemod](#ui-codemods) to automate this process.
+You can use the latest [codemod](ui-codemods) to automate this process.
 
 InstUI v9:
 

docs/contributor-docs/v11-upgrade-guide.md

@@ -15,7 +15,7 @@ isWIP: true
 
 ### Table
 
-[Table](/#Table) is now using [TableContext](#TableContext) to pass down data to its child components, the following props are no longer passed down to their children (This should only affect you if you wild custom table rows or cells):
+[Table](/#Table) is now using [TableContext](TableContext) to pass down data to its child components, the following props are no longer passed down to their children (This should only affect you if you wild custom table rows or cells):
 
 | Component | prop        | Substitute / Notes              |
 | --------- | ----------- | ------------------------------- |

docs/getting-started/accessibility.md

@@ -11,7 +11,7 @@ We aim to make our software accessible to everyone, including those with vision,
 
 ### Color Contrast
 
-Our [default theme](#canvas) colors meet meets WCAG 2.1 AA rules for color contrast, and our [high contrast theme](#canvas-high-contrast) meets WCAG 2.1 AAA rules for color contrast. This ensures sufficient color contrast between elements so that users with low vision or color blindness can view and use our components.
+Our [default theme](canvas) colors meet meets WCAG 2.1 AA rules for color contrast, and our [high contrast theme](canvas-high-contrast) meets WCAG 2.1 AAA rules for color contrast. This ensures sufficient color contrast between elements so that users with low vision or color blindness can view and use our components.
 
 ### Keyboard Navigation
 

docs/getting-started/theming-components.md

@@ -7,10 +7,10 @@ relevantForAI: true
 
 ## Themes
 
-Instructure UI ships with two built-in themes: [canvas theme](#canvas) (default), [high contrast canvas theme](#canvas-high-contrast).
+Instructure UI ships with two built-in themes: [canvas theme](canvas) (default), [high contrast canvas theme](canvas-high-contrast).
 They are meant to be used together, `canvas` provides 4.5:1 contrast, while `canvas-high-contrast` 7.0:1.
 
-You can change the theme used with the [InstUISettingsProvider](#InstUISettingsProvider) component:
+You can change the theme used with the [InstUISettingsProvider](InstUISettingsProvider) component:
 
 ```jsx
 ---
@@ -29,7 +29,7 @@ render() {
 For more details on how to customize themes or apply different ones to parts of you application see [Using Theme Overrides](/#using-theme-overrides).
 
 If you are interested in how InstUI's theming engine works and/or you want to make your own components that use the themes,
-read our documentation on the theming engine [here](#theming-basics).
+read our documentation on the theming engine [here](theming-basics).
 
 ## Colors
 

docs/getting-started/usage.md

@@ -64,8 +64,8 @@ export default App
 
 What does this code do?
 
-- [InstUISettingsProvider](#InstUISettingsProvider) allows to specify the text direction (default is the direction that the user's browser supplies) and the theme to your application. InstUI components require a theme to work, all components are themeable, and themes control their look and feel. There are 2 built-in themes: [`canvas`](#canvas) and [`canvasHighContrast`](#canvas-high-contrast). The component examples seen throughout the documentation use the [canvas theme](#canvas) by default.
-- [Button](#Button) is an Instructure UI button component
+- [InstUISettingsProvider](InstUISettingsProvider) allows to specify the text direction (default is the direction that the user's browser supplies) and the theme to your application. InstUI components require a theme to work, all components are themeable, and themes control their look and feel. There are 2 built-in themes: [`canvas`](canvas) and [`canvasHighContrast`](canvas-high-contrast). The component examples seen throughout the documentation use the [canvas theme](canvas) by default.
+- [Button](Button) is an Instructure UI button component
 
 Finally, run `npm run dev` to start up a basic development server.
 
@@ -91,5 +91,5 @@ https://instructure.design/llms.txt
 
 ## Further reading
 
-- To use a different theme or customize one read about [Using theme overrides](#using-theme-overrides)
-- Make sure you read about [Accessibility](#accessibility) with InstUI.
+- To use a different theme or customize one read about [Using theme overrides](using-theme-overrides)
+- Make sure you read about [Accessibility](accessibility) with InstUI.