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/shared/components/Buttons/buttons.md b/shared/components/Buttons/buttons.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/shared/components/Buttons/buttons.tsx b/shared/components/Buttons/buttons.tsx new file mode 100644 index 0000000000..e69de29bb2 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 100% rename from shared/components/page-grid.tsx rename to shared/components/PageGrid/page-grid.tsx 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;