migrated, updated BodyText
This commit is contained in:
MinamiFunakoshiTR
parent
c545d2bc2f
commit
7ff79c97b9
4 changed files with 85 additions and 173 deletions
66
src/components/BodyText/BodyText.mdx
Normal file
66
src/components/BodyText/BodyText.mdx
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
import { Meta, Canvas } from '@storybook/blocks';
|
||||
|
||||
import * as BodyTextStories from './BodyText.stories.svelte';
|
||||
|
||||
<Meta of={BodyTextStories} />
|
||||
|
||||
# BodyText
|
||||
|
||||
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
|
||||
# Archie ML doc
|
||||
[blocks]
|
||||
|
||||
type: text
|
||||
text: Lorem ipsum ...
|
||||
|
||||
... etc.
|
||||
:end
|
||||
|
||||
[]
|
||||
```
|
||||
|
||||
```svelte
|
||||
<!-- Graphics Kit -->
|
||||
<script>
|
||||
import { BodyText } from '@reuters-graphics/graphics-components';
|
||||
|
||||
import content from '$locales/en/content.json';
|
||||
</script>
|
||||
|
||||
# Graphics Kit
|
||||
{#each content.blocks as block}
|
||||
{#if block.type === 'text'}
|
||||
<BodyText text={block.text} />
|
||||
<!-- ... -->
|
||||
{/if}
|
||||
{/each}
|
||||
```
|
||||
|
||||
### Typography and styling
|
||||
|
||||
{/* Add link to components-text-elements-bodytext--typography-sample */}
|
||||
You can also style the typography by adding CSS and markdown annotations such as `##`, like in this [example](/story/components-text-elements-bodytext--typography-sample).
|
||||
|
|
@ -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,12 @@
|
|||
- Fillet
|
||||
|
||||
Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.`,
|
||||
}}"
|
||||
}}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="Typography sample"
|
||||
args="{{
|
||||
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 +79,5 @@ 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
```
|
||||
Loading…
Reference in a new issue