119 lines
3.1 KiB
Svelte
119 lines
3.1 KiB
Svelte
<script module lang="ts">
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import Block from '../Block/Block.svelte';
|
|
import Article from './Article.svelte';
|
|
// @ts-ignore raw
|
|
import customWellWidthsDocs from './stories/docs/customWellWidths.md?raw';
|
|
|
|
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Components/Page Layout/Article',
|
|
component: Article,
|
|
});
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
</script>
|
|
|
|
<Story
|
|
name="Demo"
|
|
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;
|
|
}
|
|
:global(#article-column-widths-demo) {
|
|
background-color: #ddd;
|
|
position: relative;
|
|
margin-bottom: 10px;
|
|
}
|
|
:global(#article-column-widths-demo .article-boundaries) {
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #bbb;
|
|
}
|
|
:global(
|
|
#article-column-widths-demo .article-boundaries.custom div.article-block
|
|
) {
|
|
background: rgb(211, 132, 123);
|
|
}
|
|
:global(#article-column-widths-demo 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: #666;
|
|
}
|
|
.padding-label {
|
|
position: absolute;
|
|
top: 0;
|
|
left: -17px;
|
|
span {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|