[MIM-1987] Mim 1987 logo environment overlay (#2829)

* Add a processor for environment prepending in title MIM-1986 * Add functionality to prepend environment into title tag in head (wip) * Minor adjustments to header and title regex * Add logging for testing (in test) * Fetch environment from baseUrl in app config * Fix environment string on baseUrl match * Fetch environment string from app config instead * Minor code refactoring * Use optional chain for app config * Add environment overlay to logo MIM-1987 * Add styling to environment text logo overlay * Minor code refactoring * Move getting environment string functionality to utils * Add environment string to admin tool applications dashboard and bestbet too * Add environment text to logo for Dashboard * Add environment text logo overlay to Bestbet * Fix environmentString error after develop merge
statisticsnorway · Jul 24, 2024 · 288c224 · 288c224
1 parent 6c26113
commit 288c224
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 17 deletions.
diff --git a/src/main/resources/admin/tools/bestbet/bestbet.ts b/src/main/resources/admin/tools/bestbet/bestbet.ts
@@ -91,6 +91,7 @@ function renderPart(req: XP.Request): XP.Response {
     ...contentTypesList,
   ]
 
+  const environmentString = getEnvironmentString()
   const bestBetComponent = r4XpRender(
     'Bestbet',
     {
@@ -107,14 +108,14 @@ function renderPart(req: XP.Request): XP.Response {
       contentTypes: contentTypesDropdownItems,
       mainSubjects: mainSubjectDropdownItems,
       mainSubjectsEnglish: englishMainSubjectDropdownItems,
+      environmentText: environmentString,
     },
     req,
     {
       id: 'app-bestbet',
     }
   )
 
-  const environmentString = getEnvironmentString()
   return {
     body: render(view, {
       ...getAssets(),

diff --git a/src/main/resources/admin/tools/dashboard/dashboard.es6 b/src/main/resources/admin/tools/dashboard/dashboard.es6
@@ -77,6 +77,7 @@ function renderPart(req) {
 
   const model = {
     ...assets,
+    environmentText: environmentString ? `[${environmentString}]` : '',
     pageContributions,
     username: user.displayName,
     linkToGuide: userHasAdmin

diff --git a/src/main/resources/admin/tools/dashboard/dashboard.html b/src/main/resources/admin/tools/dashboard/dashboard.html
@@ -22,7 +22,10 @@
               <a th:href="${linkToGuide}">Veiledning</a>
             </nav>
             <div class="misc">
-              <img data-th-src="${logoUrl}" class="logo" alt=""></img>
+              <div class="logo-container">
+                <img data-th-src="${logoUrl}" class="logo" alt="" />
+                <span data-th-if="${environmentText}" data-th-utext="${environmentText}" class="environment-logo-overlay" />
+              </div>
               <h1>Dashboard</h1>
             </div>
           </header>

diff --git a/src/main/resources/assets/styles/_bestbet.scss b/src/main/resources/assets/styles/_bestbet.scss
@@ -8,8 +8,21 @@
         padding: 0;
         margin-bottom: $spacer * 3;
 
-        .logo {
-            max-width: 184px;
+        .logo-container {
+          position: relative;
+
+          .logo {
+            width: 184px;
+          }
+
+          .environment-logo-overlay {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+
+            font-weight: bold;
+            color: $ssb-red-3;
+          }
         }
 
         h1 {
@@ -34,7 +47,7 @@
 
         .ssb-dropdown, .ssb-input {
             margin: 0;
-            
+
             & > * {
                 margin: 0;
                 width: 100%;
@@ -59,4 +72,4 @@
             margin-bottom: $spacer;
         }
     }
-}
+}
diff --git a/src/main/resources/assets/styles/_dashboard.scss b/src/main/resources/assets/styles/_dashboard.scss
@@ -90,12 +90,26 @@
     .misc {
       display: flex;
       width: 100%;
-      align-items: baseline;
-    }
+      align-items: center;
+
+      .logo-container {
+        position: relative;
+        margin-bottom: 0.6rem;
+
+        .logo{
+          width: 184px;
+          height: 36px;
+        }
 
-    .logo{
-      width: 184px;
-      height: 36px;
+        .environment-logo-overlay {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+
+          font-weight: bold;
+          color: $ssb-red-3;
+        }
+      }
     }
   }
 

diff --git a/src/main/resources/assets/styles/_header.scss b/src/main/resources/assets/styles/_header.scss
@@ -96,10 +96,12 @@ header.ssb-header-wrapper {
 }
 
   #header-logo {
-      &:focus {
-        outline: $ssb-purple-3 solid 2px;
-        outline-offset: 2px;
-      }
+    position: relative;
+
+    &:focus {
+      outline: $ssb-purple-3 solid 2px;
+      outline-offset: 2px;
+    }
 
     .logo {
       width: 248px;
@@ -110,6 +112,19 @@ header.ssb-header-wrapper {
         height: 36px;
       }
     }
+
+    .environment-logo-overlay {
+      position: absolute;
+      right: 0;
+      bottom: .2rem;
+
+      font-weight: bold;
+      color: $ssb-red-3;
+
+      @include media-breakpoint-down(md) {
+        bottom: 0;
+      }
+    }
   }
 
   .hamburger {

diff --git a/src/main/resources/lib/ssb/parts/header.ts b/src/main/resources/lib/ssb/parts/header.ts
@@ -2,7 +2,7 @@ import { get, Content } from '/lib/xp/content'
 import { assetUrl } from '/lib/xp/portal'
 import { localize } from '/lib/xp/i18n'
 import { createMenuTree, parseTopLinks } from '/lib/ssb/parts/menu'
-import { pathFromStringOrContent } from '/lib/ssb/utils/utils'
+import { getEnvironmentString, pathFromStringOrContent } from '/lib/ssb/utils/utils'
 import { type Language } from '/lib/types/language'
 import { type HeaderContent } from '/lib/types/header'
 import { type Header } from '/site/content-types'
@@ -26,6 +26,7 @@ export function getHeaderContent(language: Language): HeaderContent | undefined
         key: 'logoAltText',
         locale: language.code,
       }),
+      environmentText: getEnvironmentString(),
       searchResultPageUrl: headerContent.data.searchResultPage
         ? pathFromStringOrContent(headerContent.data.searchResultPage)
         : undefined,

diff --git a/src/main/resources/lib/types/header.ts b/src/main/resources/lib/types/header.ts
@@ -5,6 +5,7 @@ export interface HeaderContent {
   logoUrl: string
   logoSrc: string
   logoAltText: string
+  environmentText: string
   searchResultPageUrl?: string
   searchResult?: string
   searchText: string

diff --git a/src/main/resources/react4xp/_entries/Header.tsx b/src/main/resources/react4xp/_entries/Header.tsx
@@ -147,6 +147,7 @@ function Header(props: HeaderContent) {
       <div className='misc top-row flex-row justify-space-between flex-wrap'>
         <a id='header-logo' className='plainLink' href={logoUrl}>
           <img src={logoSrc} alt={logoAltText ? logoAltText : ' '} className='logo' />
+          {props.environmentText ? <span className='environment-logo-overlay'>[{props.environmentText}]</span> : null}
         </a>
 
         <button

diff --git a/src/main/resources/react4xp/bestbet/Bestbet.tsx b/src/main/resources/react4xp/bestbet/Bestbet.tsx
@@ -10,6 +10,7 @@ export const BestBetContext = createContext()
 
 interface BestbetProps {
   logoUrl?: string
+  environmentText?: string
   bestBetListServiceUrl?: string
   contentSearchServiceUrl?: string
   contentStudioBaseUrl?: string
@@ -397,7 +398,12 @@ function Bestbet(props: BestbetProps) {
       <Container fluid>
         <Row className='bestbet-header'>
           <Col className='flex-row align-items-center'>
-            <img src={props.logoUrl} className='logo' />
+            <div className='logo-container'>
+              <img src={props.logoUrl} className='logo' />
+              {props.environmentText ? (
+                <span className='environment-logo-overlay'>[{props.environmentText}]</span>
+              ) : null}
+            </div>
             <Title size={1}>Best bet søk</Title>
           </Col>
         </Row>