govuk_publishing_components 1.8.0 → 1.8.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d524eeb4db7af24131c3a967c345480f17bae8f8
-  data.tar.gz: ea47e54e89299120ba9937a4eca6b755ee62cd01
+  metadata.gz: 67bd6a32c2abf7c15f79bfe9fb3bbde61d610778
+  data.tar.gz: 3a54481bebf2ecadffb699ddf974c3a05789f926
 SHA512:
-  metadata.gz: 5bc0d5d9614e4d71c2713476c2f45b836726a53937bb980c4e331c0deb87b44f68afb6eb065e71163900e2a7bc25cbc4630326c22e9adc56c72e3b362d9b9095
-  data.tar.gz: fe56d2ec25a0eea3e897c84cae9509fc99a6467e3559c34c64bb21ee87cfbd944f3eec86f3a288b56a374bc132a906c8ca8efb15fa3a14d7cb225f3af2d8f8f0
+  metadata.gz: 647ac42a6ca57bc9d33390d22577cc805590c90278653fcd67cd5cb67c677fe703f9903f00637c55897abd3ded461d1bc743050d7bcb97a7c1fa985a29397074
+  data.tar.gz: 10b8f639b32628dd24ea08903ffb27474373714dc5020fbaacca395f3d268d8f7257715f0d14b66a9423451763e113a17ea99bd2b7a0fd1f423c0bf1b7beabff

data/app/assets/stylesheets/govuk_publishing_components/application.scss

@@ -4,7 +4,6 @@
 @import "typography";
 @import "colours";
 
-$prism-background: #f5f2f0;
 $border-color: #ccc;
 
 .govuk-component-guide-wrapper {
@@ -74,15 +73,14 @@ $border-color: #ccc;
   }
 }
 
-.code-block {
-  margin: 30px 0;
-  @extend %outdent-to-full-width;
+.component-call {
+  margin-top: $gutter-half;
+  margin-bottom: $gutter-half;
 
-  // Match Prism styles to avoid a flash as it renders
-  background: $prism-background;
   font-family: Consolas, Monaco, 'Andale Mono', monospace;
   font-size: 16px;
   line-height: 1.5;
+  border: 1px solid $border-colour;
 
   &[contenteditable]:hover {
     cursor: text;
@@ -92,17 +90,15 @@ $border-color: #ccc;
     outline: 3px solid $focus-colour;
   }
 
-  pre[class*=language-] {
+  > pre {
     padding: $gutter;
     max-height: 300px;
-  }
+    overflow: auto;
 
-  code {
-    display: block;
-  }
-
-  .token.operator {
-    background: none;
+    > code {
+      font-family: inherit;
+      display: block;
+    }
   }
 }
 
@@ -218,3 +214,243 @@ html {
     }
   }
 }
+
+// Hide survey and cookie banners
+// scss-lint:disable IdSelector
+#user-satisfaction-survey-container,
+#global-cookie-message {
+  display: none;
+}
+// scss-lint:enable IdSelector
+
+// Rouge syntax highlighting
+// Based on https://github.com/alphagov/tech-docs-template/blob/master/template/source/stylesheets/palette/_syntax-highlighting.scss
+
+$code-00: scale-color($highlight-colour, $lightness:50%); // Default Background
+$code-01: #f5f5f5; // Lighter Background (Unused)
+$code-02: #bfc1c3; // Selection Background
+$code-03: darken($secondary-text-colour, 2%); // Comments, Invisibles, Line Highlighting
+$code-04: #e8e8e8; // Dark Foreground (Unused)
+$code-05: $text-colour; // Default Foreground, Caret, Delimiters, Operators
+$code-06: #ffffff; // Light Foreground (Unused)
+$code-07: #ffffff; // Light Background (Unused)
+
+$code-08: #ae5f3d; // Variables, XML Tags, Markup Link Text, Markup Lists
+$code-09: #0E7754; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
+$code-0a: #4C4077; // Classes, Markup Bold, Search Text Background
+$code-0b: $govuk-blue; // Strings, Inherited Class, Markup Code
+$code-0c: $govuk-blue; // Support, Regular Expressions, Escape Characters, Markup Quotes
+$code-0d: #4C4077; // Functions, Methods, Attribute IDs, Headings
+$code-0e: #a71d5d; // Keywords, Storage, Selector, Markup Italic
+$code-0f: #C92424; // Deprecated, Opening/Closing Embedded Language Tags e.g. <?php ?> (Unused)
+
+$code-insert-bg: #DEF8CA;
+$code-delete-bg: #FADDDD;
+
+.component-highlight {
+
+  // Map Rouge / Pygments Tokens to work with 'Base 16' themes
+
+  background: $code-00;
+  color: $code-05;
+
+  //
+  // Comments
+  //
+
+  .c,       // Comment
+  .cm,      // Comment.Multiline
+  .cp,      // Comment.Preproc
+  .c1,      // Comment.Single
+  .cs {     // Comment.Special
+    color: $code-03;
+  }
+
+  //
+  // Keywords
+  //
+
+  .k,       // Keyword
+  .kc,      // Keyword.Constant
+  .kd,      // Keyword.Declaration
+  .kp,      // Keyword.Pseudo
+  .kr {     // Keyword.Reserved
+    color: $code-0e;
+  }
+
+  .kn {     // Keyword.Namespace
+    color: $code-0c;
+  }
+
+  .kt {     // Keyword.Type
+    color: $code-0a;
+  }
+
+  //
+  // Operators
+  //
+
+  .o,       // Operator
+  .ow {     // Operator.Word
+    color: $code-0c;
+  }
+
+  //
+  // Names
+  //
+
+  .n,       // Name
+  .nb,      // Name.Builtin
+  .bp,      // Name.Builtin.Pseudo
+  .ni,      // Name.Entity
+  .nl,      // Name.Label
+  .py {     // Name.Property
+    // Default styling
+  }
+
+  .nc,      // Name.Class
+  .nn {     // Name.Namespace
+    color: $code-0a;
+  }
+
+  .na,      // Name.Attribute
+  .nf {     // Name.Function
+    color: $code-0d;
+  }
+
+  .nv,      // Name.Variable
+  .no,      // Name.Constant
+  .vc,      // Name.Variable.Class
+  .vg,      // Name.Variable.Global
+  .vi {     // Name.Variable.Instance
+    color: $code-08;
+  }
+
+  .nd {     // Name.Decorator
+    color: $code-0c;
+  }
+
+  .nt,      // Name.Tag
+  .nx {     // Name.Other
+    color: $code-09;
+  }
+
+  .ne {     // Name.Exception
+    color: $code-0f;
+  }
+
+  //
+  // Literals
+  //
+
+  .l  {     // Literal
+    color: $code-09;
+  }
+
+  .ld {     // Literal.Date
+    color: $code-0b;
+  }
+
+  .m,       // Literal.Number
+  .mf,      // Literal.Number.Float
+  .mh,      // Literal.Number.Hex
+  .mi,      // Literal.Number.Integer
+  .il,      // Literal.Number.Integer.Long
+  .mo {     // Literal.Number.Oct
+    color: $code-09;
+  }
+
+  .s,       // Literal.String
+  .sb,      // Literal.String.Backtick
+  .s2,      // Literal.String.Double
+  .sh {     // Literal.String.Heredoc
+    color: $code-0b;
+  }
+
+  .sx,      // Literal.String.Other
+  .sr,      // Literal.String.Regex
+  .s1,      // Literal.String.Single
+  .ss {     // Literal.String.Symbol
+    color: $code-0b;
+  }
+
+  .se,      // Literal.String.Escape
+  .si {     // Literal.String.Interpol
+    color: $code-09;
+  }
+
+  .sd {     // Literal.String.Doc
+    color: $code-03;
+  }
+
+  .sc {     // Literal.String.Char
+    // Default styling
+  }
+
+  //
+  // Diffs
+  //
+
+  .gi {     // Generic.Inserted
+    background-color: $code-insert-bg;
+  }
+
+  .gd {     // Generic.Deleted
+    background-color: $code-delete-bg;
+  }
+
+  //
+  // Misc
+  //
+
+  .p {      // Punctuation
+    // Default styling
+  }
+
+  .w {      // Text.Whitespace
+    // Default styling
+  }
+
+  .hll {    // Highlight
+    background-color: $code-02;
+  }
+
+  .err,     // Error
+  .gr,      // Generic.Error
+  .gt {     // Generic.Traceback
+    color: $code-0f;
+  }
+
+  .gs {     // Generic.Strong
+    font-weight: bold;
+  }
+
+  .ge {     // Generic.Emph
+    font-style: italic;
+  }
+
+  .gh {     // Generic.Heading
+    font-weight: bold;
+  }
+
+  .gu {     // Generic.Subheading
+    color: $code-0a;
+    font-weight: bold;
+  }
+
+  .gp {     // Generic.Prompt
+    color: $code-03;
+    font-weight: bold;
+  }
+}
+
+// Specific for this Gem, optimized for erb render statements
+.component-highlight {
+  .s2 {
+    color: $code-08;
+  }
+
+  .n + .s2 {
+    color: $code-09;
+  }
+}

data/app/controllers/govuk_publishing_components/application_controller.rb

@@ -6,7 +6,6 @@ module GovukPublishingComponents
     protect_from_forgery with: :exception
     before_action :set_custom_slimmer_headers
     before_action :set_x_frame_options_header
-    before_action :set_no_banner_cookie
 
   private
 
@@ -17,19 +16,5 @@ module GovukPublishingComponents
     def set_x_frame_options_header
       response.headers["X-Frame-Options"] = "ALLOWALL"
     end
-
-    def set_no_banner_cookie
-      cookies['govuk_takenUserSatisfactionSurvey'] = {
-        value: 'yes',
-        domain: 'localhost',
-        path: '/component-guide'
-      }
-
-      cookies['seen_cookie_message'] = {
-        value: 'yes',
-        domain: 'localhost',
-        path: '/component-guide'
-      }
-    end
   end
 end

data/app/models/govuk_publishing_components/component_example.rb

@@ -1,3 +1,5 @@
+require 'rouge'
+
 module GovukPublishingComponents
   class ComponentExample
     attr_reader :id,
@@ -16,6 +18,12 @@ module GovukPublishingComponents
       id.humanize
     end
 
+    def highlight_code(string_to_format = '')
+      formatter = Rouge::Formatters::HTML.new
+      lexer = Rouge::Lexers::ERB.new
+      formatter.format(lexer.lex(string_to_format)).html_safe
+    end
+
     def pretty_data
       JSON.pretty_generate(data).gsub('\\n', "\n    ").gsub(/"(\w*)":/, '\1:').strip
     end

data/app/views/govuk_publishing_components/component_guide/component_doc/_call.html.erb

@@ -1,3 +1,3 @@
-<div class="component-call code-block" contenteditable>
-  <pre class="language-ruby"><code>&lt;%= render '<%= @component_doc.partial_path %>'<% if example.data? %>, <%= example.pretty_data %><% end %> %&gt;</code></pre>
+<div class="component-call component-highlight" contenteditable>
+  <pre><code><%= example.highlight_code("\<%= render \"#{@component_doc.partial_path}\" #{example.pretty_data} %\>") %></code></pre>
 </div>

data/app/views/layouts/govuk_publishing_components/application.html.erb

@@ -38,9 +38,5 @@
 
       <%= yield %>
     </main>
-
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css" integrity="sha256-vtR0hSWRc3Tb26iuN2oZHt3KRUomwTufNIf5/4oeCyg=" crossorigin="anonymous" />
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js" integrity="sha256-Zb9yKJ/cfs+jG/zIOFL0QEuXr2CDKF7FR5YBJY3No+c=" crossorigin="anonymous"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/components/prism-ruby.min.js" integrity="sha256-e0SYaLys07GcwuYiWJ0aewa3AOR3hHFY1mNTppYPb34=" crossorigin="anonymous"></script>
 </body>
 </html>

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '1.8.0'.freeze
+  VERSION = '1.8.1'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 1.8.0
+  version: 1.8.1
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-09-18 00:00:00.000000000 Z
+date: 2017-09-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -80,6 +80,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 5.0.3
+- !ruby/object:Gem::Dependency
+  name: rouge
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: govuk-lint
   requirement: !ruby/object:Gem::Requirement