56 lines
1.3 KiB
Svelte
56 lines
1.3 KiB
Svelte
<!--
|
|
@component The `YourComponent` component
|
|
|
|
[Docs](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-YourComponent--default)
|
|
-->
|
|
<script lang="ts">
|
|
/** ✏️ DOCUMENT your chart's props using TypeScript and JSDoc comments like below! */
|
|
|
|
/**
|
|
* A source for the image.
|
|
* @required
|
|
*/
|
|
export let src: string;
|
|
|
|
/**
|
|
* AltText for the image.
|
|
* @required
|
|
*/
|
|
export let altText: string;
|
|
|
|
/** Height of the image. */
|
|
export let height: number = 500;
|
|
|
|
// You can declare custom types to help users implement your component.
|
|
type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
|
|
|
|
/** Width of the component within the text well. */
|
|
export let width: ContainerWidth = 'normal';
|
|
|
|
import Block from '../Block/Block.svelte';
|
|
</script>
|
|
|
|
<Block {width} cls="photo">
|
|
<div
|
|
style:background-image={`url(${src})`}
|
|
style:height={`${height}px`}
|
|
/>
|
|
<p class="visually-hidden">{altText}</p>
|
|
</Block>
|
|
|
|
<style lang="scss">
|
|
div {
|
|
width: 100%;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.visually-hidden {
|
|
clip: rect(0 0 0 0);
|
|
clip-path: inset(50%);
|
|
height: 1px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
width: 1px;
|
|
}
|
|
</style>
|