Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix focus state on neutral header #3220

Merged
merged 35 commits into from
Jul 15, 2024
Merged

Fix focus state on neutral header #3220

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
7f276a2
changes to fix neutral state header bugs
SriHV May 29, 2024
078e678
added focus-within in navigation scss
SriHV May 29, 2024
d3034f9
Merge branch 'main' into fix/3204/fix-focus-state-on-neutral-header
alessioventuriniAND Jun 3, 2024
b96a7b6
Merge branch 'main' into fix/3204/fix-focus-state-on-neutral-header
alessioventuriniAND Jun 4, 2024
a43fbd4
changes as per Dina's comments
SriHV Jun 4, 2024
97968d1
merge with main
SriHV Jun 4, 2024
87c9248
Merge branch 'main' into fix/3204/fix-focus-state-on-neutral-header
SriHV Jun 7, 2024
0c576a0
Changes as per Dina's and Joe's comments
SriHV Jun 11, 2024
0e337ae
Indentation changes
SriHV Jun 11, 2024
eddac33
changing navigation drop down's color when screen size's mobile
SriHV Jun 11, 2024
c4d4d21
Commiting VR tests
SriHV Jun 11, 2024
9d5b58d
Update __snapshots__/layout
SriHV Jun 11, 2024
bc022ef
Indentation changes
SriHV Jun 17, 2024
7348c49
changes as per comments
SriHV Jun 19, 2024
26dbc72
removing duplicate css, changes as per comments
SriHV Jun 19, 2024
85e2737
Changing the color variable of header-neutral
SriHV Jun 20, 2024
1c312b6
Merge branch 'main' into fix/3204/fix-focus-state-on-neutral-header
alessioventuriniAND Jun 24, 2024
6fb12ab
Removed unnecessary CSS from netural header
SriHV Jun 24, 2024
8ba31c6
Merge branch 'main' into fix/3204/fix-focus-state-on-neutral-header
alessioventuriniAND Jul 2, 2024
f1838be
Merge branch 'main' into fix/3204/fix-focus-state-on-neutral-header
SriHV Jul 2, 2024
3e51451
changes as per comments
SriHV Jul 2, 2024
7678398
changes as per comments
SriHV Jul 2, 2024
f6f902a
CSS changes for account button
SriHV Jul 4, 2024
5c62bda
Updating snapshot to fix tests
SriHV Jul 4, 2024
b3355ef
Merge branch 'main' into fix/3204/fix-focus-state-on-neutral-header
SriHV Jul 5, 2024
93c6706
Merge main into branch and fix marcro tests
SriHV Jul 10, 2024
9d68e4f
Merge branch 'main' into fix/3204/fix-focus-state-on-neutral-header
SriHV Jul 11, 2024
fb17dec
Update src/components/header/_header.scss
SriHV Jul 11, 2024
3f5f2f4
fixing css issue
SriHV Jul 11, 2024
6cf4272
Update src/components/button/_button.scss
SriHV Jul 11, 2024
99b4a13
Changes as per comments
SriHV Jul 12, 2024
6e97f6c
Merge branch 'main' into fix/3204/fix-focus-state-on-neutral-header
SriHV Jul 12, 2024
131c03a
changing neutral example filename
SriHV Jul 12, 2024
9f9b8ae
updating tests
SriHV Jul 12, 2024
de9bb00
Merge branch 'main' into fix/3204/fix-focus-state-on-neutral-header
SriHV Jul 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions __snapshots__/layout/_template.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -775,7 +775,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `



<button type="button" class="ons-btn ons-u-d-no ons-js-toggle-services ons-btn--mobile ons-btn--text-link ons-btn--text-link-inverse" aria-label="Toggle services menu" aria-controls="service-links" aria-expanded="false">
<button type="button" class="ons-btn ons-u-d-no ons-js-toggle-services ons-btn--mobile ons-btn--ghost-dark" aria-label="Toggle services menu" aria-controls="service-links" aria-expanded="false">
<span class="ons-btn__inner"><span class="ons-btn__text">Account</span><svg class="ons-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img" title="ons-icon-chevron">
<path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)"></path>
</svg></span>
Expand Down Expand Up @@ -891,8 +891,6 @@ exports[`base page template matches the full configuration snapshot 1`] = `








Expand All @@ -916,7 +914,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `



<button type="submit" class="ons-btn ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l ons-btn--mobile ons-btn--ghost-dark" aria-label="Toggle main menu" aria-controls="main-nav" aria-expanded="false">
<button type="submit" class="ons-btn ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l ons-btn--mobile ons-btn--ghost" aria-label="Toggle main menu" aria-controls="main-nav" aria-expanded="false">
<span class="ons-btn__inner"><span class="ons-btn__text">Menu</span><svg class="ons-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img" title="ons-icon-chevron">
<path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)"></path>
</svg></span>
Expand Down
4 changes: 2 additions & 2 deletions ...s_header_example-header-neutral-for-multicoloured-logo_0_document_0_desktop.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions ...ts_header_example-header-neutral-for-multicoloured-logo_0_document_1_tablet.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions ...ts_header_example-header-neutral-for-multicoloured-logo_0_document_2_mobile.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 23 additions & 8 deletions src/components/header/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,7 @@
}
}

&--internal &,
&--neutral & {
&--internal & {
&__top {
background: var(--ons-color-header-masthead-internal);
.ons-icon--logo {
Expand Down Expand Up @@ -110,29 +109,45 @@

&--neutral & {
&__top {
background: var(--ons-color-header-masthead-neutral);
.ons-icon--logo {
display: block;
.ons-icon--logo__group--text,
.ons-icon--logo__group--primary {
fill: var(--ons-color-black);
}
}
}

&__org-logo-link:focus {
outline: none;
background-color: var(--ons-color-focus);
.ons-icon--logo {
color: var(--ons-color-text-link-focus);
}
rmccar marked this conversation as resolved.
Show resolved Hide resolved
SriHV marked this conversation as resolved.
Show resolved Hide resolved
}

&__grid-top {
a {
rmccar marked this conversation as resolved.
Show resolved Hide resolved
color: var(--ons-color-service-links);
color: var(--ons-color-black);
&:hover {
text-decoration: underline solid var(--ons-color-service-links) 3px;
text-decoration: underline solid var(--ons-color-header-masthead-neutral) 3px;
}
&:focus {
color: var(--ons-color-black);
rmccar marked this conversation as resolved.
Show resolved Hide resolved
}
}
}

&__main {
background: var(--ons-color-header-neutral);

background: var(--ons-color-grey-75);
&--border {
border-bottom: 3px solid var(--ons-color-header-neutral);
border-top: 3px solid var(--ons-color-header-neutral);
}
}

&__title {
color: var(--ons-color-header-title);
color: var(--ons-color-white);
&-link {
&:hover {
text-decoration: underline solid var(--ons-color-branded-text) 2px;
Expand Down
10 changes: 4 additions & 6 deletions src/components/header/_macro.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,8 +136,10 @@
</nav>
</div>
{% if params.serviceLinks.itemsList | length > 1 or params.language %}
{% if params.variants == 'internal' or params.variants == 'neutral' %}
{% if params.variants == 'internal' %}
{% set buttonVariant = ["mobile", "text-link", "text-link-inverse"] %}
{% elif params.variants == 'neutral' %}
{% set buttonVariant = ["mobile", "ghost-dark"] %}
{% else %}
{% set buttonVariant = ["mobile", "text-link"] %}
{% endif %}
Expand Down Expand Up @@ -267,11 +269,7 @@
</span>
{% endif %}
{% if params.navigation.toggleNavigationButton %}
{% if params.variants == 'neutral' %}
{% set buttonVariant = ["mobile", "ghost-dark"] %}
{% else %}
{% set buttonVariant = ["mobile", "ghost"] %}
{% endif %}
{% set buttonVariant = ["mobile", "ghost"] %}
{{ onsButton({
"text": params.navigation.toggleNavigationButton.text,
"classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l",
Expand Down
19 changes: 19 additions & 0 deletions src/components/navigation/_navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,4 +141,23 @@
&__item--active > &__link {
font-weight: $font-weight-bold;
}

&-wrapper {
&--neutral {
background: var(--ons-color-grey-75);
.ons-navigation__item {
&--active,
&:hover {
border-color: var(--ons-color-white);
}
.ons-navigation__link {
color: var(--ons-color-white);
&:focus {
background-color: var(--ons-color-focus);
color: var(--ons-color-text-link-focus);
}
}
}
}
}
rmccar marked this conversation as resolved.
Show resolved Hide resolved
}
Loading