mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 02:41:05 +00:00
feat(FluidForm): add FluidForm
This commit is contained in:
parent
1e6369aad1
commit
4f7d4fa434
4 changed files with 59 additions and 0 deletions
38
src/FluidForm/FluidForm.Story.svelte
Normal file
38
src/FluidForm/FluidForm.Story.svelte
Normal file
|
@ -0,0 +1,38 @@
|
||||||
|
<script>
|
||||||
|
import { PasswordInput, TextInput } from "../TextInput";
|
||||||
|
import FluidForm from "./FluidForm.svelte";
|
||||||
|
|
||||||
|
$: value = null;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<FluidForm
|
||||||
|
{...$$props}
|
||||||
|
on:submit="{(event) => {
|
||||||
|
console.log('on:submit', event);
|
||||||
|
}}"
|
||||||
|
>
|
||||||
|
<TextInput
|
||||||
|
className="some-class"
|
||||||
|
id="test2"
|
||||||
|
labelText="Text Input label"
|
||||||
|
placeholder="Placeholder text"
|
||||||
|
bind:value
|
||||||
|
on:keydown="{(e) => {
|
||||||
|
console.log('on:keydown', e);
|
||||||
|
}}"
|
||||||
|
on:change="{() => {
|
||||||
|
console.log('change');
|
||||||
|
}}"
|
||||||
|
/>
|
||||||
|
<PasswordInput
|
||||||
|
required
|
||||||
|
type="password"
|
||||||
|
id="test4"
|
||||||
|
labelText="Password"
|
||||||
|
invalid
|
||||||
|
invalidText="Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number."
|
||||||
|
on:keydown="{(e) => {
|
||||||
|
console.log('on:keydown', e);
|
||||||
|
}}"
|
||||||
|
/>
|
||||||
|
</FluidForm>
|
8
src/FluidForm/FluidForm.stories.js
Normal file
8
src/FluidForm/FluidForm.stories.js
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
import { withKnobs } from "@storybook/addon-knobs";
|
||||||
|
import Component from "./FluidForm.Story.svelte";
|
||||||
|
|
||||||
|
export default { title: "FluidForm", decorators: [withKnobs] };
|
||||||
|
|
||||||
|
export const Default = () => ({
|
||||||
|
Component,
|
||||||
|
});
|
12
src/FluidForm/FluidForm.svelte
Normal file
12
src/FluidForm/FluidForm.svelte
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
<script>
|
||||||
|
import { setContext } from "svelte";
|
||||||
|
import { Form } from "../Form";
|
||||||
|
|
||||||
|
setContext("Form", {
|
||||||
|
isFluid: true,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Form class="bx--form--fluid" {...$$restProps}>
|
||||||
|
<slot />
|
||||||
|
</Form>
|
1
src/FluidForm/index.js
Normal file
1
src/FluidForm/index.js
Normal file
|
@ -0,0 +1 @@
|
||||||
|
export { default as FluidForm } from './FluidForm.svelte'
|
Loading…
Add table
Add a link
Reference in a new issue