mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 02:41: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

42
src/Notification/InlineNotification.svelte
View file

@ -1,4 +1,8 @@
<script>
/**
* Set the type of notification
* @type {"toast" | "inline"} [notificationType="toast"]
*/
export let notificationType = "inline";
/**
@ -6,13 +10,43 @@
* @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"} [kind="error"]
*/
export let kind = "error";
export let role = "alert";
export let title = "provide a title";
export let subtitle = "";
export let iconDescription = "closes notification";
/**
* Set to `true` to use the low contrast variant
* @type {boolean} [lowContrast=false]
*/
export let lowContrast = false;
/**
* Set the `role` attribute
* @type {string} [role="alert"]
*/
export let role = "alert";
/**
* Specify the title text
* @type {string} [title="Title"]
*/
export let title = "Title";
/**
* Specify the subtitle text
* @type {string} [subtitle=""]
*/
export let subtitle = "";
/**
* Set to `true` to hide the close button
* @type {boolean} [hideCloseButton=false]
*/
export let hideCloseButton = false;
/**
* Specify the ARIA label for the icon
* @type {string} [iconDescription="Closes notification"]
*/
export let iconDescription = "Closes notification";
import { createEventDispatcher } from "svelte";
import NotificationIcon from "./NotificationIcon.svelte";
import NotificationTextDetails from "./NotificationTextDetails.svelte";

19
src/Notification/NotificationButton.svelte
View file

@ -4,18 +4,31 @@
* @type {"toast" | "inline"} [notificationType="toast"]
*/
export let notificationType = "toast";
export let iconDescription = "close icon";
/**
* Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte/lib/Add16").default} [renderIcon]
*/
export let renderIcon = Close20;
/**
* Specify the title of the icon
*/
export let title = undefined;
export let type = "button";
/**
* Specify the ARIA label for the icon
* @type {string} [iconDescription="Close icon"]
*/
export let iconDescription = "Close icon";
import Close20 from "carbon-icons-svelte/lib/Close20";
</script>
<button
type="button"
aria-label={iconDescription}
title={iconDescription}
{type}
class:bx--toast-notification__close-button={notificationType === 'toast'}
class:bx--inline-notification__close-button={notificationType === 'inline'}
{...$$restProps}

10
src/Notification/NotificationIcon.svelte
View file

@ -1,4 +1,8 @@
<script>
/**
* Specify the kind of notification icon
* @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"} [kind="error"]
*/
export let kind = "error";
/**
@ -7,7 +11,11 @@
*/
export let notificationType = "toast";
export let iconDescription = "closes notification";
/**
* Specify the ARIA label for the icon
* @type {string} [iconDescription="Closes notification"]
*/
export let iconDescription = "Closes notification";
import CheckmarkFilled20 from "carbon-icons-svelte/lib/CheckmarkFilled20";
import ErrorFilled20 from "carbon-icons-svelte/lib/ErrorFilled20";

25
src/Notification/NotificationTextDetails.svelte
View file

@ -1,8 +1,27 @@
<script>
export let notificationType = "toast"; // "toast" | "inline"
export let title = "title";
/**
* Set the type of notification
* @type {"toast" | "inline"} [notificationType="toast"]
*/
export let notificationType = "toast";
/**
* Specify the title text
* @type {string} [title="Title"]
*/
export let title = "Title";
/**
* Specify the subtitle text
* @type {string} [subtitle=""]
*/
export let subtitle = "";
export let caption = "caption";
/**
* Specify the caption text
* @type {string} [caption="Caption"]
*/
export let caption = "Caption";
</script>
{#if notificationType === 'toast'}

59
src/Notification/ToastNotification.svelte
View file

@ -1,14 +1,63 @@
<script>
export let iconDescription = "closes notification";
export let notificationType = "toast"; // "toast" | "inline"
/**
* Set the type of notification
* @type {"toast" | "inline"} [notificationType="toast"]
*/
export let notificationType = "toast";
/**
* Specify the kind of notification
* @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"} [kind="error"]
*/
export let kind = "error";
export let hideCloseButton = false;
/**
* Set to `true` to use the low contrast variant
* @type {boolean} [lowContrast=false]
*/
export let lowContrast = false;
/**
* Set the timeout duration (ms) to hide the notification after closing it
* @type {number} [timeout=0]
*/
export let timeout = 0;
/**
* Set the `role` attribute
* @type {string} [role="alert"]
*/
export let role = "alert";
export let title = "provide a title";
/**
* Specify the title text
* @type {string} [title="Title"]
*/
export let title = "Title";
/**
* Specify the subtitle text
* @type {string} [subtitle=""]
*/
export let subtitle = "";
export let caption = "provide a caption";
/**
* Specify the caption text
* @type {string} [caption="Caption"]
*/
export let caption = "Caption";
/**
* Specify the ARIA label for the icon
* @type {string} [iconDescription="Closes notification"]
*/
export let iconDescription = "Closes notification";
/**
* Set to `true` to hide the close button
* @type {boolean} [hideCloseButton=false]
*/
export let hideCloseButton = false;
import { createEventDispatcher, onMount } from "svelte";
import NotificationButton from "./NotificationButton.svelte";