@govuk-one-login/frontend-ui 1.3.1 → 1.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -26
- package/build/components/bases/auth/auth-base.njk +0 -1
- package/build/components/bases/home/home-base.njk +0 -1
- package/build/components/bases/identity/identity-base-form.njk +4 -0
- package/build/components/bases/ipv-core/ipv-core-base.njk +0 -2
- package/build/components/bases/mobile/mobile-base.njk +0 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -122,9 +122,10 @@ or
|
|
|
122
122
|
```
|
|
123
123
|
|
|
124
124
|
### 6. Import all.css
|
|
125
|
-
|
|
125
|
+
|
|
126
|
+
The way is to import the frontend-ui all.css directly into the bottom of your existing css file
|
|
126
127
|
```
|
|
127
|
-
|
|
128
|
+
@import "../../../node_modules/@govuk-one-login/frontend-ui/build/all";
|
|
128
129
|
```
|
|
129
130
|
|
|
130
131
|
You will also need to add the following in order to ensure that the assets all load properly across the basefiles
|
|
@@ -132,30 +133,6 @@ You will also need to add the following in order to ensure that the assets all l
|
|
|
132
133
|
"cp -R ../../node_modules/@govuk-one-login/frontend-ui/build/frontendUiAssets [OneLevelAboveWhereYouStoreStyleSheets/SameFolderAsStyleSheets]/"
|
|
133
134
|
```
|
|
134
135
|
|
|
135
|
-
include a link to this in your template file, this has been done in the created basefiles already
|
|
136
|
-
```html
|
|
137
|
-
{% block head %}
|
|
138
|
-
'''
|
|
139
|
-
<link rel="stylesheet" href="/[WhereYouStoreStyleSheets]/frontendUi.css"/>
|
|
140
|
-
{% endblock %}
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
Or alternatively you can import the frontend-ui all.css directly into your exisiting css file if you are having a 'flickering' issue
|
|
144
|
-
``` scss
|
|
145
|
-
$govuk-assets-path: "/public/";
|
|
146
|
-
$hmpo-summary-list: false;
|
|
147
|
-
|
|
148
|
-
@import "../../../node_modules/govuk-frontend/govuk/all";
|
|
149
|
-
@import "../../../node_modules/hmpo-components/all";
|
|
150
|
-
@import "../../../node_modules/@govuk-one-login/frontend-language-toggle/stylesheet/styles";
|
|
151
|
-
@import "../../../node_modules/accessible-autocomplete/dist/accessible-autocomplete.min";
|
|
152
|
-
@import "components/button-spinner";
|
|
153
|
-
@import "components/country-picker";
|
|
154
|
-
|
|
155
|
-
@import "../../../node_modules/@govuk-one-login/frontend-ui/build/all.css"; // <--- HERE>
|
|
156
|
-
|
|
157
|
-
```
|
|
158
|
-
|
|
159
136
|
### 7. Add Component to Template
|
|
160
137
|
|
|
161
138
|
Render the component in your template, passing any required data. For the Cookie Banner:
|
|
@@ -10,6 +10,10 @@
|
|
|
10
10
|
{%set htmlClasses = 'govuk-template--rebranded'%}
|
|
11
11
|
{% endif %}
|
|
12
12
|
|
|
13
|
+
{% block head %}
|
|
14
|
+
<link rel="stylesheet" href="/public/stylesheets/application.css"/>
|
|
15
|
+
{% endblock %}
|
|
16
|
+
|
|
13
17
|
{%- block pageTitle %}
|
|
14
18
|
{{- (translate("govuk.error", { default: "Error" }) + ": ") if errorlist.length }}{{ hmpoTitle | safe }}{{ " – " + govukServiceName | safe if govukServiceName !== " " }} – GOV.UK One Login
|
|
15
19
|
{%- endblock %}
|
|
@@ -26,8 +26,6 @@
|
|
|
26
26
|
|
|
27
27
|
<link href="/public/stylesheets/application.css" rel="stylesheet">
|
|
28
28
|
|
|
29
|
-
<link rel="stylesheet" href="/public/stylesheets/frontendUi.css"/>
|
|
30
|
-
|
|
31
29
|
{# For older browsers to allow them to recognise HTML5 elements such as `<header>` #}
|
|
32
30
|
<!--[if lt IE 9]>
|
|
33
31
|
<script nonce='{{ cspNonce }}' src="/html5-shiv/html5shiv.js"></script>
|
|
@@ -21,10 +21,8 @@
|
|
|
21
21
|
{% block head %}
|
|
22
22
|
<link href="/stylesheets/application.css" rel="stylesheet">
|
|
23
23
|
<link href="/stylesheets/language-toggle.css" rel="stylesheet">
|
|
24
|
-
<link href="/stylesheets/frontend-ui.css" rel="stylesheet">
|
|
25
24
|
<meta name="robots" content="noindex">
|
|
26
25
|
|
|
27
|
-
<link rel="stylesheet" href="/stylesheets/frontendUi.css"/>
|
|
28
26
|
{% endblock %}
|
|
29
27
|
|
|
30
28
|
{% block pageTitle %}
|