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

chore: lift components folder

Browse source
This commit is contained in:
Eric Liu 2020-07-19 09:06:08 -07:00
commit 2200b29b92
301 changed files with 57 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

93
src/components/Button/Button.svelte
View file

@ -1,93 +0,0 @@
<script>
export let as = undefined;
export let disabled = false;
export let href = undefined;
export let icon = undefined;
export let iconDescription = undefined;
export let hasIconOnly = false;
export let kind = "primary";
export let size = "default";
export let tabindex = "0";
export let tooltipAlignment = undefined;
export let tooltipPosition = undefined;
export let type = "button";
export let ref = null;
import { getContext } from "svelte";
const ctx = getContext("ComposedModal");
$: if (ctx && ref) {
ctx.declareRef(ref);
}
$: buttonProps = {
role: "button",
type: href && !disabled ? undefined : type,
tabindex,
disabled,
href,
style: $$restProps.style,
class: [
"bx--btn",
size === "field" && "bx--btn--field",
size === "small" && "bx--btn--sm",
kind && `bx--btn--${kind}`,
disabled && "bx--btn--disabled",
hasIconOnly && "bx--btn--icon-only",
hasIconOnly && "bx--tooltip__trigger",
hasIconOnly && "bx--tooltip--a11y",
hasIconOnly && tooltipPosition && `bx--tooltip--${tooltipPosition}`,
hasIconOnly &&
tooltipAlignment &&
`bx--tooltip--align-${tooltipAlignment}`,
$$restProps.class
]
.filter(Boolean)
.join(" ")
};
</script>
{#if as}
<slot props={buttonProps} />
{:else if href && !disabled}
<!-- svelte-ignore a11y-missing-attribute -->
<a
bind:this={ref}
{...buttonProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
{#if hasIconOnly}
<span class:bx--assistive-text={true}>{iconDescription}</span>
{/if}
<slot />
{#if icon}
<svelte:component
this={icon}
aria-hidden="true"
class="bx--btn__icon"
aria-label={iconDescription} />
{/if}
</a>
{:else}
<button
bind:this={ref}
{...buttonProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
{#if hasIconOnly}
<span class:bx--assistive-text={true}>{iconDescription}</span>
{/if}
<slot />
{#if icon}
<svelte:component
this={icon}
aria-hidden="true"
class="bx--btn__icon"
aria-label={iconDescription} />
{/if}
</button>
{/if}