Skip to content
This repository was archived by the owner on Apr 28, 2025. It is now read-only.

Commit 2d02613

Browse files
patricknelsonpatricknelson
authored
fix(docs): fix broken internal hash links (#2573)
1 parent 45d34fd commit 2d02613

File tree

32 files changed

+120
-120
lines changed

32 files changed

+120
-120
lines changed

‎src/components/about.marko‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div id="about">
22
<h2>About</h2>
33
<p>Skin is a pure CSS framework, created by a team of passionate frontend engineers at eBay.</p>
4-
<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>
4+
<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>
55
<p>Skin adheres to the following core principals:</p>
66
<dl>
77
<dt>Accessible</dt>
@@ -12,6 +12,6 @@
1212
<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>
1313
<dt>Scalable</dt>
1414
<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>
15-
</dl>
15+
</dl>
1616
<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>
1717
</div>

‎src/components/components-list.marko‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import path from 'path';
55
$ const name = componentName.replace(/-([a-z])/g, function (g) { return ` ${g[1].toUpperCase()}`; });
66
$ const properName = name.charAt(0).toUpperCase() + name.slice(1);
77
<li>
8-
<anchor href=`component/${componentName}` class="nav-link" role="menuitem">${properName}</anchor>
8+
<anchor href=`component/${componentName}/` class="nav-link" role="menuitem">${properName}</anchor>
99
</li>
1010
</for>
1111

‎src/components/themes.marko‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,5 +30,5 @@
3030
</ul>
3131
-->
3232

33-
<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>
33+
<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>
3434
</div>

‎src/components/token-system.marko‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<p>In order for Skin to render correctly, values for core tokens and light tokens are <strong>required</strong>.</p>
1212
<p>The easiest way to satisfy this requirement is to include one of the following bundles:</p>
1313
<ul>
14-
<li><a href="#tokens">@ebay/skin/tokens</a></li>
14+
<li><anchor href="component/tokens/">@ebay/skin/tokens</anchor></li>
1515
</ul>
1616

1717
<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‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import path from 'path';
66
<ul>
77
<for|key, folder| in=components>
88
<li>
9-
<anchor href=`component/${path.basename(folder)}` class="module-link">${path.basename(folder)}</anchor>
9+
<anchor href=`component/${path.basename(folder)}/` class="module-link">${path.basename(folder)}</anchor>
1010
</li>
1111
</for>
1212
</ul>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@
66
</p>
77
<p>
88
The badge module contains the basic, base styles for a static badge element. Badges can also be placed inside of the${" "}
9-
<a href="#icon-button-badged">
9+
<anchor href="component/icon-button#icon-button-badged">
1010
icon button
11-
</a>
11+
</anchor>
1212
and
13-
<a href="#menu-badged">
13+
<anchor href="component/menu#menu-badged">
1414
menu
15-
</a>
15+
</anchor>
1616
modules.
1717
</p>
1818

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@
219219
</highlight-code>
220220

221221
<h3 id="button-busy">Busy State for Button</h3>
222-
<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>
222+
<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>
223223

224224
<div class="demo">
225225
<div class="demo__inner">
@@ -255,7 +255,7 @@
255255
</div>
256256
</div>
257257

258-
<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>
258+
<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>
259259

260260
<h3 id="button-layout">Flexible Button</h3>
261261

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -295,9 +295,9 @@
295295
</p>
296296
<p>
297297
The following example uses the
298-
<a href="#field">
298+
<anchor href="component/field/">
299299
field module
300-
</a>
300+
</anchor>
301301
for simple layout of checkbox fields and labels.
302302
</p>
303303

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -544,9 +544,9 @@
544544
a11y
545545
</span>
546546
${" "}rules, color alone should not be used to indicate an error. For more information, please see the${" "}
547-
<a href="#field-error-state">
547+
<anchor href="component/field/#field-error-state">
548548
field error state docs
549-
</a>
549+
</anchor>
550550
.
551551
</p>
552552

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,17 @@
99
</h3>
1010
<p>
1111
The single select date textbox consists of a
12-
<a href="#textbox">
12+
<anchor href="component/textbox/">
1313
textbox
14-
</a>
14+
</anchor>
1515
plus
16-
<a href="#icon-button">
16+
<anchor href="component/icon-button/">
1717
icon button
18-
</a>
18+
</anchor>
1919
. The icon button launches an interactive
20-
<a href="#calendar">
20+
<anchor href="component/calendar/">
2121
calendar
22-
</a>
22+
</anchor>
2323
inside of a flyout.
2424
</p>
2525
<p>

0 commit comments

Comments
 (0)