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

test(header-search): validate HeaderSearch types

Browse source
This commit is contained in:
Eric Liu 2020-11-26 14:21:36 -08:00
commit 765c62354c
1 changed files with 111 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

111
tests/HeaderSearch.svelte Normal file
View file

@ -0,0 +1,111 @@
<script lang="ts">
import {
Header,
HeaderUtilities,
HeaderAction,
HeaderSearch,
HeaderPanelLinks,
HeaderPanelDivider,
HeaderPanelLink,
SideNav,
SideNavItems,
SideNavMenu,
SideNavMenuItem,
SideNavLink,
SkipToContent,
Content,
Grid,
Row,
Column,
} from "../types";
let isSideNavOpen = false;
let isOpen = false;
let ref = null;
let active = false;
let value = "";
let selectedResultIndex = 1;
$: results =
value.length > 2
? [
{
href: "/",
text: "Result 1",
description: "Result description",
},
{
href: "/",
text: "Result 2",
description: "Result description",
},
{
href: "/",
text: "Result 3",
description: "Result description",
},
]
: [];
$: console.log("ref", ref);
$: console.log("active", active);
$: console.log("value", value);
$: console.log("selectedResultIndex", selectedResultIndex);
</script>
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
<div slot="skip-to-content">
<SkipToContent />
</div>
<HeaderUtilities>
<HeaderSearch
bind:ref
bind:active
bind:value
bind:selectedResultIndex
results="{results}"
on:clear="{() => {
console.log('on:clear');
}}"
on:select="{(e) => {
console.log('on:select', e.detail);
}}"
/>
<HeaderAction bind:isOpen>
<HeaderPanelLinks>
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
<HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
<HeaderPanelLink>Switcher item 1</HeaderPanelLink>
<HeaderPanelLink>Switcher item 2</HeaderPanelLink>
<HeaderPanelLink>Switcher item 3</HeaderPanelLink>
<HeaderPanelLink>Switcher item 4</HeaderPanelLink>
<HeaderPanelLink>Switcher item 5</HeaderPanelLink>
</HeaderPanelLinks>
</HeaderAction>
</HeaderUtilities>
</Header>
<SideNav bind:isOpen="{isSideNavOpen}">
<SideNavItems>
<SideNavLink text="Link 1" />
<SideNavLink text="Link 2" />
<SideNavLink text="Link 3" />
<SideNavMenu text="Menu">
<SideNavMenuItem href="/" text="Link 1" />
<SideNavMenuItem href="/" text="Link 2" />
<SideNavMenuItem href="/" text="Link 3" />
</SideNavMenu>
</SideNavItems>
</SideNav>
<Content>
<Grid>
<Row>
<Column>
<h1>Welcome</h1>
</Column>
</Row>
</Grid>
</Content>