Merge pull request #78 from alphagov/add-warning-text-partial

Add warning text extension

Author: bravegrape

lib/assets/stylesheets/_core.scss

@@ -31,6 +31,7 @@ $desktop-breakpoint: 992px !default;
 @import "modules/contribution-banner";
 @import "modules/technical-documentation";
 @import "modules/toc";
+@import "modules/warning-text";
 @import "modules/collapsible";
 
 @import "accessibility";

lib/assets/stylesheets/modules/_warning-text.scss

@@ -0,0 +1,73 @@
+.govuk-warning-text {
+  font-family: nta,Arial,sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 400;
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 1.25;
+  color: #0b0c0c;
+  position: relative;
+  margin-bottom: 20px;
+  padding: 10px 0; }
+
+@media print {
+  .govuk-warning-text {
+    font-family: sans-serif; } }
+@media (min-width: 40.0625em) {
+  .govuk-warning-text {
+    font-size: 19px;
+    font-size: 1.1875rem;
+    line-height: 1.31579; } }
+@media print {
+  .govuk-warning-text {
+    font-size: 14pt;
+    line-height: 1.15;
+    color: #000; } }
+@media (min-width: 40.0625em) {
+  .govuk-warning-text {
+    margin-bottom: 30px; } }
+.govuk-warning-text__assistive {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  border: 0 !important;
+  white-space: nowrap !important; }
+
+.govuk-warning-text__icon {
+  font-family: nta,Arial,sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 700;
+  display: inline-block;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  min-width: 32px;
+  min-height: 29px;
+  margin-top: -20px;
+  padding-top: 3px;
+  border: 3px solid #0b0c0c;
+  border-radius: 50%;
+  color: #fff;
+  background: #0b0c0c;
+  font-size: 1.6em;
+  line-height: 29px;
+  text-align: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none; }
+
+@media print {
+  .govuk-warning-text__icon {
+    font-family: sans-serif; } }
+.govuk-warning-text__text {
+  display: block;
+  padding-left: 50px; }

lib/govuk_tech_docs.rb

@@ -20,6 +20,7 @@
 require 'govuk_tech_docs/tech_docs_html_renderer'
 require 'govuk_tech_docs/unique_identifier_extension'
 require 'govuk_tech_docs/unique_identifier_generator'
+require 'govuk_tech_docs/warning_text_extension'
 require 'govuk_tech_docs/api_reference/api_reference_extension'
 
 module GovukTechDocs
@@ -58,7 +59,7 @@ def self.configure(context, options = {})
 
     context.config[:tech_docs] = YAML.load_file('config/tech-docs.yml').with_indifferent_access
     context.activate :unique_identifier
-
+    context.activate :warning_text
     context.activate :api_reference
 
     context.helpers do

lib/govuk_tech_docs/warning_text_extension.rb

@@ -0,0 +1,23 @@
+module GovukTechDocs
+  class WarningTextExtension < Middleman::Extension
+    def initialize(app, options_hash = {}, &block)
+      super
+    end
+
+    helpers do
+      def warning_text(text)
+        <<~EOS
+        <div class="govuk-warning-text">
+          <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
+          <strong class="govuk-warning-text__text">
+            <span class="govuk-warning-text__assistive">Warning</span>
+            #{text}
+          </strong>
+        </div>
+        EOS
+      end
+    end
+  end
+end
+
+::Middleman::Extensions.register(:warning_text, GovukTechDocs::WarningTextExtension)