Skip to content

Commit

Permalink
fixup! Feat(web): Introduce UNSTABLE Header
Browse files Browse the repository at this point in the history
  • Loading branch information
curdaj committed Nov 29, 2024
1 parent f70e835 commit 0b0fa78
Show file tree
Hide file tree
Showing 2 changed files with 145 additions and 95 deletions.
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@use '../../tools/breakpoint';
@use '../Container';
@use 'theme';

.UNSTABLE_Header {
Expand All @@ -12,12 +13,21 @@
}

.UNSTABLE_Header__container {
@extend .Container;

display: flex;
align-items: center;
justify-content: space-between;
height: theme.$height;
}

.UNSTABLE_Header--fluid .UNSTABLE_Header__container {
width: auto;
max-width: none;
padding-inline: 0;
margin-inline: 0;
}

.UNSTABLE_Header--simple .UNSTABLE_Header__container {
justify-content: space-around;
}
230 changes: 135 additions & 95 deletions packages/web/src/scss/components/UNSTABLE_Header/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,12 @@ <h2 class="docs-Heading">Minimal Header</h2>
<div class="docs-Stack docs-Stack--stretch">

<header class="UNSTABLE_Header UNSTABLE_Header--simple">
<div class="Container">
<div class="UNSTABLE_Header__container">
<a href="#" aria-label="JobBoard homepage">
<div class="ProductLogo">
{{> web/assets/jobBoardLogo }}
</div>
</a>
</div>
<div class="UNSTABLE_Header__container">
<a href="#" aria-label="JobBoard homepage">
<div class="ProductLogo">
{{> web/assets/jobBoardLogo }}
</div>
</a>
</div>
</header>

Expand All @@ -31,7 +29,7 @@ <h2 class="docs-Heading">Header</h2>
<div class="docs-Stack docs-Stack--stretch">

<header class="UNSTABLE_Header">
<div class="UNSTABLE_Header__container Container">
<div class="UNSTABLE_Header__container">
<a href="#" aria-label="JobBoard homepage">
<div class="ProductLogo">
{{> web/assets/jobBoardLogo }}
Expand Down Expand Up @@ -81,24 +79,22 @@ <h2 class="docs-Heading">Header with only Main Navigation</h2>
<div class="docs-Stack docs-Stack--stretch">

<header class="UNSTABLE_Header">
<div class="Container">
<div class="UNSTABLE_Header__container">
<a href="#" aria-label="JobBoard homepage">
<div class="ProductLogo">
{{> web/assets/jobBoardLogo }}
</div>
</a>
<nav class="Navigation Navigation--start Navigation--main">
<ul>
<li class="NavigationItem NavigationItem--selected">
<a href="#" class="NavigationLink NavigationLink--selected" aria-current="page">Home</a>
</li>
<li>
<a href="#" class="NavigationLink">Not Home</a>
</li>
</ul>
</nav>
</div>
<div class="UNSTABLE_Header__container">
<a href="#" aria-label="JobBoard homepage">
<div class="ProductLogo">
{{> web/assets/jobBoardLogo }}
</div>
</a>
<nav class="Navigation Navigation--start Navigation--main">
<ul>
<li class="NavigationItem NavigationItem--selected">
<a href="#" class="NavigationLink NavigationLink--selected" aria-current="page">Home</a>
</li>
<li>
<a href="#" class="NavigationLink">Not Home</a>
</li>
</ul>
</nav>
</div>
</header>

Expand All @@ -113,31 +109,29 @@ <h2 class="docs-Heading">Header without Main Navigation</h2>
<div class="docs-Stack docs-Stack--stretch">

<header class="UNSTABLE_Header">
<div class="Container">
<div class="UNSTABLE_Header__container">
<a href="#" aria-label="JobBoard homepage">
<div class="ProductLogo">
{{> web/assets/jobBoardLogo }}
</div>
</a>
<nav class="Navigation">
<ul>
<li>
<button class="Button Button--tertiary Button--medium Button--symmetrical">
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#search" />
</svg>
</button>
</li>
<li>
<button class="Button Button--secondary Button--medium">Sign up</button>
</li>
<li>
<button class="Button Button--primary Button--medium">Post a job</button>
</li>
</ul>
</nav>
</div>
<div class="UNSTABLE_Header__container">
<a href="#" aria-label="JobBoard homepage">
<div class="ProductLogo">
{{> web/assets/jobBoardLogo }}
</div>
</a>
<nav class="Navigation">
<ul>
<li>
<button class="Button Button--tertiary Button--medium Button--symmetrical">
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#search" />
</svg>
</button>
</li>
<li>
<button class="Button Button--secondary Button--medium">Sign up</button>
</li>
<li>
<button class="Button Button--primary Button--medium">Post a job</button>
</li>
</ul>
</nav>
</div>
</header>

Expand All @@ -152,24 +146,22 @@ <h2 class="docs-Heading">Header with only Main Navigation on End</h2>
<div class="docs-Stack docs-Stack--stretch">

<header class="UNSTABLE_Header">
<div class="Container">
<div class="UNSTABLE_Header__container">
<a href="#" aria-label="JobBoard homepage">
<div class="ProductLogo">
{{> web/assets/jobBoardLogo }}
</div>
</a>
<nav class="Navigation Navigation--main Navigation--end">
<ul>
<li class="NavigationItem NavigationItem--selected">
<a href="#" class="NavigationLink NavigationLink--selected" aria-current="page">Home</a>
</li>
<li>
<a href="#" class="NavigationLink">Not Home</a>
</li>
</ul>
</nav>
</div>
<div class="UNSTABLE_Header__container">
<a href="#" aria-label="JobBoard homepage">
<div class="ProductLogo">
{{> web/assets/jobBoardLogo }}
</div>
</a>
<nav class="Navigation Navigation--main Navigation--end">
<ul>
<li class="NavigationItem NavigationItem--selected">
<a href="#" class="NavigationLink NavigationLink--selected" aria-current="page">Home</a>
</li>
<li>
<a href="#" class="NavigationLink">Not Home</a>
</li>
</ul>
</nav>
</div>
</header>

Expand All @@ -184,31 +176,79 @@ <h2 class="docs-Heading">Header without Main Navigation and on Start</h2>
<div class="docs-Stack docs-Stack--stretch">

<header class="UNSTABLE_Header">
<div class="Container">
<div class="UNSTABLE_Header__container">
<a href="#" aria-label="JobBoard homepage">
<div class="ProductLogo">
{{> web/assets/jobBoardLogo }}
</div>
</a>
<nav class="Navigation Navigation--start">
<ul>
<li>
<button class="Button Button--tertiary Button--medium Button--symmetrical">
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#search" />
</svg>
</button>
</li>
<li>
<button class="Button Button--secondary Button--medium">Sign up</button>
</li>
<li>
<button class="Button Button--primary Button--medium">Post a job</button>
</li>
</ul>
</nav>
</div>
<div class="UNSTABLE_Header__container">
<a href="#" aria-label="JobBoard homepage">
<div class="ProductLogo">
{{> web/assets/jobBoardLogo }}
</div>
</a>
<nav class="Navigation Navigation--start">
<ul>
<li>
<button class="Button Button--tertiary Button--medium Button--symmetrical">
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#search" />
</svg>
</button>
</li>
<li>
<button class="Button Button--secondary Button--medium">Sign up</button>
</li>
<li>
<button class="Button Button--primary Button--medium">Post a job</button>
</li>
</ul>
</nav>
</div>
</header>

</div>
</section>

<section class="UNSTABLE_Section">

<div class="Container">
<h2 class="docs-Heading">Header Fluid</h2>
</div>
<div class="docs-Stack docs-Stack--stretch">

<header class="UNSTABLE_Header UNSTABLE_Header--fluid">
<div class="UNSTABLE_Header__container">
<a href="#" aria-label="JobBoard homepage">
<div class="ProductLogo">
{{> web/assets/jobBoardLogo }}
</div>
</a>
<nav class="Navigation Navigation--start Navigation--main">
<ul>
<li>
<a href="#" class="NavigationLink NavigationLink--selected" aria-current="page">Home</a>
</li>
<li>
<a href="#" class="NavigationLink">Not Home</a>
</li>
<li>
<a href="#" class="NavigationLink NavigationLink--disabled">Home for Disabled</a>
</li>
</ul>
</nav>
<nav class="Navigation">
<ul>
<li>
<button class="Button Button--tertiary Button--medium Button--symmetrical">
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#search" />
</svg>
</button>
</li>
<li>
<button class="Button Button--secondary Button--medium">Sign up</button>
</li>
<li>
<button class="Button Button--primary Button--medium">Post a job</button>
</li>
</ul>
</nav>
</div>
</header>

Expand Down

0 comments on commit 0b0fa78

Please sign in to comment.