Skip to content

Commit

Permalink
GN-103 Bnfc content (#126)
Browse files Browse the repository at this point in the history 
* Scrim

* GN-101 Move focus to search when clicked

* GN-101 Close MyAccount Dropdown on meganav click

* GN-101 Close MyAccount Dropdown on meganav click

* GN-95 Now click scrim to close

* GN-101 Fix list styling variation

* GN-102 Add BNF content

* GN-102 BNFc content

* GN-102 BNF content update

* GN-103 BNFC content

* GN-103 Revert nav text to abbreviation

* GN-103 Use var for url

* GN-103 Spacing

* GN-101 Fix failing tests

* GN-103 Update snapshot

* GN-103 Button fix and letter link fix

* GN-103 Button dancing fix

* GN-103 Another dancing button fix attempt

Co-authored-by: w@rren <w@rren.dev>
  • Loading branch information
@emollett @wa-rren-dev
emollett and wa-rren-dev authored Sep 28, 2021
1 parent e4b0e58 commit b65fe61
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 70 deletions.
4 changes: 2 additions & 2 deletions src/Footer/Services/__snapshots__/Services.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,13 +88,13 @@ exports[`Services Matches snapshot 1`] = `
className="link"
eventAction="Footer click"
eventCategory="TopHat and footer"
eventLabel="BNF for Children"
eventLabel="BNFC"
href="https://bnfc.nice.org.uk/"
>
<abbr
title="British National Formulary for Children"
>
BNF for Children
BNFC
<span
className="visuallyHidden"
Expand Down
133 changes: 67 additions & 66 deletions src/Header/Nav/Dropdown/Components/BNFc.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,59 +2,68 @@ 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 },
];
import services from "../../../../services.json";

export function BNFc() {
const baseUrl = services.external.find(
(service) => service.text == "BNFC"
).href;

const drugsAtoZurl = baseUrl + "drug/#";

const drugsAtoZ = [
{ letter: "A", link: true },
{ letter: "B", link: true },
{ letter: "C", link: true },
{ letter: "D", link: true },
{ letter: "E", link: true },
{ letter: "F", link: true },
{ letter: "G", link: true },
{ letter: "H", link: true },
{ letter: "I", link: true },
{ letter: "J", link: true },
{ letter: "K", link: true },
{ letter: "L", link: true },
{ letter: "M", link: true },
{ letter: "N", link: true },
{ letter: "O", link: true },
{ letter: "P", link: true },
{ letter: "Q", link: true },
{ letter: "R", link: true },
{ letter: "S", link: true },
{ letter: "T", link: true },
{ letter: "U", link: true },
{ letter: "V", link: true },
{ letter: "W", link: true },
{ letter: "X", link: true },
{ letter: "Y", link: true },
{ letter: "Z", link: true },
];

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
<section aria-label="BNFC - dropdown navigation">
<h2 className="mt--0">BNFC</h2>
<p>
BNF for Children aims to provide prescribers, pharmacists, and other
healthcare professionals with sound up-to-date information on the use of
medicines for treating children.
</p>
<Button variant="primary" to={baseUrl}>
View BNFC
</Button>

<h3>Drugs A to Z</h3>
<h3 className="mt--d">Drugs A to Z</h3>
<ol className={styles.alphabet}>
{drugsAtoZ.map((letter) => {
{drugsAtoZ.map(({ letter, link }) => {
return (
<li
key={letter.letter}
className={`${styles.letter} ${
letter.link == null ? styles.chunkyLetter : ""
}`}
key={letter}
className={`${styles.letter} ${link ? "" : styles.chunkyLetter}`}
>
{letter.link == null ? (
<span>{letter.letter}</span>
{link ? (
<a href={`${drugsAtoZurl}${letter}`}>{letter}</a>
) : (
<a href={letter.link}>{letter.letter}</a>
<span>{letter}</span>
)}
</li>
);
Expand All @@ -63,61 +72,53 @@ export function BNFc() {

<Grid gutter="loose">
<GridItem cols={12} md={3}>
<h3>Browse A to Z by</h3>
<h3 className="mt--0">Browse A to Z by</h3>
<ul className={styles.listUnstyled}>
<li>
<a href="https://bnfc.nice.org.uk/interaction/">Interactions</a>
<a href={`${baseUrl}interaction/`}>Interactions</a>
</li>
<li>
<a href="https://bnfc.nice.org.uk/treatment-summary/">
Treatment summaries
</a>
<a href={`${baseUrl}treatment-summary/`}>Treatment summaries</a>
</li>
</ul>
</GridItem>
<GridItem cols={12} md={6}>
<h3>Browse by type</h3>
<h3 className="mt--0">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>
<a href={`${baseUrl}medical-devices/`}>Medical devices</a>
</li>
<li>
<a href="https://bnfc.nice.org.uk/nurse-prescribers-formulary/">
Nurse prescribers' formulary
<a href={`${baseUrl}borderline-substance-taxonomy/`}>
Borderline substances
</a>
</li>
<li>
<a href="https://bnfc.nice.org.uk/guidance/">
Medicines guidance
<a href={`${baseUrl}dental-practitioners-formulary/`}>
Dental practitioners' formulary
</a>
</li>
<li>
<a href="https://bnfc.nice.org.uk/medical-devices/">
Medical devices
<a href={`${baseUrl}nurse-prescribers-formulary/`}>
Nurse prescribers' formulary
</a>
</li>
<li>
<a href="https://bnfc.nice.org.uk/borderline-substance-taxonomy/">
Borderline substances
</a>
<a href={`${baseUrl}guidance/`}>Medicines guidance</a>
</li>
</ul>
</GridItem>
<GridItem cols={12} md={3}>
<h3>Latest</h3>
<h3 className="mt--0">What’s new</h3>
<ul className={styles.listUnstyled}>
<li>
<a href="https://bnfc.nice.org.uk/about/changes.html">
What's changed
</a>
<a href={`${baseUrl}about/changes.html`}>Latest BNFC</a>
</li>
</ul>
</GridItem>
</Grid>
<hr />
<a href="https://bnfc.nice.org.uk/about/">About BNF</a>
<a href={`${baseUrl}about/`}>About BNFC</a>
</section>
);
}
4 changes: 3 additions & 1 deletion src/Header/Nav/Dropdown/Components/Components.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,9 @@
}
}

.btn {
// The buttons kept dancing on the BNF
html body a.btn,
html body button.btn {
&:hover,
&:focus,
&:active {
Expand Down
2 changes: 1 addition & 1 deletion src/services.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
},
{
"href": "https://bnfc.nice.org.uk/",
"text": "BNF for Children",
"text": "BNFC",
"abbreviation": true,
"title": "British National Formulary for Children",
"id": "bnfc",
Expand Down

0 comments on commit b65fe61

Please sign in to comment.