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

Jump to bottom

GN-174 & GN-175 Update about and minor content changes #180

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

GN-174 & GN-175 Update about and minor content changes #180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
98a5316
GN-174 Update links and text for About dropdown. Layout wip
johndavey72 Mar 22, 2022
1c5ec79
GN-174 About dropdown layout wip
johndavey72 Mar 22, 2022
371d49b
GN-174 Layout for about dropdown
johndavey72 Mar 22, 2022
24c4840
GN-174 Add 'Our programmes' strapline
johndavey72 Mar 22, 2022
ea18f44
GN-174 Remove inline styles for about dropdown columns
johndavey72 Mar 23, 2022
620d588
GN-174 Minor content tweaks for BNF/c
johndavey72 Mar 23, 2022
7fe4590
GN-174 Add className prop to gridItem component to enable use of addi…
johndavey72 Mar 23, 2022
88a9383
GN-174 Swap newsletter link for guideline prototype link
johndavey72 Mar 24, 2022
e6bdd20
Merge branch 'master' into GN-174-Update-about-and-minor-content-changes
johndavey72 Mar 31, 2022
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
249 changes: 154 additions & 95 deletions src/Header/Nav/Dropdown/Components/AboutUs.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,159 +13,218 @@ export function AboutUs() {
const rootUrl = services.rootUrl;

return (
<section aria-label="About us - dropdown navigation">
<h2 className="mt--0">About us</h2>
<section aria-label="About - navigation">
<h2 className="mt--0">About</h2>
<p>
We provide national guidance and advice to improve health and social
care.
</p>
<Button variant="cta" to={baseUrl}>
Explore about us
Explore about
</Button>

<Grid gutter="loose">
<GridItem data-tracking="Who we are">
<h3 className="mt--d">Who we are</h3>
<GridItem
data-tracking="Our programmes"
className={classnames(styles.aboutCol, styles.aboutCol1)}
>
<h3 className="mt--d">Our programmes</h3>
<p>Learn about the information we produce.</p>
<ul className={classnames(styles.listUnstyled, "mt--d")}>
<li>
<a href={`${baseUrl}/who-we-are/board`}>The board</a>
</li>
<li>
<a href={`${baseUrl}/who-we-are/senior-management-team`}>
Executive team
</a>
</li>
<li>
<a href={`${baseUrl}/who-we-are/guidance-executive`}>
Guidance executive
</a>
</li>
<li>
<a href={`${baseUrl}/who-we-are/structure-of-nice`}>
Our structure
</a>
</li>
<li>
<a href={`${baseUrl}/who-we-are/policies-and-procedures`}>
Policies and procedures
</a>
</li>
<li>
<a
href={`${baseUrl}/who-we-are/corporate-publications/the-nice-strategy-2021-to-2026`}
href={`${baseUrl}/about/what-we-do/our-programmes/nice-guidance`}
>
The NICE strategy 2021 to 2026
Guidance
</a>
</li>
</ul>
</GridItem>
<GridItem data-tracking="What we do">
<h3 className="mt--d">What we do</h3>
<ul className={classnames(styles.listUnstyled, "mt--d")}>
<li>
<a
href={`${baseUrl}/what-we-do/our-programmes/evidence-standards-framework-for-digital-health-technologies`}
href={`${baseUrl}/about/what-we-do/our-programmes/nice-advice`}
>
Digital health
</a>
</li>
<li>
<a href={`${baseUrl}/what-we-do/nice-international`}>
NICE international
</a>
</li>
<li>
<a href={`${baseUrl}/nice-communities/social-care`}>
Social care
</a>
</li>
<li>
<a href={`${baseUrl}/what-we-do/life-sciences`}>Life sciences</a>
</li>
<li>
<a href={`${baseUrl}/what-we-do/into-practice`}>Into practice</a>
</li>
<li>
<a
href={`${baseUrl}/what-we-do/our-programmes/nice-guidance/nice-guidelines/shared-decision-making`}
>
Shared decision making
</a>
</li>
</ul>
</GridItem>
<GridItem data-tracking="Our programmes">
<h3 className="mt--d">Our programmes</h3>
<ul className={classnames(styles.listUnstyled, "mt--d")}>
<li>
<a href={`${baseUrl}/what-we-do/our-programmes/nice-guidance`}>
Guidance
Advice
</a>
</li>
<li>
<a href={`${baseUrl}/what-we-do/our-programmes/nice-advice`}>
Advice
<a href="https://www.nice.org.uk/standards-and-indicators/quality-standards">
Quality standards
</a>
</li>
<li>
<a href="https://www.nice.org.uk/standards-and-indicators">
Standards and indicators
<a href={`${baseUrl}/standards-and-indicators/indicators`}>
Indicators
</a>
</li>
<li>
<a href={`${baseUrl}/what-we-do/our-programmes/topic-selection`}>
Topic selection
<a href={`${baseUrl}/about/what-we-do/digital-health`}>
Digital health
</a>
</li>
<li>
<a
href={`${baseUrl}/what-we-do/our-programmes/cost-savings-resource-planning`}
href={`${baseUrl}/about/what-we-do/our-programmes/topic-selection`}
>
Financial planning
</a>
</li>
<li>
<a href={`${baseUrl}/what-we-do/our-programmes/patient-safety`}>
Patient safety
Topic selection
</a>
</li>
</ul>
</GridItem>
<GridItem data-tracking="Get involved">
<GridItem
data-tracking="Get involved"
className={classnames(styles.aboutCol)}
>
<h3 className="mt--d">Get involved</h3>
<ul className={classnames(styles.listUnstyled, "mt--d")}>
<ul className={classnames(styles.listColumnar, "mt--d")}>
<li>
<a href={`${rootUrl}/Get-Involved/stakeholder-registration`}>
Register as a stakeholder
<p>Understand how decisions are made:</p>
<a href={`${rootUrl}/get-involved/meetings-in-public`}>
Attend a committee meeting
</a>
</li>
<li>
<a href={`${rootUrl}/Get-Involved/Consultations`}>
Comment on a consultation
<p>Comment on draft guidance:</p>
<a href={`${rootUrl}/get-involved/consultations`}>
Guidance in consultation
</a>
</li>
<li>
<a href={`${rootUrl}/Get-Involved/our-committees`}>
<p>Be part of a guidance committee:</p>
<a href={`${rootUrl}/get-involved/our-committees`}>
Join a committee
</a>
</li>
<li>
<a href={`${rootUrl}/Get-Involved/Meetings-in-public`}>
Come to a meeting
<p>Help develop our products:</p>
<a href={`${rootUrl}/get-involved/stakeholder-registration`}>
Register as a stakeholder
</a>
</li>
<li>
<a href={`${rootUrl}/Get-Involved/jobs`}>Work with us</a>
</li>
<li>
<p>Putting you at the heart of our work:</p>
<a
href={`${rootUrl}/about/nice-communities/nice-and-the-public/public-involvement`}
>
Public involvement
</a>
</li>
<li>
<p>Test our guideline prototype:</p>
<a
href={`${rootUrl}/get-involved/help-shape-the-future-of-nice-guidelines`}
>
Help shape the future of NICE guidelines
</a>
</li>
</ul>

<Grid>
<GridItem data-tracking="What we do">
<h3 className="mt--d">What we do</h3>
<ul className={classnames(styles.listUnstyled, "mt--d")}>
<li>
<a href={`${baseUrl}/about/nice-communities/social-care`}>
Social care
</a>
</li>
<li>
<a href={`${baseUrl}/about/what-we-do/life-sciences`}>
Life sciences
</a>
</li>
<li>
<a href={`${baseUrl}/about/what-we-do/nice-international`}>
NICE international
</a>
</li>
<li>
<a
href={`${baseUrl}/about/what-we-do/our-programmes/patient-safety`}
>
Patient safety
</a>
</li>
<li>
<a
href={`${baseUrl}/about/what-we-do/our-programmes/nice-guidance/nice-guidelines/shared-decision-making`}
>
Shared decision making
</a>
</li>
</ul>
</GridItem>
<GridItem data-tracking="Into practice">
<h3 className="mt--d">Into practice</h3>
<ul className={classnames(styles.listUnstyled, "mt--d")}>
<li>
<a
href={`${baseUrl}/about/nice-communities/social-care/quick-guides`}
>
Social care quick guides
</a>
</li>
<li>
<a
href={`${baseUrl}/about/what-we-do/into-practice/measuring-the-uptake-of-nice-guidance`}
>
Measuring the use of NICE guidance
</a>
</li>
<li>
<a
href={`${baseUrl}/about/what-we-do/into-practice/resource-planner`}
>
Resource planner
</a>
</li>
<li>
<a href={`${baseUrl}/about/what-we-do/into-practice`}>
View all Into practice
</a>
</li>
</ul>
</GridItem>
<GridItem data-tracking="Who we are">
<h3 className="mt--d">Who we are</h3>
<ul className={classnames(styles.listUnstyled, "mt--d")}>
<li>
<a href={`${baseUrl}/about/who-we-are/board`}>The board</a>
</li>
<li>
<a
href={`${baseUrl}/about/who-we-are/corporate-publications/the-nice-strategy-2021-to-2026`}
>
The NICE strategy 2021 to 2026
</a>
</li>
<li>
<a
href={`${baseUrl}/about/who-we-are/corporate-publications`}
>
Corporate publications
</a>
</li>
<li>
<a href={`${baseUrl}/about/who-we-are`}>
View all Who we are
</a>
</li>
</ul>
</GridItem>
</Grid>
</GridItem>
</Grid>
<hr />
<ul
className={classnames(styles.inlineList, "mt--d")}
data-tracking="Contact us"
>
<li>
<a href={`${baseUrl}/get-involved/contact-us`}>Contact us</a>
</li>
<li>
<a href={`${baseUrl}/get-involved/jobs`}>Jobs</a>
</li>
</ul>
</section>
);
}
2 changes: 1 addition & 1 deletion src/Header/Nav/Dropdown/Components/BNF.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ export function BNF() {
<h3>What’s new</h3>
<ul className={styles.listUnstyled}>
<li>
<a href={`${baseUrl}/about/changes.html`}>Latest BNF</a>
<a href={`${baseUrl}/about/changes.html`}>Latest BNF changes</a>
</li>
</ul>
</GridItem>
Expand Down
2 changes: 1 addition & 1 deletion src/Header/Nav/Dropdown/Components/BNFc.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ export function BNFc() {
<h3>What’s new</h3>
<ul className={styles.listUnstyled}>
<li>
<a href={`${baseUrl}/about/changes.html`}>Latest BNFC</a>
<a href={`${baseUrl}/about/changes.html`}>Latest BNFC changes</a>
</li>
</ul>
</GridItem>
Expand Down
31 changes: 31 additions & 0 deletions src/Header/Nav/Dropdown/Components/Components.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,37 @@
}
}

.listColumnar {
@extend .listUnstyled;
align-items: flex-start;
display: flex;
flex-wrap: wrap;

p {
margin: 0;
}

li {
width: 100%;
}

@include mq($from: md) {
li {
margin-bottom: rem($nds-spacing-large);
padding-right: rem($nds-spacing-small);
width: calc(100% / 3);
}
}
}

.aboutCol {
flex-basis: auto;

&.aboutCol1 {
flex-shrink: 0;
}
}

.alphabet {
display: flex;
flex-wrap: wrap;
Expand Down
10 changes: 6 additions & 4 deletions src/Header/Nav/Dropdown/Components/Grid.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
import React from "react";
import PropTypes from "prop-types";
import styles from "./Grid.module.scss";
import classNames from "classnames";

export function Grid(props) {
return <div className={styles.grid} {...props} />;
}

export function GridItem(props) {
return <div className={styles.gridItem} {...props} />;
export function GridItem({ className, ...props }) {
return <div className={classNames(styles.gridItem, className)} {...props} />;
}

Grid.propTypes = {
children: PropTypes.node,
children: PropTypes.node.isRequired,
};

GridItem.propTypes = {
children: PropTypes.node,
children: PropTypes.node.isRequired,
className: PropTypes.string,
};