[email protected] (#27128)

Co-authored-by: Dominik Lander <[email protected]> Co-authored-by: Daniel Clifton <[email protected]> Co-authored-by: Ioanna Kokkini <[email protected]> Co-authored-by: Jamie B <[email protected]>
guardian · May 9, 2024 · f6e783f · f6e783f
1 parent 08f615e
commit f6e783f
Show file tree

Hide file tree

Showing 13 changed files with 30 additions and 229 deletions.
diff --git a/package.json b/package.json
@@ -142,7 +142,7 @@
 		"rimraf": "^2.6.1",
 		"rxjs": "^6.6.7",
 		"sass-graph": "^4.0.1",
-		"sass-lint": "~1.10.2",
+		"sass-lint": "1.13.1",
 		"sass-loader": "^10.4.1",
 		"sass-mq": "~5.0.1",
 		"semver": "^5.4.1",

diff --git a/static/src/stylesheets/amp/_adconsent.scss b/static/src/stylesheets/amp/_adconsent.scss
@@ -2,7 +2,7 @@ amp-consent { background: none; }
 a.adconsent-preference {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
-    -khtml-user-select: none;
+    -khtml-user-select: none; // sass-lint:disable-line no-misspelled-properties
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;

diff --git a/static/src/stylesheets/base/_faux-block-link.scss b/static/src/stylesheets/base/_faux-block-link.scss
@@ -1,31 +1,3 @@
-/*doc
----
-title: Faux block link utility
-name: u-faux-block-link
-category: Utilities
----
-
-A Faux block-level link. Used for when you need a block-level link with
-clickable areas within it as directly nesting a tags breaks things.
-
-```html_example
-<div class="u-faux-block-link">
-    <img src="" alt="This image is magically clickable" />
-
-    <h3><a href="#">This headline is clickable as a normal link</a></h3>
-
-    Lorem ipsum dolor sit amet.
-
-    <a href="#">another link</a>
-
-    <abbr title="Hoverable!">An hoverable abbreviation</abbr>
-
-    <video class="u-faux-block-link__promote">I can interact with that video</video>
-
-    <a href="#" class="u-faux-block-link__overlay" tabindex="-1">headline</a>
-</div>
-```
-*/
 // Thanks to @BPScott http://codepen.io/BPScott/pen/Erwan
 // for this great technique
 .u-faux-block-link {

diff --git a/static/src/stylesheets/head.atom-snippets.scss b/static/src/stylesheets/head.atom-snippets.scss
diff --git a/static/src/stylesheets/module/_media.scss b/static/src/stylesheets/module/_media.scss
@@ -1,23 +1,3 @@
-/*doc
----
-title: Media
-name: media
-category: Common
----
-Nicole Sullivan's OOCSS CSS markup extraction pattern.
-
-```html_example
-<div class="media">
-    <div class="media__img">
-        <img src="http://i.guim.co.uk/w-140/h-140/q-95/sys-images/Guardian/Pix/pictures/2014/4/22/1398168161144/GeorgeMonbiot.jpg" alt="George Monbiot" />
-    </div>
-    <div class="media__body">
-        George Monbiot is the author of the bestselling books The Age of Consent: A Manifesto for a New World Order and Captive State: The Corporate Takeover of Britain, as well as the investigative travel books Poisoned Arrows, Amazon Watershed and No Man's Land. His latest book is <a href="http://www.guardianbookshop.co.uk/BerteShopWeb/viewProduct.do?ISBN=9781846147487">Feral: Searching for Enchantment on the Frontiers of Rewilding</a> (being published in paperback as Feral: Rewilding the Land, Sea and Human Life)
-    </div>
-</div>
-```
-*/
-
 .media,
 .media__body {
     @include clearfix;

diff --git a/static/src/stylesheets/module/_social.scss b/static/src/stylesheets/module/_social.scss
@@ -1,36 +1,5 @@
 @import 'social-icons';
 
-/*doc
----
-title: Social
-name: social
-category: Common
----
-
-```html_example
-<ul class="social u-unstyled u-cf">
-    <li class="social__item">
-        <a class="social__action social-icon-wrapper" href="#">
-            <span class="u-h">Share via Email</span>
-            <span class="social-icon"><i class="i-share-email--white i"></i></span>
-        </a>
-    </li>
-    <li class="social__item">
-        <a class="social__action social-icon-wrapper" href="#">
-            <span class="u-h">Share on Facebook</span>
-            <span class="social-icon"><i class="i-share-facebook--white i"></i></span>
-        </a>
-    </li>
-    <li class="social__item">
-        <a class="social__action social-icon-wrapper" href="#">
-            <span class="u-h">Share on Twitter</span>
-            <span class="social-icon"><i class="i-share-twitter--white i"></i></span>
-        </a>
-    </li>
-</ul>
-```
-*/
-
 .social__item {
     float: left;
     min-width: 32px;

diff --git a/static/src/stylesheets/module/_tabs-garnett.head.scss b/static/src/stylesheets/module/_tabs-garnett.head.scss
@@ -1,32 +1,3 @@
-/*doc
----
-title: Base tab styles
-name: Tab
-category: Common
----
-
-```html_example
-<div class="tabs u-cf">
-    <ol class="tabs__container" role="tablist">
-        <li class="tabs__tab tabs__tab--selected" role="tab" id="tabs-example-1-tab" aria-selected="true" aria-controls="tabs-example-1">
-            <a href="#tabs-example-1"><span class="hide-until-desktop">Popular in </span>World news</a>
-        </li>
-        <li class="tabs__tab" role="tab" id="tabs-example-2-tab" aria-controls="tabs-example-2">
-            <a href="#tabs-example-2"><span class="hide-until-desktop">Popular in </span>The Guardian</a>
-        </li>
-    </ol>
-    <div class="tabs__content">
-        <div id="tabs-example-1" class="tabs__pane u-cf" role="tabpanel" aria-labelledby="tabs-example-1-tab">
-            <!-- Content of tab 1 -->
-        </div>
-        <div id="tabs-example-2" class="tabs__pane modern-hidden u-cf" role="tabpanel" aria-labelledby="tabs-example-2-tab">
-            <!-- Content of tab 2 -->
-        </div>
-    </div>
-</div>
-```
-*/
-
 
 /* ==========================================================================
    Tabs

diff --git a/static/src/stylesheets/module/_tabs.head.scss b/static/src/stylesheets/module/_tabs.head.scss
@@ -1,33 +1,3 @@
-/*doc
----
-title: Base tab styles
-name: Tab
-category: Common
----
-
-```html_example
-<div class="tabs u-cf">
-    <ol class="tabs__container" role="tablist">
-        <li class="tabs__tab tabs__tab--selected" role="tab" id="tabs-example-1-tab" aria-selected="true" aria-controls="tabs-example-1">
-            <a href="#tabs-example-1"><span class="hide-until-desktop">Popular in </span>World news</a>
-        </li>
-        <li class="tabs__tab" role="tab" id="tabs-example-2-tab" aria-controls="tabs-example-2">
-            <a href="#tabs-example-2"><span class="hide-until-desktop">Popular in </span>The Guardian</a>
-        </li>
-    </ol>
-    <div class="tabs__content">
-        <div id="tabs-example-1" class="tabs__pane u-cf" role="tabpanel" aria-labelledby="tabs-example-1-tab">
-            <!-- Content of tab 1 -->
-        </div>
-        <div id="tabs-example-2" class="tabs__pane modern-hidden u-cf" role="tabpanel" aria-labelledby="tabs-example-2-tab">
-            <!-- Content of tab 2 -->
-        </div>
-    </div>
-</div>
-```
-*/
-
-
 /* ==========================================================================
    Tabs
    ========================================================================== */

diff --git a/static/src/stylesheets/module/charts/_doughnuts.scss b/static/src/stylesheets/module/charts/_doughnuts.scss
@@ -1,30 +1,3 @@
-/*doc
----
-title: Doughnut
-name: doughnut
-category: Charts
----
-
-```html_example
-<svg class="chart chart--doughnut" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewbox="0 0 200 200">
-    <g class="chart__arc">
-        <path d="M 100 0 A 100 100 0 0 1 172.90 168.45 L 125.51 123.96 A 35 35 0 0 0 100 65 Z" fill="#6cf"/>
-        <text class="chart__label" transform="translate(161.95, 73.19)">
-            <tspan class="chart__label-text" x="0" dy="0">ARG</tspan>
-            <tspan class="chart__label-value" x="0" dy="1em">37</tspan>
-        </text>
-    </g>
-    <g class="chart__arc">
-        <path d="M 172.90 168.45 A 100 100 0 1 1 100 0 L 100 65 A 35 35 0 1 0 125.51 123.96 Z" fill="#eee"/>
-        <text class="chart__label" transform="translate(38.05, 126.81)">
-            <tspan class="chart__label-text" x="0" dy="0">DEU</tspan>
-            <tspan class="chart__label-value" x="0" dy="1em">63</tspan>
-        </text>
-    </g>
-    <text class="chart__unit" transform="translate(100,100)" dy="0.4em">%</text>
-</svg>
-```
-*/
 
 // Here be SVGs - use appropriate styling properties
 // http://www.w3.org/TR/SVG11/styling.html

diff --git a/static/src/stylesheets/module/facia-garnett/_container--video.scss b/static/src/stylesheets/module/facia-garnett/_container--video.scss
@@ -191,7 +191,7 @@ $video-width-desktop: 700px;
 .vertical-video-playlist__control {
     width: 300px;
     display: flex;
-    gap: 16px;
+    gap: 16px; // sass-lint:disable-line no-misspelled-properties
     justify-content: flex-start;
     align-items: center;
     margin-left: 20px;

diff --git a/static/src/stylesheets/module/facia/_pagination.scss b/static/src/stylesheets/module/facia/_pagination.scss
@@ -1,32 +1,3 @@
-/*doc
----
-title: Pagination
-name: pagination
-category: Facia
----
-The user needs to view a subset of sorted data that is not easily displayed on one page.
-
-```html_example
-<div class="pagination u-cf">
-    <span class="pagination__legend hide-on-mobile-inline">
-        About 12,345 results for Tag Name
-    </span>
-    <div class="pagination__list">
-        <a class="button button--small button--tertiary pagination__action--static" rel="prev" href="#" aria-label="prev page">
-            <i aria-hidden="true" class="i i-arrow-left-grey"></i>
-            <span class="u-h">prev</span>
-        </a>
-        <a class="button button--small button--tertiary pagination__action" href="#" aria-label="page 4">4</a>
-        <span class="button button--small button--tertiary pagination__action is-active" aria-label="Current page" tabindex="0">5</span>
-        <a class="button button--small button--tertiary pagination__action" href="#" aria-label="page 6">6</a>
-        <a class="button button--small button--tertiary pagination__action--static" rel="next" href="#" aria-label="next page">
-            <i aria-hidden="true" class="i i-arrow-right-grey"></i>
-            <span class="u-h">next</span>
-        </a>
-    </div>
-</div>
-```
-*/
 
 $pagination-item-size:    $gs-baseline * 2;
 $pagination-height:       $gs-baseline * 4;

diff --git a/static/src/stylesheets/module/identity/_button.scss b/static/src/stylesheets/module/identity/_button.scss
@@ -1,5 +1,3 @@
-/* Button styles
-========================================================================== */
 @mixin identity-button($bg, $bg-hover, $font: $brightness-7) {
     background-color: $bg;
     &, &:hover, &:active, &:focus {
@@ -39,7 +37,7 @@
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
-    -ms-appearance: none;
+    -ms-appearance: none; // sass-lint:disable-line no-misspelled-properties
     box-sizing: border-box;
     transition: .15s linear;
 

diff --git a/yarn.lock b/yarn.lock
@@ -3185,7 +3185,7 @@ __metadata:
     rimraf: "npm:^2.6.1"
     rxjs: "npm:^6.6.7"
     sass-graph: "npm:^4.0.1"
-    sass-lint: "npm:~1.10.2"
+    sass-lint: "npm:1.13.1"
     sass-loader: "npm:^10.4.1"
     sass-mq: "npm:~5.0.1"
     semver: "npm:^5.4.1"
@@ -10732,12 +10732,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"front-matter@npm:2.1.0":
-  version: 2.1.0
-  resolution: "front-matter@npm:2.1.0"
+"front-matter@npm:2.1.2":
+  version: 2.1.2
+  resolution: "front-matter@npm:2.1.2"
   dependencies:
     js-yaml: "npm:^3.4.6"
-  checksum: 10c0/264ebfacee77106a5a2a05da12cb84863cd6f6dc733480eed13723ed05e3f34711c22e779a45d84ac3c0fbb1adb9bf96b7b55163f6035c2dc5f4ed370d2ec1cf
+  checksum: 10c0/4bda8ea626dcc86898e23bedb64572f9ea5f9af81ef140513b223bfb9ff745e8b616c7253871a9cdedff78b34204236ed09ea9dc33d095d38edefd682dc885d1
   languageName: node
   linkType: hard
 
@@ -10748,7 +10748,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:3.0.1":
+"fs-extra@npm:3.0.1, fs-extra@npm:^3.0.1":
   version: 3.0.1
   resolution: "fs-extra@npm:3.0.1"
   dependencies:
@@ -10759,17 +10759,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "fs-extra@npm:1.0.0"
-  dependencies:
-    graceful-fs: "npm:^4.1.2"
-    jsonfile: "npm:^2.1.0"
-    klaw: "npm:^1.0.0"
-  checksum: 10c0/1128e46b3364f458ca07fbd186a05010b05255ad6ab17abc2a262086600f1925a9e5a259b9436ee42f57875e9ebb171348f25d4289fecd395b05488db9ceeda8
-  languageName: node
-  linkType: hard
-
 "fs-extra@npm:^7.0.1":
   version: 7.0.1
   resolution: "fs-extra@npm:7.0.1"
@@ -11280,14 +11269,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gonzales-pe@npm:3.4.7":
-  version: 3.4.7
-  resolution: "gonzales-pe@npm:3.4.7"
+"gonzales-pe-sl@npm:^4.2.3":
+  version: 4.2.3
+  resolution: "gonzales-pe-sl@npm:4.2.3"
   dependencies:
     minimist: "npm:1.1.x"
   bin:
     gonzales: ./bin/gonzales.js
-  checksum: 10c0/da0bfde475fdd5d3a67a790b84861de78f9b063d4480102dcb109655276a6c2b7004ca0d2a5828d4485e0567342a41facffcaf1f6efcb6502d36e7c4320d348c
+  checksum: 10c0/bab587fe29ac5283ce2343f582a4836f6c95191fb0d63a81affc6d3ce37fe8361e1a75a4029060a089c6821a9db40aec195c989ca4d689c89215973e48df1ee3
   languageName: node
   linkType: hard
 
@@ -13828,6 +13817,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"known-css-properties@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "known-css-properties@npm:0.3.0"
+  checksum: 10c0/e6a02eee7fa0b76e8069329c6eb70984af4cb5e67278c77efc62dcd8954b5a410eb1e56e6bb5fd61b8c1a211e71c8d917cf8a27fc2c1f766617b4047b2e12fda
+  languageName: node
+  linkType: hard
+
 "language-subtag-registry@npm:~0.3.2":
   version: 0.3.22
   resolution: "language-subtag-registry@npm:0.3.22"
@@ -17513,26 +17509,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass-lint@npm:~1.10.2":
-  version: 1.10.2
-  resolution: "sass-lint@npm:1.10.2"
+"sass-lint@npm:1.13.1":
+  version: 1.13.1
+  resolution: "sass-lint@npm:1.13.1"
   dependencies:
     commander: "npm:^2.8.1"
     eslint: "npm:^2.7.0"
-    front-matter: "npm:2.1.0"
-    fs-extra: "npm:^1.0.0"
+    front-matter: "npm:2.1.2"
+    fs-extra: "npm:^3.0.1"
     glob: "npm:^7.0.0"
     globule: "npm:^1.0.0"
-    gonzales-pe: "npm:3.4.7"
+    gonzales-pe-sl: "npm:^4.2.3"
     js-yaml: "npm:^3.5.4"
+    known-css-properties: "npm:^0.3.0"
     lodash.capitalize: "npm:^4.1.0"
     lodash.kebabcase: "npm:^4.0.0"
     merge: "npm:^1.2.0"
     path-is-absolute: "npm:^1.0.0"
     util: "npm:^0.10.3"
   bin:
     sass-lint: ./bin/sass-lint.js
-  checksum: 10c0/a36782cb98d0a1f7f4ba2995391cfc3fdcea2484d0baa765d19c9414e763f9b8438e99b52e8d1e74eb0cb9148eff7f27a020b457e45d01ac025444dc0624df53
+  checksum: 10c0/40c966144799c75ac6b915fda9871b18a3001148c8a08c8debbedffcc325ed16f692fd646bb99ffb9590d6d56728e80d07b59749a19c004c3c5857d85807fdd0
   languageName: node
   linkType: hard