Skip to content

Commit

Permalink
Demopages/cmor (#541)
Browse files Browse the repository at this point in the history 
* Fix menu line

* Add Mijn dossier page

* Change Mijn Dossier page content

* Add advanced search toggle

* Add filter to My Dossier page

* Add responsive table concept

* Fix menu links
@rroose-rvo
rroose-rvo authored Dec 1, 2023

Verified

This commit was signed with the committer’s verified signature.
folkertdev Folkert de Vries
GPG key ID: 1F17F6FFD112B97C
Verified
Learn about vigilant mode
1 parent 01745f0 commit abc92fd
Showing 6 changed files with 610 additions and 39 deletions.
17 changes: 17 additions & 0 deletions documentation/demopages/cmor/MijnDossier.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import type { Meta, StoryObj } from '@storybook/react';
import MijnDossier from './MijnDossier';

const meta: Meta<typeof MijnDossier> = {
title: "Demo pagina's/CMOR/Mijn Dossier",
component: MijnDossier,
parameters: {
status: {
type: 'WORK IN PROGRESS',
},
},
};
export default meta;

type Story = StoryObj<typeof MijnDossier>;

export const Default: Story = { name: 'MijnDossier' };
398 changes: 398 additions & 0 deletions documentation/demopages/cmor/MijnDossier.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,398 @@
import {
Button,
CheckboxGroup,
Footer,
Icon,
LayoutColumnRow,
Link,
MenuBar,
StatusIcon,
TextInputField,
} from '@nl-rvo/components';
import '../common/rhs-update.scss';
import '../common/cmor.scss';

const MijnDossier = () => {
return (
<body className="rvo-theme rvo-cmor rvo-sidebar-menu-active">
<div className="rvo-cmor rvo-rhs-update">
<header className="rvo-header">
<div className="rvo-rhs-update-component">
<a className="rvo-logo" href="#">
<div className="rvo-logo-lint">
<img src="images/lint.svg" alt="" />
</div>
<div className="rvo-logo-text rvo-logo-text--full">
Rijksdienst voor Ondernemend <br />
Nederland
</div>
<div className="rvo-logo-text rvo-logo-text--abv">RVO</div>
</a>
</div>
</header>
<div className="rvo-rhs-update-component">
<div className="rvo-responsive-menu-wrapper">
<details className="rvo-responsive-menu">
<summary className="rvo-responsive-menu-toggle">
<Icon icon="menu" size="lg" /> Menu
</summary>
<div className="rvo-sidebar-menu">
<MenuBar
items={[
{
label: 'Overzicht',
link: 'iframe.html?args=&id=demo-pagina-s-cmor-overzicht--default&viewMode=story',
icon: 'home',
},
{
label: 'Mijn dossier',
link: 'iframe.html?args=&id=demo-pagina-s-cmor-mijn-dossier--default&viewMode=story',
icon: 'map',
active: true,
},
{ label: 'Mijn berichten', link: '#', icon: 'mail' },
{ label: 'Profiel & voorkeuren', link: '#', icon: 'user' },
]}
size="md"
useIcons={true}
iconPlacement="before"
menuMaxWidth="md"
/>
<MenuBar
items={[{ label: 'Hulp & Contact', link: '#', icon: 'communicatie' }]}
size="md"
useIcons={true}
iconPlacement="before"
menuMaxWidth="md"
/>
<MenuBar
items={[
{ label: 'English', link: '#', icon: 'wereldbol' },
{ label: 'Uitloggen', link: '#', icon: 'externe-link' },
]}
size="md"
useIcons={true}
iconPlacement="before"
menuMaxWidth="md"
/>
</div>
</details>
</div>
<div className="rvo-topnav--w-line">
<MenuBar
items={[
{
align: 'right',
label: 'Hulp & Contact',
link: '#',
},
{
align: 'right',
label: 'English',
icon: 'wereldbol',
link: '#',
},
{
align: 'right',
label: 'Boer Overveen B.V',
link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-profiel--default&viewMode=story',
active: true,
icon: 'user',
},
]}
size="lg"
useIcons={true}
iconPlacement="before"
menuMaxWidth="lg"
/>
</div>
</div>
<main className="rvo-main--cmor rvo-main--sidebar-active rvo-max-width-layout rvo-max-width-layout--lg rvo-main--w-line">
<div className="rvo-sidebar-menu">
<MenuBar
items={[
{
label: 'Overzicht',
link: 'iframe.html?args=&id=demo-pagina-s-cmor-overzicht--default&viewMode=story',
icon: 'home',
},
{
label: 'Mijn dossier',
link: '#iframe.html?args=&id=demo-pagina-s-cmor-mijn-dossier--default&viewMode=story',
icon: 'map',
active: true,
},
{ label: 'Mijn berichten', link: '#', icon: 'mail' },
{ label: 'Profiel & voorkeuren', link: '#', icon: 'user' },
]}
size="md"
useIcons={true}
iconPlacement="before"
menuMaxWidth="md"
/>
</div>
<div className="rvo-content--cmor rvo-content--mijn-dossier">
<LayoutColumnRow size="xl">
<h1 className="utrecht-heading-1">
<strong>Mijn dossier</strong>
</h1>
<LayoutColumnRow size="sm">
<p className="rvo-paragraph rvo-paragraph--no-spacing">Naar welke aanvraag bent u op zoek?</p>
<LayoutColumnRow row={true} size="sm" wrap={true}>
<a className="rvo-tag rvo-tag--outline rvo-tag--active" href="#">
ISDE (active)
</a>
<a className="rvo-tag rvo-tag--outline" href="#">
WSBO
</a>
<a className="rvo-tag rvo-tag--outline" href="#">
Gecombineerde opgave
</a>
<a className="rvo-tag rvo-tag--outline" href="#">
SVVE
</a>
</LayoutColumnRow>
</LayoutColumnRow>
<details className="rvo-expandable-area">
<summary className="rvo-expandable-area-toggle">
<Icon icon="delta-omlaag" />
<Icon icon="delta-omhoog" />
<Link content="Uitgebreid zoeken" noUnderline={true}></Link>
</summary>
<LayoutColumnRow size="md">
<div className="rvo-inline-form">
<div className="rvo-rhs-update-component">
<LayoutColumnRow row={true} size="sm">
<TextInputField label="Regeling of referentienummer" />
<Button kind="primary">Zoeken</Button>
</LayoutColumnRow>
</div>
</div>
<LayoutColumnRow size="sm">
<details className="rvo-expandable-area rvo-filter--cmor">
<summary className="rvo-expandable-area-toggle">
<Icon icon="delta-omlaag" />
<Icon icon="delta-omhoog" />
<Link content="Filter op type aanvraag" noUnderline={true}></Link>
</summary>
<div className="rvo-rhs-update-component">
<CheckboxGroup
options={[
{ id: 'optionJ', label: 'Lopende aanvragen' },
{ id: 'optionK', label: 'Afgehandelde aanvragen' },
{ id: 'optionL', label: 'Concepten' },
]}
></CheckboxGroup>
</div>
</details>
<details className="rvo-expandable-area rvo-filter--cmor">
<summary className="rvo-expandable-area-toggle">
<Icon icon="delta-omlaag" />
<Icon icon="delta-omhoog" />
<Link content="Filter op Status" noUnderline={true}></Link>
</summary>
<div className="rvo-rhs-update-component rvo-filter-grid rvo-filter-grid--status">
<CheckboxGroup
options={[
{ id: 'optionA', label: 'Geregistreerd' },
{ id: 'optionB', label: 'Financiële afhandeling' },
{ id: 'optionC', label: 'Afgerond' },
{ id: 'optionD', label: 'Actie nodig' },
{ id: 'optionE', label: 'Goedgekeurd' },
{ id: 'optionF', label: 'Geannuleerd' },
{ id: 'optionG', label: 'In behandeling' },
{ id: 'optionH', label: 'Afgewezen' },
{ id: 'optionI', label: 'Bezwaar' },
]}
></CheckboxGroup>
</div>
</details>
<details className="rvo-expandable-area rvo-filter--cmor">
<summary className="rvo-expandable-area-toggle">
<Icon icon="delta-omlaag" />
<Icon icon="delta-omhoog" />
<Link content="Filter op startdatum" noUnderline={true}></Link>
</summary>
<div className="rvo-rhs-update-component">
<CheckboxGroup
options={[
{ id: 'optionM', label: '2023' },
{ id: 'optionN', label: '2022' },
{ id: 'optionO', label: '2021' },
{ id: 'optionP', label: '2020 of ouder' },
]}
></CheckboxGroup>
</div>
</details>
</LayoutColumnRow>
</LayoutColumnRow>
</details>
<div className="rvo-rhs-update-component">
<div className="rvo-table--responsive rvo-table--cmor">
<table className="rvo-table">
<thead className="rvo-table-head">
<tr className="rvo-table-row">
<th scope="col" className="rvo-table-header">
Naam
</th>
<th
scope="col"
className="rvo-table-header rvo-table-header--sortable rvo-layout-row rvo-layout-gap--sm"
>
Status
<button
className="utrecht-button utrecht-button--rvo-tertiary-action utrecht-button--rvo-sm"
type="button"
>
<span
className="utrecht-icon rvo-icon rvo-icon-delta-omhoog rvo-icon--sm rvo-icon--hemelblauw"
role="img"
aria-label="Delta omhoog"
></span>
</button>
</th>
<th scope="col" className="rvo-table-header">
Referentienummer
</th>
<th scope="col" className="rvo-table-header">
Laatste wijziging
</th>
</tr>
</thead>
<tbody className="rvo-table-body">
<tr className="rvo-table-row">
<td className="rvo-table-cell rvo-table-cell--title">
<a href="#" className="rvo-link rvo-link--no-underline rvo-link--full-click">
WBSO 2022
</a>
</td>
<td className="rvo-table-cell">
<LayoutColumnRow row={true} size="xs">
<StatusIcon type="waarschuwing" size="md" />
<div className="rvo-card-status-text">
Stuur aanvullende informatie <strong>uiterlijk 19 aug 2023</strong>
</div>
</LayoutColumnRow>
</td>
<td className="rvo-table-cell ">
<span className="rvo-table-head-indicator">Referentienummer:</span> MITKV23-04546009
</td>
<td className="rvo-table-cell">
<span className="rvo-table-head-indicator">Laatste wijziging:</span> 10 aug 2023
</td>
</tr>
<tr className="rvo-table-row">
<td className="rvo-table-cell rvo-table-cell--title">
<a href="#" className="rvo-link rvo-link--no-underline rvo-link--full-click">
WBSO 2022
</a>
</td>
<td className="rvo-table-cell">
<LayoutColumnRow row={true} size="xs">
<StatusIcon type="waarschuwing" size="md" />
<div className="rvo-card-status-text">
Stuur aanvullende informatie <strong>uiterlijk 19 aug 2023</strong>
</div>
</LayoutColumnRow>
</td>
<td className="rvo-table-cell ">
<span className="rvo-table-head-indicator">Referentienummer:</span> MITKV23-04546009
</td>
<td className="rvo-table-cell">
<span className="rvo-table-head-indicator">Laatste wijziging:</span> 10 aug 2023
</td>
</tr>
<tr className="rvo-table-row">
<td className="rvo-table-cell rvo-table-cell--title">
<a href="#" className="rvo-link rvo-link--no-underline rvo-link--full-click">
WBSO 2022
</a>
</td>
<td className="rvo-table-cell">
<LayoutColumnRow row={true} size="xs">
<StatusIcon type="waarschuwing" size="md" />
<div className="rvo-card-status-text">
Stuur aanvullende informatie <strong>uiterlijk 19 aug 2023</strong>
</div>
</LayoutColumnRow>
</td>
<td className="rvo-table-cell ">
<span className="rvo-table-head-indicator">Referentienummer:</span> MITKV23-04546009
</td>
<td className="rvo-table-cell">
<span className="rvo-table-head-indicator">Laatste wijziging:</span> 10 aug 2023
</td>
</tr>
<tr className="rvo-table-row">
<td className="rvo-table-cell rvo-table-cell--title">
<a href="#" className="rvo-link rvo-link--no-underline rvo-link--full-click">
WBSO 2022
</a>
</td>
<td className="rvo-table-cell">
<LayoutColumnRow row={true} size="xs">
<StatusIcon type="waarschuwing" size="md" />
<div className="rvo-card-status-text">
Stuur aanvullende informatie <strong>uiterlijk 19 aug 2023</strong>
</div>
</LayoutColumnRow>
</td>
<td className="rvo-table-cell ">
<span className="rvo-table-head-indicator">Referentienummer:</span> MITKV23-04546009
</td>
<td className="rvo-table-cell">
<span className="rvo-table-head-indicator">Laatste wijziging:</span> 10 aug 2023
</td>
</tr>
</tbody>
</table>
</div>
</div>
</LayoutColumnRow>
</div>
</main>
<Footer
columns={[
{
label: 'RVO',
items: [
{ content: 'Over ons', link: '#' },
{ content: 'Contact', link: '#' },
{ content: 'Pers', link: '#' },
{ content: 'Zaken regelen bij RVO', link: '#' },
],
},
{
label: 'Over deze site',
items: [
{ content: 'Privacy', link: '#' },
{ content: 'Cookies en anti-spam', link: '#' },
{ content: 'Toegankelijkheid', link: '#' },
{ content: 'Proclaimer', link: '#' },
],
},
{
label: 'Snel naar',
items: [
{ content: 'Onderwerpen A t/m Z', link: '#' },
{ content: 'Klantenpanel', link: '#' },
{ content: 'Documenten en publicaties', link: '#' },
{ content: 'Overheidspublicaties en auteursrecht', link: '#' },
],
},
{
label: 'Blijf op de hoogte',
items: [
{ content: 'Social media', link: '#' },
{ content: 'RSS', link: '#' },
{ content: 'Gratis nieuwsbrief', link: '#' },
],
},
]}
/>
</div>
</body>
);
};

export default MijnDossier;
82 changes: 51 additions & 31 deletions documentation/demopages/cmor/Overzicht.tsx
View file
Original file line number Diff line number Diff line change
@@ -42,8 +42,17 @@ const Overzicht = () => {
<div className="rvo-sidebar-menu">
<MenuBar
items={[
{ label: 'Overzicht', link: '#', icon: 'home', active: true },
{ label: 'Mijn dossier', link: '#', icon: 'map' },
{
label: 'Overzicht',
link: 'iframe.html?args=&id=demo-pagina-s-cmor-overzicht--default&viewMode=story',
icon: 'home',
active: true,
},
{
label: 'Mijn dossier',
link: 'iframe.html?args=&id=demo-pagina-s-cmor-mijn-dossier--default&viewMode=story',
icon: 'map',
},
{ label: 'Mijn berichten', link: '#', icon: 'mail' },
{ label: 'Profiel & voorkeuren', link: '#', icon: 'user' },
]}
@@ -72,39 +81,50 @@ const Overzicht = () => {
</div>
</details>
</div>
<MenuBar
items={[
{
align: 'right',
label: 'Hulp & Contact',
link: '#',
},
{
align: 'right',
label: 'English',
icon: 'wereldbol',
link: '#',
},
{
align: 'right',
label: 'Boer Overveen B.V',
link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-profiel--default&viewMode=story',
active: true,
icon: 'user',
},
]}
size="lg"
useIcons={true}
iconPlacement="before"
menuMaxWidth="lg"
/>
<div className="rvo-topnav--w-line">
<MenuBar
items={[
{
align: 'right',
label: 'Hulp & Contact',
link: '#',
},
{
align: 'right',
label: 'English',
icon: 'wereldbol',
link: '#',
},
{
align: 'right',
label: 'Boer Overveen B.V',
link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-profiel--default&viewMode=story',
active: true,
icon: 'user',
},
]}
size="lg"
useIcons={true}
iconPlacement="before"
menuMaxWidth="lg"
/>
</div>
</div>
<main className="rvo-main--cmor rvo-main--sidebar-active rvo-max-width-layout rvo-max-width-layout--lg rvo-main--w-line">
<div className="rvo-sidebar-menu">
<MenuBar
items={[
{ label: 'Overzicht', link: '#', icon: 'home', active: true },
{ label: 'Mijn dossier', link: '#', icon: 'map' },
{
label: 'Overzicht',
link: 'iframe.html?args=&id=demo-pagina-s-cmor-overzicht--default&viewMode=story',
icon: 'home',
active: true,
},
{
label: 'Mijn dossier',
link: 'iframe.html?args=&id=demo-pagina-s-cmor-mijn-dossier--default&viewMode=story',
icon: 'map',
},
{ label: 'Mijn berichten', link: '#', icon: 'mail' },
{ label: 'Profiel & voorkeuren', link: '#', icon: 'user' },
]}
@@ -114,7 +134,7 @@ const Overzicht = () => {
menuMaxWidth="md"
/>
</div>
<div className="rvo-main--cmor rvo-main--overzicht">
<div className="rvo-content--cmor rvo-content--overzicht">
<LayoutColumnRow size="xl">
<h1 className="utrecht-heading-1">
<strong>Overzicht</strong> van Boer Overveen B.V.
54 changes: 53 additions & 1 deletion documentation/demopages/common/cmor.scss
View file
Original file line number Diff line number Diff line change
@@ -42,7 +42,7 @@
}
}

.rvo-main--cmor.rvo-main--overzicht {
.rvo-content--cmor {
background-color: var(--rvo-color-wit);
padding-block-end: var(--rvo-space-xl);
padding-block-start: var(--rvo-space-xl);
@@ -81,4 +81,56 @@
margin-block-start: 0;
}
}

// FILTERS
.rvo-filter--cmor[open] {
.rvo-expandable-area-toggle {
margin-block-end: var(--rvo-space-sm);
}

padding-block-end: var(--rvo-space-sm);
}

// TABLE

.rvo-table--cmor {
.rvo-table-head {
display: none;
}

.rvo-table-body .rvo-table-row {
display: grid;
gap: var(--rvo-space-2xs);
position: relative;
}

.rvo-table-header {
background-color: var(--rvo-color-wit);
color: #64748b;
font-size: var(--rvo-font-size-sm);
}

.rvo-table-cell {
padding-block-end: 0;
padding-block-start: 0;
}

.rvo-table-cell:not(:last-child) {
border-bottom: none;
}

.rvo-table-cell:last-child {
margin-block-end: var(--rvo-space-md);
padding-block-end: var(--rvo-space-md);
}

.rvo-table-cell--title {
font-weight: var(--rvo-font-weight-bold);
}

.rvo-table-head-indicator {
color: #64748b;
font-size: var(--rvo-font-size-sm);
}
}
}
96 changes: 90 additions & 6 deletions documentation/demopages/common/rhs-update.scss
View file
Original file line number Diff line number Diff line change
@@ -138,6 +138,10 @@
z-index: 2;
}

.rvo-topnav--w-line .rvo-topnav__background {
border-bottom: 1px solid #e2e8f0;
}

.rvo-topnav__background {
background-color: var(--rvo-color-wit);
font-weight: 700;
@@ -241,12 +245,6 @@
}
}

// MAIN //

.rvo-main--w-line {
border-top: 1px solid #e2e8f0;
}

// TABS //

.rvo-tabs {
@@ -365,6 +363,12 @@
}
}

.rvo-inline-form {
.rvo-layout-row {
align-items: flex-end;
}
}

// CARDS //

.rvo-card {
@@ -488,6 +492,11 @@
font-size: 1.125rem;
}

.rvo-paragraph--no-spacing {
margin-block-end: 0;
margin-block-start: 0;
}

.rvo-paragraph--subtle {
color: #64748b;
}
@@ -679,6 +688,76 @@
}
}

// TAG

.rvo-tag--outline {
border: 1px solid var(--rvo-color-zwart);
color: var(--rvo-color-zwart);

&:hover,
&:focus {
background-color: #f1f5f9;
text-decoration: underline;
}

&.rvo-tag--active {
background-color: var(--rvo-color-hemelblauw-tint1);
border-color: var(--rvo-color-hemelblauw);
}
}

// RVO EXPANDABLE AREA
.rvo-expandable-area > .rvo-expandable-area-toggle {
list-style: none;
}

.rvo-expandable-area > .rvo-expandable-area-toggle::marker,
.rvo-expandable-area > .rvo-expandable-area-toggle::-webkit-details-marker {
display: none;
}

.rvo-expandable-area-toggle {
cursor: pointer;
display: inline-flex;
gap: var(--rvo-space-2xs);

.rvo-icon {
margin-block-start: 3px;
}
}

.rvo-expandable-area {
> .rvo-expandable-area-toggle .rvo-icon-delta-omhoog {
display: none;
}
}

.rvo-expandable-area[open] {
> .rvo-expandable-area-toggle .rvo-icon-delta-omlaag {
display: none;
}
> .rvo-expandable-area-toggle .rvo-icon-delta-omhoog {
display: block;
}
}

// Filter Grid

.rvo-filter-grid .rvo-checkbox__group {
display: inline-grid;
}

.rvo-filter-grid--status .rvo-checkbox__group {
@media (min-width: 480px) {
grid-column-gap: var(--rvo-space-xl);
grid-template-columns: auto auto;
}

@media (min-width: 480px) {
grid-template-columns: auto auto auto;
}
}

// GENERAL FIXES

.utrecht-button-group {
@@ -689,6 +768,11 @@
align-items: center;
}

a.rvo-tag {
// Dont underline tag if it's a link
text-decoration: none;
}

.rvo-expandable-text__summary {
align-items: flex-start;
}
2 changes: 1 addition & 1 deletion documentation/demopages/mijnrvo/Diensten.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
import Diensten from './Diensten';

const meta: Meta<typeof Diensten> = {
title: "Demo pagina's/Mijn RVO/Diensten",
title: "Demo pagina's/Mijn RVO/Diensten[HIDDEN]",
component: Diensten,
parameters: {
status: {

0 comments on commit abc92fd

Please sign in to comment.