From 9cba20c39cf6fc30f718ab44c1e6d3daaa086b12 Mon Sep 17 00:00:00 2001
From: "Alexander (M2)" <alexander@gamv.ca>
Date: Tue, 16 Jul 2024 03:57:34 -0400
Subject: [PATCH] Completed descriptions for layout patterns

---
 public/index.html                           | 18 +++++------
 public/patterns/core/breakpoints/index.html |  4 +++
 public/patterns/core/header/index.html      |  3 ++
 public/patterns/core/status/index.html      | 36 ++++++++++-----------
 public/patterns/core/tabs/index.html        |  3 +-
 src/pg/_config.pug                          |  6 ++--
 src/pg/patterns/core/breakpoints/index.pug  |  7 ++++
 src/pg/patterns/core/header/index.pug       |  5 +++
 src/pg/patterns/core/tabs/index.pug         |  8 ++---
 9 files changed, 54 insertions(+), 36 deletions(-)
diff --git a/public/index.html b/public/index.html
index 31de794..b196475 100644
--- a/public/index.html
+++ b/public/index.html
@@ -72,17 +72,17 @@
           <h1 class="status-complete"><span>Layouts
               <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
         </article>
-        <article id="layouts-header" data-name="header" data-status="in-progress" data-template="pug" data-core="true" data-path="layouts/header">
-          <h1 class="status-in-progress"><span>Header
-              <tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1>
+        <article id="layouts-header" data-name="header" data-status="complete" data-template="pug" data-core="true" data-path="layouts/header">
+          <h1 class="status-complete"><span>Header
+              <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
         </article>
-        <article id="layouts-breakpoints" data-name="breakpoints" data-status="in-progress" data-template="pug" data-core="true" data-path="layouts/breakpoints">
-          <h1 class="status-in-progress"><span>Breakpoints
-              <tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1>
+        <article id="layouts-breakpoints" data-name="breakpoints" data-status="complete" data-template="pug" data-core="true" data-path="layouts/breakpoints">
+          <h1 class="status-complete"><span>Breakpoints
+              <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
         </article>
-        <article id="layouts-tabs" data-name="tabs" data-status="in-progress" data-template="pug" data-core="true" data-path="layouts/tabs">
-          <h1 class="status-in-progress"><span>Tabs
-              <tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1>
+        <article id="layouts-tabs" data-name="tabs" data-status="complete" data-template="pug" data-core="true" data-path="layouts/tabs">
+          <h1 class="status-complete"><span>Tabs
+              <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
         </article>
         <article id="status" data-name="status" data-status="complete" data-template="pug" data-core="true" data-path="status">
           <h1 class="status-complete"><span>Status
diff --git a/public/patterns/core/breakpoints/index.html b/public/patterns/core/breakpoints/index.html
index a8801e3..6d12e98 100644
--- a/public/patterns/core/breakpoints/index.html
+++ b/public/patterns/core/breakpoints/index.html
@@ -5,8 +5,12 @@
   </head>
   <body data-prismjs-copy-timeout="1500">
     <h2>What is it</h2>
+    <p>Breakpoints enable responsive mobile design.</p>
     <h2>When to use it</h2>
+    <p>Use breakpoints when designing for different screen sizes. </p>
+    <p>The breakpoints SCSS mixin included implements media queries to allow for the change of the layout and design based on pre-defined screen sizes. </p>
     <h2>How to use it</h2>
+    <p>This pattern is only available for SCSS breakpoints. The  mixin is avai</p>
     <p>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. </p>
     <div class="tab-group" id="breakpoints">
       <pre class="language-css" data-tab="scss">//-		DS2 core (c) 2024 Alexander McIlwraith 
diff --git a/public/patterns/core/header/index.html b/public/patterns/core/header/index.html
index 2a14da5..ba020ac 100644
--- a/public/patterns/core/header/index.html
+++ b/public/patterns/core/header/index.html
@@ -5,8 +5,11 @@
   </head>
   <body data-prismjs-copy-timeout="1500">
     <h2>What is it</h2>
+    <p>A header is layout pattern that helps the user identify the site.  </p>
     <h2>When to use it</h2>
+    <p>Use a header at the top of every page. The 'front page' of a site may have a different header than the rest of the pages. </p>
     <h2>How to use it</h2>
+    <p>Place the header at the top of the page after the skip to main content link. This basic header should be replaced with your own site's header. </p>
     <div class="tab-group" id="header">
       <pre class="language-html" data-tab="html">
         <!-- create temp variables and store the design system values-->
diff --git a/public/patterns/core/status/index.html b/public/patterns/core/status/index.html
index bb72b18..272a5fb 100644
--- a/public/patterns/core/status/index.html
+++ b/public/patterns/core/status/index.html
@@ -49,15 +49,15 @@
               <td><span class="status-complete">Complete</span></td>
               <tr>
                 <td><a href="./?p=layouts/header"> Header</a></td>
-                <td><span class="status-in-progress">In progress</span></td>
+                <td><span class="status-complete">Complete</span></td>
               </tr>
               <tr>
                 <td><a href="./?p=layouts/breakpoints"> Breakpoints</a></td>
-                <td><span class="status-in-progress">In progress</span></td>
+                <td><span class="status-complete">Complete</span></td>
               </tr>
               <tr>
                 <td><a href="./?p=layouts/tabs"> Tabs</a></td>
-                <td><span class="status-in-progress">In progress</span></td>
+                <td><span class="status-complete">Complete</span></td>
               </tr>
             </tr>
             <tr>
@@ -77,23 +77,15 @@
               <td colspan="2"><span class="status-not-started">Not started (0)</span></td>
             </tr>
             <tr> 
-              <td colspan="2"><span class="status-in-progress">In progress (3)</span></td>
+              <td colspan="2"><span class="status-in-progress">In progress (0)</span></td>
+            </tr>
+            <tr> 
+              <td colspan="2"><span class="status-complete">Complete (10)</span></td>
             </tr>
             <tr> 
               <td> <a href="./?p=layouts/breakpoints">Breakpoints</a></td>
               <td>Layouts</td>
             </tr>
-            <tr> 
-              <td> <a href="./?p=layouts/header">Header</a></td>
-              <td>Layouts</td>
-            </tr>
-            <tr> 
-              <td> <a href="./?p=layouts/tabs">Tabs</a></td>
-              <td>Layouts</td>
-            </tr>
-            <tr> 
-              <td colspan="2"><span class="status-complete">Complete (7)</span></td>
-            </tr>
             <tr> 
               <td> <a href="./?p=colours">Colours</a></td>
               <td></td>
@@ -102,6 +94,10 @@
               <td> <a href="./?p=components">Components</a></td>
               <td></td>
             </tr>
+            <tr> 
+              <td> <a href="./?p=layouts/header">Header</a></td>
+              <td>Layouts</td>
+            </tr>
             <tr> 
               <td> <a href="./?p=layouts">Layouts</a></td>
               <td></td>
@@ -118,6 +114,10 @@
               <td> <a href="./?p=components/switch">Switch</a></td>
               <td>Components</td>
             </tr>
+            <tr> 
+              <td> <a href="./?p=layouts/tabs">Tabs</a></td>
+              <td>Layouts</td>
+            </tr>
             <tr> 
               <td> <a href="./?p=components/tooltip">Tooltip</a></td>
               <td>Components</td>
@@ -137,7 +137,7 @@
           <tbody> 
             <tr> 
               <td> <a href="./?p=layouts/breakpoints">Breakpoints</a></td>
-              <td><span><span class="status-in-progress">In Progress</span></span></td>
+              <td><span><span class="status-complete">Complete</span></span></td>
               <td>Layouts</td>
             </tr>
             <tr> 
@@ -152,7 +152,7 @@
             </tr>
             <tr> 
               <td> <a href="./?p=layouts/header">Header</a></td>
-              <td><span><span class="status-in-progress">In Progress</span></span></td>
+              <td><span><span class="status-complete">Complete</span></span></td>
               <td>Layouts</td>
             </tr>
             <tr> 
@@ -177,7 +177,7 @@
             </tr>
             <tr> 
               <td> <a href="./?p=layouts/tabs">Tabs</a></td>
-              <td><span><span class="status-in-progress">In Progress</span></span></td>
+              <td><span><span class="status-complete">Complete</span></span></td>
               <td>Layouts</td>
             </tr>
             <tr> 
diff --git a/public/patterns/core/tabs/index.html b/public/patterns/core/tabs/index.html
index 730206e..b4db36a 100644
--- a/public/patterns/core/tabs/index.html
+++ b/public/patterns/core/tabs/index.html
@@ -5,7 +5,7 @@
   </head>
   <body data-prismjs-copy-timeout="1500">
     <h2>What is it</h2>
-    <h2>When to use it</h2>
+    <p>A tabs component that provides different sections of content that are displayed one at a time when the user selects that information. </p>
     <h2>How to use it</h2>
     <p>The tabbed user interface enables users to jump to their target section quickly. Tabs present like logically group information on the same page. Information should  </p>
     <ul> 
@@ -15,6 +15,7 @@
       <li>obvious where they begin and end </li>
     </ul>
     <p>Users should not need to see content of multiple tabs simultaneously and the user should be able to easily recognise where they are within the content.  </p>
+    <h2>When to use it</h2>
     <p>The tab module can be initialised by importing a file with the javascript module using import * as tabs from "../pg/patterns/layouts/tabs/_tabs.js"; contains a modularized version of the jQuery code, so that it can be called on demand. It is what is used in the design system so that the JavaScript can be called at run time (after loading content).</p>
     <tabset id="tabs">
       <pre class="language-html" tab="html">
diff --git a/src/pg/_config.pug b/src/pg/_config.pug
index 357f2f0..2adb3da 100644
--- a/src/pg/_config.pug
+++ b/src/pg/_config.pug
@@ -45,17 +45,17 @@
 			files: [
 				{
 					name: "header",
-					status: "in-progress",
+					status: "complete",
 					core: true,
 				}, 
 				{
 					name: "breakpoints",
-					status: "in-progress",
+					status: "complete",
 					core: true,
 				},
 				{
 					name: "tabs",
-					status: "in-progress",
+					status: "complete",
 					core: true,
 				},
 			]
diff --git a/src/pg/patterns/core/breakpoints/index.pug b/src/pg/patterns/core/breakpoints/index.pug
index 49b9e93..00fbb43 100644
--- a/src/pg/patterns/core/breakpoints/index.pug
+++ b/src/pg/patterns/core/breakpoints/index.pug
@@ -5,8 +5,15 @@ extends ../../../core/_master-pattern
 block content
 	
 	+h(0)
+	p Breakpoints enable responsive mobile design.
+
 	+h(1)
+	p Use breakpoints when designing for different screen sizes. 
+
+	p The breakpoints SCSS mixin included implements media queries to allow for the change of the layout and design based on pre-defined screen sizes. 
+
 	+h(2)
+	p This pattern is only available for SCSS breakpoints. The  mixin is avai
 
 	p 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. 
 
diff --git a/src/pg/patterns/core/header/index.pug b/src/pg/patterns/core/header/index.pug
index 5981903..967bb85 100644
--- a/src/pg/patterns/core/header/index.pug
+++ b/src/pg/patterns/core/header/index.pug
@@ -5,8 +5,13 @@ extends ../../../core/_master-pattern
 block content
 
 	+h(0)
+	p A header is layout pattern that helps the user identify the site.  
 	+h(1)
+	p Use a header at the top of every page. The 'front page' of a site may have a different header than the rest of the pages. 
+
 	+h(2)
+	p Place the header at the top of the page after the skip to main content link. This basic header should be replaced with your own site's header. 
+
 
 	div.tab-group#header
 		pre.language-html(data-tab="html")
diff --git a/src/pg/patterns/core/tabs/index.pug b/src/pg/patterns/core/tabs/index.pug
index effd841..8a39849 100644
--- a/src/pg/patterns/core/tabs/index.pug
+++ b/src/pg/patterns/core/tabs/index.pug
@@ -5,9 +5,9 @@ extends ../../../core/_master-pattern
 block content
 
 	+h(0)
-	+h(1)
-	+h(2)
+	p A tabs component that provides different sections of content that are displayed one at a time when the user selects that information. 
 
+	+h(2)
 	p The tabbed user interface enables users to jump to their target section quickly. Tabs present like logically group information on the same page. Information should  
 
 	ul 
@@ -19,11 +19,9 @@ block content
 	p Users should not need to see content of multiple tabs simultaneously and the user should be able to easily recognise where they are within the content.  
 
 
+	+h(1)
 	p The tab module can be initialised by importing a file with the javascript module using import * as tabs from "../pg/patterns/layouts/tabs/_tabs.js"; contains a modularized version of the jQuery code, so that it can be called on demand. It is what is used in the design system so that the JavaScript can be called at run time (after loading content).
 
-
-
-
 	tabset#tabs
 		pre.language-html(tab="html")
 			include _tabs.pug
