feat: Added SASS support to Vite app and restructured styles imports

front-end-components/package.json

@@ -64,6 +64,7 @@
     "jest-theories": "^1.5.1",
     "prettier": "^3.2.5",
     "prettier-eslint": "^16.3.0",
+    "sass-embedded": "^1.83.4",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.16.0",
     "vite": "^6.0.2"

front-end-components/src/assets/styles/_colours.scss

@@ -0,0 +1,5 @@
+$grid-colour: #f0f0f0;
+$label-colour: #8c8c8c;
+$spinner-colour: #005ea5;
+$warning-colour: govuk-colour("orange");
+$warning-colour-bg: #ffe4c4;

front-end-components/src/components/auto-complete/component.tsx

@@ -2,7 +2,8 @@ import { useState } from "react";
 import AccessibleAutocomplete from "accessible-autocomplete/react";
 import { useDebounceCallback } from "usehooks-ts";
 import { AutoCompleteProps } from "./types";
-import "accessible-autocomplete/dist/accessible-autocomplete.min.css";
+import "accessible-autocomplete/src/autocomplete.css";
+import "./styles.scss";
 
 export function AutoComplete<T>({
   onSelected,

front-end-components/src/components/auto-complete/styles.scss

@@ -0,0 +1,3 @@
+ul.autocomplete__menu {
+  @include govuk-typography-common;
+}

front-end-components/src/components/chart-options-phase-mode/component.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { ChartMode } from "src/components";
 import { useChartModeContext } from "src/contexts";
 import { ChartOptionsPhaseModeProps } from "./types";
+import "./styles.scss";
 
 export const ChartOptionsPhaseMode = ({
   phases,

front-end-components/src/components/chart-options-phase-mode/styles.scss

@@ -0,0 +1,12 @@
+.chart-options {
+  display: grid;
+  grid-template-columns: 75% 25%;
+  width: 100%;
+}
+
+@media (max-width: 640px) {
+  .chart-options {
+    width: 100%;
+    display: block;
+  }
+}

front-end-components/src/components/charts/establishment-tick/component.tsx

@@ -10,6 +10,7 @@ import {
   useRef,
   useState,
 } from "react";
+import "./styles.scss";
 
 export function EstablishmentTick(props: EstablishmentTickProps) {
   const {

front-end-components/src/components/charts/establishment-tick/styles.scss

@@ -0,0 +1,38 @@
+@import "/src/assets/styles/colours";
+
+.recharts-wrapper {
+  foreignObject>.recharts-tooltip-wrapper .tooltip-table>caption {
+    width: 370px;
+    overflow: visible;
+    white-space: pre-wrap;
+  }
+
+  .recharts-cartesian-axis {
+    .recharts-text {
+      .govuk-link {
+        fill: $govuk-link-colour;
+
+        &:hover,
+        &:focus {
+          fill: $govuk-link-hover-colour;
+          text-decoration: underline;
+        }
+      }
+
+      &.establishment-tick {
+        transform: translate(-0.1em, 0.3em);
+      }
+    }
+
+    line.establishment-tick-focus {
+      &:has(~ text > a) {
+        stroke: transparent;
+        stroke-width: 1.5em;
+      }
+
+      &:has(~ text > a:focus) {
+        stroke: $govuk-focus-colour;
+      }
+    }
+  }
+}

front-end-components/src/components/charts/horizontal-bar-chart/component.tsx

@@ -14,7 +14,6 @@ import {
   HorizontalBarChartProps,
   LabelListContentProps,
 } from "src/components/charts/horizontal-bar-chart";
-
 import { ErrorBanner } from "src/components/error-banner";
 import {
   SuppressNegativeOrZeroContext,
@@ -50,6 +49,7 @@ import { useDownloadPngImage } from "src/hooks/useDownloadImage";
 import { Props } from "recharts/types/component/Label";
 import { CartesianViewBox } from "recharts/types/util/types";
 import { DownloadMode } from "src/services";
+import "../styles.scss";
 
 function HorizontalBarChartInner<TData extends ChartDataSeries>(
   props: HorizontalBarChartProps<TData>,

front-end-components/src/components/charts/line-chart/component.tsx

@@ -28,6 +28,7 @@ import classNames from "classnames";
 import { useDownloadPngImage } from "src/hooks/useDownloadImage";
 import { LineChartDot } from "../line-chart-dot";
 import { DownloadMode } from "src/services";
+import "../styles.scss";
 
 function LineChartInner<TData extends ChartDataSeries>(
   {

front-end-components/src/components/charts/school-data-tooltip/styles.scss

@@ -0,0 +1,14 @@
+@import "/src/assets/styles/colours";
+
+.recharts-wrapper {
+  .tooltip-part-year-warning {
+    border-left: 10px solid $warning-colour;
+    border-color: $warning-colour;
+    background-color: $warning-colour-bg;
+    padding: 6px 12px;
+
+    .govuk-warning-text {
+      font-size: 16px;
+    }
+  }
+}

front-end-components/src/components/charts/stat/component.tsx

@@ -1,6 +1,7 @@
 import { StatProps } from "src/components/charts/stat";
 import { ChartDataSeries } from "src/components";
 import classNames from "classnames";
+import "./styles.scss";
 
 export function Stat<TData extends ChartDataSeries>(props: StatProps<TData>) {
   const {

front-end-components/src/components/charts/stat/styles.scss

@@ -0,0 +1,61 @@
+@import "../styles";
+@import "/src/assets/styles/colours";
+
+.chart-stat abbr.summary {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+}
+
+.chart-stat-wrapper .chart-stat-value {
+  border-top: 1px solid $label-colour;
+  margin-top: 0.5rem;
+}
+
+.chart-stat-summary {
+  display: grid;
+  grid-template-columns: calc(calc(100% - 30px) / 3) calc(calc(100% - 30px) / 3) calc(
+      calc(100% - 30px) / 3
+    );
+  margin-top: 14px;
+  padding: 0;
+  gap: 15px;
+  width: 100%;
+}
+
+.chart-stat-summary .chart-stat-wrapper {
+  background-color: $grid-colour;
+  padding: 10px;
+}
+
+.chart-stat-summary .chart-stat-wrapper .chart-stat-value {
+  border-top: none;
+  margin-top: 0.1rem;
+  margin-bottom: 0.1rem;
+  overflow-wrap: break-word;
+}
+
+.chart-stat-wrapper.chart-stat-line-chart .chart-stat-value {
+  color: $series-highlight-colour;
+}
+
+.chart-stat-summary
+  .chart-stat-wrapper
+  .chart-stat-value
+  .chart-stat-value-suffix {
+  margin-left: 5px;
+  font-size: 0.38em;
+}
+
+.chart-stat-wrapper.chart-stat-highlight {
+  color: $series-highlight-colour;
+}
+
+.chart-stat-wrapper.chart-stat-highlight .chart-stat-value {
+  font-weight: 700;
+}
+
+.chart-stat-wrapper .govuk-body-s,
+.chart-stat-wrapper .govuk-body-m,
+.chart-stat-wrapper .govuk-body-l {
+  color: inherit;
+}