Merge pull request #54 from cabinetoffice/NTRNL-361-create-width-cont…

…ainer-commmon-component Ntrnl 361 create width container commmon component
cabinetoffice · Mar 21, 2024 · 236bf35 · 236bf35
2 parents 8151e18 + 3647810
commit 236bf35
Show file tree

Hide file tree

Showing 17 changed files with 434 additions and 498 deletions.
diff --git a/docs/Project Structure and Code Style.md b/docs/Project Structure and Code Style.md
@@ -82,37 +82,33 @@ Both `Nunjucks` and `GDS` style/components are utilised. To streamline the const
   {% include "include/back-link.html" %}
 {% endblock %}
 
-{% block content %}
-  <div class="govuk-grid-row">
-    <div class="govuk-grid-column-two-thirds">
-      <h1 class="govuk-heading-l">Add a GitHub Team</h1>
+{% block pageContent %}
+  <h1 class="govuk-heading-l">Add a GitHub Team</h1>
 
-      <p class="govuk-body">
-        GitHub Teams can be used to manage repository permissions and mentions for groups of members.
-      </p>
+  <p class="govuk-body">
+    GitHub Teams can be used to manage repository permissions and mentions for groups of members.
+  </p>
 
-      {% include "include/error-list.html" %}
+  {% include "include/error-list.html" %}
 
-      <form method="post" novalidate>
+  <form method="post" novalidate>
 
-        {% include "include/inputs/team-name.html" %}
+    {% include "include/inputs/team-name.html" %}
 
-        {% set githubHandleText = "Team maintainer GitHub handle" %}
-        {% include "include/inputs/github-handle.html" %}
+    {% set githubHandleText = "Team maintainer GitHub handle" %}
+    {% include "include/inputs/github-handle.html" %}
 
-        {% set descriptionText = "Description (optional)" %}
-        {% set descriptionHint = "Explain the reason for adding this team." %}
+    {% set descriptionText = "Description (optional)" %}
+    {% set descriptionHint = "Explain the reason for adding this team." %}
 
-        {% include "include/description.html" %}
+    {% include "include/description.html" %}
 
-        {% include "include/save-button.html" %}
+    {% include "include/save-button.html" %}
 
-        {% set removePathURL = "/add-team/remove/" + id %}
-        {% include "include/remove-button.html" %}
-
-      </form>
-    </div>
-  </div>
+    {% set removePathURL = "/add-team/remove/" + id %}
+    {% include "include/remove-button.html" %}
+
+  </form>
 {% endblock %}
 ```
 
@@ -248,7 +244,7 @@ export const addTeam = [
     text: "Team name",
     classes: "govuk-label--m"
   },
-  classes: "govuk-input--width-10",
+  classes: "govuk-input--width-20",
   id: "team_name",
   name: "team_name",
   value: team_name

diff --git a/src/views/add-member.html b/src/views/add-member.html
@@ -4,117 +4,113 @@
   {% include "include/back-link.html" %}
 {% endblock %}
 
-{% block content %}
-  <div class="govuk-grid-row">
-    <div class="govuk-grid-column-two-thirds">
-      <h1 class="govuk-heading-l">Add a GitHub Member</h1>
-
-      <p class="govuk-body">
-        When a user requires access to our GitHub organisations (e.g they have joined The Cabinet Office) they should be added to the cabinetoffice GitHub organisation.
-      </p>
-
-      {% include "include/error-list.html" %}
-
-      <form method="post" novalidate>
-
-        {{ govukInput({
-          errorMessage: errors.first_name if errors,
-          label: {
-            text: "First Name",
-            classes: "govuk-label--m"
-          },
-          classes: "govuk-input--width-10",
-          id: "first_name",
-          name: "first_name",
-          value: first_name
-        }) }}
-
-        {{ govukInput({
-          errorMessage: errors.last_name if errors,
-          label: {
-            text: "Last Name",
-            classes: "govuk-label--m"
-          },
-          classes: "govuk-input--width-10",
-          id: "last_name",
-          name: "last_name",
-          value: last_name
-        }) }}
-
-        {% set githubHandleText = "GitHub Handle" %}
-        {% include "include/inputs/github-handle.html" %}
-
-        {{ govukInput({
-          errorMessage: errors.email_address if errors,
-          label: {
-            text: "Email Address",
-            classes: "govuk-label--m"
-          },
-          classes: "govuk-input--width-10",
-          id: "email_address",
-          name: "email_address",
-          value: email_address,
-          type: "email",
-          spellcheck: false
-        }) }}
-
-        {% set dateHtml %}
-          {{ govukInput({
-            errorMessage: errors.contract_end_date if errors,
-            label: {
-              text: "Contract end date",
-              classes: "govuk-label--m"
-            },
-            hint: {
-              text: "Enter the contract end date in the format dd/mm/yyyy. For example: '01/01/2024'"
-            },
-            id: "contract_end_date",
-            name: "contract_end_date",
-            value: contract_end_date,
-            type: "date",
-            classes: "govuk-input--width-10"
-          }) }}
-        {% endset -%}
-
-        {{ govukRadios({
-          errorMessage: errors.contract_type if errors,
-          name: "contract_type",
-          fieldset: {
-            legend: {
-              text: "Is the GitHub account holder permanently employed within the CO orginsation?",
-              isPageHeading: true,
-              classes: "govuk-fieldset__legend--l"
-            }
-          },
-          items: [ 
-            {
-              value: "permanent",
-              text: "Yes", 
-              checked: (contract_type == "permanent"),
-              conditional: {}
-            },
-            {
-              value: "non_permanent",
-              text: "No",
-              checked: (contract_type == "non_permanent"),
-              conditional: {
-                html: dateHtml
-              }
-            }
-          ]
-        }) }}
-
-        {% set descriptionText = "Description (optional)" %}
-        {% set descriptionHint = "Explain the reason for adding this member." %}
-
-        {% include "include/description.html" %}
-
-        {% include "include/save-button.html" %}
-
-        {% set removePathURL = "/add-member/remove/" + id %}
-        {% include "include/remove-button.html" %}
-
-      </form>
-    </div>
-  </div>
+{% block pageContent %}
+  <h1 class="govuk-heading-l">Add a GitHub Member</h1>
+
+  <p class="govuk-body">
+    When a user requires access to our GitHub organisations (e.g they have joined The Cabinet Office) they should be added to the cabinetoffice GitHub organisation.
+  </p>
+
+  {% include "include/error-list.html" %}
+
+  <form method="post" novalidate>
+
+    {{ govukInput({
+      errorMessage: errors.first_name if errors,
+      label: {
+        text: "First Name",
+        classes: "govuk-label--m"
+      },
+      classes: "govuk-input--width-20",
+      id: "first_name",
+      name: "first_name",
+      value: first_name
+    }) }}
+
+    {{ govukInput({
+      errorMessage: errors.last_name if errors,
+      label: {
+        text: "Last Name",
+        classes: "govuk-label--m"
+      },
+      classes: "govuk-input--width-20",
+      id: "last_name",
+      name: "last_name",
+      value: last_name
+    }) }}
+
+    {% set githubHandleText = "GitHub Handle" %}
+    {% include "include/inputs/github-handle.html" %}
+
+    {{ govukInput({
+      errorMessage: errors.email_address if errors,
+      label: {
+        text: "Email Address",
+        classes: "govuk-label--m"
+      },
+      classes: "govuk-input--width-20",
+      id: "email_address",
+      name: "email_address",
+      value: email_address,
+      type: "email",
+      spellcheck: false
+    }) }}
+
+    {% set dateHtml %}
+      {{ govukInput({
+        errorMessage: errors.contract_end_date if errors,
+        label: {
+          text: "Contract end date",
+          classes: "govuk-label--m"
+        },
+        hint: {
+          text: "Enter the contract end date in the format dd/mm/yyyy. For example: '01/01/2024'"
+        },
+        id: "contract_end_date",
+        name: "contract_end_date",
+        value: contract_end_date,
+        type: "date",
+        classes: "govuk-input--width-20"
+      }) }}
+    {% endset -%}
+
+    {{ govukRadios({
+      errorMessage: errors.contract_type if errors,
+      name: "contract_type",
+      fieldset: {
+        legend: {
+          text: "Is the GitHub account holder permanently employed within the CO orginsation?",
+          isPageHeading: true,
+          classes: "govuk-fieldset__legend--l"
+        }
+      },
+      items: [ 
+        {
+          value: "permanent",
+          text: "Yes", 
+          checked: (contract_type == "permanent"),
+          conditional: {}
+        },
+        {
+          value: "non_permanent",
+          text: "No",
+          checked: (contract_type == "non_permanent"),
+          conditional: {
+            html: dateHtml
+          }
+        }
+      ]
+    }) }}
+
+    {% set descriptionText = "Description (optional)" %}
+    {% set descriptionHint = "Explain the reason for adding this member." %}
+
+    {% include "include/description.html" %}
+
+    {% include "include/save-button.html" %}
+
+    {% set removePathURL = "/add-member/remove/" + id %}
+    {% include "include/remove-button.html" %}
+
+  </form>
 {%endblock%}
diff --git a/src/views/add-repo.html b/src/views/add-repo.html
@@ -4,56 +4,52 @@
   {% include "include/back-link.html" %}
 {% endblock %}
 
-{% block content %}
-  <div class="govuk-grid-row">
-    <div class="govuk-grid-column-two-thirds">
-      <h1 class="govuk-heading-l">Add a GitHub Repository</h1>
-
-      <p class="govuk-body">
-        GitHub repositories contains all of your code, your files, and each file's revision history. You can discuss and manage your work within the repository.
-      </p>
-
-      {% include "include/error-list.html" %}
-
-      <form method="post" novalidate>
-
-        {% include "include/inputs/repo-name.html" %}
-
-        {{ govukRadios({
-          errorMessage: errors.visibility if errors,
-          name: "visibility",
-          fieldset: {
-            legend: {
-              text: "Repository visibility",
-              isPageHeading: true,
-              classes: "govuk-fieldset__legend--m"
-            }
-          },
-          items: [
-            {
-              value: "public",
-              text: "Public", 
-              checked: (visibility == "public")
-            },
-            {
-              value: "private",
-              text: "Private", 
-              checked: (visibility == "private")
-            }
-          ]
-        }) }}
-
-        {% set descriptionText = "Description (optional)" %}
-        {% set descriptionHint = "Explain the reason for adding this repository." %}
-
-        {% include "include/description.html" %}
-
-        {% include "include/save-button.html" %}
-
-        {% set removePathURL = "/add-repo/remove/" + id %}
-        {% include "include/remove-button.html" %}
-
-      </form>
-    </div>
-  </div>
+{% block pageContent %}
+  <h1 class="govuk-heading-l">Add a GitHub Repository</h1>
+
+  <p class="govuk-body">
+    GitHub repositories contains all of your code, your files, and each file's revision history. You can discuss and manage your work within the repository.
+  </p>
+
+  {% include "include/error-list.html" %}
+
+  <form method="post" novalidate>
+
+    {% include "include/inputs/repo-name.html" %}
+
+    {{ govukRadios({
+      errorMessage: errors.visibility if errors,
+      name: "visibility",
+      fieldset: {
+        legend: {
+          text: "Repository visibility",
+          isPageHeading: true,
+          classes: "govuk-fieldset__legend--m"
+        }
+      },
+      items: [
+        {
+          value: "public",
+          text: "Public", 
+          checked: (visibility == "public")
+        },
+        {
+          value: "private",
+          text: "Private", 
+          checked: (visibility == "private")
+        }
+      ]
+    }) }}
+
+    {% set descriptionText = "Description (optional)" %}
+    {% set descriptionHint = "Explain the reason for adding this repository." %}
+
+    {% include "include/description.html" %}
+
+    {% include "include/save-button.html" %}
+
+    {% set removePathURL = "/add-repo/remove/" + id %}
+    {% include "include/remove-button.html" %}
+
+  </form>
 {% endblock %}