Skip to content

Commit

Permalink
fix: header navigation fixes (#571)
Browse files Browse the repository at this point in the history 
- Fixes icon-only elements within header navigations. 
- Adds button mixins for consistency and easier implementation of buttons within other components. 
- Adds header example with search field (and form) 
- Fixes button states (like focus, hover and active state)
- Updates styles for iCore open theme

This pr doesn't upgrade all components that use buttons yet. As we've decided to create separate pr's for that to keep this pr manageable. 
---------

Co-authored-by: Peter-Paul van Gemerden <[email protected]>
  • Loading branch information
@HeleenSG @ppvg
HeleenSG and ppvg authored Sep 17, 2024
1 parent 56c1fb7 commit d2d60f1
Show file tree
Hide file tree
Showing 35 changed files with 775 additions and 395 deletions.
44 changes: 35 additions & 9 deletions docs/src/routes/(docs)/components/button-base/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,30 @@
<script context="module">
export const breadcrumb = "Knoppen basisweergave";
export const breadcrumb = "Knoppen (basisweergave)";
</script>

<script>
import { base } from "$app/paths";
import Code from "$lib/Code.svelte";
import SideMenu from "$lib/SideMenu.svelte";
</script>

<svelte:head>
<title>Knoppen basisweergave</title>
<title>Knoppen (basisweergave)</title>
</svelte:head>

<main id="main-content" tabindex="-1">
<article id="button-base">
<main class="sidemenu" id="main-content" tabindex="-1">
<SideMenu>
<ul>
<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="examples" class="visually-grouped">
<div>
<h1>Basisweergave</h1>
<section id="button-base-button" class="visually-grouped">
<h1>Knoppen (basisweergave)</h1>
<section id="button-base-button">
<h2><code>button</code></h2>
<h3>Visuele weergave:</h3>

Expand All @@ -28,7 +37,24 @@
<button>Lorem ipsum</button>
`}
/>
</section>

<section id="button-base-link-button">
<h2>Link als button: <code>a</code></h2>
<h3>Visuele weergave:</h3>

<a href="button-base" class="button">Lorem ipsum</a>

<h3>HTML-voorbeeld:</h3>
<Code
language="html"
code={`
<a href="#" class="button">Lorem ipsum</a>
`}
/>
</section>

<section id="button-base-disabled">
<h2><code>button</code> uitgeschakeld</h2>
<h3>Visuele weergave:</h3>

Expand All @@ -43,7 +69,7 @@
/>
</section>

<section id="button-base-input" class="visually-grouped">
<section id="button-base-input">
<h2><code>input type="button"</code></h2>
<h3>Visuele weergave:</h3>

Expand Down Expand Up @@ -71,7 +97,7 @@
/>
</section>

<section id="requirements" class="visually-grouped">
<section id="requirements">
<h2>Bijbehorende bestanden</h2>
<p>
Voor meer informatie over importeren en instellen van componenten. Zie:
Expand All @@ -96,7 +122,7 @@
/>
</section>

<section id="related" class="visually-grouped">
<section id="related">
<h2>Gerelateerde pagina's</h2>
<a href="{base}/components/button-test">Test- en voorbeelden-pagina</a>
</section>
Expand Down
4 changes: 3 additions & 1 deletion docs/src/routes/(docs)/components/button-icon-only/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,9 @@
<Code
language="css"
code={`
@use "@minvws/manon/button-icon-only";
@use "@minvws/manon/button-base";
@use "@minvws/manon/icon";
@use "@minvws/manon/button-icon-only";
`}
/>
</section>
Expand Down
4 changes: 3 additions & 1 deletion docs/src/routes/(docs)/components/button-icon/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,9 @@
<Code
language="css"
code={`
@use "@minvws/manon/button-icon";
@use "@minvws/manon/button-base";
@use "@minvws/manon/icon";
@use "@minvws/manon/button-icon";
`}
/>
</section>
Expand Down
10 changes: 8 additions & 2 deletions docs/src/routes/(docs)/components/header-navigation/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,9 @@
>Navigatie met content wrapper</a
>
</li>
<li>
<a href="{base}/components/header-navigation/example-search">Navigatie met zoekveld</a>
</li>
<li><a href="{base}/components/header-navigation/example-logo">Navigatie en logo</a></li>
<li>
<a href="{base}/components/header-navigation/example-multiple-menus"
Expand Down Expand Up @@ -81,8 +84,11 @@
</section>

<section id="requirements">
<h2>Bijbehorende bestanden</h2>
<p>Voeg de (s)css-bestanden toe aan het project of importeer de bestanden.</p>
<h1>Bijbehorende bestanden</h1>
<p>
Voeg de (s)css-bestanden toe aan het project of importeer de bestanden. Hiervoor kunnen de
bestanden gebruikt worden uit beschikbare Manon-thema's. Of uit zelf gemaakte thema's.
</p>
<p>
Voor meer informatie over importeren en instellen van componenten. Zie:
<a href="{base}/documentation/import-styling"
Expand Down
21 changes: 20 additions & 1 deletion docs/src/routes/(docs)/components/header-navigation/example-form-button/[email protected]
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-
<li>
<form class="inline">
<input type="hidden" name="_token" value="" />
<button type="submit">Logout</button>
<a href="#" class="button" type="submit">Logout</a>
</form>
</li>
</ul>
Expand Down Expand Up @@ -116,3 +116,22 @@ See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-
</main>

<DefaultFooter />

<style>
:root {
/* Header */
--header-border-width: 0 0 1px 0;
--header-border-color: #ccc;
/* Content wrapper */
--header-content-wrapper-position: relative;
/* Header navigation */
--header-navigation-position: static;
--header-navigation-border-width: 0;
--header-navigation-content-wrapper-gap: 1rem;
/* Collapsible menu */
--header-navigation-collapsible-menu-top: 4rem;
}
</style>
145 changes: 66 additions & 79 deletions ...src/routes/(docs)/components/header-navigation/example-language-select-list/[email protected]
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-
import { base } from "$app/paths";
import { onMount } from "svelte";
import Code from "$lib/Code.svelte";
import SideMenu from "$lib/SideMenu.svelte";
import SiteNavLinks from "$lib/SiteNavLinks.svelte";
import DefaultFooter from "$lib/DefaultFooter.svelte";
import { initCollapsible } from "$lib/manon.js";
Expand All @@ -23,8 +24,8 @@ See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-
</svelte:head>

<header>
<a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>
<div>
<a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>
<a href="{base}/" class="logo">
<img src="$img/logo-white.svg" alt="Placeholder logo" />Manon
</a>
Expand Down Expand Up @@ -87,16 +88,12 @@ See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-
</header>

<main class="sidemenu" id="main-content" tabindex="-1">
<nav
data-open-label="Zijbalknavigatie"
data-close-label="Sluit zijbalknavigatie"
aria-label="Document-navigatie"
>
<SideMenu>
<ul>
<li><a href="#introduction">Introductie</a></li>
<li><a href="#examples">Voorbeelden</a></li>
</ul>
</nav>
</SideMenu>
<article class="visually-grouped">
<div>
<section id="introduction">
Expand All @@ -115,99 +112,77 @@ See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-
<h1>Voorbeelden:</h1>
<p>Voor het visuele voorbeeld zie de header van deze pagina.</p>
<h2>HTML-voorbeeld:</h2>

<Code
language="html"
code={`
<header>
<a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>
<a href="/" class="logo">
<img src="/img/logo-white.svg" alt="Placeholder logo">Manon
</a>
<div>
<nav aria-label="Hoofdnavigatie">
<div class="collapsing-menu">
<a href="{base}/" class="logo">
<img src="$img/logo-white.svg" alt="Placeholder logo" />Manon
</a>
<nav
data-open-label="Menu"
data-close-label="Sluit menu"
data-media="(min-width: 42rem)"
aria-label="Hoofdnavigatie"
class="collapsible"
>
<div class="collapsing-element">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">Home</a>
<li><a href="/components">Componenten</a></li>
<li><a href="/documentation">Documentatie</a></li>
</ul>
</div>
</nav>
<div class="language-selector">
<p>Kies een taal:</p>
<p class="visually-hidden" id="language-selector-description">Select your language</p>
<div class="language-selector-options" aria-describedby="language-selector-description" aria-expanded="false">
<button aria-haspopup="listbox">
Papiamentu
</button>
<div
class="language-selector-options"
aria-describedby="language-selector-description"
aria-expanded="false"
>
<button aria-haspopup="listbox" lang="pap-CW">Papiamentu</button>
<ul role="listbox">
<li>
<a hreflang="nl" href="." role="option" data-value="Nederlands" lang="nl">Nederlands</a>
</li>
<li>
<a hreflang="en" href="." role="option" data-value="English" lang="en">English</a>
</li>
<li>
<a hreflang="fy" href="." role="option" data-value="Frysk" lang="fy">Frysk</a>
</li>
<li aria-current="true">
<a hreflang="pap-CW" href="." role="option" data-value="Papiamentu" lang="pap-CW">Papiamentu</a>
</li>
<li>
<a hreflang="pap-AW" href="." role="option" data-value="Papiamento" lang="pap-AW">Papiamento</a>
</li>
<li role="option" aria-selected="false">
<a hreflang="nl" href="example-language-select-list" data-value="Nederlands" lang="nl"
>Nederlands</a
>
</li>
<li role="option" aria-selected="false">
<a hreflang="en" href="example-language-select-list" data-value="English" lang="en"
>English</a
>
</li>
<li role="option" aria-selected="false">
<a hreflang="fy" href="example-language-select-list" data-value="Frysk" lang="fy"
>Frysk</a
>
</li>
<li role="option" aria-selected="true" aria-current="true">
<a
hreflang="pap-CW"
href="example-language-select-list"
data-value="Papiamentu"
lang="pap-CW">Papiamentu</a
>
</li>
<li role="option" aria-selected="false">
<a
hreflang="pap-AW"
href="example-language-select-list"
data-value="Papiamento"
lang="pap-AW">Papiamento</a
>
</li>
</ul>
</div>
</div>
<button class="round">LO</button>
</div>
</header>
`}
/>

<h2>CSS-voorbeeld:</h2>
<p>Ingestelde variabelen voor deze weergave</p>
<Code
language="css"
code={`
:root {
/* Header */
--header-padding-right: 1rem;
--header-padding-left: 1rem;
--header-min-height: 3rem;
--header-flex-direction: row;
--header-justify-content: space-between;
--header-background-color: #1b1b39;
--header-navigation-text-color: white;
--header-navigation-position: initial;
/* Navigation */
--header-navigation-border-width: 0;
--header-navigation-width: auto;
/* Collapsible menu */
--navigation-collapsible-menu-menu-order: 1;
/* Link styling */
--header-navigation-link-text-color: white;
--header-navigation-link-hover-text-color: var(--header-navigation-link-text-color);
--header-navigation-link-visited-text-color: var(--header-navigation-link-text-color);
--header-navigation-link-visited-hover-text-color: var(--header-navigation-link-text-color);
--header-navigation-link-active-text-color: var(--header-navigation-link-text-color);
/* Language selector list */
--language-selector-list-label-text-color: #fff;
/* Menu toggle button */
--navigation-collapsible-menu-button-background-color: transparent;
--navigation-collapsible-menu-icon-color: var(--header-navigation-link-text-color);
--navigation-collapsible-menu-button-min-width: 0;
--navigation-collapsible-menu-button-width: auto;
}
`}
/>
</section>
Expand All @@ -219,11 +194,23 @@ See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-

<style>
:root {
/* Header */
--header-border-width: 0 0 1px 0;
--header-border-color: #ccc;
--header-padding-right: var(--page-whitespace-right);
--header-padding-left: var(--page-whitespace-left);
/* Content wrapper */
--header-content-wrapper-position: relative;
--header-content-wrapper-gap: 1rem;
--header-content-wrapper-padding-top: 0.5rem;
--header-content-wrapper-padding-bottom: 0.5rem;
/* Header navigation */
--header-navigation-position: static;
--header-navigation-border-width: 0;
--header-navigation-padding-right: 0;
--header-navigation-padding-left: 0;
/* Collapsible menu */
--header-navigation-collapsible-menu-top: 4rem;
Expand Down
Loading

0 comments on commit d2d60f1

Please sign in to comment.