127 lines
No EOL
3.2 KiB
Svelte
127 lines
No EOL
3.2 KiB
Svelte
<script>
|
|
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
|
|
|
|
// Don't lose the "?raw" in markdown imports!
|
|
// @ts-ignore
|
|
import componentDocs from './stories/docs/component.md?raw';
|
|
// @ts-ignore
|
|
import customWellWidthsDocs from './stories/docs/customWellWidths.md?raw';
|
|
|
|
import Article from './Article.svelte';
|
|
import Block from '../Block/Block.svelte';
|
|
|
|
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
|
|
|
|
const meta = {
|
|
title: 'Layout/Article',
|
|
component: Article,
|
|
...withComponentDocs(componentDocs),
|
|
};
|
|
</script>
|
|
|
|
<Meta {...meta} />
|
|
|
|
<Template let:args>
|
|
<Article {...args} />
|
|
</Template>
|
|
|
|
<Story
|
|
name="Basic"
|
|
args="{{
|
|
embedded: false,
|
|
id: '',
|
|
}}"
|
|
>
|
|
<Article id="article-story-basic">
|
|
<div class="demo-container">
|
|
<div class="background-label">Article container</div>
|
|
<div class="padding-label"><span>⇤</span>15px padding</div>
|
|
</div>
|
|
</Article>
|
|
</Story>
|
|
|
|
<Story
|
|
name="Custom columns"
|
|
{...withStoryDocs(customWellWidthsDocs)}
|
|
>
|
|
<Article id="article-column-widths-demo">
|
|
<div class="article-boundaries">
|
|
<Block id="section-demo" width="narrower">narrower</Block>
|
|
<Block id="section-demo" width="narrow">narrow</Block>
|
|
<Block id="section-demo">normal</Block>
|
|
<Block id="section-demo" width="wide">wide</Block>
|
|
<Block id="section-demo" width="wider">wider</Block>
|
|
<Block id="section-demo" width="widest">widest</Block>
|
|
<Block id="section-demo" width="fluid">fluid</Block>
|
|
</div>
|
|
</Article>
|
|
<Article id="article-column-widths-demo" columnWidths={{ narrower: 310, narrow: 450, normal: 550, wide: 675, wider: 1400 }}>
|
|
<div class="article-boundaries custom">
|
|
<Block id="section-demo" width="narrower">narrower*</Block>
|
|
<Block id="section-demo" width="narrow">narrow*</Block>
|
|
<Block id="section-demo">normal*</Block>
|
|
<Block id="section-demo" width="wide">wide*</Block>
|
|
<Block id="section-demo" width="wider">wider*</Block>
|
|
<Block id="section-demo" width="widest">widest</Block>
|
|
<Block id="section-demo" width="fluid">fluid</Block>
|
|
</div>
|
|
</Article>
|
|
</Story>
|
|
|
|
<style lang="scss">
|
|
:global {
|
|
#article-story-basic,
|
|
#article-column-widths-demo {
|
|
width: calc(100% + 30px);
|
|
margin-left: -15px;
|
|
}
|
|
#article-column-widths-demo {
|
|
background-color: #ddd;
|
|
position: relative;
|
|
margin-bottom: 10px;
|
|
|
|
.article-boundaries {
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #bbb;
|
|
&.custom {
|
|
div.article-block {
|
|
background: rgb(211, 132, 123);
|
|
}
|
|
}
|
|
}
|
|
|
|
div.article-block {
|
|
height: 300px;
|
|
background: #81a1c1;
|
|
margin-bottom: 2px;
|
|
height: 50px;
|
|
padding-left: 3px;
|
|
color: white;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.demo-container {
|
|
height: 300px;
|
|
background: #ccc;
|
|
position: relative;
|
|
font-size: 12px;
|
|
.background-label {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 5px;
|
|
color: white;
|
|
}
|
|
.padding-label {
|
|
position: absolute;
|
|
top: 0;
|
|
left: -17px;
|
|
span {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
}
|
|
</style> |