mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
Merge branch 'master' into tabs
This commit is contained in:
Eric Liu
GitHub
commit
d2878983dc
73 changed files with 1558 additions and 333 deletions
25
README.md
25
README.md
|
|
@ -28,16 +28,39 @@ Currently, the following components are supported:
|
||||||
- CopyButton
|
- CopyButton
|
||||||
- DataTableSkeleton
|
- DataTableSkeleton
|
||||||
- InlineLoading
|
- InlineLoading
|
||||||
- Loading
|
|
||||||
- Link
|
- Link
|
||||||
- ListItem
|
- ListItem
|
||||||
|
- Loading
|
||||||
|
- Notification
|
||||||
|
- ToastNotification
|
||||||
|
- InlineNotification
|
||||||
|
- NotificationActionButton
|
||||||
|
- NotificationButton
|
||||||
|
- NotificationIcon
|
||||||
|
- NotificationTextDetails
|
||||||
- OrderedList
|
- OrderedList
|
||||||
|
- ProgressIndicator
|
||||||
|
- ProgressIndicatorSkeleton
|
||||||
|
- ProgressStep
|
||||||
- RadioButton
|
- RadioButton
|
||||||
- RadioButtonSkeleton
|
- RadioButtonSkeleton
|
||||||
|
- RadioButtonGroup
|
||||||
- Search
|
- Search
|
||||||
- SearchSkeleton
|
- SearchSkeleton
|
||||||
|
- Select
|
||||||
|
- SelectSkeleton
|
||||||
|
- SelectItem
|
||||||
|
- SelectItemGroup
|
||||||
- SkeletonPlaceholder
|
- SkeletonPlaceholder
|
||||||
- SkeletonText
|
- SkeletonText
|
||||||
|
- StructuredList
|
||||||
|
- StructuredListSkeleton
|
||||||
|
- StructuredListBody
|
||||||
|
- StructuredListHead
|
||||||
|
- StructuredListCell
|
||||||
|
- StructuredListRow
|
||||||
|
- StructuredListInput
|
||||||
|
- StructuredListWrapper
|
||||||
- Tabs
|
- Tabs
|
||||||
- Tab
|
- Tab
|
||||||
- TabContent
|
- TabContent
|
||||||
|
|
|
||||||
|
|
@ -70,4 +70,4 @@
|
||||||
}</script><style>#root[hidden],
|
}</script><style>#root[hidden],
|
||||||
#docs-root[hidden] {
|
#docs-root[hidden] {
|
||||||
display: none !important;
|
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.bdb154f7e321411b690e.bundle.js"></script><script src="vendors~main.bdb154f7e321411b690e.bundle.js"></script><script src="main.bdb154f7e321411b690e.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.7c24a16038c00f71acbb.bundle.js"></script><script src="vendors~main.7c24a16038c00f71acbb.bundle.js"></script><script src="main.7c24a16038c00f71acbb.bundle.js"></script></body></html>
|
||||||
|
|
@ -17,4 +17,4 @@
|
||||||
}</script><style>#root[hidden],
|
}</script><style>#root[hidden],
|
||||||
#docs-root[hidden] {
|
#docs-root[hidden] {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['DOCS_MODE'] = false;</script><script src="runtime~main.67b3c42af12dc2b7ac9d.bundle.js"></script><script src="vendors~main.de76cb4d691ff902e1d8.bundle.js"></script><script src="main.d19aceecbf99f4b72fa7.bundle.js"></script></body></html>
|
}</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['DOCS_MODE'] = false;</script><script src="runtime~main.67b3c42af12dc2b7ac9d.bundle.js"></script><script src="vendors~main.90220ada78163e544ba9.bundle.js"></script><script src="main.e7e683d3c4fc3d92da31.bundle.js"></script></body></html>
|
||||||
2
docs/main.7c24a16038c00f71acbb.bundle.js
Normal file
2
docs/main.7c24a16038c00f71acbb.bundle.js
Normal file
File diff suppressed because one or more lines are too long
1
docs/main.7c24a16038c00f71acbb.bundle.js.map
Normal file
1
docs/main.7c24a16038c00f71acbb.bundle.js.map
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"file":"main.7c24a16038c00f71acbb.bundle.js","sources":["webpack:///main.7c24a16038c00f71acbb.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"file":"main.bdb154f7e321411b690e.bundle.js","sources":["webpack:///main.bdb154f7e321411b690e.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{415:function(n,o,c){c(416),c(529),n.exports=c(878)},438:function(n,o){},529:function(n,o,c){"use strict";c.r(o);c(530),c(850)}},[[415,1,2]]]);
|
|
||||||
1
docs/main.e7e683d3c4fc3d92da31.bundle.js
Normal file
1
docs/main.e7e683d3c4fc3d92da31.bundle.js
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{0:function(n,o,c){c(417),c(529),n.exports=c(878)},1:function(n,o){},529:function(n,o,c){"use strict";c.r(o);c(530),c(850)}},[[0,1,2]]]);
|
||||||
|
|
@ -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()}([]);
|
!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.bdb154f7e321411b690e.bundle.js.map
|
//# sourceMappingURL=runtime~main.7c24a16038c00f71acbb.bundle.js.map
|
||||||
1
docs/runtime~main.7c24a16038c00f71acbb.bundle.js.map
Normal file
1
docs/runtime~main.7c24a16038c00f71acbb.bundle.js.map
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"file":"runtime~main.7c24a16038c00f71acbb.bundle.js","sources":["webpack:///runtime~main.7c24a16038c00f71acbb.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"file":"runtime~main.bdb154f7e321411b690e.bundle.js","sources":["webpack:///runtime~main.f68146be2ed36b44235a.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
|
||||||
81
docs/vendors~main.7c24a16038c00f71acbb.bundle.js
Normal file
81
docs/vendors~main.7c24a16038c00f71acbb.bundle.js
Normal file
File diff suppressed because one or more lines are too long
1
docs/vendors~main.7c24a16038c00f71acbb.bundle.js.map
Normal file
1
docs/vendors~main.7c24a16038c00f71acbb.bundle.js.map
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"file":"vendors~main.7c24a16038c00f71acbb.bundle.js","sources":["webpack:///vendors~main.7c24a16038c00f71acbb.bundle.js"],"mappings":"AAAA;;;;;AAmqeA;;;;;AAkxHA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAkhBA;;;;;;;AAfA","sourceRoot":""}
|
||||||
103
docs/vendors~main.90220ada78163e544ba9.bundle.js
Normal file
103
docs/vendors~main.90220ada78163e544ba9.bundle.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"file":"vendors~main.bdb154f7e321411b690e.bundle.js","sources":["webpack:///vendors~main.bdb154f7e321411b690e.bundle.js"],"mappings":"AAAA;;;;;AAgqeA;;;;;AAilFA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAygBA;;;;;;;AAfA","sourceRoot":""}
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -34,7 +34,7 @@
|
||||||
"@testing-library/svelte": "^1.11.0",
|
"@testing-library/svelte": "^1.11.0",
|
||||||
"babel-jest": "^24.9.0",
|
"babel-jest": "^24.9.0",
|
||||||
"babel-loader": "^8.0.6",
|
"babel-loader": "^8.0.6",
|
||||||
"carbon-components": "10.9.0-rc.1",
|
"carbon-components": "10.9.0",
|
||||||
"eslint": "^6.7.2",
|
"eslint": "^6.7.2",
|
||||||
"eslint-plugin-svelte3": "^2.7.3",
|
"eslint-plugin-svelte3": "^2.7.3",
|
||||||
"husky": "^3.1.0",
|
"husky": "^3.1.0",
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let props = {};
|
export let style = undefined;
|
||||||
|
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
const _class = cx('--form-item', '--checkbox-wrapper', className);
|
const _class = cx('--form-item', '--checkbox-wrapper', className);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div {...props} class={_class}>
|
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
|
||||||
<span class={cx('--checkbox-label', '--skeleton')} />
|
<span class={cx('--checkbox-label', '--skeleton')} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,13 @@
|
||||||
<script>
|
<script>
|
||||||
export let story = undefined;
|
export let story = undefined;
|
||||||
const { labelText, indeterminate, disabled, hideLabel, wrapperClassName } = $$props;
|
|
||||||
|
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
import Layout from '../../internal/ui/Layout.svelte';
|
import Layout from '../../internal/ui/Layout.svelte';
|
||||||
import Checkbox from './Checkbox.svelte';
|
import Checkbox from './Checkbox.svelte';
|
||||||
import CheckboxSkeleton from './Checkbox.Skeleton.svelte';
|
import CheckboxSkeleton from './Checkbox.Skeleton.svelte';
|
||||||
|
|
||||||
const checkboxProps = {
|
const { labelText, indeterminate, disabled, hideLabel, wrapperClassName } = $$props;
|
||||||
labelText,
|
const checkboxProps = { labelText, indeterminate, disabled, hideLabel, wrapperClassName };
|
||||||
indeterminate,
|
|
||||||
disabled,
|
|
||||||
hideLabel,
|
|
||||||
wrapperClassName
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,4 @@ export const Unchecked = () => ({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
export const Skeleton = () => ({
|
export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });
|
||||||
Component,
|
|
||||||
props: { story: 'skeleton' }
|
|
||||||
});
|
|
||||||
|
|
|
||||||
|
|
@ -4,13 +4,13 @@
|
||||||
export let checked = false;
|
export let checked = false;
|
||||||
export let indeterminate = false;
|
export let indeterminate = false;
|
||||||
export let disabled = false;
|
export let disabled = false;
|
||||||
export let id = undefined;
|
export let id = Math.random();
|
||||||
export let labelText = undefined;
|
export let labelText = undefined;
|
||||||
export let hideLabel = false;
|
export let hideLabel = false;
|
||||||
export let title = '';
|
export let title = '';
|
||||||
export let wrapperClassName = undefined;
|
export let wrapperClassName = undefined;
|
||||||
export { wrapperClassName as wrapperClass };
|
export { wrapperClassName as wrapperClass };
|
||||||
export let props = {};
|
export let style = undefined;
|
||||||
|
|
||||||
import { createEventDispatcher } from 'svelte';
|
import { createEventDispatcher } from 'svelte';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
@ -20,17 +20,26 @@
|
||||||
const _innerLabelClass = cx('--checkbox-label-text', hideLabel && '--visually-hidden');
|
const _innerLabelClass = cx('--checkbox-label-text', hideLabel && '--visually-hidden');
|
||||||
const _wrapperClass = cx('--form-item', '--checkbox-wrapper', wrapperClassName);
|
const _wrapperClass = cx('--form-item', '--checkbox-wrapper', wrapperClassName);
|
||||||
|
|
||||||
function handleChange(event) {
|
let inputRef = undefined;
|
||||||
dispatch('change', { checked: event.target.checked, id, event });
|
|
||||||
|
$: {
|
||||||
|
dispatch('check', { id, checked });
|
||||||
|
|
||||||
|
if (inputRef) {
|
||||||
|
inputRef.checked = checked;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class={_wrapperClass}>
|
<div on:click on:mouseover on:mouseenter on:mouseleave class={_wrapperClass} {style}>
|
||||||
<input
|
<input
|
||||||
{...props}
|
bind:this={inputRef}
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
class={cx('--checkbox')}
|
class={cx('--checkbox')}
|
||||||
on:change={handleChange}
|
on:change
|
||||||
|
on:change={() => {
|
||||||
|
checked = !checked;
|
||||||
|
}}
|
||||||
{indeterminate}
|
{indeterminate}
|
||||||
{disabled}
|
{disabled}
|
||||||
{checked}
|
{checked}
|
||||||
|
|
|
||||||
54
src/components/Notification/InlineNotification.svelte
Normal file
54
src/components/Notification/InlineNotification.svelte
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
<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 lowContrast = false;
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import NotificationIcon from './NotificationIcon.svelte';
|
||||||
|
import NotificationTextDetails from './NotificationTextDetails.svelte';
|
||||||
|
import NotificationButton from './NotificationButton.svelte';
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
const _class = cx(
|
||||||
|
'--inline-notification',
|
||||||
|
lowContrast && '--inline-notification--low-contrast',
|
||||||
|
kind && `--inline-notification--${kind}`,
|
||||||
|
hideCloseButton && '--inline-notification--hide-close-button',
|
||||||
|
className
|
||||||
|
);
|
||||||
|
|
||||||
|
let open = true;
|
||||||
|
|
||||||
|
$: if (!open) {
|
||||||
|
dispatch('close');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if open}
|
||||||
|
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style} {role} {kind}>
|
||||||
|
<div class={cx('--inline-notification__details')}>
|
||||||
|
<NotificationIcon {notificationType} {kind} {iconDescription} />
|
||||||
|
<NotificationTextDetails {title} {subtitle} {notificationType}>
|
||||||
|
<slot />
|
||||||
|
</NotificationTextDetails>
|
||||||
|
</div>
|
||||||
|
<slot name="actions" />
|
||||||
|
{#if !hideCloseButton}
|
||||||
|
<NotificationButton
|
||||||
|
{iconDescription}
|
||||||
|
{notificationType}
|
||||||
|
on:click={() => {
|
||||||
|
open = false;
|
||||||
|
}} />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
20
src/components/Notification/Notification.Story.svelte
Normal file
20
src/components/Notification/Notification.Story.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<script>
|
||||||
|
export let story = undefined;
|
||||||
|
|
||||||
|
import Layout from '../../internal/ui/Layout.svelte';
|
||||||
|
import InlineNotification from './InlineNotification.svelte';
|
||||||
|
import ToastNotification from './ToastNotification.svelte';
|
||||||
|
import NotificationActionButton from './NotificationActionButton.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Layout>
|
||||||
|
{#if story === 'inline'}
|
||||||
|
<InlineNotification {...$$props}>
|
||||||
|
<div slot="actions">
|
||||||
|
<NotificationActionButton>{$$props.action}</NotificationActionButton>
|
||||||
|
</div>
|
||||||
|
</InlineNotification>
|
||||||
|
{:else if story === 'toast'}
|
||||||
|
<ToastNotification {...$$props} style="min-width: 30rem; margin-bottom: .5rem" />
|
||||||
|
{/if}
|
||||||
|
</Layout>
|
||||||
42
src/components/Notification/Notification.stories.js
Normal file
42
src/components/Notification/Notification.stories.js
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
|
||||||
|
import Component from './Notification.Story.svelte';
|
||||||
|
|
||||||
|
export default { title: 'Notification', decorators: [withKnobs] };
|
||||||
|
|
||||||
|
const kinds = {
|
||||||
|
'Error (error)': 'error',
|
||||||
|
'Info (info)': 'info',
|
||||||
|
'Success (success)': 'success',
|
||||||
|
'Warning (warning)': 'warning'
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Toast = () => ({
|
||||||
|
Component,
|
||||||
|
props: {
|
||||||
|
story: 'toast',
|
||||||
|
kind: select('The notification kind (kind)', kinds, 'info'),
|
||||||
|
lowContrast: boolean('Use low contrast variant (lowContrast)', false),
|
||||||
|
role: text('ARIA role (role)', 'alert'),
|
||||||
|
title: text('Title (title)', 'Notification title'),
|
||||||
|
subtitle: text('Subtitle (subtitle)', 'Subtitle text goes here.'),
|
||||||
|
caption: text('Caption (caption)', 'Time stamp [00:00:00]'),
|
||||||
|
iconDescription: text('Icon description (iconDescription)', 'describes the close button'),
|
||||||
|
hideCloseButton: boolean('Hide close button (hideCloseButton)', false)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export const Inline = () => ({
|
||||||
|
Component,
|
||||||
|
props: {
|
||||||
|
story: 'inline',
|
||||||
|
kind: select('The notification kind (kind)', kinds, 'info'),
|
||||||
|
lowContrast: boolean('Use low contrast variant (lowContrast)', false),
|
||||||
|
role: text('ARIA role (role)', 'alert'),
|
||||||
|
title: text('Title (title)', 'Notification title'),
|
||||||
|
subtitle: text('Subtitle (subtitle)', 'Subtitle text goes here.'),
|
||||||
|
caption: text('Caption (caption)', 'Time stamp [00:00:00]'),
|
||||||
|
iconDescription: text('Icon description (iconDescription)', 'describes the close button'),
|
||||||
|
hideCloseButton: boolean('Hide close button (hideCloseButton)', false),
|
||||||
|
action: text('Action (NotificationActionButton > $$slot#action)', 'Action')
|
||||||
|
}
|
||||||
|
});
|
||||||
22
src/components/Notification/NotificationActionButton.svelte
Normal file
22
src/components/Notification/NotificationActionButton.svelte
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import Button from '../Button';
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const _class = cx('--inline-notification__action-button', className);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
kind="ghost"
|
||||||
|
size="small"
|
||||||
|
on:click
|
||||||
|
on:mouseover
|
||||||
|
on:mouseenter
|
||||||
|
on:mouseleave
|
||||||
|
class={_class}
|
||||||
|
{style}>
|
||||||
|
<slot />
|
||||||
|
</Button>
|
||||||
36
src/components/Notification/NotificationButton.svelte
Normal file
36
src/components/Notification/NotificationButton.svelte
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let notificationType = 'toast';
|
||||||
|
export let type = 'button';
|
||||||
|
export let iconDescription = 'close icon';
|
||||||
|
export let renderIcon = Close20;
|
||||||
|
export let title = undefined;
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import Close20 from 'carbon-icons-svelte/lib/Close20';
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const _class = cx(
|
||||||
|
notificationType === 'toast' && '--toast-notification__close-button',
|
||||||
|
notificationType === 'inline' && '--inline-notification__close-button',
|
||||||
|
className
|
||||||
|
);
|
||||||
|
const _iconClass = cx(
|
||||||
|
notificationType === 'toast' && '--toast-notification__close-icon',
|
||||||
|
notificationType === 'inline' && '--inline-notification__close-icon'
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button
|
||||||
|
on:click
|
||||||
|
on:mouseover
|
||||||
|
on:mouseenter
|
||||||
|
on:mouseleave
|
||||||
|
aria-label={iconDescription}
|
||||||
|
title={iconDescription}
|
||||||
|
class={_class}
|
||||||
|
{style}
|
||||||
|
{type}>
|
||||||
|
<svelte:component this={renderIcon} class={_iconClass} {title} />
|
||||||
|
</button>
|
||||||
21
src/components/Notification/NotificationIcon.svelte
Normal file
21
src/components/Notification/NotificationIcon.svelte
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
<script>
|
||||||
|
export let kind = 'error';
|
||||||
|
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 WarningFilled20 from 'carbon-icons-svelte/lib/WarningFilled20';
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const icons = {
|
||||||
|
error: ErrorFilled20,
|
||||||
|
success: CheckmarkFilled20,
|
||||||
|
warning: WarningFilled20
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:component
|
||||||
|
this={icons[kind]}
|
||||||
|
class={cx(`--${notificationType}-notification__icon`)}
|
||||||
|
title={iconDescription} />
|
||||||
25
src/components/Notification/NotificationTextDetails.svelte
Normal file
25
src/components/Notification/NotificationTextDetails.svelte
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
<script>
|
||||||
|
export let title = 'title';
|
||||||
|
export let subtitle = '';
|
||||||
|
export let caption = 'caption';
|
||||||
|
export let notificationType = 'toast';
|
||||||
|
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if notificationType === 'toast'}
|
||||||
|
<div class={cx('--toast-notification__details')}>
|
||||||
|
<h3 class={cx('--toast-notification__title')}>{title}</h3>
|
||||||
|
<div class={cx('--toast-notification__subtitle')}>{subtitle}</div>
|
||||||
|
<div class={cx('--toast-notification__caption')}>{caption}</div>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if notificationType === 'inline'}
|
||||||
|
<div class={cx('--inline-notification__text-wrapper')}>
|
||||||
|
<p class={cx('--inline-notification__title')}>{title}</p>
|
||||||
|
<div class={cx('--inline-notification__subtitle')}>{subtitle}</div>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
60
src/components/Notification/ToastNotification.svelte
Normal file
60
src/components/Notification/ToastNotification.svelte
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
<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 lowContrast = false;
|
||||||
|
export let timeout = 0;
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { createEventDispatcher, onMount } from 'svelte';
|
||||||
|
import NotificationIcon from './NotificationIcon.svelte';
|
||||||
|
import NotificationTextDetails from './NotificationTextDetails.svelte';
|
||||||
|
import NotificationButton from './NotificationButton.svelte';
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
const _class = cx(
|
||||||
|
'--toast-notification',
|
||||||
|
lowContrast && '--toast-notification--low-contrast',
|
||||||
|
kind && `--toast-notification--${kind}`,
|
||||||
|
className
|
||||||
|
);
|
||||||
|
|
||||||
|
let open = true;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
if (timeout) {
|
||||||
|
window.setTimeout(() => {
|
||||||
|
open = false;
|
||||||
|
}, timeout);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$: if (!open) {
|
||||||
|
dispatch('close');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if open}
|
||||||
|
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style} {role} {kind}>
|
||||||
|
<NotificationIcon {notificationType} {kind} {iconDescription} />
|
||||||
|
<NotificationTextDetails {title} {subtitle} {caption} {notificationType}>
|
||||||
|
<slot />
|
||||||
|
</NotificationTextDetails>
|
||||||
|
{#if !hideCloseButton}
|
||||||
|
<NotificationButton
|
||||||
|
{iconDescription}
|
||||||
|
{notificationType}
|
||||||
|
on:click={() => {
|
||||||
|
open = false;
|
||||||
|
}} />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
6
src/components/Notification/index.js
Normal file
6
src/components/Notification/index.js
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
export { default as ToastNotification } from './ToastNotification.svelte';
|
||||||
|
export { default as InlineNotification } from './InlineNotification.svelte';
|
||||||
|
export { default as NotificationActionButton } from './NotificationActionButton.svelte';
|
||||||
|
export { default as NotificationButton } from './NotificationButton.svelte';
|
||||||
|
export { default as NotificationIcon } from './NotificationIcon.svelte';
|
||||||
|
export { default as NotificationTextDetails } from './NotificationTextDetails.svelte';
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import { withKnobs } from '@storybook/addon-knobs';
|
import { withKnobs } from '@storybook/addon-knobs';
|
||||||
import Component from './OrderedList.Story.svelte';
|
import Component from './OrderedList.Story.svelte';
|
||||||
|
|
||||||
export default { title: 'Ordered List', decorators: [withKnobs] };
|
export default { title: 'OrderedList', decorators: [withKnobs] };
|
||||||
|
|
||||||
export const Default = () => ({ Component });
|
export const Default = () => ({ Component });
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let vertical = false;
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const _class = cx('--progress', vertical && '--progress--vertical', '--skeleton', className);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ul on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
|
||||||
|
{#each [0, 1, 2, 3] as item, i (item)}
|
||||||
|
<li class={cx('--progress-step', '--progress-step--incomplete')}>
|
||||||
|
<div class={cx('--progress-step-button', '--progress-step-button--unclickable')}>
|
||||||
|
<svg>
|
||||||
|
<path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0" />
|
||||||
|
</svg>
|
||||||
|
<p class={cx('--progress-label')} />
|
||||||
|
<span class={cx('--progress-line')} />
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
<script>
|
||||||
|
export let story = undefined;
|
||||||
|
|
||||||
|
import Layout from '../../internal/ui/Layout.svelte';
|
||||||
|
import ProgressIndicator from './ProgressIndicator.svelte';
|
||||||
|
import ProgressStep from './ProgressStep.svelte';
|
||||||
|
import ProgressIndicatorSkeleton from './ProgressIndicator.Skeleton.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Layout>
|
||||||
|
<div>
|
||||||
|
{#if story === 'skeleton'}
|
||||||
|
<ProgressIndicatorSkeleton {...$$props} />
|
||||||
|
{:else if story === 'interactive'}
|
||||||
|
<ProgressIndicator {...$$props}>
|
||||||
|
<ProgressStep description="Step 1: Register a onChange event" let:props>
|
||||||
|
<div {...props}>Click me</div>
|
||||||
|
</ProgressStep>
|
||||||
|
<ProgressStep
|
||||||
|
label="Really long label"
|
||||||
|
description="The progress indicator will listen for clicks on the steps" />
|
||||||
|
<ProgressStep
|
||||||
|
label="Tooltip and really long label"
|
||||||
|
description="The progress indicator will listen for clicks on the steps" />
|
||||||
|
</ProgressIndicator>
|
||||||
|
{:else}
|
||||||
|
<ProgressIndicator {...$$props}>
|
||||||
|
<ProgressStep
|
||||||
|
label="First step"
|
||||||
|
description="Step 1: Getting started with Carbon Design System"
|
||||||
|
secondaryLabel="Optional label" />
|
||||||
|
<ProgressStep
|
||||||
|
label="Second step with tooltip"
|
||||||
|
description="Step 2: Getting started with Carbon Design System"
|
||||||
|
secondaryLabel="Optional label" />
|
||||||
|
<ProgressStep
|
||||||
|
label="Third step with tooltip"
|
||||||
|
description="Step 3: Getting started with Carbon Design System" />
|
||||||
|
<ProgressStep
|
||||||
|
label="Fourth step"
|
||||||
|
description="Step 4: Getting started with Carbon Design System"
|
||||||
|
invalid
|
||||||
|
secondaryLabel="Example invalid step" />
|
||||||
|
<ProgressStep
|
||||||
|
label="Fifth step"
|
||||||
|
description="Step 5: Getting started with Carbon Design System"
|
||||||
|
disabled />
|
||||||
|
</ProgressIndicator>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
import { withKnobs, boolean, text, number } from '@storybook/addon-knobs';
|
||||||
|
import Component from './ProgressIndicator.Story.svelte';
|
||||||
|
|
||||||
|
export default { title: 'ProgressIndicator', decorators: [withKnobs] };
|
||||||
|
|
||||||
|
export const Default = () => ({
|
||||||
|
Component,
|
||||||
|
props: {
|
||||||
|
currentIndex: number('Current progress (currentIndex)', 1),
|
||||||
|
vertical: boolean('Vertical orientation (vertical)', false)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export const Interactive = () => ({
|
||||||
|
Component,
|
||||||
|
props: {
|
||||||
|
story: 'interactive',
|
||||||
|
currentIndex: number('Current progress (currentIndex)', 1),
|
||||||
|
vertical: boolean('Vertical orientation (vertical)', false)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export const Skeleton = () => ({
|
||||||
|
Component,
|
||||||
|
props: {
|
||||||
|
story: 'skeleton',
|
||||||
|
vertical: boolean('Vertical orientation (vertical)', false)
|
||||||
|
}
|
||||||
|
});
|
||||||
39
src/components/ProgressIndicator/ProgressIndicator.svelte
Normal file
39
src/components/ProgressIndicator/ProgressIndicator.svelte
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let currentIndex = 0;
|
||||||
|
export let vertical = false;
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { createEventDispatcher, setContext } from 'svelte';
|
||||||
|
import { writable, derived } from 'svelte/store';
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
const _class = cx('--progress', vertical && '--progress--vertical', className);
|
||||||
|
let steps = writable([]);
|
||||||
|
let stepsById = derived(steps, $steps => $steps.reduce((a, c) => ({ ...a, [c.id]: c }), {}));
|
||||||
|
|
||||||
|
setContext('ProgressIndicator', {
|
||||||
|
steps,
|
||||||
|
stepsById,
|
||||||
|
add: step => {
|
||||||
|
steps.update(_ => [
|
||||||
|
..._,
|
||||||
|
{
|
||||||
|
...step,
|
||||||
|
index: _.length,
|
||||||
|
current: _.length === currentIndex,
|
||||||
|
complete: _.length <= currentIndex
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
change: index => {
|
||||||
|
dispatch('change', index);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ul on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
|
||||||
|
<slot />
|
||||||
|
</ul>
|
||||||
82
src/components/ProgressIndicator/ProgressStep.svelte
Normal file
82
src/components/ProgressIndicator/ProgressStep.svelte
Normal file
|
|
@ -0,0 +1,82 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let label = '';
|
||||||
|
export let current = false;
|
||||||
|
export let complete = false;
|
||||||
|
export let description = '';
|
||||||
|
export let invalid = false;
|
||||||
|
export let secondaryLabel = '';
|
||||||
|
export let disabled = false;
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { createEventDispatcher, getContext } from 'svelte';
|
||||||
|
import Warning16 from 'carbon-icons-svelte/lib/Warning16';
|
||||||
|
import CheckmarkOutline16 from 'carbon-icons-svelte/lib/CheckmarkOutline16';
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
const id = Math.random();
|
||||||
|
const { stepsById, add, change } = getContext('ProgressIndicator');
|
||||||
|
|
||||||
|
add({ id, disabled });
|
||||||
|
|
||||||
|
$: step = $stepsById[id];
|
||||||
|
$: {
|
||||||
|
current = step.current;
|
||||||
|
complete = step.complete;
|
||||||
|
}
|
||||||
|
$: _class = cx(
|
||||||
|
'--progress-step',
|
||||||
|
current && '--progress-step--current',
|
||||||
|
complete && '--progress-step--complete',
|
||||||
|
!complete && !current && '--progress-step--incomplete',
|
||||||
|
disabled && '--progress-step--disabled',
|
||||||
|
className
|
||||||
|
);
|
||||||
|
$: _buttonClass = cx('--progress-step-button', current && '--progress-step-button--unclickable');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<li aria-disabled={disabled} class={_class} {style}>
|
||||||
|
<div
|
||||||
|
role="button"
|
||||||
|
class={_buttonClass}
|
||||||
|
tabindex={current ? '-1' : '0'}
|
||||||
|
on:click={() => {
|
||||||
|
change(step.index);
|
||||||
|
}}
|
||||||
|
on:mouseover
|
||||||
|
on:mouseenter
|
||||||
|
on:mouseleave
|
||||||
|
on:keydown
|
||||||
|
on:keydown={event => {
|
||||||
|
if (event.key === ' ' || event.key === 'Enter') {
|
||||||
|
change(step.index);
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
{#if invalid}
|
||||||
|
<Warning16 class={cx('--progress__warning')} />
|
||||||
|
{:else if current}
|
||||||
|
<svg>
|
||||||
|
<path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0" />
|
||||||
|
<title>{description}</title>
|
||||||
|
</svg>
|
||||||
|
{:else if complete}
|
||||||
|
<CheckmarkOutline16 title={description} />
|
||||||
|
{:else}
|
||||||
|
<svg>
|
||||||
|
<title>{description}</title>
|
||||||
|
<path
|
||||||
|
d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3 0-6-2.7-6-6s2.7-6 6-6 6
|
||||||
|
2.7 6 6-2.7 6-6 6z" />
|
||||||
|
</svg>
|
||||||
|
{/if}
|
||||||
|
<slot props={{ class: cx('--progress-label') }}>
|
||||||
|
<p class={cx('--progress-label')}>{label}</p>
|
||||||
|
</slot>
|
||||||
|
{#if secondaryLabel}
|
||||||
|
<p class={cx('--progress-optional')}>{secondaryLabel}</p>
|
||||||
|
{/if}
|
||||||
|
<span class={cx('--progress-line')} />
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
5
src/components/ProgressIndicator/index.js
Normal file
5
src/components/ProgressIndicator/index.js
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
import ProgressIndicator from './ProgressIndicator.svelte';
|
||||||
|
|
||||||
|
export default ProgressIndicator;
|
||||||
|
export { default as ProgressIndicatorSkeleton } from './ProgressIndicator.Skeleton.svelte';
|
||||||
|
export { default as ProgressStep } from './ProgressStep.svelte';
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let props = {};
|
export let style = undefined;
|
||||||
|
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
const _class = cx('--radio-button-wrapper', className);
|
const _class = cx('--radio-button-wrapper', className);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div {...props} class={_class}>
|
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
|
||||||
<div class={cx('--radio-button', '--skeleton')} />
|
<div class={cx('--radio-button', '--skeleton')} />
|
||||||
<span class={cx('--radio-button__label', '--skeleton')} />
|
<span class={cx('--radio-button__label', '--skeleton')} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -8,11 +8,8 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
|
|
||||||
{#if story === 'skeleton'}
|
{#if story === 'skeleton'}
|
||||||
<div>
|
<RadioButtonSkeleton />
|
||||||
<RadioButtonSkeleton />
|
|
||||||
</div>
|
|
||||||
{:else}
|
{:else}
|
||||||
<RadioButton {...$$props} id="radio-1" />
|
<RadioButton {...$$props} id="radio-1" />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
||||||
|
|
@ -9,26 +9,38 @@
|
||||||
export let hideLabel = false;
|
export let hideLabel = false;
|
||||||
export let labelPosition = 'right';
|
export let labelPosition = 'right';
|
||||||
export let name = '';
|
export let name = '';
|
||||||
export let props = {};
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { getContext } from 'svelte';
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const ctx = getContext('RadioButtonGroup');
|
||||||
const _class = cx(
|
const _class = cx(
|
||||||
'--radio-button-wrapper',
|
'--radio-button-wrapper',
|
||||||
labelPosition !== 'right' && `--radio-button-wrapper--label-${labelPosition}`,
|
labelPosition !== 'right' && `--radio-button-wrapper--label-${labelPosition}`,
|
||||||
className
|
className
|
||||||
);
|
);
|
||||||
const _innerLabelClass = cx(hideLabel && '--visually-hidden');
|
const _innerLabelClass = cx(hideLabel && '--visually-hidden');
|
||||||
|
|
||||||
|
let selected = ctx ? ctx.selected : writable(checked ? value : undefined);
|
||||||
|
|
||||||
|
if (ctx) {
|
||||||
|
ctx.add({ id, checked, disabled, value });
|
||||||
|
}
|
||||||
|
|
||||||
|
$: checked = $selected === value;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class={_class}>
|
<div class={_class} {style}>
|
||||||
<input
|
<input
|
||||||
{...props}
|
|
||||||
type="radio"
|
type="radio"
|
||||||
class={cx('--radio-button')}
|
class={cx('--radio-button')}
|
||||||
on:change
|
on:change
|
||||||
on:change={event => {
|
on:change={() => {
|
||||||
value = event.target.value;
|
if (ctx) {
|
||||||
|
ctx.update(value);
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
{id}
|
{id}
|
||||||
{name}
|
{name}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
<script>
|
||||||
|
import Layout from '../../internal/ui/Layout.svelte';
|
||||||
|
import RadioButtonGroup from './RadioButtonGroup.svelte';
|
||||||
|
import RadioButton from '../RadioButton';
|
||||||
|
import { FormGroup } from '../Form';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Layout>
|
||||||
|
<FormGroup legendText="Radio Button heading">
|
||||||
|
<RadioButtonGroup {...$$props.group} defaultSelected="default-selected" legend="Group Legend">
|
||||||
|
<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" />
|
||||||
|
</RadioButtonGroup>
|
||||||
|
</FormGroup>
|
||||||
|
</Layout>
|
||||||
40
src/components/RadioButtonGroup/RadioButtonGroup.stories.js
Normal file
40
src/components/RadioButtonGroup/RadioButtonGroup.stories.js
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
|
||||||
|
import Component from './RadioButtonGroup.Story.svelte';
|
||||||
|
|
||||||
|
export default { title: 'RadioButtonGroup', decorators: [withKnobs] };
|
||||||
|
|
||||||
|
const values = {
|
||||||
|
standard: 'standard',
|
||||||
|
'default-selected': 'default-selected',
|
||||||
|
disabled: 'disabled'
|
||||||
|
};
|
||||||
|
|
||||||
|
const orientations = {
|
||||||
|
'Horizontal (horizontal)': 'horizontal',
|
||||||
|
'Vertical (vertical)': 'vertical'
|
||||||
|
};
|
||||||
|
|
||||||
|
const labelPositions = {
|
||||||
|
'Left (left)': 'left',
|
||||||
|
'Right (right)': 'right'
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Default = () => ({
|
||||||
|
Component,
|
||||||
|
props: {
|
||||||
|
group: {
|
||||||
|
name: text('The form control name (name in <RadioButtonGroup>)', 'radio-button-group'),
|
||||||
|
valueSelected: select(
|
||||||
|
'Value of the selected button (valueSelected in <RadioButtonGroup>)',
|
||||||
|
values,
|
||||||
|
'default-selected'
|
||||||
|
),
|
||||||
|
orientation: select('Radio button orientation (orientation)', orientations, 'horizontal'),
|
||||||
|
labelPosition: select('Label position (labelPosition)', labelPositions, 'right')
|
||||||
|
},
|
||||||
|
radio: {
|
||||||
|
disabled: boolean('Disabled (disabled in <RadioButton>)', false),
|
||||||
|
labelText: text('Label text (labelText in <RadioButton>)', 'Radio button label')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
46
src/components/RadioButtonGroup/RadioButtonGroup.svelte
Normal file
46
src/components/RadioButtonGroup/RadioButtonGroup.svelte
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let orientation = 'horizontal';
|
||||||
|
export let labelPosition = 'right';
|
||||||
|
export let defaultSelected = undefined;
|
||||||
|
export let disabled = false;
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { createEventDispatcher, setContext } from 'svelte';
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
const _class = cx(
|
||||||
|
'--radio-button-group',
|
||||||
|
orientation === 'vertical' && `--radio-button-group--${orientation}`,
|
||||||
|
labelPosition && `--radio-button-group--label-${labelPosition}`,
|
||||||
|
className
|
||||||
|
);
|
||||||
|
|
||||||
|
let selected = writable(defaultSelected);
|
||||||
|
|
||||||
|
setContext('RadioButtonGroup', {
|
||||||
|
selected,
|
||||||
|
add: ({ checked, value }) => {
|
||||||
|
if (checked) {
|
||||||
|
selected.set(value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
update: value => {
|
||||||
|
selected.set(value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$: {
|
||||||
|
defaultSelected = $selected;
|
||||||
|
dispatch('change', $selected);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item')} {style}>
|
||||||
|
<div class={_class} {disabled}>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
3
src/components/RadioButtonGroup/index.js
Normal file
3
src/components/RadioButtonGroup/index.js
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import RadioButtonGroup from './RadioButtonGroup.svelte';
|
||||||
|
|
||||||
|
export default RadioButtonGroup;
|
||||||
19
src/components/Select/Select.Skeleton.svelte
Normal file
19
src/components/Select/Select.Skeleton.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let hideLabel = false;
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const _class = cx('--form-item', className);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
|
||||||
|
{#if !hideLabel}
|
||||||
|
<span class={cx('--label', '--skeleton')} />
|
||||||
|
{/if}
|
||||||
|
<div class={cx('--select', '--skeleton')}>
|
||||||
|
<div class={cx('--select-input')} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
29
src/components/Select/Select.Story.svelte
Normal file
29
src/components/Select/Select.Story.svelte
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
<script>
|
||||||
|
export let story = undefined;
|
||||||
|
|
||||||
|
import Layout from '../../internal/ui/Layout.svelte';
|
||||||
|
import Select from './Select.svelte';
|
||||||
|
import SelectItem from './SelectItem.svelte';
|
||||||
|
import SelectSkeleton from './Select.Skeleton.svelte';
|
||||||
|
import SelectItemGroup from './SelectItemGroup.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Layout>
|
||||||
|
<div>
|
||||||
|
{#if story === 'skeleton'}
|
||||||
|
<SelectSkeleton {...$$props} />
|
||||||
|
{:else}
|
||||||
|
<Select {...$$props.select} id="select-1" defaultValue="placeholder-item">
|
||||||
|
<SelectItem value="placeholder-item" text="Choose an option" disabled hidden />
|
||||||
|
<SelectItemGroup {...$$props.group} label="Category 1">
|
||||||
|
<SelectItem value="option-1" text="Option 1" />
|
||||||
|
<SelectItem value="option-2" text="Option 2" />
|
||||||
|
</SelectItemGroup>
|
||||||
|
<SelectItemGroup {...$$props.group} label="Category 2">
|
||||||
|
<SelectItem value="option-3" text="Option 3" />
|
||||||
|
<SelectItem value="option-4" text="Option 4" />
|
||||||
|
</SelectItemGroup>
|
||||||
|
</Select>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
36
src/components/Select/Select.stories.js
Normal file
36
src/components/Select/Select.stories.js
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
import { withKnobs, text, boolean } from '@storybook/addon-knobs';
|
||||||
|
import Component from './Select.Story.svelte';
|
||||||
|
|
||||||
|
export default { title: 'Select', decorators: [withKnobs] };
|
||||||
|
|
||||||
|
const labelPositions = {
|
||||||
|
'Left (left)': 'left',
|
||||||
|
'Right (right)': 'right'
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Default = () => ({
|
||||||
|
Component,
|
||||||
|
props: {
|
||||||
|
select: {
|
||||||
|
light: boolean('Light variant (light in <Select>)', false),
|
||||||
|
inline: boolean('Put control in-line with label (inline in <Select>)', false),
|
||||||
|
disabled: boolean('Disabled (disabled in <Select>)', false),
|
||||||
|
hideLabel: boolean('No label (hideLabel in <Select>)', false),
|
||||||
|
invalid: boolean('Show form validation UI (invalid in <Select>)', false),
|
||||||
|
invalidText: text(
|
||||||
|
'Form validation UI content (invalidText in <Select>)',
|
||||||
|
'A valid value is required'
|
||||||
|
),
|
||||||
|
labelText: text('Label text (helperText)', 'Select'),
|
||||||
|
helperText: text('Helper text (helperText)', 'Optional helper text.')
|
||||||
|
},
|
||||||
|
group: {
|
||||||
|
disabled: boolean('Disabled (disabled in <SelectItemGroup>)', false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export const Skeleton = () => ({
|
||||||
|
Component,
|
||||||
|
props: { story: 'skeleton', hideLabel: boolean('No label (hideLabel in <Select>)', false) }
|
||||||
|
});
|
||||||
110
src/components/Select/Select.svelte
Normal file
110
src/components/Select/Select.svelte
Normal file
|
|
@ -0,0 +1,110 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
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 light = false;
|
||||||
|
export let noLabel = false;
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { createEventDispatcher, setContext } from 'svelte';
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
|
||||||
|
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
const errorId = `error-${id}`;
|
||||||
|
const _class = cx(
|
||||||
|
'--select',
|
||||||
|
inline && '--select--inline',
|
||||||
|
light && '--select--light',
|
||||||
|
invalid && '--select--invalid',
|
||||||
|
disabled && '--select--disabled',
|
||||||
|
className
|
||||||
|
);
|
||||||
|
const _labelClass = cx(
|
||||||
|
'--label',
|
||||||
|
hideLabel && '--visually-hidden',
|
||||||
|
disabled && '--label--disabled'
|
||||||
|
);
|
||||||
|
const _helperTextClass = cx('--form__helper-text', disabled && '--form__helper-text--disabled');
|
||||||
|
|
||||||
|
let selected = writable(defaultValue);
|
||||||
|
|
||||||
|
setContext('Select', { selected });
|
||||||
|
|
||||||
|
$: {
|
||||||
|
defaultValue = $selected;
|
||||||
|
dispatch('change', $selected);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class={cx('--form-item')} {style}>
|
||||||
|
<div class={_class}>
|
||||||
|
{#if !noLabel}
|
||||||
|
<label for={id} class={_labelClass}>{labelText}</label>
|
||||||
|
{/if}
|
||||||
|
{#if !inline && helperText}
|
||||||
|
<div class={_helperTextClass}>{helperText}</div>
|
||||||
|
{/if}
|
||||||
|
{#if inline}
|
||||||
|
<div class={cx('--select-input--inline__wrapper')}>
|
||||||
|
<div class={cx('--select-input__wrapper')} data-invalid={invalid || undefined}>
|
||||||
|
<select
|
||||||
|
class={cx('--select-input')}
|
||||||
|
aria-describedby={invalid ? errorId : undefined}
|
||||||
|
disabled={disabled || undefined}
|
||||||
|
aria-invalid={invalid || undefined}
|
||||||
|
on:change={event => {
|
||||||
|
selected.set(event.target.value);
|
||||||
|
}}
|
||||||
|
{id}>
|
||||||
|
<slot />
|
||||||
|
</select>
|
||||||
|
<ChevronDown16 class={cx('--select__arrow')} />
|
||||||
|
{#if invalid}
|
||||||
|
<WarningFilled16 class={cx('--select__invalid-icon')} />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{#if invalid}
|
||||||
|
<div class={cx('--form-requirement')} id={errorId}>{invalidText}</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{#if helperText}
|
||||||
|
<div class={_helperTextClass}>{helperText}</div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if !inline}
|
||||||
|
<div class={cx('--select-input__wrapper')} data-invalid={invalid || undefined}>
|
||||||
|
<select
|
||||||
|
class={cx('--select-input')}
|
||||||
|
aria-describedby={invalid ? errorId : undefined}
|
||||||
|
disabled={disabled || undefined}
|
||||||
|
aria-invalid={invalid || undefined}
|
||||||
|
on:change
|
||||||
|
on:change={event => {
|
||||||
|
selected.set(event.target.value);
|
||||||
|
}}
|
||||||
|
{id}>
|
||||||
|
<slot />
|
||||||
|
</select>
|
||||||
|
<ChevronDown16 class={cx('--select__arrow')} />
|
||||||
|
{#if invalid}
|
||||||
|
<WarningFilled16 class={cx('--select__invalid-icon')} />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{#if invalid}
|
||||||
|
<div class={cx('--form-requirement')} id={errorId}>{invalidText}</div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
19
src/components/Select/SelectItem.svelte
Normal file
19
src/components/Select/SelectItem.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<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;
|
||||||
|
|
||||||
|
import { getContext } from 'svelte';
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const { selected } = getContext('Select');
|
||||||
|
const _class = cx('--select-option', className);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<option class={_class} {value} {disabled} {hidden} {style} selected={$selected === value}>
|
||||||
|
{text}
|
||||||
|
</option>
|
||||||
15
src/components/Select/SelectItemGroup.svelte
Normal file
15
src/components/Select/SelectItemGroup.svelte
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let disabled = false;
|
||||||
|
export let label = 'Provide label';
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const _class = cx('--select-optgroup', className);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<optgroup class={_class} {label} {disabled} {style}>
|
||||||
|
<slot />
|
||||||
|
</optgroup>
|
||||||
6
src/components/Select/index.js
Normal file
6
src/components/Select/index.js
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import Select from './Select.svelte';
|
||||||
|
|
||||||
|
export default Select;
|
||||||
|
export { default as SelectSkeleton } from './Select.Skeleton.svelte';
|
||||||
|
export { default as SelectItem } from './SelectItem.svelte';
|
||||||
|
export { default as SelectItemGroup } from './SelectItemGroup.svelte';
|
||||||
42
src/components/StructuredList/StructuredList.Skeleton.svelte
Normal file
42
src/components/StructuredList/StructuredList.Skeleton.svelte
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let border = false;
|
||||||
|
export let rowCount = 5;
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const _class = cx(
|
||||||
|
'--skeleton',
|
||||||
|
'--structured-list',
|
||||||
|
border && '--structured-list--border',
|
||||||
|
className
|
||||||
|
);
|
||||||
|
const rows = Array.from({ length: rowCount - 1 }, (_, i) => i);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
|
||||||
|
<div class={cx('--structured-list-thead')}>
|
||||||
|
<div class={cx('--structured-list-row', '--structured-list-row--header-row')}>
|
||||||
|
<div class={cx('--structured-list-th')}>
|
||||||
|
<span />
|
||||||
|
</div>
|
||||||
|
<div class={cx('--structured-list-th')}>
|
||||||
|
<span />
|
||||||
|
</div>
|
||||||
|
<div class={cx('--structured-list-th')}>
|
||||||
|
<span />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class={cx('--structured-list-tbody')}>
|
||||||
|
{#each rows as row, i (row)}
|
||||||
|
<div class={cx('--structured-list-row')}>
|
||||||
|
<div class={cx('--structured-list-td')} />
|
||||||
|
<div class={cx('--structured-list-td')} />
|
||||||
|
<div class={cx('--structured-list-td')} />
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
90
src/components/StructuredList/StructuredList.Story.svelte
Normal file
90
src/components/StructuredList/StructuredList.Story.svelte
Normal file
|
|
@ -0,0 +1,90 @@
|
||||||
|
<script>
|
||||||
|
export let story = undefined;
|
||||||
|
|
||||||
|
import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
|
||||||
|
import Layout from '../../internal/ui/Layout.svelte';
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
import StructuredListBody from './StructuredListBody.svelte';
|
||||||
|
import StructuredListCell from './StructuredListCell.svelte';
|
||||||
|
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';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Layout>
|
||||||
|
<div>
|
||||||
|
{#if story === 'skeleton'}
|
||||||
|
<div style="width: 800px">
|
||||||
|
<StructuredListSkeleton />
|
||||||
|
<StructuredListSkeleton border />
|
||||||
|
</div>
|
||||||
|
{:else if story === 'selection'}
|
||||||
|
<StructuredListWrapper selection border defaultSelected="row-1-value">
|
||||||
|
<StructuredListHead>
|
||||||
|
<StructuredListRow head>
|
||||||
|
<StructuredListCell head>ColumnA</StructuredListCell>
|
||||||
|
<StructuredListCell head>ColumnB</StructuredListCell>
|
||||||
|
<StructuredListCell head>ColumnC</StructuredListCell>
|
||||||
|
<StructuredListCell head>{''}</StructuredListCell>
|
||||||
|
</StructuredListRow>
|
||||||
|
</StructuredListHead>
|
||||||
|
<StructuredListBody>
|
||||||
|
{#each [0, 1, 2, 3] as item, i (item)}
|
||||||
|
<StructuredListRow label for={`row-${i}`}>
|
||||||
|
<StructuredListCell>Row {i}</StructuredListCell>
|
||||||
|
<StructuredListCell>Row {i}</StructuredListCell>
|
||||||
|
<StructuredListCell>
|
||||||
|
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.
|
||||||
|
</StructuredListCell>
|
||||||
|
<StructuredListInput
|
||||||
|
id={`row-${i}`}
|
||||||
|
value={`row-${i}-value`}
|
||||||
|
title={`row-${i}-title`}
|
||||||
|
name={`row-${i}-name`} />
|
||||||
|
<StructuredListCell>
|
||||||
|
<CheckmarkFilled16
|
||||||
|
class={cx('--structured-list-svg')}
|
||||||
|
aria-label="select an option"
|
||||||
|
title="select an option" />
|
||||||
|
</StructuredListCell>
|
||||||
|
</StructuredListRow>
|
||||||
|
{/each}
|
||||||
|
</StructuredListBody>
|
||||||
|
</StructuredListWrapper>
|
||||||
|
{:else}
|
||||||
|
<StructuredListWrapper>
|
||||||
|
<StructuredListHead>
|
||||||
|
<StructuredListRow head>
|
||||||
|
<StructuredListCell head>ColumnA</StructuredListCell>
|
||||||
|
<StructuredListCell head>ColumnB</StructuredListCell>
|
||||||
|
<StructuredListCell head>ColumnC</StructuredListCell>
|
||||||
|
</StructuredListRow>
|
||||||
|
</StructuredListHead>
|
||||||
|
<StructuredListBody>
|
||||||
|
<StructuredListRow>
|
||||||
|
<StructuredListCell noWrap>Row 1</StructuredListCell>
|
||||||
|
<StructuredListCell>Row 1</StructuredListCell>
|
||||||
|
<StructuredListCell>
|
||||||
|
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.
|
||||||
|
</StructuredListCell>
|
||||||
|
</StructuredListRow>
|
||||||
|
<StructuredListRow>
|
||||||
|
<StructuredListCell noWrap>Row 2</StructuredListCell>
|
||||||
|
<StructuredListCell>Row 2</StructuredListCell>
|
||||||
|
<StructuredListCell>
|
||||||
|
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.
|
||||||
|
</StructuredListCell>
|
||||||
|
</StructuredListRow>
|
||||||
|
</StructuredListBody>
|
||||||
|
</StructuredListWrapper>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
10
src/components/StructuredList/StructuredList.stories.js
Normal file
10
src/components/StructuredList/StructuredList.stories.js
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
|
||||||
|
import Component from './StructuredList.Story.svelte';
|
||||||
|
|
||||||
|
export default { title: 'StructuredList', decorators: [withKnobs] };
|
||||||
|
|
||||||
|
export const Default = () => ({ Component });
|
||||||
|
|
||||||
|
export const Selection = () => ({ Component, props: { story: 'selection' } });
|
||||||
|
|
||||||
|
export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });
|
||||||
13
src/components/StructuredList/StructuredListBody.svelte
Normal file
13
src/components/StructuredList/StructuredListBody.svelte
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const _class = cx('--structured-list-tbody', className);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
20
src/components/StructuredList/StructuredListCell.svelte
Normal file
20
src/components/StructuredList/StructuredListCell.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let head = false;
|
||||||
|
export let noWrap = false;
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const _class = cx(
|
||||||
|
head && '--structured-list-th',
|
||||||
|
!head && '--structured-list-td',
|
||||||
|
noWrap && '--structured-list-content--nowrap',
|
||||||
|
className
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
13
src/components/StructuredList/StructuredListHead.svelte
Normal file
13
src/components/StructuredList/StructuredListHead.svelte
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const _class = cx('--structured-list-thead', className);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
37
src/components/StructuredList/StructuredListInput.svelte
Normal file
37
src/components/StructuredList/StructuredListInput.svelte
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
<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 style = undefined;
|
||||||
|
|
||||||
|
import { getContext } from 'svelte';
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const _class = cx('--structured-list-input', className);
|
||||||
|
|
||||||
|
const { selected, update } = getContext('StructuredListWrapper');
|
||||||
|
|
||||||
|
if (checked) {
|
||||||
|
update(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
$: checked = $selected === value;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
tabindex="-1"
|
||||||
|
class={_class}
|
||||||
|
on:change={() => {
|
||||||
|
update(value);
|
||||||
|
}}
|
||||||
|
{value}
|
||||||
|
{name}
|
||||||
|
{title}
|
||||||
|
{style}
|
||||||
|
{id}
|
||||||
|
{checked} />
|
||||||
36
src/components/StructuredList/StructuredListRow.svelte
Normal file
36
src/components/StructuredList/StructuredListRow.svelte
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let head = false;
|
||||||
|
export let label = false;
|
||||||
|
export let tabindex = '0';
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const _class = cx(
|
||||||
|
'--structured-list-row',
|
||||||
|
head && '--structured-list-row--header-row',
|
||||||
|
className
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if label}
|
||||||
|
<label
|
||||||
|
role="presentation"
|
||||||
|
on:click
|
||||||
|
on:mouseover
|
||||||
|
on:mouseenter
|
||||||
|
on:mouseleave
|
||||||
|
on:keydown
|
||||||
|
class={_class}
|
||||||
|
for={$$props.for}
|
||||||
|
{tabindex}
|
||||||
|
{style}>
|
||||||
|
<slot />
|
||||||
|
</label>
|
||||||
|
{:else}
|
||||||
|
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
45
src/components/StructuredList/StructuredListWrapper.svelte
Normal file
45
src/components/StructuredList/StructuredListWrapper.svelte
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let defaultSelected = undefined;
|
||||||
|
export let border = false;
|
||||||
|
export let selection = false;
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { createEventDispatcher, setContext } from 'svelte';
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
const _class = cx(
|
||||||
|
'--structured-list',
|
||||||
|
border && '--structured-list--border',
|
||||||
|
selection && '--structured-list--selection',
|
||||||
|
className
|
||||||
|
);
|
||||||
|
|
||||||
|
let selected = writable(defaultSelected);
|
||||||
|
|
||||||
|
setContext('StructuredListWrapper', {
|
||||||
|
selected,
|
||||||
|
update: value => {
|
||||||
|
selected.set(value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$: {
|
||||||
|
defaultSelected = $selected;
|
||||||
|
dispatch('change', $selected);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section
|
||||||
|
on:click
|
||||||
|
on:mouseover
|
||||||
|
on:mouseenter
|
||||||
|
on:mouseleave
|
||||||
|
class={_class}
|
||||||
|
aria-label={$$props['aria-label'] || 'Structured list section'}
|
||||||
|
{style}>
|
||||||
|
<slot />
|
||||||
|
</section>
|
||||||
7
src/components/StructuredList/index.js
Normal file
7
src/components/StructuredList/index.js
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
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';
|
||||||
|
|
@ -16,17 +16,14 @@
|
||||||
export let tooltipAlignment = 'center';
|
export let tooltipAlignment = 'center';
|
||||||
export let hidePasswordLabel = 'Hide password';
|
export let hidePasswordLabel = 'Hide password';
|
||||||
export let showPasswordLabel = 'Show password';
|
export let showPasswordLabel = 'Show password';
|
||||||
export let props = {};
|
export let style = undefined;
|
||||||
|
|
||||||
import { createEventDispatcher } from 'svelte';
|
|
||||||
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
|
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
|
||||||
import View16 from 'carbon-icons-svelte/lib/View16';
|
import View16 from 'carbon-icons-svelte/lib/View16';
|
||||||
import ViewOff16 from 'carbon-icons-svelte/lib/ViewOff16';
|
import ViewOff16 from 'carbon-icons-svelte/lib/ViewOff16';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
const errorId = `${id}-error`;
|
const errorId = `${id}-error`;
|
||||||
const passwordIsVisible = type === 'text';
|
|
||||||
const _labelClass = cx(
|
const _labelClass = cx(
|
||||||
'--label',
|
'--label',
|
||||||
hideLabel && '--visually-hidden',
|
hideLabel && '--visually-hidden',
|
||||||
|
|
@ -48,13 +45,14 @@
|
||||||
tooltipPosition && `--tooltip--${tooltipPosition}`,
|
tooltipPosition && `--tooltip--${tooltipPosition}`,
|
||||||
tooltipAlignment && `--tooltip--align-${tooltipAlignment}`
|
tooltipAlignment && `--tooltip--align-${tooltipAlignment}`
|
||||||
);
|
);
|
||||||
|
|
||||||
|
$: passwordIsVisible = type === 'text';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class={cx('--form-item', '--text-input-wrapper', '--password-input-wrapper')}>
|
<div class={cx('--form-item', '--text-input-wrapper', '--password-input-wrapper')} {style}>
|
||||||
{#if labelText}
|
{#if labelText}
|
||||||
<label for={id} class={_labelClass}>{labelText}</label>
|
<label for={id} class={_labelClass}>{labelText}</label>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if helperText}
|
{#if helperText}
|
||||||
<div class={_helperTextClass}>{helperText}</div>
|
<div class={_helperTextClass}>{helperText}</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
@ -63,23 +61,12 @@
|
||||||
<WarningFilled16 class={cx('--text-input__invalid-icon')} />
|
<WarningFilled16 class={cx('--text-input__invalid-icon')} />
|
||||||
{/if}
|
{/if}
|
||||||
<input
|
<input
|
||||||
{...props}
|
|
||||||
class={_textInputClass}
|
class={_textInputClass}
|
||||||
on:click={event => {
|
on:click
|
||||||
if (!disabled) {
|
on:change
|
||||||
dispatch('click', event);
|
on:input
|
||||||
}
|
|
||||||
}}
|
|
||||||
on:change={event => {
|
|
||||||
if (!disabled) {
|
|
||||||
dispatch('change', event);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
on:input={event => {
|
on:input={event => {
|
||||||
value = event.target.value;
|
value = event.target.value;
|
||||||
if (!disabled) {
|
|
||||||
dispatch('input', event);
|
|
||||||
}
|
|
||||||
}}
|
}}
|
||||||
data-invalid={invalid || undefined}
|
data-invalid={invalid || undefined}
|
||||||
aria-invalid={invalid || undefined}
|
aria-invalid={invalid || undefined}
|
||||||
|
|
|
||||||
|
|
@ -2,14 +2,14 @@
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let hideLabel = false;
|
export let hideLabel = false;
|
||||||
export let props = {};
|
export let style = undefined;
|
||||||
|
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
const _class = cx('--form-item', className);
|
const _class = cx('--form-item', className);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div {...props} class={_class}>
|
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
|
||||||
{#if !hideLabel}
|
{#if !hideLabel}
|
||||||
<span class={cx('--label', '--skeleton')} />
|
<span class={cx('--label', '--skeleton')} />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
||||||
|
|
@ -36,6 +36,11 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<TextInput {...$$props} bind:value />
|
<TextInput
|
||||||
|
{...$$props}
|
||||||
|
bind:value
|
||||||
|
on:change={() => {
|
||||||
|
console.log('change');
|
||||||
|
}} />
|
||||||
{/if}
|
{/if}
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
|
|
@ -12,13 +12,11 @@
|
||||||
export let helperText = '';
|
export let helperText = '';
|
||||||
export let hideLabel = false;
|
export let hideLabel = false;
|
||||||
export let light = false;
|
export let light = false;
|
||||||
export let props = {};
|
export let style = undefined;
|
||||||
|
|
||||||
import { createEventDispatcher } from 'svelte';
|
|
||||||
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
|
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
const errorId = `${id}-error`;
|
const errorId = `${id}-error`;
|
||||||
const _labelClass = cx(
|
const _labelClass = cx(
|
||||||
'--label',
|
'--label',
|
||||||
|
|
@ -34,7 +32,7 @@
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class={cx('--form-item', '--text-input-wrapper')}>
|
<div class={cx('--form-item', '--text-input-wrapper')} {style}>
|
||||||
{#if labelText}
|
{#if labelText}
|
||||||
<label for={id} class={_labelClass}>{labelText}</label>
|
<label for={id} class={_labelClass}>{labelText}</label>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
@ -46,23 +44,11 @@
|
||||||
<WarningFilled16 class={cx('--text-input__invalid-icon')} />
|
<WarningFilled16 class={cx('--text-input__invalid-icon')} />
|
||||||
{/if}
|
{/if}
|
||||||
<input
|
<input
|
||||||
{...props}
|
|
||||||
class={_textInputClass}
|
class={_textInputClass}
|
||||||
on:click={event => {
|
on:click
|
||||||
if (!disabled) {
|
on:change
|
||||||
dispatch('click', event);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
on:change={event => {
|
|
||||||
if (!disabled) {
|
|
||||||
dispatch('change', event);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
on:input={event => {
|
on:input={event => {
|
||||||
value = event.target.value;
|
value = event.target.value;
|
||||||
if (!disabled) {
|
|
||||||
dispatch('input', event);
|
|
||||||
}
|
|
||||||
}}
|
}}
|
||||||
data-invalid={invalid || undefined}
|
data-invalid={invalid || undefined}
|
||||||
aria-invalid={invalid || undefined}
|
aria-invalid={invalid || undefined}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,5 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
<div>
|
<TooltipDefinition {...$$props}>Defintion Tooltip</TooltipDefinition>
|
||||||
<TooltipDefinition {...$$props}>Defintion Tooltip</TooltipDefinition>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
export let triggerClassName = undefined;
|
export let triggerClassName = undefined;
|
||||||
export { triggerClassName as triggerClass };
|
export { triggerClassName as triggerClass };
|
||||||
export let tooltipText = '';
|
export let tooltipText = '';
|
||||||
export let props = {};
|
export let style = undefined;
|
||||||
|
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div {...props} class={_class}>
|
<div class={_class} {style}>
|
||||||
<button
|
<button
|
||||||
on:click
|
on:click
|
||||||
on:mouseover
|
on:mouseover
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
export let align = 'center';
|
export let align = 'center';
|
||||||
export let id = Math.random();
|
export let id = Math.random();
|
||||||
export let tooltipText = '';
|
export let tooltipText = '';
|
||||||
export let props = {};
|
export let style = undefined;
|
||||||
|
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
|
@ -19,13 +19,13 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
{...props}
|
|
||||||
on:click
|
on:click
|
||||||
on:mouseover
|
on:mouseover
|
||||||
on:mouseenter
|
on:mouseenter
|
||||||
on:mouseleave
|
on:mouseleave
|
||||||
|
aria-describedby={id}
|
||||||
class={_class}
|
class={_class}
|
||||||
aria-describedby={id}>
|
{style}>
|
||||||
<span class={cx('--assistive-text')} {id}>{tooltipText}</span>
|
<span class={cx('--assistive-text')} {id}>{tooltipText}</span>
|
||||||
<slot />
|
<slot />
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import { withKnobs } from '@storybook/addon-knobs';
|
import { withKnobs } from '@storybook/addon-knobs';
|
||||||
import Component from './UnorderedList.Story.svelte';
|
import Component from './UnorderedList.Story.svelte';
|
||||||
|
|
||||||
export default { title: 'Unordered List', decorators: [withKnobs] };
|
export default { title: 'UnorderedList', decorators: [withKnobs] };
|
||||||
|
|
||||||
export const Default = () => ({ Component });
|
export const Default = () => ({ Component });
|
||||||
|
|
||||||
|
|
|
||||||
46
src/index.js
46
src/index.js
|
|
@ -8,14 +8,37 @@ import CopyButton from './components/CopyButton';
|
||||||
import CodeSnippet, { CodeSnippetSkeleton } from './components/CodeSnippet';
|
import CodeSnippet, { CodeSnippetSkeleton } from './components/CodeSnippet';
|
||||||
import DataTableSkeleton from './components/DataTableSkeleton';
|
import DataTableSkeleton from './components/DataTableSkeleton';
|
||||||
import InlineLoading from './components/InlineLoading';
|
import InlineLoading from './components/InlineLoading';
|
||||||
import Loading from './components/Loading';
|
|
||||||
import Link from './components/Link';
|
import Link from './components/Link';
|
||||||
import ListItem from './components/ListItem';
|
import ListItem from './components/ListItem';
|
||||||
|
import Loading from './components/Loading';
|
||||||
|
import {
|
||||||
|
ToastNotification,
|
||||||
|
InlineNotification,
|
||||||
|
NotificationActionButton,
|
||||||
|
NotificationButton,
|
||||||
|
NotificationIcon,
|
||||||
|
NotificationTextDetails
|
||||||
|
} from './components/Notification';
|
||||||
import OrderedList from './components/OrderedList';
|
import OrderedList from './components/OrderedList';
|
||||||
|
import ProgressIndicator, {
|
||||||
|
ProgressIndicatorSkeleton,
|
||||||
|
ProgressStep
|
||||||
|
} from './components/ProgressIndicator';
|
||||||
import RadioButton, { RadioButtonSkeleton } from './components/RadioButton';
|
import RadioButton, { RadioButtonSkeleton } from './components/RadioButton';
|
||||||
|
import RadioButtonGroup from './components/RadioButtonGroup';
|
||||||
import Search, { SearchSkeleton } from './components/Search';
|
import Search, { SearchSkeleton } from './components/Search';
|
||||||
|
import Select, { SelectSkeleton, SelectItem, SelectItemGroup } from './components/Select';
|
||||||
import SkeletonPlaceholder from './components/SkeletonPlaceholder';
|
import SkeletonPlaceholder from './components/SkeletonPlaceholder';
|
||||||
import SkeletonText from './components/SkeletonText';
|
import SkeletonText from './components/SkeletonText';
|
||||||
|
import {
|
||||||
|
StructuredListSkeleton,
|
||||||
|
StructuredListBody,
|
||||||
|
StructuredListHead,
|
||||||
|
StructuredListCell,
|
||||||
|
StructuredListRow,
|
||||||
|
StructuredListInput,
|
||||||
|
StructuredListWrapper
|
||||||
|
} from './components/StructuredList';
|
||||||
import Tabs, { Tab, TabContent, TabsSkeleton } from './components/Tabs';
|
import Tabs, { Tab, TabContent, TabsSkeleton } from './components/Tabs';
|
||||||
import Tag, { TagSkeleton } from './components/Tag';
|
import Tag, { TagSkeleton } from './components/Tag';
|
||||||
import TextArea, { TextAreaSkeleton } from './components/TextArea';
|
import TextArea, { TextAreaSkeleton } from './components/TextArea';
|
||||||
|
|
@ -54,19 +77,39 @@ export {
|
||||||
DataTableSkeleton,
|
DataTableSkeleton,
|
||||||
ExpandableTile,
|
ExpandableTile,
|
||||||
InlineLoading,
|
InlineLoading,
|
||||||
|
InlineNotification,
|
||||||
Link,
|
Link,
|
||||||
ListItem,
|
ListItem,
|
||||||
Loading,
|
Loading,
|
||||||
|
NotificationActionButton,
|
||||||
|
NotificationButton,
|
||||||
|
NotificationIcon,
|
||||||
|
NotificationTextDetails,
|
||||||
OrderedList,
|
OrderedList,
|
||||||
PasswordInput,
|
PasswordInput,
|
||||||
|
ProgressIndicator,
|
||||||
|
ProgressIndicatorSkeleton,
|
||||||
|
ProgressStep,
|
||||||
RadioButton,
|
RadioButton,
|
||||||
RadioButtonSkeleton,
|
RadioButtonSkeleton,
|
||||||
|
RadioButtonGroup,
|
||||||
Search,
|
Search,
|
||||||
SearchSkeleton,
|
SearchSkeleton,
|
||||||
SelectableTile,
|
SelectableTile,
|
||||||
|
Select,
|
||||||
|
SelectSkeleton,
|
||||||
|
SelectItem,
|
||||||
|
SelectItemGroup,
|
||||||
SkeletonPlaceholder,
|
SkeletonPlaceholder,
|
||||||
SkeletonText,
|
SkeletonText,
|
||||||
Switch,
|
Switch,
|
||||||
|
StructuredListSkeleton,
|
||||||
|
StructuredListBody,
|
||||||
|
StructuredListHead,
|
||||||
|
StructuredListCell,
|
||||||
|
StructuredListRow,
|
||||||
|
StructuredListInput,
|
||||||
|
StructuredListWrapper,
|
||||||
Tabs,
|
Tabs,
|
||||||
Tab,
|
Tab,
|
||||||
TabContent,
|
TabContent,
|
||||||
|
|
@ -81,6 +124,7 @@ export {
|
||||||
TileAboveTheFoldContent,
|
TileAboveTheFoldContent,
|
||||||
TileBelowTheFoldContent,
|
TileBelowTheFoldContent,
|
||||||
TileGroup,
|
TileGroup,
|
||||||
|
ToastNotification,
|
||||||
Toggle,
|
Toggle,
|
||||||
ToggleSkeleton,
|
ToggleSkeleton,
|
||||||
ToggleSmall,
|
ToggleSmall,
|
||||||
|
|
|
||||||
113
yarn.lock
113
yarn.lock
|
|
@ -30,14 +30,14 @@
|
||||||
source-map "^0.5.0"
|
source-map "^0.5.0"
|
||||||
|
|
||||||
"@babel/core@^7.1.0", "@babel/core@^7.1.6", "@babel/core@^7.7.2", "@babel/core@^7.7.4":
|
"@babel/core@^7.1.0", "@babel/core@^7.1.6", "@babel/core@^7.7.2", "@babel/core@^7.7.4":
|
||||||
version "7.7.5"
|
version "7.7.7"
|
||||||
resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.5.tgz#ae1323cd035b5160293307f50647e83f8ba62f7e"
|
resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.7.tgz#ee155d2e12300bcc0cff6a8ad46f2af5063803e9"
|
||||||
integrity sha512-M42+ScN4+1S9iB6f+TL7QBpoQETxbclx+KNoKJABghnKYE+fMzSGqst0BZJc8CpI625bwPwYgUyRvxZ+0mZzpw==
|
integrity sha512-jlSjuj/7z138NLZALxVgrx13AOtqip42ATZP7+kYl53GvDV6+4dCek1mVUo8z8c8Xnw/mx2q3d9HWh3griuesQ==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/code-frame" "^7.5.5"
|
"@babel/code-frame" "^7.5.5"
|
||||||
"@babel/generator" "^7.7.4"
|
"@babel/generator" "^7.7.7"
|
||||||
"@babel/helpers" "^7.7.4"
|
"@babel/helpers" "^7.7.4"
|
||||||
"@babel/parser" "^7.7.5"
|
"@babel/parser" "^7.7.7"
|
||||||
"@babel/template" "^7.7.4"
|
"@babel/template" "^7.7.4"
|
||||||
"@babel/traverse" "^7.7.4"
|
"@babel/traverse" "^7.7.4"
|
||||||
"@babel/types" "^7.7.4"
|
"@babel/types" "^7.7.4"
|
||||||
|
|
@ -49,10 +49,10 @@
|
||||||
semver "^5.4.1"
|
semver "^5.4.1"
|
||||||
source-map "^0.5.0"
|
source-map "^0.5.0"
|
||||||
|
|
||||||
"@babel/generator@^7.4.0", "@babel/generator@^7.6.2", "@babel/generator@^7.7.4":
|
"@babel/generator@^7.4.0", "@babel/generator@^7.6.2", "@babel/generator@^7.7.4", "@babel/generator@^7.7.7":
|
||||||
version "7.7.4"
|
version "7.7.7"
|
||||||
resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.4.tgz#db651e2840ca9aa66f327dcec1dc5f5fa9611369"
|
resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.7.tgz#859ac733c44c74148e1a72980a64ec84b85f4f45"
|
||||||
integrity sha512-m5qo2WgdOJeyYngKImbkyQrnUN1mPceaG5BV+G0E3gWsa4l/jCSryWJdM2x8OuGAOyh+3d5pVYfZWCiNFtynxg==
|
integrity sha512-/AOIBpHh/JU1l0ZFS4kiRCBnLi6OTHzh0RPk3h9isBxkkqELtQNFi1Vr/tiG9p1yfoUdKVwISuXWQR+hwwM4VQ==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/types" "^7.7.4"
|
"@babel/types" "^7.7.4"
|
||||||
jsesc "^2.5.1"
|
jsesc "^2.5.1"
|
||||||
|
|
@ -252,10 +252,10 @@
|
||||||
esutils "^2.0.2"
|
esutils "^2.0.2"
|
||||||
js-tokens "^4.0.0"
|
js-tokens "^4.0.0"
|
||||||
|
|
||||||
"@babel/parser@^7.1.0", "@babel/parser@^7.1.6", "@babel/parser@^7.4.3", "@babel/parser@^7.6.2", "@babel/parser@^7.7.4", "@babel/parser@^7.7.5":
|
"@babel/parser@^7.1.0", "@babel/parser@^7.1.6", "@babel/parser@^7.4.3", "@babel/parser@^7.6.2", "@babel/parser@^7.7.4", "@babel/parser@^7.7.7":
|
||||||
version "7.7.5"
|
version "7.7.7"
|
||||||
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.5.tgz#cbf45321619ac12d83363fcf9c94bb67fa646d71"
|
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.7.tgz#1b886595419cf92d811316d5b715a53ff38b4937"
|
||||||
integrity sha512-KNlOe9+/nk4i29g0VXgl8PEXIRms5xKLJeuZ6UptN0fHv+jDiriG+y94X6qAgWTR0h3KaoM1wK5G5h7MHFRSig==
|
integrity sha512-WtTZMZAZLbeymhkd/sEaPD8IQyGAhmuTuvTzLiCFM7iXiVdY0gc0IaI+cW0fh1BnSMbJSzXX6/fHllgHKwHhXw==
|
||||||
|
|
||||||
"@babel/plugin-proposal-async-generator-functions@^7.7.4":
|
"@babel/plugin-proposal-async-generator-functions@^7.7.4":
|
||||||
version "7.7.4"
|
version "7.7.4"
|
||||||
|
|
@ -298,10 +298,10 @@
|
||||||
"@babel/helper-plugin-utils" "^7.0.0"
|
"@babel/helper-plugin-utils" "^7.0.0"
|
||||||
"@babel/plugin-syntax-object-rest-spread" "^7.2.0"
|
"@babel/plugin-syntax-object-rest-spread" "^7.2.0"
|
||||||
|
|
||||||
"@babel/plugin-proposal-object-rest-spread@^7.0.0", "@babel/plugin-proposal-object-rest-spread@^7.6.2", "@babel/plugin-proposal-object-rest-spread@^7.7.4":
|
"@babel/plugin-proposal-object-rest-spread@^7.0.0", "@babel/plugin-proposal-object-rest-spread@^7.6.2", "@babel/plugin-proposal-object-rest-spread@^7.7.7":
|
||||||
version "7.7.4"
|
version "7.7.7"
|
||||||
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.7.4.tgz#cc57849894a5c774214178c8ab64f6334ec8af71"
|
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.7.7.tgz#9f27075004ab99be08c5c1bd653a2985813cb370"
|
||||||
integrity sha512-rnpnZR3/iWKmiQyJ3LKJpSwLDcX/nSXhdLk4Aq/tXOApIvyu7qoabrige0ylsAJffaUC51WiBu209Q0U+86OWQ==
|
integrity sha512-3qp9I8lelgzNedI3hrhkvhaEYree6+WHnyA/q4Dza9z7iEIs1eyhWyJnetk3jJ69RT0AT4G0UhEGwyGFJ7GUuQ==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/helper-plugin-utils" "^7.0.0"
|
"@babel/helper-plugin-utils" "^7.0.0"
|
||||||
"@babel/plugin-syntax-object-rest-spread" "^7.7.4"
|
"@babel/plugin-syntax-object-rest-spread" "^7.7.4"
|
||||||
|
|
@ -314,10 +314,10 @@
|
||||||
"@babel/helper-plugin-utils" "^7.0.0"
|
"@babel/helper-plugin-utils" "^7.0.0"
|
||||||
"@babel/plugin-syntax-optional-catch-binding" "^7.7.4"
|
"@babel/plugin-syntax-optional-catch-binding" "^7.7.4"
|
||||||
|
|
||||||
"@babel/plugin-proposal-unicode-property-regex@^7.7.4":
|
"@babel/plugin-proposal-unicode-property-regex@^7.7.7":
|
||||||
version "7.7.4"
|
version "7.7.7"
|
||||||
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.7.4.tgz#7c239ccaf09470dbe1d453d50057460e84517ebb"
|
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.7.7.tgz#433fa9dac64f953c12578b29633f456b68831c4e"
|
||||||
integrity sha512-cHgqHgYvffluZk85dJ02vloErm3Y6xtH+2noOBOJ2kXOJH3aVCDnj5eR/lVNlTnYu4hndAPJD3rTFjW3qee0PA==
|
integrity sha512-80PbkKyORBUVm1fbTLrHpYdJxMThzM1UqFGh0ALEhO9TYbG86Ah9zQYAB/84axz2vcxefDLdZwWwZNlYARlu9w==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/helper-create-regexp-features-plugin" "^7.7.4"
|
"@babel/helper-create-regexp-features-plugin" "^7.7.4"
|
||||||
"@babel/helper-plugin-utils" "^7.0.0"
|
"@babel/helper-plugin-utils" "^7.0.0"
|
||||||
|
|
@ -451,10 +451,10 @@
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/helper-plugin-utils" "^7.0.0"
|
"@babel/helper-plugin-utils" "^7.0.0"
|
||||||
|
|
||||||
"@babel/plugin-transform-dotall-regex@^7.7.4":
|
"@babel/plugin-transform-dotall-regex@^7.7.7":
|
||||||
version "7.7.4"
|
version "7.7.7"
|
||||||
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.7.4.tgz#f7ccda61118c5b7a2599a72d5e3210884a021e96"
|
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.7.7.tgz#3e9713f1b69f339e87fa796b097d73ded16b937b"
|
||||||
integrity sha512-mk0cH1zyMa/XHeb6LOTXTbG7uIJ8Rrjlzu91pUx/KS3JpcgaTDwMS8kM+ar8SLOvlL2Lofi4CGBAjCo3a2x+lw==
|
integrity sha512-b4in+YlTeE/QmTgrllnb3bHA0HntYvjz8O3Mcbx75UBPJA2xhb5A8nle498VhxSXJHQefjtQxpnLPehDJ4TRlg==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/helper-create-regexp-features-plugin" "^7.7.4"
|
"@babel/helper-create-regexp-features-plugin" "^7.7.4"
|
||||||
"@babel/helper-plugin-utils" "^7.0.0"
|
"@babel/helper-plugin-utils" "^7.0.0"
|
||||||
|
|
@ -569,10 +569,10 @@
|
||||||
"@babel/helper-plugin-utils" "^7.0.0"
|
"@babel/helper-plugin-utils" "^7.0.0"
|
||||||
"@babel/helper-replace-supers" "^7.7.4"
|
"@babel/helper-replace-supers" "^7.7.4"
|
||||||
|
|
||||||
"@babel/plugin-transform-parameters@^7.7.4":
|
"@babel/plugin-transform-parameters@^7.7.7":
|
||||||
version "7.7.4"
|
version "7.7.7"
|
||||||
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.7.4.tgz#da4555c97f39b51ac089d31c7380f03bca4075ce"
|
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.7.7.tgz#7a884b2460164dc5f194f668332736584c760007"
|
||||||
integrity sha512-VJwhVePWPa0DqE9vcfptaJSzNDKrWU/4FbYCjZERtmqEs05g3UMXnYMZoXja7JAJ7Y7sPZipwm/pGApZt7wHlw==
|
integrity sha512-OhGSrf9ZBrr1fw84oFXj5hgi8Nmg+E2w5L7NhnG0lPvpDtqd7dbyilM2/vR8CKbJ907RyxPh2kj6sBCSSfI9Ew==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/helper-call-delegate" "^7.7.4"
|
"@babel/helper-call-delegate" "^7.7.4"
|
||||||
"@babel/helper-get-function-arity" "^7.7.4"
|
"@babel/helper-get-function-arity" "^7.7.4"
|
||||||
|
|
@ -662,18 +662,18 @@
|
||||||
"@babel/helper-plugin-utils" "^7.0.0"
|
"@babel/helper-plugin-utils" "^7.0.0"
|
||||||
|
|
||||||
"@babel/preset-env@^7.1.6", "@babel/preset-env@^7.7.1", "@babel/preset-env@^7.7.4":
|
"@babel/preset-env@^7.1.6", "@babel/preset-env@^7.7.1", "@babel/preset-env@^7.7.4":
|
||||||
version "7.7.6"
|
version "7.7.7"
|
||||||
resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.7.6.tgz#39ac600427bbb94eec6b27953f1dfa1d64d457b2"
|
resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.7.7.tgz#c294167b91e53e7e36d820e943ece8d0c7fe46ac"
|
||||||
integrity sha512-k5hO17iF/Q7tR9Jv8PdNBZWYW6RofxhnxKjBMc0nG4JTaWvOTiPoO/RLFwAKcA4FpmuBFm6jkoqaRJLGi0zdaQ==
|
integrity sha512-pCu0hrSSDVI7kCVUOdcMNQEbOPJ52E+LrQ14sN8uL2ALfSqePZQlKrOy+tM4uhEdYlCHi4imr8Zz2cZe9oSdIg==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/helper-module-imports" "^7.7.4"
|
"@babel/helper-module-imports" "^7.7.4"
|
||||||
"@babel/helper-plugin-utils" "^7.0.0"
|
"@babel/helper-plugin-utils" "^7.0.0"
|
||||||
"@babel/plugin-proposal-async-generator-functions" "^7.7.4"
|
"@babel/plugin-proposal-async-generator-functions" "^7.7.4"
|
||||||
"@babel/plugin-proposal-dynamic-import" "^7.7.4"
|
"@babel/plugin-proposal-dynamic-import" "^7.7.4"
|
||||||
"@babel/plugin-proposal-json-strings" "^7.7.4"
|
"@babel/plugin-proposal-json-strings" "^7.7.4"
|
||||||
"@babel/plugin-proposal-object-rest-spread" "^7.7.4"
|
"@babel/plugin-proposal-object-rest-spread" "^7.7.7"
|
||||||
"@babel/plugin-proposal-optional-catch-binding" "^7.7.4"
|
"@babel/plugin-proposal-optional-catch-binding" "^7.7.4"
|
||||||
"@babel/plugin-proposal-unicode-property-regex" "^7.7.4"
|
"@babel/plugin-proposal-unicode-property-regex" "^7.7.7"
|
||||||
"@babel/plugin-syntax-async-generators" "^7.7.4"
|
"@babel/plugin-syntax-async-generators" "^7.7.4"
|
||||||
"@babel/plugin-syntax-dynamic-import" "^7.7.4"
|
"@babel/plugin-syntax-dynamic-import" "^7.7.4"
|
||||||
"@babel/plugin-syntax-json-strings" "^7.7.4"
|
"@babel/plugin-syntax-json-strings" "^7.7.4"
|
||||||
|
|
@ -687,7 +687,7 @@
|
||||||
"@babel/plugin-transform-classes" "^7.7.4"
|
"@babel/plugin-transform-classes" "^7.7.4"
|
||||||
"@babel/plugin-transform-computed-properties" "^7.7.4"
|
"@babel/plugin-transform-computed-properties" "^7.7.4"
|
||||||
"@babel/plugin-transform-destructuring" "^7.7.4"
|
"@babel/plugin-transform-destructuring" "^7.7.4"
|
||||||
"@babel/plugin-transform-dotall-regex" "^7.7.4"
|
"@babel/plugin-transform-dotall-regex" "^7.7.7"
|
||||||
"@babel/plugin-transform-duplicate-keys" "^7.7.4"
|
"@babel/plugin-transform-duplicate-keys" "^7.7.4"
|
||||||
"@babel/plugin-transform-exponentiation-operator" "^7.7.4"
|
"@babel/plugin-transform-exponentiation-operator" "^7.7.4"
|
||||||
"@babel/plugin-transform-for-of" "^7.7.4"
|
"@babel/plugin-transform-for-of" "^7.7.4"
|
||||||
|
|
@ -701,7 +701,7 @@
|
||||||
"@babel/plugin-transform-named-capturing-groups-regex" "^7.7.4"
|
"@babel/plugin-transform-named-capturing-groups-regex" "^7.7.4"
|
||||||
"@babel/plugin-transform-new-target" "^7.7.4"
|
"@babel/plugin-transform-new-target" "^7.7.4"
|
||||||
"@babel/plugin-transform-object-super" "^7.7.4"
|
"@babel/plugin-transform-object-super" "^7.7.4"
|
||||||
"@babel/plugin-transform-parameters" "^7.7.4"
|
"@babel/plugin-transform-parameters" "^7.7.7"
|
||||||
"@babel/plugin-transform-property-literals" "^7.7.4"
|
"@babel/plugin-transform-property-literals" "^7.7.4"
|
||||||
"@babel/plugin-transform-regenerator" "^7.7.5"
|
"@babel/plugin-transform-regenerator" "^7.7.5"
|
||||||
"@babel/plugin-transform-reserved-words" "^7.7.4"
|
"@babel/plugin-transform-reserved-words" "^7.7.4"
|
||||||
|
|
@ -713,7 +713,7 @@
|
||||||
"@babel/plugin-transform-unicode-regex" "^7.7.4"
|
"@babel/plugin-transform-unicode-regex" "^7.7.4"
|
||||||
"@babel/types" "^7.7.4"
|
"@babel/types" "^7.7.4"
|
||||||
browserslist "^4.6.0"
|
browserslist "^4.6.0"
|
||||||
core-js-compat "^3.4.7"
|
core-js-compat "^3.6.0"
|
||||||
invariant "^2.2.2"
|
invariant "^2.2.2"
|
||||||
js-levenshtein "^1.1.3"
|
js-levenshtein "^1.1.3"
|
||||||
semver "^5.5.0"
|
semver "^5.5.0"
|
||||||
|
|
@ -3061,7 +3061,7 @@ browserslist@4.7.0:
|
||||||
electron-to-chromium "^1.3.247"
|
electron-to-chromium "^1.3.247"
|
||||||
node-releases "^1.1.29"
|
node-releases "^1.1.29"
|
||||||
|
|
||||||
browserslist@^4.6.0, browserslist@^4.8.0:
|
browserslist@^4.6.0, browserslist@^4.8.0, browserslist@^4.8.2:
|
||||||
version "4.8.2"
|
version "4.8.2"
|
||||||
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.2.tgz#b45720ad5fbc8713b7253c20766f701c9a694289"
|
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.2.tgz#b45720ad5fbc8713b7253c20766f701c9a694289"
|
||||||
integrity sha512-+M4oeaTplPm/f1pXDw84YohEv7B1i/2Aisei8s4s6k3QsoSHa7i5sz8u/cGQkkatCPxMASKxPualR4wwYgVboA==
|
integrity sha512-+M4oeaTplPm/f1pXDw84YohEv7B1i/2Aisei8s4s6k3QsoSHa7i5sz8u/cGQkkatCPxMASKxPualR4wwYgVboA==
|
||||||
|
|
@ -3268,10 +3268,10 @@ capture-exit@^2.0.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
rsvp "^4.8.4"
|
rsvp "^4.8.4"
|
||||||
|
|
||||||
carbon-components@10.9.0-rc.1:
|
carbon-components@10.9.0:
|
||||||
version "10.9.0-rc.1"
|
version "10.9.0"
|
||||||
resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.9.0-rc.1.tgz#d801a12ae1053c078d4f3e33169a71c914ae8408"
|
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.9.0.tgz#b96f097582301b009232ebc54927327ee3608a84"
|
||||||
integrity sha512-JCJqKaEfttHW0Wr12JRdhRMtAg8f8Pn/ryxVQp/FAY1Z4iNNEFFS6ShVavOJMrEE28ojT7QPEhl8ruZ3THHoJg==
|
integrity sha512-r0fHHGV1nAGazL42ecsFSBHlrRlg/2d1XAvnlnRzOvZW8O+DFR4XxpAgf5ZWKFCiiysS5eDympZTqTflN/NewQ==
|
||||||
dependencies:
|
dependencies:
|
||||||
carbon-icons "^7.0.7"
|
carbon-icons "^7.0.7"
|
||||||
flatpickr "4.6.1"
|
flatpickr "4.6.1"
|
||||||
|
|
@ -3690,13 +3690,13 @@ copy-to-clipboard@^3.0.8:
|
||||||
dependencies:
|
dependencies:
|
||||||
toggle-selection "^1.0.6"
|
toggle-selection "^1.0.6"
|
||||||
|
|
||||||
core-js-compat@^3.4.7:
|
core-js-compat@^3.6.0:
|
||||||
version "3.4.7"
|
version "3.6.0"
|
||||||
resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.4.7.tgz#39f8080b1d92a524d6d90505c42b9c5c1eb90611"
|
resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.0.tgz#4eb6cb69d03d99159ed7c860cd5fcf7d23a62ea9"
|
||||||
integrity sha512-57+mgz/P/xsGdjwQYkwtBZR3LuISaxD1dEwVDtbk8xJMqAmwqaxLOvnNT7kdJ7jYE/NjNptyzXi+IQFMi/2fCw==
|
integrity sha512-Z3eCNjGgoYluH89Jt4wVkfYsc/VdLrA2/woX5lm0isO/pCT+P+Y+o65bOuEnjDJLthdwTBxbCVzptTXtc18fJg==
|
||||||
dependencies:
|
dependencies:
|
||||||
browserslist "^4.8.0"
|
browserslist "^4.8.2"
|
||||||
semver "^6.3.0"
|
semver "7.0.0"
|
||||||
|
|
||||||
core-js-pure@^3.0.1:
|
core-js-pure@^3.0.1:
|
||||||
version "3.4.7"
|
version "3.4.7"
|
||||||
|
|
@ -4573,9 +4573,9 @@ eslint-visitor-keys@^1.1.0:
|
||||||
integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
|
integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
|
||||||
|
|
||||||
eslint@^6.7.2:
|
eslint@^6.7.2:
|
||||||
version "6.7.2"
|
version "6.8.0"
|
||||||
resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.7.2.tgz#c17707ca4ad7b2d8af986a33feba71e18a9fecd1"
|
resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.8.0.tgz#62262d6729739f9275723824302fb227c8c93ffb"
|
||||||
integrity sha512-qMlSWJaCSxDFr8fBPvJM9kJwbazrhNcBU3+DszDW1OlEwKBBRWsJc7NJFelvwQpanHCR14cOLD41x8Eqvo3Nng==
|
integrity sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/code-frame" "^7.0.0"
|
"@babel/code-frame" "^7.0.0"
|
||||||
ajv "^6.10.0"
|
ajv "^6.10.0"
|
||||||
|
|
@ -10178,6 +10178,11 @@ semver@6.2.0:
|
||||||
resolved "https://registry.npmjs.org/semver/-/semver-6.2.0.tgz#4d813d9590aaf8a9192693d6c85b9344de5901db"
|
resolved "https://registry.npmjs.org/semver/-/semver-6.2.0.tgz#4d813d9590aaf8a9192693d6c85b9344de5901db"
|
||||||
integrity sha512-jdFC1VdUGT/2Scgbimf7FSx9iJLXoqfglSF+gJeuNWVpiE37OIbc1jywR/GJyFdz3mnkz2/id0L0J/cr0izR5A==
|
integrity sha512-jdFC1VdUGT/2Scgbimf7FSx9iJLXoqfglSF+gJeuNWVpiE37OIbc1jywR/GJyFdz3mnkz2/id0L0J/cr0izR5A==
|
||||||
|
|
||||||
|
semver@7.0.0:
|
||||||
|
version "7.0.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
|
||||||
|
integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
|
||||||
|
|
||||||
semver@^6.0.0, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
|
semver@^6.0.0, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
|
||||||
version "6.3.0"
|
version "6.3.0"
|
||||||
resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
|
resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
|
||||||
|
|
@ -10871,9 +10876,9 @@ svelte-loader@^2.13.6:
|
||||||
svelte-dev-helper "^1.1.9"
|
svelte-dev-helper "^1.1.9"
|
||||||
|
|
||||||
svelte@^3.16.4:
|
svelte@^3.16.4:
|
||||||
version "3.16.4"
|
version "3.16.5"
|
||||||
resolved "https://registry.npmjs.org/svelte/-/svelte-3.16.4.tgz#a14369c79d3a007bb1e13c8b52630efeca894096"
|
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.16.5.tgz#d7073efcbf73ce6b112a858e17c81123ce9ec472"
|
||||||
integrity sha512-+9k0fWp6q2AW0Niap+AIjERoRV9ZTj2yr+33JtjYHAxFRwTGdsy6UYnNThyrUNZPBHdlnbTuEt2V8p07jJGiZQ==
|
integrity sha512-iYOhJc7iczaonycuKjPgmy1lthhBoDOQo5UVhgKJRd3XYRdnYPPb0LvvJ0t7jqu5+15S0msMm06WSOKUvhEZsw==
|
||||||
|
|
||||||
symbol-observable@^1.1.0:
|
symbol-observable@^1.1.0:
|
||||||
version "1.2.0"
|
version "1.2.0"
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue