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.

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: add mark usage #1843

Merged
merged 3 commits into from
Dec 20, 2024
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
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
73 changes: 73 additions & 0 deletions docs/componenten/mark/_usage.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
# Gebruik Mark

## CSS

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

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

Gebruik de `nl-mark` class name op een `mark` element:

```html
<mark class="nl-mark">Gemarkeerde tekst</mark>
```

Je kunt de CSS zo in je project installeren:

```sh
npm install --save-dev @nl-design-system-candidate/mark-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/mark-css@1/dist/mark.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/mark-css/dist/mark.css" />
```

Als je CSS imports gebruikt vanuit JavaScript:

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

## React

De React component is gepubliceerd in een npm package:

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

Je kunt de npm package zo installeren:

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

Je kunt de React component zo gebruiken:

```jsx
import { Mark } from "@nl-design-system-candidate/mark-react";

export const MyPage = () => {
return (
<html>
<body>
<p>
<Mark href="https://example.com">example.com</Mark>
</p>
</body>
</html>
);
};
Robbert marked this conversation as resolved.
Show resolved Hide resolved
```

## Figma

De Figma component staat in [NL Design System Voorbeeld Bibliotheek — mark](https://www.figma.com/design/shhwGcqPLi2CapK0P1zz8O/NLDS---Voorbeeld---Bibliotheek?node-id=15527-33132&t=GQQ2sAXlU56nNksS-4).
8 changes: 8 additions & 0 deletions docs/componenten/mark/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ import {
Implementations,
Introduction,
} from "@site/src/components/ComponentPage";
import Usage from "./_usage.md";
import { Markdown } from "@site/src/components/Markdown";

{/* Add name and description for the component */}
export const title = "Mark";
Expand All @@ -48,6 +50,12 @@ export const component = componentProgress.find((item) => item.number === issueN

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

## Gebruik deze component

<Markdown omitH1 headingLevel={3}>
<Usage />
</Markdown>

## Definition of Done

<DefinitionOfDone component={component} headingLevel={3} />
Expand Down
Loading