fix(docs): fix broken internal hash links (#2573)

src/components/about.marko

@@ -1,7 +1,7 @@
 <div id="about">
     <h2>About</h2>
     <p>Skin is a pure CSS framework, created by a team of passionate frontend engineers at eBay.</p>
-    <p>Skin's default stylesheet represents <a href="https://playbook.ebay.com">eBay Evo</a> - eBay's evolved brand and design system - but Skin also offers <a href="#token-system">token-based configuration</a> to enable non-eBay branded experiences.</p>
+    <p>Skin's default stylesheet represents <a href="https://playbook.ebay.com">eBay Evo</a> - eBay's evolved brand and design system - but Skin also offers <anchor href="#token-system">token-based configuration</anchor> to enable non-eBay branded experiences.</p>
     <p>Skin adheres to the following core principals:</p>
     <dl>
         <dt>Accessible</dt>
@@ -12,6 +12,6 @@
         <dd>Skin is decoupled from the JavaScript layer, meaning the HTML and CSS is agnostic of the frontend framework (BYOJ = Bring Your Own Javascript!)<sup>*</sup></dd>
         <dt>Scalable</dt>
         <dd>Skin is built on a system of <a href="https://tr.designtokens.org/format/">design tokens</a> (implemented as CSS Variables); enabling a scalable and consistent visual system for UI development.</dd>
-    </dl>   
+    </dl>
     <p><sup>*</sup>This website uses <a href="https://github.com/makeup/makeup-js">makeup-js</a> to add some basic interactivity to examples where needed.</p>
 </div>

src/components/components-list.marko

@@ -5,7 +5,7 @@ import path from 'path';
     $ const name = componentName.replace(/-([a-z])/g, function (g) { return ` ${g[1].toUpperCase()}`; });
     $ const properName = name.charAt(0).toUpperCase() + name.slice(1);
     <li>
-        <anchor href=`component/${componentName}` class="nav-link" role="menuitem">${properName}</anchor>
+        <anchor href=`component/${componentName}/` class="nav-link" role="menuitem">${properName}</anchor>
     </li>
 </for>
 

src/components/themes.marko

@@ -30,5 +30,5 @@
     </ul>
     -->
 
-    <p>Warning! Changing the value of any product-level token will cause a ripple effect through all skin modules. If this is not your intention, tokens are also available at the component-level. See <a href="#switch-variables">switch-variables</a> for an example.</p>
+    <p>Warning! Changing the value of any product-level token will cause a ripple effect through all skin modules. If this is not your intention, tokens are also available at the component-level. See <anchor href="component/switch#switch-variables">switch-variables</anchor> for an example.</p>
 </div>

src/components/token-system.marko

@@ -11,7 +11,7 @@
     <p>In order for Skin to render correctly, values for core tokens and light tokens are <strong>required</strong>.</p>
     <p>The easiest way to satisfy this requirement is to include one of the following bundles:</p>
     <ul>
-        <li><a href="#tokens">@ebay/skin/tokens</a></li>
+        <li><anchor href="component/tokens/">@ebay/skin/tokens</anchor></li>
     </ul>
 
     <p>It is also possible for a page to roll their own tokens sets, enabling a themed or even non-eBay branded look and feel. More information will be provided in a future release.</p>

src/routes/_index/component/+page.marko

@@ -6,7 +6,7 @@ import path from 'path';
 <ul>
 <for|key, folder| in=components>
     <li>
-        <anchor href=`component/${path.basename(folder)}` class="module-link">${path.basename(folder)}</anchor>
+        <anchor href=`component/${path.basename(folder)}/` class="module-link">${path.basename(folder)}</anchor>
     </li>
 </for>
 </ul>

src/routes/_index/component/badge/+page.marko

@@ -6,13 +6,13 @@
     </p>
     <p>
         The badge module contains the basic, base styles for a static badge element. Badges can also be placed inside of the${" "}
-        <a href="#icon-button-badged">
+        <anchor href="component/icon-button#icon-button-badged">
             icon button
-        </a>
+        </anchor>
          and
-        <a href="#menu-badged">
+        <anchor href="component/menu#menu-badged">
             menu
-        </a>
+        </anchor>
          modules.
     </p>
 

src/routes/_index/component/button/+page.marko

@@ -219,7 +219,7 @@
     </highlight-code>
 
     <h3 id="button-busy">Busy State for Button</h3>
-        <p>Replace the button contents with a <a href="#progress-spinner">progress spinner</a> to represent a busy state. Note also, that the button will need an aria-label to programmatically convey the busy state to assistive technology.</p>
+        <p>Replace the button contents with a <anchor href="component/progress-spinner/">progress spinner</anchor> to represent a busy state. Note also, that the button will need an aria-label to programmatically convey the busy state to assistive technology.</p>
 
         <div class="demo">
             <div class="demo__inner">
@@ -255,7 +255,7 @@
         </div>
     </div>
 
-    <p>NOTE: it is recommended to use a <a href="#snackbar-dialog">snackbar dialog</a> or <a href="#inline-notice">inline-notice</a> in order to convey any status of success or failure.</p>
+    <p>NOTE: it is recommended to use a <anchor href="component/snackbar-dialog/">snackbar dialog</anchor> or <anchor href="component/inline-notice/">inline-notice</anchor> in order to convey any status of success or failure.</p>
 
     <h3 id="button-layout">Flexible Button</h3>
 

src/routes/_index/component/checkbox/+page.marko

@@ -295,9 +295,9 @@
     </p>
     <p>
         The following example uses the
-        <a href="#field">
+        <anchor href="component/field/">
             field module
-        </a>
+        </anchor>
          for simple layout of checkbox fields and labels.
     </p>
 

src/routes/_index/component/chips-combobox/+page.marko

@@ -544,9 +544,9 @@
             a11y
         </span>
         ${" "}rules, color alone should not be used to indicate an error. For more information, please see the${" "}
-        <a href="#field-error-state">
+        <anchor href="component/field/#field-error-state">
             field error state docs
-        </a>
+        </anchor>
         .
     </p>
 

src/routes/_index/component/date-textbox/+page.marko

@@ -9,17 +9,17 @@
     </h3>
     <p>
         The single select date textbox consists of a
-        <a href="#textbox">
+        <anchor href="component/textbox/">
             textbox
-        </a>
+        </anchor>
          plus
-        <a href="#icon-button">
+        <anchor href="component/icon-button/">
             icon button
-        </a>
+        </anchor>
         . The icon button launches an interactive
-        <a href="#calendar">
+        <anchor href="component/calendar/">
             calendar
-        </a>
+        </anchor>
          inside of a flyout.
     </p>
     <p>

src/routes/_index/component/filter-menu/+page.marko

@@ -3,9 +3,9 @@
 
     <p>
         A filter menu forms the basis of the
-        <a href="#filter-menu-button">
+        <anchor href="component/filter-menu-button/">
             filter-menu-button
-        </a>
+        </anchor>
         ${" "}module; we provide it here as a standalone version in the case it might be opened or rendered via other means (in a dialog for example).
     </p>
 
@@ -527,13 +527,13 @@
     </h3>
     <p>
         A form version is also available. It uses the
-        <a href="#checkbox">
+        <anchor href="component/checkbox/">
             checkbox
-        </a>
+        </anchor>
          and
-        <a href="#radio">
+        <anchor href="component/radio/">
             radio
-        </a>
+        </anchor>
         ${" "}modules to render checkboxes or radios instead of ARIA menu items. The form version must contain a submit button.
     </p>
 

src/routes/_index/component/icon-button/+page.marko

@@ -1,7 +1,7 @@
 <div id="icon-button">
     <section-header metadata=metadata/>
 
-    <p>Use the <span class="highlight">icon-btn</span> class (for buttons) or the <span class="highlight">icon-link</span> class (for links) and any of the available <a href="#icon">icons</a> for a borderless, actionable icon style.</p>
+    <p>Use the <span class="highlight">icon-btn</span> class (for buttons) or the <span class="highlight">icon-link</span> class (for links) and any of the available <anchor href="component/icon/">icons</anchor> for a borderless, actionable icon style.</p>
 
     <div class="demo">
         <div class="demo__inner">
@@ -100,7 +100,7 @@
     </highlight-code>
 
     <h3 id="icon-button-badged">Badged Icon Button</h3>
-    <p>An icon button can be badged using the <a href="#badge">badge</a> module.</p>
+    <p>An icon button can be badged using the <anchor href="component/badge/">badge</anchor> module.</p>
     <p>The button or anchor element requires an additional <span class="highlight">icon-btn--badged</span> or <span class="highlight">icon-link--badged</span> modifier, respectively.</p>
 
     <div class="demo">

src/routes/_index/component/icon/+page.marko

@@ -33,7 +33,7 @@ import iconJSON from '../../../../components/data/icons.json';
 
     <h3>Including an Icon</h3>
     <p>An icon <a href="https://raw.githubusercontent.com/eBay/skin/master/src/svg/icons.svg">symbol</a> declaration can
-        be referenced from the same file or an <a href="#svg">external SVG</a> file. If in the same file, the symbol
+        be referenced from the same file or an <anchor href="component/svg/">external SVG</anchor> file. If in the same file, the symbol
         must be stamped on the page inside of an SVG block.</p>
     <p>We also provide individual icons as SVGs located in this <a href="https://github.com/eBay/skin/tree/master/src/svg/icon">directory</a>.
         You can include these on your page as raw SVGs as needed.</p>

src/routes/_index/component/link/+page.marko

@@ -3,9 +3,9 @@
 
     <p>
         The link module itself does not provide any base styling of anchor tags, that styling instead comes from the${" "}
-        <a href="#global">
+        <anchor href="component/global/">
             global
-        </a>
+        </anchor>
          module.
     </p>
 

src/routes/_index/component/listbox-button/+page.marko

@@ -776,9 +776,9 @@
     </p>
     <p>
         This is a simple example with a simple error indication. For usage of the error state with an error message, please see the${" "}
-        <a href="#field">
+        <anchor href="component/field/">
             field module
-        </a>
+        </anchor>
         .
     </p>
 

src/routes/_index/component/menu-button/+page.marko

@@ -12,30 +12,30 @@
         A menu is
         <strong>not</strong>
         ${" "}a form control. If you wish to submit form data natively, without JavaScript, please consider${" "}
-        <a href="#checkbox">
+        <anchor href="component/checkbox/">
             checkbox
-        </a>
+        </anchor>
         ,
-        <a href="#combobox">
+        <anchor href="component/combobox/">
             combobox
-        </a>
+        </anchor>
         ,
-        <a href="#select">
+        <anchor href="component/select/">
             select
-        </a>
+        </anchor>
         , or
-        <a href="#radio">
+        <anchor href="component/radio/">
             radio
-        </a>
+        </anchor>
          instead.
     </p>
     <p>
         Selecting a menu item command should update the page
         <strong>without</strong>
         ${" "}a full page reload (i.e. acting similar to buttons, checkboxes or radios). If a full page load is required instead (i.e. acting like links), please refer to the${" "}
-        <a href="#menu-button-fake">
+        <anchor href="component/menu-button/#menu-button-fake">
             fake menu button
-        </a>
+        </anchor>
         .
     </p>
 
@@ -446,13 +446,13 @@
         </h4>
         <p>
             If a fixed label is not possible, the button's inner text can potentially be written as a key/value pair, where key denotes purpose and value repesents the current selection. This is most typical in a${" "}
-            <a href="#menu-button-radio">
+            <anchor href="component/menu-button/#menu-button-radio">
                 single select menu button
-            </a>
+            </anchor>
             . For example: "Sort: Price", "Color: Red". This technique is identical to the method used by${" "}
-            <a href="#listbox-button">
+            <anchor href="component/listbox-button/">
                 Listbox Button
-            </a>
+            </anchor>
             .
         </p>
 
@@ -904,13 +904,13 @@
          be used as a dropdown for selecting and storing form
         <em>data</em>
         . Please use
-        <a href="#button">
+        <anchor href="component/button/">
             select
-        </a>
+        </anchor>
          or
-        <a href="#button">
+        <anchor href="component/button/">
             listbox-button
-        </a>
+        </anchor>
          for that purpose instead.
     </p>
 

src/routes/_index/component/menu/+page.marko

@@ -5,30 +5,30 @@
         A menu is
         <strong>not</strong>
         ${" "}a form control. If you wish to submit form data natively, without JavaScript, please consider${" "}
-        <a href="#checkbox">
+        <anchor href="component/checkbox/">
             checkbox
-        </a>
+        </anchor>
         ,
-        <a href="#combobox">
+        <anchor href="component/combobox/">
             combobox
-        </a>
+        </anchor>
         ,
-        <a href="#select">
+        <anchor href="component/select/">
             select
-        </a>
+        </anchor>
         , or
-        <a href="#radio">
+        <anchor href="component/radio/">
             radio
-        </a>
+        </anchor>
          instead.
     </p>
     <p>
         Selecting a menu item command should update the page
         <strong>without</strong>
         ${" "}a full page reload (i.e. acting similar to buttons, checkboxes or radios). If a full page load is required instead (i.e. acting like links), please refer to the${" "}
-        <a href="#menu-fake">
+        <anchor href="component/menu/#menu-fake">
             fake menu
-        </a>
+        </anchor>
         .
     </p>
     <p>
@@ -104,9 +104,9 @@
     </h3>
     <p>
         A menu item can be badged using the
-        <a href="#badge">
+        <anchor href="component/badge/">
             badge
-        </a>
+        </anchor>
          module.
     </p>
     <p>

src/routes/_index/component/phone-input/+page.marko

@@ -267,9 +267,9 @@
             field
         </span>
          classes. For label inline usage, please see the
-        <a href="#field">
+        <anchor href="component/field/">
             field module
-        </a>
+        </anchor>
          .
     </p>
     <div class="demo">

src/routes/_index/component/radio/+page.marko

@@ -219,9 +219,9 @@
     </p>
     <p>
         The following example uses the
-        <a href="#field">
+        <anchor href="component/field/">
             field module
-        </a>
+        </anchor>
          for simple layout of radio button fields and labels.
     </p>
     <div class="demo">

src/routes/_index/component/segmented-buttons/+page.marko

@@ -124,9 +124,9 @@
     </h3>
     <p>
         Any 24x24
-        <a href="#icon">
+        <anchor href="component/icon/">
             icon
-        </a>
+        </anchor>
          can be added inside of a
         <span class="highlight">
             segmented-buttons__button-cell