themed infobox

.eslintrc.cjs

@@ -16,7 +16,7 @@ module.exports = {
     es2022: true,
   },
   rules: {
-    indent: ['error', 2, { 'SwitchCase': 1 }],
+    indent: ['error', 2, { SwitchCase: 1 }],
     semi: ['error', 'always'],
     'comma-dangle': [
       'error',
@@ -36,7 +36,7 @@ module.exports = {
       files: ['*.svelte'],
       parser: 'svelte-eslint-parser',
       parserOptions: {
-        parser: '@typescript-eslint/parser'
+        parser: '@typescript-eslint/parser',
       },
       rules: {
         'no-multiple-empty-lines': ['error', { max: 2, maxBOF: 2 }],

src/components/InfoBox/InfoBox.stories.svelte

@@ -11,6 +11,10 @@
   const metaProps = {
     ...withComponentDocs(componentDocs),
     argTypes: {
+      theme: {
+        control: 'select',
+        options: ['light', 'dark'],
+      },
       width: {
         control: 'select',
         options: ['normal', 'wide', 'wider', 'widest', 'fluid'],

src/components/InfoBox/InfoBox.svelte

@@ -1,6 +1,10 @@
 <!-- @component `EndNotes` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-InfoBox--default) -->
 <script lang="ts">
   import type { ContainerWidth } from '../@types/global';
+  /* eslint svelte/no-at-html-tags: "off" */
+
+  type Theme = 'light' | 'dark';
+
   /**
    * Title of the box
    */
@@ -34,11 +38,16 @@
    */
   export let id: string = '';
 
+  /**
+   * Page theme
+   */
+  export let theme: Theme = 'light';
+
   import Block from '../Block/Block.svelte';
   import { marked } from 'marked';
 </script>
 
-<aside class="infobox">
+<aside class="infobox {theme}">
   <Block
     width="{width}"
     id="{id}"
@@ -79,7 +88,17 @@
   .infobox {
     :global(.article-block) {
       border-color: var(--theme-colour-brand-rules);
-      background-color: #fafafa;
+    }
+
+    &.light {
+      :global(.article-block) {
+        background-color: rgb(250 250 250 / 100%);
+      }
+    }
+    &.dark {
+      :global(.article-block) {
+        background-color: rgb(250 250 250 / 10%);
+      }
     }
 
     :global(.header p) {

src/components/InfoBox/stories/docs/component.md

@@ -1,5 +1,7 @@
 InfoBox is used to provide additional information that needs to be visually set aside from the main content flow. e.g. Methodology, Detailed notes about data, Extra context as text stories.
 
+Switch the theme prop to `dark` for a dark page infobox.
+
 Use the slots to customize the content as needed, e.g. adding icons and thumbnail images etc.
 
 ```svelte