feat(service-portal): new design (#5784)

* feat: add sidebar menu state

* feat: sidebar fixed to left and
hover/active state for nav items

* refactor: heading and font sizes

* refactor: make button smaller on greeting link

* refactor: white background on mobile menu

* feat: add xs size to datePicker, Input and Select CORE

* feat: add sidebar as a variant option

* refactor: rearrange finance data

* refactor: add keywords to messages

* refactor: remove image from screens

* refactor: move school tag

* refactor: family screens

* refactor: use xs input in settings

* refactor: make headings smaller in settings

* refactor: put search input in grid

* refactor: move title for student assessment tables

* refactor: sidebar positioned absolute instead of fixed

* fix: undo removing image from access control

* feat: add fullScreen prop to UserDropdown

* fix: add logo back when on mobile

* refactor: toggle animation

* refactor: add transition to layout grid

* refactor: speed up layoutgrid transition time

* feat: new userMenu design

* refactor: add close on userMenu click

* fix: rollback changes on shared userMenu
add service portal userMenu instead

* feat: design changes to mobilemenu

* feat: add new general error screen

* refactor: more space for main content

* refactor: cleanup

* feat: add lock icon to disabled nav items

* feat: add graphql function to get unreadDocumentsCount WIP

* feat: badge for unread mail + lock screen

* refactor: make unread mail bold + smaller font

* fix: lint warnings

* refactor: cleanup

* fix: hide text on smaller screens on finance row

* refactor: more cleanup

* fix: build error on styleVariants

* fix: default value for unread documents

* fix: default value for unread documents counter

* fix: remove sidebar variant from text ui core lib

* refactor: image on greeting screen

* fix: bug after removing sidebar variant from text

* fix: add back button "back to my pages"

* fix: sidebar stopping on scroll

* fix: userMenu should not be part of grid

* fix: small logo disappearing when sidebar collapses

* feat: headingVariant prop added to island-ui core ActionCard

* refactor: assets overview

* fix: add bottom spacing to main content

* fix: remove header from assetsDetail

* refactor: smaller font for assetDisclaimer

* refactor: refactoring unused stuff

* refactor: cleanup grid in Layout

* fix: revert fixing lint warnings

* fix: remove activeIcon from masterNavigation

* fix: userMenu active state WIP

* fix: larger font on tables

* fix: smaller heading + intro text on petitions

* fix: hide family relation tags until fixed

* fix: broken test on UserMenu

* refactor: finance status screen

* refactor: move data fetch for userDelegations to parent

* fix: font weight on user info content

* refactor: make headings h3 and add xs size variant for input

* fix: build errors

* fix: undefined error on e2e test

* fix: temp removal of e2e test

* fix: removal of kennitala function

* fix: spacing on sidebar + removal of unused text

* refactor: sidebar nav items

* fix: uncomment e2e test bug

* fix: removal of company icon in user dropdown

* feat: add change lang button next to user menu

* fix: add max-content to arrow Link to prevent breaking

* fix: switch profile and actor names on user dropdown

* refactor: make font color darker in sidebar

* fix: wrong tag color on access denied

* feat: new collapsed sidebar

* feat: add lock icon to subnav + hide if parent is disabled

* fix: position of lock icons

* Minor fixes

* fix: subitems +1 pixel ....

* refactor: xs for Datepicker components

* refactor: xs for Input & InputController components

* refactor: xs for Select component

* refactor: add text medium and force styling on table

* feat: add missing tag variant mint

* feat: add stories for Action Card using small heading

* feat: add stories for input

* feat: add stories to Select

* feat: add stories for DatePicker

* refactor: cleanup

* refactor: test for switching languages

* fix: add scroll on userDelegations

* feat: add darkBlue color option for UserAvatar

* feat: add or edit alt on images

* refactor: remove {} wrapping when using string values

* refactor: grid layout in SP layout

* fix: hopefully fixing buggy hover on sidebar

* refactor: classnames usage

* fix: dry pattern on Layout helpers

* fix: remove unec classname use

* fix: wrong path for hourglass svg

* refactor: remove dry pattern in select return

* fix: subitems not closing menu on click

* fix: avatar color when delegation

* feat: add medium variant as button text option

* refactor: smaller font on search results

* fix: remove settings from sidebar

* feat: add path header to accessDenied

* refactor: temp change to make button smaller

* refactor: smaller text on access table

* fix: forgot to commit checkox changes

* refactor: input sizes on documents datepicker

* refactor: text changes

* refactor: smaller padding on mobile logo

* fix: delete endorsments like on main

* fix: back to SM input for access detail table

* fix: link not working outside service portal

* fix: remove table styling on access items

* fix: revert changes on grant access component

* fix: userMenu not responsive + other comments

* fix: base url for settings

* fix: remove temp data

* fix: layout

* fix: remove text on plus button for finance tables

* fix: put grid container back

* fix: sidebar animation

* fix: revert changes for small input

* fix: relative links on userDropdown

* feat: fixes after comment + dropdown lang for mobile

* refactor: cleanup on Layout helpers

* feat: add breadcrumbs for settings

* feat: ui changes on menu + userMenu on mobile

* fix: finance content going under on smaller screens

* fix: spacing on mobile menu

* fix: dont display collapsed state on mobilemenu

* fix: revert padding changes

* fix: fixing userMenu test

* fix: display heading as heading

* fix: revert adding mint variant on Tag

* fix: fixing menu bug

* refactor: layout

* fix: revert pushing mock data!

* fix: spacing should use theme

* fix: use translations for alt text

* fix: wrong usage of willChange

* fix: casing issue

* feat: changes on menu

* fix: wrong color on collapsed active item

* fix: hover states on nav items

* fix: padding variable

* fix: spacing on small screens

* revert: changes on collapsed nav items

Co-authored-by: Ólafur Sverrir Kjartansson <[email protected]>
Co-authored-by: Þórður Hafliðason <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/service-portal/src/app/App.css.ts

@@ -1,6 +1,7 @@
 import { style } from '@vanilla-extract/css'
 
 export const page = style({
+  position: 'relative',
   display: 'flex',
   flexDirection: 'column',
   minHeight: '100vh',

apps/service-portal/src/app/App.tsx

@@ -3,7 +3,10 @@ import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
 import { Authenticator } from '@island.is/auth/react'
 import { ApolloProvider } from '@apollo/client'
 import { client } from '@island.is/service-portal/graphql'
-import { ServicePortalPath } from '@island.is/service-portal/core'
+import {
+  BadgeProvider,
+  ServicePortalPath,
+} from '@island.is/service-portal/core'
 import { LocaleProvider } from '@island.is/localization'
 import { defaultLanguage } from '@island.is/shared/constants'
 import { FeatureFlagProvider } from '@island.is/react/feature-flags'
@@ -33,17 +36,19 @@ export const App = () => {
                 <Authenticator>
                   <FeatureFlagProvider sdkKey={environment.featureFlagSdkKey}>
                     <UserProfileLocale />
-                    <Layout>
-                      <Switch>
-                        <Route exact path={ServicePortalPath.MinarSidurRoot}>
-                          <Dashboard />
-                        </Route>
-                        <Route>
-                          <Modules />
-                        </Route>
-                      </Switch>
-                      <GlobalModules />
-                    </Layout>
+                    <BadgeProvider>
+                      <Layout>
+                        <Switch>
+                          <Route exact path={ServicePortalPath.MinarSidurRoot}>
+                            <Dashboard />
+                          </Route>
+                          <Route>
+                            <Modules />
+                          </Route>
+                        </Switch>
+                        <GlobalModules />
+                      </Layout>
+                    </BadgeProvider>
                   </FeatureFlagProvider>
                 </Authenticator>
               </Router>

apps/service-portal/src/components/Greeting/Greeting.tsx

@@ -13,8 +13,6 @@ import { useQuery, gql } from '@apollo/client'
 import { Query } from '@island.is/api/schema'
 import { m } from '@island.is/service-portal/core'
 
-import * as styles from './Greeting.css'
-
 const NationalRegistryUserQuery = gql`
   query NationalRegistryUserQuery {
     nationalRegistryUser {
@@ -74,16 +72,31 @@ const Greeting: FC<{}> = () => {
           </Text>
           <Text marginBottom={2}>{formatMessage(m.greetingIntro)}</Text>
           <div>
-            <a href={LEGACY_MY_PAGES_URL} target="_blank">
-              <Button variant="text" icon="open" iconType="outline">
+            <a
+              href={LEGACY_MY_PAGES_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button
+                variant="text"
+                icon="open"
+                iconType="outline"
+                size="small"
+              >
                 {formatMessage(m.olderVersion)}
               </Button>
             </a>
           </div>
         </Box>
       </GridColumn>
       <GridColumn span={['12/12', '5/12']}>
-        <Box className={styles.figure} />
+        <img
+          src="./assets/images/school.svg"
+          alt={`${formatMessage(m.altText)} ${formatMessage({
+            defaultMessage: 'upphafssíðu',
+            id: 'service.portal:start-page',
+          })}`}
+        />
       </GridColumn>
     </GridRow>
   )

apps/service-portal/src/components/Header/Header.tsx

@@ -1,9 +1,7 @@
 import React, { FC } from 'react'
-import { Link } from 'react-router-dom'
 import {
   Box,
   Hidden,
-  ContentBlock,
   Button,
   Logo,
   FocusableBox,
@@ -16,6 +14,7 @@ import { useStore } from '../../store/stateProvider'
 import { ActionType } from '../../store/actions'
 import { BetaTag } from '../Logo/BetaTag'
 import { m } from '@island.is/service-portal/core'
+import { Link } from 'react-router-dom'
 
 export const Header: FC<{}> = () => {
   const { formatMessage } = useLocale()
@@ -32,42 +31,43 @@ export const Header: FC<{}> = () => {
       <div className={styles.placeholder} />
       <header className={styles.header}>
         <Box width="full">
-          <ContentBlock>
-            <Box
-              display="flex"
-              justifyContent="spaceBetween"
-              alignItems="center"
-              height="full"
-              background="white"
-              paddingX={[2, 2, 4, 4, 6]}
-            >
+          <Box
+            display="flex"
+            justifyContent={[
+              'spaceBetween',
+              'spaceBetween',
+              'spaceBetween',
+              'flexEnd',
+              'flexEnd',
+            ]}
+            alignItems="center"
+            width="full"
+            background="white"
+            paddingX={[3, 3, 3, 3, 6]}
+          >
+            <Hidden above="md">
               <Link to={ServicePortalPath.MinarSidurRoot}>
                 <FocusableBox component="div">
-                  <Hidden above="md">
-                    <Logo width={40} iconOnly />
-                  </Hidden>
-                  <Hidden below="lg">
-                    <Logo width={160} />
-                  </Hidden>
+                  <Logo width={40} iconOnly />
                   <BetaTag />
                 </FocusableBox>
               </Link>
-              <Box display="flex" alignItems="center" flexWrap="nowrap">
-                <UserMenu />
-                <Hidden above="md">
-                  <Box marginLeft={2}>
-                    <Button
-                      variant="utility"
-                      icon={mobileMenuState === 'open' ? 'close' : 'menu'}
-                      onClick={handleMobileMenuTriggerClick}
-                    >
-                      {formatMessage(m.menu)}
-                    </Button>
-                  </Box>
-                </Hidden>
-              </Box>
+            </Hidden>
+            <Box display="flex" alignItems="center" flexWrap="nowrap">
+              <UserMenu fullscreen />
+              <Hidden above="md">
+                <Box marginLeft={1}>
+                  <Button
+                    variant="utility"
+                    icon={mobileMenuState === 'open' ? 'close' : 'menu'}
+                    onClick={handleMobileMenuTriggerClick}
+                  >
+                    {formatMessage(m.menu)}
+                  </Button>
+                </Box>
+              </Hidden>
             </Box>
-          </ContentBlock>
+          </Box>
         </Box>
       </header>
     </>

apps/service-portal/src/components/Layout/Layout.css.ts

@@ -6,6 +6,10 @@ export const layoutWrapper = style({
   minHeight: `calc(100vh - ${SERVICE_PORTAL_HEADER_HEIGHT_LG}px)`,
 })
 
+export const layoutGrid = style({
+  transition: 'margin 150ms ease-in-out, flex-basis 150ms ease-in-out',
+  willChange: 'margin, flex-basis',
+})
 export const mainWrapper = style({
   width: '100%',
   maxWidth: theme.contentWidth.large,

apps/service-portal/src/components/Layout/Layout.tsx

@@ -1,39 +1,34 @@
-import React, { FC } from 'react'
+import React, { FC, useEffect, useState } from 'react'
 import Header from '../Header/Header'
 import Sidebar from '../Sidebar/Sidebar'
 import {
   Box,
-  Columns,
-  Column,
   Hidden,
-  Footer,
-  ContentBlock,
   ToastContainer,
+  GridContainer,
+  GridColumn,
+  GridRow,
 } from '@island.is/island-ui/core'
 import ContentBreadcrumbs from '../../components/ContentBreadcrumbs/ContentBreadcrumbs'
 import * as styles from './Layout.css'
 import AuthOverlay from '../Loaders/AuthOverlay/AuthOverlay'
 import useRoutes from '../../hooks/useRoutes/useRoutes'
 import { useModules } from '../../hooks/useModules/useModules'
-import { getFooterProps } from './footerProps'
 import { useScrollTopOnUpdate } from '@island.is/service-portal/core'
 import { useLocation } from 'react-router-dom'
 import MobileMenu from '../MobileMenu/MobileMenu'
-import { useFooterContent } from '@island.is/service-portal/graphql'
-import { useLocale, useNamespaces } from '@island.is/localization'
+import { useNamespaces } from '@island.is/localization'
 import { useStore } from '../../store/stateProvider'
 import { RemoveScroll } from 'react-remove-scroll'
+import { getLayout } from './helpers'
 
 const Layout: FC = ({ children }) => {
   useRoutes()
   useModules()
-  const { locale, formatMessage } = useLocale()
   useNamespaces('service.portal')
-  const data = useFooterContent(locale)
   const { pathname } = useLocation()
   useScrollTopOnUpdate([pathname])
-  const footerProps = getFooterProps(data, formatMessage)
-  const [{ mobileMenuState }] = useStore()
+  const [{ mobileMenuState, sidebarState }] = useStore()
 
   return (
     <>
@@ -46,27 +41,24 @@ const Layout: FC = ({ children }) => {
           <MobileMenu />
         </Hidden>
       </RemoveScroll>
-      <Box overflow="hidden" className={styles.layoutWrapper}>
-        <ContentBlock>
-          <Box paddingX={[2, 2, 4, 4, 6]} paddingY={[2, 2, 2, 7]}>
-            <Columns space={[0, 0, 0, 3, 5]} collapseBelow="lg">
-              <Column width="content">
-                <Hidden below="lg">
-                  <Sidebar />
-                </Hidden>
-              </Column>
-              <Column>
-                <Box as="main">
-                  <ContentBreadcrumbs />
-                  <div>{children}</div>
-                </Box>
-              </Column>
-            </Columns>
-          </Box>
-        </ContentBlock>
-        <Hidden print={true}>
-          <Footer {...footerProps} />
-        </Hidden>
+      <Hidden below="lg">
+        <Sidebar />
+      </Hidden>
+      <Box overflow="hidden" className={styles.layoutWrapper} paddingBottom={7}>
+        <Box as="main">
+          <GridContainer>
+            <GridRow>
+              <GridColumn
+                span={getLayout(pathname, sidebarState).span}
+                offset={getLayout(pathname, sidebarState).offset}
+                className={styles.layoutGrid}
+              >
+                <ContentBreadcrumbs />
+                <div>{children}</div>
+              </GridColumn>
+            </GridRow>
+          </GridContainer>
+        </Box>
       </Box>
     </>
   )

apps/service-portal/src/components/Layout/helpers.ts

@@ -0,0 +1,66 @@
+import { GridColumns, ResponsiveProp } from '@island.is/island-ui/core/types'
+import { ServicePortalPath } from '@island.is/service-portal/core'
+import { MenuState } from '../../store/actions'
+
+type ColumnState = 'default' | 'wide' | 'defaultClosed' | 'wideClosed'
+type responsiveGridColumns = Record<
+  ColumnState,
+  {
+    span: ResponsiveProp<GridColumns>
+    offset: ResponsiveProp<GridColumns>
+  }
+>
+
+export const gridlayout: responsiveGridColumns = {
+  default: {
+    span: ['12/12', '12/12', '12/12', '8/12', '8/12'],
+    offset: ['0', '0', '0', '3/12', '3/12'],
+  },
+  wide: {
+    span: ['12/12', '12/12', '12/12', '8/12', '9/12'],
+    offset: ['0', '0', '0', '3/12', '2/12'],
+  },
+  defaultClosed: {
+    span: ['12/12', '12/12', '12/12', '9/12', '9/12'],
+    offset: ['0', '0', '0', '2/12', '2/12'],
+  },
+  wideClosed: {
+    span: ['12/12', '12/12', '12/12', '9/12', '10/12'],
+    offset: ['0', '0', '0', '2/12', '1/12'],
+  },
+}
+
+export const wideScreens = [
+  ServicePortalPath.FinanceRoot,
+  ServicePortalPath.FinanceStatus,
+  ServicePortalPath.FinanceTransactions,
+  ServicePortalPath.FinanceVehicles,
+  ServicePortalPath.FinanceBills,
+  ServicePortalPath.FinanceEmployeeClaims,
+  ServicePortalPath.FinanceExternal,
+  ServicePortalPath.FinanceLocalTax,
+  ServicePortalPath.FinancePayments,
+]
+
+export type GridLayout = {
+  span: ResponsiveProp<GridColumns>
+  offset: ResponsiveProp<GridColumns>
+}
+
+export const getLayout = (
+  pathname: string,
+  sidebarState: MenuState,
+): GridLayout => {
+  const hasWideLayout = wideScreens.includes(pathname as ServicePortalPath)
+  const sidebarCollapsed = sidebarState === 'closed'
+  type LayoutType = keyof typeof gridlayout
+  let layoutType: LayoutType
+
+  if (sidebarCollapsed) {
+    layoutType = hasWideLayout ? 'wideClosed' : 'defaultClosed'
+  } else {
+    layoutType = hasWideLayout ? 'wide' : 'default'
+  }
+
+  return gridlayout[layoutType]
+}