From 6a7a34ef0aa9ac43bbbe07947d7b7111cbe22601 Mon Sep 17 00:00:00 2001
From: Prasanta Kumar Dutta <7580745+pkd2512@users.noreply.github.com>
Date: Mon, 18 Sep 2023 17:42:42 +0530
Subject: [PATCH] themed infobox

---
 .eslintrc.cjs                                 |  4 ++--
 src/components/InfoBox/InfoBox.stories.svelte |  4 ++++
 src/components/InfoBox/InfoBox.svelte         | 23 +++++++++++++++++--
 .../InfoBox/stories/docs/component.md         |  2 ++
 4 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 70183d00..df4b3e2b 100644
--- a/.eslintrc.cjs
+++ b/.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 }],
diff --git a/src/components/InfoBox/InfoBox.stories.svelte b/src/components/InfoBox/InfoBox.stories.svelte
index e30faf99..7c8688d4 100644
--- a/src/components/InfoBox/InfoBox.stories.svelte
+++ b/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'],
diff --git a/src/components/InfoBox/InfoBox.svelte b/src/components/InfoBox/InfoBox.svelte
index b811dbcd..ed6eb570 100644
--- a/src/components/InfoBox/InfoBox.svelte
+++ b/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) {
diff --git a/src/components/InfoBox/stories/docs/component.md b/src/components/InfoBox/stories/docs/component.md
index 166f4a65..909ae106 100644
--- a/src/components/InfoBox/stories/docs/component.md
+++ b/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