mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 18:31:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(content-switcher): support light variant

Browse source
This commit is contained in:
Eric Liu 2020-07-20 19:58:33 -07:00
commit 9a78f9900d
3 changed files with 10 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/ContentSwitcher/ContentSwitcher.Story.svelte
View file

@ -1,5 +1,6 @@
<script>
export let story = undefined;
export let light = false;
import ContentSwitcher from "./ContentSwitcher.svelte";
import Switch from "./Switch.svelte";
@ -11,6 +12,7 @@
{#if story === 'selected'}
<ContentSwitcher
{light}
on:change={({ detail }) => {
console.log('on:change', detail);
}}>
@ -20,6 +22,7 @@
</ContentSwitcher>
{:else}
<ContentSwitcher
{light}
bind:selectedIndex
on:change={({ detail }) => {
console.log('on:change', detail);

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

@ -5,7 +5,10 @@ export default { title: "ContentSwitcher", decorators: [withKnobs] };
export const Default = () => ({
Component,
props: { disabled: boolean("Disabled (disabled)", false) },
props: {
disabled: boolean("Disabled (disabled)", false),
light: boolean("Light variant (light)", false),
},
});
export const Selected = () => ({
@ -13,5 +16,6 @@ export const Selected = () => ({
props: {
story: "selected",
disabled: boolean("Disabled (disabled)", false),
light: boolean("Light variant (light)", false),
},
});

2
src/ContentSwitcher/ContentSwitcher.svelte
View file

@ -1,5 +1,6 @@
<script>
export let selectedIndex = 0;
export let light = false;
import { afterUpdate, createEventDispatcher, setContext } from "svelte";
import { writable } from "svelte/store";
@ -49,6 +50,7 @@
<div
role="tablist"
class:bx--content-switcher={true}
class:bx--content-switcher--light={light}
{...$$restProps}
on:click
on:mouseover