Merge pull request #2339 from alphagov/add-alignment-classes

Add text align override classes

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New features
+
+- [#2339: Add text align override classes](https://github.com/alphagov/govuk-frontend/pull/2339)
+
 ## 3.13.1 (Fix release)
 
 ### Fixes

app/views/examples/text-alignment/index.njk

@@ -0,0 +1,198 @@
+{% from "back-link/macro.njk" import govukBackLink %}
+{% from "table/macro.njk" import govukTable %}
+
+{% extends "layout.njk" %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    "href": "/"
+  }) }}
+{% endblock %}
+
+{% block content %}
+  <h1 class="govuk-heading-xl">Text alignment</h1>
+
+  <h2 class="govuk-heading-m">govuk-!-text-align-right</h2>
+  {{ govukTable({
+    caption: "Month you apply",
+    captionClasses: "govuk-table__caption--m",
+    firstCellIsHeader: true,
+    head: [
+      {
+        text: "Date"
+      },
+      {
+        text: "Rate for vehicles",
+        classes: 'govuk-!-text-align-right'
+      },
+      {
+        text: "Rate for bicycles",
+        classes: 'govuk-!-text-align-right'
+      }
+    ],
+    rows: [
+      [
+        {
+          text: "First 6 weeks"
+        },
+        {
+          text: "£109.80 per week",
+          classes: 'govuk-!-text-align-right'
+        },
+        {
+          text: "£59.10 per week",
+          classes: 'govuk-!-text-align-right'
+        }
+      ],
+      [
+        {
+          text: "Next 33 weeks"
+        },
+        {
+          text: "£159.80 per week",
+          classes: 'govuk-!-text-align-right'
+        },
+        {
+          text: "£89.10 per week",
+          classes: 'govuk-!-text-align-right'
+        }
+      ],
+      [
+        {
+          text: "Total estimated pay"
+        },
+        {
+          text: "£4,282.20",
+          classes: 'govuk-!-text-align-right'
+        },
+        {
+          text: "£2,182.20",
+          classes: 'govuk-!-text-align-right'
+        }
+      ]
+    ]
+  }) }}
+
+  <h2 class="govuk-heading-m">govuk-!-text-align-centre</h2>
+  {{ govukTable({
+    caption: "Month you apply",
+    captionClasses: "govuk-table__caption--m",
+    firstCellIsHeader: true,
+    head: [
+      {
+        text: "Date"
+      },
+      {
+        text: "Rate for vehicles",
+        classes: 'govuk-!-text-align-centre'
+      },
+      {
+        text: "Rate for bicycles",
+        classes: 'govuk-!-text-align-centre'
+      }
+    ],
+    rows: [
+      [
+        {
+          text: "First 6 weeks"
+        },
+        {
+          text: "£109.80 per week",
+          classes: 'govuk-!-text-align-centre'
+        },
+        {
+          text: "£59.10 per week",
+          classes: 'govuk-!-text-align-centre'
+        }
+      ],
+      [
+        {
+          text: "Next 33 weeks"
+        },
+        {
+          text: "£159.80 per week",
+          classes: 'govuk-!-text-align-centre'
+        },
+        {
+          text: "£89.10 per week",
+          classes: 'govuk-!-text-align-centre'
+        }
+      ],
+      [
+        {
+          text: "Total estimated pay"
+        },
+        {
+          text: "£4,282.20",
+          classes: 'govuk-!-text-align-centre'
+        },
+        {
+          text: "£2,182.20",
+          classes: 'govuk-!-text-align-centre'
+        }
+      ]
+    ]
+  }) }}
+
+  <h2 class="govuk-heading-m">govuk-!-text-align-left</h2>
+  {{ govukTable({
+    caption: "Month you apply",
+    captionClasses: "govuk-table__caption--m",
+    firstCellIsHeader: true,
+    head: [
+      {
+        text: "Date"
+      },
+      {
+        text: "Rate for vehicles",
+        classes: 'govuk-!-text-align-left'
+      },
+      {
+        text: "Rate for bicycles",
+        classes: 'govuk-!-text-align-left'
+      }
+    ],
+    rows: [
+      [
+        {
+          text: "First 6 weeks"
+        },
+        {
+          text: "£109.80 per week",
+          classes: 'govuk-!-text-align-left'
+        },
+        {
+          text: "£59.10 per week",
+          classes: 'govuk-!-text-align-left'
+        }
+      ],
+      [
+        {
+          text: "Next 33 weeks"
+        },
+        {
+          text: "£159.80 per week",
+          classes: 'govuk-!-text-align-left'
+        },
+        {
+          text: "£89.10 per week",
+          classes: 'govuk-!-text-align-left'
+        }
+      ],
+      [
+        {
+          text: "Total estimated pay"
+        },
+        {
+          text: "£4,282.20",
+          classes: 'govuk-!-text-align-left'
+        },
+        {
+          text: "£2,182.20",
+          classes: 'govuk-!-text-align-left'
+        }
+      ]
+    ]
+  }) }}
+
+{% endblock %}

src/govuk/overrides/_all.scss

@@ -1,4 +1,5 @@
 @import "display";
 @import "spacing";
+@import "text-align";
 @import "typography";
 @import "width";

src/govuk/overrides/_text-align.scss

@@ -0,0 +1,20 @@
+@if not mixin-exists("govuk-exports") {
+  @warn "Importing items from the overrides layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
+}
+
+@import "../base";
+
+// stylelint-disable declaration-no-important
+@include govuk-exports("govuk/overrides/text-align") {
+  .govuk-\!-text-align-left {
+    text-align: left !important;
+  }
+
+  .govuk-\!-text-align-centre {
+    text-align: center !important;
+  }
+
+  .govuk-\!-text-align-right {
+    text-align: right !important;
+  }
+}