import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as r}from"./index-CO-0pc0F.js";import{M as i}from"./index-Z-6k0Xrj.js";import{p as a}from"./docsPage-CT2vyZOj.js";import{H as o}from"./Highlight-rHebhLku.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";function s(t){const n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...r(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Guides/Bare minimum Svelte",parameters:{...a}}),`
`,e.jsx(n.h1,{id:"introduction-to-svelte-components",children:"Introduction to Svelte components"}),`
`,e.jsx(n.p,{children:"Svelte is a modern JavaScript framework for building parts of HTML pages. Components are the building blocks of Svelte pages, allowing you to create reusable and interactive parts of your page."}),`
`,e.jsxs(n.p,{children:["Here's ",e.jsx(n.strong,{children:"the bare minimum"})," you need to know to start using graphics components:"]}),`
`,e.jsx(n.h2,{id:"whats-a-component",children:"What's a component?"}),`
`,e.jsxs(n.p,{children:["A Svelte ",e.jsx(o,{children:"component"})," is just a ",e.jsx(n.code,{children:".svelte"})," file."]}),`
`,e.jsx(n.p,{children:"A component is usually composed of several parts: JavaScript for managing data, HTML to represent the elements it creates on the page and CSS to style those elements."}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- JavaScript -->
<script>
  let {
    imgSrc = 'https://reuters.com/image.jpg',
    altText = 'A cat',
    caption = 'Mousing all day is hard work ...',
  } = $props();
<\/script>

<!-- HTML -->
<figure>
  <img src={imgSrc} alt={altText} />
  <figcaption>{caption}</figcaption>
</figure>

<!-- CSS -->
<style>
  figure {
    max-width: 600px;
    margin: 0 auto;
    img {
      width: 100%;
    }
  }
</style>
`})}),`
`,e.jsx(n.h2,{id:"importing-and-using-components",children:"Importing and using components"}),`
`,e.jsxs(n.p,{children:["To use a component, you first need to import it. For example, below is a component called ",e.jsx(n.code,{children:"Button.svelte"}),":"]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- Button.svelte -->
<script>
  let { text = 'Click me' } = $props();
<\/script>

<button>{text}</button>
`})}),`
`,e.jsx(n.p,{children:"You can import and use this component in another file:"}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- App.svelte -->
<script>
  import Button from './Button.svelte';
<\/script>

<main>
  <h1>Welcome to Svelte</h1>
  <Button text="Press here" />
</main>
`})}),`
`,e.jsxs(n.p,{children:["Here, the ",e.jsx(n.code,{children:"Button"})," component is imported and used in the ",e.jsx(n.code,{children:"App"})," component."]}),`
`,e.jsx(n.p,{children:"The components in this project are pre-made so you can install, import and use them directly in your page without needing to write them yourself or have a copy of each component in your project."}),`
`,e.jsx(n.p,{children:"For example, a basic page might look like this:"}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
  // Importing our pre-made components from this project
  import {
    BodyText,
    SiteHeader,
    SiteFooter,
    Headline,
  } from '@reuters-graphics/graphics-components';
<\/script>

<SiteHeader />

<Headline hed="My new story" dek="The beginning of a beautiful page" />
<BodyText text="Lorem ipsum ..." />

<SiteFooter />
`})}),`
`,e.jsx(n.h2,{id:"passing-data-to-components-with-props",children:"Passing data to components with props"}),`
`,e.jsx(n.p,{children:`All graphics components are written to work across different stories. That means they expect to be given the content they'll add (or "render") on the page by you.`}),`
`,e.jsxs(n.p,{children:["We pass the data components use to render their part of a page using ",e.jsx(o,{children:"props"}),"."]}),`
`,e.jsxs(n.p,{children:["In the ",e.jsx(n.code,{children:"Button.svelte"})," example above, the ",e.jsx(n.code,{children:"text"})," prop provides a way to pass the text that will be rendered in the button like this:"]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<Button text="Click me!" />
`})}),`
`,e.jsx("button",{children:"Click me!"}),`
`,e.jsx(n.h2,{id:"reading-component-props",children:"Reading component props"}),`
`,e.jsx(n.p,{children:"All graphics components are documented with a code snippet showing how to import them and what props that component has with the kind of data each expects."}),`
`,e.jsx(n.p,{children:"For example, the default FeaturePhoto example looks like:"}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
  import { FeaturePhoto } from '@reuters-graphics/graphics-components';
<\/script>

<FeaturePhoto
  src="https://reuters.com/images/myImage.jpg"
  altText="Some alt text"
  caption="A caption"
  width="normal"
/>
`})}),`
`,e.jsxs(n.p,{children:["The component's props are ",e.jsx(n.code,{children:"src"}),", ",e.jsx(n.code,{children:"altTtext"}),", ",e.jsx(n.code,{children:"caption"})," and ",e.jsx(n.code,{children:"width"})," and each shows an example of the type of data that should go into that prop. For example, the ",e.jsx(n.code,{children:"src"})," prop expects a full URL to the image it will render."]}),`
`,e.jsx(n.h2,{id:"next-steps",children:"Next steps"}),`
`,e.jsxs(n.p,{children:["To learn more about Svelte, check out the ",e.jsx(n.a,{href:"https://svelte.dev/tutorial/svelte/welcome-to-svelte",rel:"nofollow",children:"official interactive tutorial"}),"."]}),`
`,e.jsx(n.p,{children:'All are also welcome to join the "⚙️ Graphics Dev Group" channel in Teams, where we occasionally chat about code tips or tricks.'})]})}function j(t={}){const{wrapper:n}={...r(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(s,{...t})}):s(t)}export{j as default};