Add extra features (#526)

nl-design-system · Nov 6, 2023 · d4665b7 · d4665b7
1 parent 7728249
commit d4665b7
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 15 deletions.
diff --git a/documentation/demopages/common/mijn-percelen.scss b/documentation/demopages/common/mijn-percelen.scss
@@ -166,6 +166,11 @@
       margin-inline-end: -16px;
       margin-inline-start: -16px;
 
+      .utrecht-icon {
+        height: 16px;
+        width: 16px;
+      }
+
       // .utrecht-button {
       //   color: var(--rvo-color-donkerblauw);
       // }
@@ -344,4 +349,20 @@
     top: 3px;
     width: 21px;
   }
+
+  .rvo-instellingen {
+    text-align: end;
+
+    .utrecht-button {
+      padding-block-end: 0;
+      padding-block-start: 0;
+      padding-inline-end: 0;
+      padding-inline-start: 0;
+    }
+
+    .utrecht-icon {
+      height: 16px;
+      width: 16px;
+    }
+  }
 }
diff --git a/documentation/demopages/mijnpercelen/Oplossen.tsx b/documentation/demopages/mijnpercelen/Oplossen.tsx
@@ -23,10 +23,16 @@ const Oplossen = () => {
         <div className="rvo-rhs-update-component">
           <MenuBar
             items={[
+              {
+                label: 'Home',
+
+                icon: 'home',
+                link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-startpagina--default&viewMode=story',
+              },
               {
                 label: 'Mijn Percelen',
                 active: true,
-                link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-startpagina--default&viewMode=story',
+                link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-percelen--default&viewMode=story',
               },
               {
                 label: 'Boer Overveen B.V',
@@ -252,6 +258,10 @@ const Oplossen = () => {
                       </LayoutColumnRow>
                     </fieldset>
                   </div>
+                  <div className="utrecht-button-group">
+                    <Button kind="primary">Versturen</Button>
+                    <Button kind="secondary">Percelen wijzigen</Button>
+                  </div>
                 </LayoutColumnRow>
               </div>
             </div>

diff --git a/documentation/demopages/mijnpercelen/PerceelEdit.tsx b/documentation/demopages/mijnpercelen/PerceelEdit.tsx
@@ -35,10 +35,16 @@ const PerceelEdit = () => {
         <div className="rvo-rhs-update-component">
           <MenuBar
             items={[
+              {
+                label: 'Home',
+
+                icon: 'home',
+                link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-startpagina--default&viewMode=story',
+              },
               {
                 label: 'Mijn Percelen',
                 active: true,
-                link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-startpagina--default&viewMode=story',
+                link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-percelen--default&viewMode=story',
               },
               {
                 label: 'Boer Overveen B.V',

diff --git a/documentation/demopages/mijnpercelen/Percelen.tsx b/documentation/demopages/mijnpercelen/Percelen.tsx
@@ -33,11 +33,16 @@ const Percelen = () => {
         <div className="rvo-rhs-update-component">
           <MenuBar
             items={[
+              {
+                label: 'Home',
+
+                icon: 'home',
+                link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-startpagina--default&viewMode=story',
+              },
               {
                 label: 'Mijn Percelen',
                 active: true,
-                link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-startpagina--default&viewMode=story',
-                icon: 'home',
+                link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-percelen--default&viewMode=story',
               },
               {
                 label: 'Boer Overveen B.V',
@@ -101,6 +106,20 @@ const Percelen = () => {
               <div className="rvo-rhs-update-component">
                 <LayoutColumnRow size="md">
                   <Alert kind="warning" content="U moet de wijzigingen nog versturen. <a href='#'>Nu versturen</a>" />
+                  <div className="rvo-instellingen">
+                    <a
+                      className="utrecht-button utrecht-button--rvo-tertiary-action utrecht-button--rvo-xs"
+                      type="button"
+                      href="iframe.html?args=&id=demo-pagina-s-mijn-percelen-profiel--default&viewMode=story"
+                    >
+                      <span
+                        className="utrecht-icon rvo-icon rvo-icon-tandwielen rvo-icon--xs rvo-icon--hemelblauw"
+                        role="img"
+                        aria-label="Tandwielen"
+                      ></span>
+                      Instellingen
+                    </a>
+                  </div>
                   <div className="utrecht-form-fieldset rvo-form-fieldset rvo-percelen-filter-form">
                     <fieldset className="utrecht-form-fieldset__fieldset utrecht-form-fieldset--html-fieldset">
                       <details className="rvo-percelen-filter">
@@ -133,6 +152,7 @@ const Percelen = () => {
                       </details>
                     </fieldset>
                   </div>
+
                   <div className="rvo-cards rvo-cards--percelen">
                     <div className="rvo-card rvo-card--perceel">
                       <div className="rvo-card-perceel-title">
@@ -171,6 +191,9 @@ const Percelen = () => {
                       </div>
 
                       <div className="rvo-card-perceel-actions">
+                        <Button kind="warning-subtle" size="xs" showIcon="before" icon="refresh">
+                          Ongedaan maken
+                        </Button>
                         <Button kind="tertiary" size="xs" showIcon="no">
                           Bewerken
                         </Button>

diff --git a/documentation/demopages/mijnpercelen/Profiel.tsx b/documentation/demopages/mijnpercelen/Profiel.tsx
@@ -24,16 +24,21 @@ const Profiel = () => {
           <MenuBar
             items={[
               {
-                label: 'Mijn Percelen',
+                label: 'Home',
 
-                link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-startpagina--default&viewMode=story',
                 icon: 'home',
+                link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-startpagina--default&viewMode=story',
+              },
+              {
+                label: 'Mijn Percelen',
+
+                link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-percelen--default&viewMode=story',
               },
               {
                 label: 'Boer Overveen B.V',
                 link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-profiel--default&viewMode=story',
-                icon: 'user',
                 active: true,
+                icon: 'user',
               },
               { label: 'Uitloggen', link: '#', align: 'right' },
             ]}
@@ -46,15 +51,15 @@ const Profiel = () => {
         <main className="rvo-main--mijn-percelen rvo-main--mijn-percelen-sidebar-active rvo-max-width-layout rvo-max-width-layout--md">
           <div className="rvo-main-mijn-percelen--sidebar-menu">
             <MenuBar
-              items={[{ label: 'Voorkeuren', link: '#', icon: 'user', active: true }]}
+              items={[{ label: 'Instellingen', link: '#', icon: 'user', active: true }]}
               size="md"
               useIcons={true}
               iconPlacement="before"
               menuMaxWidth="md"
             />
           </div>
           <div className="rvo-main-mijn-percelen--profiel">
-            <Heading type="h1" textContent="Voorkeuren" />
+            <Heading type="h1" textContent="Instellingen" />
             <LayoutColumnRow size="md">
               <ul role="tablist" className="rvo-tabs">
                 <li role="presentation" className="rvo-tabs-item">

diff --git a/documentation/demopages/mijnpercelen/Samenvatting.tsx b/documentation/demopages/mijnpercelen/Samenvatting.tsx
@@ -23,11 +23,16 @@ const Samenvatting = () => {
         <div className="rvo-rhs-update-component">
           <MenuBar
             items={[
+              {
+                label: 'Home',
+
+                icon: 'home',
+                link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-startpagina--default&viewMode=story',
+              },
               {
                 label: 'Mijn Percelen',
                 active: true,
-                link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-startpagina--default&viewMode=story',
-                icon: 'home',
+                link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-percelen--default&viewMode=story',
               },
               {
                 label: 'Boer Overveen B.V',

diff --git a/documentation/demopages/mijnpercelen/Startpagina.tsx b/documentation/demopages/mijnpercelen/Startpagina.tsx
@@ -24,10 +24,15 @@ const Startpagina = () => {
           <MenuBar
             items={[
               {
-                label: 'Mijn Percelen',
+                label: 'Home',
                 active: true,
+                icon: 'home',
                 link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-startpagina--default&viewMode=story',
               },
+              {
+                label: 'Mijn Percelen',
+                link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-percelen--default&viewMode=story',
+              },
               {
                 label: 'Boer Overveen B.V',
                 link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-profiel--default&viewMode=story',

diff --git a/documentation/demopages/mijnpercelen/Versturen.tsx b/documentation/demopages/mijnpercelen/Versturen.tsx
@@ -24,16 +24,20 @@ const Versturen = () => {
           <MenuBar
             items={[
               {
-                label: 'Mijn Percelen',
+                label: 'Home',
 
-                link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-startpagina--default&viewMode=story',
                 icon: 'home',
+                link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-startpagina--default&viewMode=story',
+              },
+              {
+                label: 'Mijn Percelen',
+                active: true,
+                link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-percelen--default&viewMode=story',
               },
               {
                 label: 'Boer Overveen B.V',
                 link: 'iframe.html?args=&id=demo-pagina-s-mijn-percelen-profiel--default&viewMode=story',
                 icon: 'user',
-                active: true,
               },
               { label: 'Uitloggen', link: '#', align: 'right' },
             ]}