chore: install Prettier

.circleci/config.yml

@@ -64,6 +64,9 @@ jobs:
           name: Installing dependencies
           command: npm ci
       - save_cache_node_modules
+      - run:
+          name: "Lint"
+          command: npm run lint
       - run:
           name: "Test"
           command: npm run test
@@ -77,7 +80,6 @@ jobs:
           name: Dry-run a semantic-release to confirm no issues upon merge
           command: npx semantic-release --dry-run
 
-
   publish_release:
     <<: *executor_node
     steps:

.eleventy.js

@@ -1,5 +1,5 @@
 module.exports = function (eleventyConfig) {
-  eleventyConfig.addWatchTarget('./scss');
+  eleventyConfig.addWatchTarget("./scss");
   eleventyConfig.addPassthroughCopy("./src/css");
   return {
     pathPrefix: "/bootstrap-theme/",

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,18 +1,22 @@
 #### Problem
+
 - https://techfromsage.atlassian.net/browse/TA-###
 
 * What is happening for the user?
 * What is happening technically?
 
 #### Example
+
 (example or details of how to recreate the issue)
 
 (screenshots of new/changed behaviour if applicable)
 
 #### Change/Fix
+
 (how this PR attempts to fix the issue or add the desired change)
 
 #### Checklist
+
 - [ ] PO review
 - [ ] Branch build
 - [ ] UX review

.prettierignore

@@ -0,0 +1 @@
+docs/

README.md

@@ -1,6 +1,7 @@
 # Bootstrap v5 Theme
 
 ## Versions
+
 There are currently two versions of this theme:
 
 1. The v3 version, this is on the `main` branch and has the old Talis branding, this is the version used by the apps.
@@ -15,7 +16,8 @@ There are currently two versions of this theme:
    ```
 
 2. Pull in the theme. Either:
-  - Specify the variable overrides, import the rest of Bootstrap, and then include the theme partial
+
+- Specify the variable overrides, import the rest of Bootstrap, and then include the theme partial
 
 ```scss
 @import "variables"; // Talis customisations are here
@@ -24,8 +26,8 @@ There are currently two versions of this theme:
 ```
 
 Or
-- Place variable overrides first, then import the styles you need.
 
+- Place variable overrides first, then import the styles you need.
 
 ```scss
 // Toggle global options – these need to be set ahead of the functions
@@ -93,7 +95,6 @@ https://techfromsage.github.io/bootstrap-theme/assets/css/talis.css
    git clone git@github.com:techfromsage/bootstrap-theme.git
    ```
 
-
 1. Change into the repository directory:
 
    ```bash
@@ -132,17 +133,16 @@ npm run build
 
 The following npm scripts are available.
 
-| Script | Description |
-| --- | --- |
-| `docs` | Builds the Eleventy-powered documentation site
-| `server` | Starts a local server (<http://localhost:3000>) for development |
-| `watch` | Automatically recompiles CSS as it watches the `scss` directory for changes |
-| `css` | Runs `css-compile` and `css-prefix` |
-| `css-compile` | Compiles source Sass into CSS |
-| `css-lint` | Runs [Stylelint](https://stylelint.io) against source Sass for code quality |
-| `css-prefix` | Runs [Autoprefixer](https://github.com/postcss/autoprefixer) on the compiled CSS |
-| `test` | Runs `css-lint` and `css`, in sequential order |
-
+| Script        | Description                                                                                              |
+| ------------- | -------------------------------------------------------------------------------------------------------- |
+| `docs`        | Builds the Eleventy-powered documentation site                                                           |
+| `server`      | Starts a local server (<http://localhost:3000>) for development                                          |
+| `watch`       | Automatically recompiles CSS as it watches the `scss` directory for changes                              |
+| `css`         | Runs `css-compile` and `css-prefix`                                                                      |
+| `css-compile` | Compiles source Sass into CSS                                                                            |
+| `lint`        | Runs [Prettier] over sources, and [Stylelint](https://stylelint.io) against source Sass for code quality |
+| `css-prefix`  | Runs [Autoprefixer](https://github.com/postcss/autoprefixer) on the compiled CSS                         |
+| `test`        | Runs `css-lint` and `css`, in sequential order                                                           |
 
 ### Stylelint
 

commitlint.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ['@commitlint/config-conventional'],
+  extends: ["@commitlint/config-conventional"],
 };

package.json

@@ -20,15 +20,19 @@
     "build:eleventy": "eleventy",
     "css": "npm-run-all css-compile css-prefix",
     "css-compile": "sass scss/:docs/assets/css/ --style=compressed --load-path=node_modules --source-map",
-    "css-lint": "stylelint scss/",
     "css-prefix": "postcss --replace docs/assets/css/talis.css --use autoprefixer --map",
+    "format": "npm-run-all format:*",
+    "format:prettier": "prettier --write .",
     "format:stylelint": "stylelint scss/ --fix",
+    "lint": "npm-run-all lint:*",
+    "lint:prettier": "prettier --check .",
+    "lint:stylelint": "stylelint scss/",
     "prepare": "husky",
     "publish:githubpages": "gh-pages --dist docs",
     "release": "standard-version",
     "server": "serve docs --listen 3000",
     "start": "npm-run-all --parallel build:css watch:*",
-    "test": "npm-run-all css-lint css",
+    "test": "npm-run-all css",
     "watch": "nodemon -e html,scss -x \"npm run css\"",
     "watch:eleventy": "eleventy --serve",
     "watch:sass": "npm run css-compile -- --watch"
@@ -48,6 +52,7 @@
     "npm-run-all2": "8.0.4",
     "postcss": "8.5.6",
     "postcss-cli": "11.0.1",
+    "prettier": "3.6.2",
     "sass": "1.89.2",
     "semantic-release": "24.2.5",
     "serve": "14.2.4",

scss/_buttons.scss

@@ -115,7 +115,9 @@
 .btn-primary {
   &:focus {
     border-color: $white;
-    box-shadow: 0 0 0 $btn-focus-width $white, 0 0 0 2px $primary;
+    box-shadow:
+      0 0 0 $btn-focus-width $white,
+      0 0 0 2px $primary;
   }
 
   &:disabled,
@@ -126,10 +128,14 @@
 
   &:active {
     background-color: #004b50;
-    box-shadow: 0 0 0 $btn-focus-width $white, 0 0 0 2px #004b50;
+    box-shadow:
+      0 0 0 $btn-focus-width $white,
+      0 0 0 2px #004b50;
 
     &:focus {
-      box-shadow: 0 0 0 $btn-focus-width $white, 0 0 0 2px #004b50;
+      box-shadow:
+        0 0 0 $btn-focus-width $white,
+        0 0 0 2px #004b50;
     }
   }
 }
@@ -139,10 +145,10 @@
     transparent,
     $black,
     $black,
-    rgba(0,0,0,0.1),
+    rgba(0, 0, 0, 0.1),
     $black,
     $black,
-    rgba(0,0,0,0.1),
+    rgba(0, 0, 0, 0.1),
     $black,
     $black,
     $gray-700,
@@ -152,11 +158,15 @@
 
   &:focus {
     border-color: $black;
-    box-shadow: 0 0 0 $btn-focus-width $black, 0 0 0 2px transparent;
+    box-shadow:
+      0 0 0 $btn-focus-width $black,
+      0 0 0 2px transparent;
   }
 
   &:active:focus {
-    box-shadow: 0 0 0 $btn-focus-width $black, 0 0 0 2px transparent;
+    box-shadow:
+      0 0 0 $btn-focus-width $black,
+      0 0 0 2px transparent;
   }
 }
 
@@ -178,11 +188,15 @@
 
   &:focus {
     border-color: $black;
-    box-shadow: 0 0 0 $btn-focus-width $white, 0 0 0 2px $black;
+    box-shadow:
+      0 0 0 $btn-focus-width $white,
+      0 0 0 2px $black;
   }
 
   &:active:focus {
-    box-shadow: 0 0 0 $btn-focus-width $white, 0 0 0 2px $black;
+    box-shadow:
+      0 0 0 $btn-focus-width $white,
+      0 0 0 2px $black;
   }
 }
 
@@ -192,12 +206,7 @@
 }
 
 .btn-xs {
-  @include button-size(
-    .15385em,
-    .30769em,
-    1em,
-    3px
-  );
+  @include button-size(0.15385em, 0.30769em, 1em, 3px);
 
   line-height: 1.0769230769;
   text-transform: uppercase;

scss/_confirmation-modal.scss

@@ -17,7 +17,7 @@
   .modal-content {
     padding: math.div($modal-inner-padding, 2);
 
-    @include border-radius(.5rem);
+    @include border-radius(0.5rem);
 
     font-size: 1rem;
   }

scss/_error.scss

@@ -1,7 +1,7 @@
 .t-error {
   margin: 0;
   font-family: "Open Sans", sans-serif;
-  font-size: .8125em;
+  font-size: 0.8125em;
   line-height: 1.6;
   color: #fff;
   background-color: #017d87;

scss/_forms.scss

@@ -5,7 +5,7 @@ label {
 }
 
 legend {
-  margin-bottom: .25rem;
+  margin-bottom: 0.25rem;
   font-size: 1.125rem;
   font-weight: 300;
   color: $black;
@@ -83,8 +83,8 @@ legend {
 .help-block {
   display: block;
   padding: math.div($spacer, 4) $spacer;
-  margin-top: .3125rem;
-  margin-bottom: .625rem;
+  margin-top: 0.3125rem;
+  margin-bottom: 0.625rem;
   margin-bottom: math.div($spacer, 2);
   font-style: italic;
   color: $black;
@@ -102,7 +102,6 @@ legend {
   border-color: $input-border-color;
 }
 
-
 .was-validated .form-control:invalid:focus,
 .form-control.is-invalid:focus,
 .was-validated .form-control:valid:focus,
@@ -131,10 +130,12 @@ legend {
 
 .form-switch .form-check-input:focus {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 1%29'/%3e%3c/svg%3e");
-  box-shadow: 0 0 0 2px $white, 0 0 0 3px $primary;
+  box-shadow:
+    0 0 0 2px $white,
+    0 0 0 3px $primary;
 }
 
 .form-switch .form-check-input:checked {
   background-color: $primary;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 1%29'/%3e%3c/svg%3e")
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 1%29'/%3e%3c/svg%3e");
 }