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

Merge pull request #95 from metonym/refactor

Browse source 
refactor(components): make bound prop names consistent
This commit is contained in:
Eric Liu 2019-12-31 16:41:55 -08:00 • committed by GitHub
commit 42acce50d9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
109 changed files with 494 additions and 534 deletions
Download patch file Download diff file Expand all files Collapse all files

2
CONTRIBUTING.md
View file

@ -57,7 +57,7 @@ This project uses Storybook for UI development and "live" documentation.
Run the following command to start the Storybook:
```bash
yarn start -p 9090
yarn start
```
#### Component Format

3
README.md
View file

@ -96,7 +96,6 @@ Currently, the following components are supported:
- StructuredListCell
- StructuredListRow
- StructuredListInput
- StructuredListWrapper
- Tabs
- Tab
- TabContent
@ -112,8 +111,6 @@ Currently, the following components are supported:
- ClickableTile
- SelectableTile
- ExpandableTile
- TileAboveTheFoldContent
- TileBelowTheFoldContent
- RadioTile
- Tile
- TileGroup

2
docs/iframe.html
View file

@ -70,4 +70,4 @@
}</script><style>#root[hidden],
#docs-root[hidden] {
display: none !important;
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.548a6af97ccb098d1b95.bundle.js"></script><script src="vendors~main.548a6af97ccb098d1b95.bundle.js"></script><script src="main.548a6af97ccb098d1b95.bundle.js"></script></body></html>
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.977ebf979d865a2cb35d.bundle.js"></script><script src="vendors~main.977ebf979d865a2cb35d.bundle.js"></script><script src="main.977ebf979d865a2cb35d.bundle.js"></script></body></html>

2
docs/main.548a6af97ccb098d1b95.bundle.js
View file

File diff suppressed because one or more lines are too long

1
docs/main.548a6af97ccb098d1b95.bundle.js.map
View file

@ -1 +0,0 @@
{"version":3,"file":"main.548a6af97ccb098d1b95.bundle.js","sources":["webpack:///main.548a6af97ccb098d1b95.bundle.js"],"mappings":"AAAA","sourceRoot":""}

2
docs/main.977ebf979d865a2cb35d.bundle.js Normal file
View file

File diff suppressed because one or more lines are too long

1
docs/main.977ebf979d865a2cb35d.bundle.js.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"main.977ebf979d865a2cb35d.bundle.js","sources":["webpack:///main.977ebf979d865a2cb35d.bundle.js"],"mappings":"AAAA","sourceRoot":""}

1
docs/runtime~main.548a6af97ccb098d1b95.bundle.js.map
View file

@ -1 +0,0 @@
{"version":3,"file":"runtime~main.548a6af97ccb098d1b95.bundle.js","sources":["webpack:///runtime~main.548a6af97ccb098d1b95.bundle.js"],"mappings":"AAAA","sourceRoot":""}

2
docs/runtime~main.548a6af97ccb098d1b95.bundle.js → docs/runtime~main.977ebf979d865a2cb35d.bundle.js
View file

@ -1,2 +1,2 @@
!function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={1:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="";var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]);
//# sourceMappingURL=runtime~main.548a6af97ccb098d1b95.bundle.js.map
//# sourceMappingURL=runtime~main.977ebf979d865a2cb35d.bundle.js.map

1
docs/runtime~main.977ebf979d865a2cb35d.bundle.js.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"runtime~main.977ebf979d865a2cb35d.bundle.js","sources":["webpack:///runtime~main.977ebf979d865a2cb35d.bundle.js"],"mappings":"AAAA","sourceRoot":""}

1
docs/vendors~main.548a6af97ccb098d1b95.bundle.js.map
View file

@ -1 +0,0 @@
{"version":3,"file":"vendors~main.548a6af97ccb098d1b95.bundle.js","sources":["webpack:///vendors~main.548a6af97ccb098d1b95.bundle.js"],"mappings":"AAAA;;;;;;;;;;;;;;AAg4PA;;;;;AAq/XA;;AAu8BA;;;;;;;;;;;;;;AAmBA;;;;;AA6gPA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAmdA;;;;;;;AAfA","sourceRoot":""}

26
docs/vendors~main.548a6af97ccb098d1b95.bundle.js → docs/vendors~main.977ebf979d865a2cb35d.bundle.js
View file

File diff suppressed because one or more lines are too long

1
docs/vendors~main.977ebf979d865a2cb35d.bundle.js.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"vendors~main.977ebf979d865a2cb35d.bundle.js","sources":["webpack:///vendors~main.977ebf979d865a2cb35d.bundle.js"],"mappings":"AAAA;;;;;;;;;;;;;;AAk4PA;;;;;AAq/XA;;AAu8BA;;;;;;;;;;;;;;AAmBA;;;;;AA6gPA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAodA;;;;;;;AAfA","sourceRoot":""}

2
package.json
View file

@ -7,7 +7,7 @@
"main": "lib/index.js",
"module": "lib/index.mjs",
"scripts": {
"start": "start-storybook",
"start": "start-storybook -p 9090",
"build": "rollup -c",
"build:storybook": "build-storybook -o docs",
"test": "jest --coverage",

2
src/components/Accordion/Accordion.Skeleton.svelte
View file

@ -1,8 +1,8 @@
<script>
let className = undefined;
export { className as class };
export let open = true;
export let count = 4;
export let open = true;
export let style = undefined;
import ChevronRight16 from 'carbon-icons-svelte/lib/ChevronRight16';

2
src/components/Accordion/AccordionItem.svelte
View file

@ -1,10 +1,10 @@
<script>
let className = undefined;
export { className as class };
export let title = undefined;
export let iconDescription = 'Expand/Collapse';
export let open = false;
export let style = undefined;
export let title = undefined;
import ChevronRight16 from 'carbon-icons-svelte/lib/ChevronRight16';
import { cx } from '../../lib';

2
src/components/Button/Button.Skeleton.svelte
View file

@ -1,8 +1,8 @@
<script>
let className = undefined;
export { className as class };
export let small = false;
export let href = undefined;
export let small = false;
export let style = undefined;
import { cx } from '../../lib';

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

@ -3,16 +3,16 @@
export { className as class };
export let as = undefined;
export let disabled = false;
export let size = 'default';
export let kind = 'primary';
export let href = undefined;
export let tabindex = '0';
export let type = 'button';
export let icon = undefined;
export let iconDescription = undefined;
export let tooltipPosition = undefined;
export let tooltipAlignment = undefined;
export let kind = 'primary';
export let size = 'default';
export let style = undefined;
export let tabindex = '0';
export let tooltipAlignment = undefined;
export let tooltipPosition = undefined;
export let type = 'button';
import { getContext } from 'svelte';
import { cx } from '../../lib';

6
src/components/Checkbox/Checkbox.svelte
View file

@ -2,15 +2,15 @@
let className = undefined;
export { className as class };
export let checked = false;
export let indeterminate = false;
export let disabled = false;
export let hideLabel = false;
export let id = Math.random();
export let indeterminate = false;
export let labelText = '';
export let name = '';
export let readonly = false;
export let hideLabel = false;
export let title = '';
export let style = undefined;
export let title = '';
import { createEventDispatcher } from 'svelte';
import { cx } from '../../lib';

2
src/components/CodeSnippet/CodeSnippet.Skeleton.svelte
View file

@ -1,8 +1,8 @@
<script>
let className = undefined;
export { className as class };
export let type = 'single';
export let style = undefined;
export let type = 'single';
import { cx } from '../../lib';
</script>

10
src/components/CodeSnippet/CodeSnippet.svelte
View file

@ -1,15 +1,15 @@
<script>
let className = undefined;
export { className as class };
export let type = 'single';
export let feedback = undefined;
export let feedbackTimeout = undefined;
export let copyButtonDescription = undefined;
export let copyLabel = undefined;
export let showMoreText = 'Show more';
export let showLessText = 'Show less';
export let feedback = undefined;
export let feedbackTimeout = undefined;
export let light = false;
export let showLessText = 'Show less';
export let showMoreText = 'Show more';
export let style = undefined;
export let type = 'single';
import { afterUpdate } from 'svelte';
import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';

24
src/components/ComboBox/ComboBox.svelte
View file

@ -1,23 +1,23 @@
<script>
let className = undefined;
export { className as class };
export let id = Math.random();
export let titleText = '';
export let helperText = '';
export let disabled = false;
export let value = '';
export let open = false;
export let selectedIndex = -1;
export let items = [];
export let itemToString = item => item.text || item.id;
export let placeholder = '';
export let shouldFilterItem = () => true;
export let helperText = '';
export let id = Math.random();
export let invalid = false;
export let invalidText = '';
export let translateWithId = undefined;
export let size = undefined;
export let items = [];
export let itemToString = item => item.text || item.id;
export let light = false;
export let open = false;
export let placeholder = '';
export let selectedIndex = -1;
export let shouldFilterItem = () => true;
export let size = undefined;
export let style = undefined;
export let titleText = '';
export let translateWithId = undefined;
export let value = '';
import { afterUpdate } from 'svelte';
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';

2
src/components/ComposedModal/ComposedModal.svelte
View file

@ -2,8 +2,8 @@
let className = undefined;
export { className as class };
export let containerClass = undefined;
export let open = false;
export let danger = false;
export let open = false;
export let selectorPrimaryFocus = '[data-modal-primary-focus]';
export let size = undefined;
export let style = undefined;

1
src/components/ContentSwitcher/ContentSwitcher.svelte
View file

@ -9,6 +9,7 @@
import { cx } from '../../lib';
const dispatch = createEventDispatcher();
let currentId = writable(null);
let currentIndex = selectedIndex;
let switches = [];

2
src/components/CopyButton/CopyButton.svelte
View file

@ -1,9 +1,9 @@
<script>
let className = undefined;
export { className as class };
export let iconDescription = 'Copy to clipboard';
export let feedback = 'Copied!';
export let feedbackTimeout = 2000;
export let iconDescription = 'Copy to clipboard';
export let style = undefined;
import { afterUpdate, onDestroy } from 'svelte';

4
src/components/DataTableSkeleton/DataTableSkeleton.svelte
View file

@ -1,12 +1,12 @@
<script>
let className = undefined;
export { className as class };
export let zebra = false;
export let columns = 5;
export let compact = false;
export let headers = [];
export let rows = 5;
export let columns = 5;
export let style = undefined;
export let zebra = false;
import { cx, fillArray } from '../../lib';

2
src/components/DatePicker/DatePicker.Story.svelte
View file

@ -3,8 +3,8 @@
import Layout from '../../internal/ui/Layout.svelte';
import DatePicker from './DatePicker.svelte';
import DatePickerSkeleton from './DatePicker.Skeleton.svelte';
import DatePickerInput from './DatePickerInput.svelte';
import DatePickerSkeleton from './DatePicker.Skeleton.svelte';
let datePickerType = 'simple';
let value = '';

18
src/components/DatePicker/DatePicker.svelte
View file

@ -1,21 +1,21 @@
<script>
let className = undefined;
export { className as class };
export let id = Math.random();
export let short = false;
export let datePickerType = 'simple';
export let dateFormat = 'm/d/Y';
export let locale = 'en';
export let value = '';
export let appendTo = document.body;
export let minDate = null;
export let maxDate = null;
export let dateFormat = 'm/d/Y';
export let datePickerType = 'simple';
export let id = Math.random();
export let light = false;
export let locale = 'en';
export let maxDate = null;
export let minDate = null;
export let short = false;
export let style = undefined;
export let value = '';
import { createEventDispatcher, setContext, afterUpdate, onDestroy } from 'svelte';
import { writable, derived } from 'svelte/store';
import { createCalendar } from './flatpickr';
import { createCalendar } from './createCalendar';
import { cx } from '../../lib';
const dispatch = createEventDispatcher();

14
src/components/DatePicker/DatePickerInput.svelte
View file

@ -1,17 +1,17 @@
<script>
let className = undefined;
export { className as class };
export let id = Math.random();
export let iconDescription = '';
export let labelText = '';
export let hideLabel = false;
export let pattern = '\\d{1,2}\\/\\d{1,2}\\/\\d{4}';
export let type = 'text';
export let placeholder = '';
export let disabled = false;
export let hideLabel = false;
export let iconDescription = '';
export let id = Math.random();
export let invalid = false;
export let invalidText = '';
export let labelText = '';
export let pattern = '\\d{1,2}\\/\\d{1,2}\\/\\d{4}';
export let placeholder = '';
export let style = undefined;
export let type = 'text';
import { getContext, onMount } from 'svelte';
import Calendar16 from 'carbon-icons-svelte/lib/Calendar16';

0
src/components/DatePicker/flatpickr.js → src/components/DatePicker/createCalendar.js
View file

2
src/components/FileUploader/FileUploader.Skeleton.svelte
View file

@ -4,8 +4,8 @@
export let style = undefined;
import { cx } from '../../lib';
import SkeletonText from '../SkeletonText';
import { ButtonSkeleton } from '../Button';
import SkeletonText from '../SkeletonText';
</script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>

2
src/components/FileUploader/FileUploader.Story.svelte
View file

@ -6,8 +6,8 @@
import Button from '../Button';
import FileUploader from './FileUploader.svelte';
import FileUploaderButton from './FileUploaderButton.svelte';
import FileUploaderItem from './FileUploaderItem.svelte';
import FileUploaderDropContainer from './FileUploaderDropContainer.svelte';
import FileUploaderItem from './FileUploaderItem.svelte';
import FileUploaderSkeleton from './FileUploader.Skeleton.svelte';
let fileUploader = undefined;

14
src/components/FileUploader/FileUploader.svelte
View file

@ -1,17 +1,17 @@
<script>
let className = undefined;
export { className as class };
export let files = [];
export const clearFiles = () => (files = []);
export let name = '';
export let accept = [];
export let buttonLabel = '';
export let files = [];
export let iconDescription = 'Provide icon description';
export let kind = 'primary';
export let labelDescription = '';
export let labelTitle = '';
export let iconDescription = 'Provide icon description';
export let status = 'uploading';
export let buttonLabel = '';
export let kind = 'primary';
export let multiple = false;
export let accept = [];
export let name = '';
export let status = 'uploading';
export let style = undefined;
import { createEventDispatcher, afterUpdate } from 'svelte';

8
src/components/FileUploader/FileUploaderButton.svelte
View file

@ -1,17 +1,17 @@
<script>
let className = undefined;
export { className as class };
export let accept = [];
export let disabled = false;
export let disableLabelChanges = false;
export let id = Math.random();
export let kind = 'primary';
export let labelText = 'Add file';
export let multiple = false;
export let name = '';
export let role = 'button';
export let tabindex = '0';
export let kind = 'primary';
export let accept = [];
export let disabled = false;
export let style = undefined;
export let tabindex = '0';
import { cx } from '../../lib';

12
src/components/FileUploader/FileUploaderDropContainer.svelte
View file

@ -1,16 +1,16 @@
<script>
let className = undefined;
export { className as class };
export let name = '';
export let role = 'button';
export let id = Math.random();
export let accept = [];
export let disabled = false;
export let tabindex = '0';
export let id = Math.random();
export let labelText = 'Add file';
export let multiple = false;
export let accept = [];
export let validateFiles = files => files;
export let name = '';
export let role = 'button';
export let style = undefined;
export let tabindex = '0';
export let validateFiles = files => files;
import { createEventDispatcher } from 'svelte';
import { cx } from '../../lib';

12
src/components/FileUploader/FileUploaderItem.svelte
View file

@ -1,13 +1,13 @@
<script>
let className = undefined;
export { className as class };
export let id = Math.random();
export let status = 'uploading';
export let iconDescription = '';
export let name = '';
export let invalid = false;
export let errorSubject = '';
export let errorBody = '';
export let errorSubject = '';
export let iconDescription = '';
export let id = Math.random();
export let invalid = false;
export let name = '';
export let status = 'uploading';
export let style = undefined;
import { createEventDispatcher } from 'svelte';

4
src/components/FileUploader/Filename.svelte
View file

@ -1,11 +1,11 @@
<script>
let className = undefined;
export { className as class };
export let status = 'uploading';
export let iconDescription = '';
export let invalid = false;
export let tabindex = '0';
export let status = 'uploading';
export let style = undefined;
export let tabindex = '0';
import Close16 from 'carbon-icons-svelte/lib/Close16';
import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';

2
src/components/FormGroup/FormGroup.svelte
View file

@ -1,8 +1,8 @@
<script>
let className = undefined;
export { className as class };
export let legendText = '';
export let invalid = false;
export let legendText = '';
export let message = false;
export let messageText = '';
export let style = undefined;

8
src/components/Icon/Icon.svelte
View file

@ -1,12 +1,12 @@
<script>
let className = undefined;
export { className as class };
export let skeleton = false;
export let render = undefined;
export let title = undefined;
export let tabindex = undefined;
export let focusable = false;
export let render = undefined;
export let skeleton = false;
export let style = undefined;
export let tabindex = undefined;
export let title = undefined;
import IconSkeleton from './Icon.Skeleton.svelte';

4
src/components/InlineLoading/InlineLoading.svelte
View file

@ -1,11 +1,11 @@
<script>
let className = undefined;
export { className as class };
export let status = 'active';
export let description = undefined;
export let iconDescription = undefined;
export let successDelay = 1500;
export let status = 'active';
export let style = undefined;
export let successDelay = 1500;
import { createEventDispatcher, afterUpdate, onDestroy } from 'svelte';
import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';

2
src/components/Link/Link.svelte
View file

@ -1,8 +1,8 @@
<script>
let className = undefined;
export { className as class };
export let href = undefined;
export let disabled = false;
export let href = undefined;
export let inline = false;
export let style = undefined;

8
src/components/ListBox/ListBox.svelte
View file

@ -1,15 +1,15 @@
<script>
let className = undefined;
export { className as class };
export let id = Math.random();
export let size = undefined;
export let type = 'default';
export let disabled = false;
export let id = Math.random();
export let invalid = false;
export let invalidText = '';
export let open = false;
export let light = false;
export let open = false;
export let size = undefined;
export let style = undefined;
export let type = 'default';
import { cx } from '../../lib';
</script>

10
src/components/ListBox/ListBoxField.svelte
View file

@ -1,13 +1,13 @@
<script>
let className = undefined;
export { className as class };
export let id = Math.random();
export let tabindex = '-1';
export let role = 'combobox';
export let disabled = false;
export const translationIds = { close: 'close', open: 'open' };
export let translateWithId = id => defaultTranslations[id];
export let disabled = false;
export let id = Math.random();
export let role = 'combobox';
export let style = undefined;
export let tabindex = '-1';
export let translateWithId = id => defaultTranslations[id];
import { getContext } from 'svelte';
import { cx } from '../../lib';

4
src/components/ListBox/ListBoxMenuIcon.svelte
View file

@ -1,10 +1,10 @@
<script>
let className = undefined;
export { className as class };
export let open = false;
export const translationIds = { close: 'close', open: 'open' };
export let translateWithId = id => defaultTranslations[id];
export let open = false;
export let style = undefined;
export let translateWithId = id => defaultTranslations[id];
import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
import { cx } from '../../lib';

4
src/components/ListBox/ListBoxSelection.svelte
View file

@ -1,11 +1,11 @@
<script>
let className = undefined;
export { className as class };
export const translationIds = { clearAll: 'clearAll', clearSelection: 'clearSelection' };
export let disabled = false;
export let selectionCount = undefined;
export const translationIds = { clearAll: 'clearAll', clearSelection: 'clearSelection' };
export let translateWithId = id => defaultTranslations[id];
export let style = undefined;
export let translateWithId = id => defaultTranslations[id];
import { createEventDispatcher, getContext } from 'svelte';
import Close16 from 'carbon-icons-svelte/lib/Close16';

4
src/components/Loading/Loading.svelte
View file

@ -2,10 +2,10 @@
let className = undefined;
export { className as class };
export let active = true;
export let withOverlay = true;
export let small = false;
export let description = 'Active loading indicator';
export let small = false;
export let style = undefined;
export let withOverlay = true;
import { cx } from '../../lib';

12
src/components/Modal/Modal.svelte
View file

@ -1,21 +1,21 @@
<script>
let className = undefined;
export { className as class };
export let passiveModal = false;
export let danger = false;
export let hasForm = false;
export let hasScrollingContent = false;
export let iconDescription = 'Close the modal';
export let id = Math.random();
export let modalAriaLabel = undefined;
export let modalHeading = undefined;
export let modalLabel = undefined;
export let modalAriaLabel = undefined;
export let open = false;
export let iconDescription = 'Close the modal';
export let passiveModal = false;
export let primaryButtonDisabled = false;
export let primaryButtonText = '';
export let secondaryButtonText = '';
export let danger = false;
export let shouldSubmitOnEnter = true;
export let hasScrollingContent = false;
export let selectorPrimaryFocus = '[data-modal-primary-focus]';
export let shouldSubmitOnEnter = true;
export let size = undefined;
export let style = undefined;

34
src/components/MultiSelect/MultiSelect.svelte
View file

@ -1,30 +1,30 @@
<script>
let className = undefined;
export { className as class };
export let id = Math.random();
export let titleText = '';
export let helperText = '';
export let disabled = false;
export let value = '';
export let open = false;
export let selectedIds = [];
export let items = [];
export let itemToString = item => item.text || item.id;
export let placeholder = '';
export let filterable = false;
export let filterItem = (item, value) => item.text.toLowerCase().includes(value.toLowerCase());
export let helperText = '';
export let id = Math.random();
export let invalid = false;
export let invalidText = '';
export let translateWithId = undefined;
export let size = undefined;
export let type = 'default';
export let locale = 'en';
export let sortItem = (a, b) => a.text.localeCompare(b.text, locale, { numeric: true });
export let filterItem = (item, value) => item.text.toLowerCase().includes(value.toLowerCase());
export let items = [];
export let itemToString = item => item.text || item.id;
export let label = '';
export let useTitleInItem = false;
export let selectionFeedback = 'top-after-reopen';
export let light = false;
export let locale = 'en';
export let open = false;
export let placeholder = '';
export let selectedIds = [];
export let selectionFeedback = 'top-after-reopen';
export let size = undefined;
export let sortItem = (a, b) => a.text.localeCompare(b.text, locale, { numeric: true });
export let style = undefined;
export let titleText = '';
export let translateWithId = undefined;
export let type = 'default';
export let useTitleInItem = false;
export let value = '';
import { afterUpdate, setContext } from 'svelte';
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';

12
src/components/Notification/InlineNotification.svelte
View file

@ -1,15 +1,15 @@
<script>
let className = undefined;
export { className as class };
export let kind = 'error';
export let title = 'provide a title';
export let subtitle = ''; // TODO: support subtitle slot?
export let role = 'alert';
export let notificationType = 'inline';
export let iconDescription = 'closes notification';
export let hideCloseButton = false;
export let iconDescription = 'closes notification';
export let kind = 'error';
export let lowContrast = false;
export let notificationType = 'inline';
export let role = 'alert';
export let style = undefined;
export let subtitle = ''; // TODO: support subtitle slot?
export let title = 'provide a title';
import { createEventDispatcher } from 'svelte';
import NotificationIcon from './NotificationIcon.svelte';

2
src/components/Notification/Notification.Story.svelte
View file

@ -3,8 +3,8 @@
import Layout from '../../internal/ui/Layout.svelte';
import InlineNotification from './InlineNotification.svelte';
import ToastNotification from './ToastNotification.svelte';
import NotificationActionButton from './NotificationActionButton.svelte';
import ToastNotification from './ToastNotification.svelte';
</script>
<Layout>

2
src/components/Notification/NotificationActionButton.svelte
View file

@ -3,8 +3,8 @@
export { className as class };
export let style = undefined;
import Button from '../Button';
import { cx } from '../../lib';
import Button from '../Button';
</script>
<Button

6
src/components/Notification/NotificationButton.svelte
View file

@ -1,12 +1,12 @@
<script>
let className = undefined;
export { className as class };
export let notificationType = 'toast';
export let type = 'button';
export let iconDescription = 'close icon';
export let notificationType = 'toast';
export let renderIcon = Close20;
export let title = undefined;
export let style = undefined;
export let title = undefined;
export let type = 'button';
import Close20 from 'carbon-icons-svelte/lib/Close20';
import { cx } from '../../lib';

2
src/components/Notification/NotificationIcon.svelte
View file

@ -3,8 +3,8 @@
export let notificationType = 'toast';
export let iconDescription = 'closes notification';
import ErrorFilled20 from 'carbon-icons-svelte/lib/ErrorFilled20';
import CheckmarkFilled20 from 'carbon-icons-svelte/lib/CheckmarkFilled20';
import ErrorFilled20 from 'carbon-icons-svelte/lib/ErrorFilled20';
import WarningFilled20 from 'carbon-icons-svelte/lib/WarningFilled20';
import { cx } from '../../lib';

4
src/components/Notification/NotificationTextDetails.svelte
View file

@ -1,8 +1,8 @@
<script>
export let title = 'title';
export let subtitle = '';
export let caption = 'caption';
export let notificationType = 'toast';
export let subtitle = '';
export let title = 'title';
import { cx } from '../../lib';
</script>

16
src/components/Notification/ToastNotification.svelte
View file

@ -1,22 +1,22 @@
<script>
let className = undefined;
export { className as class };
export let kind = 'error';
export let title = 'provide a title';
export let subtitle = ''; // TODO: support subtitle slot?
export let caption = 'provide a caption';
export let role = 'alert';
export let notificationType = 'toast';
export let iconDescription = 'closes notification';
export let hideCloseButton = false;
export let iconDescription = 'closes notification';
export let kind = 'error';
export let lowContrast = false;
export let timeout = 0;
export let notificationType = 'toast';
export let role = 'alert';
export let style = undefined;
export let subtitle = ''; // TODO: support subtitle slot?
export let timeout = 0;
export let title = 'provide a title';
import { createEventDispatcher, onMount } from 'svelte';
import NotificationButton from './NotificationButton.svelte';
import NotificationIcon from './NotificationIcon.svelte';
import NotificationTextDetails from './NotificationTextDetails.svelte';
import NotificationButton from './NotificationButton.svelte';
import { cx } from '../../lib';
const dispatch = createEventDispatcher();

2
src/components/NumberInput/NumberInput.stories.js
View file

@ -16,7 +16,7 @@ export const Default = () => ({
disabled: boolean('Disabled (disabled)', false),
readonly: boolean('Read only (readonly)', false),
invalid: boolean('Show form validation UI (invalid)', false),
isMobile: boolean('Mobile variant', false),
mobile: boolean('Mobile variant (mobile)', false),
invalidText: text('Form validation UI content (invalidText)', 'Number is not valid'),
helperText: text('Helper text (helperText)', 'Optional helper text.'),
light: boolean('Light variant (light)', false)

28
src/components/NumberInput/NumberInput.svelte
View file

@ -1,30 +1,30 @@
<script>
let className = undefined;
export { className as class };
export const translationIds = { increment: 'increment', decrement: 'decrement' };
export let allowEmpty = false;
export let disabled = false;
export let helperText = '';
export let hideLabel = false;
export let iconDescription = '';
export let id = Math.random();
export let label = '';
export let max = undefined;
export let min = undefined;
export let step = 1;
export let value = '';
export let readonly = false;
export let invalid = false;
export let invalidText = 'Provide invalidText';
export let helperText = '';
export let mobile = false;
export let label = '';
export let light = false;
export let allowEmpty = false;
export let isMobile = false;
export const translationIds = { increment: 'increment', decrement: 'decrement' };
export let translateWithId = id => defaultTranslations[id];
export let max = undefined;
export let min = undefined;
export let readonly = false;
export let step = 1;
export let style = undefined;
export let translateWithId = id => defaultTranslations[id];
export let value = '';
import { createEventDispatcher, afterUpdate } from 'svelte';
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
import CaretDownGlyph from 'carbon-icons-svelte/lib/CaretDownGlyph';
import CaretUpGlyph from 'carbon-icons-svelte/lib/CaretUpGlyph';
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
import { cx } from '../../lib';
const defaultTranslations = {
@ -62,8 +62,8 @@
<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
<div
data-invalid={error || undefined}
class={cx('--number', '--number--helpertext', readonly && '--number--readonly', light && '--number--light', hideLabel && '--number--nolabel', isMobile && '--number--mobile')}>
{#if isMobile}
class={cx('--number', '--number--helpertext', readonly && '--number--readonly', light && '--number--light', hideLabel && '--number--nolabel', mobile && '--number--mobile')}>
{#if mobile}
{#if label}
<label class={cx('--label', hideLabel && '--visually-hidden')} for={id}>
<slot name="label">{label}</slot>

10
src/components/OverflowMenu/OverflowMenu.svelte
View file

@ -1,17 +1,17 @@
<script>
let className = undefined;
export { className as class };
export let open = false;
export let direction = 'bottom';
export let flipped = false;
export let tabindex = '0';
export let id = Math.random();
export let iconDescription = 'Open and close list of options';
export let iconClass = undefined;
export let icon = OverflowMenuVertical16;
export let iconClass = undefined;
export let iconDescription = 'Open and close list of options';
export let id = Math.random();
export let light = false;
export let menuOptionsClass = undefined;
export let open = false;
export let style = undefined;
export let tabindex = '0';
import { createEventDispatcher, setContext, afterUpdate } from 'svelte';
import { writable } from 'svelte/store';

6
src/components/OverflowMenu/OverflowMenuItem.svelte
View file

@ -1,14 +1,14 @@
<script>
let className = undefined;
export { className as class };
export let text = 'Provide text';
export let href = '';
export let hasDivider = false;
export let danger = false;
export let disabled = false;
export let hasDivider = false;
export let href = '';
export let primaryFocus = false;
export let requireTitle = true;
export let style = undefined;
export let text = 'Provide text';
import { getContext, afterUpdate } from 'svelte';
import { cx } from '../../lib';

2
src/components/Pagination/Pagination.Skeleton.svelte
View file

@ -3,8 +3,8 @@
export { className as class };
export let style = undefined;
import SkeletonText from '../SkeletonText';
import { cx } from '../../lib';
import SkeletonText from '../SkeletonText';
</script>
<div

20
src/components/Pagination/Pagination.svelte
View file

@ -2,26 +2,26 @@
let className = undefined;
export { className as class };
export let backwardText = 'Previous page';
export let itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`;
export let disabled = false;
export let forwardText = 'Next page';
export let id = Math.random();
export let itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`;
export let itemsPerPageText = 'Items per page:';
export let itemText = (min, max) => `${min}–${max} items`;
export let pageRangeText = (current, total) => `of ${total} pages`;
export let pageText = page => `page ${page}`;
export let pageSizes = [10];
export let totalItems = 0;
export let disabled = false;
export let page = 1;
export let pageSize = 10;
export let pagesUnknown = false;
export let pageInputDisabled = false;
export let pageRangeText = (current, total) => `of ${total} pages`;
export let pageSize = 10;
export let pageSizes = [10];
export let pagesUnknown = false;
export let pageText = page => `page ${page}`;
export let style = undefined;
export let totalItems = 0;
import CaretRight24 from 'carbon-icons-svelte/lib/CaretRight24';
import CaretLeft24 from 'carbon-icons-svelte/lib/CaretLeft24';
import Select, { SelectItem } from '../Select';
import CaretRight24 from 'carbon-icons-svelte/lib/CaretRight24';
import { cx, fillArray } from '../../lib';
import Select, { SelectItem } from '../Select';
$: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
$: selectItems = fillArray(totalPages);

2
src/components/ProgressIndicator/ProgressIndicator.Skeleton.svelte
View file

@ -1,8 +1,8 @@
<script>
let className = undefined;
export { className as class };
export let vertical = false;
export let style = undefined;
export let vertical = false;
import { cx } from '../../lib';
</script>

6
src/components/ProgressIndicator/ProgressIndicator.Story.svelte
View file

@ -3,8 +3,8 @@
import Layout from '../../internal/ui/Layout.svelte';
import ProgressIndicator from './ProgressIndicator.svelte';
import ProgressStep from './ProgressStep.svelte';
import ProgressIndicatorSkeleton from './ProgressIndicator.Skeleton.svelte';
import ProgressStep from './ProgressStep.svelte';
</script>
<Layout>
@ -39,8 +39,8 @@
<ProgressStep
label="Fourth step"
description="Step 4: Getting started with Carbon Design System"
invalid
secondaryLabel="Example invalid step" />
secondaryLabel="Example invalid step"
invalid />
<ProgressStep
label="Fifth step"
description="Step 5: Getting started with Carbon Design System"

2
src/components/ProgressIndicator/ProgressIndicator.svelte
View file

@ -2,8 +2,8 @@
let className = undefined;
export { className as class };
export let currentIndex = 0;
export let vertical = false;
export let style = undefined;
export let vertical = false;
import { createEventDispatcher, setContext } from 'svelte';
import { writable, derived } from 'svelte/store';

10
src/components/ProgressIndicator/ProgressStep.svelte
View file

@ -1,18 +1,18 @@
<script>
let className = undefined;
export { className as class };
export let label = '';
export let current = false;
export let complete = false;
export let current = false;
export let description = '';
export let invalid = false;
export let secondaryLabel = '';
export let disabled = false;
export let invalid = false;
export let label = '';
export let secondaryLabel = '';
export let style = undefined;
import { getContext } from 'svelte';
import Warning16 from 'carbon-icons-svelte/lib/Warning16';
import CheckmarkOutline16 from 'carbon-icons-svelte/lib/CheckmarkOutline16';
import Warning16 from 'carbon-icons-svelte/lib/Warning16';
import { cx } from '../../lib';
const id = Math.random();

10
src/components/RadioButton/RadioButton.svelte
View file

@ -1,15 +1,15 @@
<script>
let className = undefined;
export { className as class };
export let value = '';
export let checked = false;
export let disabled = false;
export let id = Math.random();
export let labelText = '';
export let hideLabel = false;
export let id = Math.random();
export let labelPosition = 'right';
export let labelText = '';
export let name = '';
export let style = undefined;
export let value = '';
import { getContext } from 'svelte';
import { writable } from 'svelte/store';
@ -17,13 +17,13 @@
const ctx = getContext('RadioButtonGroup');
let selected = ctx ? ctx.selected : writable(checked ? value : undefined);
let selectedValue = ctx ? ctx.selectedValue : writable(checked ? value : undefined);
if (ctx) {
ctx.add({ id, checked, disabled, value });
}
$: checked = $selected === value;
$: checked = $selectedValue === value;
</script>
<div

4
src/components/RadioButtonGroup/RadioButtonGroup.Story.svelte
View file

@ -3,11 +3,13 @@
import RadioButtonGroup from './RadioButtonGroup.svelte';
import RadioButton from '../RadioButton';
import FormGroup from '../FormGroup';
let selected = 'default-selected';
</script>
<Layout>
<FormGroup legendText="Radio Button heading">
<RadioButtonGroup {...$$props.group} defaultSelected="default-selected" legend="Group Legend">
<RadioButtonGroup {...$$props.group} legend="Group Legend" bind:selected>
<RadioButton {...$$props.radio} value="standard" id="radio-1" />
<RadioButton {...$$props.radio} value="default-selected" id="radio-2" />
<RadioButton {...$$props.radio} value="disabled" id="radio-3" />

18
src/components/RadioButtonGroup/RadioButtonGroup.svelte
View file

@ -1,10 +1,10 @@
<script>
let className = undefined;
export { className as class };
export let orientation = 'horizontal';
export let labelPosition = 'right';
export let defaultSelected = undefined;
export let selected = undefined;
export let disabled = false;
export let labelPosition = 'right';
export let orientation = 'horizontal';
export let style = undefined;
import { createEventDispatcher, setContext } from 'svelte';
@ -13,23 +13,23 @@
const dispatch = createEventDispatcher();
let selected = writable(defaultSelected);
let selectedValue = writable(selected);
setContext('RadioButtonGroup', {
selected,
selectedValue,
add: ({ checked, value }) => {
if (checked) {
selected.set(value);
selectedValue.set(value);
}
},
update: value => {
selected.set(value);
selectedValue.set(value);
}
});
$: selected = $selectedValue;
$: {
defaultSelected = $selected;
dispatch('change', $selected);
dispatch('change', $selectedValue);
}
</script>

22
src/components/Search/Search.svelte
View file

@ -1,21 +1,21 @@
<script>
let className = undefined;
export { className as class };
export let value = '';
export let autofocus = false;
export let type = 'text';
export let small = false;
export let placeholder = '';
export let labelText = '';
export let closeButtonLabelText = 'Clear search input';
export let size = small ? 'sm' : 'xl';
export let light = false;
export let id = Math.random();
export let labelText = '';
export let light = false;
export let placeholder = '';
export let size = small ? 'sm' : 'xl';
export let small = false;
export let style = undefined;
export let type = 'text';
export let value = '';
import Search16 from 'carbon-icons-svelte/lib/Search16';
import Close16 from 'carbon-icons-svelte/lib/Close16';
import Close20 from 'carbon-icons-svelte/lib/Close20';
import Search16 from 'carbon-icons-svelte/lib/Search16';
import { cx } from '../../lib';
let inputRef = undefined;
@ -25,7 +25,7 @@
class={cx('--search', size && `--search--${size}`, light && '--search--light', className)}
{style}>
<Search16 class={cx('--search-magnifier')} />
<label for={id} class={cx('--label')}>{labelText}</label>
<label class={cx('--label')} for={id}>{labelText}</label>
<!-- svelte-ignore a11y-autofocus -->
<input
bind:this={inputRef}
@ -43,13 +43,13 @@
{placeholder} />
<button
type="button"
aria-label={closeButtonLabelText}
class={cx('--search-close', value === '' && '--search-close--hidden')}
on:click
on:click={() => {
value = '';
inputRef.focus();
}}
aria-label={closeButtonLabelText}>
}}>
<svelte:component this={size === 'xl' ? Close20 : Close16} />
</button>
</div>

5
src/components/Select/Select.Story.svelte
View file

@ -6,14 +6,17 @@
import SelectItem from './SelectItem.svelte';
import SelectSkeleton from './Select.Skeleton.svelte';
import SelectItemGroup from './SelectItemGroup.svelte';
let selected = 'placeholder-item';
</script>
<Layout>
<div>
{selected}
{#if story === 'skeleton'}
<SelectSkeleton {...$$props} />
{:else}
<Select {...$$props.select} id="select-1" defaultValue="placeholder-item">
<Select {...$$props.select} id="select-1" bind:selected>
<SelectItem value="placeholder-item" text="Choose an option" disabled hidden />
<SelectItemGroup {...$$props.group} label="Category 1">
<SelectItem value="option-1" text="Option 1" />

23
src/components/Select/Select.svelte
View file

@ -1,17 +1,17 @@
<script>
let className = undefined;
export { className as class };
export let disabled = false;
export let helperText = '';
export let hideLabel = false;
export let id = Math.random();
export let inline = false;
export let labelText = '';
export let disabled = false;
export let defaultValue = undefined;
export let hideLabel = false;
export let invalid = false;
export let invalidText = '';
export let helperText = '';
export let labelText = '';
export let light = false;
export let noLabel = false;
export let selected = undefined;
export let style = undefined;
import { createEventDispatcher, setContext } from 'svelte';
@ -22,16 +22,15 @@
const dispatch = createEventDispatcher();
let selected = writable(defaultValue);
let selectedValue = writable(selected);
setContext('Select', { selected });
setContext('Select', { selectedValue });
$: errorId = `error-${id}`;
$: selected = $selectedValue;
$: {
selected.set(defaultValue);
dispatch('change', $selected);
dispatch('change', $selectedValue);
}
$: defaultValue = $selected;
</script>
<div class={cx('--form-item')} {style}>
@ -58,7 +57,7 @@
disabled={disabled || undefined}
aria-invalid={invalid || undefined}
on:change={({ target }) => {
selected.set(target.value);
selectedValue.set(target.value);
}}
{id}>
<slot />
@ -87,7 +86,7 @@
aria-invalid={invalid || undefined}
on:change
on:change={({ target }) => {
selected.set(target.value);
selectedValue.set(target.value);
}}
{id}>
<slot />

22
src/components/Select/SelectItem.svelte
View file

@ -1,24 +1,28 @@
<script>
let className = undefined;
export { className as class };
export let value = '';
export let text = '';
export let disabled = false;
export let hidden = false;
export let style = undefined;
export let text = '';
export let value = '';
import { getContext } from 'svelte';
import { cx } from '../../lib';
const ctx = getContext('Select') || getContext('TimePickerSelect');
let selected = false;
const unsubscribe = ctx.selectedValue.subscribe(currentValue => {
if (currentValue === value) {
selected = true;
}
});
unsubscribe();
</script>
<option
selected={ctx.$selected === value}
class={cx('--select-option', className)}
{value}
{disabled}
{hidden}
{style}>
<option class={cx('--select-option', className)} {value} {disabled} {hidden} {style} {selected}>
{text}
</option>

6
src/components/SkeletonText/SkeletonText.svelte
View file

@ -1,11 +1,11 @@
<script>
let className = undefined;
export { className as class };
export let paragraph = false;
export let lines = 3;
export let width = '100%';
export let heading = false;
export let lines = 3;
export let paragraph = false;
export let style = undefined;
export let width = '100%';
import { cx } from '../../lib';

28
src/components/Slider/Slider.svelte
View file

@ -1,25 +1,23 @@
<script>
let className = undefined;
export { className as class };
export let disabled = false;
export let hideTextInput = false;
export let id = Math.random();
export let value = '';
export let min = 0;
export let max = 100;
export let minLabel = '';
export let maxLabel = '';
export let labelText = '';
export let formatLabel = (value, label) =>
typeof label === 'function' ? label(value) : `${value}${label}`;
export let step = 1;
export let stepMultiplier = 4;
export let disabled = false;
export let name = '';
export let inputType = 'number';
export let invalid = false;
export let required = false;
export let labelText = '';
export let light = false;
export let max = 100;
export let maxLabel = '';
export let min = 0;
export let minLabel = '';
export let name = '';
export let required = false;
export let step = 1;
export let stepMultiplier = 4;
export let style = undefined;
export let value = '';
import { createEventDispatcher, afterUpdate } from 'svelte';
import { cx } from '../../lib';
@ -82,7 +80,7 @@
<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
<label for={id} class={cx('--label', disabled && '--label--disabled')}>{labelText}</label>
<div class={cx('--slider-container')}>
<span class={cx('--slider__range-label')}>{formatLabel(min, minLabel)}</span>
<span class={cx('--slider__range-label')}>{minLabel || min}</span>
<div
bind:this={elementRef}
role="presentation"
@ -134,7 +132,7 @@
{max}
{step} />
</div>
<span class={cx('--slider__range-label')}>{formatLabel(max, maxLabel)}</span>
<span class={cx('--slider__range-label')}>{maxLabel || max}</span>
{#if !hideTextInput}
<input
type={inputType}

13
src/components/StructuredList/StructuredList.Story.svelte
View file

@ -9,8 +9,10 @@
import StructuredListHead from './StructuredListHead.svelte';
import StructuredListInput from './StructuredListInput.svelte';
import StructuredListRow from './StructuredListRow.svelte';
import StructuredListWrapper from './StructuredListWrapper.svelte';
import StructuredListSkeleton from './StructuredList.Skeleton.svelte';
import StructuredList from './StructuredList.svelte';
let selected = 'row-1-value';
</script>
<Layout>
@ -18,10 +20,9 @@
{#if story === 'skeleton'}
<div style="width: 800px">
<StructuredListSkeleton />
<StructuredListSkeleton border />
</div>
{:else if story === 'selection'}
<StructuredListWrapper selection border defaultSelected="row-1-value">
<StructuredList selection border bind:selected>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>ColumnA</StructuredListCell>
@ -54,9 +55,9 @@
</StructuredListRow>
{/each}
</StructuredListBody>
</StructuredListWrapper>
</StructuredList>
{:else}
<StructuredListWrapper>
<StructuredList>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>ColumnA</StructuredListCell>
@ -84,7 +85,7 @@
</StructuredListCell>
</StructuredListRow>
</StructuredListBody>
</StructuredListWrapper>
</StructuredList>
{/if}
</div>
</Layout>

14
src/components/StructuredList/StructuredListWrapper.svelte → src/components/StructuredList/StructuredList.svelte
View file

@ -1,7 +1,7 @@
<script>
let className = undefined;
export { className as class };
export let defaultSelected = undefined;
export let selected = undefined;
export let border = false;
export let selection = false;
export let style = undefined;
@ -12,18 +12,18 @@
const dispatch = createEventDispatcher();
let selected = writable(defaultSelected);
let selectedValue = writable(selected);
setContext('StructuredListWrapper', {
selected,
selectedValue,
update: value => {
selected.set(value);
selectedValue.set(value);
}
});
$: selected = $selectedValue;
$: {
defaultSelected = $selected;
dispatch('change', $selected);
dispatch('change', $selectedValue);
}
</script>
@ -32,8 +32,8 @@
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--structured-list', border && '--structured-list--border', selection && '--structured-list--selection', className)}
aria-label={$$props['aria-label'] || 'Structured list section'}
class={cx('--structured-list', border && '--structured-list--border', selection && '--structured-list--selection', className)}
{style}>
<slot />
</section>

22
src/components/StructuredList/StructuredListInput.svelte
View file

@ -1,23 +1,23 @@
<script>
let className = undefined;
export { className as class };
export let id = Math.random();
export let value = 'value';
export let title = 'title';
export let name = '';
export let checked = false;
export let id = Math.random();
export let name = '';
export let style = undefined;
export let title = 'title';
export let value = 'value';
import { getContext } from 'svelte';
import { cx } from '../../lib';
const { selected, update } = getContext('StructuredListWrapper');
const { selectedValue, update } = getContext('StructuredListWrapper');
if (checked) {
update(value);
}
$: checked = $selected === value;
$: checked = $selectedValue === value;
</script>
<input
@ -27,9 +27,9 @@
on:change={() => {
update(value);
}}
{value}
{name}
{title}
{style}
{checked}
{id}
{checked} />
{name}
{style}
{title}
{value} />

2
src/components/StructuredList/StructuredListRow.svelte
View file

@ -3,8 +3,8 @@
export { className as class };
export let head = false;
export let label = false;
export let tabindex = '0';
export let style = undefined;
export let tabindex = '0';
import { cx } from '../../lib';
</script>

5
src/components/StructuredList/index.js
View file

@ -1,7 +1,10 @@
import StructuredList from './StructuredList.svelte';
export default StructuredList;
export { default as StructuredListSkeleton } from './StructuredList.Skeleton.svelte';
export { default as StructuredListBody } from './StructuredListBody.svelte';
export { default as StructuredListHead } from './StructuredListHead.svelte';
export { default as StructuredListCell } from './StructuredListCell.svelte';
export { default as StructuredListRow } from './StructuredListRow.svelte';
export { default as StructuredListInput } from './StructuredListInput.svelte';
export { default as StructuredListWrapper } from './StructuredListWrapper.svelte';

8
src/components/Tabs/Tab.svelte
View file

@ -1,12 +1,12 @@
<script>
let className = undefined;
export { className as class };
export let role = 'presentation';
export let label = '';
export let tabindex = '0';
export let href = '#';
export let disabled = false;
export let href = '#';
export let label = '';
export let role = 'presentation';
export let style = undefined;
export let tabindex = '0';
import { getContext } from 'svelte';
import { cx } from '../../lib';

2
src/components/Tabs/Tabs.Story.svelte
View file

@ -2,9 +2,9 @@
export let story = undefined;
import Layout from '../../internal/ui/Layout.svelte';
import Tabs from './Tabs.svelte';
import Tab from './Tab.svelte';
import TabContent from './TabContent.svelte';
import Tabs from './Tabs.svelte';
import TabsSkeleton from './TabsSkeleton.svelte';
const { tabProps, ...tabsProps } = $$props;

6
src/components/Tabs/Tabs.svelte
View file

@ -1,12 +1,12 @@
<script>
let className = undefined;
export { className as class };
export let selected = 0;
export let iconDescription = 'Show menu options';
export let role = 'navigation';
export let type = 'default';
export let triggerHref = '#';
export let selected = 0;
export let style = undefined;
export let triggerHref = '#';
export let type = 'default';
import { createEventDispatcher, setContext } from 'svelte';
import { writable, derived } from 'svelte/store';

4
src/components/Tag/Tag.Story.svelte
View file

@ -1,9 +1,9 @@
<script>
export let story = undefined;
export let type = undefined;
export let disabled = undefined;
export let filter = undefined;
export let slot = undefined;
export let story = undefined;
export let type = undefined;
import Layout from '../../internal/ui/Layout.svelte';
import Tag from './Tag.svelte';

4
src/components/Tag/Tag.svelte
View file

@ -1,11 +1,11 @@
<script>
let className = undefined;
export { className as class };
export let type = undefined;
export let disabled = false;
export let filter = false;
export let title = 'Clear filter';
export let style = undefined;
export let title = 'Clear filter';
export let type = undefined;
import Close16 from 'carbon-icons-svelte/lib/Close16';
import { cx } from '../../lib';

14
src/components/TextArea/TextArea.svelte
View file

@ -1,19 +1,19 @@
<script>
let className = undefined;
export { className as class };
export let rows = 4;
export let cols = 50;
export let disabled = false;
export let id = Math.random();
export let labelText = '';
export let placeholder = '';
export let value = '';
export let invalid = false;
export let invalidText = '';
export let helperText = '';
export let hideLabel = false;
export let id = Math.random();
export let invalid = false;
export let invalidText = '';
export let labelText = '';
export let light = false;
export let placeholder = '';
export let rows = 4;
export let style = undefined;
export let value = '';
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
import { cx } from '../../lib';

20
src/components/TextInput/PasswordInput.svelte
View file

@ -2,21 +2,21 @@
let className = undefined;
export { className as class };
export let disabled = false;
export let id = Math.random();
export let labelText = '';
export let placeholder = '';
export let type = 'password';
export let value = '';
export let invalid = false;
export let invalidText = '';
export let helperText = '';
export let hideLabel = false;
export let light = false;
export let tooltipPosition = 'bottom';
export let tooltipAlignment = 'center';
export let hidePasswordLabel = 'Hide password';
export let id = Math.random();
export let invalid = false;
export let invalidText = '';
export let labelText = '';
export let light = false;
export let placeholder = '';
export let showPasswordLabel = 'Show password';
export let style = undefined;
export let tooltipAlignment = 'center';
export let tooltipPosition = 'bottom';
export let type = 'password';
export let value = '';
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
import View16 from 'carbon-icons-svelte/lib/View16';

2
src/components/TextInput/TextInput.Story.svelte
View file

@ -2,8 +2,8 @@
export let story = undefined;
import Layout from '../../internal/ui/Layout.svelte';
import TextInput from './TextInput.svelte';
import PasswordInput from './PasswordInput.svelte';
import TextInput from './TextInput.svelte';
import TextInputSkeleton from './TextInput.Skeleton.svelte';
let value = '';

14
src/components/TextInput/TextInput.svelte
View file

@ -2,17 +2,17 @@
let className = undefined;
export { className as class };
export let disabled = false;
export let id = Math.random();
export let labelText = '';
export let placeholder = '';
export let type = '';
export let value = '';
export let invalid = false;
export let invalidText = '';
export let helperText = '';
export let hideLabel = false;
export let id = Math.random();
export let invalid = false;
export let invalidText = '';
export let labelText = '';
export let light = false;
export let placeholder = '';
export let style = undefined;
export let type = '';
export let value = '';
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
import { cx } from '../../lib';

6
src/components/Tile/ClickableTile.svelte
View file

@ -1,10 +1,10 @@
<script>
let className = undefined;
export { className as class };
export let href = undefined;
export let rel = undefined;
export let light = false;
export let clicked = false;
export let href = undefined;
export let light = false;
export let rel = undefined;
export let style = undefined;
import { cx } from '../../lib';

47
src/components/Tile/ExpandableTile.svelte
View file

@ -3,26 +3,26 @@
export { className as class };
export let expanded = false;
export let id = Math.random();
export let light = false;
export let style = undefined;
export let tabindex = '0';
export let tileCollapsedIconText = 'Interact to expand Tile';
export let tileExpandedIconText = 'Interact to collapse Tile';
export let tileMaxHeight = 0;
export let tilePadding = 0;
export let tabindex = '0';
export let light = false;
export let style = undefined;
import { onMount, afterUpdate } from 'svelte';
import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
import { cx } from '../../lib';
import { cx, css } from '../../lib';
let tile = undefined;
let tileContent = undefined;
let aboveTheFold = undefined;
let tileRef = undefined;
let contentRef = undefined;
let aboveRef = undefined;
onMount(() => {
const style = window.getComputedStyle(tile);
const style = window.getComputedStyle(tileRef);
tileMaxHeight = aboveTheFold.getBoundingClientRect().height;
tileMaxHeight = aboveRef.getBoundingClientRect().height;
tilePadding =
parseInt(style.getPropertyValue('padding-top'), 10) +
parseInt(style.getPropertyValue('padding-bottom'), 10);
@ -30,15 +30,15 @@
afterUpdate(() => {
tileMaxHeight = expanded
? tileContent.getBoundingClientRect().height
: aboveTheFold.getBoundingClientRect().height;
? contentRef.getBoundingClientRect().height
: aboveRef.getBoundingClientRect().height;
});
</script>
<div
bind:this={tile}
style={expanded ? undefined : `max-height: ${tileMaxHeight + tilePadding}px`}
bind:this={tileRef}
class={cx('--tile', '--tile--expandable', expanded && '--tile--is-expanded', light && '--tile--light', className)}
style={expanded ? undefined : css([style, `max-height: ${tileMaxHeight + tilePadding}px`])}
on:click
on:click={() => {
expanded = !expanded;
@ -54,11 +54,17 @@
on:mouseenter
on:mouseleave
{tabindex}
{id}
{style}>
<div bind:this={tileContent}>
<div bind:this={aboveTheFold} class={cx('--tile-content')}>
{id}>
<div bind:this={contentRef}>
<div bind:this={aboveRef} class={cx('--tile-content')}>
<span
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--tile-content__above-the-fold')}>
<slot name="above" />
</span>
</div>
<button
aria-expanded={expanded}
@ -67,7 +73,14 @@
<ChevronDown16 />
</button>
<div class={cx('--tile-content')}>
<span
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--tile-content__below-the-fold')}>
<slot name="below" />
</span>
</div>
</div>
</div>

18
src/components/Tile/RadioTile.svelte
View file

@ -2,23 +2,23 @@
let className = undefined;
export { className as class };
export let checked = false;
export let id = Math.random();
export let name = '';
export let iconDescription = 'Tile checkmark';
export let value = '';
export let tabindex = '0';
export let id = Math.random();
export let light = false;
export let name = '';
export let style = undefined;
export let tabindex = '0';
export let value = '';
import { getContext } from 'svelte';
import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
import { cx } from '../../lib';
const { addTile, updateSelected, selected } = getContext('TileGroup');
const { add, update, selectedValue } = getContext('TileGroup');
addTile({ id, value, checked });
add({ value, checked });
$: checked = value === $selected.value;
$: checked = value === $selectedValue;
</script>
<input
@ -26,7 +26,7 @@
class={cx('--tile-input')}
on:change
on:change={() => {
updateSelected({ id, value });
update(value);
}}
{id}
{name}
@ -43,7 +43,7 @@
on:keydown={event => {
if (event.key === ' ' || event.key === 'Enter') {
event.preventDefault();
updateSelected({ id, value });
update(value);
}
}}
{tabindex}

17
src/components/Tile/SelectableTile.svelte
View file

@ -1,15 +1,15 @@
<script>
let className = undefined;
export { className as class };
export let selected = false;
export let id = Math.random();
export let value = 'value';
export let title = 'title';
export let name = '';
export let iconDescription = 'Tile checkmark';
export let tabindex = '0';
export let id = Math.random();
export let light = false;
export let name = '';
export let selected = false;
export let style = undefined;
export let tabindex = '0';
export let title = 'title';
export let value = 'value';
import { createEventDispatcher } from 'svelte';
import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
@ -17,16 +17,13 @@
const dispatch = createEventDispatcher();
$: if (selected) {
dispatch('select', id);
}
$: dispatch(selected ? 'select' : 'deselect', id);
</script>
<input
type="checkbox"
tabindex="-1"
class={cx('--tile-input')}
on:change
checked={selected}
{id}
{value}

40
src/components/Tile/Tile.Story.svelte
View file

@ -2,14 +2,12 @@
export let story = undefined;
import Layout from '../../internal/ui/Layout.svelte';
import Tile from './Tile.svelte';
import ClickableTile from './ClickableTile.svelte';
import SelectableTile from './SelectableTile.svelte';
import ExpandableTile from './ExpandableTile.svelte';
import TileAboveTheFoldContent from './TileAboveTheFoldContent.svelte';
import TileBelowTheFoldContent from './TileBelowTheFoldContent.svelte';
import TileGroup from './TileGroup.svelte';
import RadioTile from './RadioTile.svelte';
import SelectableTile from './SelectableTile.svelte';
import Tile from './Tile.svelte';
import TileGroup from './TileGroup.svelte';
const radioTiles = [
{ value: 'standard', id: 'tile-1', labelText: 'Selectable Tile' },
@ -17,7 +15,9 @@
{ value: 'selected', id: 'tile-3', labelText: 'Selectable Tile' }
];
let defaultSelected = radioTiles[1];
let selected = radioTiles[1].value;
let selectedTile1 = false;
</script>
<Layout>
@ -28,28 +28,32 @@
<ClickableTile {...$$props}>Clickable Tile</ClickableTile>
{:else if story === 'multi-select'}
<div role="group" aria-label="selectable tiles">
<SelectableTile {...$$props} id="tile-1" name="tiles">Multi-select Tile</SelectableTile>
<SelectableTile
{...$$props}
id="tile-1"
name="tiles"
bind:selected={selectedTile1}
on:select={({ detail }) => {
console.log('on:select', detail);
}}
on:deselect={({ detail }) => {
console.log('on:deselect', detail);
}}>
Multi-select Tile
</SelectableTile>
<SelectableTile {...$$props} id="tile-2" name="tiles">Multi-select Tile</SelectableTile>
<SelectableTile {...$$props} id="tile-3" name="tiles">Multi-select Tile</SelectableTile>
</div>
{:else if story === 'selectable'}
<TileGroup legend="Selectable Tile Group" bind:defaultSelected>
<TileGroup legend="Selectable Tile Group" bind:selected>
{#each radioTiles as { value, id, labelText }, i (id)}
<RadioTile {...$$props} {value} {id} {labelText}>Selectable Tile</RadioTile>
{/each}
</TileGroup>
{:else if story === 'expandable'}
<ExpandableTile {...$$props}>
<div slot="above">
<TileAboveTheFoldContent>
<div style="height: 200px">Above the fold content here</div>
</TileAboveTheFoldContent>
</div>
<div slot="below">
<TileBelowTheFoldContent>
<div style="height: 400px">Below the fold content here</div>
</TileBelowTheFoldContent>
</div>
<div slot="above" style="height: 200px">Above the fold content here</div>
<div slot="below" style="height: 400px">Below the fold content here</div>
</ExpandableTile>
{:else}
<Tile {...$$props}>Default Tile</Tile>

2
src/components/Tile/Tile.stories.js
View file

@ -26,6 +26,8 @@ export const MultiSelect = () => ({
}
});
MultiSelect.story = { name: 'Multi-select' };
export const Selectable = () => ({
Component,
props: {

17
src/components/Tile/TileAboveTheFoldContent.svelte
View file

@ -1,17 +0,0 @@
<script>
let className = undefined;
export { className as class };
export let style = undefined;
import { cx } from '../../lib';
</script>
<span
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--tile-content__above-the-fold', className)}
{style}>
<slot />
</span>

17
src/components/Tile/TileBelowTheFoldContent.svelte
View file

@ -1,17 +0,0 @@
<script>
let className = undefined;
export { className as class };
export let style = undefined;
import { cx } from '../../lib';
</script>
<span
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--tile-content__below-the-fold', className)}
{style}>
<slot />
</span>

40
src/components/Tile/TileGroup.svelte
View file

@ -1,7 +1,7 @@
<script>
let className = undefined;
export { className as class };
export let defaultSelected = { value: undefined };
export let selected = undefined;
export let disabled = false;
export let legend = '';
export let style = undefined;
@ -11,44 +11,30 @@
import { cx } from '../../lib';
const dispatch = createEventDispatcher();
let tiles = [];
let selected = writable(defaultSelected);
let selectedValue = writable(selected);
setContext('TileGroup', {
selected,
addTile: tile => {
tiles = [...tiles, tile];
selectedValue,
add: ({ checked, value }) => {
if (checked) {
selectedValue.set(value);
}
},
updateSelected: tile => {
selected.set(tile);
update: value => {
selectedValue.set(value);
}
});
$: selected = $selectedValue;
$: {
const checkedTiles = tiles.filter(tile => tile.checked);
if (checkedTiles.length > 1) {
console.warn('Multiple RadioTiles cannot be checked.');
if (defaultSelected.value) {
console.warn('Using `defaultSelected`:', defaultSelected);
} else {
console.warn('Using `RadioTile`:', checkedTiles[0]);
selected.set(checkedTiles[0]);
}
} else if (checkedTiles.length === 1) {
selected.set(checkedTiles[0]);
tiles = [];
}
defaultSelected = $selected;
dispatch('select', $selected);
dispatch('select', $selectedValue);
}
</script>
<fieldset class={cx('--tile-group', className)} {disabled} {style}>
{#if legend}
<legend>{legend}</legend>
<legend class={cx('--label')}>{legend}</legend>
{/if}
<div>
<slot />

2
src/components/Tile/index.js
View file

@ -5,5 +5,3 @@ export { default as ClickableTile } from './ClickableTile.svelte';
export { default as ExpandableTile } from './ExpandableTile.svelte';
export { default as SelectableTile } from './SelectableTile.svelte';
export { default as TileGroup } from './TileGroup.svelte';
export { default as TileAboveTheFoldContent } from './TileAboveTheFoldContent.svelte';
export { default as TileBelowTheFoldContent } from './TileBelowTheFoldContent.svelte';

18
src/components/TimePicker/TimePicker.svelte
View file

@ -1,19 +1,19 @@
<script>
let className = undefined;
export { className as class };
export let id = Math.random();
export let value = '';
export let labelText = '';
export let disabled = false;
export let hideLabel = false;
export let type = 'text';
export let id = Math.random();
export let invalid = false;
export let invalidText = 'Invalid time format.';
export let labelText = '';
export let light = false;
export let maxlength = 5;
export let pattern = '(1[012]|[1-9]):[0-5][0-9](\\s)?';
export let placeholder = 'hh=mm';
export let maxlength = 5;
export let invalidText = 'Invalid time format.';
export let invalid = false;
export let disabled = false;
export let light = false;
export let style = undefined;
export let type = 'text';
export let value = '';
import { cx } from '../../lib';
</script>

18
src/components/TimePicker/TimePickerSelect.svelte
View file

@ -1,25 +1,25 @@
<script>
let className = undefined;
export { className as class };
export let id = Math.random();
export let value = '';
export let labelText = '';
export let disabled = false;
export let hideLabel = true;
export let iconDescription = 'Open list of options';
export let disabled = false;
export let id = Math.random();
export let labelText = '';
export let style = undefined;
export let value = '';
import { setContext } from 'svelte';
import { writable } from 'svelte/store';
import ChevronDownGlyph from 'carbon-icons-svelte/lib/ChevronDownGlyph';
import { cx } from '../../lib';
let selected = writable(value);
let selectedValue = writable(value);
setContext('TimePickerSelect', { selected });
setContext('TimePickerSelect', { selectedValue });
$: selected.set(value);
$: value = $selected;
$: selectedValue.set(value);
$: value = $selectedValue;
</script>
<div
@ -35,7 +35,7 @@
<select
class={cx('--select-input')}
on:change={({ target }) => {
selected.set(target.value);
selectedValue.set(target.value);
}}
{id}
{disabled}

Some files were not shown because too many files have changed in this diff Show more