Skip to content

Commit d409da8

Browse files
aliuk201236degrees
authored andcommitted
Updates the docs refer to 'govuk' namespace
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.
1 parent 27f629b commit d409da8

File tree

8 files changed

+21
-29
lines changed

8 files changed

+21
-29
lines changed

docs/contributing/coding-standards/components.md

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Components
22

3-
Find components in `src/components`.
3+
Find components in `src/govuk/components`.
44

55
Components must use the `.govuk-` namespace.
66

@@ -20,10 +20,6 @@ Components must:
2020

2121
Component folder and files should be singular, except in cases where they are more commonly used in groups, for example, radios, breadcrumbs and checkboxes.
2222

23-
An example component exists in `src/components/component-example`.
24-
25-
Use this as the basis for creating new components.
26-
2723
The folder structure should be:
2824

2925
component-name

docs/contributing/coding-standards/css.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -466,4 +466,4 @@ We document SCSS using [SassDoc](http://sassdoc.com/file-level-annotations/). Th
466466

467467
The syntax is used to generate a [SassDoc application](http://govuk-frontend-review.herokuapp.com/docs/) that documents SCSS in a readable format.
468468

469-
See [colour.scss](../../../src/helpers/_colour.scss) for an example of SassDoc syntax.
469+
See [colour.scss](../../../src/govuk/helpers/_colour.scss) for an example of SassDoc syntax.

docs/contributing/coding-standards/js.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ Use default export over named export.
104104

105105
## Polyfilling
106106

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.
108108

109109
For example, if you want to polyfill `addEventListener` for IE8, import the Event polyfills.
110110

docs/contributing/coding-standards/nunjucks-api.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ To provide a level of consistency for developers we have standardised option nam
66

77
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`.
88

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)).
1010

1111
Component macro options are shipped as `macro-options.json` in `package`.
1212

docs/contributing/tasks.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ This task will:
7575
**`gulp compile:components`**
7676

7777
This task will:
78-
- compile all `src/components/componentName/componentName.njk` files to HTML files
78+
- compile all `src/govuk/components/componentName/componentName.njk` files to HTML files
7979

8080
**`gulp lint`**
8181

docs/contributing/testing-and-linting.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -26,24 +26,24 @@ See [JavaScript Coding Standards](coding-standards/js.md#formatting-and-linting)
2626

2727
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).
2828

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.
3030

3131
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".
3232

3333
### Running individual tests
3434
You can run a subset of the test suite that only tests components by running:
3535

36-
`npm test -- src/components/button`
36+
`npm test -- src/govuk/components/button`
3737

3838
Note: There's a watch mode that keeps a testing session open waiting for changes that can be used with:
3939

40-
`npm test -- --watch src/components/button`
40+
`npm test -- --watch src/govuk/components/button`
4141

4242
### Updating component snapshots
4343
[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_`.
4444

4545
If a snapshot test fails, review the difference in the console. If the change is the correct change to make, run:
4646

47-
`npm test -- -u src/components/button`
47+
`npm test -- -u src/govuk/components/button`
4848

4949
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.

docs/installation/compatibility.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ GOV.UK Frontend will:
2626
- no longer use `rem` for font sizes
2727

2828
To turn on compatibility mode for all 3 legacy frameworks, add the following
29-
variables to your project's Sass file, above `@import "govuk-frontend/all"`:
29+
variables to your project's Sass file, above `@import "govuk-frontend/govuk/all"`:
3030

3131
```SCSS
3232
$govuk-compatibility-govukfrontendtoolkit: true;
@@ -42,7 +42,7 @@ If you are not using any of the legacy frameworks, you can still configure
4242
GOV.UK Frontend to use the old colour palette.
4343

4444
Add the following variable to your project's Sass file, above
45-
`@import "govuk-frontend/all"`:
45+
`@import "govuk-frontend/govuk/all"`:
4646

4747
```scss
4848
$govuk-use-legacy-palette: true;

docs/installation/installing-with-npm.md

+10-14
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,14 @@ imports) if you want to override GOV.UK Frontend with your own styles.
4242
1. To import all components, add the below to your Sass file:
4343

4444
```SCSS
45-
@import "node_modules/govuk-frontend/all";
45+
@import "node_modules/govuk-frontend/govuk/all";
4646
```
4747

4848
2. To import an individual component (for example a button), add the below to
4949
your Sass file:
5050

5151
```SCSS
52-
@import "node_modules/govuk-frontend/components/button/button";
52+
@import "node_modules/govuk-frontend/govuk/components/button/button";
5353
```
5454

5555
### Optional: Resolving SCSS import paths
@@ -82,7 +82,7 @@ to include add `includePaths` to it.
8282
After resolving the import paths you can import GOV.UK Frontend by using:
8383

8484
```SCSS
85-
@import "govuk-frontend/components/button/button";
85+
@import "govuk-frontend/govuk/components/button/button";
8686
```
8787

8888
### Global Styles
@@ -93,14 +93,14 @@ This to avoid the risk of global styles conflicting with any pre-existing global
9393

9494
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.
9595

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:
9797

9898
```SCSS
9999
// application.scss
100100

101101
$govuk-global-styles: true;
102102

103-
@import "govuk-frontend/all";
103+
@import "govuk-frontend/govuk/all";
104104
```
105105

106106
### 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
127127

128128
### Option 1: Include JavaScript
129129

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`.
131131

132132
To initialise all components, use the `initAll` function.
133133

134134
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.
135135
Including the script elsewhere will stop components from functioning or displaying correctly.
136136

137137
```html
138-
<script src="path-to-assets/govuk-frontend/all.js"></script>
138+
<script src="path-to-assets/govuk-frontend/govuk/all.js"></script>
139139
<script>window.GOVUKFrontend.initAll()</script>
140140
</body>
141141
</html>
@@ -172,8 +172,6 @@ if ($radio) {
172172
}
173173
```
174174

175-
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-
177175
### Option 2: Import JavaScript
178176

179177
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) {
222220
}
223221
```
224222

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-
227223
### Polyfills
228224
A JavaScript polyfill provides functionality on older browsers or assistive technology that do not natively support it.
229225

@@ -270,7 +266,7 @@ To use different asset paths, also complete the below step(s).
270266
// Include images from /application/assets/images and fonts from /application/assets/fonts
271267
$govuk-assets-path: '/application/assets';
272268

273-
@import "govuk-frontend/all";
269+
@import "govuk-frontend/govuk/all";
274270
```
275271

276272
Example 2:
@@ -280,10 +276,10 @@ To use different asset paths, also complete the below step(s).
280276
$govuk-images-path: "/images/govuk-frontend/";
281277
$govuk-fonts-path: "/fonts/";
282278

283-
@import "govuk-frontend/all";
279+
@import "govuk-frontend/govuk/all";
284280
```
285281

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.
287283

288284
## Include CSS and JavaScript
289285

0 commit comments

Comments
 (0)