The Running locally section of the README should be expanded to include:

• What the outcome of running AF locally is
• The need to override a frontend's version with an ENV VAR and how
• An updated list of commands that covers the above (see below)

$ export ASSETS_FRONTEND_VERSION=999-SNAPSHOT
$ cd /path/to/service/frontend
$ sbt run <SERVICE PORT>
$ cd /path/to/assets-frontend
$ ./server dev

Make the component library step optional in the Gulp build.
At the moment, it runs on all builds, and adds 2-3 seconds.

This is work from @stingrayfunk that has been copied over to reduce duplicate styles.
https://github.com/hmrc/assets-frontend/blob/master/assets/scss/modules/_panel.scss#L10

Changes need to be made on SA and a BEM class needs to be added here.

😄

The descriptions for some of the form components (see #446) are very brief and could be expanded on.

Running a service under iOS 8.0+ using the accessibility tool VoiceOver cannot pass the skip to main content link. Clicking this assumes it's worked as intended however the voice over technology stops.

Example markup:

Are these necessary? If not, they should be consolidated and the corresponding markup refactored.

https://github.com/hmrc/assets-frontend/blob/master/assets/scss/base/_helpers.scss#L35-L85

The dest property for images in config does not have a / on the end where as other dest properties in config do. This needs aligning.

https://github.com/hmrc/assets-frontend/blob/master/gulpfile.js/config.js#L88-L91

Problem

For expand/collapse components (details/summary tags), currently the clickable blue text is not underlined.

Proposed Solution

Either:

• Make a design decision as to whether these clickable expand/collapse links should be underlined.
• Provide an optional modifier so that designers can underline the clickable text in their service, though this makes the component inconsistent across the services and is not recommended.

Problem

Indenting some descriptive text to align with an expand/collapse section is not possible with our current components.

Proposed Solution

Potentially update indent component to include a modifier which provides sufficient indentation.

The expand/collapse buttons is the "Parsley" and "Fast Trax Tax" text. The grey text directly below them is the descriptive text.

In our grid module:

For older non-media query browsers, such as IE8, all grid columns take 100% width.

We need to add % widths for each class for IE8 and below, for example:

.grid-layout__column--1-4 {
  @include grid-column-table(1/4);

  @include ie-lte(8) {
    width: 25%;
  }

}

This code https://github.com/hmrc/assets-frontend/blob/master/assets/javascripts/validation/customValidations.js#L5-L8
can be moved by placing the regex in a pattern attribute in the markup. I think this is being used in IV only

Will potentially need more work than just the above (as in a markup refactor etc)

Please add a handlebars helper for Experimental: section, to

• remove the Experimental: text OR
• make 'Experimental' a bold heading element

The build does not appear to include modernizr.js

We have multiple *toggle JavaScript implementations. This needs investigation.

• https://github.com/hmrc/assets-frontend/blob/master/assets/javascripts/modules/toggle.js
• https://github.com/hmrc/assets-frontend/blob/master/assets/javascripts/modules/toggleContextualFields.js
• https://github.com/hmrc/assets-frontend/blob/master/assets/javascripts/modules/toggleDetails.js
• https://github.com/hmrc/assets-frontend/blob/master/assets/javascripts/modules/toggleDynamicFormFields.js
• https://github.com/hmrc/assets-frontend/blob/master/assets/javascripts/modules/simpleToggleDynamicFormFields.js

There are classes in _form.scss which refer to elements within a class, e.g. ".block-label input"
This causes problems of overcoming specificity.
We should refactor these classes into BEM format.

On browsers that don't support background-size, the HMRC logo doesn't display correctly. The css for this is set in Assets Frontend.

Enable easy debugging on karma tests

Can these files be merged?

components/_page-header.scss and components/_template-page-header.scss

We have multiple error styles in scss/base/form_errors. We have others around the codebase. These need to be in one place, play-ui work needs updating, then design need to decide what error style they want.

Documentation

Examples found at the top of JavaScript files place into their own README.md and link from main README.

Coverage needed

• AutoComplete
• Toggle
• Control
• Form Validation (Generic)
• Visibility
• Masker

It would be nice to create browser vendor prefixes automatically from autoprefixer.
I've generated the browserlist from these sources-
https://github.com/ai/browserslist
https://www.gov.uk/service-manual/user-centred-design/browsers-and-devices

Firefox ESR, last 1 Opera versions, last 1 Chrome versions, Explorer >= 7, Safari >= 7, ios_saf >= 5, and_chr >= 4.0, ie_mob >= 10, bb >= 7.1

We need to have a look at vertical rhythm and $baseline variables on type elements such as the p tag so we can have a much more "drop in" feel to writing html and adding css selectors.

For instance writing a .form-hint using a paragraph element gives a margin that looks incorrect and you end up having to use a .flush helper or change the markup to override.

Needs design input.

Using an auto-generated modernizr build tool, the stylesheets are scraped for class names matching modernizr classes.

.flash is used for detecting Flash so when the page loads we end up targeting both <html> as well as any notifications on the page.

Please apply the apache 2.0 license to this repo

...to keep things tidy.

https://github.com/sasstools/sass-lint

I found every time I visited the component library I missed the side navigation. Could this be more prominent as it is the focal point of the library?

Problem

Sometimes a bulleted lists appear within other list items, but are not indented. See below:

Proposed Solution

1. Provide indentation as a modifier to the list component, e.g. list--indent to indent by 20 pixels.
2. Remove default margin bottom of 5 pixels for bulleted lists.

On Safari browsers, it doesn't focus out from a radio button.

The issue is related to the blur functionality:
https://github.com/hmrc/assets-frontend/blob/master/assets/javascripts/modules/registerBlockInputFields.js#L36-L38

Please check: http://www.quirksmode.org/dom/events/blurfocus.html

npm can't run package.json from within subdirectories so this repo can't currently be used as a dependancy

When the cache of downloaded versions is purged every historical version needs to be re-downloaded, taking a long time.

Perhaps an 'oldest version in production' could be recorded in a file and semantic versioning used to prevent the download of any versions prior to this.

https://github.com/hmrc/assets-frontend/blob/master/assets/javascripts/validation/form.js#L167

If the data-input-name attribute is not on the .error-notification then the javascript throws an error undefined and adds the #undefined to the url.
I previously had the data-input-name on the input rather than the error message?

@feedmypixel

There are a lot of individual uses of box-sizing: border-box across assets-frontend can these be removed and can we apply a global style for border-box along the lines of:

*, *:before, *:after {
  box-sizing: border-box;
}

in _base.scss

Write tests for

Coverage needed

• AutoComplete
• Toggle
• Control
• Form Validation (Generic) ✓
• Visibility
• Masker

Radio buttons are skipped entirely when using VoiceOver and gesturing between the elements on the page.
iOS only focuses on fields.

Example markup:

<fieldset id="earnings-per-week" class="form-group inline  ">
<legend>Do you expect to earn at least £52 a week (or £226 a month) on average?</legend>
<span class="form-hint">This can be from employment, self-employment or both.</span>
<label for="earnings-per-week-true" class=" block-label ">
        <input id="earnings-per-week-true" name="earnings-per-week" value="true" checked="" type="radio">
        Yes
</label>
<label for="earnings-per-week-false" class=" block-label ">
        <input id="earnings-per-week-false" name="earnings-per-week" value="false" type="radio">
        No
</label>
</fieldset>

As dicussed in the Frontend meetings in DDCN there could be a need for a mobile specific solution. Worth investigating.

after skype conversation re-word the mask tests

Currently it looks like the tables sass file could do with a bit more BEM love and consideration of structure.
https://github.com/hmrc/assets-frontend/blob/master/assets/scss/base/_table.scss

It would be useful to look over the tables elements and think about how this can be restructured.
By having a solid structure it could potentially help any other users submitting code in the future.

Consume from npm

• govuk_frontend_toolkit

Remove

• govuk_frontend_static
• govuk_elements

Blockquotes have no css applied to the element when used in markdown on component library.
Please add style as per markdown example below:

a "blockquote" example using the > markdown element

Having the following markup using fieldset/legends on iOS 8.0+ maeans that the legend does not get read out.

<fieldset id="earnings-per-week" class="form-group inline  ">
<legend>Do you expect to earn at least £52 a week (or £226 a month) on average?</legend>
<span class="form-hint">This can be from employment, self-employment or both.</span>
<label for="earnings-per-week-true" class=" block-label ">
        <input id="earnings-per-week-true" name="earnings-per-week" value="true" checked="" type="radio">
        Yes
</label>
<label for="earnings-per-week-false" class=" block-label ">
        <input id="earnings-per-week-false" name="earnings-per-week" value="false" type="radio">
        No
</label>
</fieldset>

http://stackoverflow.com/a/13269310
http://stackoverflow.com/questions/13943941/iphone-web-form-prev-next-skips-radio-buttons-how-to-fix

Global requirements are a PITA as they add (easily missed) steps to the install process.

Replacing nodemon with chokidar-cli in the npm scripts would avoid this issue.

https://www.npmjs.com/package/chokidar-cli

Base

• Buttons
• Colours
• Details/Summary
• Forms
• Grid
• Helpers
• Icons
• Layouts
• Links
• Lists
• Tables
• Typography

Modules

• Accordion
• Add/Remove
• App Info
• Attorney Banner
• Autocomplete
• Breadcrumbs
• Character Counter
• Code
• Dashboard
• Datatables
• Dividers
• External Markup
• Footer
• Header
• Help Contents
• Hero
• Modal Dialog
• Navigation
• Notice Banner
• Notifications
• Organisation Logo
• Page Header
• Panel
• Phase Alpha
• Phase Beta
• Reminders
• Report Error
• Service Info
• Side Navigation
• Tabs
• Tabular Data
• Template Footer
• Template Page Header
• Template Service Info
• Template Sidebar
• Toggle Button
• Toggle
• Youtube Player

There appears to be quite a few details styles specific to epaye statements.
https://github.com/hmrc/assets-frontend/blob/81040fc1fb77d0fb56a3a8b63246a761f578058f/assets/scss/modules/_epaye-statements.scss

There is also a mixin multi-line-summary-block that is being used just for epaye.
https://github.com/hmrc/assets-frontend/blob/master/assets/scss/base/_details-summary.scss

@mattpepper can these specific epaye details be aligned to the generic details or is there items there that can be made generic for all to use?

Suspected unused styles for all of this file
https://github.com/hmrc/assets-frontend/blob/master/assets/scss/pages/_risk-triage.scss

There are currently 2 places where .full-width is being declared and neither of them are particularly modular...

_unknown.scss#L54 and _layouts.scss#L24-L25

The assets aren't being served correctly for assets-frontend after version 2.2.0.
For example:
/assets/2.3.0/images/icons/crests/hmrc_crest_27px.png
Returns the correct asset however it's not found and the http response says it contains data but it does not render.

"datattype" settings param should read "dataType"

BUT...

Given that the jQuery AJAX spec states:

"dataType (default: Intelligent Guess (xml, json, script, or html))..
If none is specified, jQuery will try to infer it based on the MIME type of the response.."

And the current typo'd datattype setting is invalid, jQuery will therefore already be trying to infer the dataType, I would suggest removing this settings param rather than correcting it, as there will be extensive testing involved in correcting, as this will change the existing behaviour, whereas removing it will not.

http://parsleyjs.org/