docs: write custom docs page for brand-background component

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",

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 />

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>`,
 };