From 1502687e4b8280ed89697a36568f6964dff27d98 Mon Sep 17 00:00:00 2001
From: "ben.freshwater" <ben.freshwater@ft.com>
Date: Tue, 13 Aug 2024 16:04:32 +0100
Subject: [PATCH 1/9] feat: introduce `o3-grid-column-width` CSS Custom
 Property

---
 components/o3-foundation/grid.css | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/o3-foundation/grid.css b/components/o3-foundation/grid.css
index 07e82da272..90c75e5cbd 100644
--- a/components/o3-foundation/grid.css
+++ b/components/o3-foundation/grid.css
@@ -1,4 +1,5 @@
 :root {
+	--_o3-grid-gutters: calc(var(--o3-grid-columns) - 1);
 	--o3-grid-template: 0px
 		repeat(var(--o3-grid-columns), 1fr) 0px;
 	--o3-grid-area: 'bleed-left content-start . . content-end bleed-right';
@@ -10,6 +11,7 @@
 			repeat(var(--o3-grid-columns), 1fr) 8px;
 		--o3-grid-area: 'bleed-left content-start . . . . . . content-end bleed-right';
 		--o3-grid-columns: 8;
+		--o3-grid-column-width: calc((740px - var(--_o3-grid-gutters) * var(--o3-grid-gap)) / var(--o3-grid-columns));
 	}
 
 	@media screen and (min-width: 980px) {
@@ -18,12 +20,14 @@
 		--o3-grid-area: 'bleed-left content-start . . . . . . . . . . content-end bleed-right';
 		--o3-grid-columns: 12;
 		--o3-grid-gap: 24px;
+		--o3-grid-column-width: calc((980px - var(--_o3-grid-gutters) * var(--o3-grid-gap)) / var(--o3-grid-columns));
 	}
 
 	@media screen and (min-width: 1268px) {
-		--column-width: calc((1220px - 11 * var(--o3-grid-gap)) / 12);
+		--o3-grid-columns: 12;
 		--o3-grid-template: 1fr
-			repeat(var(--o3-grid-columns), var(--column-width)) 1fr;
+			repeat(var(--o3-grid-columns), var(--o3-grid-column-width)) 1fr;
+		--o3-grid-column-width: calc((1220px - var(--_o3-grid-gutters) * var(--o3-grid-gap)) / var(--o3-grid-columns));
 	}
 }
 

From 9979b82deee650678b3244add4e01471f27a9e89 Mon Sep 17 00:00:00 2001
From: "ben.freshwater" <ben.freshwater@ft.com>
Date: Wed, 14 Aug 2024 13:40:10 +0100
Subject: [PATCH 2/9] feat: <squash> use viewport width

---
 components/o3-foundation/grid.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/o3-foundation/grid.css b/components/o3-foundation/grid.css
index 90c75e5cbd..476c540888 100644
--- a/components/o3-foundation/grid.css
+++ b/components/o3-foundation/grid.css
@@ -5,13 +5,14 @@
 	--o3-grid-area: 'bleed-left content-start . . content-end bleed-right';
 	--o3-grid-columns: 4;
 	--o3-grid-gap: 16px;
+	--o3-grid-column-width: calc((100vw - var(--_o3-grid-gutters) * var(--o3-grid-gap)) / var(--o3-grid-columns));
 
 	@media screen and (min-width: 740px) {
 		--o3-grid-template: 8px
 			repeat(var(--o3-grid-columns), 1fr) 8px;
 		--o3-grid-area: 'bleed-left content-start . . . . . . content-end bleed-right';
 		--o3-grid-columns: 8;
-		--o3-grid-column-width: calc((740px - var(--_o3-grid-gutters) * var(--o3-grid-gap)) / var(--o3-grid-columns));
+
 	}
 
 	@media screen and (min-width: 980px) {
@@ -20,7 +21,6 @@
 		--o3-grid-area: 'bleed-left content-start . . . . . . . . . . content-end bleed-right';
 		--o3-grid-columns: 12;
 		--o3-grid-gap: 24px;
-		--o3-grid-column-width: calc((980px - var(--_o3-grid-gutters) * var(--o3-grid-gap)) / var(--o3-grid-columns));
 	}
 
 	@media screen and (min-width: 1268px) {

From 0fd1e92ccf552ff45be392700edd70803d23902b Mon Sep 17 00:00:00 2001
From: "ben.freshwater" <ben.freshwater@ft.com>
Date: Wed, 14 Aug 2024 15:30:01 +0100
Subject: [PATCH 3/9] feat: <squash> introduce span columns variable

---
 components/o3-foundation/grid.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/o3-foundation/grid.css b/components/o3-foundation/grid.css
index 476c540888..37ab771b9d 100644
--- a/components/o3-foundation/grid.css
+++ b/components/o3-foundation/grid.css
@@ -5,7 +5,8 @@
 	--o3-grid-area: 'bleed-left content-start . . content-end bleed-right';
 	--o3-grid-columns: 4;
 	--o3-grid-gap: 16px;
-	--o3-grid-column-width: calc((100vw - var(--_o3-grid-gutters) * var(--o3-grid-gap)) / var(--o3-grid-columns));
+	--_o3-grid-column-width: calc((100vw - var(--_o3-grid-gutters) * var(--o3-grid-gap)) / var(--o3-grid-columns));
+	--o3-grid-span-columns: calc(((var(--_o3-grid-column-width) + var(--o3-grid-gap)) * var(--o3-grid-span-columns-count)) - var(--o3-grid-gap));
 
 	@media screen and (min-width: 740px) {
 		--o3-grid-template: 8px

From 845543d0958efe185d67dcd1f69359289cf08b33 Mon Sep 17 00:00:00 2001
From: "ben.freshwater" <ben.freshwater@ft.com>
Date: Wed, 14 Aug 2024 16:05:03 +0100
Subject: [PATCH 4/9] feat: <squash> adjust naming

---
 components/o3-foundation/grid.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/o3-foundation/grid.css b/components/o3-foundation/grid.css
index 37ab771b9d..29e3aecc5e 100644
--- a/components/o3-foundation/grid.css
+++ b/components/o3-foundation/grid.css
@@ -6,7 +6,7 @@
 	--o3-grid-columns: 4;
 	--o3-grid-gap: 16px;
 	--_o3-grid-column-width: calc((100vw - var(--_o3-grid-gutters) * var(--o3-grid-gap)) / var(--o3-grid-columns));
-	--o3-grid-span-columns: calc(((var(--_o3-grid-column-width) + var(--o3-grid-gap)) * var(--o3-grid-span-columns-count)) - var(--o3-grid-gap));
+	--o3-grid-columns-to-span-width: calc(((var(--_o3-grid-column-width) + var(--o3-grid-gap)) * var(--o3-grid-columns-to-span-count)) - var(--o3-grid-gap));
 
 	@media screen and (min-width: 740px) {
 		--o3-grid-template: 8px

From 514e70c951bfc4b652897d5cd7e33085abf0ba47 Mon Sep 17 00:00:00 2001
From: "ben.freshwater" <ben.freshwater@ft.com>
Date: Wed, 14 Aug 2024 16:13:01 +0100
Subject: [PATCH 5/9] feat: <squash> introduce intructions into readme

---
 components/o3-foundation/README.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/components/o3-foundation/README.md b/components/o3-foundation/README.md
index 8c048041e9..4a1b31ec9a 100644
--- a/components/o3-foundation/README.md
+++ b/components/o3-foundation/README.md
@@ -181,6 +181,19 @@ You can precisely control the positioning of grid items using the `grid-column`
 </div>
 ```
 
+#### Using grid with nested children
+
+In some cases, an element may be nested deeply and not have access to the grid. o3-foundation provides CSS Custom Properties to help align elements to grid in these cases:
+
+```css
+.my-nested-class {
+	--o3-grid-columns-to-span-count: 6;
+	width: var(--o3-grid-columns-to-span-width)
+}
+```
+
+Use `--o3-grid-columns-to-span-count` to control how many columns you want your element to span. In this example, the width of `my-nested-class` will be equivalent to 6 columns. `--o3-grid-columns-to-span-count` must be defined for `.o3-grid-columns-to-span-width` to work.
+
 #### Advanced usage of grid
 
 For advanced usage `o3-foundation` provides CSS Custom Properties for grid that you can set on your class:

From 91991bb3bff5433d6f7a3e4452ab30215b8fb09d Mon Sep 17 00:00:00 2001
From: "ben.freshwater" <ben.freshwater@ft.com>
Date: Thu, 15 Aug 2024 16:30:24 +0100
Subject: [PATCH 6/9] feat: <squash> use class to apply custom property

---
 components/o3-foundation/grid.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/o3-foundation/grid.css b/components/o3-foundation/grid.css
index 29e3aecc5e..eef81c1aec 100644
--- a/components/o3-foundation/grid.css
+++ b/components/o3-foundation/grid.css
@@ -6,7 +6,6 @@
 	--o3-grid-columns: 4;
 	--o3-grid-gap: 16px;
 	--_o3-grid-column-width: calc((100vw - var(--_o3-grid-gutters) * var(--o3-grid-gap)) / var(--o3-grid-columns));
-	--o3-grid-columns-to-span-width: calc(((var(--_o3-grid-column-width) + var(--o3-grid-gap)) * var(--o3-grid-columns-to-span-count)) - var(--o3-grid-gap));
 
 	@media screen and (min-width: 740px) {
 		--o3-grid-template: 8px
@@ -32,6 +31,10 @@
 	}
 }
 
+.o3-grid * {
+	--o3-grid-columns-to-span-width: calc(((var(--_o3-grid-column-width) + var(--o3-grid-gap)) * var(--o3-grid-span-columns-count)) - var(--o3-grid-gap));
+}
+
 .o3-grid {
 	display: grid;
 	grid-template-columns: var(--o3-grid-template);

From 296b6a4d013fee2ff1b882fbaccf0c3d2ccffd1b Mon Sep 17 00:00:00 2001
From: "ben.freshwater" <ben.freshwater@ft.com>
Date: Fri, 16 Aug 2024 10:32:36 +0100
Subject: [PATCH 7/9] feat: <squash> introduce demo

---
 components/o3-foundation/grid.css                   | 2 +-
 components/o3-foundation/stories/grid-sb-styles.css | 6 ++++++
 components/o3-foundation/stories/grid.tsx           | 4 ++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/components/o3-foundation/grid.css b/components/o3-foundation/grid.css
index eef81c1aec..d3b777f059 100644
--- a/components/o3-foundation/grid.css
+++ b/components/o3-foundation/grid.css
@@ -32,7 +32,7 @@
 }
 
 .o3-grid * {
-	--o3-grid-columns-to-span-width: calc(((var(--_o3-grid-column-width) + var(--o3-grid-gap)) * var(--o3-grid-span-columns-count)) - var(--o3-grid-gap));
+	--o3-grid-columns-to-span-width: calc(((var(--_o3-grid-column-width) + var(--o3-grid-gap)) * var(--o3-grid-columns-to-span-count)) - var(--o3-grid-gap));
 }
 
 .o3-grid {
diff --git a/components/o3-foundation/stories/grid-sb-styles.css b/components/o3-foundation/stories/grid-sb-styles.css
index 020b187239..c4e1c7ca11 100644
--- a/components/o3-foundation/stories/grid-sb-styles.css
+++ b/components/o3-foundation/stories/grid-sb-styles.css
@@ -7,3 +7,9 @@
 	background-color: tomato;
 	cursor: pointer;
 }
+
+.nested-element {
+	--o3-grid-columns-to-span-count: 2;
+	width: var(--o3-grid-columns-to-span-width);
+	background-color: green;
+}
diff --git a/components/o3-foundation/stories/grid.tsx b/components/o3-foundation/stories/grid.tsx
index e4e45a65b8..5dec010a65 100644
--- a/components/o3-foundation/stories/grid.tsx
+++ b/components/o3-foundation/stories/grid.tsx
@@ -74,6 +74,10 @@ export function O3Grid() {
 					{item.text}
 				</div>
 			))}
+			<div style={{gridColumn: `content-start / span 6`, backgroundColor: 'tomato'}}>
+				Span 6
+				<div className='nested-element'>Nested Element</div>
+			</div>
 		</div>
 	);
 }

From c74281dea75ac4eca0b784884bab45795cf34711 Mon Sep 17 00:00:00 2001
From: "ben.freshwater" <ben.freshwater@ft.com>
Date: Tue, 27 Aug 2024 10:29:27 +0100
Subject: [PATCH 8/9] chore: <squash> style stories inline

---
 components/o3-foundation/stories/grid.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/o3-foundation/stories/grid.tsx b/components/o3-foundation/stories/grid.tsx
index 5dec010a65..ef6d209198 100644
--- a/components/o3-foundation/stories/grid.tsx
+++ b/components/o3-foundation/stories/grid.tsx
@@ -74,9 +74,12 @@ export function O3Grid() {
 					{item.text}
 				</div>
 			))}
-			<div style={{gridColumn: `content-start / span 6`, backgroundColor: 'tomato'}}>
+			<div className="o3-grid-item" style={{gridColumn: `content-start / span 6`, backgroundColor: 'tomato'}}>
 				Span 6
-				<div className='nested-element'>Nested Element</div>
+				<div style={{'--o3-grid-columns-to-span-count': 2,
+					width: 'var(--o3-grid-columns-to-span-width)',
+					backgroundColor: 'lightblue'
+				}}>Nested Element span 2</div>
 			</div>
 		</div>
 	);

From fa15dc796e038d8e7fb9429fa65d7153c15f7dd4 Mon Sep 17 00:00:00 2001
From: "ben.freshwater" <ben.freshwater@ft.com>
Date: Tue, 27 Aug 2024 10:29:43 +0100
Subject: [PATCH 9/9] chore: <squash> style stories inline

---
 components/o3-foundation/stories/grid-sb-styles.css | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/components/o3-foundation/stories/grid-sb-styles.css b/components/o3-foundation/stories/grid-sb-styles.css
index c4e1c7ca11..020b187239 100644
--- a/components/o3-foundation/stories/grid-sb-styles.css
+++ b/components/o3-foundation/stories/grid-sb-styles.css
@@ -7,9 +7,3 @@
 	background-color: tomato;
 	cursor: pointer;
 }
-
-.nested-element {
-	--o3-grid-columns-to-span-count: 2;
-	width: var(--o3-grid-columns-to-span-width);
-	background-color: green;
-}