govuk_frontend_toolkit - npm Package Compare versions

Comparing version 0.12.6 to 0.41.0

govuk_frontend_toolkit/README.md

@@ -8,6 +8,24 @@ # GOV.UK Frontend Toolkit
 
-If you are going to use the toolkit in a Rails project, we recommend you use the [govuk_frontend_toolkit_gem](https://github.com/alphagov/govuk_frontend_toolkit_gem) and follow the [installation instructions](https://github.com/alphagov/govuk_frontend_toolkit_gem#readme).
+### Ruby on Rails
 
-If you are not using a Rails project you can include the toolkit as a [git submodule](https://www.kernel.org/pub/software/scm/git/docs/git-submodule.html).
+We recommend you use the [govuk_frontend_toolkit_gem][toolkit_gem_github] and
+follow the [installation instructions][toolkit_gem_github_readme].
 
+[toolkit_gem_github]: https://github.com/alphagov/govuk_frontend_toolkit_gem
+[toolkit_gem_github_readme]: https://github.com/alphagov/govuk_frontend_toolkit_gem#readme
+
+### Node.js
+
+[govuk_frontend_toolkit_npm][toolkit_npm_github] is an NPM package that can be
+[installed or included in your package.json][toolkit_npm].
+
+[toolkit_npm_github]: https://github.com/alphagov/govuk_frontend_toolkit_npm
+[toolkit_npm]: https://npmjs.org/package/govuk_frontend_toolkit
+
+### Other projects
+
+You can include the toolkit as a [git submodule][].
+
+[git submodule]: https://www.kernel.org/pub/software/scm/git/docs/git-submodule.html
+
 To add the submodule to your project run the following command substituting the path to a subdirectory in your project's assets directory:
@@ -27,2 +45,9 @@
 
+## Running tests
+
+Install Node 0.8 or higher and PhantomJS.
+
+    $ npm install
+    $ npm test
+
 ## Usage
@@ -60,2 +85,3 @@
 * [`design-patterns/_buttons.scss`](#buttons)
+* [`design-patterns/_alpha-beta.scss`](#alpha-beta)
 
@@ -475,3 +501,3 @@ ### <a id="conditionals"></a>Conditionals
 
-`@mixin transition($property, $duration, $function)`
+`@mixin transition($property, $duration, $function, $delay:0s)`
 
@@ -551,3 +577,27 @@ ##### Parameters
 
+### <a id="alpha-beta"></a>Alpha/Beta
 
+Mixins for creating alpha/beta banners and tags for services on GOV.UK
+
+##### Description
+
+`@mixin phase-banner($state)`
+`@mixin phase-tag($state)`
+
+##### Parameters
+
+`$state` either `alpha` or `beta`. This will set the background colour of the element to the appropriate colour.
+
+##### Usage
+
+    .alpha-banner  {
+      @include phase-banner(alpha);
+    }
+    .beta-banner {
+      @include phase-banner(beta);
+    }
+    .beta-tag{
+      @include phase-tag(beta);
+    }
+
 ## JavaScript
@@ -560,4 +610,72 @@
 
+## Media player
+
+There is a forked version of the Nomensa video player included and custom
+GOV.UK styles to be used with it. To use it you will need to include the script
+on your page and include the styles nested under an appropriate selector. For
+example:
+
+    @import "design-patterns/media-player";
+
+    .media-player {
+      @include media-player;
+    }
+
+You will also need to create your own initalizer to target the links you want
+to turn into videoss. There are examples of how this works in the [Nomensa
+Accesible Media Player][nomensa] repository.
+
+[nomensa]: https://github.com/nomensa/Accessible-Media-Player/tree/master/example
+
+## Multivariate test framework
+
+`GOVUK.MultiVariateTest` runs split tests to display different content, layouts etc to users.
+
+It randomly assigns a user a cohort on first execution by setting a cookie, and on every execution sets a session level custom variable on Google Analytics to mark which cohort a user is in. This can be used to segment users in GA.
+
+A simple content replacement test can be done by defining a set of cohorts with content. E.g.:
+
+```javascript
+var test = new MultivariateTest({
+  el: '.car-tax-button',
+  name: 'car_tax_button_text',
+  customVarIndex: 555,
+  cohorts: {
+    pay_your_car_tax: {html: "Pay Your Car Tax"},
+    give_us_money: {html: "Give Us Money Or We Will Crush Your Car"},
+  }
+});
+```
+
+A more complex test can be done by defining callbacks for what to do
+when a user is in each cohort:
+
+```javascript
+var test = new MultivariateTest({
+  name: 'car_tax_button_text',
+  customVarIndex: 555,
+  cohorts: {
+    pay_your_car_tax: {callback: function() { ... }},
+    give_us_money: {callback: function() { ... }},
+  }
+});
+```
+
+If you have a complex test, it may be worth extending MultivariateTest with 
+your own. Callbacks can be strings which will call a method of that name
+on the current object.
+
+Takes these options:
+ - `el`: Element to run this test on (optional)
+ - `name`: The name of the text (alphanumeric and underscores)
+ - `customVarIndex`: The index of the custom variable in Google Analytics. GA only gives 50 integer slots to each account, and it is important that a unique integer is assigned to each test. Current contact for assigning a custom var slot for GOV.UK is: Ashraf Chohan <[e-mail]>
+ - `cohorts`: An object that maps cohort name to an object that defines the cohort. Name must be same format as test name. Object contains keys (both optional):
+   - `html`: HTML to fill element with when this cohort is picked.
+   - `callback`: Function to call when this cohort is chosen. If it is a string, that method on the test object is called.
+
+Full documentation on how to design multivariate tests, use the data in GA and construct hypothesis tests is on its way soon.
+
+
 ## Licence
 
 Released under the MIT Licence, a copy of which can be found in the file `LICENCE`.

package.json

 {
   "name": "govuk_frontend_toolkit",
-  "version": "0.12.6",
+  "version": "0.41.0",
   "description": "npm for govuk_frontend_toolkit",
@@ -5,0 +5,0 @@ "main": "index.js",

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

419290

increased by5.33%

Number of package files

131

increased by11.97%

Lines of code

466

increased by131.84%

Number of lines in readme file

21

increased by2000%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes