From deb1a073ce46fa4bd0260e2446134df472e24cc2 Mon Sep 17 00:00:00 2001 From: Stephanie Smith Date: Wed, 11 Sep 2024 18:57:16 -0700 Subject: [PATCH 1/2] adding richtext media story, updating richtext media support to work with the updated markup --- .../src/scss/components/_BlockText.scss | 39 +++++++++++++++++-- .../components/BlockText/BlockText.stories.js | 24 ++++++++++++ 2 files changed, 59 insertions(+), 4 deletions(-) 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..1f8de7ed 100644 --- a/packages/vue/src/components/BlockText/BlockText.stories.js +++ b/packages/vue/src/components/BlockText/BlockText.stories.js @@ -3,6 +3,7 @@ import BlockText, { variants } from './BlockText.vue' export default { title: 'Components/Blocks/BlockText', component: BlockText, + tags: ['!autodocs'], argTypes: { variant: { control: { type: 'select' }, @@ -19,3 +20,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 paragraph text

  1. Lorem ipsum dolor sit amet consectatur adipscing
  2. Lorem ipsum dolor sit amet consectatur adipscing
  3. Lorem ipsum dolor sit amet consectatur adipscing
  4. Lorem ipsum dolor sit amet consectatur adipscing

Lorem ipsum dolor sit amet consectatur adipscing

` } } + +export const RichTextMedia = { + args: { + variant: 'large', + text: `

Description for it.

Perseverance Looks Back at 'Bright Angel' +
+
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)

Carbon Mapper Coalition's Tanager Satellite +
+
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 +
+
Lecture Brings Galileo's Travels into Final Focus
+
+

More text and something that's left-aligned

` + } +} From d582079f739881713b8fa57bd65c84671e16f4cb Mon Sep 17 00:00:00 2001 From: Stephanie Smith Date: Wed, 11 Sep 2024 19:00:53 -0700 Subject: [PATCH 2/2] updating story --- packages/vue/src/components/BlockText/BlockText.stories.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/vue/src/components/BlockText/BlockText.stories.js b/packages/vue/src/components/BlockText/BlockText.stories.js index 1f8de7ed..0457e08e 100644 --- a/packages/vue/src/components/BlockText/BlockText.stories.js +++ b/packages/vue/src/components/BlockText/BlockText.stories.js @@ -10,7 +10,12 @@ export default { options: Object.keys(variants) }, text: { control: { type: 'text' } } - } + }, + decorators: [ + () => ({ + template: '
' + }) + ] } export const BaseStory = {