wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #215 from reuters-graphics/mf-body-text

Browse source 
Updates BodyText
This commit is contained in:
MinamiFunakoshiTR 2025-03-10 11:30:55 -05:00 committed by GitHub
commit 8402b1fdbe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 831 additions and 518 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
package.json
View file

@ -39,18 +39,18 @@
"devDependencies": {
"@changesets/cli": "^2.27.11",
"@chromatic-com/storybook": "^3.2.4",
"@reuters-graphics/yaks-eslint": "^0.1.0",
"@reuters-graphics/yaks-prettier": "^0.1.0",
"@storybook/addon-essentials": "^8.5.0",
"@storybook/addon-interactions": "^8.5.0",
"@storybook/addon-svelte-csf": "5.0.0-next.23",
"@storybook/blocks": "^8.5.0",
"@storybook/components": "^8.5.0",
"@storybook/manager-api": "^8.5.0",
"@storybook/svelte": "^8.5.0",
"@storybook/sveltekit": "^8.5.0",
"@storybook/test": "^8.5.0",
"@storybook/theming": "^8.5.0",
"@reuters-graphics/yaks-eslint": "^0.1.1",
"@reuters-graphics/yaks-prettier": "^0.1.1",
"@storybook/addon-essentials": "^8.6.0",
"@storybook/addon-interactions": "^8.6.0",
"@storybook/addon-svelte-csf": "5.0.0-next.27",
"@storybook/blocks": "^8.6.0",
"@storybook/components": "^8.6.0",
"@storybook/manager-api": "^8.6.0",
"@storybook/svelte": "^8.6.0",
"@storybook/sveltekit": "^8.6.0",
"@storybook/test": "^8.6.0",
"@storybook/theming": "^8.6.0",
"@sveltejs/package": "^2.3.7",
"@sveltejs/vite-plugin-svelte": "^4.0.4",
"@types/css": "^0.0.37",
@ -93,13 +93,13 @@
"react-syntax-highlighter": "^15.6.1",
"remark-gfm": "^4.0.0",
"rimraf": "^5.0.10",
"sass": "^1.83.4",
"storybook": "^8.5.0",
"sass": "^1.85.0",
"storybook": "^8.6.0",
"svelte": "^5.18.0",
"svelte-loader": "^3.2.4",
"tiny-glob": "^0.2.9",
"typescript": "^5.7.3",
"vite": "^5.4.11"
"vite": "^6.2.0"
},
"dependencies": {
"@fortawesome/free-regular-svg-icons": "^5.15.4",

1004
pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff

110
src/components/BodyText/BodyText.mdx Normal file
View file

@ -0,0 +1,110 @@
import { Meta, Canvas } from '@storybook/blocks';
import * as BodyTextStories from './BodyText.stories.svelte';
<Meta of={BodyTextStories} />
# BodyText
The `BodyText` component creates the main text of your page. You can pass the `text` prop a [markdown-formatted](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) string, which will be parsed into paragraphs, headers, lists, links, blockquotes and other markdown-supported elements.
```svelte
<script>
import { BodyText } from '@reuters-graphics/graphics-components';
const markdownText = `Bacon ipsum **dolor amet** cow tongue tri-tip.
Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig.
- Steak
- [Pork chop](https://www.google.com)
- Fillet
Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.`;
</script>
<BodyText text={markdownText} />
```
<Canvas of={BodyTextStories.Demo} />
## Using with ArchieML docs
With the graphics kit, you'll likely get your text value from an ArchieML doc.
```yaml
# Archie ML doc
[blocks]
type: text
text: Bacon ipsum ...
... etc.
:end
[]
```
... which you'll parse out of a ArchieML block object before passing to the `BodyText` component.
```svelte
<!-- App.svelte -->
{#each content.blocks as block}
{#if block.type === 'text'}
<BodyText text={block.text} />
{/if}
{/each}
```
<Canvas of={BodyTextStories.Demo} />
## Styling text
Styles are built in for many text elements created by `BodyText`, including headings, ordered and unordered lists, links, blockquotes and even drop caps (using a `"drop-cap"` classed span).
```svelte
<BodyText
text="<span class='drop-cap'>R</span>eprehenderit hamburger pork bresaola ..."
/>
```
<Canvas of={BodyTextStories.TypographySample} />
### Custom styles
To add your own styling, you can write styles in a global SCSS stylesheet:
```svelte
<BodyText
text="Venison shoulder <span class='highlight'>ham hock</span> ham leberkas."
/>
```
```scss
// global.scss
span.highlight {
background: palegoldenrod;
padding: 2px 4px;
}
```
<Canvas of={BodyTextStories.CustomStyles} />
If you want to make sure styles for one portion of text don't apply other parts of the page, add a `class` to BodyText to use as an additional selector.
```svelte highlight=2
<BodyText
class="my-special-text-block"
text="Venison shoulder <span class='highlight'>ham hock</span> ham leberkas."
/>
```
```scss
// global.scss
.my-special-text-block {
span.highlight {
background: palegoldenrod;
padding: 2px 4px;
}
}
```

132
src/components/BodyText/BodyText.stories.svelte
View file

@ -1,30 +1,16 @@
<script module lang="ts">
import { defineMeta } from '@storybook/addon-svelte-csf';
import BodyText from './BodyText.svelte';
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
import { withComponentDocs } from '$docs/utils/withParams.js';
export const meta = {
const { Story } = defineMeta({
title: 'Components/Text elements/BodyText',
component: BodyText,
...withComponentDocs(componentDocs),
};
});
</script>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
</script>
<Template >
{#snippet children({ args })}
<BodyText {...args} />
{/snippet}
</Template>
<Story
name="Default"
args="{{
name="Demo"
args={{
text: `Bacon ipsum **dolor amet** cow tongue tri-tip.
Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig.
@ -34,12 +20,14 @@
- Fillet
Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.`,
}}"
}}
/>
<Story
name="Typography sample"
args="{{
exportName="TypographySample"
tags={['!autodocs', '!dev']}
args={{
class: 'body-text-typography-example-story',
text: `<span class='drop-cap'>R</span>eprehenderit hamburger pork bresaola, dolore chuck sirloin landjaeger ham hock [tempor meatball](https://baconipsum.com/) alcatra nostrud pork belly. Culpa pork belly doner ea jowl, elit deserunt leberkas cow shoulder ham hock dolore.
@ -93,94 +81,22 @@ Ham hock id porchetta elit. Sint spare ribs aute buffalo.
<p class='body-correction'>Correction: Lorem ispsum dolor sit amet ameno dorime.</p>
`,
}}"
}}
/>
<!-- svelte-ignore css_unused_selector -->
<style lang="scss" global>
@mixin heading-tag {
position: absolute;
top: 0;
left: -50px;
text-align: right;
display: block;
width: 40px;
color: #ddd;
padding: 2px 5px;
border-radius: 4px;
font-weight: 800;
line-height: 1;
&:hover {
color: #999;
}
@media (max-width: 800px) {
color: white !important;
}
}
.body-text-typography-example-story {
h2 {
position: relative;
&:before {
content: 'H2';
@include heading-tag;
& {
font-size: 22px;
}
}
h3 {
position: relative;
&:before {
content: 'H3';
@include heading-tag;
& {
font-size: 19px;
}
}
}
h4 {
position: relative;
&:before {
content: 'H4';
@include heading-tag;
& {
font-size: 16px;
}
}
}
h5 {
position: relative;
&:before {
content: 'H5';
@include heading-tag;
& {
font-size: 15px;
}
}
}
h6 {
position: relative;
&:before {
content: 'H6';
@include heading-tag;
& {
font-size: 12px;
}
}
}
blockquote {
position: relative;
&:before {
@include heading-tag;
& {
content: '“';
font-size: 3rem;
line-height: 3rem;
}
}
blockquote:before {
display: none;
}
}
}
<Story
name="Custom styles"
exportName="CustomStyles"
tags={['!autodocs', '!dev']}
args={{
class: 'body-text-custom-styles-story',
text: `Venison shoulder <span class="highlight">ham hock</span> ham leberkas.`,
}}
/>
<style lang="scss">
:global(.body-text-custom-styles-story span.highlight) {
background: palegoldenrod;
padding: 2px 4px;
}
</style>

27
src/components/BodyText/BodyText.svelte
View file

@ -1,24 +1,19 @@
<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
<!-- @component `BodyText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-bodytext--docs) -->
<script lang="ts">
import Markdown from '../Markdown/Markdown.svelte';
/**
* A markdown text string.
* @type {string}
* @required
*/
export let text: string;
/** Add a class to target with SCSS. */
let cls: string = '';
export { cls as class };
/** Add an id to the block tag to target it with custom CSS. */
export let id: string = '';
import Block from '../Block/Block.svelte';
interface Props {
/** A markdown text string. */
text: string;
/** Add a class to target with SCSS. */
class?: string;
/** Add an id to the block tag to target it with custom CSS. */
id?: string;
}
let { text, class: cls = '', id = '' }: Props = $props();
</script>
<Block {id} class="fmy-6 {cls}">
<Markdown source="{text}" />
<Markdown source={text} />
</Block>

46
src/components/BodyText/stories/docs/component.md
View file

@ -1,46 +0,0 @@
The `BodyText` creates the main text of your page. You can pass the `text` prop a [markdown-formatted](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) string, which will be parsed into paragraphs, headers, lists, blockquotes or whatever else you need.
Use it like this:
```svelte
<script>
import { BodyText } from '@reuters-graphics/graphics-components';
const markdownText = `Bacon ipsum **dolor amet** cow tongue tri-tip.
Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig.
Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.`;
</script>
<BodyText text="{markdownText}" />
```
... or more commonly, you'll use it with a ArchieML doc in the Graphics Kit like this:
```yaml
[blocks]
type: text
text: Lorem ipsum ...
... etc.
:end
[]
```
```svelte
<script>
import { BodyText } from '@reuters-graphics/graphics-components';
import content from '$locales/en/content.json';
</script>
{#each content.blocks as block}
{#if block.type === 'text'}
<BodyText text="{block.text}" />
<!-- ... -->
{/if}
{/each}
```