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

Jump to bottom

fix: updates and adds implementation documentation for components #618

Merged
merged 4 commits into from
Aug 19, 2024
Merged

fix: updates and adds implementation documentation for components #618

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2aaa9da
Updates doc page: accordion
HeleenSG Aug 12, 2024
38486e0
Adds and updates implementation documentation per component
HeleenSG Aug 12, 2024
bc11c94
Removes unused link
HeleenSG Aug 12, 2024
ade83e0
Removes unused link
HeleenSG Aug 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
23 changes: 11 additions & 12 deletions docs/src/routes/(docs)/components/accordion/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,20 +347,19 @@
<h2>Bijbehorende bestanden</h2>
<p>
Voor meer informatie over importeren en instellen van componenten. Zie:
<a href="{base}/documentation/import-styling">
Componenten gebruiken en styling toevoegen
</a>
<a href="{base}/documentation/import-styling"
>Componenten gebruiken en styling toevoegen</a
>
</p>
<h3>Benodigd</h3>
<ul>
<li><code>accordion.scss</code></li>
<li><code>accordion.js</code></li>
</ul>

<h3>Optioneel</h3>
<ul>
<li><code>accordion-variables.scss</code></li>
</ul>
<h3>Importeer component via NPM</h3>
ppvg marked this conversation as resolved.
Show resolved Hide resolved
<h4>CSS-voorbeeld:</h4>
<Code
language="css"
code={`
@use "@minvws/manon/accordion";
ppvg marked this conversation as resolved.
Show resolved Hide resolved
`}
/>
</section>

<section id="variables">
Expand Down
24 changes: 13 additions & 11 deletions docs/src/routes/(docs)/components/button-call-to-action/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,18 +83,20 @@
<section id="requirements">
<h2>Bijbehorende bestanden</h2>
<p>
Voor meer informatie over het importeren en instellen van componenten. Zie:
<a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
Voor meer informatie over importeren en instellen van componenten. Zie:
<a href="{base}/documentation/import-styling"
>Componenten gebruiken en styling toevoegen</a
>
</p>
<h3>Benodigd</h3>
<ul>
<li><code>button/button-cta.scss</code></li>
</ul>

<h3>Optioneel</h3>
<ul>
<li><code>button/button-cta-variables-variables.scss</code></li>
</ul>

<h3>Importeer component via NPM</h3>
<h4>CSS-voorbeeld:</h4>
<Code
language="css"
code={`
@use "@minvws/manon/button-cta";
`}
/>
</section>

<section id="related">
Expand Down
31 changes: 30 additions & 1 deletion docs/src/routes/(docs)/components/button-destructive/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,23 @@
<script>
import { base } from "$app/paths";
import Code from "$lib/Code.svelte";
import SideMenu from "$lib/SideMenu.svelte";
</script>

<svelte:head>
<title>Destructieve knop</title>
</svelte:head>

<main id="main-content" tabindex="-1">
<main class="sidemenu" id="main-content" tabindex="-1">
<SideMenu>
<ul>
<li><a href="#introduction">Introductie</a></li>
<li><a href="#examples">Voorbeelden</a></li>
<li><a href="#requirements">Bijbehorende bestanden</a></li>
<li><a href="#related">Gerelateerde pagina's</a></li>
</ul>
</SideMenu>

<article id="button-base">
<div>
<section id="introduction">
Expand Down Expand Up @@ -82,6 +92,25 @@
/>
</section>

<section id="requirements">
<h2>Bijbehorende bestanden</h2>
<p>
Voor meer informatie over importeren en instellen van componenten. Zie:
<a href="{base}/documentation/import-styling"
>Componenten gebruiken en styling toevoegen</a
>
</p>

<h3>Importeer component via NPM</h3>
<h4>CSS-voorbeeld:</h4>
<Code
language="css"
code={`
@use "@minvws/manon/button-destructive";
`}
/>
</section>

<section id="variables">
<h2>Instelbare variabelen</h2>
<ul>
Expand Down
31 changes: 30 additions & 1 deletion docs/src/routes/(docs)/components/button-dropdown/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,27 @@
</script>

<script>
import { base } from "$app/paths";
import { onMount } from "svelte";
import Code from "$lib/Code.svelte";
import { initCollapsible } from "$lib/manon.js";
onMount(initCollapsible);
import SideMenu from "$lib/SideMenu.svelte";
</script>

<svelte:head>
<title>Dropdown button</title>
</svelte:head>

<main id="main-content" tabindex="-1">
<main class="sidemenu" id="main-content" tabindex="-1">
<SideMenu>
<ul>
<li><a href="#introduction">Introductie</a></li>
<li><a href="#examples">Voorbeelden</a></li>
<li><a href="#requirements">Bijbehorende bestanden</a></li>
</ul>
</SideMenu>

<article id="button-base">
<div>
<section id="introduction">
Expand Down Expand Up @@ -129,6 +139,25 @@ class="collapsible">
`}
/>
</section>

<section id="requirements">
<h2>Bijbehorende bestanden</h2>
<p>
Voor meer informatie over importeren en instellen van componenten. Zie:
<a href="{base}/documentation/import-styling"
>Componenten gebruiken en styling toevoegen</a
>
</p>

<h3>Importeer component via NPM</h3>
<h4>CSS-voorbeeld:</h4>
<Code
language="css"
code={`
@use "@minvws/manon/dropdown";
`}
/>
</section>
</div>
</article>
</main>
30 changes: 29 additions & 1 deletion docs/src/routes/(docs)/components/button-ghost/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,23 @@
<script>
import { base } from "$app/paths";
import Code from "$lib/Code.svelte";
import SideMenu from "$lib/SideMenu.svelte";
</script>

<svelte:head>
<title>Ghost button</title>
</svelte:head>

<main id="main-content" tabindex="-1">
<main class="sidemenu" id="main-content" tabindex="-1">
<SideMenu>
<ul>
<li><a href="#introduction">Introductie</a></li>
<li><a href="#examples">Voorbeelden</a></li>
<li><a href="#requirements">Bijbehorende bestanden</a></li>
reinschaap marked this conversation as resolved.
Show resolved Hide resolved
<li><a href="#related">Gerelateerde pagina's</a></li>
</ul>
</SideMenu>

<article id="button-base">
<div>
<section id="introduction">
Expand Down Expand Up @@ -82,6 +92,24 @@
/>
</section>

<section id="requirements">
<h2>Bijbehorende bestanden</h2>
<p>
Voor meer informatie over importeren en instellen van componenten. Zie:
<a href="{base}/documentation/import-styling"
>Componenten gebruiken en styling toevoegen</a
>
</p>

<h3>Importeer component via NPM</h3>
<h4>CSS-voorbeeld:</h4>
<Code
language="css"
code={`
@use "@minvws/manon/button-ghost";
`}
/>
</section>
<section id="variables">
<h2>Instelbare variabelen</h2>
<ul>
Expand Down
30 changes: 29 additions & 1 deletion docs/src/routes/(docs)/components/button-icon-only/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,22 @@
<script>
import { base } from "$app/paths";
import Code from "$lib/Code.svelte";
import SideMenu from "$lib/SideMenu.svelte";
</script>

<svelte:head>
<title>Icoonknoppen zonder achtergrond</title>
</svelte:head>

<main id="main-content" tabindex="-1">
<main class="sidemenu" id="main-content" tabindex="-1">
<SideMenu>
<ul>
<li><a href="#introduction">Introductie</a></li>
<li><a href="#examples">Voorbeelden</a></li>
<li><a href="#requirements">Bijbehorende bestanden</a></li>
</ul>
</SideMenu>

<article id="button-base">
<div>
<section id="introduction">
Expand Down Expand Up @@ -84,6 +93,25 @@
/>
</section>

<section id="requirements">
<h2>Bijbehorende bestanden</h2>
<p>
Voor meer informatie over importeren en instellen van componenten. Zie:
<a href="{base}/documentation/import-styling"
>Componenten gebruiken en styling toevoegen</a
>
</p>

<h3>Importeer component via NPM</h3>
<h4>CSS-voorbeeld:</h4>
<Code
language="css"
code={`
@use "@minvws/manon/button-icon-only";
`}
/>
</section>

<section id="variables">
<h2>Instelbare variabelen</h2>
<ul>
Expand Down
30 changes: 29 additions & 1 deletion docs/src/routes/(docs)/components/button-icon/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,22 @@
<script>
import { base } from "$app/paths";
import Code from "$lib/Code.svelte";
import SideMenu from "$lib/SideMenu.svelte";
</script>

<svelte:head>
<title>Icoonknoppen</title>
</svelte:head>

<main id="main-content" tabindex="-1">
<main class="sidemenu" id="main-content" tabindex="-1">
<SideMenu>
<ul>
<li><a href="#introduction">Introductie</a></li>
<li><a href="#examples">Voorbeelden</a></li>
<li><a href="#requirements">Bijbehorende bestanden</a></li>
</ul>
</SideMenu>

<article id="button-base">
<div>
<section id="introduction">
Expand Down Expand Up @@ -84,6 +93,25 @@
/>
</section>

<section id="requirements">
<h2>Bijbehorende bestanden</h2>
<p>
Voor meer informatie over importeren en instellen van componenten. Zie:
<a href="{base}/documentation/import-styling"
>Componenten gebruiken en styling toevoegen</a
>
</p>

<h3>Importeer component via NPM</h3>
<h4>CSS-voorbeeld:</h4>
<Code
language="css"
code={`
@use "@minvws/manon/button-icon";
`}
/>
</section>

<section id="variables">
<h2>Instelbare variabelen</h2>
<ul>
Expand Down
31 changes: 30 additions & 1 deletion docs/src/routes/(docs)/components/collapsible/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,27 @@
</script>

<script>
import { base } from "$app/paths";
import { onMount } from "svelte";
import Code from "$lib/Code.svelte";
import { initCollapsible } from "$lib/manon.js";
onMount(initCollapsible);
import SideMenu from "$lib/SideMenu.svelte";
</script>

<svelte:head>
<title>Inklapbaar component</title>
</svelte:head>

<main id="main-content" tabindex="-1">
<main class="sidemenu" id="main-content" tabindex="-1">
<SideMenu>
<ul>
<li><a href="#introduction">Introductie</a></li>
<li><a href="#examples">Voorbeelden</a></li>
<li><a href="#requirements">Bijbehorende bestanden</a></li>
</ul>
</SideMenu>

<article>
<div>
<section id="introduction">
Expand Down Expand Up @@ -417,6 +427,25 @@
`}
/>
</section>

<section id="requirements">
<h2>Bijbehorende bestanden</h2>
<p>
Voor meer informatie over importeren en instellen van componenten. Zie:
<a href="{base}/documentation/import-styling"
>Componenten gebruiken en styling toevoegen</a
>
</p>

<h3>Importeer component via NPM</h3>
<h4>CSS-voorbeeld:</h4>
<Code
language="css"
code={`
@use "@minvws/manon/collapsible";
`}
/>
</section>
</div>
</article>
</main>
Loading