Feature/217 richtext image support (#616)

* adding richtext media story, updating richtext media support to work with the updated markup * updating story
nasa-jpl · Sep 12, 2024 · 3e5a7d7 · 3e5a7d7
1 parent b3b6d8f
commit 3e5a7d7
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 5 deletions.
diff --git a/packages/common/src/scss/components/_BlockText.scss b/packages/common/src/scss/components/_BlockText.scss
@@ -103,18 +103,25 @@
       }
     }
   }
+  // richtext media support
   .richtext-image {
-    &.full-width {
+    &.fullwidth {
       @apply mb-10 lg:mb-14;
-      @apply w-full h-auto;
+      img {
+        @apply w-full h-auto;
+      }
     }
     &.left,
     &.right {
       @apply mb-5 lg:mb-5 mx-5 lg:mx-8;
-      @apply inline max-w-full sm:max-w-[50%] h-auto;
+      @apply inline max-w-full sm:max-w-[50%];
+      img {
+        @apply max-w-full  h-auto;
+      }
     }
     &.left {
       @apply sm:float-left ml-0;
+      // mimics offset in BlockInlineImage
       @apply ml-0 lg:-ml-[5.3rem] xl:-ml-[6.8rem];
       // uncomment if floating images become unwieldy
       // + p,
@@ -124,6 +131,7 @@
     }
     &.right {
       @apply sm:float-right mr-0;
+      // mimics offset in BlockInlineImage
       @apply mr-0 lg:-mr-[5.3rem] xl:-mr-[6.8rem];
       // uncomment if floating images become unwieldy
       // + p,
@@ -135,6 +143,29 @@
       @apply mb-0;
     }
   }
+  .richtext-caption {
+    // mimic BaseImageCaption
+    @apply pt-3 text-gray-mid-dark text-sm lg:text-base;
+    div.caption {
+      @apply inline #{!important};
+    }
+
+    a {
+      @apply text-action underline cursor-pointer;
+
+      &:hover {
+        @apply text-action-hover;
+      }
+    }
+
+    .ThemeVariantLight & {
+      @apply text-gray-mid-dark;
+    }
+
+    .ThemeVariantDark & {
+      @apply text-gray-mid;
+    }
+  }
   > div {
     @apply mb-10 lg:mb-14;
     iframe {
@@ -144,7 +175,7 @@
       @apply mb-0;
     }
   }
-
+  // other sizes
   &.-small {
     p {
       @apply mb-2;

diff --git a/packages/vue/src/components/BlockText/BlockText.stories.js b/packages/vue/src/components/BlockText/BlockText.stories.js
@@ -3,13 +3,19 @@ import BlockText, { variants } from './BlockText.vue'
 export default {
   title: 'Components/Blocks/BlockText',
   component: BlockText,
+  tags: ['!autodocs'],
   argTypes: {
     variant: {
       control: { type: 'select' },
       options: Object.keys(variants)
     },
     text: { control: { type: 'text' } }
-  }
+  },
+  decorators: [
+    () => ({
+      template: '<div class="lg:w-2/3 mx-auto"><story /></div>'
+    })
+  ]
 }
 
 export const BaseStory = {
@@ -19,3 +25,26 @@ export const BaseStory = {
     text: `<p>AVIRIS is the first full spectral range imaging spectrometer and dedicated to <a href="https://en.wikipedia.org/wiki/Remote_sensing" target="_blank">Earth Remote Measurement</a>. Test <a href="#">preventlongurlsfrombreakingoutofcontainerpreventlongurlsfrombreakingoutofcontainerpreventlongurlsfrombreakingoutofcontainerpreventlongurlsfrombreakingoutofcontainer</a>. It is a unique optical sensor that continues to deliver calibrated images of the upwelling spectral radiance in 224 contiguous spectral channels (bands) with wavelengths from 380 to 2510 nanometers. AVIRIS has been flown on four aircraft platforms: NASA's high altitude ER-2 jet, Twin Otter International's turboprop, Scaled Composites' Proteus, and NASA's WB-57. The ER-2 flies at approximately 20 km above sea level, at about 730 km/hr. The Twin Otter aircraft flies at 4km above ground level at 130km/hr. AVIRIS has flown North America including Alaska, Hawaii, Europe, Brazil, and Argentina.</p><p>The objective of the AVIRIS project is to support advanced NASA science and applications research.  AVIRIS uses imaging spectroscopy to detect, identify, measure, and monitor constituents and processes of the Earth's surface and atmosphere based on measured constituent absorption and scattering signatures. Science and applications research with AVIRIS data spans a wide range of discipline across the Earth system. </p><hr /><ul><li>Lorem ipsum dolor sit amet consectatur adipscing</li><li>Lorem ipsum dolor sit amet <strong>consectatur adipscing</strong></li><li>Lorem ipsum dolor sit amet consectatur adipscing</li></ul><p>Lorem ipsum dolor sit amet paragraph text</p><ol><li>Lorem ipsum dolor sit amet consectatur adipscing</li><li>Lorem ipsum dolor sit amet consectatur adipscing</li><li>Lorem ipsum dolor <strong>sit amet</strong> consectatur adipscing</li><li>Lorem <strong>ipsum dolor</strong> sit amet consectatur adipscing</li></ol><hr /><p>Lorem ipsum dolor sit amet consectatur adipscing</p>`
   }
 }
+
+export const RichTextMedia = {
+  args: {
+    variant: 'large',
+    text: `<p data-block-key="5f55p">Description for it.</p><div class="richtext-image fullwidth"><img alt="Perseverance Looks Back at &amp;#x27;Bright Angel&amp;#x27;" height="480" loading="lazy" src="https://picsum.photos/640/480" width="640">
+                <div class="richtext-caption">
+                    <div class="caption">One of the navigation cameras aboard NASAs Perseverance Mars rover captured this view looking back at the Bright Angel area on July 30, 2024.</div>
+                    <span class="credit">Credit: NASA/JPL-Caltech</span>
+                    <a class="caption-link" href="#">Full Image Details</a>
+                </div>
+            </div><p data-block-key="89jcq">More text and another image that&#x27;s full width (above)</p><p data-block-key="6jsp"></p><div class="richtext-image right"><img alt="Carbon Mapper Coalition&amp;#x27;s Tanager Satellite" height="336" loading="lazy" src="https://picsum.photos/640/336" width="640">
+                <div class="richtext-caption">
+                    <div class="caption">This artists concept depicts one of the Carbon Mapper Coalitions Tanager satellites, the first of which launched on Aug. 16, 2024. Tanager-1 will use imaging spectrometer technology developed at JPL to measure greenhouse gas point-source emissions.</div>
+                    <span class="credit">Credit: Planet Labs PBC</span>
+                    <a class="caption-link" href="#">Full Image Details</a>
+                </div>
+            </div><p data-block-key="4409g">More text and something that&#x27;s right-aligned.</p><p data-block-key="bid36"></p><div class="richtext-image left"><img alt="Lecture Brings Galileo&amp;#x27;s Travels into Final Focus" height="350" loading="lazy" src="https://picsum.photos/640/350" width="640">
+                <div class="richtext-caption">
+                    <div class="caption">Lecture Brings Galileo's Travels into Final Focus</div>
+                </div>
+            </div><p data-block-key="1f4rd">More text and something that&#x27;s left-aligned</p>`
+  }
+}