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: complete first pass of apply jsdoc annotations to component props

Browse source
This commit is contained in:
Eric Liu 2020-07-26 17:42:12 -07:00
commit f30755b237
97 changed files with 2327 additions and 259 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/Button/Button.stories.js
View file

@ -6,6 +6,7 @@ export default { title: "Button", decorators: [withKnobs] };
const kinds = {
"Primary button (primary)": "primary",
"Secondary button (secondary)": "secondary",
"Tertiary button (tertiary)": "tertiary",
"Danger button (danger)": "danger",
"Ghost button (ghost)": "ghost",
};

82
src/Button/Button.svelte
View file

@ -1,6 +1,64 @@
<script>
export let as = undefined;
/**
* Specify the kind of button
* @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger"} [kind="primary"]
*/
export let kind = "primary";
/**
* Specify the size of button
* @type {"default" | "field" | "small"} [size="default"]
*/
export let size = "default";
/**
* Set to `true` for the icon-only variant
* @type {boolean} [hasIconOnly=false]
*/
export let hasIconOnly = false;
/**
* Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte/lib/Add16").default} [icon]
*/
export let icon = undefined;
/**
* Specify the ARIA label for the button icon
* @type {string} [iconDescription]
*/
export let iconDescription = undefined;
/**
* Set the alignment of the tooltip relative to the icon
* `hasIconOnly` must be set to `true`
* @type {"start" | "center" | "end"} [tooltipAlignment]
*/
export let tooltipAlignment = undefined;
/**
* Set the position of the tooltip relative to the icon
* @type {"top" | "right" | "bottom" | "left"} [tooltipPosition]
*/
export let tooltipPosition = undefined;
/**
* Set to `true` to render a custom HTML element
* Props are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>)
* @type {boolean} [as=false]
*/
export let as = false;
/**
* Set to `true` to display the skeleton state
* @type {boolean} [skeleton=false]
*/
export let skeleton = false;
/**
* Set to `true` to disable the button
* @type [boolean] [disabled=false]
*/
export let disabled = false;
/**
@ -8,15 +66,23 @@
* @type {string} [href]
*/
export let href = undefined;
export let icon = undefined;
export let iconDescription = undefined;
export let hasIconOnly = false;
export let kind = "primary";
export let size = "default";
/**
* Specify the tabindex
* @type {string} [tabindex="0"]
*/
export let tabindex = "0";
export let tooltipAlignment = undefined;
export let tooltipPosition = undefined;
/**
* Specify the `type` attribute for the button element
* @type {string} [type="button"]
*/
export let type = "button";
/**
* Obtain a reference to the HTML element
* @type {null | HTMLAnchorElement | HTMLButtonElement} [ref=null]
*/
export let ref = null;
import { getContext } from "svelte";