From fd9aa876ffcbfcb44f5d25f191db7c45044ca54c Mon Sep 17 00:00:00 2001
From: Prasanta Kumar Dutta <7580745+pkd2512@users.noreply.github.com>
Date: Sat, 16 Sep 2023 17:17:25 +0530
Subject: [PATCH] add infobox #120

---
 src/components/InfoBox/InfoBox.stories.svelte |  47 +++++++
 src/components/InfoBox/InfoBox.svelte         | 123 ++++++++++++++++++
 .../InfoBox/stories/docs/component.md         |  15 +++
 src/index.js                                  |   1 +
 4 files changed, 186 insertions(+)
 create mode 100644 src/components/InfoBox/InfoBox.stories.svelte
 create mode 100644 src/components/InfoBox/InfoBox.svelte
 create mode 100644 src/components/InfoBox/stories/docs/component.md

diff --git a/src/components/InfoBox/InfoBox.stories.svelte b/src/components/InfoBox/InfoBox.stories.svelte
new file mode 100644
index 00000000..e30faf99
--- /dev/null
+++ b/src/components/InfoBox/InfoBox.stories.svelte
@@ -0,0 +1,47 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore
+  import componentDocs from './stories/docs/component.md?raw';
+
+  import InfoBox from './InfoBox.svelte';
+  import BodyText from '../BodyText/BodyText.svelte';
+  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
+
+  const metaProps = {
+    ...withComponentDocs(componentDocs),
+    argTypes: {
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+    },
+  };
+</script>
+
+<Meta title="Components/InfoBox" component="{InfoBox}" {...metaProps} />
+
+<Template let:args>
+  <InfoBox {...args} />
+</Template>
+
+<Story name="Default">
+  <BodyText
+    text="If you haven't seen Game of Thrones, go watch it right now. If you have then you'll totally get why this Hodor themed lorem ipsum generator is just brilliant."
+  />
+  <InfoBox
+    title="About this data"
+    text="{'Reuters is collecting daily COVID-19 infections and deaths data for 240 countries and territories around the world, updated regularly throughout each day. \n\n Every country reports those figures a little differently and, inevitably, misses undiagnosed infections and deaths. With this project we are focusing on the trends within countries as they try to contain the virus’ spread, whether they are approaching or past peak infection rates, or if they are seeing a resurgence of infections or deaths.'}"
+    notes="{'[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)'}"
+  />
+  <BodyText
+    text="In case you don't read Twitter, the news, or just can't get enough of The Apprentice host's legendary oration, try this Trump lorem ipsum generator on for size."
+  />
+</Story>
+
+<Story name="List">
+  <InfoBox
+    title="What you need to know about the war"
+    text="{"- **Food crisis**: [Russia's invasion of Ukraine](#) in late February dramatically worsened the outlook for already inflated global food prices. \n- **Under fire**: Civillian homes destroyed in the conflict and Russia accused of war crimes. \n- **Nordstream sabotage**: A series of clandestine bombings and subsequent underwater gas leaks occurred on the Nord Stream 1 and Nord Stream 2 natural gas pipelines. "}"
+  />
+</Story>
diff --git a/src/components/InfoBox/InfoBox.svelte b/src/components/InfoBox/InfoBox.svelte
new file mode 100644
index 00000000..b811dbcd
--- /dev/null
+++ b/src/components/InfoBox/InfoBox.svelte
@@ -0,0 +1,123 @@
+<!-- @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';
+  /**
+   * Title of the box
+   */
+  export let title: string | null = null;
+
+  /**
+   * Contents of the note as a markdown string
+   */
+  export let text: string = '';
+
+  /**
+   * Additional footnotes
+   */ export let notes: string | null = null;
+
+  /**
+   * Width of the component within the text well.
+   * @type {string}
+   */
+  export let width: ContainerWidth = 'normal';
+
+  /**
+   * Add extra classes to the block tag to target it with custom CSS.
+   * @type {string}
+   */
+  let cls: string = '';
+  export { cls as class };
+
+  /**
+   * Add an id to the block tag to target it with custom CSS.
+   * @type {string}
+   */
+  export let id: string = '';
+
+  import Block from '../Block/Block.svelte';
+  import { marked } from 'marked';
+</script>
+
+<aside class="infobox">
+  <Block
+    width="{width}"
+    id="{id}"
+    class="{cls} fmy-6 fpx-6 fpy-5 border border-solid rounded"
+  >
+    {#if $$slots.header}
+      <div class="header fmb-2">
+        <!-- Custom title content -->
+        <slot name="header" />
+      </div>
+    {:else if title}
+      <div class="header fmb-2">{@html marked(title)}</div>
+    {/if}
+
+    {#if $$slots.body}
+      <div class="body">
+        <!-- Custom content -->
+        <slot name="body" />
+      </div>
+    {:else}
+      <div class="body">{@html marked(text)}</div>
+    {/if}
+
+    {#if $$slots.footer}
+      <div class="footer fmt-2">
+        <!-- Custom footer content -->
+        <slot name="footer" />
+      </div>
+    {:else if notes}
+      <div class="footer fmt-2">{@html marked(notes)}</div>
+    {/if}
+  </Block>
+</aside>
+
+<style lang="scss">
+  @import '../../scss/mixins';
+
+  .infobox {
+    :global(.article-block) {
+      border-color: var(--theme-colour-brand-rules);
+      background-color: #fafafa;
+    }
+
+    :global(.header p) {
+      @include h4;
+      @include fmy-0;
+    }
+
+    :global(.body p) {
+      @include body-note;
+      @include text-sm;
+      @include font-light;
+      &:last-child {
+        @include fmb-0;
+      }
+    }
+
+    :global(.body ul),
+    :global(.body ol) {
+      @include body-note;
+      @include text-sm;
+      @include font-light;
+      @include fmb-0;
+    }
+
+    :global(.body ul li),
+    :global(.body ol li) {
+      @include fmt-0;
+      @include fmy-2;
+      &:last-child {
+        @include fmb-0;
+      }
+    }
+
+    :global(.footer p) {
+      @include body-caption;
+      &:last-child {
+        @include fmb-0;
+      }
+    }
+  }
+</style>
diff --git a/src/components/InfoBox/stories/docs/component.md b/src/components/InfoBox/stories/docs/component.md
new file mode 100644
index 00000000..166f4a65
--- /dev/null
+++ b/src/components/InfoBox/stories/docs/component.md
@@ -0,0 +1,15 @@
+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.
+
+Use the slots to customize the content as needed, e.g. adding icons and thumbnail images etc.
+
+```svelte
+<script>
+  import { InfoBox } from '@reuters-graphics/graphics-components';
+</script>
+
+<InfoBox
+  title="About this data"
+  text="{'Reuters is collecting daily COVID-19 infections and deaths data for 240 countries and territories around the world, updated regularly throughout each day. \n\n Every country reports those figures a little differently and, inevitably, misses undiagnosed infections and deaths. With this project we are focusing on the trends within countries as they try to contain the virus’ spread, whether they are approaching or past peak infection rates, or if they are seeing a resurgence of infections or deaths.'}"
+  notes="{'[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)'}"
+/>
+```
diff --git a/src/index.js b/src/index.js
index 6b7491d6..d7666fd8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -21,6 +21,7 @@ export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.
 export { default as Headline } from './components/Headline/Headline.svelte';
 export { default as HeroHeadline } from './components/HeroHeadline/Hero.svelte';
 export { default as EndNotes } from './components/EndNotes/EndNotes.svelte';
+export { default as InfoBox } from './components/InfoBox/InfoBox.svelte';
 export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
 export { default as PhotoCarousel } from './components/PhotoCarousel/PhotoCarousel.svelte';
 export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';