BradNut/svelte-library
1
0
Fork 0
mirror of https://github.com/BradNut/svelte-library synced 2025-09-08 17:40:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Using storybook to document the Toggle button.

Browse source
This commit is contained in:
Bradley Shellnut 2021-08-02 10:47:43 -07:00
parent da1eaf278a
commit d9c08ab52c
6 changed files with 31809 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
.storybook/main.cjs Normal file
View file

@ -0,0 +1,11 @@
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-svelte-csf"
],
}

9
.storybook/preview.cjs Normal file
View file

@ -0,0 +1,9 @@
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}

31742
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

14
package.json
View file

@ -6,16 +6,26 @@
"build": "svelte-kit build", "build": "svelte-kit build",
"preview": "svelte-kit preview", "preview": "svelte-kit preview",
"lint": "prettier --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .", "lint": "prettier --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
"format": "prettier --write --plugin-search-dir=. ." "format": "prettier --write --plugin-search-dir=. .",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.14.8",
"@storybook/addon-actions": "^6.3.6",
"@storybook/addon-essentials": "^6.3.6",
"@storybook/addon-links": "^6.3.6",
"@storybook/addon-svelte-csf": "^1.1.0",
"@storybook/svelte": "^6.3.6",
"@sveltejs/kit": "next", "@sveltejs/kit": "next",
"babel-loader": "^8.2.2",
"eslint": "^7.22.0", "eslint": "^7.22.0",
"eslint-config-prettier": "^8.1.0", "eslint-config-prettier": "^8.1.0",
"eslint-plugin-svelte3": "^3.2.0", "eslint-plugin-svelte3": "^3.2.0",
"prettier": "~2.2.1", "prettier": "~2.2.1",
"prettier-plugin-svelte": "^2.2.0", "prettier-plugin-svelte": "^2.2.0",
"svelte": "^3.34.0" "svelte": "^3.41.0",
"svelte-loader": "^3.1.2"
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {

13
src/lib/Toggle.stories.svelte Normal file
View file

@ -0,0 +1,13 @@
<script>
import { Meta, Story, Template } from '@storybook/addon-svelte-csf';
import Toggle from './Toggle.svelte';
</script>
<Meta title="Toggle" component={Toggle} />
<Template let:args>
<Toggle {...args} />
</Template>
<Story name="default" />
<Story name="with props" args={{ label: 'Hello' }} />

89
src/lib/Toggle.svelte
View file

@ -1,55 +1,54 @@
<script> <script>
export let label = ""; export let label = '';
export let isToggled = false; export let isToggled = false;
export let style = ""; export let style = '';
</script> </script>
<label {style}> <label {style}>
<input type="checkbox" bind:checked={isToggled} /> {label}
<div class="toggle" /> <input type="checkbox" bind:checked={isToggled} />
{label} <div class="toggle" />
</label> </label>
<style> <style>
label { label {
--width: 40px; --width: 40px;
--height: calc(var(--width) / 2); --height: calc(var(--width) / 2);
--radius: calc(var(--height) / 2); --radius: calc(var(--height) / 2);
display: flex; display: flex;
} }
.toggle { .toggle {
position: relative; position: relative;
width: var(--width); width: var(--width);
height: var(--height); height: var(--height);
border-radius: var(--radius); border-radius: var(--radius);
border: solid 1px #333; border: solid 1px #333;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
margin-right: 5px; margin-right: 5px;
background-color: var(--toggleBackgroundColor, white); background-color: var(--toggleBackgroundColor, white);
} }
.toggle::after { .toggle::after {
content: ""; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: var(--height); width: var(--height);
height: var(--height); height: var(--height);
border-radius: var(--radius); border-radius: var(--radius);
background-color: var(--toggleButtonColor, aliceblue); background-color: var(--toggleButtonColor, aliceblue);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
input { input {
display: none; display: none;
} }
input:checked + .toggle { input:checked + .toggle {
background-color: var(--toggleCheckedBackgroundColor, green); background-color: var(--toggleCheckedBackgroundColor, green);
} }
input:checked + .toggle::after { input:checked + .toggle::after {
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
} }
</style>
</style>