81 lines
4.5 KiB
JavaScript
81 lines
4.5 KiB
JavaScript
import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as a}from"./index-CO-0pc0F.js";import{M as c,C as t}from"./index-Z-6k0Xrj.js";import{B as i,D as o,T as l,C as d}from"./BodyText.stories-Dj7yaN6K.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./BodyText-CXnxLnBi.js";import"./Markdown-DUxFwijc.js";import"./each-CVpBMMjG.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./Block-D3Ui8rd-.js";function r(s){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...a(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(c,{of:i}),`
|
|
`,e.jsx(n.h1,{id:"bodytext",children:"BodyText"}),`
|
|
`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"BodyText"})," component creates the main text of your page. You can pass the ",e.jsx(n.code,{children:"text"})," prop a ",e.jsx(n.a,{href:"https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet",rel:"nofollow",children:"markdown-formatted"})," string, which will be parsed into paragraphs, headers, lists, links, blockquotes and other markdown-supported elements."]}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<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} />
|
|
`})}),`
|
|
`,e.jsx(t,{of:o}),`
|
|
`,e.jsx(n.h2,{id:"using-with-archieml-docs",children:"Using with ArchieML docs"}),`
|
|
`,e.jsx(n.p,{children:"With the graphics kit, you'll likely get your text value from an ArchieML doc..."}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-yaml",children:`# ArchieML doc
|
|
[blocks]
|
|
|
|
type: text
|
|
text: Bacon ipsum ...
|
|
|
|
... etc.
|
|
:end
|
|
|
|
[]
|
|
`})}),`
|
|
`,e.jsxs(n.p,{children:["... which you'll parse out of a ArchieML block object before passing to the ",e.jsx(n.code,{children:"BodyText"})," component."]}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- App.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}
|
|
`})}),`
|
|
`,e.jsx(t,{of:o}),`
|
|
`,e.jsx(n.h2,{id:"styling-text",children:"Styling text"}),`
|
|
`,e.jsxs(n.p,{children:["Styles are built in for many text elements created by ",e.jsx(n.code,{children:"BodyText"}),", including headings, ordered and unordered lists, links, blockquotes and even drop caps (using a ",e.jsx(n.code,{children:'"drop-cap"'})," classed span)."]}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<BodyText
|
|
text="<span class='drop-cap'>R</span>eprehenderit hamburger pork bresaola ..."
|
|
/>
|
|
`})}),`
|
|
`,e.jsx(t,{of:l}),`
|
|
`,e.jsx(n.h3,{id:"custom-styles",children:"Custom styles"}),`
|
|
`,e.jsx(n.p,{children:"To add your own styling, you can write styles in a global SCSS stylesheet:"}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<BodyText
|
|
text="Venison shoulder <span class='highlight'>ham hock</span> ham leberkas."
|
|
/>
|
|
`})}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-scss",children:`// global.scss
|
|
span.highlight {
|
|
background: palegoldenrod;
|
|
padding: 2px 4px;
|
|
}
|
|
`})}),`
|
|
`,e.jsx(t,{of:d}),`
|
|
`,e.jsxs(n.p,{children:["If you want to make sure styles for one portion of text don't apply other parts of the page, add a ",e.jsx(n.code,{children:"class"})," to BodyText to use as an additional selector."]}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<BodyText
|
|
class="my-special-text-block"
|
|
text="Venison shoulder <span class='highlight'>ham hock</span> ham leberkas."
|
|
/>
|
|
`})}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-scss",children:`// global.scss
|
|
.my-special-text-block {
|
|
span.highlight {
|
|
background: palegoldenrod;
|
|
padding: 2px 4px;
|
|
}
|
|
}
|
|
`})})]})}function L(s={}){const{wrapper:n}={...a(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(r,{...s})}):r(s)}export{L as default};
|