mirror of
https://github.com/BradNut/svelte-library
synced 2025-09-08 17:40:21 +00:00
Using storybook to document the Toggle button.
This commit is contained in:
Bradley Shellnut
parent
da1eaf278a
commit
d9c08ab52c
6 changed files with 31809 additions and 69 deletions
11
.storybook/main.cjs
Normal file
11
.storybook/main.cjs
Normal 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
9
.storybook/preview.cjs
Normal 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
31742
package-lock.json
generated
File diff suppressed because it is too large
Load diff
14
package.json
14
package.json
|
|
@ -6,16 +6,26 @@
|
|||
"build": "svelte-kit build",
|
||||
"preview": "svelte-kit preview",
|
||||
"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": {
|
||||
"@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",
|
||||
"babel-loader": "^8.2.2",
|
||||
"eslint": "^7.22.0",
|
||||
"eslint-config-prettier": "^8.1.0",
|
||||
"eslint-plugin-svelte3": "^3.2.0",
|
||||
"prettier": "~2.2.1",
|
||||
"prettier-plugin-svelte": "^2.2.0",
|
||||
"svelte": "^3.34.0"
|
||||
"svelte": "^3.41.0",
|
||||
"svelte-loader": "^3.1.2"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
|
|
|
|||
13
src/lib/Toggle.stories.svelte
Normal file
13
src/lib/Toggle.stories.svelte
Normal 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' }} />
|
||||
|
|
@ -1,55 +1,54 @@
|
|||
<script>
|
||||
export let label = "";
|
||||
export let isToggled = false;
|
||||
export let style = "";
|
||||
export let label = '';
|
||||
export let isToggled = false;
|
||||
export let style = '';
|
||||
</script>
|
||||
|
||||
<label {style}>
|
||||
<input type="checkbox" bind:checked={isToggled} />
|
||||
<div class="toggle" />
|
||||
{label}
|
||||
{label}
|
||||
<input type="checkbox" bind:checked={isToggled} />
|
||||
<div class="toggle" />
|
||||
</label>
|
||||
|
||||
<style>
|
||||
label {
|
||||
--width: 40px;
|
||||
--height: calc(var(--width) / 2);
|
||||
--radius: calc(var(--height) / 2);
|
||||
display: flex;
|
||||
}
|
||||
.toggle {
|
||||
position: relative;
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
border-radius: var(--radius);
|
||||
border: solid 1px #333;
|
||||
transition: background-color 0.3s ease;
|
||||
margin-right: 5px;
|
||||
background-color: var(--toggleBackgroundColor, white);
|
||||
}
|
||||
.toggle::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--height);
|
||||
height: var(--height);
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--toggleButtonColor, aliceblue);
|
||||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
label {
|
||||
--width: 40px;
|
||||
--height: calc(var(--width) / 2);
|
||||
--radius: calc(var(--height) / 2);
|
||||
display: flex;
|
||||
}
|
||||
.toggle {
|
||||
position: relative;
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
border-radius: var(--radius);
|
||||
border: solid 1px #333;
|
||||
transition: background-color 0.3s ease;
|
||||
margin-right: 5px;
|
||||
background-color: var(--toggleBackgroundColor, white);
|
||||
}
|
||||
.toggle::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--height);
|
||||
height: var(--height);
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--toggleButtonColor, aliceblue);
|
||||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input:checked + .toggle {
|
||||
background-color: var(--toggleCheckedBackgroundColor, green);
|
||||
}
|
||||
input:checked + .toggle {
|
||||
background-color: var(--toggleCheckedBackgroundColor, green);
|
||||
}
|
||||
|
||||
input:checked + .toggle::after {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
|
||||
</style>
|
||||
input:checked + .toggle::after {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue