From a51b445aa37d7a8618ec2a4bae3ebd02c1f8e3e6 Mon Sep 17 00:00:00 2001
From: Laurent Carcone <laurent@w3.org>
Date: Fri, 22 Nov 2024 14:06:11 +0100
Subject: [PATCH] redesign the charter template form

---
 README.md                      |   2 +-
 html/s24-template-charter.html | 171 ++++++++++++++++++++++++---------
 html/s24-template-pr.html      |   3 +-
 3 files changed, 131 insertions(+), 45 deletions(-)

diff --git a/README.md b/README.md
index 246f6ba..014a6f4 100644
--- a/README.md
+++ b/README.md
@@ -37,7 +37,7 @@ It contains the snapshots of some of the HTML pages of the application and its e
 * [WBS Template meeting registration using new Design System](https://w3c.github.io/wbs-design/html/s24-template-meeting.html)  (Draft)
 * [WBS Teleconference scheduling using new Design System](https://w3c.github.io/wbs-design/html/s24-template-teleconf.html)  (Draft)
 * [WBS Template CfR for Proposed Recommendation using new Design System](https://w3c.github.io/wbs-design/html/s24-template-pr.html)
-* [WBS Template CfR Group Charter using new Design System](https://w3c.github.io/wbs-design/html/s24-template-charter.html)  (Draft)
+* [WBS Template CfR Group Charter using new Design System](https://w3c.github.io/wbs-design/html/s24-template-charter.html) 
 
 
 
diff --git a/html/s24-template-charter.html b/html/s24-template-charter.html
index d9c1870..041675d 100644
--- a/html/s24-template-charter.html
+++ b/html/s24-template-charter.html
@@ -372,62 +372,147 @@ <h2 class="nav__submenu__intro__heading">About</h2>
    <article>
 
    <h1>Create a Call For Review for a Working Group or Interest Group Charter</h1>
-   <p>This forms allow you to create a Call For Review for a Working
-   Group or Interest Group Charter. The generated form is
+
+  <div class="l-box note note--info" role="status">
+      <h2 class="txt-saturn">Template information</h2>
+      <ul class="clean-list" role="list">
+	<li>This forms allow you to create a Call For Review for a Working
+	Group or Interest Group Charter.</li>
+	<li> The generated form is
    <strong>incomplete</strong> and requires you to provide some
    additional information such as an executive summary and the list of
-   materials to review. You  can freely update the generated form
-   using <a href="https://www.w3.org/2002/09/wbs/99999/">WBS interface</a>.</p>
+   materials to review.</li>
+	<li>You  can freely update the generated form
+   using <a href="https://www.w3.org/2002/09/wbs/99999/">WBS interface.</a></li>
+      </ul>
+  </div>
 
+<div class='l-box field-group'>
 <form action="https://www.w3.org/2002/09/wbs/99999/factory?fromTemplate" method="post">
-<div class="create">
-<p>
+
 <input type="hidden" name="startdate" id="startdate" value="2024-10-30" />
 <input type="hidden" name="resultsACL" value="memberOrTeam" />
 <input type="hidden" name="voterBehalf" value="employer" />
 <input type="hidden" name="wgid" value="99999" />
 <input type="hidden" name="type" value="apcfr" />
 <input type="hidden" name="params[emailCC]" value="w3c-archive@w3.org,w3c-ac-forum@w3.org" />
-<ul class='alignedlabels edit'>
-<li><label for="shortdesc">A short name for this review:</label> <input type="text" name="qaireno"  id="shortdesc" maxlength="40" size="15" /></li>
-<li><label for="uri">Charter URI:</label> <input type="text" id="uri" name="params[activityURI]" />
-<li><label for="teamname">Team Contact name:</label> <input type="text" id="teamname" name="params[activityLead]" />
-<li><label for="teamemail">Team Contact email:</label> <input type="text" id="teamemail" name="params[activityLeadEmail]" />
-<li><label for="wgnames">Name of the Working or Interest Group:</label> <input type="text" id="wgnames" name="params[groups]" />
-<li><label for="newscope">In case of a renewal of an existing charter, has the group scope changed?</label><fieldset> 
-<label>Yes <input type="radio" name="params[scope]" value="yes" checked="checked" /></label> &nbsp; 
-<label>No <input type="radio" name="params[scope]" value="no" /></label>
-</fieldset></li>
-<li><label for="closedate">End of review period:</label> <input type="date" id="closedate" size="10" name="closedate" value="YYYY-MM-DD" /></li>
-<li><label for="horizontalreview">Strategy Issue URI of horizontal review of the charter:</label> <input type="text" id="horizontalreview" name="params[issueURI]" />
-
-<li>
-<label for="reminderoption">Enable reminder:</label>
-<input id="reminderoption" name="reminderoption" title="reminder date option"
-type="checkbox" />
-&nbsp; <span class="elem_hide" id="reminderalert"> <em>This option is not
-available for questionnaires open for less than 8 days</em></span>
-<div class="elem_hide" id="remindervalue">
-<ul>
-<li><label for="reminderdate">Reminder date:</label>
-<input id="reminderdate" name="reminderdate" type="date" size="10" value="YYYY-MM-DD" />
-</li>
-<li><label for="remindelist">Reminder mailing list:</label>
-<input id="remindelist" name="reminderlist" type="email" maxlength="255" value="" />
-&nbsp; <span> (enter one email address, if empty an email will be sent to each non-responder group participant)</span></li>
-</ul>
+
+<div class="field">
+    <label for="shortdesc">
+      <span class="field-label">A short name for this review <span
+    class="required"> (Required)</span></span>
+    </label>
+    <input type="text" id="shortdesc" name="qaireno" required="required" value="">
+</div>
+
+<div class="field">
+    <label for="uri">
+      <span class="field-label">Charter URI<span class="required"> (Required)</span></span>
+    </label>
+    <input type="text" id="uri" name="params[activityURI]" required="required" value="">
+</div>
+
+<div class="field">
+    <label for="teamname">
+      <span class="field-label">Team Contact name<span
+    class="required"> (Required)</span></span>
+    </label>
+    <input type="text" id="teamname" name="params[activityLead]" required="required" value="">
 </div>
-</li>
-
-<li><label for="email">Email to which reviews are sent:</label> <input type="text" id="email" name="emailNotif" /></label></li>
-</ul>
-</p>
-<p>
-<input type="submit" class="submit_button" />&nbsp;<input type="reset" class="reset_button" />
-</p>
+
+<div class="field">
+    <label for="teamemail">
+      <span class="field-label">Team Contact email<span class="required"> (Required)</span></span>
+    </label>
+    <input type="text" id="teamemail" name="params[activityLeadEmail]" required="required" value="">
+</div>
+
+<div class="field">
+    <label for="wgnames">
+      <span class="field-label">Name of the Working or Interest Group<span class="required"> (Required)</span></span>
+    </label>
+    <input type="text" id="wgnames" name="params[groups]" required="required" value="">
+</div>
+
+<div class="field">
+	<fieldset role="group">
+		<legend class="group-legend">In case of a renewal of an existing charter, has the group scope changed?</legend>
+		<div class="radio-item">
+			<input type="radio" id="scope-changed-yes" name="params[scope]" value="Yes" checked="checked">
+			<label for="scope-changed-yes">
+				<span class="faux-label">Yes</span>
+			</label>
+		</div>
+		<div class="radio-item">
+			<input type="radio" id="scope-changed-no" name="params[scope]" value="No" >
+			<label for="scope-changed-no">
+				<span class="faux-label">No</span>
+			</label>
+		</div>
+	</fieldset>
+</div>
+
+<div class="field">
+	<label for="closedate">
+		<span class="field-label">End of review period <span class="required">(Required)</span></span>
+	</label>
+	<div class="field-hint" id="hint-closedate">Ends at midnight Eastern time</div>
+        <input required="required" name="closedate" type="date" size="10" id="closedate" class="w8em format-y-m-d divider-dash highlight-days-67  no-transparency input-width-10" value="YYYY-MM-DD" />
 </div>
+
+<div class="field">
+    <label for="horizontalreview">
+      <span class="field-label">Strategy Issue URI of horizontal review of the charter</span>
+    </label>
+    <input type="text" id="horizontalreview" name="params[issueURI]" value="">
+</div>
+
+<div class="field">
+	<fieldset role="group">
+		<legend class="group-legend">Enable reminder</legend>
+		<div class="checkbox-item">
+			<input type="checkbox" name="reminderoption" id="reminderoption" title="reminder date option" appearance="base">
+			<label for="reminderoption">
+			<span class="faux-label">This option is not available for questionnaires open for less than 8 days.</span>
+			</label>
+		</div>
+	</fieldset>
+</div>
+
+<div id="remindervalue" class="field-group">
+<div class="field">
+	<label for="reminderdate">
+		<span class="field-label">Reminder date</span>
+	</label>
+        <input required="required" name="reminderdate" type="date" size="10" id="reminderdate" class="w8em format-y-m-d divider-dash highlight-days-67  no-transparency input-width-10" value="YYYY-MM-DD" />
+</div>
+    
+<div class="field">
+	<label for="reminderlist">
+ 	  <span class="field-label">Reminder mailing list<span class="required"></span></span>
+	</label>
+	<div class="field-hint" id="hint-reminderlist">enter one email address, if empty an email will be sent to each non-responder participant</div>
+        <input required="required" type="text" id="reminderlist" name="reminderlist" value="" />
+</div>
+</div>
+
+<div class="field">
+  <label for="email">
+    <span class="field-label">Email to which reviews are sent</span>
+  </label>
+  <input id="email" name="emailNotif" type="email" multiple="multiple" maxlength="255" value="">
+</div>		
+
+<div class="l-cluster component--members__cta">
+    <div>
+	<button class="button" type="button" name="action" value="Submit">Submit</button>
+	<button class="button button--alt" type="button" name="action" value="Reset">Reset</button>
+    </div>
+</div>
+
 </form>
-   
+</div>
+
 </article>
 	
  <div class="related">
diff --git a/html/s24-template-pr.html b/html/s24-template-pr.html
index ecbaa31..aec3ce3 100644
--- a/html/s24-template-pr.html
+++ b/html/s24-template-pr.html
@@ -428,7 +428,7 @@ <h2 class="txt-saturn">Template information</h2>
 	</fieldset>
 </div>
 
-
+<div id="remindervalue" class="field-group">
 <div class="field">
 	<label for="reminderdate">
 		<span class="field-label">Reminder date</span>
@@ -443,6 +443,7 @@ <h2 class="txt-saturn">Template information</h2>
 	<div class="field-hint" id="hint-reminderlist">enter one email address, if empty an email will be sent to each non-responder participant of the Test Group</div>
         <input required="required" type="text" id="reminderlist" name="reminderlist" value="" />
 </div>
+</div>
 
 <div class="field">
   <label for="emailNotif">