Skip to content

Commit

Permalink
Demopages/mijnpercelen/versturen (#525)
Browse files Browse the repository at this point in the history 
* Add samenvatting and versturen pages

* Add einddatum switch
  • Loading branch information
@rroose-rvo
rroose-rvo authored Nov 2, 2023
1 parent 046a080 commit 43e7587
Show file tree
Hide file tree
Showing 7 changed files with 524 additions and 4 deletions.
45 changes: 45 additions & 0 deletions documentation/demopages/common/mijn-percelen.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@
grid-template-columns: 600px 1fr;
}

.rvo-main--mijn-percelen-samenvatting {
grid-template-columns: 750px 1fr;
}

.rvo-main--mijn-percelen-sidebar-active {
grid-template-columns: 288px 1fr;
height: 85vh;
Expand Down Expand Up @@ -283,6 +287,10 @@
padding-inline-start: 0;
}
}

.rvo-table-cell:not(first-child) {
width: 40px;
}
}

.rvo-table-row--alert {
Expand All @@ -299,4 +307,41 @@
z-index: 2;
}
}

.rvo-value-line-through {
text-decoration: line-through;
}

.rvo-fake-checkbox summary::-webkit-details-marker,
.rvo-fake-checkbox summary::marker {
display: none;
}

.rvo-fake-checkbox summary {
display: flex;
gap: var(--rvo-space-xs);
position: relative;
}

.rvo-fake-checkbox summary::before {
background-color: var(--rvo-color-wit);
border: 1px solid var(--rvo-color-logoblauw);
border-radius: 3px;
content: "";
display: block;
height: 24px;
width: 24px;
}

.rvo-fake-checkbox[open] summary::after {
background-color: var(--rvo-color-logoblauw);
border-radius: 3px;
content: "";
display: block;
height: 20px;
left: 2px;
position: absolute;
top: 3px;
width: 21px;
}
}
7 changes: 6 additions & 1 deletion documentation/demopages/mijnpercelen/PerceelEdit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ const PerceelEdit = () => {
expandableHelperText={true}
expandableHelperTextTitle="Meer uitleg"
helperText="Geef uw perceel een herkenbare en logische naam. Dat maakt uw lijst met percelen overzichtelijk wanneer u landschapselementen heeft geregistreerd. U ziet dan makkelijk bij welk perceel een landschapselement hoort."
value="Sloot bij de buren"
></TextInputField>
<SelectField
label="Gewas"
Expand Down Expand Up @@ -262,7 +263,11 @@ const PerceelEdit = () => {
</LayoutColumnRow>
</div>
<DateInputField label="Ingangsdatum"></DateInputField>
<DateInputField label="Einddatum"></DateInputField>
<details className="rvo-fake-checkbox">
<summary>Ik stop met het gebruik van dit perceel</summary>
<DateInputField label="Einddatum"></DateInputField>
</details>

<CheckboxField
label=""
options={[
Expand Down
17 changes: 17 additions & 0 deletions documentation/demopages/mijnpercelen/Samenvatting.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 Samenvatting from './Samenvatting';

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

type Story = StoryObj<typeof Samenvatting>;

export const Default: Story = { name: 'Samenvatting' };
195 changes: 195 additions & 0 deletions documentation/demopages/mijnpercelen/Samenvatting.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
import { MenuBar } from '@nl-rvo/components';
import '../common/rhs-update.scss';
import '../common/mijn-percelen.scss';

const Samenvatting = () => {
return (
<body className="rvo-theme rvo-mijn-percelen">
<div className="rvo-mijn-percelen 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=""></img>
</div>
<div className="rvo-logo-text">
Rijksdienst voor Ondernemend
<br />
Nederland
</div>
</a>
</div>
</header>
<div className="rvo-rhs-update-component">
<MenuBar
items={[
{
label: 'Mijn Percelen',
active: true,
link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-startpagina--default&viewMode=story',
icon: 'home',
},
{
label: 'Boer Overveen B.V',
link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-profiel--default&viewMode=story',
icon: 'user',
},
{ label: 'Uitloggen', link: '#', align: 'right' },
]}
size="lg"
useIcons={true}
iconPlacement="before"
menuMaxWidth="md"
/>
</div>
<main className="rvo-main--mijn-percelen rvo-main--mijn-percelen-samenvatting">
<div className="rvo-main-mijn-percelen--data">
<ul role="tablist" className="rvo-tabs">
<li role="presentation" className="rvo-tabs-item">
<a
role="tab"
href="iframe.html?args=&id=demo-pagina-s-mijn-percelen-percelen--default&viewMode=story"
id="tab1"
aria-selected="true"
className="rvo-tabs-item-link"
>
Wijzigen
</a>
</li>
<li role="presentation" className="rvo-tabs-item">
<a
role="tab"
href="iframe.html?args=&id=demo-pagina-s-mijn-percelen-oplossen--default&viewMode=story"
id="tab2"
className="rvo-tabs-item-link"
>
Oplossen
</a>
</li>
<li role="presentation" className="rvo-tabs-item">
<a
role="tab"
href="iframe.html?args=&id=demo-pagina-s-mijn-percelen-samenvatting--default&viewMode=story"
id="tab2"
className="rvo-tabs-item-link rvo-tabs-item-link--active"
>
Samenvatting
</a>
</li>
<li role="presentation" className="rvo-tabs-item">
<a
role="tab"
href="iframe.html?args=&id=demo-pagina-s-mijn-percelen-versturen--default&viewMode=story"
id="tab3"
className="rvo-tabs-item-link"
>
Versturen
</a>
</li>
</ul>
<div className="rvo-tab-content rvo-tab-content--wijzigen">
<div className="rvo-rhs-update-component">
<div className="rvo-table--responsive">
<table className="rvo-table">
<thead className="rvo-table-head">
<tr className="rvo-table-row">
<th scope="col" className="rvo-table-header rvo-table-header--sortable"></th>
<th scope="col" className="rvo-table-header rvo-table-cell--numeric">
Huidig
</th>
<th scope="col" className="rvo-table-header rvo-table-cell--numeric">
Na wijziging
</th>
<th scope="col" className="rvo-table-header rvo-table-header--numeric">
Huidig
</th>
<th scope="col" className="rvo-table-header rvo-table-cell--numeric">
Na wijziging
</th>
</tr>
</thead>
<tbody className="rvo-table-body">
<tr className="rvo-table-row">
<td className="rvo-table-cell">Totaal grond in gebruik of beheer</td>
<td className="rvo-table-cell rvo-table-cell--numeric">177,7315</td>
<td className="rvo-table-cell rvo-table-cell--numeric">0,0</td>
<td className="rvo-table-cell rvo-table-cell--numeric">8,889</td>
<td className="rvo-table-cell rvo-table-cell--numeric">0,0</td>
</tr>
<tr className="rvo-table-row">
<td className="rvo-table-cell" colSpan={5}>
<br />
<strong>Gebruikstitel</strong>
</td>
</tr>
<tr className="rvo-table-row">
<td className="rvo-table-cell">Eigendom</td>
<td className="rvo-table-cell rvo-table-cell--numeric">173,75</td>
<td className="rvo-table-cell rvo-table-cell--numeric">1,0</td>
<td className="rvo-table-cell rvo-table-cell--numeric">4,839</td>
<td className="rvo-table-cell rvo-table-cell--numeric">0,2</td>
</tr>
<tr className="rvo-table-row">
<td className="rvo-table-cell">Overige exploitatievormen</td>
<td className="rvo-table-cell rvo-table-cell--numeric">1,75</td>
<td className="rvo-table-cell rvo-table-cell--numeric">22,0</td>
<td className="rvo-table-cell rvo-table-cell--numeric">42,33</td>
<td className="rvo-table-cell rvo-table-cell--numeric">0,2114</td>
</tr>
<tr className="rvo-table-row">
<td className="rvo-table-cell" colSpan={5}>
<br />
<strong>Gewas (zonder landschapselementen)</strong>
</td>
</tr>
<tr className="rvo-table-row">
<td className="rvo-table-cell">Aardappelen, bestrijdingsmaatregel AM (2025)</td>
<td className="rvo-table-cell rvo-table-cell--numeric">0,0</td>
<td className="rvo-table-cell rvo-table-cell--numeric">1,0</td>
<td className="rvo-table-cell rvo-table-cell--numeric">2,10</td>
<td className="rvo-table-cell rvo-table-cell--numeric">0,2</td>
</tr>
<tr className="rvo-table-row">
<td className="rvo-table-cell">Aardappelen, poot TBM (2016)</td>
<td className="rvo-table-cell rvo-table-cell--numeric">2,75</td>
<td className="rvo-table-cell rvo-table-cell--numeric">21,0</td>
<td className="rvo-table-cell rvo-table-cell--numeric">12,33</td>
<td className="rvo-table-cell rvo-table-cell--numeric">0,25</td>
</tr>
<tr className="rvo-table-row">
<td className="rvo-table-cell">Aardappelen, zetmeel (2017)</td>
<td className="rvo-table-cell rvo-table-cell--numeric">23</td>
<td className="rvo-table-cell rvo-table-cell--numeric">68,01</td>
<td className="rvo-table-cell rvo-table-cell--numeric">10,12</td>
<td className="rvo-table-cell rvo-table-cell--numeric">1,44</td>
</tr>
<tr className="rvo-table-row">
<td className="rvo-table-cell">Aardbeien op stellingen, productie (2706)</td>
<td className="rvo-table-cell rvo-table-cell--numeric">0,75</td>
<td className="rvo-table-cell rvo-table-cell--numeric">21,0</td>
<td className="rvo-table-cell rvo-table-cell--numeric">66,33</td>
<td className="rvo-table-cell rvo-table-cell--numeric">0,24</td>
</tr>
<tr className="rvo-table-row">
<td className="rvo-table-cell">Aardperen (1949)</td>
<td className="rvo-table-cell rvo-table-cell--numeric">2,75</td>
<td className="rvo-table-cell rvo-table-cell--numeric">0,0</td>
<td className="rvo-table-cell rvo-table-cell--numeric">41,33</td>
<td className="rvo-table-cell rvo-table-cell--numeric">0,1</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div className="rvo-main-mijn-percelen--map">
<img src="images/map.svg" alt="" className="rvo-perceel-kaart" />
</div>
</main>
</div>
</body>
);
};

export default Samenvatting;
8 changes: 5 additions & 3 deletions documentation/demopages/mijnpercelen/Startpagina.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,9 +177,11 @@ const Startpagina = () => {
<div className="rvo-info-block rvo-info-block--mijn-percelen-start">
<Heading type="h4" textContent="Meekijken"></Heading>
<p className="rvo-paragraph-spaced">Wil onze medewerker meekijken?</p>
<Button kind="secondary" size="sm">
Start meekijken
</Button>
<div className="rvo-rhs-update-component">
<Button kind="secondary" size="sm">
Start meekijken
</Button>
</div>
</div>
</LayoutColumnRow>
</div>
Expand Down
17 changes: 17 additions & 0 deletions documentation/demopages/mijnpercelen/Versturen.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 Versturen from './Versturen';

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

type Story = StoryObj<typeof Versturen>;

export const Default: Story = { name: 'Versturen' };
Loading

0 comments on commit 43e7587

Please sign in to comment.