Skip to content

(#423) Updates nci logo in header #1922

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

Merged
olitharp-nci merged 1 commit into from
Dec 4, 2024
Merged

(#423) Updates nci logo in header #1922

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 4 additions & 4 deletions docs/content/components/header/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,10 +127,10 @@ code_snippets:
>
<div class="nci-header__navbar">
<div class="nci-logo" id="extended-mega-logo">
<a href="http://cancer.gov" aria-label="Home">
<a href="http://cancer.gov">
<picture>
<source media="(min-width: 1024px)" srcset="https://www.cancer.gov/profiles/custom/cgov_site/themes/custom/cgov/static/images/design-elements/logos/nci-logo-full.svg" />
<img src="https://www.cancer.gov/profiles/custom/cgov_site/themes/custom/cgov/static/images/design-elements/logos/nci-logo-full.svg" alt="" />
<img src="https://www.cancer.gov/profiles/custom/cgov_site/themes/custom/cgov/static/images/design-elements/logos/nci-logo-full.svg" alt="National Cancer Institute Homepage" />
</picture>
</a>
</div>
Expand Down Expand Up @@ -219,10 +219,10 @@ code_snippets:
>
<div class="nci-header__navbar">
<div class="nci-logo" id="megamenu-logo">
<a href="http://cancer.gov" aria-label="Home">
<a href="http://cancer.gov">
<picture>
<source media="(min-width: 1024px)" srcset="https://www.cancer.gov/profiles/custom/cgov_site/themes/custom/cgov/static/images/design-elements/logos/nci-logo-full.svg" />
<img src="https://www.cancer.gov/profiles/custom/cgov_site/themes/custom/cgov/static/images/design-elements/logos/nci-logo-full.svg" alt="" />
<img src="https://www.cancer.gov/profiles/custom/cgov_site/themes/custom/cgov/static/images/design-elements/logos/nci-logo-full.svg" alt="National Cancer Institute Homepage" />
</picture>
</a>
</div>
Expand Down
7 changes: 5 additions & 2 deletions docs/src/components/header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,13 @@ const Header = ({ navData, currentPath }) => {
data-testid="nci-header">
<div className="nci-header__navbar">
<div className="nci-logo">
<Link to="/" aria-label="Homepage">
<Link to="/">
<picture>
<source media="(min-width: 1024px)" srcSet={logo} />
<img src={logoMobile} alt="" />
<img
src={logoMobile}
alt="National Cancer Institute Design System Homepage"
/>
</picture>
</Link>
</div>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/components/nci-header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ export const NciExtended = `
<header class="nci-header nci-header--extended" id="nci-header">
<div class="nci-header__navbar">
<div class="nci-logo" id="extended-mega-logo">
<a href="http://cancer.gov" aria-label="Homepage">
<a href="http://cancer.gov">
<picture>
<source media="(min-width: 1024px)" srcset="${logo}" />
<img src="${logoMobile}" alt="" />
<img src="${logoMobile}" alt="National Cancer Institute Homepage" />
</picture>
</a>
</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/ncids-js/src/components/nci-header/__tests__/nci-header-dom-missing-form.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ export const headerWithoutForm = (): HTMLElement => {
div.innerHTML = `<header class="nci-header nci-header--extended" id="nci-header">
<div class="nci-header__navbar">
<div class="nci-logo" id="extended-mega-logo">
<a href="http://cancer.gov" aria-label="Homepage">
<a href="http://cancer.gov">
<img
src="https://www.cancer.gov/profiles/custom/cgov_site/themes/custom/cgov/static/images/design-elements/logos/nci-logo-full.svg"
alt=""
alt="National Cancer Institute Homepage"
/>
</a>
</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/ncids-js/src/components/nci-header/__tests__/nci-header-dom-missing-search-input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ export const headerWithoutInput = (): HTMLElement => {
div.innerHTML = `<header class="nci-header nci-header--extended" id="nci-header">
<div class="nci-header__navbar">
<div class="nci-logo" id="extended-mega-logo">
<a href="http://cancer.gov" aria-label="Homepage">
<a href="http://cancer.gov">
<img
src="https://www.cancer.gov/profiles/custom/cgov_site/themes/custom/cgov/static/images/design-elements/logos/nci-logo-full.svg"
alt=""
alt="National Cancer Institute Homepage"
/>
</a>
</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/ncids-js/src/components/nci-header/__tests__/nci-header-dom.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ export const headerWithHref = (): HTMLElement => {
div.innerHTML = `<header class="nci-header nci-header--extended" id="nci-header">
<div class="nci-header__navbar">
<div class="nci-logo" id="extended-mega-logo">
<a href="http://cancer.gov" aria-label="Homepage">
<a href="http://cancer.gov">
<img
src="https://www.cancer.gov/profiles/custom/cgov_site/themes/custom/cgov/static/images/design-elements/logos/nci-logo-full.svg"
alt=""
alt="National Cancer Institute Homepage"
/>
</a>
</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/ncids-js/src/components/nci-header/__tests__/nci-header-id-dom.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ export const headerWithDataMenuId = (): HTMLElement => {
<header id="nci-header" class="nci-header nci-header--extended">
<div class="nci-header__navbar">
<div class="nci-logo" id="extended-mega-logo">
<a href="#" aria-label="Homepage">
<img src="https://www.cancer.gov/profiles/custom/cgov_site/themes/custom/cgov/static/images/design-elements/logos/nci-logo-full.svg" alt="" />
<a href="#">
<img src="https://www.cancer.gov/profiles/custom/cgov_site/themes/custom/cgov/static/images/design-elements/logos/nci-logo-full.svg" alt="National Cancer Institute Homepage" />
</a>
</div>

Expand Down
2 changes: 1 addition & 1 deletion packages/ncids-twig/components/nci-header/nci-header.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<header id="nci-header" class="nci-header nci-header--megamenu">
<div class="nci-header__navbar">
<div class="nci-logo" id="extended-mega-logo">
<a href="{{ logo.href }}" aria-label="{{ logo.label }}">
<a href="{{ logo.href }}">
<picture>
<source media="(min-width: 1024px)" srcset="{{ logo.srcSet }}"/>
<img src="{{ logo.imgSrc }}" alt="{{ logo.label }}"/>
Expand Down
8 changes: 4 additions & 4 deletions testing/ncids-css-testing/src/stories/templates/nci-header-logo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,19 @@ import mypartDesktop from '../components/nci-header/img/logo_MyPART.svg';
import mypartMobile from '../components/nci-header/img/logo_MyPart_mobile.svg';

const createPictureLogo = (mobileImg, desktopImage) => {
return `
return `
<div class="nci-logo" id="extended-mega-logo">
<a href="http://cancer.gov" aria-label="Insert appropriate label here">
<a href="http://cancer.gov">
<picture>
<source
media="(min-width: 1024px)"
srcset="${desktopImage}">
<img src="${mobileImg}" alt="" />
<img src="${mobileImg}" alt="National Cancer Institute Homepage" />
</picture>
</a>
</div>
`;
}
};

// language=HTML
export const nciImgLogo = createPictureLogo(nciMobile, nciDesktop);
Expand Down
7 changes: 5 additions & 2 deletions testing/ncids-js-testing/public/example-pages/accordion.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,16 @@
<header id="nci-header" class="nci-header nci-header--extended">
<div class="nci-header__navbar">
<div class="nci-logo" id="extended-mega-logo">
<a href="#" aria-label="National Cancer Institute Homepage">
<a href="#">
<picture>
<source
media="(min-width: 1024px)"
srcset="./../assets/images/logo_NCI.svg"
/>
<img src="./../assets/images/logo_NCI_mobile.svg" alt="" />
<img
src="./../assets/images/logo_NCI_mobile.svg"
alt="National Cancer Institute Homepage"
/>
</picture>
</a>
</div>
Expand Down
21 changes: 9 additions & 12 deletions testing/ncids-js-testing/public/example-pages/auto-init-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,7 @@
</head>
<body>
<a class="usa-skipnav" href="#main-content">Skip to main content</a>
<section
class="usa-banner"
aria-label="Official government website"
>
<section class="usa-banner" aria-label="Official government website">
<header class="usa-banner__header">
<div class="usa-banner__inner">
<div class="usa-banner__header-text">
Expand Down Expand Up @@ -77,13 +74,16 @@ <h3 class="usa-alert__heading">COVID-19 resources.</h3>
<header id="nci-header" class="nci-header nci-header--megamenu">
<div class="nci-header__navbar">
<div class="nci-logo" id="extended-mega-logo">
<a href="#" aria-label="National Cancer Institute Homepage">
<a href="#">
<picture>
<source
media="(min-width: 1024px)"
srcset="./../assets/images/logo_NCI.svg"
/>
<img src="./../assets/images/logo_NCI_mobile.svg" alt="" />
<img
src="./../assets/images/logo_NCI_mobile.svg"
alt="National Cancer Institute Homepage"
/>
</picture>
</a>
</div>
Expand Down Expand Up @@ -144,10 +144,7 @@ <h3 class="usa-alert__heading">COVID-19 resources.</h3>
</a>
</li>
<li class="nci-header-nav__primary-item">
<a
href="/"
class="nci-header-nav__primary-link"
>
<a href="/" class="nci-header-nav__primary-link">
<span>Third Section</span>
</a>
</li>
Expand All @@ -167,7 +164,7 @@ <h3 class="usa-alert__heading">COVID-19 resources.</h3>
</header>

<main id="main-content">
<div class='grid-container margin-bottom-4'>
<div class="grid-container margin-bottom-4">
<div class="usa-form-group">
<label class="usa-label" for="fruit">Select a fruit</label>
<div class="usa-combo-box">
Expand All @@ -176,7 +173,7 @@ <h3 class="usa-alert__heading">COVID-19 resources.</h3>
<option value="apple">Apple</option>
<option value="apricot">Apricot</option>
<option value="avocado">Avocado</option>
</select>
</select>
</div>
</div>
</div>
Expand Down
12 changes: 6 additions & 6 deletions testing/ncids-js-testing/public/example-pages/cgov-grants-training.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,7 @@
<a class="usa-skipnav" href="#main-content">Skip to main content</a>

<!-- usa banner -->
<section
class="usa-banner"
aria-label="Official government website"
>
<section class="usa-banner" aria-label="Official government website">
<header class="usa-banner__header">
<div class="usa-banner__inner">
<div class="usa-banner__header-text">
Expand All @@ -26,13 +23,16 @@
<header id="nci-header" class="nci-header nci-header--megamenu">
<div class="nci-header__navbar">
<div class="nci-logo" id="extended-mega-logo">
<a href="/" aria-label="National Cancer Institute Home Page">
<a href="/">
<picture>
<source
media="(min-width: 1024px)"
srcset="./../assets/images/logo_NCI.svg"
/>
<img src="./../assets/images/logo_NCI_mobile.svg" alt="" />
<img
src="./../assets/images/logo_NCI_mobile.svg"
alt="National Cancer Institute Homepage"
/>
</picture>
</a>
</div>
Expand Down
12 changes: 6 additions & 6 deletions testing/ncids-js-testing/public/example-pages/cgov-home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,7 @@
<a class="usa-skipnav" href="#main-content">Skip to main content</a>

<!-- usa banner -->
<section
class="usa-banner"
aria-label="Official government website"
>
<section class="usa-banner" aria-label="Official government website">
<header class="usa-banner__header">
<div class="usa-banner__inner">
<div class="usa-banner__header-text">
Expand All @@ -26,13 +23,16 @@
<header id="nci-header" class="nci-header nci-header--megamenu">
<div class="nci-header__navbar">
<div class="nci-logo" id="extended-mega-logo">
<a href="/" aria-label="National Cancer Institute Home Page">
<a href="/">
<picture>
<source
media="(min-width: 1024px)"
srcset="./../assets/images/logo_NCI.svg"
/>
<img src="./../assets/images/logo_NCI_mobile.svg" alt="" />
<img
src="./../assets/images/logo_NCI_mobile.svg"
alt="National Cancer Institute Homepage"
/>
</picture>
</a>
</div>
Expand Down
7 changes: 5 additions & 2 deletions testing/ncids-js-testing/public/example-pages/cta-strip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,16 @@
<header id="nci-header" class="nci-header nci-header--megamenu">
<div class="nci-header__navbar">
<div class="nci-logo" id="extended-mega-logo">
<a href="#" aria-label="National Cancer Institute Homepage">
<a href="#">
<picture>
<source
media="(min-width: 1024px)"
srcset="./../assets/images/logo_NCI.svg"
/>
<img src="./../assets/images/logo_NCI_mobile.svg" alt="" />
<img
src="./../assets/images/logo_NCI_mobile.svg"
alt="National Cancer Institute Homepage"
/>
</picture>
</a>
</div>
Expand Down
12 changes: 6 additions & 6 deletions testing/ncids-js-testing/public/example-pages/deprecated-cgov-header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,7 @@
<a class="usa-skipnav" href="#main-content">Skip to main content</a>

<!-- usa banner -->
<section
class="usa-banner"
aria-label="Official government website"
>
<section class="usa-banner" aria-label="Official government website">
<header class="usa-banner__header">
<div class="usa-banner__inner">
<div class="usa-banner__header-text">
Expand All @@ -26,13 +23,16 @@
<header id="nci-header" class="nci-header nci-header--extended">
<div class="nci-header__navbar">
<div class="nci-logo" id="extended-mega-logo">
<a href="/" aria-label="National Cancer Institute Home Page">
<a href="/">
<picture>
<source
media="(min-width: 1024px)"
srcset="./../assets/images/logo_NCI.svg"
/>
<img src="./../assets/images/logo_NCI_mobile.svg" alt="" />
<img
src="./../assets/images/logo_NCI_mobile.svg"
alt="National Cancer Institute Homepage"
/>
</picture>
</a>
</div>
Expand Down
7 changes: 5 additions & 2 deletions testing/ncids-js-testing/public/example-pages/feature-card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,16 @@
<header id="nci-header" class="nci-header nci-header--megamenu">
<div class="nci-header__navbar">
<div class="nci-logo" id="extended-mega-logo">
<a href="#" aria-label="National Cancer Institute Homepage">
<a href="#">
<picture>
<source
media="(min-width: 1024px)"
srcset="./../assets/images/logo_NCI.svg"
/>
<img src="./../assets/images/logo_NCI_mobile.svg" alt="" />
<img
src="./../assets/images/logo_NCI_mobile.svg"
alt="National Cancer Institute Homepage"
/>
</picture>
</a>
</div>
Expand Down
Loading
Loading