diff --git a/packages/common/src/scss/components/_BlockText.scss b/packages/common/src/scss/components/_BlockText.scss
index 68a4e6be..0dc9c48b 100644
--- 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
index 1c0ac247..0457e08e 100644
--- 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: '
'
+ })
+ ]
}
export const BaseStory = {
@@ -19,3 +25,26 @@ export const BaseStory = {
text: `AVIRIS is the first full spectral range imaging spectrometer and dedicated to Earth Remote Measurement. Test preventlongurlsfrombreakingoutofcontainerpreventlongurlsfrombreakingoutofcontainerpreventlongurlsfrombreakingoutofcontainerpreventlongurlsfrombreakingoutofcontainer. 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.
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.
- Lorem ipsum dolor sit amet consectatur adipscing
- Lorem ipsum dolor sit amet consectatur adipscing
- Lorem ipsum dolor sit amet consectatur adipscing
Lorem ipsum dolor sit amet paragraph text
- Lorem ipsum dolor sit amet consectatur adipscing
- Lorem ipsum dolor sit amet consectatur adipscing
- Lorem ipsum dolor sit amet consectatur adipscing
- Lorem ipsum dolor sit amet consectatur adipscing
Lorem ipsum dolor sit amet consectatur adipscing
`
}
}
+
+export const RichTextMedia = {
+ args: {
+ variant: 'large',
+ text: `Description for it.
+
+
One of the navigation cameras aboard NASAs Perseverance Mars rover captured this view looking back at the Bright Angel area on July 30, 2024.
+
Credit: NASA/JPL-Caltech
+
Full Image Details
+
+
More text and another image that's full width (above)
+
+
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.
+
Credit: Planet Labs PBC
+
Full Image Details
+
+
More text and something that's right-aligned.
+
+
Lecture Brings Galileo's Travels into Final Focus
+
+
More text and something that's left-aligned
`
+ }
+}