From 51034f24a3e2228cd86e5263bc5cbb65316ad56e Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Fri, 24 Jul 2020 22:27:05 -0700 Subject: [PATCH 1/6] feat(breadcrumb): supporot noTrailingSlash in skeleton --- src/Breadcrumb/Breadcrumb.Skeleton.svelte | 17 ++++++++++++++++- src/Breadcrumb/Breadcrumb.Story.svelte | 2 +- src/Breadcrumb/Breadcrumb.stories.js | 8 ++++++-- 3 files changed, 23 insertions(+), 4 deletions(-) diff --git a/src/Breadcrumb/Breadcrumb.Skeleton.svelte b/src/Breadcrumb/Breadcrumb.Skeleton.svelte index c40197b1..ba7c2d72 100644 --- a/src/Breadcrumb/Breadcrumb.Skeleton.svelte +++ b/src/Breadcrumb/Breadcrumb.Skeleton.svelte @@ -1,12 +1,27 @@ + +
- {#each [0, 1, 2] as item, i (item)} + {#each Array.from({ length: count }, (_, i) => i) as item, i (item)}
 
diff --git a/src/Breadcrumb/Breadcrumb.Story.svelte b/src/Breadcrumb/Breadcrumb.Story.svelte index c42ecf85..ae7ca3f2 100644 --- a/src/Breadcrumb/Breadcrumb.Story.svelte +++ b/src/Breadcrumb/Breadcrumb.Story.svelte @@ -24,7 +24,7 @@ Breadcrumb 3 {:else if story === 'skeleton'} - + {:else} diff --git a/src/Breadcrumb/Breadcrumb.stories.js b/src/Breadcrumb/Breadcrumb.stories.js index 44e80de0..6baf69e3 100644 --- a/src/Breadcrumb/Breadcrumb.stories.js +++ b/src/Breadcrumb/Breadcrumb.stories.js @@ -1,4 +1,4 @@ -import { withKnobs, boolean } from "@storybook/addon-knobs"; +import { withKnobs, boolean, number } from "@storybook/addon-knobs"; import Component from "./Breadcrumb.Story.svelte"; export default { title: "Breadcrumb", decorators: [withKnobs] }; @@ -12,7 +12,11 @@ export const Default = () => ({ export const Skeleton = () => ({ Component, - props: { story: "skeleton" }, + props: { + story: "skeleton", + noTrailingSlash: boolean("No Trailing Slash (noTrailingSlash)", false), + count: number("Number of breadcrumb items (count)", 3), + }, }); export const CurrentPage = () => ({ From 8c1ffd4cb097b1bdc480d73a35188595a9424257 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Fri, 24 Jul 2020 22:35:20 -0700 Subject: [PATCH 2/6] chore: use jsdoc to annotate props --- src/Accordion/Accordion.svelte | 11 ++++++++++- src/Accordion/AccordionItem.svelte | 15 +++++++++++++++ src/Breadcrumb/Breadcrumb.svelte | 9 +++++++++ src/Breadcrumb/BreadcrumbItem.svelte | 9 +++++++++ src/Grid/Column.svelte | 18 ++++++++---------- 5 files changed, 51 insertions(+), 11 deletions(-) diff --git a/src/Accordion/Accordion.svelte b/src/Accordion/Accordion.svelte index 57bf1171..517c51c3 100644 --- a/src/Accordion/Accordion.svelte +++ b/src/Accordion/Accordion.svelte @@ -1,5 +1,14 @@ diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte index 01330a2e..212bca1f 100644 --- a/src/Button/Button.svelte +++ b/src/Button/Button.svelte @@ -2,6 +2,11 @@ export let as = undefined; export let skeleton = false; export let disabled = false; + + /** + * Set the `href` to use an anchor link + * @type {string} [href] + */ export let href = undefined; export let icon = undefined; export let iconDescription = undefined; diff --git a/src/Checkbox/Checkbox.svelte b/src/Checkbox/Checkbox.svelte index 27346df6..1ba3f507 100644 --- a/src/Checkbox/Checkbox.svelte +++ b/src/Checkbox/Checkbox.svelte @@ -1,14 +1,68 @@ @@ -91,7 +96,7 @@ sortHeader.set({ id: sortDirection === 'none' ? null : $thKeys[header.key], key: header.key, - sortDirection + sortDirection, }); }}> {header.value} diff --git a/src/DataTable/TableHeader.svelte b/src/DataTable/TableHeader.svelte index aa829319..63f9e264 100644 --- a/src/DataTable/TableHeader.svelte +++ b/src/DataTable/TableHeader.svelte @@ -1,6 +1,11 @@ diff --git a/src/DatePicker/DatePicker.svelte b/src/DatePicker/DatePicker.svelte index 3af2ccb2..d2d9dac7 100644 --- a/src/DatePicker/DatePicker.svelte +++ b/src/DatePicker/DatePicker.svelte @@ -2,7 +2,17 @@ export let appendTo = document.body; export let dateFormat = "m/d/Y"; export let datePickerType = "simple"; + + /** + * Set an id for the date picker element + * @type {string} [id] + */ export let id = "ccs-" + Math.random().toString(36); + + /** + * Set to `true` to enable the light variant + * @type {boolean} [light=false] + */ export let light = false; export let locale = "en"; export let maxDate = null; @@ -14,22 +24,22 @@ createEventDispatcher, setContext, afterUpdate, - onDestroy + onDestroy, } from "svelte"; import { writable, derived } from "svelte/store"; import { createCalendar } from "./createCalendar"; const dispatch = createEventDispatcher(); const inputs = writable([]); - const inputIds = derived(inputs, _ => _.map(({ id }) => id)); + const inputIds = derived(inputs, (_) => _.map(({ id }) => id)); const labelTextEmpty = derived( inputs, - _ => _.filter(({ labelText }) => !!labelText).length === 0 + (_) => _.filter(({ labelText }) => !!labelText).length === 0 ); const inputValue = writable(value); const mode = writable(datePickerType); - const range = derived(mode, _ => _ === "range"); - const hasCalendar = derived(mode, _ => _ === "single" || _ === "range"); + const range = derived(mode, (_) => _ === "range"); + const hasCalendar = derived(mode, (_) => _ === "single" || _ === "range"); let calendar = undefined; let datePickerRef = undefined; @@ -40,8 +50,8 @@ range, inputValue, hasCalendar, - add: data => { - inputs.update(_ => [..._, data]); + add: (data) => { + inputs.update((_) => [..._, data]); }, declareRef: ({ id, ref }) => { if ($inputIds.indexOf(id) === 0) { @@ -59,7 +69,7 @@ dispatch("change", value); } }, - blurInput: relatedTarget => { + blurInput: (relatedTarget) => { if (calendar && !calendar.calendarContainer.contains(relatedTarget)) { calendar.close(); } @@ -74,7 +84,7 @@ calendar.calendarContainer.querySelector(".flatpickr-day[tabindex]") || calendar.calendarContainer ).focus(); - } + }, }); afterUpdate(() => { @@ -87,24 +97,24 @@ locale, maxDate, minDate, - mode: $mode + mode: $mode, }, base: inputRef, input: inputRefTo, - dispatch: event => { + dispatch: (event) => { const detail = { selectedDates: calendar.selectedDates }; if ($range) { detail.dateStr = { from: inputRef.value, - to: inputRefTo.value + to: inputRefTo.value, }; } else { detail.dateStr = inputRef.value; } return dispatch(event, detail); - } + }, }); } diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte index a2b8b6b0..d63b64f0 100644 --- a/src/DatePicker/DatePickerInput.svelte +++ b/src/DatePicker/DatePickerInput.svelte @@ -5,12 +5,22 @@ export let pattern = "\\d{1,2}\\/\\d{1,2}\\/\\d{4}"; export let disabled = false; export let iconDescription = ""; + + /** + * Set an id for the input element + * @type {string} [id] + */ export let id = "ccs-" + Math.random().toString(36); export let labelText = ""; export let hideLabel = false; export let invalid = false; export let invalidText = ""; export let name = undefined; + + /** + * Obtain a reference to the input HTML element + * @type {null | HTMLElement} [ref=null] + */ export let ref = null; import { getContext, onMount } from "svelte"; @@ -25,7 +35,7 @@ blurInput, openCalendar, focusCalendar, - inputValue + inputValue, } = getContext("DatePicker"); add({ id, labelText }); diff --git a/src/Dropdown/Dropdown.Skeleton.svelte b/src/Dropdown/Dropdown.Skeleton.svelte index a7202976..b7bd439a 100644 --- a/src/Dropdown/Dropdown.Skeleton.svelte +++ b/src/Dropdown/Dropdown.Skeleton.svelte @@ -1,4 +1,8 @@ diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte index 399e66a6..a7b29a65 100644 --- a/src/Dropdown/Dropdown.svelte +++ b/src/Dropdown/Dropdown.svelte @@ -1,14 +1,29 @@ - export let legendText = ""; export let invalid = false; export let message = false; export let messageText = ""; + export let legendText = "";
+ /** + * Set an id to be used by the label element + * @type {string} [id] + */ export let id = "ccs-" + Math.random().toString(36); diff --git a/src/Icon/Icon.Skeleton.svelte b/src/Icon/Icon.Skeleton.svelte index 8c221a93..00ba20c8 100644 --- a/src/Icon/Icon.Skeleton.svelte +++ b/src/Icon/Icon.Skeleton.svelte @@ -1,4 +1,8 @@ diff --git a/src/Icon/Icon.svelte b/src/Icon/Icon.svelte index fc724742..af119c96 100644 --- a/src/Icon/Icon.svelte +++ b/src/Icon/Icon.svelte @@ -1,5 +1,10 @@ diff --git a/src/ListBox/ListBox.svelte b/src/ListBox/ListBox.svelte index 0a8b55b4..105e568a 100644 --- a/src/ListBox/ListBox.svelte +++ b/src/ListBox/ListBox.svelte @@ -1,7 +1,22 @@ diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte index 2d512837..fa7a76a9 100644 --- a/src/NumberInput/NumberInput.svelte +++ b/src/NumberInput/NumberInput.svelte @@ -10,6 +10,11 @@ export let allowEmpty = false; export let disabled = false; export let iconDescription = ""; + + /** + * Set an id for the input element + * @type {string} [id] + */ export let id = "ccs-" + Math.random().toString(36); export let name = undefined; export let invalid = false; @@ -17,11 +22,16 @@ export let helperText = ""; export let label = ""; export let hideLabel = false; + + /** + * Obtain a reference to the input HTML element + * @type {null | HTMLElement} [ref=null] + */ export let ref = null; - export let translateWithId = id => defaultTranslations[id]; + export let translateWithId = (id) => defaultTranslations[id]; export const translationIds = { increment: "increment", - decrement: "decrement" + decrement: "decrement", }; import { createEventDispatcher, afterUpdate } from "svelte"; @@ -31,7 +41,7 @@ const defaultTranslations = { [translationIds.increment]: "Increment number", - [translationIds.decrement]: "Decrement number" + [translationIds.decrement]: "Decrement number", }; const dispatch = createEventDispatcher(); diff --git a/src/OrderedList/OrderedList.svelte b/src/OrderedList/OrderedList.svelte index 023ef81a..f4472260 100644 --- a/src/OrderedList/OrderedList.svelte +++ b/src/OrderedList/OrderedList.svelte @@ -1,4 +1,8 @@ diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte index 2072ca06..c9bd9487 100644 --- a/src/OverflowMenu/OverflowMenu.svelte +++ b/src/OverflowMenu/OverflowMenu.svelte @@ -7,6 +7,11 @@ export let icon = OverflowMenuVertical16; export let iconClass = undefined; export let iconDescription = "Open and close list of options"; + + /** + * Set an id for the button element + * @type {string} [id] + */ export let id = "ccs-" + Math.random().toString(36); export let menuOptionsClass = undefined; @@ -29,7 +34,7 @@ setContext("OverflowMenu", { focusedId, add: ({ id, text, primaryFocus }) => { - items.update(_ => { + items.update((_) => { if (primaryFocus) { currentIndex.set(_.length); } @@ -37,10 +42,10 @@ return [..._, { id, text, primaryFocus, index: _.length }]; }); }, - update: id => { + update: (id) => { currentId.set(id); }, - change: direction => { + change: (direction) => { // TODO: skip disabled let index = $currentIndex + direction; @@ -51,12 +56,12 @@ } currentIndex.set(index); - } + }, }); afterUpdate(() => { if ($currentId) { - const { index, text } = $items.filter(_ => _.id === $currentId)[0]; + const { index, text } = $items.filter((_) => _.id === $currentId)[0]; dispatch("close", { index, text }); open = false; } @@ -136,7 +141,7 @@ on:mouseenter on:mouseleave on:keydown - on:keydown={e => { + on:keydown={(e) => { if (open) { if (['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp'].includes(e.key)) { e.preventDefault(); diff --git a/src/OverflowMenu/OverflowMenuItem.svelte b/src/OverflowMenu/OverflowMenuItem.svelte index 56f478df..0b002790 100644 --- a/src/OverflowMenu/OverflowMenuItem.svelte +++ b/src/OverflowMenu/OverflowMenuItem.svelte @@ -6,6 +6,11 @@ export let primaryFocus = false; export let requireTitle = true; export let text = "Provide text"; + + /** + * Set an id for the top-level element + * @type {string} [id] + */ export let id = "ccs-" + Math.random().toString(36); export let ref = null; @@ -27,12 +32,13 @@ title: requireTitle ? text : undefined, class: "bx--overflow-menu-options__btn", disabled: href ? undefined : disabled, - href: href ? href : undefined + href: href ? href : undefined, };
  • `page ${page}`; + + /** + * Set an id for the top-level element + * @type {string} [id] + */ export let id = "ccs-" + Math.random().toString(36); import CaretLeft24 from "carbon-icons-svelte/lib/CaretLeft24"; @@ -33,7 +38,7 @@ $: forwardButtonDisabled = disabled || page === totalPages; -
    +