mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 02:41:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore: remove storybook

Browse source
This commit is contained in:
Eric Liu 2020-10-14 16:23:44 -07:00
commit 378fe06e03
116 changed files with 103 additions and 14249 deletions
Download patch file Download diff file Expand all files Collapse all files

317
src/Grid/Grid.Story.svelte
View file

@ -1,317 +0,0 @@
<script>
import Grid from "./Grid.svelte";
import Row from "./Row.svelte";
import Column from "./Column.svelte";
</script>
<style>
:global(.grid div) {
outline: 1px solid #e0e0e0;
font-size: 0.75rem;
}
:global(.outside) {
min-height: 2rem;
}
h6 {
margin-top: 2.5rem;
margin-bottom: 0.5rem;
}
</style>
<div class="grid">
<h6>Columns with auto-width</h6>
<Grid>
<Row>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
</Row>
</Grid>
<h6>Narrow grid</h6>
<Grid narrow>
<Row>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
</Row>
</Grid>
<h6>Responsive Grid</h6>
<Grid>
<Row>
<Column sm="{1}" md="{4}" lg="{8}">
<div class="outside">
<div class="inside">sm: 1/4, md: 1/2, lg: 2/3</div>
</div>
</Column>
<Column sm="{1}" md="{2}" lg="{2}">
<div class="outside">
<div class="inside">sm: 1/4, md: 1/4, lg: 1/6</div>
</div>
</Column>
<Column sm="{1}" md="{1}" lg="{1}">
<div class="outside">
<div class="inside">sm: 1/4, md: 1/8, lg: 1/12</div>
</div>
</Column>
<Column sm="{1}" md="{1}" lg="{1}">
<div class="outside">
<div class="inside">sm: 1/4, md: 1/8, lg: 1/12</div>
</div>
</Column>
</Row>
</Grid>
<h6>Columns with Offset</h6>
<Grid>
<Row>
<Column sm="{{ span: 1, offset: 3 }}">
<div class="outside">
<div class="inside">Small Screen Offset 3</div>
</div>
</Column>
<Column sm="{{ span: 2, offset: 2 }}">
<div class="outside">
<div class="inside">Small Screen Offset 2</div>
</div>
</Column>
<Column sm="{{ span: 3, offset: 1 }}">
<div class="outside">
<div class="inside">Small Screen Offset 1</div>
</div>
</Column>
<Column sm="{{ span: 4, offset: 0 }}">
<div class="outside">
<div class="inside">Small Screen Offset 0</div>
</div>
</Column>
</Row>
</Grid>
<h6>Condensed Grid</h6>
<Grid condensed>
<Row>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
</Row>
</Grid>
<h6>Condensed Columns</h6>
<Grid>
<Row>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
</Row>
<Row condensed>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
</Row>
<Row>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
</Row>
</Grid>
<h6>Full Width</h6>
<Grid fullWidth>
<Row>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
</Row>
</Grid>
<h6>Aspect Ratio: 2x1</h6>
<Grid>
<Row>
<Column aspectRatio="2x1">1</Column>
<Column aspectRatio="2x1">1</Column>
</Row>
</Grid>
<h6>Aspect Ratio: 16x9</h6>
<Grid>
<Row>
<Column aspectRatio="16x9">1</Column>
<Column aspectRatio="16x9">1</Column>
<Column aspectRatio="16x9">1</Column>
<Column aspectRatio="16x9">1</Column>
</Row>
</Grid>
<h6>Aspect Ratio: 4x3</h6>
<Grid>
<Row>
<Column aspectRatio="4x3">1</Column>
<Column aspectRatio="4x3">1</Column>
<Column aspectRatio="4x3">1</Column>
<Column aspectRatio="4x3">1</Column>
</Row>
</Grid>
<h6>Aspect Ratio: 1x1</h6>
<Grid>
<Row>
<Column aspectRatio="1x1">1</Column>
<Column aspectRatio="1x1">1</Column>
<Column aspectRatio="1x1">1</Column>
<Column aspectRatio="1x1">1</Column>
</Row>
</Grid>
<h6>Aspect Ratio: 3x4</h6>
<Grid>
<Row>
<Column aspectRatio="3x4">1</Column>
<Column aspectRatio="3x4">1</Column>
<Column aspectRatio="3x4">1</Column>
<Column aspectRatio="3x4">1</Column>
</Row>
</Grid>
<h6>Aspect Ratio: 9x16</h6>
<Grid>
<Row>
<Column aspectRatio="9x16">1</Column>
<Column aspectRatio="9x16">1</Column>
<Column aspectRatio="9x16">1</Column>
<Column aspectRatio="9x16">1</Column>
</Row>
</Grid>
<h6>Aspect Ratio: 1x2</h6>
<Grid>
<Row>
<Column aspectRatio="1x2">1</Column>
<Column aspectRatio="1x2">1</Column>
<Column aspectRatio="1x2">1</Column>
<Column aspectRatio="1x2">1</Column>
</Row>
</Grid>
</div>

6
src/Grid/Grid.stories.js
View file

@ -1,6 +0,0 @@
import { withKnobs } from "@storybook/addon-knobs";
import Component from "./Grid.Story.svelte";
export default { title: "Grid", decorators: [withKnobs] };
export const Default = () => ({ Component });