Skip to content

Commit 08ab5e3

Browse files
ItsMeBrianDItsMeBrianD
authored
Merge pull request #2 from 0c370t/Tile-Component
Add Tile Component Resolves #1
2 parents 94de0e0 + 8c8e2a1 commit 08ab5e3

23 files changed

+1398
-175
lines changed

‎dist/index.js

+635-79
Large diffs are not rendered by default.

‎dist/index.min.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.mjs

+627-80
Large diffs are not rendered by default.

‎docs/iframe.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -73,4 +73,4 @@
7373
}</style><style>#root[hidden],
7474
#docs-root[hidden] {
7575
display: none !important;
76-
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.5a1dd4f5289c13896dcd.bundle.js"></script><script src="vendors~main.5a1dd4f5289c13896dcd.bundle.js"></script><script src="main.5a1dd4f5289c13896dcd.bundle.js"></script></body></html>
76+
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.65c3451b62b39297fb37.bundle.js"></script><script src="vendors~main.65c3451b62b39297fb37.bundle.js"></script><script src="main.65c3451b62b39297fb37.bundle.js"></script></body></html>

‎docs/main.5a1dd4f5289c13896dcd.bundle.js

-2
This file was deleted.

‎docs/main.5a1dd4f5289c13896dcd.bundle.js.map

-1
This file was deleted.

‎docs/main.65c3451b62b39297fb37.bundle.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/main.65c3451b62b39297fb37.bundle.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/runtime~main.5a1dd4f5289c13896dcd.bundle.js.map

-1
This file was deleted.

‎docs/runtime~main.5a1dd4f5289c13896dcd.bundle.js renamed to ‎docs/runtime~main.65c3451b62b39297fb37.bundle.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/runtime~main.65c3451b62b39297fb37.bundle.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/vendors~main.5a1dd4f5289c13896dcd.bundle.js

-3
This file was deleted.

‎docs/vendors~main.5a1dd4f5289c13896dcd.bundle.js.map

-1
This file was deleted.

‎docs/vendors~main.65c3451b62b39297fb37.bundle.js

+3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/vendors~main.5a1dd4f5289c13896dcd.bundle.js.LICENSE.txt renamed to ‎docs/vendors~main.65c3451b62b39297fb37.bundle.js.LICENSE.txt

File renamed without changes.

‎docs/vendors~main.65c3451b62b39297fb37.bundle.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json

+36-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,5 @@
1717
- [Drop](Drop#drop)
1818
- [Dropdown](Dropdown#dropdown)
1919
- [Flex](Flex#flex)
20+
- [Tile](Tile#tile)
2021
- [Width](helpers#width)

‎src/Tile/README.md

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Tile
2+
> [UIKit documentation](https://getuikit.com/docs/tile)
3+
4+
> [Storybook](https://0c370t.github.io/Svelte-UIKit3/docs/?path=/story/Tile--main)
5+
## Usage
6+
7+
#### Props
8+
| name | type | description | see also |
9+
|-------------|-------|------------------------------|-------------------------------------------------|
10+
| style | enum | Background / Text color | Module context of [Tile.svelte](./Tile.svelte) |
11+
| width | enum | Width of the tile | [helpers/width.js](../helpers/) |
12+
13+
#### Slots
14+
| name | type | inside | description |
15+
|---------|------|------------------------|-------------------------------------------|
16+
| default | any | root element (div) | Content of the tile |
17+
18+
#### Real Example
19+
> Note that all props are default values
20+
```html
21+
<script>
22+
import {Tile} from 'svelte-uikit3';
23+
</script>
24+
25+
<Tile style={""} width={""}>
26+
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
27+
</Tile>
28+
```

‎src/Tile/Tile.svelte

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script context="module">
2+
const styles = ["default", "muted", "primary", "secondary"]
3+
4+
export const tileOptions = {
5+
styles
6+
}
7+
</script>
8+
9+
<script>
10+
import {uk_width} from "..";
11+
let classes = ["uk-tile"]
12+
13+
export let style = "";
14+
if(styles.includes(style.toLowerCase())){
15+
classes.push("uk-tile-" + style.toLowerCase())
16+
} else {
17+
classes.push("uk-tile-default")
18+
}
19+
20+
export let width = "";
21+
22+
let _class = "";
23+
export {_class as class}
24+
</script>
25+
26+
<div class={classes.join(" ") + " " + _class} use:uk_width={width}>
27+
<slot/>
28+
</div>

‎src/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -37,5 +37,7 @@ export {default as Flex, flexOptions} from "./Flex/Flex.svelte";
3737

3838
export {default as Inline} from "./Utility/Inline.svelte";
3939

40+
export {default as Tile, tileOptions} from "./Tile/Tile.svelte";
41+
4042
export {uk_width} from "./helpers/width";
4143
export {uk_animate} from "./helpers/animation";

‎stories/Tile.stories.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import TileView from "./views/Tile/TileView.svelte";
2+
import {withKnobs, text, boolean, number, select} from "@storybook/addon-knobs";
3+
import {validWidths} from "../src/helpers/width";
4+
import {tileOptions} from "../src";
5+
6+
export default {
7+
title: 'Tile',
8+
component: TileView,
9+
decorators: [withKnobs]
10+
};
11+
12+
export const Main = () => ({
13+
Component: TileView,
14+
props: {
15+
props: {
16+
style: select("Style", [...tileOptions.styles], ""),
17+
width: select("Width", ["", ...validWidths], "")
18+
},
19+
20+
}
21+
});

‎stories/views/Tile/TileView.svelte

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<script>
2+
import {Tile} from "../../../src";
3+
export let props = {};
4+
</script>
5+
6+
<Tile {...props}>
7+
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
8+
</Tile>

0 commit comments

Comments
 (0)