Merge pull request #1245 from guardian/skb/add-heading-size-config

Adds heading size to design model

.changeset/proud-ties-learn.md

@@ -0,0 +1,5 @@
+---
+'@guardian/support-dotcom-components': minor
+---
+
+Adds a new optional field for fonts to the model for Configurable Design banners

README.md

@@ -11,7 +11,7 @@ See [architecture](docs/architecture.md) for details.
 This project uses [nvm](https://github.com/nvm-sh/nvm). You should run `nvm use` in your terminal before running any of the following commands. To set up, first run
 
 ```bash
-pnpm
+pnpm install
 ```
 
 This will install all the project dependencies.
@@ -77,7 +77,7 @@ The `/src` directory contains 3 subdirectories:
 
 Releasing to NPM is handled with [changesets] and is performed by CI.
 
-On your feature branch, before merging, run `pnpm dotcom changeset` from the root of the project. This will
+On your feature branch, before merging, run `pnpm changeset` from the root of the project. This will
 interactively ask you what kind of change this is (major, minor, patch) and
 allow you to describe the change. Commit the generated changeset file to git and
 push to your branch.

src/server/factories/bannerDesign.ts

@@ -28,6 +28,11 @@ export default Factory.define<BannerDesignFromTool>(() => ({
             'https://i.guim.co.uk/img/media/6c933a058d1ce37a5ad17f79895906150812dfee/0_0_1768_1420/500.png?width=500&quality=75&s=9277532ddf184a308e14218e3576543b',
         altText: 'Example alt text',
     },
+    fonts: {
+        heading: {
+            size: 'medium',
+        },
+    },
     colours: {
         basic: {
             background: stringToHexColour('F1F8FC'),

src/shared/types/props/design.ts

@@ -120,9 +120,18 @@ interface ChoiceCardsDesign {
 }
 type Visual = BannerDesignImage | ChoiceCardsDesign;
 
+type FontSize = 'small' | 'medium' | 'large';
+
+interface Font {
+    size: FontSize;
+}
+
 export interface ConfigurableDesign {
     visual?: Visual;
     headerImage?: BannerDesignHeaderImage;
+    fonts?: {
+        heading: Font;
+    };
     colours: {
         basic: {
             background: HexColour;