diff --git a/about/link-showcase.page.tsx b/about/link-showcase.page.tsx index d45d14b607..3cd6db079c 100644 --- a/about/link-showcase.page.tsx +++ b/about/link-showcase.page.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { PageGrid, PageGridRow, PageGridCol } from "shared/components/PageGrid/page-grid"; -import { Link } from "shared/components/Link/Link"; +import { BdsLink } from "shared/components/Link/Link"; export const frontmatter = { seo: { @@ -49,19 +49,19 @@ export default function LinkShowcase() { Small
- + Small Internal Link - +
- + Small External Link - +
- + Disabled Internal Link - +
{/* Medium Row */} @@ -70,19 +70,19 @@ export default function LinkShowcase() { Medium
- + Medium Internal Link - +
- + Medium External Link - +
- + Disabled External Link - +
{/* Large Row */} @@ -91,19 +91,19 @@ export default function LinkShowcase() { Large
- + Large Internal Link - +
- + Large External Link - +
- + Disabled Internal Link - +
@@ -118,21 +118,21 @@ export default function LinkShowcase() {
Small
- + Small Link - +
Medium
- + Medium Link - +
Large
- + Large Link - +
@@ -176,15 +176,15 @@ export default function LinkShowcase() {
Default (hover to see state changes and arrow animation)
- + Default Link - +
Disabled
- + Disabled Link - +
@@ -199,23 +199,23 @@ export default function LinkShowcase() {
Arrow (Internal) - animates to chevron on hover
- + Arrow Link - +
External
- + External Link - +
Inline (No Icon)

This is a paragraph with an{" "} - + inline link - {" "} + {" "} embedded within the text.

@@ -231,23 +231,23 @@ export default function LinkShowcase() {
Internal
- + Internal Link - +
External
- + External Link - +
Inline

This is a paragraph with an{" "} - + inline link - {" "} + {" "} that appears within the text flow.

@@ -264,40 +264,40 @@ export default function LinkShowcase() {
Navigation Links
- + View Documentation - - + + Learn More About XRPL - - + + GitHub Repository - +
Inline Text Links

The XRP Ledger is a decentralized public blockchain. You can{" "} - + read the technical documentation - {" "} + {" "} to learn more about how it works. The network is maintained by a{" "} - + global community - {" "} + {" "} of developers and validators.

Call-to-Action Links
- + Get Started with XRPL - - + + Explore Use Cases - +
diff --git a/shared/components/Link/Link.md b/shared/components/Link/Link.md index c54e201f2b..82bde84307 100644 --- a/shared/components/Link/Link.md +++ b/shared/components/Link/Link.md @@ -1,4 +1,4 @@ -# Link Component +# BdsLink Component A comprehensive, accessible link component from the XRPL.org Brand Design System (BDS). Supports multiple variants, sizes, and automatic theme-aware color states with animated arrow icons. @@ -21,9 +21,9 @@ A comprehensive, accessible link component from the XRPL.org Brand Design System ## Installation ```tsx -import { Link } from 'shared/components/Link'; +import { BdsLink } from 'shared/components/Link'; // or -import { Link } from 'shared/components/Link/Link'; +import { BdsLink } from 'shared/components/Link/Link'; ``` --- @@ -32,16 +32,16 @@ import { Link } from 'shared/components/Link/Link'; ```tsx // Internal link (default) -View Documentation +View Documentation // External link - + External Resource - + // Inline link (no icon)

- Learn more about our mission. + Learn more about our mission.

``` @@ -69,9 +69,9 @@ import { Link } from 'shared/components/Link/Link'; For navigation within the same website. Displays a horizontal arrow (→) that animates to a chevron (>) on hover. ```tsx - + Internal Documentation - + ``` ### External @@ -79,14 +79,14 @@ For navigation within the same website. Displays a horizontal arrow (→) that a For links to external websites. Displays a diagonal arrow with corner bracket (↗) that animates on hover. Always use with `target="_blank"` and `rel="noopener noreferrer"` for security. ```tsx - GitHub Repository - + ``` ### Inline @@ -96,7 +96,7 @@ For links embedded within body text. No icon is displayed, making the link flow ```tsx

The XRP Ledger is a decentralized blockchain. You can{" "} - read the documentation{" "} + read the documentation{" "} to learn more.

``` @@ -112,9 +112,9 @@ For links embedded within body text. No icon is displayed, making the link flow | `large` | 20px | 1.5 | 10px | ```tsx -Small Link -Medium Link -Large Link +Small Link +Medium Link +Large Link ``` --- @@ -196,13 +196,13 @@ The Link component follows accessibility best practices: ```tsx // Good - Descriptive link text -View pricing plans +View pricing plans // Bad - Non-descriptive -Click here +Click here // External with screen reader context - GitHub Repository - + ``` --- @@ -222,39 +222,39 @@ The Link component follows accessibility best practices: 1. **Use appropriate variants** ```tsx // Internal navigation - About Us + About Us // External sites - + GitHub - + // Within paragraphs -

Learn about XRP today.

+

Learn about XRP today.

``` 2. **Match size to context** ```tsx // Navigation/CTA - use large - Get Started + Get Started // Body content - use medium - Documentation + Documentation // Footnotes/captions - use small - Terms of Service + Terms of Service ``` 3. **Always use security attributes for external links** ```tsx - External Site - + ``` ### Don'ts @@ -262,28 +262,28 @@ The Link component follows accessibility best practices: 1. **Don't use disabled for navigation prevention** - Use proper routing instead ```tsx // Bad - Using disabled for auth gate - Dashboard + Dashboard // Good - Handle in onClick or router - Dashboard + Dashboard ``` 2. **Don't mix variants inappropriately** ```tsx // Bad - External link with internal variant - External Site + External Site // Good - External Site + External Site ``` 3. **Don't use inline variant for standalone links** ```tsx // Bad - Standalone inline link - Documentation + Documentation // Good - Use internal for standalone - Documentation + Documentation ``` --- @@ -294,10 +294,10 @@ The Link component follows accessibility best practices: ```tsx ``` @@ -313,12 +313,12 @@ The Link component follows accessibility best practices: ```tsx
- + Get Started with XRPL - - + + Explore Use Cases - +
``` @@ -328,24 +328,24 @@ The Link component follows accessibility best practices:

The XRP Ledger (XRPL) is a decentralized, public blockchain led by a{" "} - global community{" "} + global community{" "} of businesses and developers. It supports a wide variety of{" "} - use cases{" "} + use cases{" "} including payments, tokenization, and DeFi.

To learn more, check out the{" "} - official documentation{" "} + official documentation{" "} or visit the{" "} - GitHub repository - . + .

``` @@ -354,9 +354,9 @@ The Link component follows accessibility best practices: ```tsx
- + Premium Features (Coming Soon) - + This feature is not yet available.
``` diff --git a/shared/components/Link/Link.tsx b/shared/components/Link/Link.tsx index 0d2b6fe399..2bcea0fb2f 100644 --- a/shared/components/Link/Link.tsx +++ b/shared/components/Link/Link.tsx @@ -6,7 +6,7 @@ export type LinkVariant = 'internal' | 'external' | 'inline'; export type LinkSize = 'small' | 'medium' | 'large'; export type LinkIconType = 'arrow' | 'external' | null; -export interface LinkProps extends React.AnchorHTMLAttributes { +export interface BdsLinkProps extends React.AnchorHTMLAttributes { /** * Link variant - internal, external, or inline * @default 'internal' @@ -45,7 +45,7 @@ export interface LinkProps extends React.AnchorHTMLAttributes } /** - * Link Component + * BdsLink Component * * A comprehensive link component supporting multiple sizes, icon types, and states. * Arrow icons animate to chevron shape on hover. @@ -73,27 +73,27 @@ export interface LinkProps extends React.AnchorHTMLAttributes * @example * ```tsx * // Basic internal link (arrow animates to chevron on hover) - * + * * View documentation - * + * * * // External link - * + * * External resource - * + * * * // Disabled link - * + * * Coming soon - * + * * * // Inline link (no icon) - * + * * Learn more - * + * * ``` */ -export const Link: React.FC = ({ +export const BdsLink: React.FC = ({ variant = 'internal', size = 'medium', icon = null, @@ -165,4 +165,4 @@ export const Link: React.FC = ({ ); }; -Link.displayName = 'Link'; +BdsLink.displayName = 'BdsLink'; diff --git a/shared/components/Link/index.ts b/shared/components/Link/index.ts index 2ddad8ec24..173b398d2b 100644 --- a/shared/components/Link/index.ts +++ b/shared/components/Link/index.ts @@ -1,5 +1,5 @@ -export { Link } from './Link'; -export type { LinkProps, LinkVariant, LinkSize, LinkIconType } from './Link'; +export { BdsLink } from './Link'; +export type { BdsLinkProps, LinkVariant, LinkSize, LinkIconType } from './Link'; export { LinkArrow } from './LinkArrow'; export type { LinkArrowProps, LinkArrowVariant, LinkArrowSize } from './LinkArrow';