From dbe5e43e0b15cc52ee3450612113af3d69c0a312 Mon Sep 17 00:00:00 2001
From: Andrew Nowak <andrew.nowak@guardian.co.uk>
Date: Mon, 22 Jul 2024 18:05:05 +0100
Subject: [PATCH] resize the crossword grid by dimensions, not the type

---
 .../crosswords/accessibleCrosswordContent.scala.html |  2 +-
 .../fragments/crosswords/crosswordContent.scala.html |  2 +-
 .../projects/common/modules/crosswords/crossword.js  |  2 +-
 static/src/stylesheets/module/crosswords/_cell.scss  |  4 ++--
 .../src/stylesheets/module/crosswords/_layout.scss   |  4 ++--
 static/src/stylesheets/module/crosswords/_vars.scss  | 12 +-----------
 6 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html b/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html
index c3fd85cea44e..ff5519291b41 100644
--- a/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html
+++ b/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html
@@ -9,7 +9,7 @@
         <div class="content__main tonal__main tonal__main--tone-news">
             <div class="gs-container">
                 <div class="js-content-main-column">
-                    <div class="crossword__container crossword__container--@crosswordPage.crossword.crosswordType.toString.toLowerCase() crossword__container--accessible">
+                    <div class="crossword__container crossword__container--@{crosswordPage.crossword.dimensions.cols}cell crossword__container--accessible">
                         <div class="crossword__accessible-row-data-wrapper">
                             <div class="crossword__accessible-data">
                                 <h3 class="crossword__accessible-data--header">Blanks</h3>
diff --git a/applications/app/views/fragments/crosswords/crosswordContent.scala.html b/applications/app/views/fragments/crosswords/crosswordContent.scala.html
index 55de2576c92c..2eee10bf2172 100644
--- a/applications/app/views/fragments/crosswords/crosswordContent.scala.html
+++ b/applications/app/views/fragments/crosswords/crosswordContent.scala.html
@@ -17,7 +17,7 @@
                             data-crossword-data="@Json.stringify(Json.toJson(crosswordPage.crossword))">
 
                             <div
-                                class="crossword__container crossword__container--@crosswordPage.crossword.crosswordType.toString.toLowerCase()">
+                                class="crossword__container crossword__container--@{crosswordPage.crossword.dimensions.cols}cell">
                                 @* The following is a fallback for when JavaScript is not enabled *@
                                 <div class="crossword__container__grid-wrapper">
                                     <noscript>@crosswordPage.svg</noscript>
diff --git a/static/src/javascripts/projects/common/modules/crosswords/crossword.js b/static/src/javascripts/projects/common/modules/crosswords/crossword.js
index 181708aa65bd..4803001e1927 100644
--- a/static/src/javascripts/projects/common/modules/crosswords/crossword.js
+++ b/static/src/javascripts/projects/common/modules/crosswords/crossword.js
@@ -749,7 +749,7 @@ class Crossword extends Component {
 
 		return (
 			<div
-				className={`crossword__container crossword__container--${this.props.data.crosswordType} crossword__container--react`}
+				className={`crossword__container crossword__container--${this.props.data.dimensions.cols}cell crossword__container--react`}
 				data-link-name="Crosswords"
 			>
 				<div
diff --git a/static/src/stylesheets/module/crosswords/_cell.scss b/static/src/stylesheets/module/crosswords/_cell.scss
index 3a223d2d3b69..5da89a394416 100644
--- a/static/src/stylesheets/module/crosswords/_cell.scss
+++ b/static/src/stylesheets/module/crosswords/_cell.scss
@@ -33,8 +33,8 @@
     -webkit-font-smoothing: subpixel-antialiased;
     transition: opacity .15s ease-in;
 
-    @each $xword, $cells in $xword-grid-sizes {
-        .crossword__container--#{$xword} & {
+    @each $cells in $xword-cell-sizes {
+        .crossword__container--#{$cells}cell & {
             font-size: ceil(1.2px * $cells);
 
             @include mq(tablet) {
diff --git a/static/src/stylesheets/module/crosswords/_layout.scss b/static/src/stylesheets/module/crosswords/_layout.scss
index e42a6cf42c9d..7291a1b6ee54 100644
--- a/static/src/stylesheets/module/crosswords/_layout.scss
+++ b/static/src/stylesheets/module/crosswords/_layout.scss
@@ -4,10 +4,10 @@
     @return $cells * ($xword-cell-width + $xword-border-width) + $xword-border-width;
 }
 
-@each $xword, $cells in $xword-grid-sizes {
+@each $cells in $xword-cell-sizes {
     $size: xword-grid-dimensions($cells);
 
-    .crossword__container--#{$xword} {
+    .crossword__container--#{$cells}cell {
         @include mq(tablet) {
             padding-left: $size;
 
diff --git a/static/src/stylesheets/module/crosswords/_vars.scss b/static/src/stylesheets/module/crosswords/_vars.scss
index b43080539a77..9503aaa5b901 100644
--- a/static/src/stylesheets/module/crosswords/_vars.scss
+++ b/static/src/stylesheets/module/crosswords/_vars.scss
@@ -11,14 +11,4 @@ $xword-focussed-background-colour: #fff7b2;
 
 $xword-clue-number-width: 32px;
 
-$xword-grid-sizes: (
-    quick-cryptic: 11,
-    quick: 13,
-    cryptic: 15,
-    prize: 15,
-    quiptic: 15,
-    genius: 15,
-    speedy: 13,
-    everyman: 15,
-    weekend: 13
-);
+$xword-cell-sizes: 11, 13, 15, 17, 19, 21, 23, 25, 27;