mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-12-06 17:27:57 +00:00
2ff14e4224
- Introduced new styles for BDS link icons, including hover and focus states. - Updated existing link styles to exclude BDS links from certain color and hover effects. - Ensured consistent styling across light and dark themes for BDS links. - Refactored landing page link styles to accommodate new BDS link classes.
311 lines
13 KiB
TypeScript
311 lines
13 KiB
TypeScript
import * as React from "react";
|
|
import { PageGrid, PageGridRow, PageGridCol } from "shared/components/PageGrid/page-grid";
|
|
import { Link } from "shared/components/Link/Link";
|
|
|
|
export const frontmatter = {
|
|
seo: {
|
|
title: 'Link Component Showcase',
|
|
description: "A comprehensive showcase of all Link component variants, sizes, and states in the XRPL.org Design System.",
|
|
}
|
|
};
|
|
|
|
export default function LinkShowcase() {
|
|
return (
|
|
<div className="landing">
|
|
<div className="overflow-hidden">
|
|
<section className="py-26 text-center">
|
|
<div className="col-lg-8 mx-auto">
|
|
<h6 className="eyebrow mb-3">Component Showcase</h6>
|
|
<h1 className="mb-4">Link Component</h1>
|
|
<p className="longform">
|
|
A comprehensive showcase of all Link component variants, sizes, and states.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<PageGrid className="py-26">
|
|
<PageGridRow>
|
|
<PageGridCol span={12}>
|
|
<h2 className="h4 mb-6">Size by Variant Matrix</h2>
|
|
<div className="mb-10">
|
|
{/* Header Row */}
|
|
<div className="d-flex flex-row mb-4" style={{ gap: '2rem' }}>
|
|
<div style={{ width: '120px', flexShrink: 0 }}>
|
|
<h6 className="mb-0">Size</h6>
|
|
</div>
|
|
<div style={{ flex: '1 1 0', minWidth: 0 }}>
|
|
<h6 className="mb-0">Internal Links</h6>
|
|
</div>
|
|
<div style={{ flex: '1 1 0', minWidth: 0 }}>
|
|
<h6 className="mb-0">External Links</h6>
|
|
</div>
|
|
<div style={{ flex: '1 1 0', minWidth: 0 }}>
|
|
<h6 className="mb-0">Disabled State</h6>
|
|
</div>
|
|
</div>
|
|
{/* Small Row */}
|
|
<div className="d-flex flex-row mb-5 align-items-center" style={{ gap: '2rem' }}>
|
|
<div style={{ width: '120px', flexShrink: 0 }}>
|
|
<strong>Small</strong>
|
|
</div>
|
|
<div style={{ flex: '1 1 0', minWidth: 0 }}>
|
|
<Link href="/docs" variant="internal" size="small">
|
|
Small Internal Link
|
|
</Link>
|
|
</div>
|
|
<div style={{ flex: '1 1 0', minWidth: 0 }}>
|
|
<Link href="https://example.com" variant="external" size="small" target="_blank" rel="noopener noreferrer">
|
|
Small External Link
|
|
</Link>
|
|
</div>
|
|
<div style={{ flex: '1 1 0', minWidth: 0 }}>
|
|
<Link href="#" variant="internal" size="small" disabled>
|
|
Disabled Internal Link
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
{/* Medium Row */}
|
|
<div className="d-flex flex-row mb-5 align-items-center" style={{ gap: '2rem' }}>
|
|
<div style={{ width: '120px', flexShrink: 0 }}>
|
|
<strong>Medium</strong>
|
|
</div>
|
|
<div style={{ flex: '1 1 0', minWidth: 0 }}>
|
|
<Link href="/docs" variant="internal" size="medium">
|
|
Medium Internal Link
|
|
</Link>
|
|
</div>
|
|
<div style={{ flex: '1 1 0', minWidth: 0 }}>
|
|
<Link href="https://example.com" variant="external" size="medium" target="_blank" rel="noopener noreferrer">
|
|
Medium External Link
|
|
</Link>
|
|
</div>
|
|
<div style={{ flex: '1 1 0', minWidth: 0 }}>
|
|
<Link href="#" variant="external" size="medium" disabled>
|
|
Disabled External Link
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
{/* Large Row */}
|
|
<div className="d-flex flex-row align-items-center" style={{ gap: '2rem' }}>
|
|
<div style={{ width: '120px', flexShrink: 0 }}>
|
|
<strong>Large</strong>
|
|
</div>
|
|
<div style={{ flex: '1 1 0', minWidth: 0 }}>
|
|
<Link href="/docs" variant="internal" size="large">
|
|
Large Internal Link
|
|
</Link>
|
|
</div>
|
|
<div style={{ flex: '1 1 0', minWidth: 0 }}>
|
|
<Link href="https://example.com" variant="external" size="large" target="_blank" rel="noopener noreferrer">
|
|
Large External Link
|
|
</Link>
|
|
</div>
|
|
<div style={{ flex: '1 1 0', minWidth: 0 }}>
|
|
<Link href="#" variant="internal" size="large" disabled>
|
|
Disabled Internal Link
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</PageGridCol>
|
|
</PageGridRow>
|
|
</PageGrid>
|
|
|
|
<PageGrid className="py-26">
|
|
<PageGridRow>
|
|
<PageGridCol span={12}>
|
|
<h2 className="h4 mb-6">Sizes</h2>
|
|
<div className="d-flex flex-column gap-4 mb-10">
|
|
<div>
|
|
<h6 className="mb-3">Small</h6>
|
|
<Link href="/docs" size="small">
|
|
Small Link
|
|
</Link>
|
|
</div>
|
|
<div>
|
|
<h6 className="mb-3">Medium</h6>
|
|
<Link href="/docs" size="medium">
|
|
Medium Link
|
|
</Link>
|
|
</div>
|
|
<div>
|
|
<h6 className="mb-3">Large</h6>
|
|
<Link href="/docs" size="large">
|
|
Large Link
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</PageGridCol>
|
|
</PageGridRow>
|
|
</PageGrid>
|
|
|
|
<PageGrid className="py-26">
|
|
<PageGridRow>
|
|
<PageGridCol span={12}>
|
|
<h2 className="h4 mb-6">Color States</h2>
|
|
<p className="mb-4">Links automatically handle color states via CSS per theme:</p>
|
|
|
|
<div className="d-flex flex-row gap-6 mb-6" style={{ flexWrap: 'wrap' }}>
|
|
{/* Light Mode Colors */}
|
|
<div style={{ flex: '1 1 300px', minWidth: '280px' }}>
|
|
<h6 className="mb-3">Light Mode</h6>
|
|
<ul className="mb-0">
|
|
<li><strong>Enabled:</strong> Green 400 <code style={{ color: '#0DAA3E' }}>#0DAA3E</code></li>
|
|
<li><strong>Hover/Focus:</strong> Green 500 <code style={{ color: '#078139' }}>#078139</code> + underline</li>
|
|
<li><strong>Active:</strong> Green 400 <code style={{ color: '#0DAA3E' }}>#0DAA3E</code> + underline</li>
|
|
<li><strong>Visited:</strong> Lilac 400 <code style={{ color: '#7649E3' }}>#7649E3</code></li>
|
|
<li><strong>Disabled:</strong> Gray 400 <code style={{ color: '#A2A2A4' }}>#A2A2A4</code></li>
|
|
<li><strong>Focus Outline:</strong> Black <code style={{ color: '#000000' }}>#000000</code></li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Dark Mode Colors */}
|
|
<div style={{ flex: '1 1 300px', minWidth: '280px' }}>
|
|
<h6 className="mb-3">Dark Mode</h6>
|
|
<ul className="mb-0">
|
|
<li><strong>Enabled:</strong> Green 300 <code style={{ color: '#21E46B' }}>#21E46B</code></li>
|
|
<li><strong>Hover/Focus:</strong> Green 200 <code style={{ color: '#70EE97' }}>#70EE97</code> + underline</li>
|
|
<li><strong>Active:</strong> Green 300 <code style={{ color: '#21E46B' }}>#21E46B</code> + underline</li>
|
|
<li><strong>Visited:</strong> Lilac 300 <code style={{ color: '#C0A7FF' }}>#C0A7FF</code></li>
|
|
<li><strong>Disabled:</strong> Gray 500 <code style={{ color: '#838386' }}>#838386</code></li>
|
|
<li><strong>Focus Outline:</strong> White <code style={{ color: '#FFFFFF', backgroundColor: '#333', padding: '0 4px' }}>#FFFFFF</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="d-flex flex-column gap-4 mb-10">
|
|
<div>
|
|
<h6 className="mb-3">Default (hover to see state changes and arrow animation)</h6>
|
|
<Link href="/docs" size="medium">
|
|
Default Link
|
|
</Link>
|
|
</div>
|
|
<div>
|
|
<h6 className="mb-3">Disabled</h6>
|
|
<Link href="#" size="medium" disabled>
|
|
Disabled Link
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</PageGridCol>
|
|
</PageGridRow>
|
|
</PageGrid>
|
|
|
|
<PageGrid className="py-26">
|
|
<PageGridRow>
|
|
<PageGridCol span={12}>
|
|
<h2 className="h4 mb-6">Icon Types</h2>
|
|
<p className="mb-4">Arrow icons animate to chevron shape on hover (150ms cubic-bezier transition).</p>
|
|
<div className="d-flex flex-column gap-4 mb-10">
|
|
<div>
|
|
<h6 className="mb-3">Arrow (Internal) - animates to chevron on hover</h6>
|
|
<Link href="/docs" size="medium" icon="arrow">
|
|
Arrow Link
|
|
</Link>
|
|
</div>
|
|
<div>
|
|
<h6 className="mb-3">External</h6>
|
|
<Link href="https://example.com" size="medium" variant="external" target="_blank" rel="noopener noreferrer">
|
|
External Link
|
|
</Link>
|
|
</div>
|
|
<div>
|
|
<h6 className="mb-3">Inline (No Icon)</h6>
|
|
<p>
|
|
This is a paragraph with an{" "}
|
|
<Link href="/docs" variant="inline">
|
|
inline link
|
|
</Link>{" "}
|
|
embedded within the text.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</PageGridCol>
|
|
</PageGridRow>
|
|
</PageGrid>
|
|
|
|
<PageGrid className="py-26">
|
|
<PageGridRow>
|
|
<PageGridCol span={12}>
|
|
<h2 className="h4 mb-6">Variants</h2>
|
|
<div className="d-flex flex-column gap-4 mb-10">
|
|
<div>
|
|
<h6 className="mb-3">Internal</h6>
|
|
<Link href="/docs" variant="internal" size="medium">
|
|
Internal Link
|
|
</Link>
|
|
</div>
|
|
<div>
|
|
<h6 className="mb-3">External</h6>
|
|
<Link href="https://example.com" variant="external" size="medium" target="_blank" rel="noopener noreferrer">
|
|
External Link
|
|
</Link>
|
|
</div>
|
|
<div>
|
|
<h6 className="mb-3">Inline</h6>
|
|
<p>
|
|
This is a paragraph with an{" "}
|
|
<Link href="/docs" variant="inline">
|
|
inline link
|
|
</Link>{" "}
|
|
that appears within the text flow.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</PageGridCol>
|
|
</PageGridRow>
|
|
</PageGrid>
|
|
|
|
<PageGrid className="py-26">
|
|
<PageGridRow>
|
|
<PageGridCol span={12}>
|
|
<h2 className="h4 mb-6">Real-World Examples</h2>
|
|
<div className="d-flex flex-column gap-6 mb-10">
|
|
<div>
|
|
<h6 className="mb-4">Navigation Links</h6>
|
|
<div className="d-flex flex-column gap-3">
|
|
<Link href="/docs" size="medium">
|
|
View Documentation
|
|
</Link>
|
|
<Link href="/about" size="medium">
|
|
Learn More About XRPL
|
|
</Link>
|
|
<Link href="https://github.com/XRPLF/xrpl-dev-portal" variant="external" size="medium" target="_blank" rel="noopener noreferrer">
|
|
GitHub Repository
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h6 className="mb-4">Inline Text Links</h6>
|
|
<p className="longform">
|
|
The XRP Ledger is a decentralized public blockchain. You can{" "}
|
|
<Link href="/docs" variant="inline">
|
|
read the technical documentation
|
|
</Link>{" "}
|
|
to learn more about how it works. The network is maintained by a{" "}
|
|
<Link href="/about" variant="inline">
|
|
global community
|
|
</Link>{" "}
|
|
of developers and validators.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h6 className="mb-4">Call-to-Action Links</h6>
|
|
<div className="d-flex flex-column gap-3">
|
|
<Link href="/docs" size="large">
|
|
Get Started with XRPL
|
|
</Link>
|
|
<Link href="/about/uses" size="large">
|
|
Explore Use Cases
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</PageGridCol>
|
|
</PageGridRow>
|
|
</PageGrid>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|