40 lines
2.8 KiB
JavaScript
40 lines
2.8 KiB
JavaScript
import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as o}from"./index-CO-0pc0F.js";import{M as d,C as s}from"./index-Z-6k0Xrj.js";import{P as r,D as a}from"./PaddingReset.stories-C_8B9mUz.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"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.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"./PaddingReset-_TGvg1_B.js";import"./Block-D3Ui8rd-.js";function i(t){const n={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...o(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(d,{of:r}),`
|
|
`,e.jsx(n.h1,{id:"paddingreset",children:"PaddingReset"}),`
|
|
`,e.jsxs(n.p,{children:["Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on adjacent text such as notes or captions. The ",e.jsx(n.code,{children:"PaddingReset"})," component resets our normal well padding inside a ",e.jsx(n.code,{children:"fluid"})," container."]}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
|
|
import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
|
|
<\/script>
|
|
|
|
<Block width="fluid">
|
|
<!-- Edge-to-edge image -->
|
|
<img src="https:..." alt="Alt text" class="fmb-1" />
|
|
|
|
<!-- Wrap text in \`PaddingReset\`to add padding back in -->
|
|
<PaddingReset>
|
|
<div class="body-note">
|
|
A caption for the image that is padded when Block is fluid.
|
|
</div>
|
|
</PaddingReset>
|
|
</Block>
|
|
`})}),`
|
|
`,e.jsx(s,{of:a}),`
|
|
`,e.jsx(n.h2,{id:"conditional-padding",children:"Conditional padding"}),`
|
|
`,e.jsxs(n.p,{children:["You can add the padding conditionally by setting the ",e.jsx(n.code,{children:"containerIsFluid"})," prop to ",e.jsx(n.code,{children:"true"})," when the ",e.jsx(n.code,{children:"Block"})," width is ",e.jsx(n.code,{children:"fluid"}),", which is what many other components in this library do."]}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
|
|
import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
|
|
|
|
let { src = 'https://...', width = 'fluid' } = $props();
|
|
<\/script>
|
|
|
|
<Block {width}>
|
|
<!-- Edge-to-edge image -->
|
|
<img src="https:..." alt="Alt text" class="fmb-1" />
|
|
|
|
<!-- Set conditional padding with the \`containerIsFluid\` prop -->
|
|
<PaddingReset containerIsFluid={width === 'fluid'}>
|
|
<div class="body-note">
|
|
A caption for the image that is padded when Block is fluid.
|
|
</div>
|
|
</PaddingReset>
|
|
</Block>
|
|
`})})]})}function M(t={}){const{wrapper:n}={...o(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(i,{...t})}):i(t)}export{M as default};
|