diff --git a/_code-samples/build-a-desktop-wallet/js/7-send-xrp/view/template.html b/_code-samples/build-a-desktop-wallet/js/7-send-xrp/view/template.html index b4af6637aa..5bbe7b1ce5 100644 --- a/_code-samples/build-a-desktop-wallet/js/7-send-xrp/view/template.html +++ b/_code-samples/build-a-desktop-wallet/js/7-send-xrp/view/template.html @@ -92,7 +92,7 @@
-

Send XRP

+

Send XRP

diff --git a/_code-samples/build-a-desktop-wallet/js/8-domain-verification/view/template.html b/_code-samples/build-a-desktop-wallet/js/8-domain-verification/view/template.html index 0e33077ae7..908a7393ca 100644 --- a/_code-samples/build-a-desktop-wallet/js/8-domain-verification/view/template.html +++ b/_code-samples/build-a-desktop-wallet/js/8-domain-verification/view/template.html @@ -92,7 +92,7 @@
-

Send XRP

+

Send XRP

diff --git a/about/index.page.tsx b/about/index.page.tsx index aeefaee8ea..f031e61fdb 100644 --- a/about/index.page.tsx +++ b/about/index.page.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { useThemeHooks } from '@redocly/theme/core/hooks'; import { Link } from '@redocly/theme/components/Link/Link'; -import { PageGrid, PageGridCol, PageGridRow } from "shared/components/page-grid"; +import { PageGrid, PageGridCol, PageGridRow } from "shared/components/PageGrid/page-grid"; export const frontmatter = { seo: { diff --git a/about/xrp.page.tsx b/about/xrp.page.tsx index 7782b3bf1f..8ed4b6427d 100644 --- a/about/xrp.page.tsx +++ b/about/xrp.page.tsx @@ -229,7 +229,7 @@ export default function XrpOverview() { className="mw-100 mb-2 invertible-img" src={briefcaseIcon} /> -
+
{translate("Financial Institutions")}

@@ -244,7 +244,7 @@ export default function XrpOverview() { className="mw-100 mb-2 invertible-img" src={userIcon} /> -

+
{translate("Individual Consumers")}

@@ -361,7 +361,7 @@ export default function XrpOverview() {

  • -
    {translate("Software Wallets")}
    +
    {translate("Software Wallets")}
    • {softwallets.map((wallet) => (
  • @@ -381,7 +381,7 @@ export default function XrpOverview() {
    • ))}
  • -
    {translate("Hardware Wallets")}
    +
    {translate("Hardware Wallets")}
    • {hardwallets.map((wallet) => (
  • @@ -423,7 +423,7 @@ export default function XrpOverview() {

    -
    {translate("Spot Exchanges")}
    +
    {translate("Spot Exchanges")}

    {translate( "Spot exchanges allow people to buy and sell cryptocurrencies at current (spot) market rates." @@ -431,7 +431,7 @@ export default function XrpOverview() {

    -
    +
    {translate("Futures, Options and Swap Exchanges")}

    @@ -441,7 +441,7 @@ export default function XrpOverview() {

    -
    +
    {translate("Custodial Exchanges")}

    @@ -451,7 +451,7 @@ export default function XrpOverview() {

    -
    +
    {translate("Non-Custodial Exchanges")}

    diff --git a/docs/tutorials/javascript/build-apps/build-a-desktop-wallet-in-javascript.md b/docs/tutorials/javascript/build-apps/build-a-desktop-wallet-in-javascript.md index 8be7d40200..e691547992 100644 --- a/docs/tutorials/javascript/build-apps/build-a-desktop-wallet-in-javascript.md +++ b/docs/tutorials/javascript/build-apps/build-a-desktop-wallet-in-javascript.md @@ -1106,7 +1106,7 @@ const { sendXrp } = require('./library/7_helpers')

    -

    Send XRP

    +

    Send XRP

    diff --git a/docs/use-cases/payments/index.page.tsx b/docs/use-cases/payments/index.page.tsx index 34fce078b5..5b7fcdc704 100644 --- a/docs/use-cases/payments/index.page.tsx +++ b/docs/use-cases/payments/index.page.tsx @@ -221,7 +221,7 @@ const PaymentsPage: React.FC = () => {
    -
    +
    {translate("Payments")}

    diff --git a/docs/use-cases/tokenization/index.page.tsx b/docs/use-cases/tokenization/index.page.tsx index 915f8b375b..fa91fe47aa 100644 --- a/docs/use-cases/tokenization/index.page.tsx +++ b/docs/use-cases/tokenization/index.page.tsx @@ -199,7 +199,7 @@ export default function Tokenization() { "Work with a variety of tokens supported by the XRP Ledger." )}

    -
    +
    {translate("Tokenization")}
    @@ -273,7 +273,7 @@ export default function Tokenization() { target="_blank" href={article.url} > -
    +
    {translate(article.time)}
    {translate(article.title)}
    diff --git a/index.page.tsx b/index.page.tsx index 5bbb5116fe..eb243ab08c 100644 --- a/index.page.tsx +++ b/index.page.tsx @@ -1,7 +1,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks'; import { Link } from '@redocly/theme/components/Link/Link'; import { BenefitsSection } from 'shared/components/benefits-section'; -import { PageGrid, PageGridCol, PageGridRow } from 'shared/components/page-grid'; +import { PageGrid, PageGridCol, PageGridRow } from 'shared/components/PageGrid/page-grid'; export const frontmatter = { seo: { diff --git a/styles/_xrpl-grid.scss b/shared/components/PageGrid/_page-grid.scss similarity index 100% rename from styles/_xrpl-grid.scss rename to shared/components/PageGrid/_page-grid.scss diff --git a/shared/components/PageGrid/page-grid.md b/shared/components/PageGrid/page-grid.md new file mode 100644 index 0000000000..0f45fbf23d --- /dev/null +++ b/shared/components/PageGrid/page-grid.md @@ -0,0 +1,277 @@ +# PageGrid Component + +A responsive grid system component for creating flexible layouts with support for multiple breakpoints. + +## Overview + +The PageGrid component provides a flexible grid layout system with three main components: +- `PageGrid` - The container component +- `PageGrid.Row` - Row component for grouping columns +- `PageGrid.Col` - Column component with responsive sizing and offset support + +## Breakpoints + +The grid system supports the following breakpoints: +- `base` - Default/mobile (applies to all sizes) +- `sm` - Small screens +- `md` - Medium screens +- `lg` - Large screens +- `xl` - Extra large screens + +## Basic Usage + +```tsx +import { PageGrid } from '@/shared/components/PageGrid/page-grid'; + +function MyComponent() { + return ( + + + + Column 1 + + + Column 2 + + + + ); +} +``` + +## PageGrid Props + +The root `PageGrid` component accepts all standard HTML div attributes: + +| Prop | Type | Description | +|------|------|-------------| +| `className` | `string` | Additional CSS classes to apply | +| `...rest` | `HTMLDivElement attributes` | Any other HTML div attributes | + +## PageGrid.Row Props + +The `PageGrid.Row` component accepts all standard HTML div attributes: + +| Prop | Type | Description | +|------|------|-------------| +| `className` | `string` | Additional CSS classes to apply | +| `...rest` | `HTMLDivElement attributes` | Any other HTML div attributes | + +## PageGrid.Col Props + +| Prop | Type | Description | +|------|------|-------------| +| `span` | `number \| "auto" \| "fill" \| ResponsiveValue` | Column span width | +| `offset` | `number \| ResponsiveValue` | Column offset (left margin) | +| `className` | `string` | Additional CSS classes to apply | +| `...rest` | `HTMLDivElement attributes` | Any other HTML div attributes | + +### Span Values + +- **Number** (e.g., `1-12`): Fixed column width +- **"auto"**: Column takes up only the space it needs +- **"fill"**: Column fills remaining available space +- **Responsive Object**: Different spans for different breakpoints + +### Offset Values + +- **Number** (e.g., `1-12`): Number of columns to offset +- **Responsive Object**: Different offsets for different breakpoints + +## Examples + +### Fixed Column Widths + +```tsx + + + Sidebar + Main Content + + +``` + +### Auto and Fill + +```tsx + + + Minimal Width + Takes Remaining Space + Another Auto + + +``` + +### Responsive Layout + +Create layouts that adapt to different screen sizes: + +```tsx + + + + Responsive Column + + + +``` + +### Using Offsets + +Center content or create spacing with offsets: + +```tsx + + + {/* Center an 8-column element */} + + Centered Content + + + +``` + +### Responsive Offsets + +```tsx + + + + Content + + + +``` + +### Complex Responsive Layout + +```tsx + + + {/* Hero section */} + +

    Page Title

    +     +     + + + {/* Sidebar - full width on mobile, 1/3 on desktop */} + + + + + {/* Main content - full width on mobile, 2/3 on desktop */} + +
    Main Content
    +     +     +     +``` + +### Multiple Columns with Equal Width + +```tsx + + + Column 1 + Column 2 + Column 3 + Column 4 + + +``` + +### Nested Grids + +```tsx + + + + + + Nested Column 1 + Nested Column 2 + + + + + +``` + +## CSS Classes Generated + +The component generates the following CSS classes: + +### Container +- `xrpl-grid__container` + +### Row +- `xrpl-grid__row` + +### Column Spans +- `xrpl-grid__col-{number}` (e.g., `xrpl-grid__col-6`) +- `xrpl-grid__col-auto` +- `xrpl-grid__col` (for fill) +- `xrpl-grid__col-{breakpoint}-{number}` (e.g., `xrpl-grid__col-md-6`) +- `xrpl-grid__col-{breakpoint}-auto` +- `xrpl-grid__col-{breakpoint}` (for fill) + +### Column Offsets +- `xrpl-grid__offset-{number}` (e.g., `xrpl-grid__offset-2`) +- `xrpl-grid__offset-{breakpoint}-{number}` (e.g., `xrpl-grid__offset-md-2`) + +## TypeScript Types + +```typescript +type PageGridBreakpoint = "base" | "sm" | "md" | "lg" | "xl"; +type ResponsiveValue = T | Partial>; +type PageGridSpanValue = number | "auto" | "fill"; +type PageGridOffsetValue = number; + +interface PageGridColProps { + span?: ResponsiveValue; + offset?: ResponsiveValue; + className?: string; + // ... plus all HTMLDivElement attributes +} +``` + +## Best Practices + +1. **Use semantic HTML**: Wrap content in appropriate semantic elements within columns +2. **Mobile-first**: Start with base/mobile layout and progressively enhance for larger screens +3. **Keep it simple**: Avoid overly complex nested grid structures when possible +4. **Test responsiveness**: Verify layouts work well at all breakpoint transitions +5. **Accessibility**: Ensure grid layouts maintain logical reading order for screen readers + +## Notes + +- The total columns in the grid system is typically 12 (though this depends on your CSS implementation) +- Responsive values cascade - if you don't specify a value for a breakpoint, it inherits from the previous breakpoint +- All components forward refs, allowing you to attach refs to the underlying DOM elements + diff --git a/shared/components/page-grid.tsx b/shared/components/PageGrid/page-grid.tsx similarity index 55% rename from shared/components/page-grid.tsx rename to shared/components/PageGrid/page-grid.tsx index 4fd85a98c3..97565b11a8 100644 --- a/shared/components/page-grid.tsx +++ b/shared/components/PageGrid/page-grid.tsx @@ -2,7 +2,11 @@ import React from "react"; import clsx from "clsx"; type PageGridElementProps = React.HTMLAttributes; + +// Define the standard PageGrid breakpoints type PageGridBreakpoint = "base" | "sm" | "md" | "lg" | "xl"; + +// Define the ResponsiveValue type using Partial for breakpoints type ResponsiveValue = T | Partial>; export interface PageGridProps extends PageGridElementProps {} @@ -17,24 +21,50 @@ export interface PageGridColProps extends PageGridElementProps { offset?: ResponsiveValue; } +// Keys used for iteration and generating responsive class prefixes const breakpointKeys: Array> = ["sm", "md", "lg", "xl"]; -const classForSpan = (prefix: string | null, value: PageGridSpanValue) => { +/** + * Helper function to construct the column span CSS class string. + * This function relies on the corresponding classes being pre-generated in SCSS. + * @param prefix The breakpoint prefix (e.g., 'md' or null for base). + * @param value The span value (number, "auto", or "fill"). + * @returns The full CSS class string. + */ +const classForSpan = (prefix: string | null, value: PageGridSpanValue): string => { + const prefixStr = prefix ? `-${prefix}` : ""; + if (value === "auto") { - return prefix ? `xrpl-grid__col-${prefix}-auto` : "xrpl-grid__col-auto"; + // Generates xrpl-grid__col-auto or xrpl-grid__col-md-auto + return `xrpl-grid__col${prefixStr}-auto`; } if (value === "fill") { - return prefix ? `xrpl-grid__col-${prefix}` : "xrpl-grid__col"; + // Generates xrpl-grid__col or xrpl-grid__col-md (based on documentation) + // Note: The documentation states 'xrpl-grid__col' for fill, and 'xrpl-grid__col-{breakpoint}' for fill + // The implementation below aligns with the documentation's example logic: + return prefix ? `xrpl-grid__col${prefixStr}` : "xrpl-grid__col"; } - return prefix ? `xrpl-grid__col-${prefix}-${value}` : `xrpl-grid__col-${value}`; + // Generates xrpl-grid__col-6 or xrpl-grid__col-md-6 + return `xrpl-grid__col${prefixStr}-${value}`; }; -const classForOffset = (prefix: string | null, value: PageGridOffsetValue) => { - return prefix ? `xrpl-grid__offset-${prefix}-${value}` : `xrpl-grid__offset-${value}`; +/** + * Helper function to construct the column offset CSS class string. + * This function relies on the corresponding classes being pre-generated in SCSS. + * @param prefix The breakpoint prefix (e.g., 'md' or null for base). + * @param value The offset value (number). + * @returns The full CSS class string. + */ +const classForOffset = (prefix: string | null, value: PageGridOffsetValue): string => { + const prefixStr = prefix ? `-${prefix}` : ""; + // Generates xrpl-grid__offset-2 or xrpl-grid__offset-md-2 + return `xrpl-grid__offset${prefixStr}-${value}`; }; + +// --- PageGrid Root Component --- const PageGridRoot = React.forwardRef( ({ className, ...rest }, ref) => (
    @@ -43,59 +73,74 @@ const PageGridRoot = React.forwardRef( PageGridRoot.displayName = "PageGrid"; + +// --- PageGrid.Row Component --- const PageGridRow = React.forwardRef( ({ className, ...rest }, ref) => (
    ) ); -PageGridRoot.displayName = "PageGrid"; +PageGridRow.displayName = "PageGridRow"; // Renamed display name for clarity +// --- PageGrid.Col Component --- const PageGridCol = React.forwardRef((props, ref) => { const { className, span, offset, ...rest } = props; const spanClasses: string[] = []; const offsetClasses: string[] = []; + // --- Span Logic --- if (typeof span === "number" || typeof span === "string") { + // Handles fixed/base span={6} or span="auto" spanClasses.push(classForSpan(null, span as PageGridSpanValue)); } else if (span && typeof span === "object") { + // Handles base breakpoint (no prefix) const baseSpan = "base" in span ? span.base : undefined; if (baseSpan) { spanClasses.push(classForSpan(null, baseSpan)); } + // Handles sm, md, lg, xl breakpoints (with prefix) breakpointKeys.forEach((key) => { const value = span[key]; if (value) { + // Generates classes like xrpl-grid__col-md-6 spanClasses.push(classForSpan(key, value)); } }); } + // --- Offset Logic --- if (typeof offset === "number") { + // Handles fixed offset={2} offsetClasses.push(classForOffset(null, offset)); } else if (offset && typeof offset === "object") { + // Handles base offset (no prefix) const baseOffset = "base" in offset ? offset.base : undefined; if (baseOffset !== undefined) { offsetClasses.push(classForOffset(null, baseOffset)); } + // Handles sm, md, lg, xl offsets (with prefix) breakpointKeys.forEach((key) => { const value = offset[key]; if (value !== undefined) { + // Generates classes like xrpl-grid__offset-md-3 offsetClasses.push(classForOffset(key, value)); } }); } + // Ensure the base class is always applied for styling return (
    ); @@ -103,6 +148,8 @@ const PageGridCol = React.forwardRef((props, r PageGridCol.displayName = "PageGridCol"; + +// --- Component Composition --- type PageGridComponent = typeof PageGridRoot & { Row: typeof PageGridRow; Col: typeof PageGridCol; diff --git a/shared/components/benefits-section.tsx b/shared/components/benefits-section.tsx index f94089fe20..003faf6ec0 100644 --- a/shared/components/benefits-section.tsx +++ b/shared/components/benefits-section.tsx @@ -42,7 +42,7 @@ export const BenefitsSection: React.FC = ({ {cards.map(card => (
  • {showImages && {card.title} -

    {translate(card.title)}

    +

    {translate(card.title)}

    {typeof card.description === 'string' ? translate(card.description) : card.description}

    diff --git a/static/css/devportal2024-v1.css b/static/css/devportal2024-v1.css index 3d495d8c30..75d6199d2f 100644 --- a/static/css/devportal2024-v1.css +++ b/static/css/devportal2024-v1.css @@ -9250,60 +9250,6 @@ p { line-height: 24px; } -.fs-base { - font-size: 1rem; -} - -.fs-3 { - font-size: 0.75rem; - line-height: 1rem; -} - -.fs-4-5 { - font-size: 1.125rem; -} - -.fs-5 { - font-size: 1.25rem; -} - -.fs-5-5 { - font-size: 1.375rem; -} - -.fs-6 { - font-size: 1.5rem; -} - -.normal { - font-weight: normal; -} - -.bold { - font-weight: bold; -} - -.text-largest { - font-size: 1.5rem; - font-weight: normal; -} - -.text-large { - font-size: 1.125rem; -} - -.text-small { - font-size: 0.875rem; -} - -.text-smaller { - font-size: 0.75rem; -} - -.text-smallest { - font-size: 0.625rem; -} - /* STYLIZED LINKS */ .arrow-link { text-decoration: none; @@ -11382,74 +11328,6 @@ article table td:nth-child(1) { } } -/* TABLE STYLING */ -article table { - clear: right; - margin-bottom: 48px; -} -article table code { - word-break: normal; - white-space: nowrap; - overflow-wrap: normal; -} -article table th { - border-bottom: 2px solid #E0E0E1; -} -article table tr { - border-bottom: 1px solid #E0E0E1; -} -article table th, article table td { - padding: 0.2em; - vertical-align: text-top; -} -article table td:nth-child(1) { - font-weight: bold; -} - -.landing-table th, .landing-table tr { - border-bottom: 2px solid #454549; -} -.landing-table td { - width: 33.33%; - padding: 16px 40px 16px 0; -} -.landing-table td:nth-child(1) { - font-weight: normal; -} -@media (max-width: 575.98px) { - .landing-table td { - font-size: 0.875rem; - } -} -.landing-table tr:last-child { - border-bottom: none; -} -.landing-table tbody td { - color: #E0E0E1; -} - -.dblue { - color: #454549; -} - -#overview-table td:nth-child(1) { - width: 40%; -} -#overview-table td:nth-child(2) { - width: 30%; -} -#overview-table tbody td { - padding: 2rem 0.75rem; -} -@media (max-width: 575.98px) { - #overview-table { - font-size: 0.875rem; - } - #overview-table thead .h4 { - font-size: 1.125rem; - } -} - /* Use Cases ---------------------------------------------------------------- */ .modal-uses.exchanges .logo-item { max-height: 58px; @@ -15496,12 +15374,6 @@ main article .card-grid.card-grid-3xN:nth-of-type(3) .card:nth-child(9) .card-fo .landing article .curated-links li a:hover { text-decoration: underline; } -.landing section:first-of-type h1:first-child, .landing section:first-of-type .h1:first-child { - font-family: "Tobias", "Noto Serif", monospace; - font-weight: 400; - margin-top: 0; - line-height: 1.2; -} .landing .level-1, .landing .level-2 { margin-top: 0; diff --git a/styles/_font.scss b/styles/_font.scss index f07ba5b4ef..35a2337d75 100644 --- a/styles/_font.scss +++ b/styles/_font.scss @@ -13,11 +13,6 @@ pre, code { font-variant-ligatures: none; } -// h1, h2, h3, h4, h5, h6, -// .h1, .h2, .h3, .h4, .h5, .h6 { -// font-weight: bold; -// } - .h1, .h2, .h3, .h4, .h5, .h6 { font-family: $font-family-monospace; font-weight: 400; @@ -108,49 +103,6 @@ p { line-height: 24px; } -.fs-base { - font-size: $base-size; -} -.fs-3 { - font-size: 0.75rem; - line-height: 1rem; -} -.fs-4-5 { - font-size: 1.125rem; -} -.fs-5 { - font-size: 1.25rem; -} -.fs-5-5 { - font-size: 1.375rem; -} -.fs-6 { - font-size: 1.5rem; -} -.normal { - font-weight: normal; -} -.bold { - font-weight: bold; -} - -.text-largest { - font-size: 1.5rem; - font-weight: normal; -} -.text-large { - font-size: 1.125rem; -} -.text-small { - font-size: 0.875rem; -} -.text-smaller { - font-size: 0.75rem; -} -.text-smallest { - font-size: 0.625rem; -} - /* STYLIZED LINKS */ .arrow-link { text-decoration: none; diff --git a/styles/_landings.scss b/styles/_landings.scss index e129d5d696..137efcf8dc 100644 --- a/styles/_landings.scss +++ b/styles/_landings.scss @@ -23,13 +23,6 @@ } } - section:first-of-type h1:first-child { - font-family: $font-family-monospace; - font-weight: 400; - margin-top: 0; - line-height: 1.2; - } - .level-1, .level-2{ margin-top: 0; diff --git a/styles/xrpl.scss b/styles/xrpl.scss index 07e507b429..25490014ec 100644 --- a/styles/xrpl.scss +++ b/styles/xrpl.scss @@ -49,6 +49,7 @@ $grid-breakpoints: ( ); // Bootstrap v5 - Import only what we need +// Note: Bootstrap still uses @import internally, so we use @import for Bootstrap @import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/variables-dark"; @@ -87,13 +88,12 @@ $grid-breakpoints: ( @import "_buttons.scss"; @import "../shared/components/Button/Button.scss"; @import "_tables.scss"; -@import "_tables.scss"; @import "_use-cases.scss"; @import "_github-edit.scss"; @import "_top-nav.scss"; @import "_top-banner.scss"; @import "_content.scss"; -@import "_xrpl-grid.scss"; +@import "../shared/components/PageGrid/page-grid"; @import "_code-tabs.scss"; @import "_code-walkthrough.scss"; @import "_diagrams.scss"; @@ -115,6 +115,7 @@ $grid-breakpoints: ( @import "_contribute.scss"; @import "_docs-landing.scss"; @import "_osano.scss"; + // Light/Dark theme settings --------------------------------------------------- // Option to only change theme on user system settings. No toggle.