Skip to content

Commit

Permalink
GW-32 Add flush modifier for tag component
Browse files Browse the repository at this point in the history
  • Loading branch information
@ediblecode
ediblecode committed Jan 9, 2018
1 parent e5653b2 commit 0591dcb
Show file tree
Hide file tree
Showing 6 changed files with 16 additions and 11 deletions.
4 changes: 2 additions & 2 deletions server/views/components/card.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@

<h2>Card with tag</h2>

{{ card({ heading: { text: "This is another heading" }, href: "https://www.nice.org.uk/", tag: { modifier: "new", label: "New" }, metadata: [ { key: "Published date", value: "March 2015", datetime: "2015-03" }, { key: "Metadata key", value: "Metadata value" } ] }) }}
{{ card({ heading: { text: "This is another heading" }, href: "https://www.nice.org.uk/", tag: { modifiers: ["new", "flush"], label: "New" }, metadata: [ { key: "Published date", value: "March 2015", datetime: "2015-03" }, { key: "Metadata key", value: "Metadata value" } ] }) }}

<h2>Card with multiple tags</h2>

{{ card({ heading: { text: "The Prosigna gene expression profiling assay for assessing long‑term risk of breast cancer recurrence (MIB27)" }, href: "https://www.nice.org.uk/advice/mib27", tags: [{ modifier: "consultation", label: "In consultation" }, { modifier: "new", label: "New" }], metadata: [ { key: "Published date", value: "March 2015", datetime: "2015-03" } ] }) }}
{{ card({ heading: { text: "The Prosigna gene expression profiling assay for assessing long‑term risk of breast cancer recurrence (MIB27)" }, href: "https://www.nice.org.uk/advice/mib27", tags: [{ modifiers: ["consultation", "flush"], label: "In consultation" }, { modifiers: ["new", "flush"], label: "New" }], metadata: [ { key: "Published date", value: "March 2015", datetime: "2015-03" } ] }) }}

<h2>List of cards</h1>

Expand Down
1 change: 1 addition & 0 deletions server/views/components/tag.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
<li>Live {{ tag({ label: "Live", modifier: "live" }) }}</li>
<li>Impact {{ tag({ label: "Impact", modifier: "impact" }) }}</li>
<li>Impact alpha {{ tag({ label: "Alpha", modifiers: ["impact", "alpha"] }) }}</li>
<li>Flush {{ tag({ label: "Flush (no margin)", modifier: "flush" }) }}</li>
</ul>

</div>
Expand Down
8 changes: 4 additions & 4 deletions server/views/pages/topic-landing-page.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@

<ul class="list list--unstyled">
<li>
{{ card({ heading: { text: "Advanced breast cancer: diagnosis and treatment (CG81)" }, href: "https://www.nice.org.uk/guidance/cg81", tag: { modifier: "updated", label: "Updated" }, metadata: [ { key: "Published date", value: "February 2009", datetime: "2009-02" }, { key: "Last updated", value: "August 2017", datetime: "2017-08" } ] }) }}
{{ card({ heading: { text: "Advanced breast cancer: diagnosis and treatment (CG81)" }, href: "https://www.nice.org.uk/guidance/cg81", tag: { modifiers: ["updated", "flush"], label: "Updated" }, metadata: [ { key: "Published date", value: "February 2009", datetime: "2009-02" }, { key: "Last updated", value: "August 2017", datetime: "2017-08" } ] }) }}
</li>
<li>
{{ card({ heading: { text: "Early and locally advanced breast cancer: diagnosis and treatment (CG80)" }, href: "https://www.nice.org.uk/guidance/cg80", metadata: [ { key: "Published date", value: "February 2009", datetime: "2009-02" } ] }) }}
Expand All @@ -116,7 +116,7 @@
{{ card({ heading: { text: "Improving outcomes in breast cancer (CSG1)" }, href: "https://www.nice.org.uk/guidance/csg1", metadata: [ { key: "Published date", value: "August 2002", datetime: "2012-10" } ] }) }}
</li>
<li>
{{ card({ heading: { text: "Suspected cancer: recognition and referral (NG12)" }, href: "https://www.nice.org.uk/guidance/ng12", tag: { modifier: "updated", label: "Updated" }, metadata: [ { key: "Published date", value: "June 2015", datetime: "2015-06" }, { key: "Last updated", value: "July 2017", datetime: "2017-07" } ] }) }}
{{ card({ heading: { text: "Suspected cancer: recognition and referral (NG12)" }, href: "https://www.nice.org.uk/guidance/ng12", tag: { modifiers: ["updated", "flush"], label: "Updated" }, metadata: [ { key: "Published date", value: "June 2015", datetime: "2015-06" }, { key: "Last updated", value: "July 2017", datetime: "2017-07" } ] }) }}
</li>
</ul>

Expand All @@ -138,7 +138,7 @@
{{ card({ heading: { text: "EndoPredict gene expression profiling assay for assessing risk of breast cancer recurrence (MIB44)" }, href: "https://www.nice.org.uk/advice/mib44", metadata: [ { key: "Published date", value: "November 2015", datetime: "2015-11" } ] }) }}
</li>
<li>
{{ card({ heading: { text: "L-Dex U400 for lymphoedema after breast cancer treatment (MIB111)" }, href: "https://www.nice.org.uk/advice/mib111", tag: { modifier: "new", label: "New" }, metadata: [ { key: "Published date", value: "July 2017", datetime: "2017-07" } ] }) }}
{{ card({ heading: { text: "L-Dex U400 for lymphoedema after breast cancer treatment (MIB111)" }, href: "https://www.nice.org.uk/advice/mib111", tag: { modifiers: ["new", "flush"], label: "New" }, metadata: [ { key: "Published date", value: "July 2017", datetime: "2017-07" } ] }) }}
</li>
<li>
{{ card({ heading: { text: "The Prosigna gene expression profiling assay for assessing long‑term risk of breast cancer recurrence (MIB27)" }, href: "https://www.nice.org.uk/advice/mib27", metadata: [ { key: "Published date", value: "March 2015", datetime: "2015-03" } ] }) }}
Expand All @@ -149,7 +149,7 @@

<ul class="list list--unstyled">
<li>
{{ card({ heading: { text: "The Prosigna gene expression profiling assay for assessing long‑term risk of breast cancer recurrence (MIB27)" }, href: "https://www.nice.org.uk/advice/mib27", tags: [{ modifier: "consultation", label: "In consultation" }, { modifier: "new", label: "New" }], metadata: [ { key: "Published date", value: "March 2015", datetime: "2015-03" } ] }) }}
{{ card({ heading: { text: "The Prosigna gene expression profiling assay for assessing long‑term risk of breast cancer recurrence (MIB27)" }, href: "https://www.nice.org.uk/advice/mib27", tags: [{ modifiers: ["consultation", "flush"], label: "In consultation" }, { modifiers: ["new", "flush"], label: "New" }], metadata: [ { key: "Published date", value: "March 2015", datetime: "2015-03" } ] }) }}
</li>
</ul>

Expand Down
5 changes: 2 additions & 3 deletions src/components/card/_card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,14 @@

&__tag {
@include font-size(-1);
margin-bottom: 0 !important; // sass-lint:disable-line no-important
margin-right: em($spacing-x-small);
margin-right: rem($spacing-x-small);
}

&__metadata {
@include font-size(-1);
color: $colour-nice-dark-grey;
display: inline-block;
margin: em($spacing-x-small 0 0);
margin: rem($spacing-x-small 0 0);
position: relative;
z-index: 1;
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/card/card.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@
{% if card.tag %}
<div class="card__metadatum">
<dt>
{{ tag({ className: "card__tag", label: card.tag.label, modifier: card.tag.modifier }) }}
{{ tag({ className: "card__tag", label: card.tag.label, modifier: card.tag.modifier, modifiers: card.tag.modifiers }) }}
</dt>
<dd class="visually-hidden">Yes</dd>
</div>
{% elif card.tags %}
{% for t in card.tags %}
<div class="card__metadatum">
<dt>
{{ tag({ className: "card__tag", label: t.label, modifier: t.modifier }) }}
{{ tag({ className: "card__tag", label: t.label, modifier: t.modifier, modifiers: t.modifiers }) }}
</dt>
<dd class="visually-hidden">Yes</dd>
</div>
Expand Down
5 changes: 5 additions & 0 deletions src/components/tag/_tag.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
/// - `--new` New
/// - `--updated` Updated
/// - `--consultation` In consultation
/// - `--flush` No margin
/// @since 0.3.1
.tag {
background-color: $colour-panel-inverse;
Expand Down Expand Up @@ -66,4 +67,8 @@
&--consultation {
background: $colour-guidance-consultation;
}

&--flush {
margin-bottom: 0;
}
}

0 comments on commit 0591dcb

Please sign in to comment.