Skip to content

Commit

Permalink
Merge pull request #26 from ministryofjustice/component-badge
Browse files Browse the repository at this point in the history 
Add badge component
  • Loading branch information
Simon Whatley committed Jun 24, 2019
2 parents abeeffa + a46f5bf commit b633587
Show file tree
Hide file tree
Showing 8 changed files with 259 additions and 0 deletions.
133 changes: 133 additions & 0 deletions app/views/components/badge/index.html
View file
@@ -0,0 +1,133 @@
{% extends "layouts/base.html" %}

{% block body %}

<div class="govuk-grid-row">

<div class="govuk-grid-column-full">

{{ govukBackLink({
text: "Back",
href: "../"
}) }}

<h1 class="govuk-heading-xl">
<span class="govuk-caption-xl">Components</span> Badge
</h1>

{%- set colours = [{
name: 'purple',
hex: '#2e358b',
contrast: '10.51'
}, {
name: 'bright-purple',
hex: '#912b88',
contrast: '7.23'
}, {
name: 'red',
hex: '#b10e1e',
contrast: '7.12'
}, {
name: 'bright-red',
hex: '#df3034',
contrast: '4.56'
}, {
name: 'green',
hex: '#006435',
contrast: '7.31'
}, {
name: 'blue',
hex: '#005ea5',
contrast: '6.68'
}, {
name: 'black',
hex: '#0b0c0c',
contrast: '19.59'
}, {
name: 'grey',
hex: '#6f777b',
contrast: '4.56'
}] -%}


<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="col">Class</th>
<th class="govuk-table__header" scope="col">Badge</th>
<th class="govuk-table__header" scope="col">Class (with size modifier)</th>
<th class="govuk-table__header" scope="col">Badge</th>
</tr>
</thead>
<tbody class="govuk-table__body">
{%- for colour in colours %}
{% set classColour = "moj-badge--" + colour.name %}
{% set classSize = "moj-badge--small" %}
<tr class="govuk-table__row">
<td class="govuk-table__cell">
<code>{{ classColour }}</code>
</td>
<td class="govuk-table__cell">
{{ mojBadge({
text: "Lorem ipsum " + loop.index,
classes: classColour
}) }}
</td>
<td class="govuk-table__cell">
<code>{{ classColour }} {{ classSize }}</code>
</td>
<td class="govuk-table__cell">
{{ mojBadge({
text: "Lorem ipsum " + loop.index,
classes: classColour + " " + classSize
}) }}
</td>
</tr>
{% endfor -%}
</tbody>
</table>

<h2 class="govuk-heading-m">
Other badges
</h2>

<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="col">Class</th>
<th class="govuk-table__header" scope="col">Badge</th>
<th class="govuk-table__header" scope="col">Class (with size modifier)</th>
<th class="govuk-table__header" scope="col">Badge</th>
</tr>
</thead>
<tbody class="govuk-table__body">
{%- for status in ["error","warning","success","information"] %}
{% set classColour = "moj-badge--" + status %}
{% set classSize = "moj-badge--small" %}
<tr class="govuk-table__row">
<td class="govuk-table__cell">
<code>{{ classColour }}</code>
</td>
<td class="govuk-table__cell">
{{ mojBadge({
text: status,
classes: classColour
}) }}
</td>
<td class="govuk-table__cell">
<code>{{ classColour }} {{ classSize }}</code>
</td>
<td class="govuk-table__cell">
{{ mojBadge({
text: status,
classes: classColour + " " + classSize
}) }}
</td>
</tr>
{% endfor -%}
</tbody>
</table>

</div>

{% endblock %}
1 change: 1 addition & 0 deletions app/views/index.html
View file
Expand Up @@ -4,6 +4,7 @@
<h1 class="govuk-heading-l">MOJ Frontend</h1>
<ul class="govuk-list govuk-list--bullet">
<li><a href="/components/add-another">Add another</a></li>
<li><a href="/components/badge">Badge</a></li>
<li><a href="/components/banner">Banner</a></li>
<li><a href="/components/currency-input">Currency input</a></li>
<li><a href="/components/filter">Filter</a></li>
Expand Down
1 change: 1 addition & 0 deletions app/views/layouts/base.html
View file
Expand Up @@ -21,6 +21,7 @@
{%- from "textarea/macro.njk" import govukTextarea %}
{%- from "warning-text/macro.njk" import govukWarningText %}

{%- from "moj-badge/macro.njk" import mojBadge %}
{%- from "moj-banner/macro.njk" import mojBanner %}
{%- from "moj-currency-input/macro.njk" import mojCurrencyInput %}
{%- from "moj-filter/macro.njk" import mojFilter %}
Expand Down
1 change: 1 addition & 0 deletions src/components/_all.scss
View file
@@ -1,4 +1,5 @@
@import "moj-add-another/add-another";
@import "moj-badge/badge";
@import "moj-banner/banner";
@import "moj-currency-input/currency-input";
@import "moj-filter/filter";
Expand Down
51 changes: 51 additions & 0 deletions src/components/moj-badge/README.md
View file
@@ -0,0 +1,51 @@
# Badge

- [Guidance](https://mojdt-design-system.herokuapp.com/components/badge)
- [Preview](https://mojdt-frontend.herokuapp.com/components/badge)

## Example

```
{{ mojBadge({
text: "Status text",
classes: "moj-badge--blue"
}) }}
```

## Arguments

This component accepts the following arguments.

|Name|Type|Required|Description|
|---|---|---|---|
|text|string|Yes|If `html` is set, this is not required. Text to use within the span. If `html` is provided, the `text` argument will be ignored.|
|html|string|Yes|If `text` is set, this is not required. HTML to use within the span. If `html` is provided, the `text` argument will be ignored.|
|classes|string|Yes|Classes to add to the `span` container. See available [classes](#classes).|
|label|string|No|The `aria-label` to add to the `span` container.|
|attributes|object|No|HTML attributes (for example data attributes) to add to the `span` container.|

### Classes

|Name|Colour code|Colour contrast|
|---|---|---|
|moj-badge--purple|#2e358b|Pass|
|moj-badge--light-purple|#6f72af|Fail|
|moj-badge--bright-purple|#912b88|Pass|
|moj-badge--pink|#d53880|Fail|
|moj-badge--light-pink|#f499be|Fail|
|moj-badge--red|#b10e1e|Pass|
|moj-badge--bright-red|#df3034|Pass|
|moj-badge--orange|#f47738|Fail|
|moj-badge--brown|#b58840|Fail|
|moj-badge--yellow|#ffbf47|Fail|
|moj-badge--light-green|#85994b|Fail|
|moj-badge--green|#006435|Pass|
|moj-badge--turquoise|#28a197|Fail|
|moj-badge--light-blue|#2b8cc4|Fail|
|moj-badge--blue|#005ea5|Pass|
|moj-badge--black|#0b0c0c|Pass|
|moj-badge--grey-1|#6f777b|Pass|
|moj-badge--grey-2|#bfc1c3|Fail|
|moj-badge--grey-3|#dee0e2|Fail|
|moj-badge--grey-4|#f8f8f8|Fail|
|moj-badge--white|#ffffff|Fail|
66 changes: 66 additions & 0 deletions src/components/moj-badge/_badge.scss
View file
@@ -0,0 +1,66 @@
/* ==========================================================================
#BADGE
========================================================================== */

.moj-badge {
@include govuk-font($size: 16, $weight: "bold");
display: inline-block;
border: 2px solid govuk-colour("blue");
color: govuk-colour("blue");
text-transform: uppercase;
vertical-align: middle;
padding: 4px 8px;
padding-bottom: 1px;
outline: 2px solid transparent;
outline-offset: -2px;

&--purple {
border-color: govuk-colour("purple");
color: govuk-colour("purple");
}

&--bright-purple {
border-color: govuk-colour("bright-purple");
color: govuk-colour("bright-purple");
}

&--red,
&--error {
border-color: govuk-colour("red");
color: govuk-colour("red");
}

&--bright-red,
&--warning {
border-color: govuk-colour("bright-red");
color: govuk-colour("bright-red");
}

&--green,
&--success {
border-color: govuk-colour("green");
color: govuk-colour("green");
}

&--blue,
&--information {
border-color: govuk-colour("blue");
color: govuk-colour("blue");
}

&--black {
border-color: govuk-colour("black");
color: govuk-colour("black");
}

&--grey {
border-color: govuk-colour("grey-1");
color: govuk-colour("grey-1");
}

&--small {
@include govuk-font($size: 14, $weight: "bold");
padding: 2px 4px 1px 4px;
}

}
3 changes: 3 additions & 0 deletions src/components/moj-badge/macro.njk
View file
@@ -0,0 +1,3 @@
{% macro mojBadge(params) %}
{%- include "./template.njk" -%}
{% endmacro %}
3 changes: 3 additions & 0 deletions src/components/moj-badge/template.njk
View file
@@ -0,0 +1,3 @@
<span class="moj-badge {{- ' ' + params.classes if params.classes }}" {%- if (params.label) %} aria-label=""{% endif -%} {%- for attribute, value in params.attributes -%} {{ attribute }}="{{ value }}"{% endfor %}>
{{- params.html | safe if params.html else params.text -}}
</span>

0 comments on commit b633587

Please sign in to comment.