Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: alphagov/govuk_publishing_components
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v20.5.0
Choose a base ref
...
head repository: alphagov/govuk_publishing_components
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: v20.5.1
Choose a head ref
  • 12 commits
  • 14 files changed
  • 3 contributors

Commits on Sep 12, 2019

  1. Copy the full SHA
    11926c0 View commit details
  2. Copy the full SHA
    a24a53c View commit details
  3. Fix FilterComponents spec

    This test is leaving an orphan form element with data-module attached to it which is affecting the modules.js test.
    alex-ju committed Sep 12, 2019
    Copy the full SHA
    718ade3 View commit details
  4. Copy the full SHA
    3a3e7e0 View commit details
  5. Copy the full SHA
    e6cfea7 View commit details
  6. Copy the full SHA
    fe5d2d0 View commit details
  7. Merge pull request #1110 from alphagov/remove-govuk-frontend-toolkit

    Remove dependency on GOV.UK Frontend Toolkit 🎉
    alex-ju authored Sep 12, 2019
    Copy the full SHA
    f6a9f48 View commit details
  8. Fix IE specific CSS

    We adjusted the layout for the chevron banner, but forgot to adjust the IE-specific CSS to match.
    Vanita Barrett committed Sep 12, 2019
    Copy the full SHA
    c914de5 View commit details
  9. Add to Changelog

    Vanita Barrett committed Sep 12, 2019
    Copy the full SHA
    96da644 View commit details

Commits on Sep 13, 2019

  1. Merge pull request #1116 from alphagov/fix-ie-specific-css

    Fix IE specific CSS
    Vanita Barrett authored Sep 13, 2019
    Copy the full SHA
    a947b70 View commit details
  2. Version 20.5.1

    Vanita Barrett committed Sep 13, 2019
    Copy the full SHA
    47a5820 View commit details
  3. Merge pull request #1117 from alphagov/version-20.5.1

    Version 20.5.1
    Vanita Barrett authored Sep 13, 2019
    Copy the full SHA
    f3cc183 View commit details
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -7,6 +7,10 @@
useful summary for people upgrading their application, not a replication
of the commit log.

## 20.5.1

* Fix IE-specific CSS for chevron banner ([PR #1116](https://github.com/alphagov/govuk_publishing_components/pull/1116))

## 20.5.0

* Add font-size option to contents list component ([PR #1112](https://github.com/alphagov/govuk_publishing_components/pull/1112))
10 changes: 1 addition & 9 deletions Gemfile.lock
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
PATH
remote: .
specs:
govuk_publishing_components (20.5.0)
govuk_publishing_components (20.5.1)
gds-api-adapters
govuk_app_config
govuk_frontend_toolkit
kramdown
plek
rails (>= 5.0.0.1)
@@ -105,9 +104,6 @@ GEM
sentry-raven (>= 2.7.1, < 2.12.0)
statsd-ruby (~> 1.4.0)
unicorn (>= 5.4, < 5.6)
govuk_frontend_toolkit (9.0.0)
railties (>= 3.1.0)
sass (>= 3.2.0)
govuk_schemas (3.2.0)
json-schema (~> 2.8.0)
govuk_test (1.0.0)
@@ -321,9 +317,5 @@ DEPENDENCIES
webmock (~> 3.6.0)
yard

RUBY VERSION
ruby 2.6.3p62


BUNDLED WITH
1.17.3
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@
// This adds in javascript that initialises components and dependencies
// that are provided by Slimmer in public frontend applications.
// = require jquery/dist/jquery
// = require govuk/modules
// = require ./modules.js

$(document).ready(function () {
'use strict'
61 changes: 61 additions & 0 deletions app/assets/javascripts/govuk_publishing_components/modules.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
;(function (global) {
'use strict'

var $ = global.jQuery
var GOVUK = global.GOVUK || {}
GOVUK.Modules = GOVUK.Modules || {}

GOVUK.modules = {
find: function (container) {
container = container || $('body')

var modules
var moduleSelector = '[data-module]'

modules = container.find(moduleSelector)

// Container could be a module too
if (container.is(moduleSelector)) {
modules = modules.add(container)
}

return modules
},

start: function (container) {
var modules = this.find(container)

for (var i = 0, l = modules.length; i < l; i++) {
var module
var element = $(modules[i])
var type = camelCaseAndCapitalise(element.data('module'))
var started = element.data('module-started')

if (typeof GOVUK.Modules[type] === 'function' && !started) {
module = new GOVUK.Modules[type]()
module.start(element)
element.data('module-started', true)
}
}

// eg selectable-table to SelectableTable
function camelCaseAndCapitalise (string) {
return capitaliseFirstLetter(camelCase(string))
}

// http://stackoverflow.com/questions/6660977/convert-hyphens-to-camel-case-camelcase
function camelCase (string) {
return string.replace(/-([a-z])/g, function (g) {
return g.charAt(1).toUpperCase()
})
}

// http://stackoverflow.com/questions/1026069/capitalize-the-first-letter-of-string-in-javascript
function capitaliseFirstLetter (string) {
return string.charAt(0).toUpperCase() + string.slice(1)
}
}
}

global.GOVUK = GOVUK
})(window)
Original file line number Diff line number Diff line change
@@ -98,8 +98,20 @@ $yellow: #ffdd00;
}

// Target IE 9-11
@media screen and (min-width: 0\0) {
background-position: -8px center;
@media screen and (min-width: 0\0) and (min-width: 320px) and (max-width: 364px) {
background-position: -15px center;
}

@media screen and (min-width: 0\0) and (min-width: 365px) and (max-width: 640px) {
background-position: -28px center;
}

@media screen and (min-width: 0\0) and (min-width: 641px) and (max-width: 769px) {
background-position: -20px center;
}

@media screen and (min-width: 0\0) and (min-width: 770px) {
background-position: -14px center;
}
}

1 change: 1 addition & 0 deletions config/initializers/assets.rb
Original file line number Diff line number Diff line change
@@ -7,6 +7,7 @@
component_guide/filter-components.js
component_guide/visual-regression.js
govuk_publishing_components/all_components.js
govuk_publishing_components/modules.js
govuk_publishing_components/vendor/modernizr.js
govuk_publishing_components/component_guide.css
govuk_publishing_components/favicon-development.png
2 changes: 1 addition & 1 deletion docs/component_conventions.md
Original file line number Diff line number Diff line change
@@ -250,7 +250,7 @@ SVGs can also be used for images, ideally inline in templates and compressed.
Follow the [GOV.UK Frontend JS conventions](https://github.com/alphagov/govuk-frontend/blob/master/docs/contributing/coding-standards/js.md).
Scripts should use the [module pattern provided by govuk_frontend_toolkit](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/docs/javascript.md#modules) and be linted using [StandardJS](https://standardjs.com/).
Scripts should use the [module pattern](https://github.com/alphagov/govuk_publishing_components/blob/master/docs/javascript-modules.md) and be linted using [StandardJS](https://standardjs.com/).
Most components should have an option to include arbitrary data attributes (see the [checkboxes component](https://components.publishing.service.gov.uk/component-guide/checkboxes/checkboxes_with_data_attributes) for example). These can be used for many purposes including tracking (see the [select component](https://components.publishing.service.gov.uk/component-guide/select/with_tracking) for [example code](https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/javascripts/govuk_publishing_components/components/select.js)) but specific tracking should only be added to a component where there is a real need for it.
109 changes: 109 additions & 0 deletions docs/javascript-modules.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
## JavaScript Modules

GOV.UK Publishing Components inherits a module pattern that makes it easy to write re-usable modular components, without having to worry about where and when the module should be instantiated.

### Usage

Javascript modules can be specified in markup using `data-` attributes:

```html
<div data-module="some-module">
<strong>Some other markup inside the module</strong>
</div>
```

Modules can be found and started by including `govuk/modules.js` and running:

```javascript
$(document).ready(function(){
GOVUK.modules.start()
});
```

This will attempt to find and start all modules in the page. For the example above it will look for a module at `GOVUK.Modules.SomeModule`. Note the value of the data attribute has been converted to _PascalCase_.

The module will be instantiated and then its `start` method called. The HTML element with the `data-module` attribute is passed as the first argument to the module. This limits modules to acting only within their containing elements.

```javascript
module = new GOVUK.Modules[type]()
module.start(element)
```

Running `GOVUK.modules.start()` multiple times will have no additional affect. When a module is started a flag is set on the element using the data attribute `module-started`. `data-module-started` is a reserved attribute. It can however be called with an element as the first argument, to allow modules to be started in dynamically loaded content:

```javascript
var $container = $('.dynamic-content')
GOVUK.modules.start($container)
```

### Module structure

A module must add its constructor to `GOVUK.Modules` and it must have a `start` method.
The simplest module looks like:

```javascript
(function(Modules) {
'use strict'

function SomeModule () {}
SomeModule.prototype.start = function($element) {
// module code
}
Modules.SomeModule = SomeModule
})(window.GOVUK.Modules)
```

### Writing modules

Whilst this isn’t prescriptive, it helps if modules look and behave in a similar manner.

#### Use `js-` prefixed classes for interaction hooks

Make it clear where a javascript module will be applying behaviour:

```html
<div data-module="toggle-thing">
<a href="/" class="js-toggle">Toggle</a>
<div class="js-toggle-target">Target</div>
</div>
```

#### Declare event listeners at the start

Beginning with a set of event listeners clearly indicates the module’s intentions.

```js
SomeModule.prototype.start = function($element) {
$element.on('click', '.js-toggle', toggle)
$element.on('click', '.js-cancel', cancel)
}
```

Where possible, assign listeners to the module element to minimise the number of listeners and to allow for flexible markup:

```html
<div data-module="toggle-thing">
<a href="/" class="js-toggle">This toggles</a>
<div class="js-toggle-target">
<p>Some content</p>
<a href="/" class="js-toggle">This also toggles</a>
</div>
</div>
```

#### Use data-attributes for configuration

Keep modules flexible by moving configuration to data attributes on the module’s element:

```html
<div
data-module="html-stream"
data-url="/some/endpoint"
data-refresh-ms="5000">
<!-- updates with content from end point -->
</div>
```

#### Include Jasmine specs

Modules should have their own tests, whether they’re being included with the GOV.UK Publishing Components or are app specific.
1 change: 0 additions & 1 deletion govuk_publishing_components.gemspec
Original file line number Diff line number Diff line change
@@ -18,7 +18,6 @@ Gem::Specification.new do |s|

s.add_dependency "gds-api-adapters"
s.add_dependency "govuk_app_config"
s.add_dependency "govuk_frontend_toolkit"
s.add_dependency "kramdown"
s.add_dependency "plek"
s.add_dependency "rails", ">= 5.0.0.1"
1 change: 0 additions & 1 deletion lib/govuk_publishing_components/engine.rb
Original file line number Diff line number Diff line change
@@ -4,7 +4,6 @@
module GovukPublishingComponents
class Engine < ::Rails::Engine
isolate_namespace GovukPublishingComponents
require 'govuk_frontend_toolkit'
require 'kramdown'
end
end
2 changes: 1 addition & 1 deletion lib/govuk_publishing_components/version.rb
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
module GovukPublishingComponents
VERSION = '20.5.0'.freeze
VERSION = '20.5.1'.freeze
end
Original file line number Diff line number Diff line change
@@ -8,6 +8,11 @@ function addFormInput() {
document.body.appendChild(form);
};

function removeFormInput() {
form = document.querySelector('form')
document.body.removeChild(form)
}

function addComponents() {
var list = document.createElement('ul');
list.classList.add("component-list");
@@ -44,6 +49,10 @@ describe('FilterComponents', function() {
addComponents();
});

afterAll(function() {
removeFormInput();
})

it('hides all components that do not match search criteria', function() {
FilterComponents("Accordion");

Loading