idsk_frontend_toolkit 7.4.2

data/app/assets/stylesheets/design-patterns/_alpha-beta.scss

@@ -0,0 +1,67 @@
+@import "../colours";
+@import "../typography";
+@import "../shims";
+@import "../grid_layout";
+
+// Phase banner usage:
+//
+// .phase-banner {
+//    @include phase-banner();
+// }
+
+@mixin phase-banner($state: '') {
+
+  @if $state != '' {
+    @warn 'Passing a phase to the alpha/beta banners is deprecated';
+  }
+
+  padding: 10px 0 8px;
+
+  @include media(tablet) {
+    padding-bottom: 10px;
+  }
+
+  border-bottom: 1px solid $border-colour;
+
+  p {
+    display: table;
+    margin: 0;
+    color: $banner-text-colour;
+    @include core-16;
+  }
+
+  .phase-tag {
+    @include phase-tag();
+  }
+
+  span {
+    display: table-cell;
+    vertical-align: baseline;
+  }
+}
+
+// Phase tag usage:
+//
+// Alpha or beta
+// .phase-tag {
+//    @include phase-tag;
+// }
+
+@mixin phase-tag($state: '') {
+
+  @if $state != '' {
+    @warn 'Passing a phase to the phase-tag mixin is deprecated';
+  }
+
+  @include inline-block;
+  margin: 0 8px 0 0;
+  padding: 2px 5px 0;
+
+  @include bold-16($line-height: 20 / 16);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  text-decoration: none;
+
+  color: $white;
+  background-color: $govuk-blue;
+}

data/app/assets/stylesheets/design-patterns/_breadcrumbs.scss

@@ -0,0 +1,53 @@
+@import "../colours";
+@import "../typography";
+@import "../shims";
+@import "../url-helpers";
+
+// Breadcrumbs usage:
+//
+// .breadcrumbs {
+//    @include breadcrumbs;
+// }
+
+@mixin breadcrumbs {
+
+  padding-top: 0.75em;
+  padding-bottom: 0.75em;
+
+  ol {
+    @extend %contain-floats;
+  }
+
+  li {
+    @include core-16;
+    float: left;
+
+    background-image: file-url("separator.png");
+
+    @include device-pixel-ratio() {
+      background-image: file-url("separator-2x.png");
+      background-size: 6px 11px;
+    }
+
+    background-position: 0% 50%;
+    background-repeat: no-repeat;
+
+    list-style: none;
+
+    margin-left: 0.6em;
+    margin-bottom: 0.4em;
+    padding-left: 0.9em;
+
+    &:first-child {
+      background-image: none;
+      margin-left: 0;
+      padding-left: 0;
+    }
+
+  }
+
+  a {
+    color: $text-colour;
+  }
+
+}

data/app/assets/stylesheets/design-patterns/_buttons.scss

@@ -0,0 +1,145 @@
+@import '../shims';
+@import '../css3';
+@import '../conditionals';
+@import '../colours';
+
+// Mixin and defaults for making buttons on GOV.UK services.
+
+// For guidance, see: https://www.gov.uk/service-manual/design-and-content/resources/buttons.html
+
+// Example usage:
+
+// .button{
+//   @include button;
+// }
+// .button-secondary{
+//   @include button($grey-3);
+// }
+// .button-warning{
+//   @include button($red);
+// }
+
+
+@mixin button($colour: $button-colour) {
+  // Colour
+  background-color: $colour;
+
+  // Size and shape
+  position: relative;
+  @include inline-block;
+  padding: .526315em .789473em .263157em; // 10px 15px 5px
+  border: none;
+  @include border-radius(0);
+  outline: 1px solid transparent; // keep some button appearance when changing colour settings in browsers
+  outline-offset: -1px; // fixes bug in Safari that outline width on focus is not overwritten, is reset to 0 on focus in govuk_template
+  -webkit-appearance: none;
+
+  // Bottom edge effect
+  @include box-shadow(0 2px 0 darken($colour, 15%));
+  @include ie-lte(8) {
+    border-bottom: 2px solid darken($colour, 15%);
+  }
+
+  // Text
+  font-size: 1em; // inherit from parent
+  line-height: 1.25;
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+
+  // Interaction
+  cursor: pointer;
+
+  &:visited {
+    background-color: $colour;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: darken($colour, 5%);
+  }
+
+  &:active {
+    top: 2px;
+    @include box-shadow(0 0 0 $colour);
+  }
+
+  // Disabled button styles
+  &.disabled,
+  &[disabled="disabled"],
+  &[disabled] {
+    @include opacity(0.5);
+    &:hover {
+      cursor: default;
+      background-color: $colour;
+    }
+
+    &:active {
+      top: 0;
+      @include box-shadow(0 2px 0 darken($colour, 15%));
+      @include ie-lte(8) {
+        border-bottom: 2px solid darken($colour, 15%);
+      }
+    }
+  }
+
+  // Set text colour depending on background colour
+  @if lightness($colour) < 50% {
+    color: $white;
+
+    &:link,
+    &:link:focus,
+    &:hover,
+    &:focus,
+    &:visited {
+      color: $white;
+    }
+  } @else {
+    color: $text-colour;
+
+    &:link,
+    &:link:focus,
+    &:hover,
+    &:focus,
+    &:visited {
+      color: $text-colour;
+    }
+  }
+
+  // making the click target bigger than the button
+  // (and fill the space made when the button moves)
+  &:before {
+    content: "";
+    height: 110%;
+    width: 100%;
+    display: block;
+    background: transparent;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &:active:before {
+    top: -10%;
+    height: 120%;
+
+    // IE6 ignores the :before psuedo-class but applies the block to :active
+    // It therefore needs to be reset
+    @include ie(6) {
+      top: auto;
+      height: 100%;
+    }
+  }
+
+  // Fixes a bug where IE puts a black border around certain elements
+  @include ie-lte(8) {
+    &[type="submit"],
+    &[type="reset"],
+    &[type="button"] {
+      filter: chroma(color = $black);
+    }
+
+    &[type=submit].button {
+      filter: none;
+    }
+  }
+}

data/app/assets/stylesheets/design-patterns/_media-player.scss

@@ -0,0 +1,264 @@
+@import '../colours';
+@import '../url-helpers';
+
+// Player overrides
+
+@mixin media-player {
+  display: block;
+  overflow: hidden;
+  margin: 30px 0;
+
+  &.player-wide {
+    min-width: 580px;
+  }
+
+  span {
+    display: block;
+    margin: 0;
+    padding: 0;
+  }
+
+  .video {
+    position: relative;
+    z-index: 3000;
+
+    iframe {
+      display: block;
+    }
+  }
+
+  .logo {
+    display: none;
+  }
+
+  .control-bar {
+    position: relative;
+    width: 100%;
+    height: 60px;
+    border-bottom: 1px solid $border-colour;
+
+    button {
+      background: transparent;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+    }
+
+    a,
+    button {
+      &:focus {
+        background-color: $focus-colour;
+        outline: none;
+      }
+    }
+
+    .player-controls {
+      .play,
+      .pause {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 40px;
+        height: 40px;
+        overflow: hidden;
+        text-indent: -5000%;
+        background-repeat: no-repeat;
+        background-position: center left;
+      }
+
+      .play {
+        background-image: file-url('player-icon-play.png');
+      }
+
+      .pause {
+        background-image: file-url('player-icon-pause.png');
+      }
+
+      .rewind,
+      .forward {
+        position: absolute;
+        top: 0;
+        z-index: 30;
+        height: 20px;
+        width: 40px;
+        overflow: hidden;
+        text-indent: -5000%;
+        background-repeat: no-repeat;
+        background-position: center left;
+      }
+
+      .rewind {
+        left: 0;
+        background-image: file-url('player-icon-rewind.png');
+      }
+
+      .forward {
+        left: 100%;
+        margin-left: -40px;
+        background-image: file-url('player-icon-forward.png');
+      }
+    }
+
+    .volume-controls {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      height: 40px;
+      width: 180px;
+      overflow: visible;
+
+      .mute {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        height: 40px;
+        width: 50px;
+        padding-top: 1px;
+        font-size: 14px;
+        line-height: 40px;
+        text-align: center;
+      }
+
+      .muted {
+        color: $light-blue;
+
+        ~ * {
+          opacity: 0.333;
+        }
+
+        ~ .vol-display {
+          text-decoration: line-through;
+        }
+      }
+
+      .muted::after {
+        content: "d";
+      }
+
+      .vol-down,
+      .vol-up {
+        position: absolute;
+        bottom: 0;
+        height: 40px;
+        width: 60px;
+        font-size: 24px;
+        line-height: 40px;
+        text-align: center;
+        z-index: 10;
+
+        &:hover,
+        &:focus {
+          color: $light-blue;
+          background-color: transparent;
+          outline: none;
+
+          &:before {
+            background-color: $focus-colour;
+          }
+        }
+
+        &:before {
+          content: "";
+          display: inline-block;
+          position: absolute;
+          width: 50%;
+          height: 100%;
+          z-index: -1;
+        }
+      }
+
+      .vol-down {
+        text-align: left;
+        padding-left: 10px;
+        left: 0;
+
+        &:before {
+          left: 0;
+        }
+      }
+
+      .vol-up {
+        text-align: right;
+        padding-right: 10px;
+        left: 65px;
+
+        &:before {
+          right: 0;
+        }
+      }
+
+      .vol-display {
+        position: absolute;
+        bottom: 0;
+        left: 25px;
+        height: 40px;
+        width: 0;
+        padding-left: 35px;
+        overflow: visible;
+        font-size: 14px;
+        font-weight: bold;
+        line-height: 40px;
+        background-repeat: no-repeat;
+        background-position: center left;
+        background-image: file-url('player-icon-volume.png');
+      }
+    }
+
+    .current-time {
+      position: absolute;
+      bottom: 0;
+      left: 45px;
+      height: 40px;
+      font-size: 14px;
+      line-height: 40px;
+      font-weight: bold;
+    }
+
+    .duration-time {
+      display: none;
+      position: absolute;
+      bottom: 0;
+      right: 10px;
+      height: 40px;
+      line-height: 40px;
+      font-size: 16px;
+      font-weight: bold;
+    }
+
+    .ui-slider {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 100%;
+      height: 20px;
+      overflow: hidden;
+      background: $border-colour;
+
+      .progress-bar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        padding-bottom: 1px;
+        background: $light-blue;
+      }
+
+      .ui-slider-handle {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        padding-bottom: 1px;
+        width: 20px;
+        // Allow RGBA here, it is the only colour value with alpha transparency
+        // scss-lint:disable ColorVariable
+        color: rgba(0, 0, 0, 0.5);
+        z-index: 10;
+      }
+    }
+  }
+
+  .ui-helper-hidden-accessible {
+    position: absolute;
+    left: -5000%;
+  }
+}

data/app/assets/trigger.sh

@@ -0,0 +1,24 @@
+#!/bin/bash
+
+set -e
+
+PAYLOAD='{
+"request": {
+  "branch": "master"
+}}'
+
+curl -s -X POST \
+  -H "Content-Type: application/json" \
+  -H "Accept: application/json" \
+  -H "Travis-API-Version: 3" \
+  -H "Authorization: token $TRAVIS_TOKEN" \
+  -d "$PAYLOAD" \
+  https://api.travis-ci.org/repo/alphagov%2Fgovuk_frontend_toolkit_gem/requests
+
+curl -s -X POST \
+  -H "Content-Type: application/json" \
+  -H "Accept: application/json" \
+  -H "Travis-API-Version: 3" \
+  -H "Authorization: token $TRAVIS_TOKEN" \
+  -d "$PAYLOAD" \
+  https://api.travis-ci.org/repo/alphagov%2Fgovuk_frontend_toolkit_npm/requests

data/idsk_frontend_toolkit.gemspec

@@ -0,0 +1,49 @@
+$:.push File.expand_path("../lib", __FILE__)
+
+require "idsk_frontend_toolkit/version"
+
+Gem::Specification.new do |s|
+  s.name         = "idsk_frontend_toolkit"
+  s.version      = IDSKFrontendToolkit.toolkit_version
+  s.summary      = 'Tools for building frontend applications'
+  s.authors      = ["Ernest Walzel", "Government Digital Service"]
+  s.email        = ["ernest.walzel@slovensko.digital", "govuk-dev@digital.cabinet-office.gov.uk"]
+  s.homepage     = 'https://github.com/id-sk/idsk_frontend_toolkit'
+  s.license      = 'MIT'
+
+  s.add_dependency "railties", ">= 3.1.0"
+
+  s.add_dependency "sass", ">= 3.2.0"
+  s.add_development_dependency "rake", "0.9.2.2"
+
+  s.require_paths = ["lib", "app"]
+  s.files         = `git ls-files`.split($\)
+
+  # We need to include the files from the submodules, example from:
+  # http://somethingaboutcode.wordpress.com/2012/09/27/include-files-from-git-submodules-when-building-a-ruby-gem/
+
+  gemroot_path = `pwd`.strip
+  # get an array of submodule dirs by executing 'pwd' inside each submodule
+  `git submodule --quiet foreach pwd`.split($\).each do |submodule_path|
+    # for each submodule, change working directory to that submodule
+    Dir.chdir(submodule_path) do
+
+      # issue git ls-files in submodule's directory
+      submodule_files = `git ls-files`.split($\)
+
+      # prepend the submodule path to create absolute file paths
+      submodule_files_fullpaths = submodule_files.map do |filename|
+        "#{submodule_path}/#{filename}"
+      end
+
+      # remove leading path parts to get paths relative to the gem's root dir
+      # (this assumes, that the gemspec resides in the gem's root dir)
+      submodule_files_paths = submodule_files_fullpaths.map do |filename|
+        filename.gsub "#{gemroot_path}/", ""
+      end
+
+      # add relative paths to gem.files
+      s.files += submodule_files_paths
+    end
+  end
+end

data/lib/idsk_frontend_toolkit/engine.rb

@@ -0,0 +1,4 @@
+module IDSKFrontendToolkit
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/idsk_frontend_toolkit/version.rb

@@ -0,0 +1,5 @@
+module IDSKFrontendToolkit
+  def self.toolkit_version
+    File.read(File.expand_path('../../app/assets/VERSION.txt', File.dirname(__FILE__)))
+  end
+end

data/lib/idsk_frontend_toolkit.rb

@@ -0,0 +1,4 @@
+module IDSKFrontendToolkit
+  require 'idsk_frontend_toolkit/engine'
+  autoload 'Version', 'idsk_frontend_toolkit/version'
+end

data/publish.sh

@@ -0,0 +1,30 @@
+#!/bin/sh
+set -e
+
+# Checkout master as we are currently have an individual commit checked out on
+# a detached tree. This means when we commit later it will be on a branch
+git checkout master
+git reset --hard origin/master
+
+# Init the submodule and checkout the revision pinned in `.gitmodules`
+git submodule update --init
+
+# The version of the toolkit defined by the pinned submodule
+PINNED_SUBMODULE_VERSION=`cat app/assets/VERSION.txt`
+
+# Force the submodule to pull the latest and checkout origin/master
+git submodule foreach git pull origin master
+
+# The version of the toolkit defined in the submodules master branch
+NEW_SUBMODULE_VERSION=`cat app/assets/VERSION.txt`
+
+# Install gem dependencies and run tests
+bundle install
+bundle exec rake
+
+# If the submodule has a new version string
+if [ "$PINNED_SUBMODULE_VERSION" != "$NEW_SUBMODULE_VERSION" ]; then
+  # Commit the updated submodule and push it to origin
+  git commit -am "Bump to version $NEW_SUBMODULE_VERSION"
+  git push origin_ssh master
+fi