darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-19 05:59:44 -04:00
Code Issues Packages Projects Releases Wiki Activity

move vendored uk components to templates

Browse Source
This commit is contained in:
stvnrlly
2022-12-14 11:50:51 -05:00
parent d45c0f6251
commit ac1d5f0983
217 changed files with 4041 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/templates/components/uk_components/button/README.md Normal file
View File

@@ -0,0 +1,15 @@
# Button
## Installation
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance and Examples
Find out when to use the button component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/button).
## Component options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
See [options table](https://design-system.service.gov.uk/components/button/#options-example-default) for details.

256
app/templates/components/uk_components/button/_button.scss Normal file
View File

@@ -0,0 +1,256 @@
@import "../../settings/all";
@import "../../tools/all";
@import "../../helpers/all";
@include govuk-exports("govuk/component/button") {
// Primary button variables
$govuk-button-colour: #00823b; // sass-lint:disable no-color-literals
$govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%);
$govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
$govuk-button-text-colour: govuk-colour("white");
// Secondary button variables
$govuk-secondary-button-colour: govuk-colour("grey-3");
$govuk-secondary-button-hover-colour: govuk-shade($govuk-secondary-button-colour, 10%);
$govuk-secondary-button-shadow-colour: govuk-shade($govuk-secondary-button-colour, 40%);
$govuk-secondary-button-text-colour: govuk-colour("black");
// Warning button variables
$govuk-warning-button-colour: govuk-colour("red");
$govuk-warning-button-hover-colour: govuk-shade($govuk-warning-button-colour, 20%);
$govuk-warning-button-shadow-colour: govuk-shade($govuk-warning-button-colour, 60%);
$govuk-warning-button-text-colour: govuk-colour("white");
// Because the shadow (s0) is visually 'part of' the button, we need to reduce
// the height of the button to compensate by adjusting its padding (s1) and
// increase the bottom margin to include it (s2).
$button-shadow-size: $govuk-border-width-form-element;
.govuk-button {
@include govuk-font($size: 19, $line-height: 19px);
@include govuk-focusable;
box-sizing: border-box;
display: inline-block;
position: relative;
width: 100%;
margin-top: 0;
@include govuk-responsive-margin(6, "bottom", $adjustment: $button-shadow-size); // s2
padding: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)) govuk-spacing(2); // s1
border: $govuk-border-width-form-element solid transparent;
border-radius: 0;
color: $govuk-button-text-colour;
background-color: $govuk-button-colour;
box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
text-align: center;
vertical-align: top;
cursor: pointer;
-webkit-appearance: none;
@include govuk-if-ie8 {
border-bottom: $button-shadow-size solid $govuk-button-shadow-colour;
}
@include govuk-media-query($from: tablet) {
width: auto;
}
// Ensure that any global link styles are overridden
&:link,
&:visited,
&:active,
&:hover {
color: $govuk-button-text-colour;
text-decoration: none;
}
// alphagov/govuk_template includes a specific a:link:focus selector
// designed to make unvisited links a slightly darker blue when focussed, so
// we need to override the text colour for that combination of selectors so
// so that unvisited links styled as buttons do not end up with dark blue
// text when focussed.
@include govuk-compatibility(govuk_template) {
&:link:focus {
color: $govuk-button-text-colour;
}
}
// Fix unwanted button padding in Firefox
&::-moz-focus-inner {
padding: 0;
border: 0;
}
&:hover,
&:focus {
background-color: $govuk-button-hover-colour;
}
&:active {
top: $button-shadow-size;
box-shadow: none;
@include govuk-if-ie8 {
border-bottom-width: 0;
}
}
// The following adjustments do not work for <input type="button"> as
// non-container elements cannot include pseudo elements (i.e. ::before).
// Use a pseudo element to expand the click target area to include the
// button's shadow as well, in case users try to click it.
&::before {
content: "";
display: block;
position: absolute;
top: -$govuk-border-width-form-element;
right: -$govuk-border-width-form-element;
bottom: -($govuk-border-width-form-element + $button-shadow-size);
left: -$govuk-border-width-form-element;
background: transparent;
}
// When the button is active it is shifted down by $button-shadow-size to
// denote a 'pressed' state. If the user happened to click at the very top
// of the button, their mouse is no longer over the button (because it has
// 'moved beneath them') and so the click event is not fired.
//
// This corrects that by shifting the top of the pseudo element so that it
// continues to cover the area that the user originally clicked, which means
// the click event is still fired.
//
// 🎉
&:active::before {
top: -($govuk-border-width-form-element + $button-shadow-size);
}
}
.govuk-button--disabled,
.govuk-button[disabled="disabled"],
.govuk-button[disabled] {
opacity: (.5);
&:hover {
background-color: $govuk-button-colour;
cursor: default;
}
&:focus {
outline: none;
}
&:active {
top: 0;
box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
@include govuk-if-ie8 {
border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; // s0
}
}
}
.govuk-button--secondary {
background-color: $govuk-secondary-button-colour;
box-shadow: 0 $button-shadow-size 0 $govuk-secondary-button-shadow-colour;
&,
&:link,
&:visited,
&:active,
&:hover {
color: $govuk-secondary-button-text-colour;
}
// alphagov/govuk_template includes a specific a:link:focus selector
// designed to make unvisited links a slightly darker blue when focussed, so
// we need to override the text colour for that combination of selectors so
// so that unvisited links styled as buttons do not end up with dark blue
// text when focussed.
@include govuk-compatibility(govuk_template) {
&:link:focus {
color: $govuk-secondary-button-text-colour;
}
}
&:hover,
&:focus {
background-color: $govuk-secondary-button-hover-colour;
&[disabled] {
background-color: $govuk-secondary-button-colour;
}
}
}
.govuk-button--warning {
background-color: $govuk-warning-button-colour;
box-shadow: 0 $button-shadow-size 0 $govuk-warning-button-shadow-colour;
&,
&:link,
&:visited,
&:active,
&:hover {
color: $govuk-warning-button-text-colour;
}
// alphagov/govuk_template includes a specific a:link:focus selector
// designed to make unvisited links a slightly darker blue when focussed, so
// we need to override the text colour for that combination of selectors so
// so that unvisited links styled as buttons do not end up with dark blue
// text when focussed.
@include govuk-compatibility(govuk_template) {
&:link:focus {
color: $govuk-warning-button-text-colour;
}
}
&:hover,
&:focus {
background-color: $govuk-warning-button-hover-colour;
&[disabled] {
background-color: $govuk-warning-button-colour;
}
}
}
.govuk-button--start {
@include govuk-typography-weight-bold;
@include govuk-typography-responsive($size: 24, $override-line-height: 1);
min-height: auto;
padding-top: govuk-spacing(2) - $govuk-border-width-form-element;
padding-right: govuk-spacing(7);
padding-bottom: govuk-spacing(2) - $govuk-border-width-form-element;
padding-left: govuk-spacing(3);
background-image: govuk-image-url("icon-pointer.png");
background-repeat: no-repeat;
background-position: 100% 50%;
@include govuk-device-pixel-ratio {
background-image: govuk-image-url("icon-pointer-2x.png");
background-size: 30px 19px;
}
}
// Begin adjustments for font baseline offset
// These should be removed when the font is updated with the correct baseline
// For the 1px addition please see https://github.com/alphagov/govuk-frontend/pull/365#discussion_r154349428
$offset: 2;
.govuk-button {
padding-top: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1
padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1
}
.govuk-button--start {
padding-top: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1
padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1
}
}

68
app/templates/components/uk_components/button/macro-options.json Normal file
View File

@@ -0,0 +1,68 @@
[
{
"name": "element",
"type": "string",
"required": false,
"description": "Whether to use an `input`, `button` or `a` element to create the button. In most cases you will not need to set this as it will be configured automatically if you use `href` or `html`."
},
{
"name": "text",
"type": "string",
"required": true,
"description": "If `html` is set, this is not required. Text for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`."
},
{
"name": "html",
"type": "string",
"required": true,
"description": "If `text` is set, this is not required. HTML for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`."
},
{
"name": "name",
"type": "string",
"required": true,
"description": "Name for the `input` or `button`. This has no effect on `a` elements."
},
{
"name": "type",
"type": "string",
"required": true,
"description": "Type of `input` or `button` – `button`, `submit` or `reset`. Defaults to `submit`. This has no effect on `a` elements."
},
{
"name": "value",
"type": "string",
"required": true,
"description": "Value for the `button` tag. This has no effect on `a` or `input` elements."
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"description": "Whether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically."
},
{
"name": "href",
"type": "string",
"required": false,
"description": "The URL that the button should link to. If this is set, `element` will be automatically set to `a` if it has not already been defined."
},
{
"name": "classes",
"type": "string",
"required": false,
"description": "Classes to add to the button component."
},
{
"name": "attributes",
"type": "object",
"required": false,
"description": "HTML attributes (for example data attributes) to add to the button component."
},
{
"name": "preventDoubleClick",
"type": "boolean",
"required": false,
"description": "Prevent accidental double clicks on submit buttons from submitting forms multiple times"
}
]

3
app/templates/components/uk_components/button/macro.njk Normal file
View File

@@ -0,0 +1,3 @@
{% macro govukButton(params) %}
{%- include "./template.njk" -%}
{% endmacro %}

35
app/templates/components/uk_components/button/template.njk Normal file
View File

@@ -0,0 +1,35 @@
{# Determine type of element to use, if not explicitly set -#}
{% if params.element %}
{% set element = params.element | lower %}
{% else %}
{% if params.href %}
{% set element = 'a' %}
{% else %}
{% set element = 'button' %}
{% endif %}
{% endif %}
{#- Define common attributes that we can use across all element types #}
{%- set commonAttributes %} class="govuk-button{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} govuk-button--disabled{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
{#- Define common attributes we can use for both button and input types #}
{%- set buttonAttributes %}{% if params.name %} name="{{ params.name }}"{% endif %} type="{{ params.type if params.type else 'submit' }}"{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% if params.preventDoubleClick %} data-prevent-double-click="true"{% endif %}{% endset %}
{#- Actually create a button... or a link! #}
{%- if element == 'a' %}
<a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {{- commonAttributes | safe }}>
{{ params.html | safe if params.html else params.text }}
</a>
{%- elseif element == 'button' %}
<button {%- if params.value %} value="{{ params.value }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
{{ params.html | safe if params.html else params.text }}
</button>
{%- elseif element == 'input' %}
<input value="{{ params.text }}" {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
{%- endif %}