jon edits
This commit is contained in:
hobbes7878
parent
f2d1105417
commit
b017b0669f
4 changed files with 773 additions and 368 deletions
30
package.json
30
package.json
|
|
@ -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
1004
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
|
|
@ -1,4 +1,4 @@
|
|||
import { Meta } from '@storybook/blocks';
|
||||
import { Meta, Canvas } from '@storybook/blocks';
|
||||
|
||||
import * as BodyTextStories from './BodyText.stories.svelte';
|
||||
|
||||
|
|
@ -6,9 +6,7 @@ import * as BodyTextStories from './BodyText.stories.svelte';
|
|||
|
||||
# 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:
|
||||
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>
|
||||
|
|
@ -16,22 +14,30 @@ Use it like this:
|
|||
|
||||
const markdownText = `Bacon ipsum **dolor amet** cow tongue tri-tip.
|
||||
|
||||
Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig.
|
||||
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.`;
|
||||
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:
|
||||
<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: Lorem ipsum ...
|
||||
text: Bacon ipsum ...
|
||||
|
||||
... etc.
|
||||
:end
|
||||
|
|
@ -39,24 +45,66 @@ text: Lorem ipsum ...
|
|||
[]
|
||||
```
|
||||
|
||||
... which you'll parse out of a ArchieML block object before passing to the `BodyText` component.
|
||||
|
||||
```svelte
|
||||
<!-- Graphics Kit -->
|
||||
<script>
|
||||
import { BodyText } from '@reuters-graphics/graphics-components';
|
||||
|
||||
import content from '$locales/en/content.json';
|
||||
</script>
|
||||
|
||||
# Graphics Kit
|
||||
<!-- App.svelte -->
|
||||
{#each content.blocks as block}
|
||||
{#if block.type === 'text'}
|
||||
<BodyText text={block.text} />
|
||||
<!-- ... -->
|
||||
{/if}
|
||||
{/each}
|
||||
```
|
||||
|
||||
### Typography and styling
|
||||
<Canvas of={BodyTextStories.Demo} />
|
||||
|
||||
{/* 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).
|
||||
## 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;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@
|
|||
|
||||
<Story
|
||||
name="Typography sample"
|
||||
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.
|
||||
|
|
@ -81,3 +83,20 @@ Ham hock id porchetta elit. Sint spare ribs aute buffalo.
|
|||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue