diff --git a/src/components/ApiDocs/TopSections.astro b/src/components/ApiDocs/TopSections.astro index 8f7f0820..5877d656 100644 --- a/src/components/ApiDocs/TopSections.astro +++ b/src/components/ApiDocs/TopSections.astro @@ -1,4 +1,5 @@ --- +import Button from "@components/Button"; import MarkdownContent from "@components/MarkdownContent.astro"; import { CodeBlock, MultiCode } from "@components/Code"; import Markdown from "@components/Markdown.astro"; @@ -6,7 +7,7 @@ import type { ApiTopSection } from "@lib/openapi/routes"; import { doc, resolveSchema } from "@lib/openapi"; import type { OpenAPIV3_1 } from "openapi-types"; import { ArrowSlanted } from "@sumup-oss/icons"; -import { Anchor, Body, Button, Card } from "@sumup-oss/circuit-ui"; +import { Anchor, Body, Card } from "@sumup-oss/circuit-ui"; import { getJavaSdkVersion } from "@lib/sdks/javaSdkVersion"; import Table from "@components/content/Table"; import Example from "./Example.astro"; @@ -44,18 +45,16 @@ const sectionAttrs = (id: ApiTopSection) => target="_blank" rel="noreferrer noopener" icon={ArrowSlanted} - > - View YAML spec - + label="View YAML spec" + /> + label="View JSON spec" + /> { diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 00000000..92fc4ce5 --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,17 @@ +import { + Button as CircuitButton, + I18nProvider, + type ButtonProps, +} from "@sumup-oss/circuit-ui"; + +// Astro renders each React component as a separate root, so buttons used in +// Astro templates need their own Circuit UI internationalization context. +type Props = Omit & { label: string }; + +export default function Button({ label, ...props }: Props) { + return ( + + {label} + + ); +} diff --git a/src/components/ContactForm.tsx b/src/components/ContactForm.tsx index 75aef5f4..8489d4ac 100644 --- a/src/components/ContactForm.tsx +++ b/src/components/ContactForm.tsx @@ -2,6 +2,7 @@ import { Anchor, Body, ButtonGroup, + I18nProvider, ToastProvider, useNotificationToast, type SelectOption, @@ -273,9 +274,11 @@ const Contact: FC = ({ status }) => { export default function ContactForm(params: ContactParams) { return ( - - - + + + + + ); } diff --git a/src/components/RssIcon.tsx b/src/components/RssIcon.tsx new file mode 100644 index 00000000..0b493459 --- /dev/null +++ b/src/components/RssIcon.tsx @@ -0,0 +1,18 @@ +import type { IconProps } from "@sumup-oss/icons"; + +export default function RssIcon({ size = "16", ...props }: IconProps) { + return ( + + ); +} diff --git a/src/components/content/SearchableTable.tsx b/src/components/content/SearchableTable.tsx index faa33806..320c7427 100644 --- a/src/components/content/SearchableTable.tsx +++ b/src/components/content/SearchableTable.tsx @@ -1,4 +1,4 @@ -import { SearchInput } from "@sumup-oss/circuit-ui"; +import { I18nProvider, SearchInput } from "@sumup-oss/circuit-ui"; import { useMemo, useRef, useState } from "react"; import styles from "./SearchableTable.module.css"; @@ -44,23 +44,25 @@ const SearchableTable = ({ }, [columns, normalizedQuery, rows]); return ( -
- setSearchQuery(event.target.value)} - placeholder={searchPlaceholder} - hideLabel - /> + +
+ setSearchQuery(event.target.value)} + placeholder={searchPlaceholder} + hideLabel + /> - - +
+ + ); }; diff --git a/src/overrides/PageTitle.astro b/src/overrides/PageTitle.astro index 54991901..d460e03b 100644 --- a/src/overrides/PageTitle.astro +++ b/src/overrides/PageTitle.astro @@ -1,5 +1,6 @@ --- -import { Display, Body, Button } from "@sumup-oss/circuit-ui"; +import Button from "@components/Button"; +import { Display, Body } from "@sumup-oss/circuit-ui"; import { ArrowSlanted } from "@sumup-oss/icons"; const { @@ -40,9 +41,8 @@ const linkItems = Array.isArray(links) ? links : []; rel={isExternal ? "noreferrer noopener" : undefined} icon={isExternal ? ArrowSlanted : undefined} className="page-link" - > - {link.title} - + label={link.title} + /> ); })} diff --git a/src/pages/changelog/index.astro b/src/pages/changelog/index.astro index 191c6849..5c949088 100644 --- a/src/pages/changelog/index.astro +++ b/src/pages/changelog/index.astro @@ -1,7 +1,9 @@ --- +import Button from "@components/Button"; +import RssIcon from "@components/RssIcon"; import { getCollection, render } from "astro:content"; import slugify from "@sindresorhus/slugify"; -import { Status, Body, Button, Anchor, Headline } from "@sumup-oss/circuit-ui"; +import { Status, Body, Anchor, Headline } from "@sumup-oss/circuit-ui"; import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro"; import MarkdownContent from "@components/MarkdownContent.astro"; import type { StarlightPageProps } from "@astrojs/starlight/props"; @@ -57,35 +59,12 @@ const props = {
- +
{ @@ -204,14 +183,4 @@ const props = { display: flex; justify-content: center; } - - .rssButtonContent { - display: inline-flex; - align-items: center; - gap: var(--cui-spacings-byte); - } - - .rssIcon { - flex-shrink: 0; - } diff --git a/src/pages/changelog/tags/[tag].astro b/src/pages/changelog/tags/[tag].astro index 11c3a97e..56efeaf1 100644 --- a/src/pages/changelog/tags/[tag].astro +++ b/src/pages/changelog/tags/[tag].astro @@ -1,7 +1,9 @@ --- +import Button from "@components/Button"; +import RssIcon from "@components/RssIcon"; import { getCollection, render } from "astro:content"; import slugify from "@sindresorhus/slugify"; -import { Status, Body, Button, Anchor, Headline } from "@sumup-oss/circuit-ui"; +import { Status, Body, Anchor, Headline } from "@sumup-oss/circuit-ui"; import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro"; import MarkdownContent from "@components/MarkdownContent.astro"; import type { StarlightPageProps } from "@astrojs/starlight/props"; @@ -79,35 +81,12 @@ const props = {
- +
{