Add legacy govspeak class alongside gem govspeak

There are many many many places where the older `govspeak` class is used on elements that wrap around content, rather than `gem-c-govspeak`. This class comes as part of the content from the content store (eg [in `details.body` in the cabinet office content][1]. Adding the legacy class as a fix is easier and safer that changing the myriad of places where this is added - around 7K places across alphagov[2]). This makes sure that the `govspeak` has the same output as `gem-c-govspeak` for minimal additional CSS. [1]: https://www.gov.uk/api/content/government/organisations/cabinet-office [2]: https://github.com/search?q=org%3Aalphagov+%27%3Cdiv+class%3D%22govspeak%22%3E%27&type=Code&ref=advsearch&l=&l=
alphagov · May 6, 2021 · 585cbc1 · 585cbc1
1 parent 1242812
commit 585cbc1
Show file tree

Hide file tree

Showing 23 changed files with 159 additions and 123 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 
 ## Unpublished
 * Remove unused i18n keys ([PR #2038](https://github.com/alphagov/govuk_publishing_components/pull/2038))
+* Add legacy `govspeak` class alongside gem-c-govspeak ([PR #2044](https://github.com/alphagov/govuk_publishing_components/pull/2044))
 
 ## Unreleased
 

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_govspeak.scss b/app/assets/stylesheets/govuk_publishing_components/components/_govspeak.scss
@@ -21,6 +21,7 @@
 @import "govspeak/typography";
 @import "govspeak/warning-callout";
 
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   &.direction-rtl {
     direction: rtl;

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_advisory.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_advisory.scss
@@ -1,33 +1,36 @@
 $info-background: #d5e8f3;
 $high-alert-border: #cc0000;
 
-.gem-c-govspeak .advisory {
-  background-image: image-url("govuk_publishing_components/icon-important.svg");
-  background-repeat: no-repeat;
-  background-size: 30px 30px;
-  background-position: 98% center;
-  background-color: $info-background;
-  line-height: 1.3em;
-  margin: 0 -1em 1em;
-  padding: govuk-spacing(3) govuk-spacing(8) govuk-spacing(3) govuk-spacing(3);
-  text-align: left;
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
+.gem-c-govspeak {
+  .advisory {
+    background-image: image-url("govuk_publishing_components/icon-important.svg");
+    background-repeat: no-repeat;
+    background-size: 30px 30px;
+    background-position: 98% center;
+    background-color: $info-background;
+    line-height: 1.3em;
+    margin: 0 -1em 1em;
+    padding: govuk-spacing(3) govuk-spacing(8) govuk-spacing(3) govuk-spacing(3);
+    text-align: left;
 
-  p {
-    margin: 0 .75em 0 0;
-    min-height: 1.75em;
-    padding-right: 3em;
-  }
+    p {
+      margin: 0 .75em 0 0;
+      min-height: 1.75em;
+      padding-right: 3em;
+    }
 
-  strong {
-    font-weight: 400;
-  }
+    strong {
+      font-weight: 400;
+    }
 
-  &.high-alert {
-    background-color: govuk-colour("light-grey", $legacy: "grey-3");
-    border: 1px solid $high-alert-border;
-  }
+    &.high-alert {
+      background-color: govuk-colour("light-grey", $legacy: "grey-3");
+      border: 1px solid $high-alert-border;
+    }
 
-  @include govuk-media-query($until: tablet) {
-    margin: 0 0 1em;
+    @include govuk-media-query($until: tablet) {
+      margin: 0 0 1em;
+    }
   }
 }
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss
@@ -7,8 +7,8 @@
 
 // stylelint-disable max-nesting-depth
 
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
-
   // Scope attachment and attachment-link component styles to gem-c-govspeak
   @import "../attachment-link";
   @import "../attachment";

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss
@@ -1,4 +1,5 @@
 // stylelint-disable scss/at-extend-no-missing-placeholder
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   @import "govuk/components/button/button";
 

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_call-to-action.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_call-to-action.scss
@@ -6,6 +6,7 @@
 // - alphagov/whitehall: ✔︎
 // - alphagov/govspeak: ✔︎
 
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   .call-to-action {
     margin: 2em 0;

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss
@@ -11,6 +11,7 @@
 
 // stylelint-disable max-nesting-depth
 
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   // DEFAULT CHART STYLES
 

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss
@@ -7,6 +7,7 @@
 
 // stylelint-disable max-nesting-depth
 
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   // .address is used by the `$A` markdown pattern
   .address,

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_example.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_example.scss
@@ -5,6 +5,7 @@
 // - alphagov/whitehall: ✔︎
 // - alphagov/govspeak: ✔︎
 
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   .example {
     border-left: 10px solid govuk-colour("mid-grey", $legacy: "grey-3");

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_footnotes.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_footnotes.scss
@@ -11,6 +11,7 @@
 
 // stylelint-disable max-nesting-depth
 
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   .footnotes {
     border-top: 1px solid govuk-colour("mid-grey", $legacy: "grey-2");

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_form-download.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_form-download.scss
@@ -1,21 +1,24 @@
-.gem-c-govspeak .form-download {
-  padding: .25em 0;
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
+.gem-c-govspeak {
+  .form-download {
+    padding: .25em 0;
 
-  @include govuk-media-query($until: tablet) {
-    margin: 1em 0 1.5em;
-  }
+    @include govuk-media-query($until: tablet) {
+      margin: 1em 0 1.5em;
+    }
 
-  p {
-    padding-right: 3em;
-  }
+    p {
+      padding-right: 3em;
+    }
 
-  a {
-    display: block;
-    font-weight: 600;
-    background-image: image-url("govuk_publishing_components/icon-file-download.svg");
-    background-repeat: no-repeat;
-    background-size: 40px 40px;
-    min-height: 2.5em;
-    padding: 0 0 0 50px;
+    a {
+      display: block;
+      font-weight: 600;
+      background-image: image-url("govuk_publishing_components/icon-file-download.svg");
+      background-repeat: no-repeat;
+      background-size: 40px 40px;
+      min-height: 2.5em;
+      padding: 0 0 0 50px;
+    }
   }
 }
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_fraction.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_fraction.scss
@@ -6,6 +6,7 @@
 // - alphagov/whitehall: ✔︎
 // - alphagov/govspeak: ✘
 
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   .fraction {
     sup,

diff --git a/...assets/stylesheets/govuk_publishing_components/components/govspeak/_highlight-answer.scss b/...assets/stylesheets/govuk_publishing_components/components/govspeak/_highlight-answer.scss
@@ -3,41 +3,44 @@
 $highlight-answer-bg-color: govuk-colour("green");
 $highlight-answer-color: govuk-colour("white");
 
-.gem-c-govspeak .highlight-answer {
-  background-color: $highlight-answer-bg-color;
-  color: $highlight-answer-color;
-  text-align: center;
-  padding: 1.75em .75em 1.25em;
-  margin: 0 -1em 1em;
-
-  p {
-    @include govuk-font($size: 24, $weight: bold);
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
+.gem-c-govspeak {
+  .highlight-answer {
+    background-color: $highlight-answer-bg-color;
     color: $highlight-answer-color;
+    text-align: center;
+    padding: 1.75em .75em 1.25em;
+    margin: 0 -1em 1em;
 
-    em {
-      @include govuk-font($size: 80, $weight: bold);
-      display: block;
-      padding-top: .1em;
+    p {
+      @include govuk-font($size: 24, $weight: bold);
       color: $highlight-answer-color;
-    }
-  }
 
-  p:last-child {
-    margin-bottom: 0;
-  }
+      em {
+        @include govuk-font($size: 80, $weight: bold);
+        display: block;
+        padding-top: .1em;
+        color: $highlight-answer-color;
+      }
+    }
 
-  @include govuk-media-query($until: tablet) {
-    margin: 0 0 1em;
-    @include govuk-font($size: 48);
+    p:last-child {
+      margin-bottom: 0;
+    }
 
-    p {
-      font-size: 1em;
-      line-height: inherit;
+    @include govuk-media-query($until: tablet) {
+      margin: 0 0 1em;
+      @include govuk-font($size: 48);
 
-      em {
+      p {
         font-size: 1em;
-        padding-top: 0;
-        display: inline;
+        line-height: inherit;
+
+        em {
+          font-size: 1em;
+          padding-top: 0;
+          display: inline;
+        }
       }
     }
   }

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_images.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_images.scss
@@ -4,6 +4,7 @@
 // - alphagov/whitehall: ✔︎
 // - alphagov/govspeak: ✔︎
 
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   img {
     width: auto;

diff --git a/...ets/stylesheets/govuk_publishing_components/components/govspeak/_information-callout.scss b/...ets/stylesheets/govuk_publishing_components/components/govspeak/_information-callout.scss
@@ -6,6 +6,7 @@
 // - alphagov/whitehall: ✔︎
 // - alphagov/govspeak: ✔︎
 
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   .info-notice {
     border-left: 10px solid govuk-colour("mid-grey", $legacy: "grey-3");

diff --git a/...assets/stylesheets/govuk_publishing_components/components/govspeak/_legislative-list.scss b/...assets/stylesheets/govuk_publishing_components/components/govspeak/_legislative-list.scss
@@ -5,6 +5,7 @@
 // - alphagov/whitehall: ✔︎
 // - alphagov/govspeak: ✔︎
 
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   .legislative-list {
     list-style: none;

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_place.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_place.scss
@@ -1,29 +1,34 @@
-.gem-c-govspeak .place {
-  margin: 1.5em 0;
-  border-bottom: solid 1px govuk-colour("mid-grey", $legacy: "grey-2");
-  padding-bottom: 1.5em;
+// stylelint-disable max-nesting-depth
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
+.gem-c-govspeak {
+  .place {
+    margin: 1.5em 0;
+    border-bottom: solid 1px govuk-colour("mid-grey", $legacy: "grey-2");
+    padding-bottom: 1.5em;
 
-  .address {
-    margin: 0;
-    padding: 0;
-    width: auto;
-    display: block;
-  }
+    .address {
+      margin: 0;
+      padding: 0;
+      width: auto;
+      display: block;
+    }
 
-  .url {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+    .url {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
 
-  .additional-information {
-    @include govuk-font($size: 16);
+    .additional-information {
+      @include govuk-font($size: 16);
 
-    p {
-      margin: .25em 0;
+      p {
+        margin: .25em 0;
+      }
     }
-  }
 
-  @include govuk-media-query($until: tablet) {
-    margin: .75em 0;
+    @include govuk-media-query($until: tablet) {
+      margin: .75em 0;
+    }
   }
 }
+// stylelint-enable max-nesting-depth
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_stat-headline.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_stat-headline.scss
@@ -5,6 +5,7 @@
 // - alphagov/whitehall: ✔︎
 // - alphagov/govspeak: ✔︎
 
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   .stat-headline {
     margin-bottom: govuk-spacing(3);

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_steps.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_steps.scss
@@ -1,21 +1,24 @@
-.gem-c-govspeak .steps {
-  padding-left: 0;
-  margin-left: 0;
-  overflow: hidden;
-
-  > li {
-    background-position: 0 .87em;
-    background-repeat: no-repeat;
-    list-style-type: decimal;
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
+.gem-c-govspeak {
+  .steps {
+    padding-left: 0;
     margin-left: 0;
-    padding: .75em 0 .75em 2.5em;
+    overflow: hidden;
+
+    > li {
+      background-position: 0 .87em;
+      background-repeat: no-repeat;
+      list-style-type: decimal;
+      margin-left: 0;
+      padding: .75em 0 .75em 2.5em;
 
-    @for $i from 1 through 30 {
-      &:nth-child(#{$i}) {
-        background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250' preserveAspectRatio='xMinYMin meet'%3E%3Cg%3E%3Ccircle r='50%25' cx='50%25' cy='50%25' class='circle-back'%3E%3C/circle%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='0.3em' font-family='nta,arial,sans-serif' font-size='8rem' fill='%23ffffff'%3E#{$i}%3C/text%3E%3C/g%3E%3C/svg%3E ");
-        background-repeat: no-repeat;
-        background-position: .2em .7em;
-        background-size: 1.4em 1.4em;
+      @for $i from 1 through 30 {
+        &:nth-child(#{$i}) {
+          background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250' preserveAspectRatio='xMinYMin meet'%3E%3Cg%3E%3Ccircle r='50%25' cx='50%25' cy='50%25' class='circle-back'%3E%3C/circle%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='0.3em' font-family='nta,arial,sans-serif' font-size='8rem' fill='%23ffffff'%3E#{$i}%3C/text%3E%3C/g%3E%3C/svg%3E ");
+          background-repeat: no-repeat;
+          background-position: .2em .7em;
+          background-size: 1.4em 1.4em;
+        }
       }
     }
   }