alphagov / govuk_frontend_toolkit Goto Github PK
View Code? Open in Web Editor NEW❗️GOV.UK Frontend Toolkit is deprecated, and will only receive major bug fixes and security patches.
License: MIT License
❗️GOV.UK Frontend Toolkit is deprecated, and will only receive major bug fixes and security patches.
License: MIT License
Spotted by @alexmuller on Bank Holidays in Firefox.
The dates, which use nta-tabular numbers for alignment are too small.
font-size-adjust:0.5
is incorrectly being applied here.
cc. @robinwhittleton.
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.
Use the show-hide-content.js script with a radio button that has a period in its name attribute, for example:
Yes YesClick on the radio button that shows the content.
The content is shown.
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
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.
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
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.
Thoughts?
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;
}
Radio buttons, when activated drop down by about 10 pixels in Safari 8 and 9 on OS X. They jump back up to their original positions when the animation ends.
Test page: http://govuk-elements.herokuapp.com/form-elements/#form-radio-buttons
Just taking a look at your Analytics modules, seeing a lot of direct similarity between what you guys have built and GA's Autotrack plugins:
Alphagov:
https://github.com/alphagov/govuk_frontend_toolkit/blob/master/docs/analytics.md
Google:
https://github.com/googleanalytics/autotrack
Wondering if you already had considered this and/or what your reasons may have been for rolling your own instead of using the official lib?
The rules found at https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_conditionals.scss#L28-L34 are being repeated every time _conditionals
is used.
eg Search for -ms-viewport
in https://assets.digital.cabinet-office.gov.uk/static/govuk-template-b5d680ad6607cf5441a22a3a533e92b40b15b8f6b9708dbdfc5fc6da71949113.css
@-ms-viewport {
width: device-width;
}
@-o-viewport {
width: device-width;
}
Please could we have an additional external link icon to use with larger font sizes?
We have a design that has a rel="external"
link in 24px and it would be great to use the external link icon with it. The current image isn't big enough to look good.
https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_typography.scss#L334-400 is the relevant code.
simple misspelling but I guess fixing it constitute a breaking change :(
https://github.com/alphagov/govuk_frontend_toolkit/blob/master/images/accordian-arrow-2x.png
https://github.com/alphagov/govuk_frontend_toolkit/blob/master/images/accordian-arrow.png
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.
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.
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:
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.
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:
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.
https://github.com/alphagov/govuk_frontend_toolkit/tree/latest-release
Should happen here https://github.com/alphagov/govuk_frontend_toolkit/blob/master/jenkins.sh#L25 but seems to be broken now..
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
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
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
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 () {
Several department colours do not have sufficient contrast, and are being used for text.
Example: Defra org page
Departments with issues:
Note I think there's several issues:
contrast-safe
or text-contrast-safe
colour.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.
Currently you need to re-run the code if you add or remove radios / checkboxes from the page. It’d be simpler and easier to delegate it against body.
line 8 of _grid_layout.scss incorrectly references a placeholder
should be
@extend %contain-floats
Should the SelectionButtons setInitialState method be less restrictive on the attributes it accepts?
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.
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,
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.
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:
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
On elements checkbox examples $('#waste-type-1').click()
will toggle the checkbox state, $('label[for=waste-type-1]').click()
won’t.
Year should be 2014 now
Is it worth having two very slightly different light blues? Or just have one?
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:
1 ms
before calling the handler
functionchange
events rather than click
eventsI 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?
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.
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?
You'll have to forgive my lack of confidence with this issue, but should variables within the toolkit (e.g. https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_grid_layout.scss#L6) have the !default
flag?
If I'm including the toolkit as a git submodule, I don't want to be touching any of the source files, but I may want to override some of the values.
If so, I am happy to go through everything and create a pull request.
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?
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;
}
}
In the section on JavaScript modules, the variables container
and element
look like they are jQuery objects.
In the style guide the guidance is to use $ prefixes to denote jQuery objects. Should we update the guidance here to reflect that?
Radio button backgrounds are no longer being re-greyed on de-select in the radio button section of the GOV.UK elements guide:
Checkboxes are not effected by this issue. They are still being re-greyed on de-select.
The changes to selection-buttons.js
in this govuk_elements commit may have introduced the radio button issue. This issue has also been reported at the govuk_elements repo here: alphagov/govuk_elements#54
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?
If a radio button or checkbox has the disabled="disabled" attribute, selection-buttons.js still allows the user to tick/select and untick/unselect.
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.
It looks like Travis isn't running standard
as we need to specify a newer version of Node.
standard: Node v4 or greater is required. `standard` did not run.
Here's the build that shows standard isn't running after npm test
runs.
https://travis-ci.org/alphagov/govuk_frontend_toolkit/builds/190594518
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.
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?
As reported in LandRegistry/land-registry-elements#11 the line height around the phase tags is a bit tight at mobile sizes, so when the text wraps to a new line it butts up against the bottom of the phase tag. See screenshot for example:
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.
https://github.com/alphagov/styleguides/blob/master/js.md#modules should reflect standard
Also https://github.com/alphagov/govuk_frontend_toolkit/blob/master/docs/javascript.md#module-structure
Basically we just need to shuft some semi-colons around.
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.
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
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.
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
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. 👍
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.