example of how we can continue (note its not styled correctly)

statisticsnorway · Feb 8, 2024 · ea7940c · ea7940c
1 parent 09dfb1b
commit ea7940c
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 30 deletions.
diff --git a/src/components/PageLayout/PageLayout.tsx b/src/components/PageLayout/PageLayout.tsx
@@ -3,7 +3,7 @@ import Header from '../Header/Header'
 import SidebarModal from '../SidebarModal/SidebarModal'
 import styles from './pagelayout.module.scss'
 
-import { Title, LeadParagraph } from '@statisticsnorway/ssb-component-library'
+import { Title, LeadParagraph, Input, Dialog, Dropdown } from '@statisticsnorway/ssb-component-library'
 
 interface PageLayoutProps {
   title: string
@@ -19,7 +19,37 @@ export default function PageLayout({ title, description, button, content }: Page
       <main className={styles.container}>
         <Breadcrumb />
         {/* TODO: Remove after testing; or implement a temporary button that toggles this in one of the pages */}
-        <SidebarModal />
+        <SidebarModal
+        header={{modalType: "Medlem", modalTitle: "Arbmark register", modalDescription: "arbmark-register"}}
+        footer={{submitButtonText: "Legg til medlem"}}
+        body={
+          <div>
+            <h2>Legg person til teamet</h2>
+            <p>Navn</p>
+            <Input placeholder="Skriv navn..." />
+
+            <p>Rolle(r)</p>
+            <Dropdown 
+              placeholder="Velg rolle" 
+              searchable
+              selectedItem={{title: "Ingen tilgang", id: "ingen-tilgang"}}
+              items={
+              [
+                {title: "Managers", id: "managers"},
+                {title: "Developers", id: "developers"},
+                {title: "Data-admins", id: "data-admins"},
+                {title: "Ingen tilgang", id: "ingen-tilgang"},
+
+              ]
+            }/>
+
+            <div className={styles.modalInfoDialog}></div>
+            <Dialog type='info' title="Tidskrevende jobb!">
+              Det kan ta litt tid før du ser endringen.
+            </Dialog>
+          </div>
+        }
+        />
         <div className={styles.title}>
           <Title size={1}>{title}</Title>
           {button}

diff --git a/src/components/PageLayout/pagelayout.module.scss b/src/components/PageLayout/pagelayout.module.scss
@@ -22,4 +22,8 @@
 
 .tableTitle {
   margin: 2.5rem 0;
+}
+
+.modalInfoDialog {
+  padding-top: 5rem;//TODO: add some later
 }
diff --git a/src/components/SidebarModal/SidebarModal.tsx b/src/components/SidebarModal/SidebarModal.tsx
@@ -1,16 +1,46 @@
 import styles from './sidebar.module.scss'
 
 import { useState } from 'react'
-import { Link } from '@statisticsnorway/ssb-component-library'
+import { Title, Link, Button } from '@statisticsnorway/ssb-component-library'
 import { X } from 'react-feather'
 
+interface SidebarHeader {
+  modalType: string
+  modalTitle: string
+  modalDescription: string
+}
+
+const SidebarModalHeader = ({modalType, modalTitle, modalDescription}: SidebarHeader): JSX.Element => {
+  return (
+    <div className={styles.modalHeader}>
+      <div className={styles.modalType}><span>{modalType}</span></div>
+      <div className={styles.modalTitle}><h1>{modalTitle}</h1></div>
+      <div className={styles.modalDescription}><p>{modalDescription}</p></div>
+    </div>
+  )
+}
+
+interface SidebarFooter {
+  submitButtonText: string
+  handleClose?: () => void
+}
+
+const SidebarModalFooter = ({submitButtonText, handleClose}: SidebarFooter): JSX.Element => {
+  return (
+    <div className={styles.modalFooter}>
+      <Link onClick={handleClose}>Avbryt</Link>
+      <div className={styles.modalFooterButtonText}><Button primary>{submitButtonText}</Button></div>
+    </div>
+  )
+}
+
 interface SidebarModal {
-  header?: JSX.Element
+  header: SidebarHeader
   body?: JSX.Element
-  button?: JSX.Element
+  footer: SidebarFooter
 }
 
-const SidebarModal = ({ header, body, button }: SidebarModal) => {
+const SidebarModal = ({ header, footer, body }: SidebarModal) => {
   const [isOpen, setOpen] = useState<boolean>(true)
 
   const handleClose = () => {
@@ -21,20 +51,17 @@ const SidebarModal = ({ header, body, button }: SidebarModal) => {
     return (
       <div className={styles.container}>
         <div className={styles.header}>
-          {/* TODO: Should this be wrapped around button? If yes, remove default styling on button */}
           <button onClick={handleClose}>
             <X className={styles.xIcon} size={32} />
           </button>
-          {header}
+          {/* TODO: Should this be wrapped around button? If yes, remove default styling on button */}
+          <SidebarModalHeader {...header} />
         </div>
         <div className={styles.body}>
           {/* Form goes here */}
           {body}
         </div>
-        <div className={styles.footer}>
-          <Link onClick={handleClose}>Avbryt</Link>
-          {button}
-        </div>
+        <SidebarModalFooter {...footer} handleClose={footer.handleClose ? footer.handleClose : handleClose} />
       </div>
     )
   }

diff --git a/src/components/SidebarModal/sidebar.module.scss b/src/components/SidebarModal/sidebar.module.scss
@@ -1,40 +1,81 @@
 @use '@statisticsnorway/ssb-component-library/src/style/variables' as variables;
 
 .container {
-    width: 20vw;
-    height: 100%;
+    width: 25vw;
+    height: 100vh;
     background-color: variables.$ssb-white;
     border-left: 1px solid variables.$ssb-dark-2;
-    position: absolute;
+    position: fixed;
     top: 0;
     right: 0;
     z-index: 1;
+    display: flex;
+    flex-direction: column;
 
     .hide {
         display: none;
     }
 
-    .header {
+    button {
+        background: none;
+        color: inherit;
+        border: none;
+        padding: 0;
+        font: inherit;
+        cursor: pointer;
+        outline: inherit;
+        float: right;
+    }
+
+    .xIcon {
+        color: variables.$ssb-green-4;
+    }
+
+    .body {
+        background-color: rgb(236,254,236);
+        border-bottom: 1px solid #d4d4d4;
+        overflow: auto;
+        > * {
+            padding: 1rem;
+        }
+    }
+
+    .modalHeader {
+        height: 10%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding-top: 5rem;
+        margin-left: 1rem;
+        margin-bottom: 3rem;
+
         button {
-            background: none;
-            color: inherit;
-            border: none;
+            margin: 0;
             padding: 0;
-            font: inherit;
-            cursor: pointer;
-            outline: inherit;
+            float: right;
         }
 
-        .xIcon {
-            color: variables.$ssb-green-4;
+        > * > * {
+            padding: 0;
+            margin: 0;
         }
-    }
 
-    .body {}
-    .footer{}
-
-    // TODO: Add styling for mobile
-    @media #{variables.$mobile} {
+        .modalType {}
+        .modalTitle {}
+        .modalDescription {}
+    }
 
+    .modalFooter {
+        height: 10%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-left: 2.5rem;
+        margin-right: 2.5rem;
+        margin-top: 2rem;
     }
+
+    // TODO: Add styling for mobile
+    @media #{variables.$mobile} {}
 }