From 8691f96b7cfd14580253209d4169f1c03b804a05 Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Wed, 19 Jun 2019 15:50:31 +0100 Subject: [PATCH] Updates the docs to point to the right files As part of namespacing, we need to update the links the docs point to so that they are still valid and do not break. --- docs/contributing/coding-standards/components.md | 4 +--- docs/contributing/coding-standards/css.md | 2 +- docs/contributing/coding-standards/js.md | 2 +- docs/contributing/coding-standards/nunjucks-api.md | 2 +- docs/contributing/tasks.md | 2 +- docs/contributing/testing-and-linting.md | 8 ++++---- docs/installation/installing-with-npm.md | 8 ++++---- 7 files changed, 13 insertions(+), 15 deletions(-) diff --git a/docs/contributing/coding-standards/components.md b/docs/contributing/coding-standards/components.md index 3a2e1d19ff..6e007c8ced 100644 --- a/docs/contributing/coding-standards/components.md +++ b/docs/contributing/coding-standards/components.md @@ -1,6 +1,6 @@ # Components -Find components in `src/components`. +Find components in `src/govuk/components`. Components must use the `.govuk-` namespace. @@ -20,8 +20,6 @@ Components must: Component folder and files should be singular, except in cases where they are more commonly used in groups, for example, radios, breadcrumbs and checkboxes. -An example component exists in `src/components/component-example`. - Use this as the basis for creating new components. The folder structure should be: diff --git a/docs/contributing/coding-standards/css.md b/docs/contributing/coding-standards/css.md index b1a974d4e9..03892dc5fd 100644 --- a/docs/contributing/coding-standards/css.md +++ b/docs/contributing/coding-standards/css.md @@ -466,4 +466,4 @@ We document SCSS using [SassDoc](http://sassdoc.com/file-level-annotations/). Th The syntax is used to generate a [SassDoc application](http://govuk-frontend-review.herokuapp.com/docs/) that documents SCSS in a readable format. -See [colour.scss](../../../src/helpers/_colour.scss) for an example of SassDoc syntax. +See [colour.scss](../../../src/govuk/helpers/_colour.scss) for an example of SassDoc syntax. diff --git a/docs/contributing/coding-standards/js.md b/docs/contributing/coding-standards/js.md index 9f75200982..c945401241 100644 --- a/docs/contributing/coding-standards/js.md +++ b/docs/contributing/coding-standards/js.md @@ -104,7 +104,7 @@ Use default export over named export. ## Polyfilling -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. +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. For example, if you want to polyfill `addEventListener` for IE8, import the Event polyfills. diff --git a/docs/contributing/coding-standards/nunjucks-api.md b/docs/contributing/coding-standards/nunjucks-api.md index 36b35b0ae5..5eba514a1c 100644 --- a/docs/contributing/coding-standards/nunjucks-api.md +++ b/docs/contributing/coding-standards/nunjucks-api.md @@ -6,7 +6,7 @@ To provide a level of consistency for developers we have standardised option nam 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`. -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)). +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)). Component macro options are shipped as `macro-options.json` in `package`. diff --git a/docs/contributing/tasks.md b/docs/contributing/tasks.md index 88a19e9b37..105a591592 100644 --- a/docs/contributing/tasks.md +++ b/docs/contributing/tasks.md @@ -75,7 +75,7 @@ This task will: **`gulp compile:components`** This task will: - - compile all `src/components/componentName/componentName.njk` files to HTML files + - compile all `src/govuk/components/componentName/componentName.njk` files to HTML files **`gulp lint`** diff --git a/docs/contributing/testing-and-linting.md b/docs/contributing/testing-and-linting.md index f76c8afd2d..9a2eb67a85 100644 --- a/docs/contributing/testing-and-linting.md +++ b/docs/contributing/testing-and-linting.md @@ -26,24 +26,24 @@ See [JavaScript Coding Standards](coding-standards/js.md#formatting-and-linting) 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). -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. +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. 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". ### Running individual tests You can run a subset of the test suite that only tests components by running: - `npm test -- src/components/button` + `npm test -- src/govuk/components/button` Note: There's a watch mode that keeps a testing session open waiting for changes that can be used with: - `npm test -- --watch src/components/button` + `npm test -- --watch src/govuk/components/button` ### Updating component snapshots [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_`. If a snapshot test fails, review the difference in the console. If the change is the correct change to make, run: -`npm test -- -u src/components/button` +`npm test -- -u src/govuk/components/button` 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. diff --git a/docs/installation/installing-with-npm.md b/docs/installation/installing-with-npm.md index fd76607a3f..ec94a82d98 100644 --- a/docs/installation/installing-with-npm.md +++ b/docs/installation/installing-with-npm.md @@ -93,7 +93,7 @@ This to avoid the risk of global styles conflicting with any pre-existing global 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. -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: +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: ```SCSS // application.scss @@ -172,7 +172,7 @@ if ($radio) { } ``` -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. +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/govuk/all.js) file. ### Option 2: Import JavaScript @@ -222,7 +222,7 @@ if ($radio) { } ``` -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. +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/govuk/all.js) file. ### Polyfills A JavaScript polyfill provides functionality on older browsers or assistive technology that do not natively support it. @@ -283,7 +283,7 @@ To use different asset paths, also complete the below step(s). @import "govuk-frontend/all"; ``` -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. +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. ## Include CSS and JavaScript