diff --git a/dotcom-rendering/src/devServer/docs/article.tsx b/dotcom-rendering/src/devServer/docs/article.tsx index 64c92886120..19cdc1bd871 100644 --- a/dotcom-rendering/src/devServer/docs/article.tsx +++ b/dotcom-rendering/src/devServer/docs/article.tsx @@ -1,9 +1,10 @@ import { Available } from './available'; +import { descriptionLinks } from './styles'; const OtherExamples = () => ( <>

Other Examples

-
+
Minute-by-minute tag page diff --git a/dotcom-rendering/src/devServer/docs/available.tsx b/dotcom-rendering/src/devServer/docs/available.tsx index 438d3c474ba..5c2cdd533f3 100644 --- a/dotcom-rendering/src/devServer/docs/available.tsx +++ b/dotcom-rendering/src/devServer/docs/available.tsx @@ -1,3 +1,5 @@ +import { space, textEgyptianBold17Object } from '@guardian/source/foundations'; + type Target = 'dotcom' | 'live apps' | 'editions app' | 'amp'; const href = (target: Target): string => { @@ -27,9 +29,22 @@ function* links(targets: Target[]) { export const Available = ({ targets }: { targets: Target[] }) => (
-
Available targets
-
-
    {Array.from(links(targets))}
+
Available targets:
+
+
    + {Array.from(links(targets))} +
); diff --git a/dotcom-rendering/src/devServer/docs/doc.tsx b/dotcom-rendering/src/devServer/docs/doc.tsx index 84999c8c2f3..ca6736b35d4 100644 --- a/dotcom-rendering/src/devServer/docs/doc.tsx +++ b/dotcom-rendering/src/devServer/docs/doc.tsx @@ -1,4 +1,15 @@ +import { css } from '@emotion/react'; +import { + article17Object, + headlineBold24Object, + headlineMedium20Object, + headlineMedium24Object, + headlineMedium34Object, + palette, + space, +} from '@guardian/source/foundations'; import type { ReactNode } from 'react'; +import { grid } from '../../grid'; const Charset = () => ; @@ -16,25 +27,72 @@ const Head = ({ title, path }: { title: string; path: string }) => ( ); const Body = ({ title, children }: { title: string; children: ReactNode }) => ( - - -

{title}

- {children} + +