Skip to content

Commit

Permalink
Merge pull request #2338 from SpareBank1/develop_visuellt-loft-header
Browse files Browse the repository at this point in the history 
fix(ffe-header): missing notification bubble desktop
  • Loading branch information
@pethel
pethel authored Oct 2, 2024
2 parents ca91dc2 + 02adc34 commit 2841c05
Show file tree
Hide file tree
Showing 5 changed files with 132 additions and 112 deletions.
49 changes: 38 additions & 11 deletions component-overview/examples/header/header.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
/* eslint-disable jsx-a11y/anchor-is-valid */
import { useState } from 'react';
import React, { useState } from 'react';
import { Icon } from '@sb1/ffe-icons-react';
import classNames from 'classnames';

() => {
const [isUserNavOpen, setIsUserNavOpen] = useState(false);
const [isSiteNavOpen, setIsSiteNavOpen] = useState(false);

const expandMoreIcon =
'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtMzczLjUzOXEtNy4yMzEgMC0xMy40NjEtMi4zMDgtNi4yMzEtMi4zMDgtMTEuODQ2LTcuOTIzTDI3NC45MjQtNTYzLjUzOXEtOC4zMDgtOC4zMDctOC41LTIwLjg4NC0uMTkzLTEyLjU3NyA4LjUtMjEuMjY5IDguNjkyLTguNjkyIDIxLjA3Ni04LjY5MnQyMS4wNzYgOC42OTJMNDgwLTQ0Mi43NjhsMTYyLjkyNC0xNjIuOTI0cTguMzA3LTguMzA3IDIwLjg4NC04LjUgMTIuNTc2LS4xOTIgMjEuMjY4IDguNSA4LjY5MyA4LjY5MiA4LjY5MyAyMS4wNzcgMCAxMi4zODQtOC42OTMgMjEuMDc2TDUwNS4zMDctMzgzLjc3cS01LjYxNSA1LjYxNS0xMS44NDYgNy45MjMtNi4yMyAyLjMwOC0xMy40NjEgMi4zMDhaIi8+PC9zdmc+';
Expand Down Expand Up @@ -76,13 +77,17 @@ import classNames from 'classnames';
<div className="ffe-header__user-nav-toggle">
<button
className="ffe-header__icon-button ffe-header__icon-button--user-nav"
onClick={() => setIsUserNavOpen(prev => !prev)}
onClick={() => {
setIsUserNavOpen(prev => !prev);
setIsSiteNavOpen(false);
}}
>
<span className="ffe-header__user-name">
Jomar Beate Skrothaug
<span className="ffe-header__user-chevron">
<Icon
fileUrl={expandMoreIcon}
size="md"
className={classNames(
'ffe-header__user-chevron-icon',
{
Expand All @@ -99,17 +104,30 @@ import classNames from 'classnames';
aria-label="bruker"
size="xl"
/>

<div className="ffe-header__notification-bubble">
5
</div>
</div>
<div className="ffe-header__notification-bubble">
5
</div>
</button>
</div>

<div className="ffe-header__site-nav-toggle">
<button className="ffe-header__icon-button ffe-header__icon-button--site-nav">
<span className="ffe-header__site-nav-hamburger">
<button
className="ffe-header__icon-button ffe-header__icon-button--site-nav"
type="button"
onClick={() => {
setIsUserNavOpen(false);
setIsSiteNavOpen(prev => !prev);
}}
>
<span
className={classNames(
'ffe-header__site-nav-hamburger',
{
'ffe-header__site-nav-hamburger--expanded':
isSiteNavOpen,
},
)}
>
<span className="ffe-header__site-nav-hamburger-bar" />
</span>
</button>
Expand Down Expand Up @@ -154,7 +172,7 @@ import classNames from 'classnames';
Chat - stengt
</div>
</li>
<li className="ffe-header__list-item ffe-header__list-item--centered">
<li className="ffe-header__list-item">
<button className="ffe-header__logout-button">
<span className="ffe-header__logout-button-label">
Logg ut
Expand All @@ -170,7 +188,16 @@ import classNames from 'classnames';
</nav>

<nav className="ffe-header__site-nav" role="navigation">
<ul className="ffe-header__list ffe-header__site-nav-list">
<ul
className={classNames(
'ffe-header__list',
'ffe-header__site-nav-list',
{
'ffe-header__site-nav-list--visible':
isSiteNavOpen,
},
)}
>
<li className="ffe-header__list-item">
<a className="ffe-header__link" href="#">
Oversikt
Expand Down
45 changes: 36 additions & 9 deletions packages/ffe-header/Header.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export const Standard: Story = {
args: {},
render: function Render() {
const [isUserNavOpen, setIsUserNavOpen] = useState(false);
const [isSiteNavOpen, setIsSiteNavOpen] = useState(false);
/* eslint-disable jsx-a11y/anchor-is-valid */
return (
<div>
Expand Down Expand Up @@ -82,7 +83,10 @@ export const Standard: Story = {
<div className="ffe-header__user-nav-toggle">
<button
className="ffe-header__icon-button ffe-header__icon-button--user-nav"
onClick={() => setIsUserNavOpen(prev => !prev)}
onClick={() => {
setIsUserNavOpen(prev => !prev);
setIsSiteNavOpen(false);
}}
>
<span className="ffe-header__user-name">
Jomar Beate Skrothaug
Expand All @@ -106,17 +110,31 @@ export const Standard: Story = {
aria-label="bruker"
size="xl"
/>

<div className="ffe-header__notification-bubble">
5
</div>
</div>
<div className="ffe-header__notification-bubble">
5
</div>
</button>
</div>

<div className="ffe-header__site-nav-toggle">
<button className="ffe-header__icon-button ffe-header__icon-button--site-nav">
<span className="ffe-header__site-nav-hamburger">
<button
className="ffe-header__icon-button ffe-header__icon-button--site-nav"
type="button"
onClick={() => {
setIsUserNavOpen(false);
setIsSiteNavOpen(prev => !prev);
}}
>
<span
className={classNames(
'ffe-header__site-nav-hamburger',
{
'ffe-header__site-nav-hamburger--expanded':
isSiteNavOpen,
},
)}
>
<span className="ffe-header__site-nav-hamburger-bar" />
</span>
</button>
Expand Down Expand Up @@ -171,7 +189,7 @@ export const Standard: Story = {
Chat - stengt
</div>
</li>
<li className="ffe-header__list-item ffe-header__list-item--centered">
<li className="ffe-header__list-item">
<button className="ffe-header__logout-button">
<span className="ffe-header__logout-button-label">
Logg ut
Expand All @@ -190,7 +208,16 @@ export const Standard: Story = {
className="ffe-header__site-nav"
role="navigation"
>
<ul className="ffe-header__list ffe-header__site-nav-list">
<ul
className={classNames(
'ffe-header__list',
'ffe-header__site-nav-list',
{
'ffe-header__site-nav-list--visible':
isSiteNavOpen,
},
)}
>
<li className="ffe-header__list-item">
<a
className="ffe-header__link"
Expand Down
2 changes: 1 addition & 1 deletion packages/ffe-header/examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@
</div>
</li>
<li
class="ffe-header__list-item ffe-header__list-item--centered"
class="ffe-header__list-item"
>
<button class="ffe-header__logout-button">
<span
Expand Down
Loading

0 comments on commit 2841c05

Please sign in to comment.