You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
As part of namespacing, we need to update the links the docs point to
so that they are still valid and do not break. We also needed to update
the examples to show how to use the new namespace.
Copy file name to clipboardexpand all lines: docs/contributing/coding-standards/components.md
+1-5
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Components
2
2
3
-
Find components in `src/components`.
3
+
Find components in `src/govuk/components`.
4
4
5
5
Components must use the `.govuk-` namespace.
6
6
@@ -20,10 +20,6 @@ Components must:
20
20
21
21
Component folder and files should be singular, except in cases where they are more commonly used in groups, for example, radios, breadcrumbs and checkboxes.
22
22
23
-
An example component exists in `src/components/component-example`.
24
-
25
-
Use this as the basis for creating new components.
Copy file name to clipboardexpand all lines: docs/contributing/coding-standards/js.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -104,7 +104,7 @@ Use default export over named export.
104
104
105
105
## Polyfilling
106
106
107
-
If you need to support older browsers, import the necessary [polyfills](/src/vendor/polyfills) and they will be added to the environment when the feature is not supported.
107
+
If you need to support older browsers, import the necessary [polyfills](/src/govuk/vendor/polyfills) and they will be added to the environment when the feature is not supported.
108
108
109
109
For example, if you want to polyfill `addEventListener` for IE8, import the Event polyfills.
Copy file name to clipboardexpand all lines: docs/contributing/coding-standards/nunjucks-api.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ To provide a level of consistency for developers we have standardised option nam
6
6
7
7
The options (arguments) accepted by the component macro are specified in a `[component-name].yaml` file as `params`. Each option should have the following attributes: `name`, `type`, `required`, `description`.
8
8
9
-
An option can additionally contain `params` that denotes nested items in the option (see [breadcrumbs component](https://github.com/alphagov/govuk-frontend/blob/master/src/components/breadcrumbs/breadcrumbs.yaml#L6)) and `isComponent: true` where the option is another component (see [checkboxes component](https://github.com/alphagov/govuk-frontend/blob/master/src/components/checkboxes/checkboxes.yaml#L11)).
9
+
An option can additionally contain `params` that denotes nested items in the option (see [breadcrumbs component](https://github.com/alphagov/govuk-frontend/blob/master/src/govuk/components/breadcrumbs/breadcrumbs.yaml#L6)) and `isComponent: true` where the option is another component (see [checkboxes component](https://github.com/alphagov/govuk-frontend/blob/master/src/govuk/components/checkboxes/checkboxes.yaml#L11)).
10
10
11
11
Component macro options are shipped as `macro-options.json` in `package`.
Copy file name to clipboardexpand all lines: docs/contributing/testing-and-linting.md
+4-4
Original file line number
Diff line number
Diff line change
@@ -26,24 +26,24 @@ See [JavaScript Coding Standards](coding-standards/js.md#formatting-and-linting)
26
26
27
27
We use [Jest](https://jestjs.io/), an automated testing platform with an assertion library, and [Puppeteer](https://pptr.dev/) that is used to control [headless Chrome](https://developers.google.com/web/updates/2017/04/headless-chrome).
28
28
29
-
We test individual components and for instance global Sass files. See [all.test.js](../../src/all.test.js). for examples of global tests we run, and [checkboxes.test.js](../../src/components/checkboxes/checkboxes.test.js) for an example of component tests.
29
+
We test individual components and for instance global Sass files. See [all.test.js](../../src/govuk/all.test.js). for examples of global tests we run, and [checkboxes.test.js](../../src/govuk/components/checkboxes/checkboxes.test.js) for an example of component tests.
30
30
31
31
We aim to write the description of our tests in as "natural language" as possible, for instance "back-link component fails to render if the required fields are not included".
32
32
33
33
### Running individual tests
34
34
You can run a subset of the test suite that only tests components by running:
35
35
36
-
`npm test -- src/components/button`
36
+
`npm test -- src/govuk/components/button`
37
37
38
38
Note: There's a watch mode that keeps a testing session open waiting for changes that can be used with:
39
39
40
-
`npm test -- --watch src/components/button`
40
+
`npm test -- --watch src/govuk/components/button`
41
41
42
42
### Updating component snapshots
43
43
[Snapshot tests](https://facebook.github.io/jest/docs/en/snapshot-testing.html) are used for preventing unintended changes - when the snapshot test runs, it compares the previously captured snapshot to the current markup. For components, the snapshots are stored in `[component-name directory]/_snapshots_`.
44
44
45
45
If a snapshot test fails, review the difference in the console. If the change is the correct change to make, run:
46
46
47
-
`npm test -- -u src/components/button`
47
+
`npm test -- -u src/govuk/components/button`
48
48
49
49
This will update the snapshot file. Commit this file separately with a commit message that explains you're updating the snapshot file and an explanation of what caused the change.
@@ -93,14 +93,14 @@ This to avoid the risk of global styles conflicting with any pre-existing global
93
93
94
94
Hovever, we do include some global styles in the [GOV.UK Prototype Kit](https://github.com/alphagov/govuk-prototype-kit-private-beta) to speed up prototyping.
95
95
96
-
These [global styles](../../src/core/_global-styles.scss) are are not included by default in GOV.UK Frontend. To include these global styles in your app, you can set `$govuk-global-styles` variable to `true` before importing GOV.UK Frontend styles into your app:
96
+
These [global styles](../../src/govuk/core/_global-styles.scss) are are not included by default in GOV.UK Frontend. To include these global styles in your app, you can set `$govuk-global-styles` variable to `true` before importing GOV.UK Frontend styles into your app:
97
97
98
98
```SCSS
99
99
// application.scss
100
100
101
101
$govuk-global-styles: true;
102
102
103
-
@import"govuk-frontend/all";
103
+
@import"govuk-frontend/govuk/all";
104
104
```
105
105
106
106
### Using GOV.UK Frontend with old frameworks
@@ -127,15 +127,15 @@ Note that GOV.UK Frontend does not initialise any scripts by default; all script
127
127
128
128
### Option 1: Include JavaScript
129
129
130
-
Include the `node_modules/govuk-frontend/all.js` script on your page. You might wish to copy the file into your project or reference it from `node_modules`.
130
+
Include the `node_modules/govuk-frontend/govuk/all.js` script on your page. You might wish to copy the file into your project or reference it from `node_modules`.
131
131
132
132
To initialise all components, use the `initAll` function.
133
133
134
134
JavaScript in GOV.UK Frontend requires HTML to be parsed first by the browser before it is initialised. Because of this, make sure you include the script before the closing `</body>` tag.
135
135
Including the script elsewhere will stop components from functioning or displaying correctly.
Some components such as the details or button components are initialised globally. If you want to see how these are initialised by default, see the [all.js](../../src/all.js) file.
176
-
177
175
### Option 2: Import JavaScript
178
176
179
177
If you're using a bundler such as [Webpack](https://webpack.js.org/), use the `import` syntax to import all components. To initialise them, use the `initAll` function:
@@ -222,8 +220,6 @@ if ($radio) {
222
220
}
223
221
```
224
222
225
-
Some components such as the details or button components are initialised globally. If you want to see how these are initialised by default, see the [all.js](../../src/all.js) file.
226
-
227
223
### Polyfills
228
224
A JavaScript polyfill provides functionality on older browsers or assistive technology that do not natively support it.
229
225
@@ -270,7 +266,7 @@ To use different asset paths, also complete the below step(s).
270
266
// Include images from /application/assets/images and fonts from /application/assets/fonts
271
267
$govuk-assets-path: '/application/assets';
272
268
273
-
@import"govuk-frontend/all";
269
+
@import"govuk-frontend/govuk/all";
274
270
```
275
271
276
272
Example 2:
@@ -280,10 +276,10 @@ To use different asset paths, also complete the below step(s).
280
276
$govuk-images-path: "/images/govuk-frontend/";
281
277
$govuk-fonts-path: "/fonts/";
282
278
283
-
@import"govuk-frontend/all";
279
+
@import"govuk-frontend/govuk/all";
284
280
```
285
281
286
-
2. Optional: You can also override the helpers used to generate the asset urls, for example if you are using sass-rails' asset-pipeline functionality. You can do this by setting `$govuk-image-url-function` to the name of the function(s) you wish to use. See `src/settings/_assets.scss` for more information and examples.
282
+
2. Optional: You can also override the helpers used to generate the asset urls, for example if you are using sass-rails' asset-pipeline functionality. You can do this by setting `$govuk-image-url-function` to the name of the function(s) you wish to use. See `src/govuk/settings/_assets.scss` for more information and examples.
0 commit comments