134 lines
3.4 KiB
Svelte
134 lines
3.4 KiB
Svelte
<script module lang="ts">
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import GraphicBlock from './GraphicBlock.svelte';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Components/Graphics/GraphicBlock',
|
|
component: GraphicBlock,
|
|
argTypes: {
|
|
width: {
|
|
control: 'select',
|
|
options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
|
|
},
|
|
textWidth: {
|
|
control: 'select',
|
|
options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
import AiMap from './demo/ai2svelte/ai-chart.svelte';
|
|
import PlaceholderImg from './demo/placeholder.png';
|
|
</script>
|
|
|
|
<Story name="Demo">
|
|
<GraphicBlock
|
|
title="Title for my chart"
|
|
description="Some description for your chart."
|
|
notes={`Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)`}
|
|
>
|
|
<div id="my-chart">
|
|
<img src={PlaceholderImg} alt="placeholder" />
|
|
</div>
|
|
</GraphicBlock>
|
|
</Story>
|
|
|
|
<Story name="Ai2svelte and ArchieML" exportName="Ai2SvelteAndArchieML">
|
|
<GraphicBlock
|
|
title="Earthquake in Haiti"
|
|
description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
|
|
notes="Note: A shakemap represents the ground shaking produced by an earthquake."
|
|
>
|
|
<AiMap />
|
|
</GraphicBlock>
|
|
</Story>
|
|
|
|
<Story name="Custom text" exportName="CustomText">
|
|
<GraphicBlock>
|
|
<div class="demo-graphic">
|
|
<img src={PlaceholderImg} alt="placeholder" />
|
|
</div>
|
|
|
|
{#snippet title()}
|
|
<h5>My smaller title</h5>
|
|
{/snippet}
|
|
|
|
{#snippet notes()}
|
|
<aside>
|
|
<p><strong>Note:</strong> Data current as of Aug. 2, 2022.</p>
|
|
</aside>
|
|
{/snippet}
|
|
</GraphicBlock>
|
|
</Story>
|
|
|
|
<Story name="AREA description" exportName="AriaDescription">
|
|
<GraphicBlock
|
|
title="Earthquake in Haiti"
|
|
description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
|
|
notes="Note: A shakemap represents the ground shaking produced by an earthquake."
|
|
ariaDescription="A map showing the shake intensity produced by the earthquake."
|
|
>
|
|
<AiMap />
|
|
</GraphicBlock>
|
|
</Story>
|
|
|
|
<Story name="Custom AREA description" exportName="CustomAriaDescription">
|
|
<GraphicBlock
|
|
title="Earthquake in Haiti"
|
|
description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
|
|
notes="Note: A shakemap represents the ground shaking produced by an earthquake."
|
|
>
|
|
<AiMap />
|
|
{#snippet ariaDescription()}
|
|
<p>
|
|
A shakemap shows the intensity of the 7.2-magnitude earthquake that
|
|
struck Haiti at 8:29 a.m. EST, Aug. 14, 2021.
|
|
</p>
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<th>City</th>
|
|
<th>Felt shake strength</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Les Cayes</td>
|
|
<td>Very strong</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Jeremie</td>
|
|
<td>Strong</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
{/snippet}
|
|
</GraphicBlock>
|
|
</Story>
|
|
|
|
<style lang="scss">
|
|
div.demo-graphic {
|
|
height: 400px;
|
|
background-color: #ddd;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
img {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
// Style the table nicely
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
th,
|
|
td {
|
|
border: 1px solid #ddd;
|
|
padding: 8px;
|
|
}
|
|
th {
|
|
background-color: #f2f2f2;
|
|
}
|
|
}
|
|
</style>
|