Skip to content

Commit

Permalink
doc(typography): Add typography in examples
Browse files Browse the repository at this point in the history
annelhote committed Aug 2, 2024
1 parent c65e1e9 commit cae5001
Showing 3 changed files with 99 additions and 3 deletions.
3 changes: 3 additions & 0 deletions example-ts/src/layout/SideMenu.tsx
Original file line number Diff line number Diff line change
@@ -96,6 +96,9 @@ export function Side() {
<Link current={is('/composants/interrupteur')} href="/composants/interrupteur">
Toggle - Interrupteur
</Link>
<Link current={is('/composants/typography')} href="/composants/typography">
Typography - Typographie
</Link>
</SideMenuItem>
</SideMenu>
</Col>
91 changes: 91 additions & 0 deletions example-ts/src/pages/components/Typography.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import {
Breadcrumb,
Col,
Container,
Link,
Row,
Text,
Title,
} from "@dataesr/dsfr-plus";

import Playground from "../../components/Playground";

export function Typography() {
return (
<Container fluid className="fr-mb-5w">
<Row>
<Breadcrumb>
<Link href="/">Accueil</Link>
<Link href="/composants">Composants</Link>
<Link>Typography - Typographie</Link>
</Breadcrumb>
</Row>
<Row gutters>
<Col xs={12}>
<Title as="h1">Texte</Title>
<Text>Affichage d'un texte</Text>
<Playground
code={`<Text>Ceci est un texte</Text>`}
scope={{ Text }}
/>
</Col>
<Col xs={12}>
<Title as="h2">Petit texte</Title>
<Text>Tailles disponibles : xs, sm, md, lg et lead</Text>
<Playground
code={`<Text size="xs">Ceci est un petit texte</Text>`}
scope={{ Text }}
/>
</Col>
<Col xs={12}>
<Title as="h2">Texte en tag "span"</Title>
<Text>Tags disponibles : p et span. Défaut: p</Text>
<Playground
code={`<Text as="span">Ceci est un span</Text>`}
scope={{ Text }}
/>
</Col>
<Col xs={12}>
<Title as="h2">Texte avec alt</Title>
<Playground
code={`<Text alt="example de balise Texte avec alt">Ceci est un texte avec alt</Text>`}
scope={{ Text }}
/>
</Col>
<Col xs={12}>
<Title as="h2">Texte en gras</Title>
<Playground
code={`<Text bold>Ceci est un texte en gras</Text>`}
scope={{ Text }}
/>
</Col>
</Row>
<Row gutters>
<Col xs={12}>
<Title as="h1">Titre</Title>
<Text>Affichage d'un titre</Text>
<Playground
code={`<Title>Ceci est un titre</Title>`}
scope={{ Title }}
/>
</Col>
<Col xs={12}>
<Title as="h2">Petit titre</Title>
<Text>Tailles disponibles : xs, sm, md, lg et xl</Text>
<Playground
code={`<Title look="xs">Ceci est un petit titre</Title>`}
scope={{ Title }}
/>
</Col>
<Col xs={12}>
<Title as="h2">Titre en tag "h5"</Title>
<Text>Tags disponibles: h1, h2, h3, h4, h5 et h6. Défaut: h1</Text>
<Playground
code={`<Title as="h5">Ceci est un h5</Title>`}
scope={{ Title }}
/>
</Col>
</Row>
</Container>
);
}
8 changes: 5 additions & 3 deletions example-ts/src/router.tsx
Original file line number Diff line number Diff line change
@@ -16,17 +16,18 @@ import { Listboxes } from './pages/components/Listboxes';
import { Menus } from './pages/components/Menu';
import { Modals } from './pages/components/Modal';
import { Notices } from './pages/components/Notices';
import { QuickStart } from './pages/guides/QuickStart';
import { Radios } from './pages/components/Radios';
import { SegmentedControls } from './pages/components/SegmentedControls';
import { Selects } from './pages/components/Select';
import { SideMenus } from './pages/components/SideMenus';
import { Steppers } from './pages/components/Stepper';
import { TabsAndTab } from './pages/components/TabsAndTab';
import { Tags } from './pages/components/Tags';
import { TagInputs } from './pages/components/TagInputs';
import { Tags } from './pages/components/Tags';
import { Toasts } from './pages/components/Toasts';
import { Toggles } from './pages/components/Toggles';
import { SegmentedControls } from './pages/components/SegmentedControls';
import { Typography } from './pages/components/Typography';
import { QuickStart } from './pages/guides/QuickStart';

export default function Router() {
return (
@@ -61,6 +62,7 @@ export default function Router() {
<Route path="tag" element={<Tags />} />
<Route path="toast" element={<Toasts />} />
<Route path="segmentedControl" element={<SegmentedControls />} />
<Route path="typography" element={<Typography />} />
</Route>
</Route>
</Routes>

0 comments on commit cae5001

Please sign in to comment.