From f1ae721d3fb4b788ac4149d29ae5e63e9dc69895 Mon Sep 17 00:00:00 2001
From: Prasanta Kumar Dutta <7580745+pkd2512@users.noreply.github.com>
Date: Fri, 25 Aug 2023 13:42:23 +0530
Subject: [PATCH] basic hero headline

---
 .../GraphicBlock/GraphicBlock.svelte          |   3 +-
 src/components/Headline/Headline.svelte       |   5 +-
 src/components/Hero/Hero.stories.svelte       |  32 ---
 src/components/Hero/Hero.svelte               |  84 ------
 src/components/Hero/docs.svx                  | 112 --------
 .../Hero/stories/docs/withByline.md           |  19 --
 src/components/Hero/stories/docs/withCrown.md |  16 --
 .../HeroHeadline/Hero.stories.svelte          |  67 +++++
 src/components/HeroHeadline/Hero.svelte       | 240 ++++++++++++++++++
 .../stories/docs/backgroundImage.md}          |   0
 .../HeroHeadline/stories/docs/component.md    |  16 ++
 .../{Hero => HeroHeadline}/stories/polar.jpg  | Bin
 src/index.js                                  |   9 +-
 src/scss/tokens/spacers/_fluid-margin.scss    |  12 +-
 .../tokens/spacers/mixins/_fluid-margin.scss  | 132 ++++++----
 15 files changed, 427 insertions(+), 320 deletions(-)
 delete mode 100644 src/components/Hero/Hero.stories.svelte
 delete mode 100644 src/components/Hero/Hero.svelte
 delete mode 100644 src/components/Hero/docs.svx
 delete mode 100644 src/components/Hero/stories/docs/withByline.md
 delete mode 100644 src/components/Hero/stories/docs/withCrown.md
 create mode 100644 src/components/HeroHeadline/Hero.stories.svelte
 create mode 100644 src/components/HeroHeadline/Hero.svelte
 rename src/components/{Hero/stories/docs/component.md => HeroHeadline/stories/docs/backgroundImage.md} (100%)
 create mode 100644 src/components/HeroHeadline/stories/docs/component.md
 rename src/components/{Hero => HeroHeadline}/stories/polar.jpg (100%)

diff --git a/src/components/GraphicBlock/GraphicBlock.svelte b/src/components/GraphicBlock/GraphicBlock.svelte
index 112120e2..5520ddd3 100644
--- a/src/components/GraphicBlock/GraphicBlock.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.svelte
@@ -123,7 +123,7 @@
     {:else if notes}
       <PaddingReset containerIsFluid="{width === 'fluid'}">
         <TextBlock width="{textWidth}">
-          <aside>
+          <aside class="fmt-2">
             {@html marked(notes)}
           </aside>
         </TextBlock>
@@ -143,7 +143,6 @@
     }
     // Caption and Sources
     aside {
-      @include fmt-2;
       p {
         @include body-caption;
       }
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index 1594cbbd..228778cf 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -111,6 +111,7 @@
       <slot name="byline" />
     {:else if authors.length > 0 || publishTime}
       <Byline
+        class="fmy-3"
         authors="{authors}"
         publishTime="{publishTime}"
         updateTime="{updateTime}"
@@ -138,10 +139,6 @@
           @include font-light;
         }
       }
-
-      .byline-container {
-        @include fmy-3;
-      }
     }
   }
 </style>
diff --git a/src/components/Hero/Hero.stories.svelte b/src/components/Hero/Hero.stories.svelte
deleted file mode 100644
index 4e333422..00000000
--- a/src/components/Hero/Hero.stories.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
-  // @ts-ignore
-  import componentDocs from './stories/docs/component.md?raw';
-
-  // @ts-ignore
-  import polarImgSrc from './stories/polar.jpg';
-
-  import Hero from './Hero.svelte';
-
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-</script>
-
-<Meta
-  title="Components/Hero"
-  component="{Hero}"
-  {...withComponentDocs(componentDocs)}
-/>
-
-<Template let:args>
-  <Hero {...args} />
-</Template>
-
-<Story
-  name="Default"
-  args="{{
-    section: 'World News',
-    hed: 'Reuters Graphics interactive',
-    imgSrc: polarImgSrc,
-  }}"
-/>
diff --git a/src/components/Hero/Hero.svelte b/src/components/Hero/Hero.svelte
deleted file mode 100644
index 482fbdb0..00000000
--- a/src/components/Hero/Hero.svelte
+++ /dev/null
@@ -1,84 +0,0 @@
-<script lang="ts">
-  /**
-    * Headline
-    */
-  export let hed: string = 'Reuters Graphics Interactive';
-  /**
-    * Hedline colour
-    */
-  export let hedColour = 'white';
-  /**
-    * Dek
-    */
-  export let dek: string | null = null;
-  /**
-    * Section title
-    */
-  export let section: string | null = null;
-  /**
-    * Section colour
-    */
-  export let sectionColour: string = 'red';
-
-  export let imgSrc: string;
-  export let imgAltText: string;
-
-  
-
-  export let overlay: boolean | string = true;
-
-  export let top = false;
-  export let bottom = false;
-  export let left = false;
-  export let right = false;
-</script>
-
-
-<section class="hero-title">
-  <figure>
-    {#if $$slots.image}
-      <slot name='image'></slot>
-    {:else}
-      <img src="{imgSrc}" alt="{imgAltText}" />
-    {/if}
-    {#if overlay}
-      <div
-        class="overlay"
-        class:lightest={overlay === 'lightest'}
-        class:lighter={overlay === 'lighter'}
-        class:light={overlay === 'light'}
-        class:dark={overlay === 'dark'}
-        class:darker={overlay === 'darker'}
-        class:darkest={overlay === 'darkest'}
-      ></div>
-    {/if}
-  </figure>
-  <div
-    class="title color-white"
-    class:top={top}
-    class:bottom={bottom}
-    class:left={left}
-    class:right={right}
-  >
-    {#if section}
-      <p class={`section-title color-${sectionColour} text-shadow`}>{section}</p>
-    {/if}
-    
-    {#if $$slots.hed}
-       <slot name="hed"></slot>
-    {:else}
-      <h2
-        class={`text-shadow-darker color-${hedColour} important`}
-      >{hed}</h2>
-    {/if}
-
-    {#if $$slots.dek}
-       <slot name="dek"></slot>
-    {:else}
-      {#if dek}
-        <p class="text-shadow-darkest">{dek}</p>
-      {/if}
-    {/if}
-  </div>
-</section>
-
diff --git a/src/components/Hero/docs.svx b/src/components/Hero/docs.svx
deleted file mode 100644
index 3b2bb553..00000000
--- a/src/components/Hero/docs.svx
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: Hero
-description: A headline over a hero image
-slug: hero
----
-
-<script>
-  import DemoContainer from '../_docs/DemoContainer/index.svelte'; import Hero
-  from './index.svelte'; import {assets} from '$app/paths';
-</script>
-
-<section>
-
-## {title}
-
-{description}
-
-</section>
-
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-svelte-components';
-  import { assets } from '$app/paths';
-</script>
-
-<Hero hed="Eisbär" section="Climate Change" dek="The last of the white bears">
-  <img slot="image" src="{`${assets}/images/polar.jpg`}" alt="A polar bear" />
-</Hero>
-```
-
-<DemoContainer>
-  <Hero hed="Eisbär" section="Climate Change" dek="The last of the white bears">
-    <img slot="image" src={`${assets}/images/polar.jpg`} alt="A polar bear" />
-  </Hero>
-</DemoContainer>
-
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-svelte-components';
-  import { assets } from '$app/paths';
-</script>
-
-<!-- Place the title with top, bottom, left & right props-->
-<Hero
-  hed="Eisbär"
-  section="Climate Change"
-  dek="The last of the white bears"
-  overlay="{'darker'}"
-  bottom
-  left
->
-  <img slot="image" src="{`${assets}/images/polar.jpg`}" alt="A polar bear" />
-</Hero>
-```
-
-<DemoContainer>
-  <Hero
-    hed="Eisbär"
-    section="Climate Change"
-    dek="The last of the white bears"
-    overlay={'darker'}
-    bottom
-    left
-  >
-    <img slot="image" src={`${assets}/images/polar.jpg`} alt="A polar bear" />
-  </Hero>
-</DemoContainer>
-
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-svelte-components';
-  import { assets } from '$app/paths';
-</script>
-
-<Hero section="Climate Change" overlay="{false}">
-  <img slot="image" src="{`${assets}/images/polar.jpg`}" alt="A polar bear" />
-  <!-- Override the hed and/or dek with named slots -->
-  <h2 slot="hed" class="uppercase spaced-more color-blue text-shadow-lighter">
-    Eisbaer
-  </h2>
-  <p slot="dek" class="color-blue text-shadow-lighter">
-    The last of the white bears
-  </p>
-</Hero>
-```
-
-<DemoContainer>
-  <Hero section="Climate Change" overlay={false}>
-    <img slot="image" src="{`${assets}/images/polar.jpg`}" alt="A polar bear" />
-    <h2 slot="hed" class="uppercase spaced-more color-blue text-shadow-lighter">
-      Eisbaer
-    </h2>
-    <p slot="dek" class="color-blue text-shadow-lighter">
-      The last of the white bears
-    </p>
-  </Hero>
-</DemoContainer>
-
-<style lang="scss">
-  /*Fudging some styles for the demo...*/
-  :global {
-    section.hero-title {
-      figure {
-        margin: 0 !important;
-        width: 100% !important;
-      }
-      div.title {
-        padding: 0 15px !important;
-      }
-    }
-  }
-</style>
diff --git a/src/components/Hero/stories/docs/withByline.md b/src/components/Hero/stories/docs/withByline.md
deleted file mode 100644
index 3f59865d..00000000
--- a/src/components/Hero/stories/docs/withByline.md
+++ /dev/null
@@ -1,19 +0,0 @@
-Add a byline and dateline with `byline` and `dateline` named slots.
-
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-</script>
-
-<Headline
-  hed="{'Reuters Graphics Interactive'}"
-  dek="{'The beginning of a beautiful page'}"
-  section="{'Global news'}"
-  sectionColour="{'orange'}"
->
-  <!-- Use named slots to add a byline... -->
-  <span slot="byline">By <strong>Peppa Pig</strong></span>
-  <!-- ...and a dateline. -->
-  <span slot="dateline">Published Jan. 1, 2020</span>
-</Headline>
-```
diff --git a/src/components/Hero/stories/docs/withCrown.md b/src/components/Hero/stories/docs/withCrown.md
deleted file mode 100644
index cd50697d..00000000
--- a/src/components/Hero/stories/docs/withCrown.md
+++ /dev/null
@@ -1,16 +0,0 @@
-Add a crown image in the `crown` named slot and override the headline in the `hed` named slot.
-
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths';
-</script>
-
-<Headline>
-  <!-- Add a crown -->
-  <img slot="crown" src="{`${assets}/images/crown.png`}" />
-  <!-- Override the hed with a named slot -->
-  <h2 slot="hed" class="spaced font-serif">Europa</h2>
-  <span slot="dateline">Published Jan. 1, 2020</span>
-</Headline>
-```
diff --git a/src/components/HeroHeadline/Hero.stories.svelte b/src/components/HeroHeadline/Hero.stories.svelte
new file mode 100644
index 00000000..1e598acd
--- /dev/null
+++ b/src/components/HeroHeadline/Hero.stories.svelte
@@ -0,0 +1,67 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore
+  import componentDocs from './stories/docs/component.md?raw';
+  // @ts-ignore
+  // import backgroundImageDocs from './stories/docs/backgroundImage.md?raw';
+
+  // @ts-ignore
+  import polarImgSrc from './stories/polar.jpg';
+  // import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
+
+  import HeroHeadline from './Hero.svelte';
+
+  import {
+    withComponentDocs,
+    // withStoryDocs,
+  } from '$lib/docs/utils/withParams.js';
+
+  const metaProps = {
+    ...withComponentDocs(componentDocs),
+    // https://storybook.js.org/docs/svelte/essentials/controls
+    argTypes: {
+      hedSize: {
+        control: 'select',
+        options: ['small', 'normal', 'big', 'bigger', 'biggest'],
+      },
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest'],
+      },
+    },
+  };
+</script>
+
+<Meta
+  title="Components/HeroHeadline"
+  component="{HeroHeadline}"
+  {...metaProps}
+/>
+
+<Template let:args>
+  <HeroHeadline {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    section: 'World News',
+    hed: 'Reuters Graphics Interactive',
+    hedSize: 'normal',
+    dek: 'The beginning of a beautiful page',
+    authors: ['Simon Scarr', 'Vijdan Mohammad Kawoosa'],
+    publishTime: new Date('2022-03-04').toISOString(),
+    img: polarImgSrc,
+  }}"
+/>
+
+<!-- <Story name="With inline media" {...withStoryDocs(backgroundImageDocs)}>
+  <HeroHeadline
+    hed="{'The plunge from 29,000 feet'}"
+    dek="{'How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes.'}"
+    section="{'Global news'}"
+    authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
+    publishTime="{new Date('2020-01-01').toISOString()}"
+  />
+</Story> -->
diff --git a/src/components/HeroHeadline/Hero.svelte b/src/components/HeroHeadline/Hero.svelte
new file mode 100644
index 00000000..b04fbd43
--- /dev/null
+++ b/src/components/HeroHeadline/Hero.svelte
@@ -0,0 +1,240 @@
+<!-- @component `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-HeroHeadline--default) -->
+<script lang="ts">
+  import { HeadlineSize } from '../@types/global';
+  import cssVariables from '../../actions/cssVariables/index.js';
+
+  /** Set to true for embeddables. */
+  export let embedded: boolean = false;
+
+  /**
+   * Path to background image
+   * @type {string}
+   */
+  export let img: string;
+
+  /**
+   * Size value for CSS property background-size
+   * @type {string}
+   */
+  export let backgroundSize: 'auto' | 'cover' | 'contain' = 'cover';
+
+  /**
+   * Position value for  CSS property background-position
+   * @type {string}
+   */
+  export let backgroundPos = 'center';
+
+  /**
+   * ARIA description, passed in as a markdown string.
+   * @type {string}
+   */
+  export let ariaDescription: string | null = null;
+
+  /**
+   * Notes to the graphic, passed in as a markdown string.
+   * @type {string}
+   */
+  export let notes: string | null = null;
+
+  /**
+   * Height as a percetange of viewport height
+   * @type {number}
+   */
+  export let heroHeight: number = 100;
+
+  /**
+   * Headline, parsed as an _inline_ markdown string in an `h1` element.
+   * @type {string}
+   */
+  export let hed: string = 'Reuters Graphics Interactive';
+
+  /** Add extra classes to the block tag to target it with custom CSS. */
+  let cls: string = '';
+  export { cls as class };
+
+  /**
+   * Headline size
+   * @type {string}
+   */
+  export let hedSize: HeadlineSize = 'normal';
+
+  /**
+   * Headline horizontal alignment
+   * @type {string}
+   */
+  export let hedAlign: 'left' | 'center' | 'right' = 'center';
+
+  /**
+   * Dek, parsed as a markdown string.
+   * @type {string}
+   */
+  export let dek: string | null = null;
+  /**
+   * Section title
+   * @type {string}
+   */
+  export let section: string | null = null;
+  /**
+   * Array of author names, which will be slugified to create links to Reuters author pages
+   */
+  export let authors: string[] = [];
+  /**
+   * Publish time as a datetime string.
+   * @type {string}
+   */
+  export let publishTime: string = '';
+  /**
+   * Update time as a datetime string.
+   * @type {string}
+   */
+  export let updateTime: string = '';
+
+  /**
+   * Width of the headline.
+   */
+  export let width: 'normal' | 'wide' | 'wider' | 'widest' = 'normal';
+
+  import Headline from '../Headline/Headline.svelte';
+  import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
+  import TextBlock from '../GraphicBlock/TextBlock.svelte';
+  import Block from '../Block/Block.svelte';
+  import Byline from '../Byline/Byline.svelte';
+  import { marked } from 'marked';
+
+  let hedClass;
+  $: {
+    switch (hedSize) {
+      case 'biggest':
+        hedClass = 'text-6xl';
+        break;
+      case 'bigger':
+        hedClass = 'text-5xl';
+        break;
+      case 'big':
+        hedClass = 'text-4xl';
+        break;
+      case 'small':
+        hedClass = 'text-2xl';
+        break;
+      default:
+        hedClass = 'text-3xl';
+    }
+  }
+
+  $: variables = {
+    heroHeight: embedded ? '850px' : heroHeight + 'svh',
+    backgroundSize,
+    backgroundPos,
+  };
+</script>
+
+<div class="hero-wrapper" use:cssVariables="{variables}">
+  <!-- Background media -->
+  {#if $$slots.background || img}
+    <Block width="fluid" class="hero-headline fmt-0">
+      <Headline
+        class="{cls} mt-0 !text-{hedAlign}"
+        width="{width}"
+        section="{section}"
+        hedSize="{hedSize}"
+        hed="{hed}"
+        dek="{dek}"
+      />
+      <div class="background-container">
+        {#if $$slots.background}
+          <!-- Hero named slot -->
+          <slot name="background" />
+        {:else}
+          <GraphicBlock
+            width="fluid"
+            role="img"
+            class="my-0"
+            textWidth="normal"
+            ariaDescription="{ariaDescription}"
+          >
+            <div
+              class="background-image"
+              style="background-image: url({img})"
+            ></div>
+          </GraphicBlock>
+        {/if}
+      </div>
+    </Block>
+  {/if}
+  {#if notes}
+    <TextBlock width="normal">
+      <aside class="fmt-2">
+        {@html marked(notes)}
+      </aside>
+    </TextBlock>
+  {/if}
+</div>
+
+{#if $$slots.inline}
+  <div class="crown-container">
+    <!-- Hero named slot -->
+    <slot name="inline" />
+  </div>
+{/if}
+
+{#if $$slots.byline}
+  <!-- Custom byline/dateline -->
+  <slot name="byline" />
+{:else if authors.length > 0 || publishTime}
+  <Byline
+    class="fmt-7 fmb-5"
+    authors="{authors}"
+    publishTime="{publishTime}"
+    updateTime="{updateTime}"
+    align="left"
+  />
+{/if}
+
+<style lang="scss">
+  @import '../../scss/mixins';
+
+  :global {
+    .hero-headline {
+      height: var(--heroHeight);
+      max-height: 1800px;
+      width: 100%;
+      position: relative;
+
+      .headline {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 1;
+        position: absolute;
+        top: 0;
+        left: 50%;
+        height: var(--heroHeight);
+        max-height: 1800px;
+        transform: translateX(-50%);
+      }
+    }
+
+    .hero-wrapper {
+      // Caption and Sources
+      aside {
+        p {
+          @include body-caption;
+        }
+      }
+    }
+  }
+  .background-image {
+    position: absolute;
+    width: 100%;
+    height: var(--heroHeight);
+    max-height: 1800px;
+    top: 0;
+    z-index: 0;
+    left: 0;
+    user-select: none;
+
+    background-repeat: no-repeat;
+    background-position: var(--backgroundPos);
+    background-size: var(--backgroundSize);
+  }
+</style>
diff --git a/src/components/Hero/stories/docs/component.md b/src/components/HeroHeadline/stories/docs/backgroundImage.md
similarity index 100%
rename from src/components/Hero/stories/docs/component.md
rename to src/components/HeroHeadline/stories/docs/backgroundImage.md
diff --git a/src/components/HeroHeadline/stories/docs/component.md b/src/components/HeroHeadline/stories/docs/component.md
new file mode 100644
index 00000000..1c4be9cb
--- /dev/null
+++ b/src/components/HeroHeadline/stories/docs/component.md
@@ -0,0 +1,16 @@
+> 🔨 **Under construction**: We're working on this component to make it better. Pardon our mess.
+
+Reuters Graphics headline
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+</script>
+
+<Headline
+  hed="{'Reuters Graphics Interactive'}"
+  dek="{'The beginning of a beautiful page'}"
+  section="{'Global news'}"
+  sectionColour="{'orange'}"
+/>
+```
diff --git a/src/components/Hero/stories/polar.jpg b/src/components/HeroHeadline/stories/polar.jpg
similarity index 100%
rename from src/components/Hero/stories/polar.jpg
rename to src/components/HeroHeadline/stories/polar.jpg
diff --git a/src/index.js b/src/index.js
index e2eabf35..3639d00a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,7 +3,10 @@ export { default as cssVariables } from './actions/cssVariables/index.js';
 export { default as resizeObserver } from './actions/resizeObserver/index.js';
 
 // Components
-export { default as Analytics, registerPageview } from './components/Analytics/Analytics.svelte';
+export {
+  default as Analytics,
+  registerPageview,
+} from './components/Analytics/Analytics.svelte';
 export { default as Article } from './components/Article/Article.svelte';
 export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.svelte';
 export { default as Block } from './components/Block/Block.svelte';
@@ -16,7 +19,7 @@ export { default as FeaturePhoto } from './components/FeaturePhoto/FeaturePhoto.
 export { default as Framer } from './components/Framer/Framer.svelte';
 export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.svelte';
 export { default as Headline } from './components/Headline/Headline.svelte';
-export { default as Hero } from './components/Hero/Hero.svelte';
+export { default as HeroHeadline } from './components/HeroHeadline/Hero.svelte';
 export { default as NoteText } from './components/NoteText/NoteText.svelte';
 export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
 export { default as PhotoCarousel } from './components/PhotoCarousel/PhotoCarousel.svelte';
@@ -39,7 +42,7 @@ export { default as Table } from './components/Table/Table.svelte';
 export {
   default as Theme,
   // @ts-ignore
-  themes
+  themes,
 } from './components/Theme/Theme.svelte';
 export { default as ToolsHeader } from './components/ToolsHeader/ToolsHeader.svelte';
 export { default as Video } from './components/Video/Video.svelte';
diff --git a/src/scss/tokens/spacers/_fluid-margin.scss b/src/scss/tokens/spacers/_fluid-margin.scss
index 9c0cfdda..bb641847 100644
--- a/src/scss/tokens/spacers/_fluid-margin.scss
+++ b/src/scss/tokens/spacers/_fluid-margin.scss
@@ -17,10 +17,12 @@
     margin-left: $value;
   }
   %fmx-#{$level} {
-    margin-inline: $value;
+    margin-left: $value;
+    margin-right: $value;
   }
   %fmy-#{$level} {
-    margin-block: $value;
+    margin-top: $value;
+    margin-bottom: $value;
   }
 
   %\!fm-#{$level} {
@@ -39,10 +41,12 @@
     margin-left: $value !important;
   }
   %\!fmx-#{$level} {
-    margin-inline: $value !important;
+    margin-left: $value !important;
+    margin-right: $value !important;
   }
   %\!fmy-#{$level} {
-    margin-block: $value !important;
+    margin-top: $value !important;
+    margin-bottom: $value !important;
   }
 }
 
diff --git a/src/scss/tokens/spacers/mixins/_fluid-margin.scss b/src/scss/tokens/spacers/mixins/_fluid-margin.scss
index b4afc7b5..5c76d3f3 100644
--- a/src/scss/tokens/spacers/mixins/_fluid-margin.scss
+++ b/src/scss/tokens/spacers/mixins/_fluid-margin.scss
@@ -17,10 +17,12 @@ $fluid-margin-levels: (
   margin: map.get($fluid-margin-levels, '0');
 }
 @mixin fmx-0 {
-  margin-inline: map.get($fluid-margin-levels, '0');
+  margin-left: map.get($fluid-margin-levels, '0');
+  margin-right: map.get($fluid-margin-levels, '0');
 }
 @mixin fmy-0 {
-  margin-block: map.get($fluid-margin-levels, '0');
+  margin-top: map.get($fluid-margin-levels, '0');
+  margin-bottom: map.get($fluid-margin-levels, '0');
 }
 @mixin fmt-0 {
   margin-top: map.get($fluid-margin-levels, '0');
@@ -38,10 +40,12 @@ $fluid-margin-levels: (
   margin: map.get($fluid-margin-levels, '0') !important;
 }
 @mixin \!fmx-0 {
-  margin-inline: map.get($fluid-margin-levels, '0') !important;
+  margin-left: map.get($fluid-margin-levels, '0') !important;
+  margin-right: map.get($fluid-margin-levels, '0') !important;
 }
 @mixin \!fmy-0 {
-  margin-block: map.get($fluid-margin-levels, '0') !important;
+  margin-top: map.get($fluid-margin-levels, '0') !important;
+  margin-bottom: map.get($fluid-margin-levels, '0') !important;
 }
 @mixin \!fmt-0 {
   margin-top: map.get($fluid-margin-levels, '0') !important;
@@ -60,10 +64,12 @@ $fluid-margin-levels: (
   margin: map.get($fluid-margin-levels, '1');
 }
 @mixin fmx-1 {
-  margin-inline: map.get($fluid-margin-levels, '1');
+  margin-left: map.get($fluid-margin-levels, '1');
+  margin-right: map.get($fluid-margin-levels, '1');
 }
 @mixin fmy-1 {
-  margin-block: map.get($fluid-margin-levels, '1');
+  margin-top: map.get($fluid-margin-levels, '1');
+  margin-bottom: map.get($fluid-margin-levels, '1');
 }
 @mixin fmt-1 {
   margin-top: map.get($fluid-margin-levels, '1');
@@ -81,10 +87,12 @@ $fluid-margin-levels: (
   margin: map.get($fluid-margin-levels, '1') !important;
 }
 @mixin \!fmx-1 {
-  margin-inline: map.get($fluid-margin-levels, '1') !important;
+  margin-left: map.get($fluid-margin-levels, '1') !important;
+  margin-right: map.get($fluid-margin-levels, '1') !important;
 }
 @mixin \!fmy-1 {
-  margin-block: map.get($fluid-margin-levels, '1') !important;
+  margin-top: map.get($fluid-margin-levels, '1') !important;
+  margin-bottom: map.get($fluid-margin-levels, '1') !important;
 }
 @mixin \!fmt-1 {
   margin-top: map.get($fluid-margin-levels, '1') !important;
@@ -103,10 +111,12 @@ $fluid-margin-levels: (
   margin: map.get($fluid-margin-levels, '2');
 }
 @mixin fmx-2 {
-  margin-inline: map.get($fluid-margin-levels, '2');
+  margin-left: map.get($fluid-margin-levels, '2');
+  margin-right: map.get($fluid-margin-levels, '2');
 }
 @mixin fmy-2 {
-  margin-block: map.get($fluid-margin-levels, '2');
+  margin-top: map.get($fluid-margin-levels, '2');
+  margin-bottom: map.get($fluid-margin-levels, '2');
 }
 @mixin fmt-2 {
   margin-top: map.get($fluid-margin-levels, '2');
@@ -124,10 +134,12 @@ $fluid-margin-levels: (
   margin: map.get($fluid-margin-levels, '2') !important;
 }
 @mixin \!fmx-2 {
-  margin-inline: map.get($fluid-margin-levels, '2') !important;
+  margin-left: map.get($fluid-margin-levels, '2') !important;
+  margin-right: map.get($fluid-margin-levels, '2') !important;
 }
 @mixin \!fmy-2 {
-  margin-block: map.get($fluid-margin-levels, '2') !important;
+  margin-top: map.get($fluid-margin-levels, '2') !important;
+  margin-bottom: map.get($fluid-margin-levels, '2') !important;
 }
 @mixin \!fmt-2 {
   margin-top: map.get($fluid-margin-levels, '2') !important;
@@ -146,10 +158,12 @@ $fluid-margin-levels: (
   margin: map.get($fluid-margin-levels, '3');
 }
 @mixin fmx-3 {
-  margin-inline: map.get($fluid-margin-levels, '3');
+  margin-left: map.get($fluid-margin-levels, '3');
+  margin-right: map.get($fluid-margin-levels, '3');
 }
 @mixin fmy-3 {
-  margin-block: map.get($fluid-margin-levels, '3');
+  margin-top: map.get($fluid-margin-levels, '3');
+  margin-bottom: map.get($fluid-margin-levels, '3');
 }
 @mixin fmt-3 {
   margin-top: map.get($fluid-margin-levels, '3');
@@ -167,10 +181,12 @@ $fluid-margin-levels: (
   margin: map.get($fluid-margin-levels, '3') !important;
 }
 @mixin \!fmx-3 {
-  margin-inline: map.get($fluid-margin-levels, '3') !important;
+  margin-left: map.get($fluid-margin-levels, '3') !important;
+  margin-right: map.get($fluid-margin-levels, '3') !important;
 }
 @mixin \!fmy-3 {
-  margin-block: map.get($fluid-margin-levels, '3') !important;
+  margin-top: map.get($fluid-margin-levels, '3') !important;
+  margin-bottom: map.get($fluid-margin-levels, '3') !important;
 }
 @mixin \!fmt-3 {
   margin-top: map.get($fluid-margin-levels, '3') !important;
@@ -189,10 +205,12 @@ $fluid-margin-levels: (
   margin: map.get($fluid-margin-levels, '4');
 }
 @mixin fmx-4 {
-  margin-inline: map.get($fluid-margin-levels, '4');
+  margin-left: map.get($fluid-margin-levels, '4');
+  margin-right: map.get($fluid-margin-levels, '4');
 }
 @mixin fmy-4 {
-  margin-block: map.get($fluid-margin-levels, '4');
+  margin-top: map.get($fluid-margin-levels, '4');
+  margin-bottom: map.get($fluid-margin-levels, '4');
 }
 @mixin fmt-4 {
   margin-top: map.get($fluid-margin-levels, '4');
@@ -210,10 +228,12 @@ $fluid-margin-levels: (
   margin: map.get($fluid-margin-levels, '4') !important;
 }
 @mixin \!fmx-4 {
-  margin-inline: map.get($fluid-margin-levels, '4') !important;
+  margin-left: map.get($fluid-margin-levels, '4') !important;
+  margin-right: map.get($fluid-margin-levels, '4') !important;
 }
 @mixin \!fmy-4 {
-  margin-block: map.get($fluid-margin-levels, '4') !important;
+  margin-top: map.get($fluid-margin-levels, '4') !important;
+  margin-bottom: map.get($fluid-margin-levels, '4') !important;
 }
 @mixin \!fmt-4 {
   margin-top: map.get($fluid-margin-levels, '4') !important;
@@ -232,10 +252,12 @@ $fluid-margin-levels: (
   margin: map.get($fluid-margin-levels, '5');
 }
 @mixin fmx-5 {
-  margin-inline: map.get($fluid-margin-levels, '5');
+  margin-left: map.get($fluid-margin-levels, '5');
+  margin-right: map.get($fluid-margin-levels, '5');
 }
 @mixin fmy-5 {
-  margin-block: map.get($fluid-margin-levels, '5');
+  margin-top: map.get($fluid-margin-levels, '5');
+  margin-bottom: map.get($fluid-margin-levels, '5');
 }
 @mixin fmt-5 {
   margin-top: map.get($fluid-margin-levels, '5');
@@ -253,10 +275,12 @@ $fluid-margin-levels: (
   margin: map.get($fluid-margin-levels, '5') !important;
 }
 @mixin \!fmx-5 {
-  margin-inline: map.get($fluid-margin-levels, '5') !important;
+  margin-left: map.get($fluid-margin-levels, '5') !important;
+  margin-right: map.get($fluid-margin-levels, '5') !important;
 }
 @mixin \!fmy-5 {
-  margin-block: map.get($fluid-margin-levels, '5') !important;
+  margin-top: map.get($fluid-margin-levels, '5') !important;
+  margin-bottom: map.get($fluid-margin-levels, '5') !important;
 }
 @mixin \!fmt-5 {
   margin-top: map.get($fluid-margin-levels, '5') !important;
@@ -275,10 +299,12 @@ $fluid-margin-levels: (
   margin: map.get($fluid-margin-levels, '6');
 }
 @mixin fmx-6 {
-  margin-inline: map.get($fluid-margin-levels, '6');
+  margin-left: map.get($fluid-margin-levels, '6');
+  margin-right: map.get($fluid-margin-levels, '6');
 }
 @mixin fmy-6 {
-  margin-block: map.get($fluid-margin-levels, '6');
+  margin-top: map.get($fluid-margin-levels, '6');
+  margin-bottom: map.get($fluid-margin-levels, '6');
 }
 @mixin fmt-6 {
   margin-top: map.get($fluid-margin-levels, '6');
@@ -296,10 +322,12 @@ $fluid-margin-levels: (
   margin: map.get($fluid-margin-levels, '6') !important;
 }
 @mixin \!fmx-6 {
-  margin-inline: map.get($fluid-margin-levels, '6') !important;
+  margin-left: map.get($fluid-margin-levels, '6') !important;
+  margin-right: map.get($fluid-margin-levels, '6') !important;
 }
 @mixin \!fmy-6 {
-  margin-block: map.get($fluid-margin-levels, '6') !important;
+  margin-top: map.get($fluid-margin-levels, '6') !important;
+  margin-bottom: map.get($fluid-margin-levels, '6') !important;
 }
 @mixin \!fmt-6 {
   margin-top: map.get($fluid-margin-levels, '6') !important;
@@ -318,10 +346,12 @@ $fluid-margin-levels: (
   margin: map.get($fluid-margin-levels, '7');
 }
 @mixin fmx-7 {
-  margin-inline: map.get($fluid-margin-levels, '7');
+  margin-left: map.get($fluid-margin-levels, '7');
+  margin-right: map.get($fluid-margin-levels, '7');
 }
 @mixin fmy-7 {
-  margin-block: map.get($fluid-margin-levels, '7');
+  margin-top: map.get($fluid-margin-levels, '7');
+  margin-bottom: map.get($fluid-margin-levels, '7');
 }
 @mixin fmt-7 {
   margin-top: map.get($fluid-margin-levels, '7');
@@ -339,10 +369,12 @@ $fluid-margin-levels: (
   margin: map.get($fluid-margin-levels, '7') !important;
 }
 @mixin \!fmx-7 {
-  margin-inline: map.get($fluid-margin-levels, '7') !important;
+  margin-left: map.get($fluid-margin-levels, '7') !important;
+  margin-right: map.get($fluid-margin-levels, '7') !important;
 }
 @mixin \!fmy-7 {
-  margin-block: map.get($fluid-margin-levels, '7') !important;
+  margin-top: map.get($fluid-margin-levels, '7') !important;
+  margin-bottom: map.get($fluid-margin-levels, '7') !important;
 }
 @mixin \!fmt-7 {
   margin-top: map.get($fluid-margin-levels, '7') !important;
@@ -361,10 +393,12 @@ $fluid-margin-levels: (
   margin: map.get($fluid-margin-levels, '8');
 }
 @mixin fmx-8 {
-  margin-inline: map.get($fluid-margin-levels, '8');
+  margin-left: map.get($fluid-margin-levels, '8');
+  margin-right: map.get($fluid-margin-levels, '8');
 }
 @mixin fmy-8 {
-  margin-block: map.get($fluid-margin-levels, '8');
+  margin-top: map.get($fluid-margin-levels, '8');
+  margin-bottom: map.get($fluid-margin-levels, '8');
 }
 @mixin fmt-8 {
   margin-top: map.get($fluid-margin-levels, '8');
@@ -382,10 +416,12 @@ $fluid-margin-levels: (
   margin: map.get($fluid-margin-levels, '8') !important;
 }
 @mixin \!fmx-8 {
-  margin-inline: map.get($fluid-margin-levels, '8') !important;
+  margin-left: map.get($fluid-margin-levels, '8') !important;
+  margin-right: map.get($fluid-margin-levels, '8') !important;
 }
 @mixin \!fmy-8 {
-  margin-block: map.get($fluid-margin-levels, '8') !important;
+  margin-top: map.get($fluid-margin-levels, '8') !important;
+  margin-bottom: map.get($fluid-margin-levels, '8') !important;
 }
 @mixin \!fmt-8 {
   margin-top: map.get($fluid-margin-levels, '8') !important;
@@ -404,10 +440,12 @@ $fluid-margin-levels: (
   margin: map.get($fluid-margin-levels, '9');
 }
 @mixin fmx-9 {
-  margin-inline: map.get($fluid-margin-levels, '9');
+  margin-left: map.get($fluid-margin-levels, '9');
+  margin-right: map.get($fluid-margin-levels, '9');
 }
 @mixin fmy-9 {
-  margin-block: map.get($fluid-margin-levels, '9');
+  margin-top: map.get($fluid-margin-levels, '9');
+  margin-bottom: map.get($fluid-margin-levels, '9');
 }
 @mixin fmt-9 {
   margin-top: map.get($fluid-margin-levels, '9');
@@ -425,10 +463,12 @@ $fluid-margin-levels: (
   margin: map.get($fluid-margin-levels, '9') !important;
 }
 @mixin \!fmx-9 {
-  margin-inline: map.get($fluid-margin-levels, '9') !important;
+  margin-left: map.get($fluid-margin-levels, '9') !important;
+  margin-right: map.get($fluid-margin-levels, '9') !important;
 }
 @mixin \!fmy-9 {
-  margin-block: map.get($fluid-margin-levels, '9') !important;
+  margin-top: map.get($fluid-margin-levels, '9') !important;
+  margin-bottom: map.get($fluid-margin-levels, '9') !important;
 }
 @mixin \!fmt-9 {
   margin-top: map.get($fluid-margin-levels, '9') !important;
@@ -447,17 +487,21 @@ $fluid-margin-levels: (
   margin: auto;
 }
 @mixin fmx-auto {
-  margin-inline: auto;
+  margin-left: auto;
+  margin-right: auto;
 }
 @mixin fmy-auto {
-  margin-block: auto;
+  margin-top: auto;
+  margin-bottom: auto;
 }
 @mixin \!fm-auto {
   margin: auto !important;
 }
 @mixin \!fmx-auto {
-  margin-inline: auto !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
 }
 @mixin \!fmy-auto {
-  margin-block: auto !important;
+  margin-top: auto !important;
+  margin-bottom: auto !important;
 }