Git Product home page Git Product logo

govuk_frontend_toolkit's Introduction

The GOV.UK Design System launched on 22 June 2018

GOV.UK Frontend Toolkit:

This framework will remain available in case you’re currently using it. To help your service meet accessibility requirements, you should use the GOV.UK Design System. You can migrate to the Design System from GOV.UK Frontend Toolkit.

GOV.UK frontend toolkit

A collection of Sass and JavaScript files for using as part of your application's frontend.

This project is not tied to a specific language and is designed to be used as a dependency in as many different languages as needed.

There's a Gemfile and a package.json in this directory, but they are only for running tests and are not an indication that this project prefers Ruby or Node.js.

Installing

Ruby on Rails

We recommend you use the govuk_frontend_toolkit_gem and follow the installation instructions.

Node.js

govuk_frontend_toolkit_npm is an NPM package that can be installed or included in your package.json.

If you are using a build tool that depends on Libsass then you may need to upgrade to a more recent version to use the grid helpers. Minimal compatible versions include node-sass 1.0.0, grunt-sass 0.16.0, gulp-sass 1.2.0 and libsass 3.0.0.

Django

Requirement: NodeJS installed. This gives you Node Package Manager(NPM) which is required to install npm packages.

The easiest way to integrate it would be to create a package.json file in your application with npm init

You then install the toolkit with npm install --save govuk_frontend_toolkit. If you need javascript files, they will live in (node_modules/govuk_frontend_toolkit/javascripts). If you need stylesheets they will live in (node_modules/govuk_frontend_toolkit/stylesheets).

With Django you can use https://github.com/jrief/django-sass-processor to compile Sass files.

Note: if you need complete styles you might want to install govuk-elements-sass package that also installs toolkit

Other projects

Using the tagged versions

Each version of the toolkit is tagged with the version number in this format:

v*version number*, for example v4.1.1 for version 4.1.1.

If your dependency management tool allows the use of Git repositories as dependencies, you can point to a version by using its tag.

For example, if you are using bower, you can add the toolkit to your bower.json like so:

"govuk_frontend_toolkit": "git://github.com/alphagov/govuk_frontend_toolkit#v4.1.1" (assuming you want version 4.1.1)

Using git submodules

You can include the toolkit as a git submodule.

To add the submodule to your project run the following command substituting the path to a subdirectory in your project's assets directory:

$ git submodule add https://github.com/alphagov/govuk_frontend_toolkit.git ./path/to/assets/govuk_frontend_toolkit

We recommend you use https rather than ssh for submodules as they don't require key exchanges when deploying to remote servers.

If you clone a project with the toolkit submodule installed you will need to initialise the submodule with the following command:

$ git submodule init

To update the toolkit to the latest version you can use:

$ git submodule update

Running tests

Tests for this project use Jasmine for the JavaScript and Ruby's scss and scss-lint to check the stylesheets.

The requirements are Node.js 0.8 or higher and PhantomJS, and Ruby:

bundle install
npm install
npm test

Standard JavaScript

govuk_frontend_toolkit uses standardjs, an opinionated JavaScript linter. All JavaScript files follow its conventions. Read more

Using the local test runner

The test suite can be run by opening the ./spec/support/LocalTestRunner.html file in a browser for a more detailed trace of errors.

The files for unit tests and any supporting JavaScript should be added to ./spec/manifest.js file.

Usage

At the top of a Sass file in your project you should use an @import rule to include the file for the mixins you require, eg if you want the conditionals and typography mixins you should add:

@import '_conditionals';
@import '_typography';

You may need to include the relative path to the toolkit if it is installed as a submodule:

@import '../toolkit/_conditionals';

If you are compiling Sass from the command-line tool, here are some options we recommend.

In development:

sass --style expanded --line-numbers --load-path [path to]/govuk_frontend_toolkit/stylesheets input.scss output.css

In production:

sass --style compressed --load-path [path to]/govuk_frontend_toolkit/stylesheets input.scss output.css

Documentation

Licence

Released under the MIT Licence, a copy of which can be found in the file LICENCE.

govuk_frontend_toolkit's People

Contributors

36degrees avatar alecgibson avatar alex-ju avatar alexmuller avatar alextea avatar andysellick avatar barrucadu avatar benilovj avatar bfirsh avatar binaryberry avatar boffbowsh avatar bradwright avatar colinrotherham avatar dsingleton avatar edds avatar elenatanasoiu avatar fofr avatar futurefabric avatar gemmaleigh avatar h-lame avatar jabley avatar jonnywyatt avatar kevindew avatar m-green avatar nickcolley avatar quis avatar robinwhittleton avatar steventux avatar timpaul avatar tombye avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

govuk_frontend_toolkit's Issues

Department colours are not always accessible

Several department colours do not have sufficient contrast, and are being used for text.

Example: Defra org page

Departments with issues:

  • DEFRA
  • HMRC
  • Any child orgs that inherit Defra or HMRC colours.

Note I think there's several issues:

  • All departments should have a contrast-safe or text-contrast-safe colour.
  • All departments should use these colours for text.
  • We currently have web-safe colour variants to mean contrast safe, but this does not communicate the purpose of the variant, and has led to some being deleted - such as #249. Web-safe means something different.

Update:
The issue with web-safe is that it has a specific meaning. It's also been used to refer to a hex version of another named colour. Such as when an org has a Pantone colour as their brand colour, and a 'web version' for internet use.

For our use, all the hex colours can be used on the web, but only some will have suitable contrast for text.

We must meet WCAG 2.0 AA, which requires a contrast against the background of 4.5:1 or greater.

Test across our supported browsers

We should run our tests in the different environments that we support https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices

This should not replace manual testing where appropriate but will catch simple issues like #323 and more complex issues in the future (if we used a ES5 feature without polyfilling for example)

I was thinking we could use sauce labs' free open source tier.

I'm looking into this but raising encase I don't have the time. 👍

Mixing of semi-colon styles can cause errors

The Show/Hide content module was written with the standardJS style of semicolon use. All our other GOVUK modules use the JSLint style and combining the two can cause errors.

For example, if you have the Show/Hide content module followed by the Stick-at-top-when-scrolling module, you get this:

End of Show/Hide content module:

  GOVUK.ShowHideContent = ShowHideContent
  global.GOVUK = GOVUK
})(window)

Start of Stick-at-top-when-scrolling module:

(function (global) {
  "use strict";

...which causes this error:

Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value)(...) is not a function

I think the parser is seeing only line breaks between })(window) and (function (global) { so assumes you mean:

(function () { ... })(window)(function (global) { ... })

(function () { ... })(window) doesn't return a function so it breaks.

We've solved this on Digital Marketplace by adding a semicolon after the Show/Hide content module block but having a project-specific fix for this isn't ideal.

Proposal: listen for change events rather than click events in show-hide-content.js

This is a bit odd because this problem doesn't exist right now in the show-hide-content.js code, but it seems like a gotcha just waiting to trip up anyone thinking of extending it (for example, it happened to me).

Inside the click event for a radio, the clicked radio element will give back different values of .checked depending on whether it has been clicked in a browser or a .click() event.

-> If it has been clicked in a browser, this.checked returns true
-> If it has been clicked using .click(), this.checked returns false

I've done up a little demo on jsfiddle.

It seems like checkboxes used to behave the same way, until a few years ago when this behaviour was changed (here's the jQuery bug report).

Additionally, it looks like the latest version of jQuery (version 3.2.0) doesn't do this anymore (here's the commit).

I think we can call this a bug.

We're not checking if radios are checked anywhere inside the code, although we are for checkboxes. Seems like it might be a problem we run into in the future.

There are different ways to fix this -- these are a few that occurred to me:

  • we can set a timeout of 1 ms before calling the handler function
  • we can try to differentiate between a mouse click and a browser click
  • we can listen to change events rather than click events

I ran into this problem on the digitalmarketplace frontend toolkit (where we need to know the checked state of a radio button) and I went with listening for change events because it seemed the most lightweight change and I couldn't think of a situation where we would get the wrong behaviour. We don't get events anymore for multiple clicks on already-checked radios but I can't think of a situation where we would care about that.

What do we think?

Bug or potential issue - show-hide-content.js

Hi,

Following up from a discussion with @dsingleton on XGOV Slack. I noticed a slight issue with the show-hide-content.js code.

If you examine line 83 you will see there is an assumption that the 'Conditionally revealing content' pattern will existing within a form element.

As I was quickly hacking together a prototype within the the govuk prototyping kit, I hadn't wrapped the markup in a form element and it broke silently (no errors or console warnings). It's an edge case but as there is now a firm movement toward modular builds of components this could bite people.

Simple short term suggestion, check for existence of a form element, else console log a developer friendly message.

Longer term, assume this will be replaced by what's delivered in GOVUK Front-end?

Stick at top when scrolling/stop scrolling at footer - issues with margins and dynamically changing page lengths

I have a requirement to fix a summary panel to the right hand side of screen, and it sounded like these two functions provided in the govuk_frontend_toolkit should satisfy the requirement perfectly. However, whilst trying to integrate them into my screen I have encountered two issues, the second of which I have not been able to find a workaround.

Firstly, the height of the fixed element doesn't seem to be computed correctly if there is an element inside it with a margin that extends above the top of this fixed element. In my scenario the fixed div begins with a h3 heading which has the govuk "heading-medium" css class applied. This gives the heading a reasonably large top margin which extends above the fixed parent div. From what I can see, this causes two problems for these functions:

  • Initially when scrolling down, the containing div does not become fixed until top of the screen completely passes the margin of the h3 and enters the body of the parent div. At this point the fixed div will appear to "jump" down so that the margin is visible again. I would say that this is unwanted behaviour.
  • Secondly, this also seems to effect the "stop scrolling at footer" calculations, because I have found that in this scenario, the containing div will overflow into the footer an amount roughly equal to the height of the margin at the top. Again, undesirable behaviour.

I have found a workaround for both of these issues; by removing the top margin from the element that overflows the top of the div and adding padding to the div itself (so that the appearance is maintained). The panel then seems to behave as you would expect, thought it is a pain to have to restyle the div and the heading in this way.

The second, more important issue, is the behaviour that is exhibited when the page is dynamically resized. The page that I am trying to use this on has a lot of expandable "details-summary" elements in the main body. Expanding these makes the page longer. I have found that the height of the page is not being recalculated by the "stop scrolling at footer" function, and the panel is stopping well before it reaches the footer. Regardless of the current length of the page, I would expect the panel to reach the footer every time.

Question about site width container

Hi team - just wonder if there is away to overwrite $site-width parameter in order to make container's width wider without editing _grid_layout.scss directly? We're developing web-based application (not public facing site) so ideally want to get wider layout etc.

Also, Has anyone tried to use Bootstrap v3 with govuk elements and govuk_frontend_toolkit?

Thanks

Skip link not correctly moving focus in IE9/10/11

We've noticed that when using the "Skip to main content" link, it's not correctly moving the focus to the <main id="content" role="main"> in IE9/10/11.

This bug can also be seen when using https://www.gov.uk/vehicle-tax.

Steps to reproduce:

  1. Visit https://www.gov.uk/vehicle-tax in IE9/10/11
  2. Tab to and select the "Skip to main content" link with enter key

Expected behaviour:
Subsequent tabbing should start from the <main> content. i.e.: the next tab press should move focus to the "In Welsh" link. Works in Chrome 57, Firefox 52 and Edge 14.

Actual behaviour:
The next tab key press actually moves focus to the breadcrumb "Home" link in IE9/10/11, which is not within the <main> content area.

Setting styles for IE8> using IE Helper Conditionals

So I've created an IE8 stylesheet which is linked via a conditional comment, am I correct in setting the flags, then importing in my main stylesheet again?

$is-ie: true;
$ie-version: 8;
@import 'style';

However, this is going to request an additional download of the duplicate rule-set of the main stylesheet, with the IE specific output. This obviously isn't great for performance. Is this the intended method?

Error messages and colour blindness

While working with a follow colleague on an error message he pointed out that the current border colour looks black to him. He has a level of colour blindness, and this red/black problem was confirmed by another person with colour blindness. More research may be required, but I want to see if we could move to using the lighter red (#df3034) for errors, maybe keeping the dark red for just the text?

Firefox 25 released font smoothing

I'm not sure if anyone has seen the font rendering of NTA in mac firefox but it's not as pretty as webkit browsers.

As of firefox 25 they have released -moz-osx-font-smoothing. I've just added this mixin to our project but wondering if I should port it to the toolkit?

@mixin font-smoothing($value: on) {
    @if $value == on {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    } @else {
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: auto;
    }
}

$home-office

I'm trying to understand where the departmental brand colour variable $home-office has come from? Is this repo the canonical source for colour values?

My concern is that in colours.scss it's #9325b2. Yet on the page referenced in a comment at the top of that scss file (http://alphagov.github.io/design/gov.uk.colours/) it's #804292. And in a Home office brand guidelines document I have it has been captured as Pantone 2592C/#8f23b3.

show-hide-content throws an error for radio buttons with a period in their name attribute

Steps to reproduce

  1. Use the show-hide-content.js script with a radio button that has a period in its name attribute, for example:

    Yes Yes
    Specify a meal type
  2. Click on the radio button that shows the content.

Expected behaviour

The content is shown.

Actual behaviour

A JavaScript error is thrown:

Syntax error, unrecognized expression: [data-target] > input[type="radio"][name=choice.yesno][aria-controls]    jquery-1.11.3.js:1497

### Notes

The Scala Play framework’s form mapping feature allows form fields to be mapped to object properties, by putting periods in form field name attributes: https://www.playframework.com/documentation/2.5.x/ScalaForms#Nested-values

As such, it is common for Play web projects to have form fields with periods in their name attributes.

The HTML spec appears to allow name attributes containing periods: https://www.w3.org/TR/html5/forms.html#naming-form-controls:-the-name-attribute

Helper for department logos

Would it make sense to include a helper within this gem to render department logos consistently?

Right now, there are varying implementations across different apps - I've noticed in Frontend we're adding line breaks and spacing manually for the campaign pages, and it seems like something which could easily end up inconsistent and painful to update if we're not careful.

License missing from gemspec

RubyGems.org doesn't report a license for your gem. This is because it is not specified in the gemspec of your last release.

via e.g.

  spec.license = 'MIT'
  # or
  spec.licenses = ['MIT', 'GPL-2']

Including a license in your gemspec is an easy way for rubygems.org and other tools to check how your gem is licensed. As you can imagine, scanning your repository for a LICENSE file or parsing the README, and then attempting to identify the license or licenses is much more difficult and more error prone. So, even for projects that already specify a license, including a license in your gemspec is a good practice. See, for example, how rubygems.org uses the gemspec to display the rails gem license.

There is even a License Finder gem to help companies/individuals ensure all gems they use meet their licensing needs. This tool depends on license information being available in the gemspec. This is an important enough issue that even Bundler now generates gems with a default 'MIT' license.

I hope you'll consider specifying a license in your gemspec. If not, please just close the issue with a nice message. In either case, I'll follow up. Thanks for your time!

Appendix:

If you need help choosing a license (sorry, I haven't checked your readme or looked for a license file), GitHub has created a license picker tool. Code without a license specified defaults to 'All rights reserved'-- denying others all rights to use of the code.
Here's a list of the license names I've found and their frequencies

p.s. In case you're wondering how I found you and why I made this issue, it's because I'm collecting stats on gems (I was originally looking for download data) and decided to collect license metadata,too, and make issues for gemspecs not specifying a license as a public service :). See the previous link or my blog post about this project for more information.

Add Sass tests

After #118, it would be good to add tests to confirm that any Sass changes are good.

This would be an MVP test that it compiles.

Proposal: add a 'positive' colour.

There are cases where it's useful to have a colour with a semantic meaning of 'positive'.

We already have error_colour which is a good red for 'negative' - but we don't have a counterpart.

We could use an existing colour, or make a new colour. Either way, a semantic SASS name would be good.

The closest colour would be button_colour. An alternate would be #008800 which is the green used by petitions. It's warmer, which feels more positive to me.

screen shot 2017-02-27 at 16 55 19

Thoughts?

Tracking end-to-end test

It would be good to have a full end-to-end integration test of Google Analytics click tracking (which lives in "Static")

We currently have unit tests that cover:

  • Tracking attributes are rendered by Ruby
  • JS tracking event is fired from a tracked element

However, there's a disconnect in that nothing checks that the Ruby-rendered tracking events have the correct module name (ie Ruby renders an element, and clicking on that element fires a tracking event).

For more context, see: alphagov/static#875

external-links images not served as image-urls

The external-links mixin (_typography.scss) references the images using file-url. This results in the css looking for the images relative to the css file. Hence we got an 'external-links' folder within the css folder containing a few icons, which is very confusing and frankly bad practice. Can that be changed to image-url so that we can use the url_helper and set the path to an images folder of our choosing?

Tags are not up to date

Please could you update tags with the version history? The tag revisions are two years out of date, which gives unexpected results when requiring the code via Bower.

Compilation errors using Play Framework

Compilation errors in govuk_frontend_toolkit (24/11/2013)
Received the following compilation errors in a new Play Framework project.

'relpath' is already defined in \govuk_frontend_toolkit\Gruntfile.js:12
9 if(typeof subdir !== 'undefined'){
10 var relpath = subdir + '/' + filename;
11 } else {
->12 var relpath = filename;
13 }
14 if (filename.match(/.scss/)) {
15 allSassFiles.push("@import '" + relpath + "';");
16 }
17 }

Missing semicolon in govuk_frontend_toolkit\javascripts\govuk\primary-links.js:14
11 this.addToggleLink();
12 this.hideExtraLinks();
13 }
->14 }
15 PrimaryList.prototype = {
16 toggleText: function(){
17 if(this.$extraLinks.length > 1){
18 return '+'+ this.$extraLinks.length +' others';
19 } else {

Missing semicolon in \govuk_frontend_toolkit\javascripts\govuk\primary-links.js:24
21 }
22 },
23 addToggleLink: function(){
->24 this.$toggleLink = $(''+ this.toggleText() + '')

25 this.$toggleLink.click($.proxy(this.toggleLinks, this));
26 this.$toggleLink.insertAfter(this.$el);
27 },
28 toggleLinks: function(e){
29 e.preventDefault();

Missing semicolon in \govuk_frontend_toolkit\javascripts\govuk\primary-links.js:35
32 },
33 hideExtraLinks: function(){
34 this.$extraLinks.addClass('visuallyhidden');
->35 $(window).trigger('govuk.pageSizeChanged')

36 },
37 showExtraLinks: function(){
38 this.$extraLinks.removeClass('visuallyhidden');
39 $(window).trigger('govuk.pageSizeChanged')
40 }

Missing semicolon in \govuk_frontend_toolkit\javascripts\govuk\primary-links.js:39
36 },
37 showExtraLinks: function(){
38 this.$extraLinks.removeClass('visuallyhidden');
->39 $(window).trigger('govuk.pageSizeChanged')
40 }
41 };
42 GOVUK.PrimaryList = PrimaryList;
43
44 GOVUK.primaryLinks = {

Missing semicolon in \govuk_frontend_toolkit\javascripts\govuk\primary-links.js:50
47 new GOVUK.PrimaryList(el, selector);
48 });
49 }
->50 }
51}());

Missing semicolon in \govuk_frontend_toolkit\javascripts\govuk\selection-buttons.js:2
1(function () {
->2 "use strict"
3 var root = this,
4 $ = root.jQuery;
5
6 if (typeof GOVUK === 'undefined') { root.GOVUK = {}; }
7

Expected an assignment or function call and instead saw an expression (really means expecting semi-colon, saw comma at line 55) in \govuk_frontend_toolkit\javascripts\govuk\selection-buttons.js:58
55 radioName = $elm.attr('name'),
56 $($elm[0].form).find('input[name="' + radioName + '"]')
57 .parent('label')
58 .removeClass(this.selectedClass);

59 $elm.parent('label').addClass(this.selectedClass);
60 } else { // checkbox
61 if ($elm.is(':checked')) {
62 $elm.parent('label').addClass(this.selectedClass);
63 } else {

Missing semicolon in \govuk_frontend_toolkit\javascripts\govuk\selection-buttons.js:90
87 }.bind(this);
88 };
89 SelectionButtons.prototype.getFocusHandler = function (opts) {
->90 var focusEvent = (opts.level === 'document') ? 'focusin' : 'focus'
91
92 return function (e) {
93 var state = (e.type === focusEvent) ? 'focused' : 'blurred';
94
95 this.markFocused($(e.target), state);

Missing semicolon in \govuk_frontend_toolkit\javascripts\govuk\stick-at-top-when-scrolling.js:2
1(function () {
->2 "use strict"
3 var root = this,
4 $ = root.jQuery;
5 if(typeof root.GOVUK === 'undefined') { root.GOVUK = {}; }
6
7 // Stick elements to top of screen when you scroll past, documentation is in the README.md

Missing semicolon in \govuk_frontend_toolkit\javascripts\govuk\stick-at-top-when-scrolling.js:74
71 $el.siblings('.shim').remove();
72 }
73 }
->74 }
75 root.GOVUK.stickAtTopWhenScrolling = sticky;
76}).call(this);

Missing semicolon in \govuk_frontend_toolkit\javascripts\govuk\stop-scrolling-at-footer.js:15
12
13
14(function () {
->15 "use strict"
16 var root = this,
17 $ = root.jQuery;
18 if(typeof root.GOVUK === 'undefined') { root.GOVUK = {}; }
19
20 var stopScrollingAtFooter = {

Confusing use of '!' in \govuk_frontend_toolkit\javascripts\vendor\jquery\jquery.player.min.js:25
22* You should have received a copy of the GNU General Public License
23* along with this program. If not, see http://www.gnu.org/licenses/.
24**/
->25var swfobject=function(){var aq="undefined",aD="object",ab="Shockwave Flash",…

Bad line breaking before '?' in \govuk_frontend_toolkit\javascripts\vendor\polyfills\bind.js:30
27 fNOP = function () {},
28 fBound = function () {
29 return fToBind.apply(this instanceof fNOP && oThis
->30 ? this
31 : oThis,
32 aArgs.concat(Array.prototype.slice.call(arguments)));
33 };
34
35 fNOP.prototype = this.prototype;

Missing semicolon in \govuk_frontend_toolkit\spec\support\console-runner.js:15
12 throw "jasmine library isn't loaded!";
13 }
14
->15 var ANSI = {}
16 ANSI.color_map = {
17 "green": 32,
18 "red": 31
19 }

Missing semicolon in \govuk_frontend_toolkit\spec\support\console-runner.js:19
16 ANSI.color_map = {
17 "green": 32,
18 "red": 31
->19 }
20
21 ANSI.colorize_text = function(text, color) {
22 var color_code = this.color_map[color];
23 return "\033[" + color_code + "m" + text + "\033[0m";
24 }

Missing semicolon in \govuk_frontend_toolkit\spec\support\console-runner.js:24
21 ANSI.colorize_text = function(text, color) {
22 var color_code = this.color_map[color];
23 return "\033[" + color_code + "m" + text + "\033[0m";
->24 }
25
26 var ConsoleReporter = function() {
27 if (!console || !console.log) { throw "console isn't present!"; }
28 this.status = this.statuses.stopped;
29 };

Missing semicolon in \govuk_frontend_toolkit\spec\support\console-runner.js:81
78 var resultText = spec.suite.description + " : " + spec.description;
79 this.log(resultText, "red");
80
->81 var items = spec.results().getItems()
82 for (var i = 0; i < items.length; i++) {
83 var trace = items[i].trace.stack || items[i].trace;
84 this.log(trace, "red");
85 }
86 };

Use '!==' to compare with 'undefined' in \govuk_frontend_toolkit\spec\support\console-runner.js:97
94 };
95
96 proto.log = function(str, color) {
->97 var text = (color != undefined)? ANSI.colorize_text(str, color) : str;
98 console.log(text)
99 };
100
101 jasmine.ConsoleReporter = ConsoleReporter;
102})(jasmine, console);

Missing semicolon in \govuk_frontend_toolkit\spec\support\console-runner.js:98
95
96 proto.log = function(str, color) {
97 var text = (color !== undefined)? ANSI.colorize_text(str, color) : str;
->98 console.log(text)
99 };
100
101 jasmine.ConsoleReporter = ConsoleReporter;
102})(jasmine, console);
103

Missing semicolon in \govuk_frontend_toolkit\spec\support\load.js:2
1(function (root) {
->2 "use strict"
3 var loadedScripts = 0,
4 totalScripts,
5 merge,
6 loadScript,
7 runJasmine,

Missing semicolon in \govuk_frontend_toolkit\spec\support\load.js:42
39 return script;
40 };
41 runJasmine = function () {
->42 var console_reporter = new jasmine.ConsoleReporter()
43 jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
44 jasmine.getEnv().addReporter(console_reporter);
45 jasmine.getEnv().execute();
46 };
47 manifestScript = loadScript('../manifest.js');

Use '!==' to compare with 'null' in \govuk_frontend_toolkit\spec\support\run_jasmine_test.js:13
10
11 function PhantomJasmineRunner(page, exit_func) {
12 this.page = page;
->13 this.exit_func = exit_func != null ? exit_func : phantom.exit;
14 this.tries = 0;
15 this.max_tries = 10;
16 }
17
18 PhantomJasmineRunner.prototype.get_status = function() {

Duplicate key 'customVarIndex' in \govuk_frontend_toolkit\spec\unit\MultivariateTestSpec.js:55
52 foo: {},
53 bar: {}
54 },
->55 customVarIndex: 2
56 });
57 expect(window._gaq).toEqual([
58 [
59 '_setCustomVar',
60 2,

Missing semicolon in \govuk_frontend_toolkit\spec\unit\MultivariateTestSpec.js:119
116 },
117 runImmediately: false
118 });
->119 test.fooCallback = jasmine.createSpy('fooCallback')
120 test.run();
121 expect(test.fooCallback).toHaveBeenCalled();
122 });
123
124 it("should assign a new random cohort if the assigned cohort does not exist", function() {

Missing semicolon in \govuk_frontend_toolkit\spec\unit\MultivariateTestSpec.js:193
190 cohorts: {foo: {}, bar: {}}
191 });
192 expect(['foo', 'bar']).toContain(test.chooseRandomCohort());
->193 })
194 });
195});

Missing semicolon in \govuk_frontend_toolkit\spec\unit\SelectionButtonSpec.js:588
585 $radioButtons = $("label.selectable input[type='radio']");
586 $radioLabels = $radioButtons.parent('label');
587 $radioButtons.eq(0).focus();
->588 expect($radioLabels.eq(0).hasClass('focused')).toBe(true)
589 });
590
591 it("Should add a custom focused class to the radio if sent in as an option", function () {
592 var contentCache;
593

Missing semicolon in \govuk_frontend_toolkit\spec\unit\SelectionButtonSpec.js:601
598 $radioButtons = $("label.selectable input[type='radio']");
599 $radioLabels = $radioButtons.parent('label');
600 $radioButtons.eq(0).focus();
->601 expect($radioLabels.eq(0).hasClass('selectable-focused')).toBe(true)
602 });
603
604 it("Should remove the focused class from a radio when it loses focus", function () {
605 var contentCache;
606

Missing semicolon in \govuk_frontend_toolkit\spec\unit\SelectionButtonSpec.js:614
611 $radioButtons = $("label.selectable input[type='radio']");
612 $radioLabels = $radioButtons.parent('label');
613 $radioButtons.eq(0).focus();
->614 expect($radioLabels.eq(0).hasClass('focused')).toBe(true)
615 $radioButtons.eq(0).blur();
616 expect($radioLabels.eq(0).hasClass('focused')).toBe(false)
617 });
618 });
619 });

Missing semicolon in \govuk_frontend_toolkit\spec\unit\SelectionButtonSpec.js:616
613 $radioButtons.eq(0).focus();
614 expect($radioLabels.eq(0).hasClass('focused')).toBe(true);
615 $radioButtons.eq(0).blur();
->616 expect($radioLabels.eq(0).hasClass('focused')).toBe(false)
617 });
618 });
619 });
620
621 describe("When that selector matches checkbox inputs", function () {

External link icons not being generated

We have some image-url attributes that are used for the external link icon. I can't make these work.

I don't know enough about how Compass and Sass work together, but Compass appears to be a Ruby gem. We're using the frontend toolkit in a Node.js project.

From https://assets.performance.service.gov.uk/spotlight/stylesheets/spotlight.css:

a[rel="external"]:after {
  background-image: image-url(external-link.png);
  background-repeat: no-repeat;
  content: "\A0\A0\A0\A0\A0";
  background-position: right 3px;
}

Cleanup branches

There's a number of branches that haven't been updated for 2+ years, including a branch called latest-release, which of course does not point to the latest release.

Broken Selenium test with new radio/checkbox styles

We've spent 2 days trying to figure out why our Selenium tests suddenly stopped working when updating to the new radio/checkbox styles.

I thought I'd open this issue to potentially save others with the same problem, and hopefully discuss what the best solution is.

Previously the test looked for input elements with a specific ID in order to click them. The new styles are physically hiding the input element (with opacity) in favour of the pseudo checkbox/radio control, and this prevents the Selenium tests from being able to click them. We are currently looking at the best way to fix this without having to completely re-write our tests - if anyone has any insight it would be much appreciated.

Thanks

Visited link colour contrast is too low as per WCAG Level AA

I think the visited link colour may on occasion lack the necessary contrast to comply with WCAG Level AA guidelines. Anything 18px or above should be ok, but supporting paragraphs and smaller devices might be in violation.

$link-visited-colour: #2e8aca;

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1

Happy to create a pull request if you think appropriate, but I didn't want to mess with the branding.

Possible bug in selection-buttons.js

Hello!

We've just started using eslint, and it's flagged up a possible issue in selection-buttons.js - I think it's correct.

The reported error is that $elms https://github.com/alphagov/govuk_frontend_toolkit/blob/master/javascripts/govuk/selection-buttons.js#L9 is not used.

It's assigned a little further down https://github.com/alphagov/govuk_frontend_toolkit/blob/master/javascripts/govuk/selection-buttons.js#L19 - but then this variable is never used.

I think it should be this.$elms if I'm following correctly.

Support for single item in collapsable menu

The following was recently raised in usability testing.

On a mobile device if there is only one item in the collapsable menu, the user has to click the menu button, to reveal the one menu item. Essentially making the collapsible functionality redundant and forcing the user into additional clicks.

I was going to look at creating a pull request for this, but I'm not sure the best approach, or what the preferred appearance would be. It could just be that anyone using the template needs to be aware and create their own patch, but for consistencies sake it would be good to include it in the repo.

Desktop-first columns using the `grid-column()` mixin

If using the grid-column() mixin, I can't see a way to create desktop-first columns. Whilst the media() mixin itself seems to have this option, when creating columns directly using the grid-column() mixin there is no such option. Consequently, these columns cannot work on IE8 without using respond.js.

We have concluded that whilst we will support IE8, we have no need to provide them a responsive experience, and we are trying keep libraries/polyfills to a minimum so would like to avoid using respond.js. This means we must develop using desktop-fist principles, leaving any code in media queries to be for mobile devices only, with all desktop styles written outside of media queries.

I would be happy to submit a PR with this feature if it would get implemented.

Thanks,

GOVUK SelectionButtons setInitialState requires jQuery object instead of list of elements

Should the SelectionButtons setInitialState method be less restrictive on the attributes it accepts?

https://github.com/alphagov/govuk_frontend_toolkit/blob/master/javascripts/govuk/selection-buttons.js#L33

I was following https://github.com/alphagov/govuk_frontend_toolkit/blob/master/docs/javascript.md#selection-buttons and the usage of setInitialState when I discovered that it needed a jQuery Object instead of a selector string to loop through.

I'm happy to either update the guidance and/or propose a change to help support both jQuery and selector string but wondered what others thought about it.

Current buttons solution seems unnecessarily WET

The current solution for creating buttons doesn't seem very efficient when it comes to keeping code DRY.

I'm aware that these days with gzip compression, such duplications are of little concern for many people, but take a look at the generated CSS for just 3 GDS buttons:

http://codepen.io/esr360/pen/BLWNEq?editors=1100#0

We're talking about 260 lines of CSS, or ~5kb worth, for 3 buttons.

There are much smarter ways to go about this. Would people be interested in a pull request addressing this issue? I would be happy to put one together.

To give you an idea, the solution I'm currently using is essentially:

%action--core {
  display: inline-block;
  vertical-align: top;
  font-size: 1em;
  padding: 0.5em 0.75em;
  margin-right: 0.3em;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  -webkit-appearance: none;
  font-family: $font--primary;
  border-bottom: 2px solid;
  padding-bottom: 0.4em; // compensate for above border   
  line-height: 1.4;
  &:focus {
    outline: 3px solid $outline;
  }
  &.small {
    @extend %h6;
  }
  &.large {
    @extend %h4;
  }
}

@mixin action--core($background: $button-colour, $text-color: $white) {
  @extend %action--core;
  background-color: $background;
  color: $text-color;
  border-color: darken($background, 10%);
  &:hover {
    background-color: darken($background, 5%);
    color: $text-color;
  }
  &:active {
    color: $text-color;
  }
}

Which would be implemented like so:

.action {

  &--primary {
    @include action--core($button-colour);
  }

  &--secondary {
    @include action--core(
      $background: $grey-3, 
      $text-color: $text-colour
    );
  }

  &--delete {
    @include action--core($red);
  }

}

3 buttons now becomes just 2kb and 81 lines of code:

http://codepen.io/esr360/pen/YGkyXZ?editors=1100#0

I would be interested in everyone's thoughts on this.

Bower Support

Could you add a bower.json to the repo?

I noticed the bower package thats registered is linking to a repo that doesn't exist anymore.

cheers

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.