Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: design tokens for Paragraph #1817

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

docs: design tokens for Paragraph #1817

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9e6a969
docs: add Candidate component docs for Paragraph
Robbert Dec 12, 2024
6f72c3d
WIP
Robbert Dec 12, 2024
a4f9952
fixup! WIP
Robbert Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 97 additions & 0 deletions docs/componenten/paragraph/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ import Wcag1410 from "@nl-design-system-unstable/documentation/wcag/summaries/_1
import { ComponentAliases } from "@site/src/components/ComponentAliases";
import { ComponentAnatomy } from "@site/src/components/ComponentAnatomy";
import { CriteriaList } from "@site/src/components/ComponentCriteriaList";
import { DesignTokens } from "@site/src/components/DesignTokens";

import {
DefinitionOfDone,
HelpImproveComponent,
Expand All @@ -46,6 +48,101 @@ export const component = componentProgress.find((item) => item.number === issueN

<ComponentAnatomy component={component} illustration={ParagraphIllustration} />

## Gebruik deze component

### CSS

De CSS van deze component is gepubliceerd in een npm package:

[<img src="https://badge.fury.io/js/@nl-design-system-candidate%2Fparagraph-css.svg" alt="" style={{verticalAlign: 'middle'}} /> @nl-design-system-candidate/paragraph-css](https://www.npmjs.com/package/@nl-design-system-candidate/paragraph-css)
versie 2.

Gebruik de `nl-paragraph` class name op een `p` element:

```html
<p class="nl-paragraph">Op brute wijze ving de schooljuf de quasi-kalme lynx.</p>
```

Voor de Lead Paragraph gebruik je de extra class name `nl-paragraph--lead`:

```html
<p class="nl-paragraph nl-paragraph--lead">
Op brute wijze ving de schooljuf de quasi-kalme lynx. Je gelooft nooit wat er toen gebeurde!
</p>
```

Je kunt de CSS zo in je project installeren:

```sh
npm install --save-dev @nl-design-system-candidate/paragraph-css
```

Als je een CDN gebruikt, dan kun je de CSS zo importeren:

```html
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@nl-design-system-candidate/paragraph-css@2/dist/paragraph.css"
/>
```

Gebruik je geen CDN, dan kun je de CSS uit `node_modules/` importeren:

```html
<link rel="stylesheet" href="node_modules/@nl-design-system-candidate/paragraph-css@2/dist/paragraph.css" />
```

Als je CSS imports gebruikt vanuit JavaScript:

```js
import "@nl-design-system-candidate/paragraph-css/dist/paragraph.css";
```

### React

De React component is gepubliceerd in een npm package:

[<img src="https://badge.fury.io/js/@nl-design-system-candidate%2Fparagraph-react.svg" alt="" style={{verticalAlign: 'middle'}} /> @nl-design-system-candidate/paragraph-react](https://www.npmjs.com/package/@nl-design-system-candidate/paragraph-react)
versie 2.

Je kunt de npm package zo installeren:

```sh
npm install --save-dev @nl-design-system-candidate/paragraph-react
```

Je kunt de React component zo gebruiken:

```jsx
import { Paragraph } from "@nl-design-system-candidate/paragraph-css/dist/paragraph.css";

export const MyPage = () => {
return (
<html>
<body>
<Paragraph>Op brute wijze ving de schooljuf de quasi-kalme lynx.</Paragraph>
</body>
</html>
);
};
```

De Lead Paragraph werkt zo:

Je kunt de React component zo gebruiken:

```jsx
<Paragraph purpose="lead">Op brute wijze ving de schooljuf de quasi-kalme lynx.</Paragraph>
```

### Figma

De Figma component staat in [NL Design System Voorbeeld Bibliotheek — Paragraph]([https://www.figma.com/design/shhwGcqPLi2CapK0P1zz8O/NLDS---Voorbeeld---Bibliotheek?node-id=150-734&node-type=canvas&t=SxsN8cwA5f9cXqQx-0).

### Design Tokens

<DesignTokens tokens={[]} />

## Definition of Done

<DefinitionOfDone component={component} headingLevel={3} />
Expand Down
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,8 +106,10 @@
"@fontsource/open-sans": "5.1.0",
"@fontsource/source-sans-pro": "5.1.0",
"@mdx-js/react": "3.0.1",
"@nl-design-system-unstable/design-tokens-table-react": "1.0.0",
"@nl-design-system-unstable/documentation": "workspace:*",
"@nl-design-system-unstable/nlds-design-tokens": "workspace:*",
"@nl-design-system-unstable/tokens-lib": "0.1.0",
"@nl-design-system-unstable/voorbeeld-design-tokens": "1.0.0-alpha.151",
"@nl-design-system/component-progress": "1.0.1-alpha.82",
"@nl-design-system/eslint-config": "0.0.1",
Expand Down
Loading