Add Flagship to Navbar

src/components/Navbar/Navbar.jsx

@@ -2,10 +2,19 @@ import React from 'react'
 import { NavbarProvider } from './NavbarContext'
 
 export default function Navbar({ children }) {
+    const hasService = children.find(
+        (child) => child.type.displayName in ['NavbarLogoFlagship']
+    )
+
     return (
         <header className='hw-navbar'>
             <div className='hw-navbar__content'>
-                <div className='hw-navbar__top'>
+                <div
+                    className={
+                        'hw-navbar__top' +
+                        (hasService ? ' hw-navbar__top--service' : '')
+                    }
+                >
                     <NavbarProvider>{children}</NavbarProvider>
                 </div>
             </div>

src/components/Navbar/Navbar.stories.js

@@ -10,6 +10,7 @@ import NavbarSearchButton from './NavbarSearchButton'
 import NavbarSearch from './NavbarSearch'
 import NavbarMenuButton from './NavbarMenuButton'
 import NavbarMenuDrawer from './NavbarMenuDrawer'
+import NavbarLogoFlagship from './NavbarLogoFlagship'
 import Block from '../../layout/Block/Block'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faUser } from '@fortawesome/pro-regular-svg-icons'
@@ -167,3 +168,34 @@ const Template = (args) => (
 )
 
 export const Default = Template.bind({})
+
+const TemplateFlagship = (args) => (
+    <div style={{ height: '600px' }}>
+        <Navbar {...args}>
+            <NavbarLogoFlagship
+                title='Posten logo'
+                logo='posten'
+                href='#'
+                ariaLabel='Go to homepage'
+                flagship='Signering'
+            />
+            <NavbarSkipToMain title='Skip to main content' href='#main' />
+            <NavbarMenu>
+                <NavbarMenuButton
+                    menuName='Menu'
+                    menuTitle='Show menu'
+                    closeName='Close'
+                    closeTitle='Close menu'
+                />
+                <NavbarMenuDrawer
+                    selectorItems={selectorItems}
+                    featuredLinks={featuredLinks}
+                    menuSections={menuSections}
+                    loginLink={{ href: '#', text: 'Min side' }}
+                />
+            </NavbarMenu>
+        </Navbar>
+    </div>
+)
+
+export const Flagship = TemplateFlagship.bind({})

src/components/Navbar/NavbarLogoFlagship.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import ServiceIcon from '../ServiceIcon/ServiceIcon'
+
+export default function NavbarLogoFlagship({
+    href,
+    logo,
+    title,
+    ariaLabel,
+    flagship
+}) {
+    return (
+        <span className='hw-navbar__logo hw-navbar__logo--service'>
+            <a
+                href={href}
+                style={{ zIndex: '300' }}
+                aria-label={ariaLabel || title}
+            >
+                <ServiceIcon
+                    icon={'logo-' + logo}
+                    title={title}
+                    className='hw-navbar__logo-standard'
+                />
+            </a>
+            <span className='hw-navbar__logo-flagship'>{flagship}</span>
+        </span>
+    )
+}
+
+NavbarLogoFlagship.propTypes = {
+    href: PropTypes.string.isRequired,
+    logo: PropTypes.oneOf(['bring', 'posten']).isRequired,
+    title: PropTypes.string.isRequired,
+    ariaLabel: PropTypes.string,
+    flagship: PropTypes.string.isRequired
+}