feature/atomic structure

.storybook/main.ts

@@ -12,5 +12,8 @@ const config: StorybookConfig = {
     name: "@storybook/nextjs",
     options: {},
   },
+  features: {
+    backgroundsStoryGlobals: true,
+  },
 };
 export default config;

.storybook/preview.ts

@@ -1,13 +1,24 @@
 import type { Preview } from "@storybook/react";
 
+import "@/styles/globals.scss";
+
 const preview: Preview = {
+  // default auto-generation of docs: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
   parameters: {
+    docs: {
+      toc: true, // 👈 Enables the table of contents
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
+    initialGlobals: {
+      // 👇 Set the initial background color
+      backgrounds: { value: "light" },
+    },
   },
 };
 

jest.config.ts

@@ -1,6 +1,7 @@
 export default {
   testEnvironment: "jsdom",
   moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1",
     "\\.(css|scss)$": "identity-obj-proxy",
   },
   coverageProvider: "v8",

package.json

@@ -64,6 +64,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "classnames": "^2.5.1",
     "ini": "^5.0.0",
     "next": "^15.0.0",
     "react": "19.0.0",
@@ -73,16 +74,16 @@
     "tsnode-di": "0.0.3"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
     "@chromatic-com/storybook": "^3.2.4",
     "@storybook/addon-essentials": "^8.5.8",
     "@storybook/addon-interactions": "^8.5.8",
     "@storybook/addon-links": "^8.5.8",
     "@storybook/blocks": "^8.5.8",
     "@storybook/nextjs": "^8.5.8",
     "@storybook/test": "^8.5.8",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@types/chai": "^4.3.4",
     "@types/cors": "^2.8.13",
     "@types/jest": "^29.5.14",
@@ -96,18 +97,19 @@
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
     "eslint": "^8.36.0",
+    "eslint-plugin-storybook": "^0.11.3",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "eslint-plugin-storybook": "^0.11.3",
     "mini-css-extract-plugin": "^2.9.2",
     "mocha": "^10.2.0",
     "nodemon": "^1.12.1",
     "npm-run-parallel": "^0.6.0",
     "nyc": "^15.1.0",
     "sass": "^1.85.0",
     "sass-loader": "^16.0.5",
-    "ts-jest": "^29.2.6",
     "storybook": "^8.5.8",
+    "ts-jest": "^29.2.6",
     "ts-loader": "^9.4.2",
     "ts-node": "^10.9.2",
     "typedoc": "^0.23.28",

src/models/image-dto.ts

@@ -0,0 +1,27 @@
+export interface ImageDTO {
+  // id: string;
+  alt: string;
+  // filename: string;
+  // mimeType: string;
+  // filesize: number;
+  width: number;
+  height: number;
+  focalX?: number;
+  focalY?: number;
+  sizes?: {
+    [key: string]: ResizedImage;
+  };
+  // createdAt: string;
+  // updatedAt: string;
+  url: string;
+  // thumbnailURL: string;
+}
+
+export interface ResizedImage {
+  width: number;
+  height: number;
+  mimeType: string;
+  filesize: number;
+  filename: string;
+  url: string;
+}

src/models/link-dto.ts

@@ -0,0 +1,7 @@
+export interface LinkDTO {
+  variant?: "primary" | "secondary" | "icon" | "underline";
+  href: string;
+  label: string;
+  newTab: boolean;
+  isHidden: boolean;
+}

src/styles/_mixins.scss

@@ -1,9 +1,54 @@
 // _mixins.scss
 
+@use "/src/styles/vars" as vars;
+
+@mixin grid-container($cols: repeat(12, 1fr), $gap: 12px, $gapMobile: 8px) {
+  display: grid;
+  grid-template-columns: $cols;
+  gap: $gap;
+
+  @media screen and (max-width: vars.$breakpoints-md) {
+    gap: $gapMobile;
+  }
+}
+
+/// Mixin to manage responsive breakpoints
+/// @author Kitty Giraudel
+/// @param {String} $breakpoint - Breakpoint name
+/// @require $breakpoints
+///
+@mixin respond-to($breakpoint) {
+  // If the key exists in the map
+  @if map-has-key(vars.$breakpoints, $breakpoint) {
+    // Prints a media query based on the value
+    @media (max-width: map-get(vars.$breakpoints, $breakpoint)) {
+      @content;
+    }
+  }
+
+  // If the key doesn't exist in the map
+  @else {
+    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+          + "Available breakpoints are: #{map-keys($breakpoints)}.";
+  }
+}
+
+@mixin loading-shine {
+  background: linear-gradient(90deg, #0000 33%, rgba(255, 255, 255, 0.1) 50%, #0000 66%) rgba(255, 255, 255, 0.25);
+  background-size: 300% 100%;
+  animation: shine 2s infinite;
+
+  @keyframes shine {
+    0% {
+      background-position: right;
+    }
+  }
+}
+
 // Mixin for clearfix
 @mixin clearfix() {
   &::after {
-    content: '';
+    content: "";
     display: table;
     clear: both;
   }

src/styles/_vars.scss

@@ -12,3 +12,19 @@ $base-line-height: 1.5;
 
 // Spacing variables
 $spacing-unit: 1rem;
+
+// Breakpoint variables
+$breakpoints-xs: 375px;
+$breakpoints-sm: 576px;
+$breakpoints-md: 768px;
+$breakpoints-lg: 992px;
+$breakpoints-xl: 1280px;
+$breakpoints-xxl: 1440px;
+$breakpoints: (
+  xs: $breakpoints-xs,
+  sm: $breakpoints-sm,
+  md: $breakpoints-md,
+  lg: $breakpoints-lg,
+  xl: $breakpoints-xl,
+  xxl: $breakpoints-xxl
+) !default;

src/styles/globals.scss

@@ -1,30 +1,87 @@
 // globals.scss
 
 // Import variables and mixins
-@import 'vars';
-@import 'mixins';
-@import 'typography';
+@import "vars";
+@import "mixins";
+@import "typography";
+
+// for an intro on how this works, see https://www.youtube.com/watch?v=c13gpBrnGEw&t=839s
+.content-grid,
+.full-width {
+  --content-padding: 24px;
+  display: grid;
+  row-gap: 0;
+  grid-template-columns:
+    [full-width-start] minmax(var(--content-padding), 1fr)
+    [content-start] min(
+      calc(100% - (var(--content-padding) * 2)),
+      calc($breakpoints-xxl + (var(--content-padding) * 2))
+    )
+    [content-end]
+    minmax(var(--content-padding), 1fr) [full-width-end];
+
+  > :not(.full-width) {
+    grid-column: content;
+  }
+
+  > .full-width {
+    grid-column: full-width;
+  }
+
+  @media screen and (max-width: $breakpoints-lg) {
+    --content-padding: 16px;
+  }
+}
+
+.disable-scroll {
+  overflow: hidden;
+}
+
+// for screen reader only - hides elements from view
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
 
-// Global reset or normalize styles
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
-// Body styles
+html,
 body {
-  background-color: $background-color;
-  color: $text-color;
-  font-family: 'Roboto', sans-serif;
-  font-size: $base-font-size;
-  line-height: $base-line-height;
+  max-width: 100dvw;
+  overflow-x: hidden;
+}
+
+// remove default styles
+li {
+  list-style: none;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
 }
 
-// Utility classes
-.container {
-  @include center(80%);
-  padding: $spacing-unit;
+select {
+  font-family: inherit;
 }
 
 .clearfix {