mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
Merge pull request #3 from IBM/develop
feat(components): add RadioButton, TextInput components
This commit is contained in:
Eric Liu
GitHub
commit
82f5a078a4
23 changed files with 488 additions and 28 deletions
28
README.md
28
README.md
|
|
@ -1,8 +1,11 @@
|
||||||
# carbon-components-svelte
|
# carbon-components-svelte
|
||||||
|
|
||||||
> 🚧🚧🚧 UNDER CONSTRUCTION
|
> 🚧🚧🚧 UNDER CONSTRUCTION
|
||||||
|
|
||||||
> Svelte implementation of the Carbon Design System
|
> Svelte implementation of the Carbon Design System
|
||||||
|
|
||||||
|
> 🚧🚧🚧
|
||||||
|
|
||||||
## [Storybook](https://ibm.github.io/carbon-components-svelte)
|
## [Storybook](https://ibm.github.io/carbon-components-svelte)
|
||||||
|
|
||||||
## Getting Started
|
## Getting Started
|
||||||
|
|
@ -15,16 +18,16 @@ Currently, the following components are supported:
|
||||||
|
|
||||||
- Accordion
|
- Accordion
|
||||||
- AccordionItem
|
- AccordionItem
|
||||||
- AccordionSkeleton
|
- AccordionSkeleton
|
||||||
- Breadcrumb
|
- Breadcrumb
|
||||||
- BreadcrumbItem
|
- BreadcrumbItem
|
||||||
- BreadcrumbSkeleton
|
- BreadcrumbSkeleton
|
||||||
- Button
|
- Button
|
||||||
- ButtonSkeleton
|
- ButtonSkeleton
|
||||||
- Checkbox
|
- Checkbox
|
||||||
- CheckboxSkeleton
|
- CheckboxSkeleton
|
||||||
- CodeSnippet
|
- CodeSnippet
|
||||||
- CodeSnippetSkeleton
|
- CodeSnippetSkeleton
|
||||||
- Copy
|
- Copy
|
||||||
- CopyButton
|
- CopyButton
|
||||||
- InlineLoading
|
- InlineLoading
|
||||||
|
|
@ -32,18 +35,23 @@ Currently, the following components are supported:
|
||||||
- Link
|
- Link
|
||||||
- ListItem
|
- ListItem
|
||||||
- OrderedList
|
- OrderedList
|
||||||
|
- RadioButton
|
||||||
|
- RadioButtonSkeleton
|
||||||
- Search
|
- Search
|
||||||
- SearchSkeleton
|
- SearchSkeleton
|
||||||
- SkeletonPlaceholder
|
- SkeletonPlaceholder
|
||||||
- SkeletonText
|
- SkeletonText
|
||||||
- Tag
|
- Tag
|
||||||
- TagSkeleton
|
- TagSkeleton
|
||||||
- TextArea
|
- TextArea
|
||||||
- TextAreaSkeleton
|
- TextAreaSkeleton
|
||||||
|
- TextInput
|
||||||
|
- TextInputSkeleton
|
||||||
|
- PasswordInput
|
||||||
- Toggle
|
- Toggle
|
||||||
- ToggleSkeleton
|
- ToggleSkeleton
|
||||||
- ToggleSmall
|
- ToggleSmall
|
||||||
- ToggleSmallSkeleton
|
- ToggleSmallSkeleton
|
||||||
- TooltipDefinition
|
- TooltipDefinition
|
||||||
- TooltipIcon
|
- TooltipIcon
|
||||||
- UnorderedList
|
- UnorderedList
|
||||||
|
|
|
||||||
|
|
@ -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.f68146be2ed36b44235a.bundle.js"></script><script src="vendors~main.f68146be2ed36b44235a.bundle.js"></script><script src="main.f68146be2ed36b44235a.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.970eec03e30441a69853.bundle.js"></script><script src="vendors~main.970eec03e30441a69853.bundle.js"></script><script src="main.970eec03e30441a69853.bundle.js"></script></body></html>
|
||||||
2
docs/main.970eec03e30441a69853.bundle.js
Normal file
2
docs/main.970eec03e30441a69853.bundle.js
Normal file
File diff suppressed because one or more lines are too long
1
docs/main.970eec03e30441a69853.bundle.js.map
Normal file
1
docs/main.970eec03e30441a69853.bundle.js.map
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"file":"main.970eec03e30441a69853.bundle.js","sources":["webpack:///main.970eec03e30441a69853.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"file":"main.f68146be2ed36b44235a.bundle.js","sources":["webpack:///main.f68146be2ed36b44235a.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
|
||||||
|
|
@ -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.f68146be2ed36b44235a.bundle.js.map
|
//# sourceMappingURL=runtime~main.970eec03e30441a69853.bundle.js.map
|
||||||
|
|
@ -1 +1 @@
|
||||||
{"version":3,"file":"runtime~main.f68146be2ed36b44235a.bundle.js","sources":["webpack:///runtime~main.f68146be2ed36b44235a.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
{"version":3,"file":"runtime~main.970eec03e30441a69853.bundle.js","sources":["webpack:///runtime~main.f68146be2ed36b44235a.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
||||||
File diff suppressed because one or more lines are too long
1
docs/vendors~main.970eec03e30441a69853.bundle.js.map
Normal file
1
docs/vendors~main.970eec03e30441a69853.bundle.js.map
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"file":"vendors~main.970eec03e30441a69853.bundle.js","sources":["webpack:///vendors~main.970eec03e30441a69853.bundle.js"],"mappings":"AAAA;;;;;AAkkdA;;;;;AAmjGA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAqgBA;;;;;;;AAfA","sourceRoot":""}
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"file":"vendors~main.f68146be2ed36b44235a.bundle.js","sources":["webpack:///vendors~main.f68146be2ed36b44235a.bundle.js"],"mappings":"AAAA;;;;;AAk3bA;;;;;AAm0FA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAogBA;;;;;;;AAfA","sourceRoot":""}
|
|
||||||
14
src/components/RadioButton/RadioButton.Skeleton.svelte
Normal file
14
src/components/RadioButton/RadioButton.Skeleton.svelte
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let props = {};
|
||||||
|
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const _class = cx('--radio-button-wrapper', className);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div {...props} class={_class}>
|
||||||
|
<div class={cx('--radio-button', '--skeleton')} />
|
||||||
|
<span class={cx('--radio-button__label', '--skeleton')} />
|
||||||
|
</div>
|
||||||
19
src/components/RadioButton/RadioButton.Story.svelte
Normal file
19
src/components/RadioButton/RadioButton.Story.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<script>
|
||||||
|
export let story = undefined;
|
||||||
|
|
||||||
|
import Layout from '../../internal/ui/Layout.svelte';
|
||||||
|
import ListItem from '../ListItem';
|
||||||
|
import RadioButton from './RadioButton.svelte';
|
||||||
|
import RadioButtonSkeleton from './RadioButton.Skeleton.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Layout>
|
||||||
|
|
||||||
|
{#if story === 'skeleton'}
|
||||||
|
<div>
|
||||||
|
<RadioButtonSkeleton />
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<RadioButton {...$$props} id="radio-1" />
|
||||||
|
{/if}
|
||||||
|
</Layout>
|
||||||
22
src/components/RadioButton/RadioButton.stories.js
Normal file
22
src/components/RadioButton/RadioButton.stories.js
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
|
||||||
|
import Component from './RadioButton.Story.svelte';
|
||||||
|
|
||||||
|
export default { title: 'Radio Button', decorators: [withKnobs] };
|
||||||
|
|
||||||
|
const labelPositions = {
|
||||||
|
'Left (left)': 'left',
|
||||||
|
'Right (right)': 'right'
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Default = () => ({
|
||||||
|
Component,
|
||||||
|
props: {
|
||||||
|
name: text('Form item name (name)', 'test'),
|
||||||
|
value: text('Value (value)', 'standard'),
|
||||||
|
labelText: text('Label text (labelText)', 'Standard Radio Button'),
|
||||||
|
labelPosition: select('Label position (labelPosition)', labelPositions, 'right'),
|
||||||
|
disabled: boolean('Disabled (disabled)', false)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });
|
||||||
42
src/components/RadioButton/RadioButton.svelte
Normal file
42
src/components/RadioButton/RadioButton.svelte
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let value = '';
|
||||||
|
export let checked = false;
|
||||||
|
export let disabled = false;
|
||||||
|
export let id = Math.random();
|
||||||
|
export let labelText = '';
|
||||||
|
export let hideLabel = false;
|
||||||
|
export let labelPosition = 'right';
|
||||||
|
export let name = '';
|
||||||
|
export let props = {};
|
||||||
|
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const _class = cx(
|
||||||
|
'--radio-button-wrapper',
|
||||||
|
labelPosition !== 'right' && `--radio-button-wrapper--label-${labelPosition}`,
|
||||||
|
className
|
||||||
|
);
|
||||||
|
const _innerLabelClass = cx(hideLabel && '--visually-hidden');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class={_class}>
|
||||||
|
<input
|
||||||
|
{...props}
|
||||||
|
type="radio"
|
||||||
|
class={cx('--radio-button')}
|
||||||
|
on:change
|
||||||
|
on:change={event => {
|
||||||
|
value = event.target.value;
|
||||||
|
}}
|
||||||
|
{id}
|
||||||
|
{name}
|
||||||
|
{checked}
|
||||||
|
{disabled}
|
||||||
|
{value} />
|
||||||
|
<label for={id} class={cx('--radio-button__label')}>
|
||||||
|
<span class={cx('--radio-button__appearance')} />
|
||||||
|
<span class={_innerLabelClass}>{labelText}</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
4
src/components/RadioButton/index.js
Normal file
4
src/components/RadioButton/index.js
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
import RadioButton from './RadioButton.svelte';
|
||||||
|
|
||||||
|
export default RadioButton;
|
||||||
|
export { default as RadioButtonSkeleton } from './RadioButton.Skeleton.svelte';
|
||||||
112
src/components/TextInput/PasswordInput.svelte
Normal file
112
src/components/TextInput/PasswordInput.svelte
Normal file
|
|
@ -0,0 +1,112 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let disabled = false;
|
||||||
|
export let id = Math.random();
|
||||||
|
export let labelText = '';
|
||||||
|
export let placeholder = '';
|
||||||
|
export let type = 'password';
|
||||||
|
export let value = '';
|
||||||
|
export let invalid = false;
|
||||||
|
export let invalidText = '';
|
||||||
|
export let helperText = '';
|
||||||
|
export let hideLabel = false;
|
||||||
|
export let light = false;
|
||||||
|
export let tooltipPosition = 'bottom';
|
||||||
|
export let tooltipAlignment = 'center';
|
||||||
|
export let hidePasswordLabel = 'Hide password';
|
||||||
|
export let showPasswordLabel = 'Show password';
|
||||||
|
export let props = {};
|
||||||
|
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
|
||||||
|
import View16 from 'carbon-icons-svelte/lib/View16';
|
||||||
|
import ViewOff16 from 'carbon-icons-svelte/lib/ViewOff16';
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
const errorId = `${id}-error`;
|
||||||
|
const passwordIsVisible = type === 'text';
|
||||||
|
const _labelClass = cx(
|
||||||
|
'--label',
|
||||||
|
hideLabel && '--visually-hidden',
|
||||||
|
disabled && '--label--disabled'
|
||||||
|
);
|
||||||
|
const _helperTextClass = cx('--form__helper-text', disabled && '--form__helper-text--disabled');
|
||||||
|
const _textInputClass = cx(
|
||||||
|
'--text-input',
|
||||||
|
'--password-input',
|
||||||
|
light && '--text-input--light',
|
||||||
|
invalid && '--text-input--invalid',
|
||||||
|
className
|
||||||
|
);
|
||||||
|
const _passwordVisibilityToggleClass = cx(
|
||||||
|
'--text-input--password__visibility__toggle',
|
||||||
|
'--btn--icon-only',
|
||||||
|
'--tooltip__trigger',
|
||||||
|
'--tooltip--a11y',
|
||||||
|
tooltipPosition && `--tooltip--${tooltipPosition}`,
|
||||||
|
tooltipAlignment && `--tooltip--align-${tooltipAlignment}`
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class={cx('--form-item', '--text-input-wrapper', '--password-input-wrapper')}>
|
||||||
|
{#if labelText}
|
||||||
|
<label for={id} class={_labelClass}>{labelText}</label>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if helperText}
|
||||||
|
<div class={_helperTextClass}>{helperText}</div>
|
||||||
|
{/if}
|
||||||
|
<div class={cx('--text-input__field-wrapper')} data-invalid={invalid || undefined}>
|
||||||
|
{#if invalid}
|
||||||
|
<WarningFilled16 class={cx('--text-input__invalid-icon')} />
|
||||||
|
{/if}
|
||||||
|
<input
|
||||||
|
{...props}
|
||||||
|
class={_textInputClass}
|
||||||
|
on:click={event => {
|
||||||
|
if (!disabled) {
|
||||||
|
dispatch('click', event);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
on:change={event => {
|
||||||
|
if (!disabled) {
|
||||||
|
dispatch('change', event);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
on:input={event => {
|
||||||
|
value = event.target.value;
|
||||||
|
if (!disabled) {
|
||||||
|
dispatch('input', event);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
data-invalid={invalid || undefined}
|
||||||
|
aria-invalid={invalid || undefined}
|
||||||
|
aria-describedby={invalid ? errorId : undefined}
|
||||||
|
{id}
|
||||||
|
{placeholder}
|
||||||
|
{type}
|
||||||
|
{value}
|
||||||
|
{disabled} />
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class={_passwordVisibilityToggleClass}
|
||||||
|
on:click={() => {
|
||||||
|
type = type === 'password' ? 'text' : 'password';
|
||||||
|
}}>
|
||||||
|
<span class={cx('--assistive-text')}>
|
||||||
|
{#if passwordIsVisible}{hidePasswordLabel}{:else}{showPasswordLabel}{/if}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{#if passwordIsVisible}
|
||||||
|
<ViewOff16 class={cx('--icon-visibility-off')} />
|
||||||
|
{:else}
|
||||||
|
<View16 class={cx('--icon-visibility-on')} />
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{#if invalid}
|
||||||
|
<div class={cx('--form-requirement')} id={errorId}>{invalidText}</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
17
src/components/TextInput/TextInput.Skeleton.svelte
Normal file
17
src/components/TextInput/TextInput.Skeleton.svelte
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let hideLabel = false;
|
||||||
|
export let props = {};
|
||||||
|
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const _class = cx('--form-item', className);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div {...props} class={_class}>
|
||||||
|
{#if !hideLabel}
|
||||||
|
<span class={cx('--label', '--skeleton')} />
|
||||||
|
{/if}
|
||||||
|
<div class={cx('--skeleton', '--text-area')} />
|
||||||
|
</div>
|
||||||
42
src/components/TextInput/TextInput.Story.svelte
Normal file
42
src/components/TextInput/TextInput.Story.svelte
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
<script>
|
||||||
|
export let story = undefined;
|
||||||
|
|
||||||
|
import Layout from '../../internal/ui/Layout.svelte';
|
||||||
|
import TextInput from './TextInput.svelte';
|
||||||
|
import PasswordInput from './PasswordInput.svelte';
|
||||||
|
import TextInputSkeleton from './TextInput.Skeleton.svelte';
|
||||||
|
|
||||||
|
let value = '';
|
||||||
|
let type = 'password';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Layout>
|
||||||
|
{value}
|
||||||
|
{#if story === 'skeleton'}
|
||||||
|
<div aria-label="loading text input" aria-live="assertive" role="status" tabindex="0">
|
||||||
|
<TextInputSkeleton />
|
||||||
|
<br />
|
||||||
|
<TextInputSkeleton hideLabel />
|
||||||
|
</div>
|
||||||
|
{:else if story === 'password-visibility'}
|
||||||
|
<PasswordInput {...$$props} aria-level="" />
|
||||||
|
{:else if story === 'controlled'}
|
||||||
|
<PasswordInput {...$$props} {type} />
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
on:click={() => {
|
||||||
|
type = 'text';
|
||||||
|
}}>
|
||||||
|
Show password
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
on:click={() => {
|
||||||
|
type = 'password';
|
||||||
|
}}>
|
||||||
|
Hide password
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<TextInput {...$$props} bind:value />
|
||||||
|
{/if}
|
||||||
|
</Layout>
|
||||||
89
src/components/TextInput/TextInput.stories.js
Normal file
89
src/components/TextInput/TextInput.stories.js
Normal file
|
|
@ -0,0 +1,89 @@
|
||||||
|
import { withKnobs, boolean, text, select } from '@storybook/addon-knobs';
|
||||||
|
import Component from './TextInput.Story.svelte';
|
||||||
|
|
||||||
|
export default { title: 'TextInput', decorators: [withKnobs] };
|
||||||
|
|
||||||
|
export const Default = () => ({
|
||||||
|
Component,
|
||||||
|
props: {
|
||||||
|
disabled: boolean('Disabled (disabled)', false),
|
||||||
|
light: boolean('Light variant (light)', false),
|
||||||
|
hideLabel: boolean('No label (hideLabel)', false),
|
||||||
|
labelText: text('Label text (labelText)', 'Text Input label'),
|
||||||
|
invalid: boolean('Show form validation UI (invalid)', false),
|
||||||
|
invalidText: text('Content of form validation UI (invalidText)', 'A valid value is required'),
|
||||||
|
helperText: text('Helper text (helperText)', 'Optional helper text.'),
|
||||||
|
placeholder: text('Placeholder text (placeholder)', 'Placeholder text.'),
|
||||||
|
id: 'text-input'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export const TogglePasswordVisibility = () => ({
|
||||||
|
Component,
|
||||||
|
props: {
|
||||||
|
story: 'password-visibility',
|
||||||
|
disabled: boolean('Disabled (disabled)', false),
|
||||||
|
light: boolean('Light variant (light)', false),
|
||||||
|
hideLabel: boolean('No label (hideLabel)', false),
|
||||||
|
labelText: text('Label text (labelText)', 'Text Input label'),
|
||||||
|
invalid: boolean('Show form validation UI (invalid)', false),
|
||||||
|
invalidText: text('Content of form validation UI (invalidText)', 'A valid value is required'),
|
||||||
|
helperText: text('Helper text (helperText)', 'Optional helper text.'),
|
||||||
|
placeholder: text('Placeholder text (placeholder)', 'Placeholder text.'),
|
||||||
|
id: 'text-input',
|
||||||
|
tooltipPosition: select(
|
||||||
|
'Tooltip position (tooltipPosition)',
|
||||||
|
['top', 'right', 'bottom', 'left'],
|
||||||
|
'bottom'
|
||||||
|
),
|
||||||
|
tooltipAlignment: select(
|
||||||
|
'Tooltip alignment (tooltipAlignment)',
|
||||||
|
['start', 'center', 'end'],
|
||||||
|
'center'
|
||||||
|
),
|
||||||
|
hidePasswordLabel: text(
|
||||||
|
'"Hide password" tooltip label for password visibility toggle (hidePasswordLabel)',
|
||||||
|
'Hide password'
|
||||||
|
),
|
||||||
|
showPasswordLabel: text(
|
||||||
|
'"Show password" tooltip label for password visibility toggle (showPasswordLabel)',
|
||||||
|
'Show password'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export const ControlledTogglePasswordVisibility = () => ({
|
||||||
|
Component,
|
||||||
|
props: {
|
||||||
|
story: 'controlled',
|
||||||
|
disabled: boolean('Disabled (disabled)', false),
|
||||||
|
light: boolean('Light variant (light)', false),
|
||||||
|
hideLabel: boolean('No label (hideLabel)', false),
|
||||||
|
labelText: text('Label text (labelText)', 'Text Input label'),
|
||||||
|
invalid: boolean('Show form validation UI (invalid)', false),
|
||||||
|
invalidText: text('Content of form validation UI (invalidText)', 'A valid value is required'),
|
||||||
|
helperText: text('Helper text (helperText)', 'Optional helper text.'),
|
||||||
|
placeholder: text('Placeholder text (placeholder)', 'Placeholder text.'),
|
||||||
|
id: 'text-input',
|
||||||
|
tooltipPosition: select(
|
||||||
|
'Tooltip position (tooltipPosition)',
|
||||||
|
['top', 'right', 'bottom', 'left'],
|
||||||
|
'bottom'
|
||||||
|
),
|
||||||
|
tooltipAlignment: select(
|
||||||
|
'Tooltip alignment (tooltipAlignment)',
|
||||||
|
['start', 'center', 'end'],
|
||||||
|
'center'
|
||||||
|
),
|
||||||
|
hidePasswordLabel: text(
|
||||||
|
'"Hide password" tooltip label for password visibility toggle (hidePasswordLabel)',
|
||||||
|
'Hide password'
|
||||||
|
),
|
||||||
|
showPasswordLabel: text(
|
||||||
|
'"Show password" tooltip label for password visibility toggle (showPasswordLabel)',
|
||||||
|
'Show password'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });
|
||||||
79
src/components/TextInput/TextInput.svelte
Normal file
79
src/components/TextInput/TextInput.svelte
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let disabled = false;
|
||||||
|
export let id = Math.random();
|
||||||
|
export let labelText = '';
|
||||||
|
export let placeholder = '';
|
||||||
|
export let type = '';
|
||||||
|
export let value = '';
|
||||||
|
export let invalid = false;
|
||||||
|
export let invalidText = '';
|
||||||
|
export let helperText = '';
|
||||||
|
export let hideLabel = false;
|
||||||
|
export let light = false;
|
||||||
|
export let props = {};
|
||||||
|
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
const errorId = `${id}-error`;
|
||||||
|
const _labelClass = cx(
|
||||||
|
'--label',
|
||||||
|
hideLabel && '--visually-hidden',
|
||||||
|
disabled && '--label--disabled'
|
||||||
|
);
|
||||||
|
const _helperTextClass = cx('--form__helper-text', disabled && '--form__helper-text--disabled');
|
||||||
|
const _textInputClass = cx(
|
||||||
|
'--text-input',
|
||||||
|
light && '--text-input--light',
|
||||||
|
invalid && '--text-input--invalid',
|
||||||
|
className
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class={cx('--form-item', '--text-input-wrapper')}>
|
||||||
|
{#if labelText}
|
||||||
|
<label for={id} class={_labelClass}>{labelText}</label>
|
||||||
|
{/if}
|
||||||
|
{#if helperText}
|
||||||
|
<div class={_helperTextClass}>{helperText}</div>
|
||||||
|
{/if}
|
||||||
|
<div class={cx('--text-input__field-wrapper')} data-invalid={invalid || undefined}>
|
||||||
|
{#if invalid}
|
||||||
|
<WarningFilled16 class={cx('--text-input__invalid-icon')} />
|
||||||
|
{/if}
|
||||||
|
<input
|
||||||
|
{...props}
|
||||||
|
class={_textInputClass}
|
||||||
|
on:click={event => {
|
||||||
|
if (!disabled) {
|
||||||
|
dispatch('click', event);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
on:change={event => {
|
||||||
|
if (!disabled) {
|
||||||
|
dispatch('change', event);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
on:input={event => {
|
||||||
|
value = event.target.value;
|
||||||
|
if (!disabled) {
|
||||||
|
dispatch('input', event);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
data-invalid={invalid || undefined}
|
||||||
|
aria-invalid={invalid || undefined}
|
||||||
|
aria-describedby={invalid ? errorId : undefined}
|
||||||
|
{id}
|
||||||
|
{placeholder}
|
||||||
|
{type}
|
||||||
|
{value}
|
||||||
|
{disabled} />
|
||||||
|
</div>
|
||||||
|
{#if invalid}
|
||||||
|
<div class={cx('--form-requirement')} id={errorId}>{invalidText}</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
5
src/components/TextInput/index.js
Normal file
5
src/components/TextInput/index.js
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
import TextInput from './TextInput.svelte';
|
||||||
|
|
||||||
|
export default TextInput;
|
||||||
|
export { default as TextInputSkeleton } from './TextInput.Skeleton.svelte';
|
||||||
|
export { default as PasswordInput } from './PasswordInput.svelte';
|
||||||
|
|
@ -10,11 +10,13 @@ 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 OrderedList from './components/OrderedList';
|
import OrderedList from './components/OrderedList';
|
||||||
|
import RadioButton, { RadioButtonSkeleton } from './components/RadioButton';
|
||||||
import Search, { SearchSkeleton } from './components/Search';
|
import Search, { SearchSkeleton } from './components/Search';
|
||||||
import SkeletonPlaceholder from './components/SkeletonPlaceholder';
|
import SkeletonPlaceholder from './components/SkeletonPlaceholder';
|
||||||
import SkeletonText from './components/SkeletonText';
|
import SkeletonText from './components/SkeletonText';
|
||||||
import Tag, { TagSkeleton } from './components/Tag';
|
import Tag, { TagSkeleton } from './components/Tag';
|
||||||
import TextArea, { TextAreaSkeleton } from './components/TextArea';
|
import TextArea, { TextAreaSkeleton } from './components/TextArea';
|
||||||
|
import TextInput, { TextInputSkeleton, PasswordInput } from './components/TextInput';
|
||||||
import Toggle, { ToggleSkeleton } from './components/Toggle';
|
import Toggle, { ToggleSkeleton } from './components/Toggle';
|
||||||
import ToggleSmall, { ToggleSmallSkeleton } from './components/ToggleSmall';
|
import ToggleSmall, { ToggleSmallSkeleton } from './components/ToggleSmall';
|
||||||
import TooltipDefinition from './components/TooltipDefinition';
|
import TooltipDefinition from './components/TooltipDefinition';
|
||||||
|
|
@ -41,6 +43,8 @@ export {
|
||||||
Link,
|
Link,
|
||||||
ListItem,
|
ListItem,
|
||||||
OrderedList,
|
OrderedList,
|
||||||
|
RadioButton,
|
||||||
|
RadioButtonSkeleton,
|
||||||
Search,
|
Search,
|
||||||
SearchSkeleton,
|
SearchSkeleton,
|
||||||
SkeletonPlaceholder,
|
SkeletonPlaceholder,
|
||||||
|
|
@ -49,6 +53,9 @@ export {
|
||||||
TagSkeleton,
|
TagSkeleton,
|
||||||
TextArea,
|
TextArea,
|
||||||
TextAreaSkeleton,
|
TextAreaSkeleton,
|
||||||
|
TextInput,
|
||||||
|
TextInputSkeleton,
|
||||||
|
PasswordInput,
|
||||||
Toggle,
|
Toggle,
|
||||||
ToggleSkeleton,
|
ToggleSkeleton,
|
||||||
ToggleSmall,
|
ToggleSmall,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue