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-102 Bnf content #125

Merged
merged 24 commits into from
Sep 27, 2021
Merged

GN-102 Bnf content #125

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
f20c88a
Scrim
emollett Aug 11, 2021
78cbc72
GN-101 Move focus to search when clicked
emollett Sep 14, 2021
c9a3644
GN-101 Close MyAccount Dropdown on meganav click
emollett Sep 14, 2021
f3442d7
GN-101 Close MyAccount Dropdown on meganav click
emollett Sep 14, 2021
473e161
Merge branch 'GN-101-Issues' of https://github.com/nice-digital/globa…
emollett Sep 14, 2021
7a21c08
GN-95 Now click scrim to close
emollett Sep 16, 2021
16ee7b5
Merge branch 'GN-95-Add-meganav-mechanism' into GN-95-With-scrim
emollett Sep 16, 2021
7893635
GN-101 Fix list styling variation
emollett Sep 17, 2021
98ef54b
GN-102 Add BNF content
emollett Sep 17, 2021
01ee466
Merge branch 'GN-95-With-scrim' into GN-101-Issues
emollett Sep 17, 2021
12d45ae
Merge branch 'GN-101-Issues' into GN-102-BNF-content
emollett Sep 17, 2021
7a6c615
GN-102 BNFc content
emollett Sep 17, 2021
2343357
GN-102 BNF content update
emollett Sep 21, 2021
13e51aa
GN-101 Code review fixes
emollett Sep 21, 2021
473366d
Merge branch 'GN-101-Issues' into GN-102-BNF-content
emollett Sep 21, 2021
3354639
Merge branch 'GN-95-Add-meganav-mechanism' into GN-102-BNF-content
emollett Sep 21, 2021
6ece64d
GN-102 Nitpicking css
wa-rren-dev Sep 21, 2021
a5d5fd3
GN-102 Pull url from services
emollett Sep 22, 2021
16a4f74
Merge branch 'GN-102-BNF-content' of https://github.com/nice-digital/…
emollett Sep 22, 2021
9c1cfc0
GN-102 Spacing
emollett Sep 22, 2021
ed1511f
GN-101 Fix failing tests
emollett Sep 23, 2021
2fc7fe6
Merge branch 'GN-101-Fix-failing-tests' into GN-102-BNF-content
emollett Sep 23, 2021
d122a5d
GN-102 Update snapshot
emollett Sep 23, 2021
d1eacba
GN-102 Fix letters and dancing button
emollett Sep 24, 2021
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
2 changes: 1 addition & 1 deletion src/Header/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export class Header extends Component {
<>
<span
id="scrim"
className={this.state.scrimIsActive && styles.scrim}
className={this.state.scrimIsActive ? styles.scrim : undefined}
emollett marked this conversation as resolved.
Show resolved Hide resolved
aria-hidden="true"
/>

Expand Down
130 changes: 130 additions & 0 deletions src/Header/Nav/Dropdown/Components/BNF.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
import React from "react";
import { Button } from "@nice-digital/nds-button";
import { Grid, GridItem } from "@nice-digital/nds-grid";
import styles from "./Components.module.scss";

const drugsAtoZ = [
{ letter: "A", link: "https://bnf.nice.org.uk/drug/#A" },
emollett marked this conversation as resolved.
Show resolved Hide resolved
{ letter: "B", link: "https://bnf.nice.org.uk/drug/#B" },
{ letter: "C", link: "https://bnf.nice.org.uk/drug/#C" },
{ letter: "D", link: "https://bnf.nice.org.uk/drug/#D" },
{ letter: "E", link: "https://bnf.nice.org.uk/drug/#E" },
{ letter: "F", link: "https://bnf.nice.org.uk/drug/#F" },
{ letter: "G", link: "https://bnf.nice.org.uk/drug/#G" },
{ letter: "H", link: "https://bnf.nice.org.uk/drug/#H" },
{ letter: "I", link: "https://bnf.nice.org.uk/drug/#I" },
{ letter: "J", link: "https://bnf.nice.org.uk/drug/#J" },
{ letter: "K", link: "https://bnf.nice.org.uk/drug/#K" },
{ letter: "L", link: "https://bnf.nice.org.uk/drug/#L" },
{ letter: "M", link: "https://bnf.nice.org.uk/drug/#M" },
{ letter: "N", link: "https://bnf.nice.org.uk/drug/#N" },
{ letter: "O", link: "https://bnf.nice.org.uk/drug/#O" },
{ letter: "P", link: "https://bnf.nice.org.uk/drug/#P" },
{ letter: "Q", link: null },
{ letter: "R", link: "https://bnf.nice.org.uk/drug/#R" },
{ letter: "S", link: "https://bnf.nice.org.uk/drug/#S" },
{ letter: "T", link: "https://bnf.nice.org.uk/drug/#T" },
{ letter: "U", link: "https://bnf.nice.org.uk/drug/#U" },
{ letter: "V", link: "https://bnf.nice.org.uk/drug/#V" },
{ letter: "W", link: "https://bnf.nice.org.uk/drug/#W" },
{ letter: "X", link: null },
{ letter: "Y", link: null },
{ letter: "Z", link: null },
];

export function BNF() {
return (
<section aria-label="BNF - dropdown navigation">
<h2 className="mt--0">BNF</h2>
<p>
The BNF aims to provide prescribers, pharmacists, and other healthcare
professionals with sound up-to-date information about the use of
medicines.
</p>
<Button variant="primary" to="https://bnf.nice.org.uk/">
View BNF
</Button>

<h3>Drugs A to Z</h3>
<ol className={styles.alphabet}>
{drugsAtoZ.map((letter) => {
emollett marked this conversation as resolved.
Show resolved Hide resolved
return (
<li
key={letter.letter}
className={`${styles.letter} ${
letter.link == null ? styles.chunkyLetter : ""
}`}
>
{letter.link == null ? (
<span>{letter.letter}</span>
) : (
<a href={letter.link}>{letter.letter}</a>
)}
</li>
);
})}
</ol>

<Grid gutter="loose">
<GridItem cols={12} md={3}>
<h3>Browse A to Z by</h3>
<ul className={styles.listUnstyled}>
<li>
<a href="https://bnf.nice.org.uk/interaction/">Interactions</a>
</li>
<li>
<a href="https://bnf.nice.org.uk/treatment-summary/">
Treatment summaries
</a>
</li>
</ul>
</GridItem>
<GridItem cols={12} md={6}>
<h3>Browse by type</h3>
<ul className={styles.listUnstyled} style={{ columnCount: 2 }}>
<li>
<a href="https://bnf.nice.org.uk/dental-practitioners-formulary/">
Dental practitioners' formulary
</a>
</li>
<li>
<a href="https://bnf.nice.org.uk/nurse-prescribers-formulary/">
Nurse prescribers' formulary
</a>
</li>
<li>
<a href="https://bnf.nice.org.uk/guidance/">Medicines guidance</a>
</li>
<li>
<a href="https://bnf.nice.org.uk/wound-management/">
Wound management
</a>
</li>
<li>
<a href="https://bnf.nice.org.uk/medical-devices/">
Medical devices
</a>
</li>
<li>
<a href="https://bnf.nice.org.uk/borderline-substance-taxonomy/">
Borderline substances
</a>
</li>
</ul>
</GridItem>
<GridItem cols={12} md={3}>
<h3>What’s new</h3>
<ul className={styles.listUnstyled}>
<li>
<a href="https://bnf.nice.org.uk/about/changes.html">
Latest BNF
</a>
</li>
</ul>
</GridItem>
</Grid>
<hr />
<a href="https://bnf.nice.org.uk/about/">About BNF</a>
</section>
);
}
123 changes: 123 additions & 0 deletions src/Header/Nav/Dropdown/Components/BNFc.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
import React from "react";
import { Button } from "@nice-digital/nds-button";
import { Grid, GridItem } from "@nice-digital/nds-grid";
import styles from "./Components.module.scss";

const drugsAtoZ = [
{ letter: "A", link: "https://bnfc.nice.org.uk/drug/#A" },
{ letter: "B", link: "https://bnfc.nice.org.uk/drug/#B" },
{ letter: "C", link: "https://bnfc.nice.org.uk/drug/#C" },
{ letter: "D", link: "https://bnfc.nice.org.uk/drug/#D" },
{ letter: "E", link: "https://bnfc.nice.org.uk/drug/#E" },
{ letter: "F", link: "https://bnfc.nice.org.uk/drug/#F" },
{ letter: "G", link: "https://bnfc.nice.org.uk/drug/#G" },
{ letter: "H", link: "https://bnfc.nice.org.uk/drug/#H" },
{ letter: "I", link: "https://bnfc.nice.org.uk/drug/#I" },
{ letter: "J", link: "https://bnfc.nice.org.uk/drug/#J" },
{ letter: "K", link: "https://bnfc.nice.org.uk/drug/#K" },
{ letter: "L", link: "https://bnfc.nice.org.uk/drug/#L" },
{ letter: "M", link: "https://bnfc.nice.org.uk/drug/#M" },
{ letter: "N", link: "https://bnfc.nice.org.uk/drug/#N" },
{ letter: "O", link: "https://bnfc.nice.org.uk/drug/#O" },
{ letter: "P", link: "https://bnfc.nice.org.uk/drug/#P" },
{ letter: "Q", link: null },
{ letter: "R", link: "https://bnfc.nice.org.uk/drug/#R" },
{ letter: "S", link: "https://bnfc.nice.org.uk/drug/#S" },
{ letter: "T", link: "https://bnfc.nice.org.uk/drug/#T" },
{ letter: "U", link: "https://bnfc.nice.org.uk/drug/#U" },
{ letter: "V", link: "https://bnfc.nice.org.uk/drug/#V" },
{ letter: "W", link: "https://bnfc.nice.org.uk/drug/#W" },
{ letter: "X", link: null },
{ letter: "Y", link: null },
{ letter: "Z", link: null },
];

export function BNFc() {
return (
<section aria-label="BNFc - dropdown navigation">
<h2 className="mt--0">BNFc</h2>
<p>Everything NICE says on a topic in an interactive flowchart</p>
<Button variant="primary" to="https://bnfc.nice.org.uk/">
Explore BNFc
</Button>

<h3>Drugs A to Z</h3>
<ol className={styles.alphabet}>
{drugsAtoZ.map((letter) => {
return (
<li
key={letter.letter}
className={`${styles.letter} ${
letter.link == null ? styles.chunkyLetter : ""
}`}
>
{letter.link == null ? (
<span>{letter.letter}</span>
) : (
<a href={letter.link}>{letter.letter}</a>
)}
</li>
);
})}
</ol>

<Grid gutter="loose">
<GridItem cols={12} md={3}>
<h3>Browse A to Z by</h3>
<ul className={styles.listUnstyled}>
<li>
<a href="https://bnfc.nice.org.uk/interaction/">Interactions</a>
</li>
<li>
<a href="https://bnfc.nice.org.uk/treatment-summary/">
Treatment summaries
</a>
</li>
</ul>
</GridItem>
<GridItem cols={12} md={6}>
<h3>Browse by type</h3>
<ul className={styles.listUnstyled} style={{ columnCount: 2 }}>
<li>
<a href="https://bnfc.nice.org.uk/dental-practitioners-formulary/">
Dental practitioners' formulary
</a>
</li>
<li>
<a href="https://bnfc.nice.org.uk/nurse-prescribers-formulary/">
Nurse prescribers' formulary
</a>
</li>
<li>
<a href="https://bnfc.nice.org.uk/guidance/">
Medicines guidance
</a>
</li>
<li>
<a href="https://bnfc.nice.org.uk/medical-devices/">
Medical devices
</a>
</li>
<li>
<a href="https://bnfc.nice.org.uk/borderline-substance-taxonomy/">
Borderline substances
</a>
</li>
</ul>
</GridItem>
<GridItem cols={12} md={3}>
<h3>Latest</h3>
<ul className={styles.listUnstyled}>
<li>
<a href="https://bnfc.nice.org.uk/about/changes.html">
What's changed
</a>
</li>
</ul>
</GridItem>
</Grid>
<hr />
<a href="https://bnfc.nice.org.uk/about/">About BNF</a>
</section>
);
}
64 changes: 64 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 @@ -7,3 +7,67 @@
max-width: none; // To override max-width of 66ch set on lists
padding: 0;
}

.alphabet {
list-style: none;
margin: rem(0 0 $nds-spacing-large);
padding: 0;

&:focus {
outline: none;
}

@supports (display: grid) {
column-gap: rem($nds-spacing-small);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(4ch, 1fr));
max-width: none;
row-gap: rem($nds-spacing-small);

@include mq($from: md) {
grid-template-columns: repeat(auto-fit, minmax(6ch, 1fr));
}
}
}

.chunkyLetter {
@include nds-font-size(h4);
color: $nds-colour-nice-dark-grey;

span {
width: 4.95ch;
}
}

.letter {
display: inline-block;
font-weight: bold;
margin: rem(0 $nds-spacing-small $nds-spacing-small 0);

a,
span {
display: block;
padding: rem($nds-spacing-small 0);
text-align: center;
width: 3.95ch;
}

a {
background: $nds-colour-true-white;
border: 1px solid $nds-colour-border;
text-decoration: none;

&:hover {
text-decoration: underline;
}
}

@supports (display: grid) {
margin: 0;

a,
span {
width: auto;
}
}
}
2 changes: 2 additions & 0 deletions src/Header/Nav/Dropdown/Components/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
export { Guidance } from "./Guidance";
export { More } from "./More";
export { BNF } from "./BNF";
export { BNFc } from "./BNFc";
4 changes: 3 additions & 1 deletion src/Header/Nav/Dropdown/Dropdown.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from "react";
import PropTypes from "prop-types";
import styles from "./Dropdown.module.scss";
import { Guidance, More } from "./Components/";
import { Guidance, More, BNF, BNFc } from "./Components/";
import Remove from "@nice-digital/icons/lib/Remove";

export function Dropdown({
Expand All @@ -15,6 +15,8 @@ export function Dropdown({
const components = {
Guidance: Guidance,
More: More,
BNF: BNF,
BNFc: BNFc,
};
const Component = components[component];

Expand Down
6 changes: 4 additions & 2 deletions src/services.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@
"abbreviation": true,
"title": "British National Formulary",
"id": "bnf",
"dropdown": false,
"dropdown": true,
"dropdownComponent": "BNF",
"links": [
{
"text": "Drugs",
Expand Down Expand Up @@ -73,7 +74,8 @@
"abbreviation": true,
"title": "British National Formulary for Children",
"id": "bnfc",
"dropdown": false,
"dropdown": true,
"dropdownComponent": "BNFc",
"links": [
{
"text": "Drugs",
Expand Down