From eed617433b1890217fff081c4e8e050291ad82e5 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Thu, 19 Nov 2020 14:16:01 -0800 Subject: [PATCH] test: add TS types --- COMPONENT_INDEX.md | 176 +++++++------- docs/src/COMPONENT_API.json | 137 +++++++---- docs/src/pages/components/SelectableTile.svx | 4 +- src/Accordion/Accordion.svelte | 2 + src/Breadcrumb/Breadcrumb.svelte | 2 + src/Button/Button.svelte | 4 +- src/ComposedModal/ComposedModal.svelte | 9 +- src/CopyButton/CopyButton.svelte | 2 + src/DataTable/DataTable.svelte | 38 +-- src/DataTable/ToolbarMenu.svelte | 2 + src/DataTable/ToolbarMenuItem.svelte | 2 + src/DataTable/ToolbarSearch.svelte | 5 +- src/DatePicker/DatePicker.svelte | 5 +- src/Grid/Column.svelte | 2 + src/Grid/Grid.svelte | 3 +- src/Grid/Row.svelte | 3 +- src/Icon/Icon.svelte | 6 +- src/MultiSelect/MultiSelect.svelte | 2 +- src/NumberInput/NumberInput.svelte | 5 +- src/Select/Select.svelte | 5 +- src/TextInput/PasswordInput.svelte | 10 +- src/TextInput/TextInput.svelte | 5 +- src/TimePicker/TimePickerSelect.svelte | 5 +- tests/Accordion.test.svelte | 219 ++++++++++++++++++ tests/AspectRatio.test.svelte | 35 +++ tests/AspectRatioColumns.test.svelte | 20 ++ tests/Breadcrumb.test.svelte | 16 ++ tests/Breadcrumbs.test.svelte | 26 +++ tests/Button.test.svelte | 62 +++++ tests/Checkbox.test.svelte | 15 ++ tests/ClickableTile.test.svelte | 11 + tests/CodeSnippet.test.svelte | 50 ++++ tests/ComboBox.test.svelte | 44 ++++ tests/ComposedModal.test.svelte | 19 ++ tests/CondensedGrid.test.svelte | 12 + tests/ContentSwitcher.test.svelte | 55 +++++ tests/CopyButton.test.svelte | 16 ++ tests/CopyableCodeSnippet.test.svelte | 8 + tests/DangerModal.test.svelte | 21 ++ tests/DataTable.test.svelte | 192 +++++++++++++++ tests/DataTableAppendColumns.test.svelte | 34 +++ tests/DataTableBatchSelection.test.svelte | 29 +++ ...DataTableBatchSelectionToolbar.test.svelte | 51 ++++ tests/DatePicker.test.svelte | 58 +++++ tests/Dropdown.test.svelte | 55 +++++ tests/DynamicCodeSnippet.test.svelte | 15 ++ tests/ExpandableTile.test.svelte | 18 ++ tests/FileUploader.test.svelte | 33 +++ tests/FilterableComboBox.test.svelte | 15 ++ tests/FluidForm.test.svelte | 13 ++ tests/Form.test.svelte | 54 +++++ tests/FullWidthGrid.test.svelte | 12 + tests/Grid.test.svelte | 12 + tests/HeaderNav.test.svelte | 60 +++++ tests/HeaderSwitcher.test.svelte | 66 ++++++ tests/HeaderUtilities.test.svelte | 71 ++++++ tests/HiddenCodeSnippet.test.svelte | 34 +++ tests/Icon.test.svelte | 23 ++ tests/InlineLoading.test.svelte | 15 ++ tests/InlineLoadingUx.test.svelte | 52 +++++ tests/InlineNotification.test.svelte | 43 ++++ tests/Link.test.svelte | 29 +++ tests/Loading.test.svelte | 7 + tests/Modal.test.svelte | 20 ++ tests/ModalExtraSmall.test.svelte | 17 ++ tests/ModalLarge.test.svelte | 17 ++ tests/ModalPreventOutsideClick.test.svelte | 17 ++ tests/ModalSmall.test.svelte | 17 ++ tests/MultiSelect.test.svelte | 68 ++++++ tests/NarrowGrid.test.svelte | 12 + tests/NumberInput.test.svelte | 37 +++ tests/OffsetColumns.test.svelte | 32 +++ tests/OrderedList.test.svelte | 57 +++++ tests/OverflowMenu.test.svelte | 77 ++++++ tests/Pagination.test.svelte | 15 ++ tests/PaginationNav.test.svelte | 7 + tests/PassiveModal.test.svelte | 14 ++ tests/PasswordInput.test.svelte | 29 +++ tests/PersistedHamburgerMenu.test.svelte | 65 ++++++ tests/ProgressIndicator.test.svelte | 83 +++++++ tests/RadioButton.test.svelte | 48 ++++ tests/RadioSelectableDataTable.test.svelte | 24 ++ tests/RadioTile.test.svelte | 15 ++ tests/ResponsiveGrid.test.svelte | 40 ++++ tests/Search.test.svelte | 21 ++ tests/Select.test.svelte | 64 +++++ tests/SelectableDataTable.test.svelte | 24 ++ tests/SelectableTile.test.svelte | 15 ++ tests/SkeletonPlaceholder.test.svelte | 7 + tests/SkeletonText.test.svelte | 15 ++ tests/Slider.test.svelte | 36 +++ tests/StructuredList.test.svelte | 94 ++++++++ tests/Tabs.test.svelte | 39 ++++ tests/Tag.test.svelte | 31 +++ tests/TextArea.test.svelte | 46 ++++ tests/TextInput.test.svelte | 34 +++ tests/Tile.test.svelte | 7 + tests/TimePicker.test.svelte | 58 +++++ tests/ToastNotification.test.svelte | 35 +++ tests/Toggle.test.svelte | 13 ++ tests/ToggleSmall.test.svelte | 13 ++ tests/Tooltip.test.svelte | 52 +++++ tests/TooltipDefinition.test.svelte | 24 ++ tests/TooltipIcon.test.svelte | 25 ++ tests/UnorderedList.test.svelte | 39 ++++ tests/carbon-components-svelte-tests.svelte | 21 -- types/Accordion/Accordion.d.ts | 3 +- types/Breadcrumb/Breadcrumb.d.ts | 3 +- types/Button/Button.d.ts | 11 +- types/ComposedModal/ComposedModal.d.ts | 2 +- types/CopyButton/CopyButton.d.ts | 3 +- types/DataTable/DataTable.d.ts | 62 +++-- types/DataTable/ToolbarMenu.d.ts | 3 +- types/DataTable/ToolbarMenuItem.d.ts | 3 +- types/DataTable/ToolbarSearch.d.ts | 2 +- types/DatePicker/DatePicker.d.ts | 2 +- types/Grid/Column.d.ts | 4 +- types/Grid/Grid.d.ts | 4 +- types/Grid/Row.d.ts | 4 +- types/Icon/Icon.d.ts | 4 +- types/MultiSelect/MultiSelect.d.ts | 2 +- types/NumberInput/NumberInput.d.ts | 2 +- types/Select/Select.d.ts | 2 +- types/TextInput/PasswordInput.d.ts | 6 +- types/TextInput/TextInput.d.ts | 2 +- types/TimePicker/TimePickerSelect.d.ts | 2 +- 126 files changed, 3378 insertions(+), 226 deletions(-) create mode 100644 tests/Accordion.test.svelte create mode 100644 tests/AspectRatio.test.svelte create mode 100644 tests/AspectRatioColumns.test.svelte create mode 100644 tests/Breadcrumb.test.svelte create mode 100644 tests/Breadcrumbs.test.svelte create mode 100644 tests/Button.test.svelte create mode 100644 tests/Checkbox.test.svelte create mode 100644 tests/ClickableTile.test.svelte create mode 100644 tests/CodeSnippet.test.svelte create mode 100644 tests/ComboBox.test.svelte create mode 100644 tests/ComposedModal.test.svelte create mode 100644 tests/CondensedGrid.test.svelte create mode 100644 tests/ContentSwitcher.test.svelte create mode 100644 tests/CopyButton.test.svelte create mode 100644 tests/CopyableCodeSnippet.test.svelte create mode 100644 tests/DangerModal.test.svelte create mode 100644 tests/DataTable.test.svelte create mode 100644 tests/DataTableAppendColumns.test.svelte create mode 100644 tests/DataTableBatchSelection.test.svelte create mode 100644 tests/DataTableBatchSelectionToolbar.test.svelte create mode 100644 tests/DatePicker.test.svelte create mode 100644 tests/Dropdown.test.svelte create mode 100644 tests/DynamicCodeSnippet.test.svelte create mode 100644 tests/ExpandableTile.test.svelte create mode 100644 tests/FileUploader.test.svelte create mode 100644 tests/FilterableComboBox.test.svelte create mode 100644 tests/FluidForm.test.svelte create mode 100644 tests/Form.test.svelte create mode 100644 tests/FullWidthGrid.test.svelte create mode 100644 tests/Grid.test.svelte create mode 100644 tests/HeaderNav.test.svelte create mode 100644 tests/HeaderSwitcher.test.svelte create mode 100644 tests/HeaderUtilities.test.svelte create mode 100644 tests/HiddenCodeSnippet.test.svelte create mode 100644 tests/Icon.test.svelte create mode 100644 tests/InlineLoading.test.svelte create mode 100644 tests/InlineLoadingUx.test.svelte create mode 100644 tests/InlineNotification.test.svelte create mode 100644 tests/Link.test.svelte create mode 100644 tests/Loading.test.svelte create mode 100644 tests/Modal.test.svelte create mode 100644 tests/ModalExtraSmall.test.svelte create mode 100644 tests/ModalLarge.test.svelte create mode 100644 tests/ModalPreventOutsideClick.test.svelte create mode 100644 tests/ModalSmall.test.svelte create mode 100644 tests/MultiSelect.test.svelte create mode 100644 tests/NarrowGrid.test.svelte create mode 100644 tests/NumberInput.test.svelte create mode 100644 tests/OffsetColumns.test.svelte create mode 100644 tests/OrderedList.test.svelte create mode 100644 tests/OverflowMenu.test.svelte create mode 100644 tests/Pagination.test.svelte create mode 100644 tests/PaginationNav.test.svelte create mode 100644 tests/PassiveModal.test.svelte create mode 100644 tests/PasswordInput.test.svelte create mode 100644 tests/PersistedHamburgerMenu.test.svelte create mode 100644 tests/ProgressIndicator.test.svelte create mode 100644 tests/RadioButton.test.svelte create mode 100644 tests/RadioSelectableDataTable.test.svelte create mode 100644 tests/RadioTile.test.svelte create mode 100644 tests/ResponsiveGrid.test.svelte create mode 100644 tests/Search.test.svelte create mode 100644 tests/Select.test.svelte create mode 100644 tests/SelectableDataTable.test.svelte create mode 100644 tests/SelectableTile.test.svelte create mode 100644 tests/SkeletonPlaceholder.test.svelte create mode 100644 tests/SkeletonText.test.svelte create mode 100644 tests/Slider.test.svelte create mode 100644 tests/StructuredList.test.svelte create mode 100644 tests/Tabs.test.svelte create mode 100644 tests/Tag.test.svelte create mode 100644 tests/TextArea.test.svelte create mode 100644 tests/TextInput.test.svelte create mode 100644 tests/Tile.test.svelte create mode 100644 tests/TimePicker.test.svelte create mode 100644 tests/ToastNotification.test.svelte create mode 100644 tests/Toggle.test.svelte create mode 100644 tests/ToggleSmall.test.svelte create mode 100644 tests/Tooltip.test.svelte create mode 100644 tests/TooltipDefinition.test.svelte create mode 100644 tests/TooltipIcon.test.svelte create mode 100644 tests/UnorderedList.test.svelte delete mode 100644 tests/carbon-components-svelte-tests.svelte diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 360ac891..d4f75909 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -351,9 +351,9 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------- | :------- | -| -- | Yes | { props?: { role: "button"; type?: string; tabindex: string; disabled: boolean; href?: string; class: string; [key: string]: any; } } | -- | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------- | +| -- | Yes | { props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } } | -- | ### Events @@ -575,9 +575,9 @@ type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :------------------------------------------- | :------- | -| -- | Yes | { props?: { class: string; } } | -- | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :------------------------------------------------------------ | :------- | +| -- | Yes | {props: { class: string; [key: string]: any; }} | -- | ### Events @@ -645,7 +645,7 @@ None. | danger | let | No | boolean | false | Set to `true` to use the danger variant | | preventCloseOnClickOutside | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside | | containerClass | let | No | string | "" | Specify a class for the inner modal | -| selectorPrimaryFocus | let | No | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal | +| selectorPrimaryFocus | let | No | null | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal | ### Slots @@ -757,28 +757,48 @@ None. ### Types ```ts -interface Header { - key: string; - value: string; - display?: (item) => string; - sort?: (a, b) => number; - empty?: boolean; +type Key = string; + +type Value = any; + +interface EmptyHeader { + key: Key; + empty: boolean; + display?: (item: Value) => Value; + sort?: (a: Value, b: Value) => 0 | -1 | 1; columnMenu?: boolean; } -type Headers = Header[]; +interface NonEmptyHeader { + key: Key; + value: Value; + display?: (item: Value) => Value; + sort?: (a: Value, b: Value) => 0 | -1 | 1; + columnMenu?: boolean; +} + +type DataTableHeader = NonEmptyHeader | EmptyHeader; + +type Row = Record; + +type RowId = string; + +interface Cell { + key: Key; + value: Value; +} ``` ### Props | Prop name | Kind | Reactive | Type | Default value | Description | | :------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- | -| selectedRowIds | let | Yes | string[] | [] | Specify the row ids to be selected | +| selectedRowIds | let | Yes | RowId[] | [] | Specify the row ids to be selected | | selectable | let | Yes | boolean | false | Set to `true` for the selectable variant
Automatically set to `true` if `radio` or `batchSelection` are `true` | -| expandedRowIds | let | Yes | string[] | [] | Specify the row ids to be expanded | +| expandedRowIds | let | Yes | RowId[] | [] | Specify the row ids to be expanded | | expandable | let | Yes | boolean | false | Set to `true` for the expandable variant
Automatically set to `true` if `batchExpansion` is `true` | -| rows | let | Yes | Object[] | [] | Specify the rows the data table should render
keys defined in `headers` are used for the row ids | -| headers | let | No | Headers | [] | Specify the data table headers | +| rows | let | Yes | Row[] | [] | Specify the rows the data table should render
keys defined in `headers` are used for the row ids | +| headers | let | No | DataTableHeader[] | [] | Specify the data table headers | | size | let | No | "compact" | "short" | "tall" | -- | Set the size of the data table | | title | let | No | string | "" | Specify the title of the data table | | description | let | No | string | "" | Specify the description of the data table | @@ -791,25 +811,25 @@ type Headers = Header[]; ### Slots -| Slot name | Default | Props | Fallback | -| :----------- | :------ | :------------------------------------------- | :------------------------------------------------------------------------------ | -| -- | Yes | -- | -- | -| cell | No | { row: Object; cell: Object; } | {headers[j].display ? headers[j].display(cell.value) : cell.value} | -| cell-header | No | { header: Header} | {header.value} | -| expanded-row | No | { row: Object; } | -- | +| Slot name | Default | Props | Fallback | +| :----------- | :------ | :---------------------------------------- | :------------------------------------------------------------------------------ | +| -- | Yes | -- | -- | +| cell | No | { row: Row; cell: Cell; } | {headers[j].display ? headers[j].display(cell.value) : cell.value} | +| cell-header | No | { header: NonEmptyHeader; } | {header.value} | +| expanded-row | No | { row: Row; } | -- | ### Events -| Event name | Type | Detail | -| :------------------- | :--------- | :-------------------------------------------------------------------------------------------- | -| click | dispatched | { header?: Header; row?: Object; cell?: Object; } | -| click:header--expand | dispatched | { expanded: boolean; } | -| click:header | dispatched | { header: Header; sortDirection: "ascending" | "descending" | "none" } | -| click:row | dispatched | Object | -| mouseenter:row | dispatched | Object | -| mouseleave:row | dispatched | Object | -| click:row--expand | dispatched | { expanded: boolean; row: Object; } | -| click:cell | dispatched | Object | +| Event name | Type | Detail | +| :------------------- | :--------- | :----------------------------------------------------------------------------------------------------- | +| click | dispatched | { header?: DataTableHeader; row?: Row; cell?: Cell; } | +| click:header--expand | dispatched | { expanded: boolean; } | +| click:header | dispatched | { header: DataTableHeader; sortDirection: "ascending" | "descending" | "none" } | +| click:row | dispatched | Row | +| mouseenter:row | dispatched | Row | +| mouseleave:row | dispatched | Row | +| click:row--expand | dispatched | { expanded: boolean; row: Row; } | +| click:cell | dispatched | Cell | ## `DataTableSkeleton` @@ -844,7 +864,7 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | --------------------------------------------- | -| value | let | Yes | string | "" | Specify the date picker input value | +| value | let | Yes | number | string | "" | Specify the date picker input value | | datePickerType | let | No | "simple" | "single" | "range" | "simple" | Specify the date picker type | | appendTo | let | No | HTMLElement | -- | Specify the element to append the calendar to | | dateFormat | let | No | string | "m/d/Y" | Specify the date format | @@ -1334,9 +1354,9 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :------------------------------------------- | :------- | -| -- | Yes | { props?: { class: string; } } | -- | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :-------------------------------------------------------------- | :------- | +| -- | Yes | { props: { class: string; [key: string]: any; } } | -- | ### Events @@ -1606,10 +1626,10 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------- | -| render | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render
Icon size must be 16px (e.g. `Add16`, `Task16`) | -| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- | +| render | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | +| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | ### Slots @@ -2067,32 +2087,32 @@ interface MultiSelectItem { ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------------- | :--------------- | :------- | :----------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | -| open | let | Yes | boolean | false | Set to `true` to open the dropdown | -| value | let | Yes | string | "" | Specify the multiselect value | -| selectedIds | let | Yes | MultiSelectItemId[] | [] | Set the selected ids | -| items | let | Yes | MultiSelectItem[] | [] | Set the multiselect items | -| itemToString | let | No | (item: MultiSelectItem) => string | (item) => item.text || item.id | Override the display of a multiselect item | -| size | let | No | "sm" | "lg" | "xl" | -- | Set the size of the combobox | -| type | let | No | "default" | "inline" | "default" | Specify the type of multiselect | -| selectionFeedback | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items | -| disabled | let | No | boolean | false | Set to `true` to disable the dropdown | -| filterable | let | No | boolean | false | Set to `true` to filter items | -| filterItem | let | No | (item: MultiSelectItem, value: string) => string | (item, value) => item.text.toLowerCase().includes(value.toLowerCase()) | Override the filtering logic
The default filtering is an exact string comparison | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| locale | let | No | string | "en" | Specify the locale | -| placeholder | let | No | string | "" | Specify the placeholder text | -| sortItem | let | No | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem | (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logic
The default sorting compare the item text value | -| translateWithId | let | No | (id: any) => string | -- | Override the default translation ids | -| titleText | let | No | string | "" | Specify the title text | -| useTitleInItem | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | let | No | string | "" | Specify the invalid state text | -| helperText | let | No | string | "" | Specify the helper text | -| label | let | No | string | "" | Specify the list box label | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | -| name | let | No | string | -- | Specify a name attribute for the select | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | +| open | let | Yes | boolean | false | Set to `true` to open the dropdown | +| value | let | Yes | string | "" | Specify the multiselect value | +| selectedIds | let | Yes | MultiSelectItemId[] | [] | Set the selected ids | +| items | let | Yes | MultiSelectItem[] | [] | Set the multiselect items | +| itemToString | let | No | (item: MultiSelectItem) => string | (item) => item.text || item.id | Override the display of a multiselect item | +| size | let | No | "sm" | "lg" | "xl" | -- | Set the size of the combobox | +| type | let | No | "default" | "inline" | "default" | Specify the type of multiselect | +| selectionFeedback | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items | +| disabled | let | No | boolean | false | Set to `true` to disable the dropdown | +| filterable | let | No | boolean | false | Set to `true` to filter items | +| filterItem | let | No | (item: MultiSelectItem, value: string) => string | (item, value) => item.text.toLowerCase().includes(value.toLowerCase()) | Override the filtering logic
The default filtering is an exact string comparison | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| locale | let | No | string | "en" | Specify the locale | +| placeholder | let | No | string | "" | Specify the placeholder text | +| sortItem | let | No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) | (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logic
The default sorting compare the item text value | +| translateWithId | let | No | (id: any) => string | -- | Override the default translation ids | +| titleText | let | No | string | "" | Specify the title text | +| useTitleInItem | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | let | No | string | "" | Specify the invalid state text | +| helperText | let | No | string | "" | Specify the helper text | +| label | let | No | string | "" | Specify the list box label | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | +| name | let | No | string | -- | Specify a name attribute for the select | ### Slots @@ -2205,7 +2225,7 @@ type NumberInputTranslationId = "increment" | "decrement"; | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------- | | ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| value | let | Yes | string | "" | Specify the input value | +| value | let | Yes | number | string | "" | Specify the input value | | size | let | No | "sm" | "xl" | -- | Set the size of the input | | step | let | No | number | 1 | Specify the step increment | | max | let | No | number | -- | Specify the maximum value | @@ -2438,8 +2458,8 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :---------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- | | ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| type | let | Yes | string | "password" | Specify the input type | -| value | let | Yes | string | "" | Specify the input value | +| type | let | Yes | "text" | "password" | "password" | Set to `"text"` to toggle the password visibility | +| value | let | Yes | number | string | "" | Specify the input value | | size | let | No | "sm" | "xl" | -- | Set the size of the input | | placeholder | let | No | string | "" | Specify the placeholder text | | hidePasswordLabel | let | No | string | "Hide password" | Specify the hide password label text | @@ -2673,9 +2693,9 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :--------------------------------------------------------------- | :------- | -| -- | Yes | { props?: { class: string; [key: string]: any; } } | -- | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :-------------------------------------------------------------- | :------- | +| -- | Yes | { props: { class: string; [key: string]: any; } } | -- | ### Events @@ -2749,7 +2769,7 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :---------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | | ref | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element | -| selected | let | Yes | -- | -- | Specify the selected item value | +| selected | let | Yes | string | -- | Specify the selected item value | | size | let | No | "sm" | "xl" | -- | Set the size of the select input | | inline | let | No | boolean | false | Set to `true` to use the inline variant | | light | let | No | boolean | false | Set to `true` to enable the light variant | @@ -3633,7 +3653,7 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :---------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | --------------------------------------------- | | ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| value | let | Yes | string | "" | Specify the input value | +| value | let | Yes | number | string | "" | Specify the input value | | size | let | No | "sm" | "xl" | -- | Set the size of the input | | type | let | No | string | "" | Specify the input type | | placeholder | let | No | string | "" | Specify the placeholder text | @@ -3783,7 +3803,7 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | | ref | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element | -| value | let | Yes | string | "" | Specify the select value | +| value | let | Yes | number | string | "" | Specify the select value | | disabled | let | No | boolean | false | Set to `true` to disable the select | | iconDescription | let | No | string | "Open list of options" | Specify the ARIA label for the chevron icon | | labelText | let | No | string | "" | Specify the label text | @@ -4040,7 +4060,7 @@ None. | :--------- | :--------------- | :------- | :---------------------------------------- | ------------------ | --------------------------------------------- | | ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | expanded | let | Yes | boolean | false | Set to `true` to expand the search bar | -| value | let | Yes | string | "" | Specify the value of the search input | +| value | let | Yes | number | string | "" | Specify the value of the search input | | persistent | let | No | boolean | false | Set to `true` to keep the search bar expanded | | tabindex | let | No | string | "0" | Specify the tabindex | diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 49954efd..416f6d11 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -178,7 +178,11 @@ } ], "typedefs": [], - "rest_props": { "type": "InlineComponent", "name": "AccordionSkeleton" } + "rest_props": { "type": "InlineComponent", "name": "AccordionSkeleton" }, + "extends": { + "interface": "AccordionSkeletonProps", + "import": "\"./AccordionSkeleton\"" + } }, { "moduleName": "AccordionItem", @@ -349,7 +353,11 @@ } ], "typedefs": [], - "rest_props": { "type": "InlineComponent", "name": "BreadcrumbSkeleton" } + "rest_props": { "type": "InlineComponent", "name": "BreadcrumbSkeleton" }, + "extends": { + "interface": "BreadcrumbSkeletonProps", + "import": "\"./BreadcrumbSkeleton\"" + } }, { "moduleName": "Link", @@ -646,7 +654,7 @@ { "name": "__default__", "default": true, - "slot_props": "{ props?: { role: \"button\"; type?: string; tabindex: string; disabled: boolean; href?: string; class: string; [key: string]: any; } }" + "slot_props": "{ props: { role: \"button\"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }" } ], "events": [ @@ -668,7 +676,11 @@ } ], "typedefs": [], - "rest_props": { "type": "InlineComponent", "name": "ButtonSkeleton" } + "rest_props": { "type": "Element", "name": "button | a | div" }, + "extends": { + "interface": "ButtonSkeletonProps", + "import": "\"./ButtonSkeleton\"" + } }, { "moduleName": "ButtonSet", @@ -1031,7 +1043,8 @@ { "type": "forwarded", "name": "animationend", "element": "Copy" } ], "typedefs": [], - "rest_props": { "type": "InlineComponent", "name": "Copy" } + "rest_props": { "type": "InlineComponent", "name": "Copy" }, + "extends": { "interface": "CopyProps", "import": "\"../Copy/Copy\"" } }, { "moduleName": "ListBox", @@ -1654,7 +1667,7 @@ "name": "selectorPrimaryFocus", "kind": "let", "description": "Specify a selector to be focused when opening the modal", - "type": "string", + "type": "null | string", "value": "\"[data-modal-primary-focus]\"", "isFunction": false, "constant": false, @@ -2411,7 +2424,7 @@ "name": "headers", "kind": "let", "description": "Specify the data table headers", - "type": "Headers", + "type": "DataTableHeader[]", "value": "[]", "isFunction": false, "constant": false, @@ -2421,7 +2434,7 @@ "name": "rows", "kind": "let", "description": "Specify the rows the data table should render\nkeys defined in `headers` are used for the row ids", - "type": "Object[]", + "type": "Row[]", "value": "[]", "isFunction": false, "constant": false, @@ -2500,7 +2513,7 @@ "name": "expandedRowIds", "kind": "let", "description": "Specify the row ids to be expanded", - "type": "string[]", + "type": "RowId[]", "value": "[]", "isFunction": false, "constant": false, @@ -2540,7 +2553,7 @@ "name": "selectedRowIds", "kind": "let", "description": "Specify the row ids to be selected", - "type": "string[]", + "type": "RowId[]", "value": "[]", "isFunction": false, "constant": false, @@ -2563,25 +2576,25 @@ "name": "cell", "default": false, "fallback": "{headers[j].display ? headers[j].display(cell.value) : cell.value}", - "slot_props": "{ row: Object; cell: Object; }" + "slot_props": "{ row: Row; cell: Cell; }" }, { "name": "cell-header", "default": false, "fallback": "{header.value}", - "slot_props": "{ header: Header}" + "slot_props": "{ header: NonEmptyHeader; }" }, { "name": "expanded-row", "default": false, - "slot_props": "{ row: Object; }" + "slot_props": "{ row: Row; }" } ], "events": [ { "type": "dispatched", "name": "click", - "detail": "{ header?: Header; row?: Object; cell?: Object; }" + "detail": "{ header?: DataTableHeader; row?: Row; cell?: Cell; }" }, { "type": "dispatched", @@ -2591,28 +2604,46 @@ { "type": "dispatched", "name": "click:header", - "detail": "{ header: Header; sortDirection: \"ascending\" | \"descending\" | \"none\" }" + "detail": "{ header: DataTableHeader; sortDirection: \"ascending\" | \"descending\" | \"none\" }" }, - { "type": "dispatched", "name": "click:row", "detail": "Object" }, - { "type": "dispatched", "name": "mouseenter:row", "detail": "Object" }, - { "type": "dispatched", "name": "mouseleave:row", "detail": "Object" }, + { "type": "dispatched", "name": "click:row", "detail": "Row" }, + { "type": "dispatched", "name": "mouseenter:row", "detail": "Row" }, + { "type": "dispatched", "name": "mouseleave:row", "detail": "Row" }, { "type": "dispatched", "name": "click:row--expand", - "detail": "{ expanded: boolean; row: Object; }" + "detail": "{ expanded: boolean; row: Row; }" }, - { "type": "dispatched", "name": "click:cell", "detail": "Object" } + { "type": "dispatched", "name": "click:cell", "detail": "Cell" } ], "typedefs": [ + { "type": "string", "name": "Key", "ts": "type Key = string" }, + { "type": "any", "name": "Value", "ts": "type Value = any" }, { - "type": "{ key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }", - "name": "Header", - "ts": "interface Header { key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }" + "type": "{ key: Key; empty: boolean; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }", + "name": "EmptyHeader", + "ts": "interface EmptyHeader { key: Key; empty: boolean; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }" }, { - "type": "Header[]", - "name": "Headers", - "ts": "type Headers = Header[]" + "type": "{ key: Key; value: Value; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }", + "name": "NonEmptyHeader", + "ts": "interface NonEmptyHeader { key: Key; value: Value; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }" + }, + { + "type": "NonEmptyHeader | EmptyHeader", + "name": "DataTableHeader", + "ts": "type DataTableHeader = NonEmptyHeader | EmptyHeader" + }, + { + "type": "Record", + "name": "Row", + "ts": "type Row = Record" + }, + { "type": "string", "name": "RowId", "ts": "type RowId = string" }, + { + "type": "{ key: Key; value: Value; }", + "name": "Cell", + "ts": "interface Cell { key: Key; value: Value; }" } ], "rest_props": { "type": "InlineComponent", "name": "TableContainer" } @@ -2858,7 +2889,7 @@ "name": "value", "kind": "let", "description": "Specify the value of the search input", - "type": "string", + "type": "number | string", "value": "\"\"", "isFunction": false, "constant": false, @@ -3193,7 +3224,11 @@ "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "events": [], "typedefs": [], - "rest_props": { "type": "InlineComponent", "name": "OverflowMenu" } + "rest_props": { "type": "InlineComponent", "name": "OverflowMenu" }, + "extends": { + "interface": "OverflowMenuProps", + "import": "\"../OverflowMenu/OverflowMenu\"" + } }, { "moduleName": "ToolbarMenuItem", @@ -3209,7 +3244,11 @@ } ], "typedefs": [], - "rest_props": { "type": "InlineComponent", "name": "OverflowMenuItem" } + "rest_props": { "type": "InlineComponent", "name": "OverflowMenuItem" }, + "extends": { + "interface": "OverflowMenuItemProps", + "import": "\"../OverflowMenu/OverflowMenuItem\"" + } }, { "moduleName": "DataTableSkeleton", @@ -3313,7 +3352,7 @@ "name": "value", "kind": "let", "description": "Specify the date picker input value", - "type": "string", + "type": "number | string", "value": "\"\"", "isFunction": false, "constant": false, @@ -4600,11 +4639,12 @@ { "name": "__default__", "default": true, - "slot_props": "{ props?: { class: string; } }" + "slot_props": "{ props: { class: string; [key: string]: any; } }" } ], "events": [], - "typedefs": [] + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } }, { "moduleName": "Row", @@ -4675,11 +4715,12 @@ { "name": "__default__", "default": true, - "slot_props": "{ props?: { class: string; [key: string]: any; } }" + "slot_props": "{ props: { class: string; [key: string]: any; } }" } ], "events": [], - "typedefs": [] + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } }, { "moduleName": "Column", @@ -4784,7 +4825,7 @@ { "name": "__default__", "default": true, - "slot_props": "{ props?: { class: string; } }" + "slot_props": "{props: { class: string; [key: string]: any; }}" } ], "events": [], @@ -4804,7 +4845,8 @@ "name": "ColumnBreakpoint", "ts": "type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor" } - ] + ], + "rest_props": { "type": "Element", "name": "div" } }, { "moduleName": "IconSkeleton", @@ -4838,7 +4880,7 @@ { "name": "render", "kind": "let", - "description": "Specify the icon from `carbon-icons-svelte` to render\nIcon size must be 16px (e.g. `Add16`, `Task16`)", + "description": "Specify the icon from `carbon-icons-svelte` to render", "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "isFunction": false, "constant": false, @@ -4867,7 +4909,11 @@ { "type": "forwarded", "name": "mouseleave", "element": "IconSkeleton" } ], "typedefs": [], - "rest_props": { "type": "InlineComponent", "name": "IconSkeleton" } + "rest_props": { "type": "Element", "name": "svg" }, + "extends": { + "interface": "IconSkeletonProps", + "import": "\"./IconSkeleton\"" + } }, { "moduleName": "InlineLoading", @@ -5084,7 +5130,7 @@ "name": "sortItem", "kind": "let", "description": "Override the sorting logic\nThe default sorting compare the item text value", - "type": "(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem", + "type": "((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void)", "value": "(a, b) => a.text.localeCompare(b.text, locale, { numeric: true })", "isFunction": true, "constant": false, @@ -5823,7 +5869,7 @@ "name": "value", "kind": "let", "description": "Specify the input value", - "type": "string", + "type": "number | string", "value": "\"\"", "isFunction": false, "constant": false, @@ -6110,6 +6156,7 @@ "name": "selected", "kind": "let", "description": "Specify the selected item value", + "type": "string", "isFunction": false, "constant": false, "reactive": true @@ -7832,7 +7879,7 @@ "name": "value", "kind": "let", "description": "Specify the input value", - "type": "string", + "type": "number | string", "value": "\"\"", "isFunction": false, "constant": false, @@ -8055,7 +8102,7 @@ "name": "value", "kind": "let", "description": "Specify the input value", - "type": "string", + "type": "number | string", "value": "\"\"", "isFunction": false, "constant": false, @@ -8064,8 +8111,8 @@ { "name": "type", "kind": "let", - "description": "Specify the input type", - "type": "string", + "description": "Set to `\"text\"` to toggle the password visibility", + "type": "\"text\" | \"password\"", "value": "\"password\"", "isFunction": false, "constant": false, @@ -8820,7 +8867,7 @@ "name": "value", "kind": "let", "description": "Specify the select value", - "type": "string", + "type": "number | string", "value": "\"\"", "isFunction": false, "constant": false, diff --git a/docs/src/pages/components/SelectableTile.svx b/docs/src/pages/components/SelectableTile.svx index e5d0df31..01b41d16 100644 --- a/docs/src/pages/components/SelectableTile.svx +++ b/docs/src/pages/components/SelectableTile.svx @@ -1,9 +1,9 @@ --- -components: ["TileGroup", "SelectableTile"] +components: ["SelectableTile"] --- diff --git a/src/Accordion/Accordion.svelte b/src/Accordion/Accordion.svelte index 572e5733..ac6059a2 100644 --- a/src/Accordion/Accordion.svelte +++ b/src/Accordion/Accordion.svelte @@ -1,4 +1,6 @@ diff --git a/src/DataTable/ToolbarSearch.svelte b/src/DataTable/ToolbarSearch.svelte index 52f62256..a34b89b0 100644 --- a/src/DataTable/ToolbarSearch.svelte +++ b/src/DataTable/ToolbarSearch.svelte @@ -1,5 +1,8 @@ + + + +

+ Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +

+ + +

+ Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +

+ + +

+ Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +

+ + + + + +

+ Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +

+ + +

+ Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +

+ + +

+ Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +

+ + + + + +
+
Natural Language Classifier
+
AI / Machine Learning
+
+

+ Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +

+ + +
+
Natural Language Understanding
+
AI / Machine Learning
+
+

+ Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +

+ + +
+
Language Translator
+
AI / Machine Learning
+
+

+ Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +

+ + + + + +

+ Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +

+ + +

+ Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +

+ + +

+ Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +

+ + + + + +

+ Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +

+ + +

+ Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +

+ + +

+ Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +

+ + + + + +

+ Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +

+ + +

+ Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +

+ + +

+ Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +

+ + + + + +

+ Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +

+ + +

+ Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +

+ + +

+ Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +

+ + + + + +

+ Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +

+ + +

+ Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +

+ + +

+ Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +

+ + + + + + + + + + + + + + diff --git a/tests/AspectRatio.test.svelte b/tests/AspectRatio.test.svelte new file mode 100644 index 00000000..16a8e0d5 --- /dev/null +++ b/tests/AspectRatio.test.svelte @@ -0,0 +1,35 @@ + + + + 2x1 + + + + 16x9 + + + + 4x3 + + + + 1x1 + + + + 3x4 + + + + 9x16 + + + + 1x2 + + + + Content + diff --git a/tests/AspectRatioColumns.test.svelte b/tests/AspectRatioColumns.test.svelte new file mode 100644 index 00000000..b96aa28f --- /dev/null +++ b/tests/AspectRatioColumns.test.svelte @@ -0,0 +1,20 @@ + + + + + + 2x1 + + + 2x1 + + + diff --git a/tests/Breadcrumb.test.svelte b/tests/Breadcrumb.test.svelte new file mode 100644 index 00000000..3baab96e --- /dev/null +++ b/tests/Breadcrumb.test.svelte @@ -0,0 +1,16 @@ + + + + Dashboard + Annual reports + 2019 + + + + Home + Profile + + + diff --git a/tests/Breadcrumbs.test.svelte b/tests/Breadcrumbs.test.svelte new file mode 100644 index 00000000..dd996343 --- /dev/null +++ b/tests/Breadcrumbs.test.svelte @@ -0,0 +1,26 @@ + + + + + + {#each items as item, i} + + {item.text} + + {/each} + + + diff --git a/tests/Button.test.svelte b/tests/Button.test.svelte new file mode 100644 index 00000000..5778fcb2 --- /dev/null +++ b/tests/Button.test.svelte @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

This is a permanent action and cannot be undone.

+ diff --git a/tests/DataTable.test.svelte b/tests/DataTable.test.svelte new file mode 100644 index 00000000..d0733fe3 --- /dev/null +++ b/tests/DataTable.test.svelte @@ -0,0 +1,192 @@ + + + + + + + {#if header.key === 'port'} + {header.value} + (network) + {:else}{header.value}{/if} + + + {#if cell.key === 'rule' && cell.value === 'Round robin'} + + {cell.value} + + + {:else}{cell.value}{/if} + + + + + + + + + + + Restart all + + API documentation + + Stop all + + + + + + + + + + + + Restart all + + API documentation + + Stop all + + + + + + + + + + + + + + + + + + + +
+ 
+      {JSON.stringify(row, null, 2)}
+
+
+ + + +
+ 
+      {JSON.stringify(row, null, 2)}
+
+
+ + + + + + + + + + + + + diff --git a/tests/DataTableAppendColumns.test.svelte b/tests/DataTableAppendColumns.test.svelte new file mode 100644 index 00000000..0197ad78 --- /dev/null +++ b/tests/DataTableAppendColumns.test.svelte @@ -0,0 +1,34 @@ + + + + + {#if cell.key === 'overflow'} + + + + + + {:else}{cell.value}{/if} + + diff --git a/tests/DataTableBatchSelection.test.svelte b/tests/DataTableBatchSelection.test.svelte new file mode 100644 index 00000000..f10f8a6b --- /dev/null +++ b/tests/DataTableBatchSelection.test.svelte @@ -0,0 +1,29 @@ + + + diff --git a/tests/DataTableBatchSelectionToolbar.test.svelte b/tests/DataTableBatchSelectionToolbar.test.svelte new file mode 100644 index 00000000..197b372f --- /dev/null +++ b/tests/DataTableBatchSelectionToolbar.test.svelte @@ -0,0 +1,51 @@ + + + + + + + + + + + Restart all + + API documentation + + Stop all + + + + + diff --git a/tests/DatePicker.test.svelte b/tests/DatePicker.test.svelte new file mode 100644 index 00000000..bb6aebe5 --- /dev/null +++ b/tests/DatePicker.test.svelte @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tests/Dropdown.test.svelte b/tests/Dropdown.test.svelte new file mode 100644 index 00000000..609be35d --- /dev/null +++ b/tests/Dropdown.test.svelte @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + diff --git a/tests/DynamicCodeSnippet.test.svelte b/tests/DynamicCodeSnippet.test.svelte new file mode 100644 index 00000000..2860df97 --- /dev/null +++ b/tests/DynamicCodeSnippet.test.svelte @@ -0,0 +1,15 @@ + + + + diff --git a/tests/ExpandableTile.test.svelte b/tests/ExpandableTile.test.svelte new file mode 100644 index 00000000..a0353959 --- /dev/null +++ b/tests/ExpandableTile.test.svelte @@ -0,0 +1,18 @@ + + + +
Above the fold content here
+
Below the fold content here
+ + + +
Above the fold content here
+
Below the fold content here
+ + + +
Above the fold content here
+
Below the fold content here
+ diff --git a/tests/FileUploader.test.svelte b/tests/FileUploader.test.svelte new file mode 100644 index 00000000..65ef2649 --- /dev/null +++ b/tests/FileUploader.test.svelte @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + diff --git a/tests/FilterableComboBox.test.svelte b/tests/FilterableComboBox.test.svelte new file mode 100644 index 00000000..3fde3de7 --- /dev/null +++ b/tests/FilterableComboBox.test.svelte @@ -0,0 +1,15 @@ + + + diff --git a/tests/FluidForm.test.svelte b/tests/FluidForm.test.svelte new file mode 100644 index 00000000..f1c17dce --- /dev/null +++ b/tests/FluidForm.test.svelte @@ -0,0 +1,13 @@ + + + + + + diff --git a/tests/Form.test.svelte b/tests/Form.test.svelte new file mode 100644 index 00000000..ca988339 --- /dev/null +++ b/tests/Form.test.svelte @@ -0,0 +1,54 @@ + + +
+ + + + + + + + + + + + + + + + +
diff --git a/tests/FullWidthGrid.test.svelte b/tests/FullWidthGrid.test.svelte new file mode 100644 index 00000000..cfa70ce2 --- /dev/null +++ b/tests/FullWidthGrid.test.svelte @@ -0,0 +1,12 @@ + + + + + Column + Column + Column + Column + + diff --git a/tests/Grid.test.svelte b/tests/Grid.test.svelte new file mode 100644 index 00000000..7ffec15f --- /dev/null +++ b/tests/Grid.test.svelte @@ -0,0 +1,12 @@ + + + + + Column + Column + Column + Column + + diff --git a/tests/HeaderNav.test.svelte b/tests/HeaderNav.test.svelte new file mode 100644 index 00000000..c59d122e --- /dev/null +++ b/tests/HeaderNav.test.svelte @@ -0,0 +1,60 @@ + + +
+
+ +
+ + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + +

Welcome

+ + + + diff --git a/tests/HeaderSwitcher.test.svelte b/tests/HeaderSwitcher.test.svelte new file mode 100644 index 00000000..e996cfbf --- /dev/null +++ b/tests/HeaderSwitcher.test.svelte @@ -0,0 +1,66 @@ + + +
+
+ +
+ + + + Switcher subject 1 + Switcher item 1 + Switcher subject 2 + Switcher item 1 + Switcher item 2 + Switcher item 3 + Switcher item 4 + Switcher item 5 + + + +
+ + + + + + + + + + + + + + + + + + +

Welcome

+ + + + diff --git a/tests/HeaderUtilities.test.svelte b/tests/HeaderUtilities.test.svelte new file mode 100644 index 00000000..ed2eeef3 --- /dev/null +++ b/tests/HeaderUtilities.test.svelte @@ -0,0 +1,71 @@ + + +
+
+ +
+ + + + + + Switcher subject 1 + Switcher item 1 + Switcher subject 2 + Switcher item 1 + Switcher item 2 + Switcher item 3 + Switcher item 4 + Switcher item 5 + + + +
+ + + + + + + + + + + + + + + + + + +

Welcome

+ + + + diff --git a/tests/HiddenCodeSnippet.test.svelte b/tests/HiddenCodeSnippet.test.svelte new file mode 100644 index 00000000..3298f472 --- /dev/null +++ b/tests/HiddenCodeSnippet.test.svelte @@ -0,0 +1,34 @@ + + + + + + +{#if toggled} +
"Show more" will not render

+{/if} +
+ +
+ +{#if toggled} +

+
"Show more" will render

+
+ +
+{/if} diff --git a/tests/Icon.test.svelte b/tests/Icon.test.svelte new file mode 100644 index 00000000..a666056e --- /dev/null +++ b/tests/Icon.test.svelte @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + diff --git a/tests/InlineLoading.test.svelte b/tests/InlineLoading.test.svelte new file mode 100644 index 00000000..134fb679 --- /dev/null +++ b/tests/InlineLoading.test.svelte @@ -0,0 +1,15 @@ + + + + + + + + + + + + + diff --git a/tests/InlineLoadingUx.test.svelte b/tests/InlineLoadingUx.test.svelte new file mode 100644 index 00000000..c8443eed --- /dev/null +++ b/tests/InlineLoadingUx.test.svelte @@ -0,0 +1,52 @@ + + + + + {#if state !== 'dormant'} + + {:else} + + {/if} + diff --git a/tests/InlineNotification.test.svelte b/tests/InlineNotification.test.svelte new file mode 100644 index 00000000..74d884a1 --- /dev/null +++ b/tests/InlineNotification.test.svelte @@ -0,0 +1,43 @@ + + + + + + + +
+ Learn more +
+ + +Learn more + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tests/Link.test.svelte b/tests/Link.test.svelte new file mode 100644 index 00000000..1ebfe6d7 --- /dev/null +++ b/tests/Link.test.svelte @@ -0,0 +1,29 @@ + + +Carbon Design System + + + Carbon Design System + + + + Carbon Design System + + + + Carbon Design System + + + + Carbon Design System + + + + Carbon Design System + + + + Carbon Design System + diff --git a/tests/Loading.test.svelte b/tests/Loading.test.svelte new file mode 100644 index 00000000..6889445e --- /dev/null +++ b/tests/Loading.test.svelte @@ -0,0 +1,7 @@ + + + + + diff --git a/tests/Modal.test.svelte b/tests/Modal.test.svelte new file mode 100644 index 00000000..bb5b5d80 --- /dev/null +++ b/tests/Modal.test.svelte @@ -0,0 +1,20 @@ + + + + + +

Create a new Cloudant database in the US South region.

+ diff --git a/tests/ModalExtraSmall.test.svelte b/tests/ModalExtraSmall.test.svelte new file mode 100644 index 00000000..761c4dbf --- /dev/null +++ b/tests/ModalExtraSmall.test.svelte @@ -0,0 +1,17 @@ + + + +

Create a new Cloudant database in the US South region.

+ diff --git a/tests/ModalLarge.test.svelte b/tests/ModalLarge.test.svelte new file mode 100644 index 00000000..1b9474d9 --- /dev/null +++ b/tests/ModalLarge.test.svelte @@ -0,0 +1,17 @@ + + + +

Create a new Cloudant database in the US South region.

+ diff --git a/tests/ModalPreventOutsideClick.test.svelte b/tests/ModalPreventOutsideClick.test.svelte new file mode 100644 index 00000000..6bb89681 --- /dev/null +++ b/tests/ModalPreventOutsideClick.test.svelte @@ -0,0 +1,17 @@ + + + +

Create a new Cloudant database in the US South region.

+ diff --git a/tests/ModalSmall.test.svelte b/tests/ModalSmall.test.svelte new file mode 100644 index 00000000..7d4c935f --- /dev/null +++ b/tests/ModalSmall.test.svelte @@ -0,0 +1,17 @@ + + + +

Create a new Cloudant database in the US South region.

+ diff --git a/tests/MultiSelect.test.svelte b/tests/MultiSelect.test.svelte new file mode 100644 index 00000000..1e67f675 --- /dev/null +++ b/tests/MultiSelect.test.svelte @@ -0,0 +1,68 @@ + + + + + + + + + + + + + + + + + + + diff --git a/tests/NarrowGrid.test.svelte b/tests/NarrowGrid.test.svelte new file mode 100644 index 00000000..a39cd612 --- /dev/null +++ b/tests/NarrowGrid.test.svelte @@ -0,0 +1,12 @@ + + + + + Column + Column + Column + Column + + diff --git a/tests/NumberInput.test.svelte b/tests/NumberInput.test.svelte new file mode 100644 index 00000000..8d91a7af --- /dev/null +++ b/tests/NumberInput.test.svelte @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tests/OffsetColumns.test.svelte b/tests/OffsetColumns.test.svelte new file mode 100644 index 00000000..085ec706 --- /dev/null +++ b/tests/OffsetColumns.test.svelte @@ -0,0 +1,32 @@ + + + + + + Offset 3 + + + Offset 2 + + + Offset 1 + + + Offset 0 + + + diff --git a/tests/OrderedList.test.svelte b/tests/OrderedList.test.svelte new file mode 100644 index 00000000..46856519 --- /dev/null +++ b/tests/OrderedList.test.svelte @@ -0,0 +1,57 @@ + + + + Ordered list item + Ordered list item + Ordered list item + + + + + Ordered list item + + + Ordered list item + + + Ordered list item + + + + + + Ordered list level 1 + + Ordered list level 2 + + Ordered list level 3 + + Ordered list level 3 + Ordered list level 3 + + + + + Ordered list level 1 + Ordered list level 1 + + + + + Ordered list level 1 + + Ordered list level 2 + + Ordered list level 3 + + Ordered list level 3 + Ordered list level 3 + + + + + Ordered list level 1 + Ordered list level 1 + diff --git a/tests/OverflowMenu.test.svelte b/tests/OverflowMenu.test.svelte new file mode 100644 index 00000000..b728fb23 --- /dev/null +++ b/tests/OverflowMenu.test.svelte @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Custom trigger
+ + + + diff --git a/tests/Pagination.test.svelte b/tests/Pagination.test.svelte new file mode 100644 index 00000000..e56f2de9 --- /dev/null +++ b/tests/Pagination.test.svelte @@ -0,0 +1,15 @@ + + + + + + + + + + + + + diff --git a/tests/PaginationNav.test.svelte b/tests/PaginationNav.test.svelte new file mode 100644 index 00000000..a67c8552 --- /dev/null +++ b/tests/PaginationNav.test.svelte @@ -0,0 +1,7 @@ + + + + + diff --git a/tests/PassiveModal.test.svelte b/tests/PassiveModal.test.svelte new file mode 100644 index 00000000..2b122c29 --- /dev/null +++ b/tests/PassiveModal.test.svelte @@ -0,0 +1,14 @@ + + + + + +

+ IBM Cloudant is a distributed, secure database with global availability and + zero vendor lock-in used to build web and mobile apps at scale. +

+ diff --git a/tests/PasswordInput.test.svelte b/tests/PasswordInput.test.svelte new file mode 100644 index 00000000..6d9f5ce9 --- /dev/null +++ b/tests/PasswordInput.test.svelte @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + diff --git a/tests/PersistedHamburgerMenu.test.svelte b/tests/PersistedHamburgerMenu.test.svelte new file mode 100644 index 00000000..986f4b1d --- /dev/null +++ b/tests/PersistedHamburgerMenu.test.svelte @@ -0,0 +1,65 @@ + + +
+
+ +
+ + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + +

Welcome

+ + + + diff --git a/tests/ProgressIndicator.test.svelte b/tests/ProgressIndicator.test.svelte new file mode 100644 index 00000000..ccda25af --- /dev/null +++ b/tests/ProgressIndicator.test.svelte @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tests/RadioButton.test.svelte b/tests/RadioButton.test.svelte new file mode 100644 index 00000000..6f5e0fb0 --- /dev/null +++ b/tests/RadioButton.test.svelte @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tests/RadioSelectableDataTable.test.svelte b/tests/RadioSelectableDataTable.test.svelte new file mode 100644 index 00000000..07f60d72 --- /dev/null +++ b/tests/RadioSelectableDataTable.test.svelte @@ -0,0 +1,24 @@ + + + diff --git a/tests/RadioTile.test.svelte b/tests/RadioTile.test.svelte new file mode 100644 index 00000000..b04f3682 --- /dev/null +++ b/tests/RadioTile.test.svelte @@ -0,0 +1,15 @@ + + + + Lite plan + Standard plan + Plus plan + + + + Lite plan + Standard plan + Plus plan + diff --git a/tests/ResponsiveGrid.test.svelte b/tests/ResponsiveGrid.test.svelte new file mode 100644 index 00000000..b0b3c5b9 --- /dev/null +++ b/tests/ResponsiveGrid.test.svelte @@ -0,0 +1,40 @@ + + + + + + sm: 1, md: 4, lg: 8 + + + sm: 1, md: 2, lg: 2 + + + sm: 1, md: 1, lg: 1 + + + sm: 1, md: 1, lg: 1 + + + diff --git a/tests/Search.test.svelte b/tests/Search.test.svelte new file mode 100644 index 00000000..ac067dbb --- /dev/null +++ b/tests/Search.test.svelte @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + diff --git a/tests/Select.test.svelte b/tests/Select.test.svelte new file mode 100644 index 00000000..1874d478 --- /dev/null +++ b/tests/Select.test.svelte @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + diff --git a/tests/SelectableDataTable.test.svelte b/tests/SelectableDataTable.test.svelte new file mode 100644 index 00000000..953d133e --- /dev/null +++ b/tests/SelectableDataTable.test.svelte @@ -0,0 +1,24 @@ + + + diff --git a/tests/SelectableTile.test.svelte b/tests/SelectableTile.test.svelte new file mode 100644 index 00000000..a4aed03c --- /dev/null +++ b/tests/SelectableTile.test.svelte @@ -0,0 +1,15 @@ + + +Multi-select Tile + +Multi-select Tile + +Multi-select Tile + +Multi-select Tile + +Multi-select Tile + +Multi-select Tile diff --git a/tests/SkeletonPlaceholder.test.svelte b/tests/SkeletonPlaceholder.test.svelte new file mode 100644 index 00000000..aabd46a8 --- /dev/null +++ b/tests/SkeletonPlaceholder.test.svelte @@ -0,0 +1,7 @@ + + + + + diff --git a/tests/SkeletonText.test.svelte b/tests/SkeletonText.test.svelte new file mode 100644 index 00000000..90bb0252 --- /dev/null +++ b/tests/SkeletonText.test.svelte @@ -0,0 +1,15 @@ + + + + + + + + + + + + + diff --git a/tests/Slider.test.svelte b/tests/Slider.test.svelte new file mode 100644 index 00000000..c5f5b000 --- /dev/null +++ b/tests/Slider.test.svelte @@ -0,0 +1,36 @@ + + + + + + + + + + + + + diff --git a/tests/StructuredList.test.svelte b/tests/StructuredList.test.svelte new file mode 100644 index 00000000..73759606 --- /dev/null +++ b/tests/StructuredList.test.svelte @@ -0,0 +1,94 @@ + + + + + + Column A + Column B + Column C + + + + + Row 1 + Row 1 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, + finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel + euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a + porttitor interdum. + + + + Row 2 + Row 2 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, + finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel + euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a + porttitor interdum. + + + + Row 3 + Row 3 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, + finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel + euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a + porttitor interdum. + + + + + + + + + ColumnA + ColumnB + ColumnC + {''} + + + + {#each [1, 2, 3] as item} + + Row {item} + Row {item} + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + + + + + {/each} + + + + diff --git a/tests/Tabs.test.svelte b/tests/Tabs.test.svelte new file mode 100644 index 00000000..8f1f1b88 --- /dev/null +++ b/tests/Tabs.test.svelte @@ -0,0 +1,39 @@ + + + + + + +
+ Content 1 + Content 2 + Content 3 +
+ + +Content 1 + +Content 2 + +Content 3 + + + + + +
+ Content 1 + Content 2 + Content 3 +
+ + +Content 1 + +Content 2 + +Content 3 + + diff --git a/tests/Tag.test.svelte b/tests/Tag.test.svelte new file mode 100644 index 00000000..db53c202 --- /dev/null +++ b/tests/Tag.test.svelte @@ -0,0 +1,31 @@ + + +IBM Cloud + +red + +magenta + +purple + +blue + +cyan + +teal + +green + +gray + +cool-gray + +warm-gray + +high-contrast + +Filterable + + diff --git a/tests/TextArea.test.svelte b/tests/TextArea.test.svelte new file mode 100644 index 00000000..d40dd0b6 --- /dev/null +++ b/tests/TextArea.test.svelte @@ -0,0 +1,46 @@ + + +