From f5ce74eee33658f74937c6e22246d6ba33abc403 Mon Sep 17 00:00:00 2001
From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com>
Date: Wed, 23 Oct 2024 17:35:15 +0300
Subject: [PATCH] docs: write custom docs page for brand-background component

---
 package-lock.json                             | 24 +++++++++++++++++
 package.json                                  |  1 +
 .../brand-background/brand-background.mdx     | 27 +++++++++++++++++++
 .../brand-background.stories.ts               |  3 ++-
 4 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/scss/components/brand-background/brand-background.mdx

diff --git a/package-lock.json b/package-lock.json
index 898b9e8..d7b0b92 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@commitlint/config-conventional": "^19.2.2",
         "@eslint/js": "^9.0.0",
         "@storybook/addon-essentials": "^8.0.10",
+        "@storybook/addon-links": "^8.0.10",
         "@storybook/blocks": "^8.0.10",
         "@storybook/web-components": "^8.0.10",
         "@storybook/web-components-vite": "^8.0.10",
@@ -4849,6 +4850,29 @@
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/@storybook/addon-links": {
+      "version": "8.0.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-8.0.10.tgz",
+      "integrity": "sha512-+mIyH2UcrgQfAyRM4+ARkB/D0OOY8UMwkZsD8dD23APZ8oru7W/NHX3lXl0WjPfQcOIx/QwWNWI3+DgVZJY3jw==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/csf": "^0.1.4",
+        "@storybook/global": "^5.0.0",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@storybook/addon-measure": {
       "version": "8.0.10",
       "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.0.10.tgz",
diff --git a/package.json b/package.json
index 6275b64..390260e 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "@commitlint/config-conventional": "^19.2.2",
     "@eslint/js": "^9.0.0",
     "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-links": "^8.0.10",
     "@storybook/blocks": "^8.0.10",
     "@storybook/web-components": "^8.0.10",
     "@storybook/web-components-vite": "^8.0.10",
diff --git a/src/scss/components/brand-background/brand-background.mdx b/src/scss/components/brand-background/brand-background.mdx
new file mode 100644
index 0000000..a159bea
--- /dev/null
+++ b/src/scss/components/brand-background/brand-background.mdx
@@ -0,0 +1,27 @@
+import { Meta, Title, Subtitle, Stories } from "@storybook/blocks";
+import LinkTo from "@storybook/addon-links/react";
+import * as ComponentStories from "./brand-background.stories.ts";
+
+<Meta of={ComponentStories} />
+
+<Title>Brand Background</Title>
+
+**This component expects the background image to be served by the app using the design system.**
+
+To use this component, take the following steps:
+
+1. Go to <a href="../?path=/docs/brand-logos--docs#marque-white">Marque White</a> and download the image.
+
+2. Serve the file from your app. This will depend on the technology your app is written in.
+
+3. Optionally, use the provided CSS custom property to configure the path to the image. The default is `/images/marque-white.svg`.
+
+   ```css
+   .iati-brand-background {
+     --background-image: url("PATH_TO_IMAGE");
+   }
+   ```
+
+4. Apply the appropriate classes to your html elements, using the example below.
+
+<Stories />
diff --git a/src/scss/components/brand-background/brand-background.stories.ts b/src/scss/components/brand-background/brand-background.stories.ts
index 3385eac..1ebec9e 100644
--- a/src/scss/components/brand-background/brand-background.stories.ts
+++ b/src/scss/components/brand-background/brand-background.stories.ts
@@ -13,7 +13,8 @@ export const Default: Story = {
   render: () =>
     html`<div class="iati-brand-background">
       <div class="iati-brand-background__content">
-        <p>Some words</p>
+        <!-- Example child container for documentation purposes only -->
+        <div style="height: 500px;"></div>
       </div>
     </div>`,
 };