wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update endnnotes component

Browse source
This commit is contained in:
Prasanta Kumar Dutta 2023-09-08 17:18:44 +05:30
parent 07c9720cc3
commit 753458250a
6 changed files with 116 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/components/EndNotes/EndNotes.stories.svelte Normal file
View file

@ -0,0 +1,42 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
// @ts-ignore
import componentDocs from './stories/docs/component.md?raw';
import EndNotes from './EndNotes.svelte';
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
const notes = [
{
title: 'Note',
text: 'Data is current as of today.',
},
{
title: 'Sources',
text: 'Data, Inc.',
},
{
title: 'Edited by',
text: '<a href="https://www.reuters.com/graphics/">Editor</a>, Copyeditor',
},
];
</script>
<Meta
title="Components/EndNotes"
component="{EndNotes}"
{...withComponentDocs(componentDocs)}
/>
<Template let:args>
<EndNotes {...args} />
</Template>
<Story
name="Default"
args="{{
notes,
}}"
/>

58
src/components/EndNotes/EndNotes.svelte Normal file
View file

@ -0,0 +1,58 @@
<!-- @component `EndNotes` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-EndNotes--default) -->
<script lang="ts">
interface EndNote {
/**
* Title of the note item
* @required
*/
title: String;
/**
* Contents of the note as a markdown string
* @required
*/
text: String;
}
/**
* An array of endnote items.
* @required
*/
export let notes: EndNote[] = [];
import { marked } from 'marked';
import Block from '../Block/Block.svelte';
</script>
<Block class="notes fmt-6 fmb-8">
{#if notes}
{#each notes as note}
<div class="note-title">{@html marked.parse(note.title)}</div>
<div class="note-content">{@html marked.parse(note.text)}</div>
{/each}
{/if}
</Block>
<!-- svelte-ignore css-unused-selector -->
<style lang="scss">
@import '../../scss/mixins';
.note-title {
:global(p) {
@include body-caption;
@include text-primary;
@include font-medium;
@include tracking-normal;
@include fmt-3;
margin-bottom: 0.125rem;
text-transform: none;
}
}
.note-content {
:global(p) {
@include body-caption;
@include fmt-0;
@include fmb-2;
}
}
</style>

23
src/components/NoteText/stories/docs/component.md → src/components/EndNotes/stories/docs/component.md
View file

@ -6,14 +6,21 @@ Note text can be fed a markdown string, but text styling is intentionally restri
<script>
import { NoteText } from '@reuters-graphics/graphics-components';
const markdownText = `### Source
Reuters research.
### Credits
People.`;
const notes = [
{
title: 'Note',
text: 'Data is current as of today.',
},
{
title: 'Sources',
text: 'Data, Inc.',
},
{
title: 'Edited by',
text: '<a href="https://www.reuters.com/graphics/">Editor</a>, Copyeditor',
},
];
</script>
<NoteText text="{markdownText}" />
<NoteText notes="{notes}" />
```

33
src/components/NoteText/NoteText.stories.svelte
View file

@ -1,33 +0,0 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
// @ts-ignore
import componentDocs from './stories/docs/component.md?raw';
import NoteText from './NoteText.svelte';
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
</script>
<Meta
title="Components/NoteText"
component="{NoteText}"
{...withComponentDocs(componentDocs)}
/>
<Template let:args>
<NoteText {...args} />
</Template>
<Story
name="Default"
args="{{
text: `## Source
[European Forest Fire Information System](https://effis.jrc.ec.europa.eu/); Reuters research
#### Credits
Jane Doe & John Doe`,
}}"
/>

45
src/components/NoteText/NoteText.svelte
View file

@ -1,45 +0,0 @@
<!-- @component `NoteText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-NoteText--default) -->
<script lang="ts">
/**
* A markdown text string.
* @type {string}
* @required
*/
export let text: string;
import { marked } from 'marked';
import Block from '../Block/Block.svelte';
</script>
<Block class="notes fmt-6 fmb-8">
{#if text}
{@html marked.parse(text)}
{/if}
</Block>
<!-- svelte-ignore css-unused-selector -->
<style lang="scss" global>
@import '../../scss/mixins';
.article-block.notes {
h2,
h3,
h4,
h5,
h6 {
@include body-caption;
@include text-primary;
@include font-medium;
@include tracking-normal;
@include fmt-3;
margin-bottom: 0.125rem;
text-transform: none;
}
p {
@include body-caption;
@include fmt-0;
@include fmb-2;
}
}
</style>

2
src/index.js
View file

@ -20,7 +20,7 @@ export { default as Framer } from './components/Framer/Framer.svelte';
export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.svelte';
export { default as Headline } from './components/Headline/Headline.svelte';
export { default as HeroHeadline } from './components/HeroHeadline/Hero.svelte';
export { default as NoteText } from './components/NoteText/NoteText.svelte';
export { default as EndNotes } from './components/EndNotes/EndNotes.svelte';
export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
export { default as PhotoCarousel } from './components/PhotoCarousel/PhotoCarousel.svelte';
export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';