set up block docs
This commit is contained in:
MinamiFunakoshiTR
parent
f9cce65f66
commit
cfeb4a6de2
4 changed files with 80 additions and 80 deletions
|
|
@ -1,9 +1,51 @@
|
|||
import { Meta, Canvas } from '@storybook/blocks';
|
||||
|
||||
import * as BlockStories from './Block.stories.svelte';
|
||||
|
||||
<Meta of={BlockStories} />
|
||||
|
||||
# Block
|
||||
|
||||
The `Block` component is the basic building block of stories, a responsive container that wraps each section of your piece.
|
||||
|
||||
Blocks are stacked vertically within the well created by the [`Article`](./?path=/docs/layout-article) component. They can have different widths on larger screens depending on the `width` prop.
|
||||
|
||||
> 📌 Many of our other components already use the `Block` component, internally. You'll usually only need to use it yourself if you're making something custom.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Block } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<Block width="normal">
|
||||
<!-- Your stuff for this block -->
|
||||
</Block>
|
||||
```
|
||||
|
||||
## Custom layouts
|
||||
|
||||
Our article well is designed to provide a basic responsive layout for you, but it's also made to get out of the way quickly when you need to do something custom.
|
||||
|
||||
If you need to get really radical, the easiest way is to create a `Block` with a `fluid` width -- which basically cancels out the article well dimensions -- and then code whatever you need from scratch or with another framework.
|
||||
|
||||
```svelte
|
||||
<Block width="fluid">
|
||||
<div class="my-radical-container">
|
||||
<!-- Now, you have full control! -->
|
||||
</div>
|
||||
</Block>
|
||||
```
|
||||
|
||||
The demo below does exactly that to create an edge-to-edge grid with [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
|
||||
|
||||
## Snap widths
|
||||
|
||||
Normally, `Block` containers resize fluidly below the original `width`. Sometimes, though, you may want the container to snap to the next breakpoint -- for example, if you have a static graphic that looks fine at the set block breakpoints, but isn't so great at widths inbetween.
|
||||
|
||||
You can use the `snap` prop to force the container to snap to each block width successively as the window sizes down.
|
||||
|
||||
```svelte
|
||||
<Block width="wider" snap="{true}">
|
||||
<Block width="wider" snap={true}>
|
||||
<!-- Your stuff for this block -->
|
||||
</Block>
|
||||
```
|
||||
|
|
@ -12,7 +54,7 @@ If you want to skip certain block widths entirely, you can add one or more class
|
|||
|
||||
```svelte
|
||||
<!-- Will skip wide and go straight to normal column width on resize. -->
|
||||
<Block width="wider" snap="{true}" class="skip-wide">
|
||||
<Block width="wider" snap={true} class="skip-wide">
|
||||
<!-- Your stuff for this block -->
|
||||
</Block>
|
||||
```
|
||||
|
|
@ -28,7 +70,7 @@ Snap width breakpoints are hard-coded to the default article well column widths,
|
|||
Luckily, it's still pretty easy. Just add a `cls` or `id` to your `Block` so you can target it with some custom SCSS. Now, defined a few SCSS variables corresponding to your custom column widths and use the `block-snap-widths` SCSS mixin to get the same functionality at your custom breakpoints.
|
||||
|
||||
```svelte
|
||||
<Block width="wider" snap="{true}" class="custom-blocks">
|
||||
<Block width="wider" snap={true} class="custom-blocks">
|
||||
<!-- Your stuff for this block -->
|
||||
</Block>
|
||||
|
||||
|
|
@ -1,19 +1,11 @@
|
|||
<script module lang="ts">
|
||||
// @ts-ignore raw
|
||||
import componentDocs from './stories/docs/component.md?raw';
|
||||
// @ts-ignore raw
|
||||
import customLayoutsDocs from './stories/docs/customLayouts.md?raw';
|
||||
// @ts-ignore raw
|
||||
import snapWidthsDocs from './stories/docs/snapWidths.md?raw';
|
||||
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import Block from './Block.svelte';
|
||||
|
||||
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
|
||||
|
||||
export const meta = {
|
||||
const { Story } = defineMeta({
|
||||
title: 'Components/Page layout/Block',
|
||||
component: Block,
|
||||
...withComponentDocs(componentDocs),
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
width: {
|
||||
control: 'select',
|
||||
|
|
@ -28,35 +20,29 @@
|
|||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<!--
|
||||
<script>
|
||||
import { Template, Story } from '@storybook/addon-svelte-csf';
|
||||
import Article from '../Article/Article.svelte';
|
||||
</script>
|
||||
</script> -->
|
||||
|
||||
<Template >
|
||||
{#snippet children({ args })}
|
||||
<Article id="block-demo-article">
|
||||
<div class="article-boundaries">
|
||||
<div class="label">Article</div>
|
||||
<Block {...args}>
|
||||
<div class="label">Block</div>
|
||||
</Block>
|
||||
</div>
|
||||
</Article>
|
||||
{/snippet}
|
||||
</Template>
|
||||
<!--
|
||||
{#snippet children({ args })}
|
||||
<Article id="block-demo-article">
|
||||
<div class="article-boundaries">
|
||||
<div class="label">Article</div>
|
||||
<Block {...args}>
|
||||
<div class="label">Block</div>
|
||||
</Block>
|
||||
</div>
|
||||
</Article>
|
||||
{/snippet} -->
|
||||
|
||||
<Story
|
||||
name="Default"
|
||||
args="{{
|
||||
width: 'normal',
|
||||
}}"
|
||||
/>
|
||||
<Story name="Demo" />
|
||||
|
||||
<Story name="Custom layouts" {...withStoryDocs(customLayoutsDocs)}>
|
||||
<Story name="Custom layout" exportName="CustomLayout">
|
||||
<Block width="fluid">
|
||||
<!-- Enter bootstrap grid! -->
|
||||
<div id="block-flex-example">
|
||||
|
|
@ -73,51 +59,51 @@
|
|||
</Block>
|
||||
</Story>
|
||||
|
||||
<Story name="Snap widths" {...withStoryDocs(snapWidthsDocs)}>
|
||||
<!--
|
||||
<Story name="Snap widths">
|
||||
<Article id="block-demo-article">
|
||||
<div class="article-boundaries">
|
||||
<div class="label">Article</div>
|
||||
<Block width="narrower" snap="{true}" class="block-snap-widths-demo"
|
||||
<Block width="narrower" snap={true} class="block-snap-widths-demo"
|
||||
>narrower</Block
|
||||
>
|
||||
<Block width="narrow" snap="{true}" class="block-snap-widths-demo"
|
||||
<Block width="narrow" snap={true} class="block-snap-widths-demo"
|
||||
>narrow</Block
|
||||
>
|
||||
<Block width="normal" snap="{true}" class="block-snap-widths-demo"
|
||||
<Block width="normal" snap={true} class="block-snap-widths-demo"
|
||||
>normal</Block
|
||||
>
|
||||
<Block width="wide" snap="{true}" class="block-snap-widths-demo"
|
||||
>wide</Block
|
||||
<Block width="wide" snap={true} class="block-snap-widths-demo">wide</Block
|
||||
>
|
||||
<Block width="wider" snap="{true}" class="block-snap-widths-demo"
|
||||
<Block width="wider" snap={true} class="block-snap-widths-demo"
|
||||
>wider</Block
|
||||
>
|
||||
<Block width="narrower" snap="{true}" class="block-snap-widths-demo even"
|
||||
<Block width="narrower" snap={true} class="block-snap-widths-demo even"
|
||||
>narrower</Block
|
||||
>
|
||||
<Block width="narrow" snap="{true}" class="block-snap-widths-demo even"
|
||||
<Block width="narrow" snap={true} class="block-snap-widths-demo even"
|
||||
>narrow</Block
|
||||
>
|
||||
<Block
|
||||
width="normal"
|
||||
snap="{true}"
|
||||
snap={true}
|
||||
class="block-snap-widths-demo even skip-narrow"
|
||||
>normal.skip-narrow</Block
|
||||
>
|
||||
<Block
|
||||
width="wide"
|
||||
snap="{true}"
|
||||
snap={true}
|
||||
class="block-snap-widths-demo even skip-normal skip-narrow"
|
||||
>wide.skip-normal.skip-narrow</Block
|
||||
>
|
||||
<Block
|
||||
width="wider"
|
||||
snap="{true}"
|
||||
snap={true}
|
||||
class="block-snap-widths-demo even skip-wide">wider.skip-wide</Block
|
||||
>
|
||||
</div>
|
||||
</Article>
|
||||
</Story>
|
||||
</Story> -->
|
||||
|
||||
<style lang="scss">
|
||||
:global(#block-demo-article) {
|
||||
|
|
@ -145,9 +131,9 @@
|
|||
background: rgb(211, 132, 123);
|
||||
}
|
||||
:global(
|
||||
#block-demo-article .label,
|
||||
#block-demo-article div.article-block.block-snap-widths-demo
|
||||
) {
|
||||
#block-demo-article .label,
|
||||
#block-demo-article div.article-block.block-snap-widths-demo
|
||||
) {
|
||||
padding-left: 3px;
|
||||
color: white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
The `Block` component is the basic building block of stories, a responsive container that wraps each section of your piece.
|
||||
|
||||
Blocks are stacked vertically within the well created by the [`Article`](./?path=/docs/layout-article) component. They can have different widths on larger screens depending on the `width` prop.
|
||||
|
||||
> 📌 Many of our other components already use the `Block` component, internally. You'll usually only need to use it yourself if you're making something custom.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Block } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<Block width="normal">
|
||||
<!-- Your stuff for this block -->
|
||||
</Block>
|
||||
```
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
Our article well is designed to provide a basic responsive layout for you, but it's also made to get out of the way quickly when you need to do something custom.
|
||||
|
||||
If you need to get really radical, the easiest way is to create a `Block` with a `fluid` width -- which basically cancels out the article well dimensions -- and then code whatever you need from scratch or with another framework.
|
||||
|
||||
```svelte
|
||||
<Block width="fluid">
|
||||
<div class="my-radical-container">
|
||||
<!-- Now, you have full control! -->
|
||||
</div>
|
||||
</Block>
|
||||
```
|
||||
|
||||
The demo below does exactly that to create an edge-to-edge grid with [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
|
||||
Loading…
Reference in a new issue