mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
chore: lift components folder
This commit is contained in:
Eric Liu
parent
76df51674d
commit
2200b29b92
301 changed files with 57 additions and 76 deletions
104
src/TextInput/PasswordInput.svelte
Normal file
104
src/TextInput/PasswordInput.svelte
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<script>
|
||||
export let type = "password";
|
||||
export let value = "";
|
||||
export let hidePasswordLabel = "Hide password";
|
||||
export let showPasswordLabel = "Show password";
|
||||
export let light = false;
|
||||
export let disabled = false;
|
||||
export let placeholder = "";
|
||||
export let helperText = "";
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
export let name = undefined;
|
||||
export let invalid = false;
|
||||
export let invalidText = "";
|
||||
export let labelText = "";
|
||||
export let hideLabel = false;
|
||||
export let tooltipAlignment = "center";
|
||||
export let tooltipPosition = "bottom";
|
||||
export let ref = null;
|
||||
|
||||
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
|
||||
import View16 from "carbon-icons-svelte/lib/View16";
|
||||
import ViewOff16 from "carbon-icons-svelte/lib/ViewOff16";
|
||||
|
||||
$: errorId = `error-${id}`;
|
||||
</script>
|
||||
|
||||
<div
|
||||
class:bx--form-item={true}
|
||||
class:bx--text-input-wrapper={true}
|
||||
class:bx--password-input-wrapper={true}
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
{#if labelText}
|
||||
<label
|
||||
for={id}
|
||||
class:bx--label={true}
|
||||
class:bx--visually-hidden={hideLabel}
|
||||
class:bx--label--disabled={disabled}>
|
||||
{labelText}
|
||||
</label>
|
||||
{/if}
|
||||
{#if helperText}
|
||||
<div
|
||||
class:bx--form__helper-text={true}
|
||||
class:bx--form__helper-text--disabled={disabled}>
|
||||
{helperText}
|
||||
</div>
|
||||
{/if}
|
||||
<div
|
||||
class:bx--text-input__field-wrapper={true}
|
||||
data-invalid={invalid || undefined}>
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--text-input__invalid-icon" />
|
||||
{/if}
|
||||
<input
|
||||
bind:this={ref}
|
||||
data-invalid={invalid || undefined}
|
||||
aria-invalid={invalid || undefined}
|
||||
aria-describedby={invalid ? errorId : undefined}
|
||||
{id}
|
||||
{name}
|
||||
{placeholder}
|
||||
{type}
|
||||
{value}
|
||||
{disabled}
|
||||
class:bx--text-input={true}
|
||||
class:bx--password-input={true}
|
||||
class:bx--text-input--light={light}
|
||||
class:bx--text-input--invalid={invalid}
|
||||
on:change
|
||||
on:input
|
||||
on:input={({ target }) => {
|
||||
value = target.value;
|
||||
}}
|
||||
on:focus
|
||||
on:blur />
|
||||
<button
|
||||
type="button"
|
||||
class:bx--text-input--password__visibility__toggle={true}
|
||||
class:bx--btn--icon-only={true}
|
||||
class:bx--tooltip__trigger={true}
|
||||
class:bx--tooltip--a11y={true}
|
||||
class="{tooltipPosition && `bx--tooltip--${tooltipPosition}`}
|
||||
{tooltipAlignment && `bx--tooltip--align-${tooltipAlignment}`}"
|
||||
on:click={() => {
|
||||
type = type === 'password' ? 'text' : 'password';
|
||||
}}>
|
||||
<span class:bx--assistive-text={true}>
|
||||
{#if type === 'text'}{hidePasswordLabel}{:else}{showPasswordLabel}{/if}
|
||||
</span>
|
||||
{#if type === 'text'}
|
||||
<ViewOff16 class="bx--icon-visibility-off" />
|
||||
{:else}
|
||||
<View16 class="bx--icon-visibility-on" />
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
{#if invalid}
|
||||
<div class:bx--form-requirement={true} id={errorId}>{invalidText}</div>
|
||||
{/if}
|
||||
</div>
|
||||
16
src/TextInput/TextInput.Skeleton.svelte
Normal file
16
src/TextInput/TextInput.Skeleton.svelte
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<script>
|
||||
export let hideLabel = false;
|
||||
</script>
|
||||
|
||||
<div
|
||||
class:bx--form-item={true}
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
{#if !hideLabel}
|
||||
<span class:bx--label={true} class:bx--skeleton={true} />
|
||||
{/if}
|
||||
<div class:bx--skeleton={true} class:bx--text-area={true} />
|
||||
</div>
|
||||
50
src/TextInput/TextInput.Story.svelte
Normal file
50
src/TextInput/TextInput.Story.svelte
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import PasswordInput from "./PasswordInput.svelte";
|
||||
import TextInput from "./TextInput.svelte";
|
||||
import TextInputSkeleton from "./TextInput.Skeleton.svelte";
|
||||
|
||||
$: value = "";
|
||||
$: type = "password";
|
||||
$: ref = null;
|
||||
$: console.log(ref);
|
||||
</script>
|
||||
|
||||
{#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
|
||||
bind:ref
|
||||
{...$$props}
|
||||
bind:value
|
||||
on:change={() => {
|
||||
console.log('change');
|
||||
}} />
|
||||
{/if}
|
||||
98
src/TextInput/TextInput.stories.js
Normal file
98
src/TextInput/TextInput.stories.js
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
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"
|
||||
),
|
||||
placeholder: text("Placeholder text (placeholder)", "Placeholder text."),
|
||||
id: text("TextInput id", "text-input-id"),
|
||||
name: text("TextInput name", "text-input-name"),
|
||||
},
|
||||
});
|
||||
|
||||
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"
|
||||
),
|
||||
placeholder: text("Placeholder text (placeholder)", "Placeholder text."),
|
||||
id: text("TextInput id", "text-input-id"),
|
||||
name: text("TextInput name", "text-input-name"),
|
||||
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"
|
||||
),
|
||||
placeholder: text("Placeholder text (placeholder)", "Placeholder text."),
|
||||
id: text("TextInput id", "text-input-id"),
|
||||
name: text("TextInput name", "text-input-name"),
|
||||
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" } });
|
||||
76
src/TextInput/TextInput.svelte
Normal file
76
src/TextInput/TextInput.svelte
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<script>
|
||||
export let type = "";
|
||||
export let value = "";
|
||||
export let placeholder = "";
|
||||
export let light = false;
|
||||
export let disabled = false;
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
export let name = undefined;
|
||||
export let helperText = "";
|
||||
export let labelText = "";
|
||||
export let hideLabel = false;
|
||||
export let invalid = false;
|
||||
export let invalidText = "";
|
||||
export let ref = null;
|
||||
|
||||
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
|
||||
|
||||
$: errorId = `error-${id}`;
|
||||
</script>
|
||||
|
||||
<div
|
||||
class:bx--form-item={true}
|
||||
class:bx--text-input-wrapper={true}
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
{#if labelText}
|
||||
<label
|
||||
for={id}
|
||||
class:bx--label={true}
|
||||
class:bx--visually-hidden={hideLabel}
|
||||
class:bx--label--disabled={disabled}>
|
||||
{labelText}
|
||||
</label>
|
||||
{/if}
|
||||
{#if helperText}
|
||||
<div
|
||||
class:bx--form__helper-text={true}
|
||||
class:bx--form__helper-text--disabled={disabled}>
|
||||
{helperText}
|
||||
</div>
|
||||
{/if}
|
||||
<div
|
||||
data-invalid={invalid || undefined}
|
||||
class:bx--text-input__field-wrapper={true}>
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--text-input__invalid-icon" />
|
||||
{/if}
|
||||
<input
|
||||
bind:this={ref}
|
||||
data-invalid={invalid || undefined}
|
||||
aria-invalid={invalid || undefined}
|
||||
aria-describedby={invalid ? errorId : undefined}
|
||||
{disabled}
|
||||
{id}
|
||||
{name}
|
||||
{placeholder}
|
||||
{type}
|
||||
{value}
|
||||
class:bx--text-input={true}
|
||||
class:bx--text-input--light={light}
|
||||
class:bx--text-input--invalid={invalid}
|
||||
on:change
|
||||
on:input
|
||||
on:input={({ target }) => {
|
||||
value = target.value;
|
||||
}}
|
||||
on:focus
|
||||
on:blur />
|
||||
</div>
|
||||
{#if invalid}
|
||||
<div class:bx--form-requirement={true} id={errorId}>{invalidText}</div>
|
||||
{/if}
|
||||
</div>
|
||||
3
src/TextInput/index.js
Normal file
3
src/TextInput/index.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export { default as TextInput } from "./TextInput.svelte";
|
||||
export { default as TextInputSkeleton } from "./TextInput.Skeleton.svelte";
|
||||
export { default as PasswordInput } from "./PasswordInput.svelte";
|
||||
Loading…
Add table
Add a link
Reference in a new issue