Merge pull request #899 from alphagov/add-callouts

Add callouts to Govspeak component; Remove information-block

app/assets/stylesheets/govuk-component/_govspeak.scss

@@ -1,16 +1,18 @@
 @import "govspeak/attachment";
-@import "govspeak/call-out-block";
+@import "govspeak/call-to-action";
 @import "govspeak/charts";
 @import "govspeak/contact";
 @import "govspeak/example";
 @import "govspeak/footnotes";
 @import "govspeak/fraction";
 @import "govspeak/images";
+@import "govspeak/information-callout";
 @import "govspeak/legislative-list";
 @import "govspeak/media-player";
 @import "govspeak/stat-headline";
 @import "govspeak/tables";
 @import "govspeak/typography";
+@import "govspeak/warning-callout";
 
 .govuk-govspeak {
   &.direction-rtl {

app/assets/stylesheets/govuk-component/govspeak/_call-to-action.scss

@@ -0,0 +1,25 @@
+// Govspeak call to action
+// http://govuk-component-guide.herokuapp.com/components/govspeak/fixtures/call_to_action
+//
+// Support:
+//
+// - alphagov/whitehall: ✔︎
+// - alphagov/govspeak: ✔︎
+
+.govuk-govspeak {
+  .call-to-action {
+    margin: 2em 0;
+    background-color: $panel-colour;
+    padding: 2em;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    p:last-child,
+    ul:last-child,
+    ol:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

app/assets/stylesheets/govuk-component/govspeak/_example.scss

@@ -7,9 +7,16 @@
 
 .govuk-govspeak {
   .example {
-    border-left: 10px solid $panel-colour;
-    padding-left: 1.5em;
-    margin: 2.5em 0;
+    border-left: 1em solid $panel-colour;
+    padding: 1em 0 1em 1em;
+    margin: 2em 0;
+
+    // Remove margin from the last element
+    p:last-child,
+    ul:last-child,
+    ol:last-child {
+      margin-bottom: 0;
+    }
 
     strong {
       display: block;

app/assets/stylesheets/govuk-component/govspeak/_information-callout.scss

@@ -0,0 +1,22 @@
+// Govspeak information callout
+// http://govuk-component-guide.herokuapp.com/components/govspeak/fixtures/information_callout
+//
+// Support:
+//
+// - alphagov/whitehall: ✔︎
+// - alphagov/govspeak: ✔︎
+
+.govuk-govspeak {
+  .info-notice {
+    border-left: 1em solid $panel-colour;
+    padding: 1em 0 1em 1em;
+    margin: 2em 0;
+
+    // Remove margin from the last element
+    p:last-child,
+    ul:last-child,
+    ol:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

app/assets/stylesheets/govuk-component/govspeak/_warning-callout.scss

@@ -0,0 +1,41 @@
+// Govspeak warning callout
+// http://govuk-component-guide.herokuapp.com/components/govspeak/fixtures/warning_callout
+//
+// Support:
+//
+// - alphagov/whitehall: ✔︎
+// - alphagov/govspeak: ✔︎
+
+.govuk-govspeak {
+  .help-notice {
+    $icon-size: 34px;
+    $line-height-mobile: 20px;
+    $line-height-tablet: 25px;
+
+    margin: 2em 0;
+
+    // Add '!' icon
+    background-image: image-url("icon-important.png");
+    background-size: $icon-size $icon-size;
+    background-repeat: no-repeat;
+
+    @include device-pixel-ratio() {
+      background-image: image-url("icon-important-2x.png");
+    }
+
+    min-height: $icon-size;
+    padding-left: $icon-size;
+
+    // Center the icon around the baseline
+    padding-top: ($icon-size - $line-height-mobile) / 2;
+
+    @include media(tablet) {
+      padding-top: ($icon-size - $line-height-tablet) / 2;
+    }
+
+    p {
+      @include bold-19;
+      margin-left: 1em;
+    }
+  }
+}

app/views/govuk_component/docs/govspeak.yml

@@ -121,15 +121,6 @@ fixtures:
         <p>My quote</p>
         <p class="last-child">about things</p>
       </blockquote>
-  call_out_blocks:
-    content: |
-      <div class="information-block">
-        <p>My important information</p>
-        <p>Information</p>
-      </div>
-      <div class="call-to-action">
-        <p>Call to action</p>
-      </div>
   tables:
     content: |
       <table>
@@ -511,7 +502,31 @@ fixtures:
     content: |
       <div class="example">
         <p>
+          <strong>Example</strong>
           This is an indented example block.<br/>
           It may span multiple lines, <a href="#">contain links</a>.
         </p>
+        <p>
+          It may even span multiple paragraphs.
+        </p>
+      </div>
+  call_to_action:
+    content: |
+      <div class="call-to-action">
+        <p>Call to action</p>
+      </div>
+  information_callout:
+    content: |
+      <div class="application-notice info-notice">
+        <p>
+          If you drilled a tunnel straight through the Earth and jumped in, it would take
+          you exactly 42 minutes and 12 seconds to get to the other side.
+        </p>
+      </div>
+  warning_callout:
+    content: |
+      <div class="application-notice help-notice">
+        <p>
+          The water in the mouth of a blue whale weighs more than its body.
+        </p>
       </div>