mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(component): add Icon

Browse source 
Closes #30
This commit is contained in:
Eric Liu 2019-12-22 15:33:55 -08:00
commit 5ae12066fb
18 changed files with 193 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -31,6 +31,8 @@ Currently, the following components are supported:
- FormGroup
- FormItem
- FormLabel
- Icon
- IconSkeleton
- InlineLoading
- Link
- ListItem

2
docs/iframe.html
View file

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

2
docs/main.ce61f8335d8fdea2cda4.bundle.js
View file

File diff suppressed because one or more lines are too long

1
docs/main.ce61f8335d8fdea2cda4.bundle.js.map
View file

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

2
docs/main.f602ce593db7523c0d2e.bundle.js Normal file
View file

File diff suppressed because one or more lines are too long

1
docs/main.f602ce593db7523c0d2e.bundle.js.map Normal file
View file

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

2
docs/runtime~main.ce61f8335d8fdea2cda4.bundle.js → docs/runtime~main.f602ce593db7523c0d2e.bundle.js
View file

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

2
docs/runtime~main.ce61f8335d8fdea2cda4.bundle.js.map → docs/runtime~main.f602ce593db7523c0d2e.bundle.js.map
View file

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

81
docs/vendors~main.ce61f8335d8fdea2cda4.bundle.js
View file

File diff suppressed because one or more lines are too long

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

@ -1 +0,0 @@
{"version":3,"file":"vendors~main.ce61f8335d8fdea2cda4.bundle.js","sources":["webpack:///vendors~main.ce61f8335d8fdea2cda4.bundle.js"],"mappings":"AAAA;;;;;AAmqeA;;;;;AAggIA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAihBA;;;;;;;AAfA","sourceRoot":""}

81
docs/vendors~main.f602ce593db7523c0d2e.bundle.js Normal file
View file

File diff suppressed because one or more lines are too long

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

@ -0,0 +1 @@
{"version":3,"file":"vendors~main.f602ce593db7523c0d2e.bundle.js","sources":["webpack:///vendors~main.f602ce593db7523c0d2e.bundle.js"],"mappings":"AAAA;;;;;AAmqeA;;;;;AAq/IA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAyfA;;;;;;;AAfA","sourceRoot":""}

13
src/components/Icon/Icon.Skeleton.svelte Normal file
View file

@ -0,0 +1,13 @@
<script>
let className = undefined;
export { className as class };
export let size = 16;
export let style = undefined;
import { cx, css } from '../../lib';
const _class = cx('--icon--skeleton', className);
const _style = css([style, ['width', `${size}px`], ['height', `${size}px`]]);
</script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} style={_style} />

23
src/components/Icon/Icon.Story.svelte Normal file
View file

@ -0,0 +1,23 @@
<script>
export let story = undefined;
import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
import ArrowLeft20 from 'carbon-icons-svelte/lib/ArrowLeft20';
import Add24 from 'carbon-icons-svelte/lib/Add24';
import Layout from '../../internal/ui/Layout.svelte';
import Icon from './Icon.svelte';
import IconSkeleton from './Icon.Skeleton.svelte';
const icons = { ChevronDown16, ArrowLeft20, Add24 };
</script>
<Layout>
{#if story === 'skeleton'}
<div>
<IconSkeleton size={16} style="margin: 2rem;" />
<IconSkeleton size={32} style="margin: 2rem" />
</div>
{:else}
<Icon {...$$props} render={icons[$$props.icon]} />
{/if}
</Layout>

20
src/components/Icon/Icon.stories.js Normal file
View file

@ -0,0 +1,20 @@
import { withKnobs, select, boolean } from '@storybook/addon-knobs';
import Component from './Icon.Story.svelte';
export default { title: 'Icon', decorators: [withKnobs] };
const icons = {
ChevronDown16: 'ChevronDown16',
ArrowLeft20: 'ArrowLeft20',
Add24: 'Add24'
};
export const Default = () => ({
Component,
props: {
icon: select('Render icon from `carbon-icons-svelte` (render)', icons, 'ChevronDown16'),
skeleton: boolean('Display icon skeleton (skeleton)', false)
}
});
export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });

40
src/components/Icon/Icon.svelte Normal file
View file

@ -0,0 +1,40 @@
<script>
let className = undefined;
export { className as class };
export let skeleton = false;
export let render = undefined;
export let title = undefined;
export let tabindex = undefined;
export let focusable = false;
export let style = undefined;
import IconSkeleton from './Icon.Skeleton.svelte';
const iconName = render.toString().split(' ')[1];
const size = parseInt(iconName.slice(-2), 10);
</script>
{#if skeleton}
<IconSkeleton
on:click
on:mouseover
on:mouseenter
on:mouseleave
{size}
class={className}
{style} />
{:else}
<svelte:component
this={render}
on:click
on:mouseover
on:mouseenter
on:mouseleave
aria-label={$$props['aria-label']}
aria-labelledby={$$props['aria-labelledby']}
class={className}
{tabindex}
{focusable}
{style}
{title} />
{/if}

4
src/components/Icon/index.js Normal file
View file

@ -0,0 +1,4 @@
import Icon from './Icon.svelte';
export default Icon;
export { default as IconSkeleton } from './Icon.Skeleton.svelte';

3
src/index.js
View file

@ -11,6 +11,7 @@ import Form from './components/Form';
import FormGroup from './components/FormGroup';
import FormItem from './components/FormItem';
import FormLabel from './components/FormLabel';
import Icon, { IconSkeleton } from './components/Icon';
import InlineLoading from './components/InlineLoading';
import Link from './components/Link';
import ListItem from './components/ListItem';
@ -84,6 +85,8 @@ export {
FormItem,
FormLabel,
ExpandableTile,
Icon,
IconSkeleton,
InlineLoading,
InlineNotification,
Link,