From 5141878b4b0733bb8fffa66051b9783282523c51 Mon Sep 17 00:00:00 2001 From: Alexander Date: Tue, 10 Jun 2025 16:20:24 -0400 Subject: [PATCH] Fixes #34 some issues with breakpoints --- public/index.html | 4 +- .../{breakpoints => breakpoint}/index.html | 14 +++- public/patterns/core/colours/index.html | 7 ++ public/patterns/core/header/index.html | 7 ++ public/patterns/core/status/index.html | 13 +++- public/patterns/core/sticky-note/index.html | 69 +++++++++++-------- public/patterns/core/switch/index.html | 7 ++ public/patterns/core/tooltip/index.html | 9 +++ src/pg/_config.pug | 3 +- src/pg/patterns/core/breakpoint/index.pug | 6 +- 10 files changed, 97 insertions(+), 42 deletions(-) rename public/patterns/core/{breakpoints => breakpoint}/index.html (85%) diff --git a/public/index.html b/public/index.html index feec188..374b809 100644 --- a/public/index.html +++ b/public/index.html @@ -76,8 +76,8 @@

Header Complete

-
-

Breakpoints +
+

Breakpoint Complete

diff --git a/public/patterns/core/breakpoints/index.html b/public/patterns/core/breakpoint/index.html similarity index 85% rename from public/patterns/core/breakpoints/index.html rename to public/patterns/core/breakpoint/index.html index 1906326..c0fab6f 100644 --- a/public/patterns/core/breakpoints/index.html +++ b/public/patterns/core/breakpoint/index.html @@ -2,6 +2,13 @@ Pattern +

What is it

@@ -14,8 +21,8 @@

When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across.

- 
@import "[path-to]/breakpoints";
-@include break([breakpoint]) {
+        
@use "scss/core/breakpoint/breakpoint";
+@include breapoint.break([breakpoint]) {
 	// css here
 }

         
//-		DS2 core (c) 2024 Alexander McIlwraith 
@@ -24,12 +31,13 @@
 // default breakpoints match bootstrap 5 breakpoints.
 $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;
 
-@mixin breakpoint-debug {
+@mixin debug {
 	body::before, body::after {
 		background-color: #555;	
 		color: white;	
 		content: "bigger than extra large";
 		display: grid;
+		font-family: sans-serif;
 		font-size: 25px;
 		grid-template-columns: auto;
 		padding: 25px;
diff --git a/public/patterns/core/colours/index.html b/public/patterns/core/colours/index.html
index 191321b..ba3336d 100644
--- a/public/patterns/core/colours/index.html
+++ b/public/patterns/core/colours/index.html
@@ -2,6 +2,13 @@
  
   
     Pattern
+    
   
   
     
What is it

diff --git a/public/patterns/core/header/index.html b/public/patterns/core/header/index.html
index be21293..037e6de 100644
--- a/public/patterns/core/header/index.html
+++ b/public/patterns/core/header/index.html
@@ -2,6 +2,13 @@
  
   
     Pattern
+    
   
   
     
What is it

diff --git a/public/patterns/core/status/index.html b/public/patterns/core/status/index.html
index 272a5fb..2ec66a5 100644
--- a/public/patterns/core/status/index.html
+++ b/public/patterns/core/status/index.html
@@ -2,6 +2,13 @@
  
   
     Pattern
+    
   
   
     

@@ -52,7 +59,7 @@
                 Complete
               
               
-                 Breakpoints
+                 Breakpoint
                 Complete
               
               
@@ -83,7 +90,7 @@
               Complete (10)
             
              
-               Breakpoints
+               Breakpoint
               Layouts
             
              
@@ -136,7 +143,7 @@
          
-              
+              
diff --git a/public/patterns/core/sticky-note/index.html b/public/patterns/core/sticky-note/index.html
index 4101352..9925a7a 100644
--- a/public/patterns/core/sticky-note/index.html
+++ b/public/patterns/core/sticky-note/index.html
@@ -2,6 +2,13 @@
 Pattern
+    
What is it

@@ -279,38 +286,40 @@ const calculateStickyPosition = (s) => {
 	}
 }
 
-export function init(p = document){
-	font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
-
-	p.querySelectorAll("sticky-note").forEach((s) => {
-		if (s.querySelectorAll("svg").length == 0) {
-			
-			let wrapper = document.createElement("sticky-note-wrapper");
-
-			s.parentNode.insertBefore(wrapper, s);
-    		wrapper.appendChild(s);
-
-			s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
-			s.innerHTML = `
${s.innerHTML}
`;
-		}
-		calculateStickyPosition(s);
-		drag(s);
-		s.ondblclick = (e) => {
-			if (e.ctrlKey) {
-				calculateStickyPosition(s);
-			} else {
-				// add one click select
-			}
-		}
-	})
-
-
-	window.onresize = () => {
+module.exports = {
+	init: (p = document) => {
 		font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
-		let stickies = p.querySelectorAll("sticky-note");
-		stickies.forEach((s) => {
+
+		p.querySelectorAll("sticky-note").forEach((s) => {
+			if (s.querySelectorAll("svg").length == 0) {
+				
+				let wrapper = document.createElement("sticky-note-wrapper");
+
+				s.parentNode.insertBefore(wrapper, s);
+	    		wrapper.appendChild(s);
+
+				s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
+				s.innerHTML = `
${s.innerHTML}
`;
+			}
 			calculateStickyPosition(s);
-		});
+			drag(s);
+			s.ondblclick = (e) => {
+				if (e.ctrlKey) {
+					calculateStickyPosition(s);
+				} else {
+					// add one click select
+				}
+			}
+		})
+
+
+		window.onresize = () => {
+			font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
+			let stickies = p.querySelectorAll("sticky-note");
+			stickies.forEach((s) => {
+				calculateStickyPosition(s);
+			});
+		}
 	}
 }
diff --git a/public/patterns/core/switch/index.html b/public/patterns/core/switch/index.html
index 65977b1..e148d19 100644
--- a/public/patterns/core/switch/index.html
+++ b/public/patterns/core/switch/index.html
@@ -2,6 +2,13 @@
 Pattern
+    
What is it

diff --git a/public/patterns/core/tooltip/index.html b/public/patterns/core/tooltip/index.html
index b22aa45..c470081 100644
--- a/public/patterns/core/tooltip/index.html
+++ b/public/patterns/core/tooltip/index.html
@@ -2,6 +2,13 @@
 Pattern
+    
What is it

@@ -187,6 +194,7 @@
         
//-		DS2 core (c) 2024 Alexander McIlwraith 
 //-		Licensed under CC BY-SA 4.0 
 
+$font-body: sans-serif !default;
 $tooltip-border-radius: .5rem !default;
 $tooltip-dark-allow: true !default;
 $tooltip-dark-background: #1f2127 !default;
@@ -215,6 +223,7 @@ $tooltip-pointer-top: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000
 		border-radius: $tooltip-border-radius;
 		color: $tooltip-light-foreground;
 		filter: $tooltip-light-drop-shadow;
+		$font-family: $font-body;
 		font-size: 1rem;
 		font-weight: 400;
 		inline-size: max-content;
diff --git a/src/pg/_config.pug b/src/pg/_config.pug
index 2adb3da..658d352 100644
--- a/src/pg/_config.pug
+++ b/src/pg/_config.pug
@@ -2,6 +2,7 @@
 - var lang = "en-uk"
 - var colorpfx =  "colour"
 - var headings = ["What is it", "When to use it", "How to use it"]
+- var downloadExtensions = ["js", "pug", "scss"]
 - var generateColourToken = ["colours"]
 
 - 
@@ -49,7 +50,7 @@
 					core: true,
 				}, 
 				{
-					name: "breakpoints",
+					name: "breakpoint",
 					status: "complete",
 					core: true,
 				},
diff --git a/src/pg/patterns/core/breakpoint/index.pug b/src/pg/patterns/core/breakpoint/index.pug
index 1ff66ef..7edc73e 100644
--- a/src/pg/patterns/core/breakpoint/index.pug
+++ b/src/pg/patterns/core/breakpoint/index.pug
@@ -21,10 +21,10 @@ block content
 		div(tab="scss")
 			+h(3)
 			pre.language-sass.
-				@import "scss/core/breakpoints/breakpoints";
-				@include break([breakpoint]) {
+				@use "scss/core/breakpoint/breakpoint";
+				@include breapoint.break([breakpoint]) {
 					// css here
 				}
 			+h(4)
 			pre.language-sass
-				include _breakpoints.scss
\ No newline at end of file
+				include _breakpoint.scss
\ No newline at end of file


            
             
 Breakpoints Breakpoint
               Complete
               Layouts