From 2d02613b1c27d834d5b2401eef4a456874df08a9 Mon Sep 17 00:00:00 2001 From: Patrick Nelson Date: Tue, 18 Feb 2025 14:58:05 -0800 Subject: [PATCH] fix(docs): fix broken internal hash links (#2573) --- src/components/about.marko | 4 +-- src/components/components-list.marko | 2 +- src/components/themes.marko | 2 +- src/components/token-system.marko | 2 +- src/routes/_index/component/+page.marko | 2 +- src/routes/_index/component/badge/+page.marko | 8 ++--- .../_index/component/button/+page.marko | 4 +-- .../_index/component/checkbox/+page.marko | 4 +-- .../component/chips-combobox/+page.marko | 4 +-- .../_index/component/date-textbox/+page.marko | 12 +++---- .../_index/component/filter-menu/+page.marko | 12 +++---- .../_index/component/icon-button/+page.marko | 4 +-- src/routes/_index/component/icon/+page.marko | 2 +- src/routes/_index/component/link/+page.marko | 4 +-- .../component/listbox-button/+page.marko | 4 +-- .../_index/component/menu-button/+page.marko | 36 +++++++++---------- src/routes/_index/component/menu/+page.marko | 24 ++++++------- .../_index/component/phone-input/+page.marko | 4 +-- src/routes/_index/component/radio/+page.marko | 4 +-- .../component/segmented-buttons/+page.marko | 4 +-- .../_index/component/select/+page.marko | 8 ++--- .../_index/component/skeleton/+page.marko | 28 +++++++-------- .../component/snackbar-dialog/+page.marko | 4 +-- .../_index/component/split-button/+page.marko | 2 +- .../_index/component/star-rating/+page.marko | 8 ++--- src/routes/_index/component/tabs/+page.marko | 8 ++--- .../_index/component/textbox/+page.marko | 10 +++--- .../_index/component/toast-dialog/+page.marko | 4 +-- .../component/toggle-button-group/+page.marko | 8 ++--- .../_index/component/tokens/+page.marko | 6 ++-- .../_index/component/typography/+page.marko | 8 ++--- src/routes/_index/guide/skeleton+page.marko | 4 +-- 32 files changed, 120 insertions(+), 120 deletions(-) diff --git a/src/components/about.marko b/src/components/about.marko index 3c114fc11e..fd8cb7337d 100644 --- a/src/components/about.marko +++ b/src/components/about.marko @@ -1,7 +1,7 @@

About

Skin is a pure CSS framework, created by a team of passionate frontend engineers at eBay.

-

Skin's default stylesheet represents eBay Evo - eBay's evolved brand and design system - but Skin also offers token-based configuration to enable non-eBay branded experiences.

+

Skin's default stylesheet represents eBay Evo - eBay's evolved brand and design system - but Skin also offers token-based configuration to enable non-eBay branded experiences.

Skin adheres to the following core principals:

Accessible
@@ -12,6 +12,6 @@
Skin is decoupled from the JavaScript layer, meaning the HTML and CSS is agnostic of the frontend framework (BYOJ = Bring Your Own Javascript!)*
Scalable
Skin is built on a system of design tokens (implemented as CSS Variables); enabling a scalable and consistent visual system for UI development.
-
+

*This website uses makeup-js to add some basic interactivity to examples where needed.

diff --git a/src/components/components-list.marko b/src/components/components-list.marko index f059cefbd3..24f08184d4 100644 --- a/src/components/components-list.marko +++ b/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);
  • - ${properName} + ${properName}
    • diff --git a/src/components/themes.marko b/src/components/themes.marko index a85949efa4..0b49bbe5c2 100644 --- a/src/components/themes.marko +++ b/src/components/themes.marko @@ -30,5 +30,5 @@ --> -

    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 switch-variables for an example.

    +

    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 switch-variables for an example.

    diff --git a/src/components/token-system.marko b/src/components/token-system.marko index ae80a54f17..da8586a11e 100644 --- a/src/components/token-system.marko +++ b/src/components/token-system.marko @@ -11,7 +11,7 @@

    In order for Skin to render correctly, values for core tokens and light tokens are required.

    The easiest way to satisfy this requirement is to include one of the following bundles:

    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.

    diff --git a/src/routes/_index/component/+page.marko b/src/routes/_index/component/+page.marko index c5238b4b41..2605d2f8d1 100644 --- a/src/routes/_index/component/+page.marko +++ b/src/routes/_index/component/+page.marko @@ -6,7 +6,7 @@ import path from 'path'; diff --git a/src/routes/_index/component/badge/+page.marko b/src/routes/_index/component/badge/+page.marko index 3766a2c853..54b98e76b0 100644 --- a/src/routes/_index/component/badge/+page.marko +++ b/src/routes/_index/component/badge/+page.marko @@ -6,13 +6,13 @@

    The badge module contains the basic, base styles for a static badge element. Badges can also be placed inside of the${" "} - + icon button - + and - + menu - + modules.

    diff --git a/src/routes/_index/component/button/+page.marko b/src/routes/_index/component/button/+page.marko index cbcb1102c4..f2b5889ed5 100644 --- a/src/routes/_index/component/button/+page.marko +++ b/src/routes/_index/component/button/+page.marko @@ -219,7 +219,7 @@

    Busy State for Button

    -

    Replace the button contents with a progress spinner to represent a busy state. Note also, that the button will need an aria-label to programmatically convey the busy state to assistive technology.

    +

    Replace the button contents with a progress spinner to represent a busy state. Note also, that the button will need an aria-label to programmatically convey the busy state to assistive technology.

    @@ -255,7 +255,7 @@
    -

    NOTE: it is recommended to use a snackbar dialog or inline-notice in order to convey any status of success or failure.

    +

    NOTE: it is recommended to use a snackbar dialog or inline-notice in order to convey any status of success or failure.

    Flexible Button

    diff --git a/src/routes/_index/component/checkbox/+page.marko b/src/routes/_index/component/checkbox/+page.marko index 6cfc17da2f..d58db9f2d9 100644 --- a/src/routes/_index/component/checkbox/+page.marko +++ b/src/routes/_index/component/checkbox/+page.marko @@ -295,9 +295,9 @@

    The following example uses the - + field module - + for simple layout of checkbox fields and labels.

    diff --git a/src/routes/_index/component/chips-combobox/+page.marko b/src/routes/_index/component/chips-combobox/+page.marko index b09184983b..daffd61c5d 100644 --- a/src/routes/_index/component/chips-combobox/+page.marko +++ b/src/routes/_index/component/chips-combobox/+page.marko @@ -544,9 +544,9 @@ a11y ${" "}rules, color alone should not be used to indicate an error. For more information, please see the${" "} - + field error state docs - + .

    diff --git a/src/routes/_index/component/date-textbox/+page.marko b/src/routes/_index/component/date-textbox/+page.marko index f88be1957a..ea1b00d538 100644 --- a/src/routes/_index/component/date-textbox/+page.marko +++ b/src/routes/_index/component/date-textbox/+page.marko @@ -9,17 +9,17 @@

    The single select date textbox consists of a - + textbox - + plus - + icon button - + . The icon button launches an interactive - + calendar - + inside of a flyout.

    diff --git a/src/routes/_index/component/filter-menu/+page.marko b/src/routes/_index/component/filter-menu/+page.marko index a5078e5376..be21cdb5fa 100644 --- a/src/routes/_index/component/filter-menu/+page.marko +++ b/src/routes/_index/component/filter-menu/+page.marko @@ -3,9 +3,9 @@

    A filter menu forms the basis of the - + filter-menu-button - + ${" "}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).

    @@ -527,13 +527,13 @@

    A form version is also available. It uses the - + checkbox - + and - + radio - + ${" "}modules to render checkboxes or radios instead of ARIA menu items. The form version must contain a submit button.

    diff --git a/src/routes/_index/component/icon-button/+page.marko b/src/routes/_index/component/icon-button/+page.marko index 08c4475a00..1233c310f3 100644 --- a/src/routes/_index/component/icon-button/+page.marko +++ b/src/routes/_index/component/icon-button/+page.marko @@ -1,7 +1,7 @@
    -

    Use the icon-btn class (for buttons) or the icon-link class (for links) and any of the available icons for a borderless, actionable icon style.

    +

    Use the icon-btn class (for buttons) or the icon-link class (for links) and any of the available icons for a borderless, actionable icon style.

    @@ -100,7 +100,7 @@

    Badged Icon Button

    -

    An icon button can be badged using the badge module.

    +

    An icon button can be badged using the badge module.

    The button or anchor element requires an additional icon-btn--badged or icon-link--badged modifier, respectively.

    diff --git a/src/routes/_index/component/icon/+page.marko b/src/routes/_index/component/icon/+page.marko index da28a58a4c..4f5a58a6e7 100644 --- a/src/routes/_index/component/icon/+page.marko +++ b/src/routes/_index/component/icon/+page.marko @@ -33,7 +33,7 @@ import iconJSON from '../../../../components/data/icons.json';

    Including an Icon

    An icon symbol declaration can - be referenced from the same file or an external SVG file. If in the same file, the symbol + be referenced from the same file or an external SVG file. If in the same file, the symbol must be stamped on the page inside of an SVG block.

    We also provide individual icons as SVGs located in this directory. You can include these on your page as raw SVGs as needed.

    diff --git a/src/routes/_index/component/link/+page.marko b/src/routes/_index/component/link/+page.marko index cdb5601288..26a2b74608 100644 --- a/src/routes/_index/component/link/+page.marko +++ b/src/routes/_index/component/link/+page.marko @@ -3,9 +3,9 @@

    The link module itself does not provide any base styling of anchor tags, that styling instead comes from the${" "} - + global - + module.

    diff --git a/src/routes/_index/component/listbox-button/+page.marko b/src/routes/_index/component/listbox-button/+page.marko index ca3e59bdba..72bc544b75 100644 --- a/src/routes/_index/component/listbox-button/+page.marko +++ b/src/routes/_index/component/listbox-button/+page.marko @@ -776,9 +776,9 @@

    This is a simple example with a simple error indication. For usage of the error state with an error message, please see the${" "} - + field module - + .

    diff --git a/src/routes/_index/component/menu-button/+page.marko b/src/routes/_index/component/menu-button/+page.marko index 905ef12dbf..82ce947e55 100644 --- a/src/routes/_index/component/menu-button/+page.marko +++ b/src/routes/_index/component/menu-button/+page.marko @@ -12,30 +12,30 @@ A menu is not ${" "}a form control. If you wish to submit form data natively, without JavaScript, please consider${" "} - + checkbox - + , - + combobox - + , - + select - + , or - + radio - + instead.

    Selecting a menu item command should update the page without ${" "}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${" "} - + fake menu button - + .

    @@ -446,13 +446,13 @@

    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${" "} - + single select menu button - + . For example: "Sort: Price", "Color: Red". This technique is identical to the method used by${" "} - + Listbox Button - + .

    @@ -904,13 +904,13 @@ be used as a dropdown for selecting and storing form data . Please use - + select - + or - + listbox-button - + for that purpose instead.

    diff --git a/src/routes/_index/component/menu/+page.marko b/src/routes/_index/component/menu/+page.marko index 32ecc6334c..badcd76cd8 100644 --- a/src/routes/_index/component/menu/+page.marko +++ b/src/routes/_index/component/menu/+page.marko @@ -5,30 +5,30 @@ A menu is not ${" "}a form control. If you wish to submit form data natively, without JavaScript, please consider${" "} - + checkbox - + , - + combobox - + , - + select - + , or - + radio - + instead.

    Selecting a menu item command should update the page without ${" "}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${" "} - + fake menu - + .

    @@ -104,9 +104,9 @@

    A menu item can be badged using the - + badge - + module.

    diff --git a/src/routes/_index/component/phone-input/+page.marko b/src/routes/_index/component/phone-input/+page.marko index 631e1bb9da..cc85bbf914 100644 --- a/src/routes/_index/component/phone-input/+page.marko +++ b/src/routes/_index/component/phone-input/+page.marko @@ -267,9 +267,9 @@ field classes. For label inline usage, please see the - + field module - + .

    diff --git a/src/routes/_index/component/radio/+page.marko b/src/routes/_index/component/radio/+page.marko index 4a960ba4c3..2084b46347 100644 --- a/src/routes/_index/component/radio/+page.marko +++ b/src/routes/_index/component/radio/+page.marko @@ -219,9 +219,9 @@

    The following example uses the - + field module - + for simple layout of radio button fields and labels.

    diff --git a/src/routes/_index/component/segmented-buttons/+page.marko b/src/routes/_index/component/segmented-buttons/+page.marko index 0ef825df09..ba7da320ca 100644 --- a/src/routes/_index/component/segmented-buttons/+page.marko +++ b/src/routes/_index/component/segmented-buttons/+page.marko @@ -124,9 +124,9 @@

    Any 24x24 - + icon - + can be added inside of a segmented-buttons__button-cell diff --git a/src/routes/_index/component/select/+page.marko b/src/routes/_index/component/select/+page.marko index 91171ea8e8..bbe0b07cb5 100644 --- a/src/routes/_index/component/select/+page.marko +++ b/src/routes/_index/component/select/+page.marko @@ -6,17 +6,17 @@

    The purpose of a select is to collect form data; therefore a select should always be used in conjunction with a form, label and submit button. If you are not submitting form data, then a${" "} - + menu - + maybe a better choice.

    IMPORTANT: ${" "}The examples below show the select in isolation, without any label. Please see the${" "} - + field - + ${" "}module for details on labeling controls. Remember: every select requires a label!

    diff --git a/src/routes/_index/component/skeleton/+page.marko b/src/routes/_index/component/skeleton/+page.marko index ff19fc4637..62659dd09e 100644 --- a/src/routes/_index/component/skeleton/+page.marko +++ b/src/routes/_index/component/skeleton/+page.marko @@ -8,9 +8,9 @@

    A skeleton is a graphical placeholder, reserving physical space in the page for content that is not yet available for the client to render. A skeleton can be considered as an alternative to the${" "} - + progress spinner - + in many situations.

    @@ -79,9 +79,9 @@ - + Avatar - +