70 lines
1.8 KiB
Svelte
70 lines
1.8 KiB
Svelte
<!-- @component `Article` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-layout-article--docs) -->
|
|
<script lang="ts">
|
|
interface ColumnWidths {
|
|
/** Narrower column width */
|
|
narrower: number;
|
|
/** Narrow column width */
|
|
narrow: number;
|
|
/** Normal column width */
|
|
normal: number;
|
|
/** Wide column width */
|
|
wide: number;
|
|
/** Wider column width */
|
|
wider: number;
|
|
}
|
|
|
|
import cssVariables from '../../actions/cssVariables/index.js';
|
|
interface Props {
|
|
/** Set to true for embeddables. */
|
|
embedded?: boolean;
|
|
/** Add an id to the article tag to target it with custom CSS. */
|
|
id?: string;
|
|
/** ARIA role of the article */
|
|
role?: string | null;
|
|
/** Set custom widths for the normal, wide and wider column dimensions */
|
|
columnWidths?: ColumnWidths;
|
|
children?: import('svelte').Snippet;
|
|
}
|
|
|
|
let {
|
|
embedded = false,
|
|
id = '',
|
|
role = null,
|
|
columnWidths = {
|
|
narrower: 330,
|
|
narrow: 510,
|
|
normal: 660,
|
|
wide: 930,
|
|
wider: 1200,
|
|
},
|
|
children,
|
|
}: Props = $props();
|
|
|
|
let columnWidthVars = $derived({
|
|
'narrower-column-width': columnWidths.narrower + 'px',
|
|
'narrow-column-width': columnWidths.narrow + 'px',
|
|
'normal-column-width': columnWidths.normal + 'px',
|
|
'wide-column-width': columnWidths.wide + 'px',
|
|
'wider-column-width': columnWidths.wider + 'px',
|
|
});
|
|
</script>
|
|
|
|
<main id="main-content">
|
|
<article {id} class:embedded {role} use:cssVariables={columnWidthVars}>
|
|
<!-- Article content -->
|
|
{@render children?.()}
|
|
</article>
|
|
</main>
|
|
|
|
<style lang="scss">
|
|
article {
|
|
width: 100%;
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0 15px;
|
|
background-color: var(--theme-colour-background, transparent);
|
|
&.embedded {
|
|
overflow: auto;
|
|
}
|
|
}
|
|
</style>
|