hypnagaga/src/components/PaddingReset/PaddingReset.stories.svelte
2024-11-19 18:48:51 +00:00

49 lines
963 B
Svelte

<script context="module" lang="ts">
// @ts-ignore raw
import componentDocs from './stories/docs/component.md?raw';
import PaddingReset from './PaddingReset.svelte';
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
export const meta = {
title: 'Components/PaddingReset',
component: PaddingReset,
...withComponentDocs(componentDocs),
};
</script>
<script>
import { Template, Story } from '@storybook/addon-svelte-csf';
import Block from '../Block/Block.svelte';
</script>
<Template let:args>
<Block width="fluid">
<div class="outer"></div>
<PaddingReset {...args}>
<div class="inner"></div>
</PaddingReset>
</Block>
</Template>
<Story
name="Default"
args="{{
containerIsFluid: true,
}}"
/>
<style lang="scss">
div {
height: 30px;
width: 100%;
margin-bottom: 2px;
&.outer {
background: grey;
}
&.inner {
background: salmon;
}
}
</style>