Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/217 richtext image support #616

Merged
merged 2 commits into from
Sep 12, 2024
Merged

Feature/217 richtext image support #616

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
deb1a07
adding richtext media story, updating richtext media support to work …
stephiescastle Sep 12, 2024
d582079
updating story
stephiescastle Sep 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 35 additions & 4 deletions packages/common/src/scss/components/_BlockText.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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 {
Expand All @@ -144,7 +175,7 @@
@apply mb-0;
}
}

// other sizes
&.-small {
p {
@apply mb-2;
Expand Down
31 changes: 30 additions & 1 deletion packages/vue/src/components/BlockText/BlockText.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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>`
}
}
Loading