hmrc / assets-frontend Goto Github PK

Deprecated static assets for frontends on MDTP.

License: Apache License 2.0

HTML 10.13% JavaScript 37.69% CSS 7.23% Shell 0.05% SCSS 44.07% Handlebars 0.83%

assets-frontend's Introduction

Deprecation

🚨 Assets Frontend has been deprecated in favour of the Play Frontend. 🚨

If you do decide to use Assets Frontend anyway you need to be aware of the vulnerabilities including but not limited to the ones listed here ]https://github.com/hmrc/assets-frontend/security/dependabot](https://github.com/hmrc/assets-frontend/security/dependabot). There are also known accessibility issues when using Assets Frontend which will cause delays with going live. As of 13th October 2021, we won't be making updates to Assets Frontend so we recommend moving over to the latest Play Frontend Libraries

assets-frontend

This repository contains the source files and documentation for the Components & Design Patterns used to design and build digital services for the HMRC Tax Platform.

It provides additional styles on top of the GOV.UK styles.

Quick Start

Requirements

Node.js == 4.8.4
npm >= 2.11.3

To install multiple versions of Node.js, you may find it easier to use a node version manager:

Installation

Clone this repository and install its dependencies:

$ git clone https://github.com/hmrc/assets-frontend.git
$ cd assets-frontend
$ npm install

Running

The Component Library microsite

Clone the repo locally: git clone https://github.com/hmrc/assets-frontend.git
In your file system, navigate to the assets-frontend directory: cd assets-frontend
Checkout the gh-pages branch: git checkout gh-pages
In your file system, navigate one directory level above the assets-frontend folder: cd ../
Start a local server for serving the pages: python3 -m http.server --cgi 8888
In the browser, navigate to to http://localhost:8888/assets-frontend

The Design System:

Run npm start
The Design System is available at http://localhost:9034/
Latest V4 Assets are then available at http://localhost:9032/assets/v4-SNAPSHOT/...
Latest V3 Assets are then available at http://localhost:9032/assets/v3-SNAPSHOT/...

To access both the Design System and the Component Library [DEPRECATED]

Run npm run dev:all or ./server.sh dev
The Design System is available at http://localhost:9034/
The Component Library is available at http://localhost:9033/

To run a specific version of Assets Frontend locally

Run ./server.sh
V4 Assets are then available at http://localhost:9032/assets/4.11.0/...
V3 Assets are then available at http://localhost:9032/assets/3.11.0/...

Usage

Using assets locally

Prototypes

For now, the quickest and simplest way to add assets-frontend to your prototype is to grab the built CSS and JS from production.

Just replace <VERSION> in the links below with the released version you want to use (we recommend using the latest).

If your prototype is based on the GOV.UK prototype kit then do the following:

CSS

Save the file found at https://www.tax.service.gov.uk/assets/<VERSION>/stylesheets/application.min.css to /app/assets/sass/assets-frontend.css.

And add the following to app/views/includes/head.html:

<link href="/public/stylesheets/assets-frontend.css" rel="stylesheet" type="text/css" />

JavaScript

Save the file found at https://www.tax.service.gov.uk/assets/<VERSION>/javascripts/application.min.js to /app/assets/javascripts/assets-frontend.js

And add the following to app/views/includes/head.html

<script src="/public/javascripts/assets-frontend.js"></script>

Frontends

If your frontend is based on init-service, then you just need to make sure the configuration for assets in the application.conf file has the line version = ${?ASSETS_FRONTEND_VERSION} after declaring the actual version.

Once it has, you just need to set an environment variable before running your frontend:

$ ASSETS_FRONTEND_VERSION=999-SNAPSHOT sbt run

If you’re using service-manager, please read the service manager guidance in the Wiki.

Using assets in production

Running npm run release calls the release gulp task and this happens on our internal Jenkins instances.

The final step of our internal release pipeline is to version and deploy the compiled assets to https://www.tax.service.gov.uk/assets/.

Releasing assets for use in production is currently a process owned by the Service Design Tools team.

If you’d like a new version of assets-frontend released, please get in touch with us in the #team-sdt Slack channel.

HMRC Design System

The HMRC Design System can be viewed here.

For detailed information on how the HMRC Design System works, please read the Design System page in the Wiki.

Component Library - [DEPRECATED]

🚨 The Component Library has been deprecated in favour of the HMRC Design System.🚨

If your service relies on a component or pattern that doesn’t appear in the HMRC Design System then please follow the Design System contribution guidelines.

For detailed information on how the Component Library works, please read the Component Library guidance in the Wiki.

Contributing

Design Patterns

For details on how to contribute Design Patterns, please take a few minutes to review our Design Pattern standards and contribution process before you submit your request, otherwise it may be rejected.

Features and issues

If you’ve spotted an issue or thought of a feature that you’d like to contribute to assets-frontend, please take a few minutes to review our contribution process and guidelines for Assets Frontend before you submit your request, otherwise it may be rejected.

License

This code is open source software licensed under the Apache 2.0 License.

assets-frontend's People

Contributors

Stargazers

Watchers

assets-frontend's Issues

Upgrade jasmine to 2.X+

Move package.json to root

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

Merge _page-header.scss and _template-page-header.scss

Can these files be merged?

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

Swap out hard coded nino validation for html pattern attribute

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)

Use of border-box across assets-frontend could be in just one place

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

iOS 8.0 + VoiceOver does not read out legends

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

Design Request: Underline Clickable Text Of Expand/Collapse Component

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.

Vertical rhythm and $baseline variable

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.

Refactoring tables to be more BEM

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.

Replace global nodemon with local chokidar-cli

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

Document modules for component library

Base

Modules

Rename .flash selector to avoid modernizr conflicts

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.

iOS 8.0+ VoiceOver accessibility radio buttons

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.

Radio button focus out problem in Safari browsers

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

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

Write Tests for components

Write tests for

Coverage needed

AutoComplete
Toggle
Control
Form Validation (Generic) ✓
Visibility
Masker

HMRC logo is incorrect size on browsers that don't support background-size

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

Add license

Please apply the apache 2.0 license to this repo

Clientside form validation throws undefined when data-input-name is not on markup.

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

Update "Running locally" section of README

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

Rewrite mask tests to make more sense

after skype conversation re-word the mask tests

Consolidate full-width styles

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

Refactor detail and summary styles in page-specific stylesheet

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?

Enable markdown blockquotes

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

Put examples into documentation

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

Yes, github integration

😄

Make component library build optional

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

Design Request: Align Descriptive Text Below Expandable Section

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.

Component library navigation needs to be more prominent

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?

Multiple *toggle JavaScript implementations

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

iOS 8.0 + VoiceOver cannot pass skip to content link

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:

Expand on descriptions for form components

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

Multiple error styles around the codebase

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.

Remove embedded dependancies

Consume from npm

govuk_frontend_toolkit

Remove

govuk_frontend_static
govuk_elements

Bug: assets are not serving correctly past 2.2.0

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.

Migrate input classes to BEM

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.

Add a handlebars helper for Experimental section

Please add a handlebars helper for Experimental: section, to

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

marriage_allowance_rings.png

missing modernizr.js on build

The build does not appear to include modernizr.js

Prevent defunct assets versions being downloaded by smserver

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.

Duplication of margin and padding helpers

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

No grid column % width fallbacks for browsers that don't support media queries.

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%;
  }

}

BEM class needs applying

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.

Add sass linting

...to keep things tidy.

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

Typo in assets/javascripts/modules/reportAProblem.js

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

Replace jQuery validate plugin with parsley.js?

http://parsleyjs.org/

Enable debugging flag on Karma tests

Enable easy debugging on karma tests

Design Request: Indent Lists Within Lists

Problem

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

Proposed Solution

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

hmrc / assets-frontend Goto Github PK

assets-frontend's Introduction

Deprecation

assets-frontend

Quick Start

Requirements

Installation

Running

The Component Library microsite

The Design System:

To access both the Design System and the Component Library [DEPRECATED]

To run a specific version of Assets Frontend locally

Usage

Using assets locally

Prototypes

Frontends

Using assets in production

HMRC Design System

Component Library - [DEPRECATED]

Contributing

Design Patterns

Features and issues

License

assets-frontend's People

Contributors

Stargazers

Watchers

Forkers

assets-frontend's Issues

Problem

Proposed Solution

Base

Modules

Write tests for

Coverage needed

Documentation

Coverage needed

Problem

Proposed Solution

"datattype" settings param should read "dataType"

BUT...

Problem

Proposed Solution

Recommend Projects

Recommend Topics

Recommend Org