Update docs

Improve sections Improve Form docs
bestguy · Jul 7, 2023 · 822d73f · 822d73f
1 parent 7a4c586
commit 822d73f
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 47 deletions.
diff --git a/stories/carousel/Index.svelte b/stories/carousel/Index.svelte
@@ -23,6 +23,10 @@
  Bootstrap Carousel
 </a>
 
+<Example source={WithCaptionsSource}>
+ <WithCaptions />
+</Example>
+
 <Example title="Slides only" source={sampleSource}>
  <Sample />
 </Example>
@@ -35,6 +39,3 @@
  <WithIndicators />
 </Example>
 
-<Example title="With Captions" source={WithCaptionsSource}>
- <WithCaptions />
-</Example>
diff --git a/stories/form/DynamicValidation.svelte b/stories/form/DynamicValidation.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+ import { Button, Form, FormGroup, Input } from 'sveltestrap';
+
+ let validated = false;
+</script>
+
+<Form {validated} on:submit={(e) => e.preventDefault()}>
+ <FormGroup>
+ <Input
+ feedback="This requires a value"
+ placeholder="This requires a value"
+ required
+ />
+ </FormGroup>
+ <FormGroup>
+ <Input
+ feedback="This requires an email"
+ placeholder="This requires an email"
+ required
+ type="email"
+ />
+ </FormGroup>
+ <Button type="submit" on:click={() => (validated = true)}>Fake Submit</Button>
+</Form>
diff --git a/stories/form/Index.svelte b/stories/form/Index.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+ import Example from '../Example.svelte';
+ import DynamicValidation from './DynamicValidation.svelte';
+ import dynamicValidationSource from '!!raw-loader!./DynamicValidation.svelte';
+ import Validation from './Validation.svelte';
+ import validationSource from '!!raw-loader!./Validation.svelte';
+</script>
+
+<h1>Form</h1>
+<a href="https://getbootstrap.com/docs/5.3/forms/validation/" target="_blank">
+ Bootstrap Validation
+</a>
+
+<Example title="Validation" source={validationSource}>
+ <Validation />
+</Example>
+
+<Example title="Dynamic Validation" source={dynamicValidationSource}>
+ <DynamicValidation />
+</Example>
diff --git a/stories/form/Validation.svelte b/stories/form/Validation.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+ import { FormGroup, Input } from 'sveltestrap';
+</script>
+
+<FormGroup>
+ <Input value="Bad value" feedback="Invalid feedback" invalid />
+</FormGroup>
+
+<FormGroup>
+ <Input value="Correct value" feedback="Valid feedback" valid />
+</FormGroup>
+
diff --git a/stories/formgroup/FloatingLabels.svelte b/stories/formgroup/FloatingLabels.svelte
@@ -1,12 +1,21 @@
 <script lang="ts">
- import { Badge, Form, FormGroup, Input, Label } from 'sveltestrap';
+ import { Badge, Form, FormGroup, Input } from 'sveltestrap';
 </script>
 
 <Form>
  <FormGroup floating label="Floating Label">
  <Input placeholder="Enter a value" />
  </FormGroup>
 
+ <FormGroup floating label="Select labels always float">
+ <Input type="select" placeholder="Enter a value">
+ <option />
+ <option value="alpha">Alpha</option>
+ <option value="bravo">Bravo</option>
+ <option value="charlie">Charlie</option>
+ </Input>
+ </FormGroup>
+
  <FormGroup floating>
  <Input placeholder="Enter a value" />
  <div slot="label">

diff --git a/stories/index.stories.ts b/stories/index.stories.ts
@@ -22,7 +22,8 @@ import Navbar from './navbar/Index.svelte';
 import Offcanvas from './offcanvas/Index.svelte';
 import Nav from './nav/Index.svelte';
 import Tab from './tab/Index.svelte';
-import Grid from './layout/Index.svelte';
+import Container from './layout/Index.svelte';
+import Grid from './layout/Grid.svelte';
 import Pagination from './pagination/Index.svelte';
 import Popover from './popover/Index.svelte';
 import Progress from './progress/Index.svelte';
@@ -31,42 +32,48 @@ import Styles from './styles/Index.svelte';
 import Tables from './table/Index.svelte';
 import Toast from './toast/Index.svelte';
 import Tooltip from './tooltip/Index.svelte';
+import Validation from './form/Index.svelte';
 import Welcome from './welcome/Index.svelte';
 
 const story = (Component) => () => ({
  Component
 });
 
-storiesOf('Components', module)
- .add('Get Started', story(Welcome))
- .add('Layout', story(Grid))
- .add('Accordion', story(Accordion))
- .add('Alert', story(Alert))
- .add('Badge', story(Badge))
- .add('Breadcrumb', story(Breadcrumbs))
- .add('Button', story(Button))
- .add('ButtonDropdown', story(ButtonDropdown))
- .add('Card', story(Card))
- .add('Carousel', story(Carousel))
- .add('Collapse', story(Collapse))
- .add('Dropdown', story(Dropdown))
- .add('Fade', story(Fade))
- .add('FormGroup', story(FormGroup))
- .add('Icon', story(Icon))
- .add('Inputs', story(Inputs))
- .add('Image', story(Image))
- .add('InputGroup', story(InputGroup))
- .add('ListGroup', story(ListGroup))
- .add('Modals', story(Modals))
- .add('Nav', story(Nav))
- .add('Navbar', story(Navbar))
- .add('Offcanvas', story(Offcanvas))
- .add('Pagination', story(Pagination))
- .add('Popover', story(Popover))
- .add('Progress', story(Progress))
- .add('Spinner', story(Spinner))
- .add('Styles', story(Styles))
- .add('Tabs', story(Tab))
- .add('Table', story(Tables))
- .add('Toast', story(Toast))
- .add('Tooltip', story(Tooltip));
+storiesOf('Getting started/Get Started', module).add('Get Started', story(Welcome));
+
+storiesOf('Layout/Grid', module).add('Grid', story(Grid));
+storiesOf('Layout/Container', module).add('Container', story(Container))
+
+storiesOf('Content/Images', module).add('Images', story(Image))
+storiesOf('Content/Tables', module).add('Tables', story(Tables));
+
+storiesOf('Form/Inputs', module).add('Inputs', story(Inputs))
+storiesOf('Form/InputGroup', module).add('InputGroup', story(InputGroup))
+storiesOf('Form/FormGroup', module).add('FormGroup', story(FormGroup))
+storiesOf('Form/Validation', module).add('Validation', story(Validation));
+
+storiesOf('Components/Accordion', module).add('Accordion', story(Accordion))
+storiesOf('Components/Alert', module).add('Alert', story(Alert))
+storiesOf('Components/Badge', module).add('Badge', story(Badge))
+storiesOf('Components/Breadcrumb', module).add('Breadcrumb', story(Breadcrumbs))
+storiesOf('Components/Button', module).add('Button', story(Button))
+storiesOf('Components/ButtonDropdown', module).add('ButtonDropdown', story(ButtonDropdown))
+storiesOf('Components/Card', module).add('Card', story(Card))
+storiesOf('Components/Carousel', module).add('Carousel', story(Carousel))
+storiesOf('Components/Collapse', module).add('Collapse', story(Collapse))
+storiesOf('Components/Dropdown', module).add('Dropdown', story(Dropdown))
+storiesOf('Components/Fade', module).add('Fade', story(Fade))
+storiesOf('Components/Icon', module).add('Icon', story(Icon))
+storiesOf('Components/ListGroup', module).add('ListGroup', story(ListGroup))
+storiesOf('Components/Modals', module).add('Modals', story(Modals))
+storiesOf('Components/Nav', module).add('Nav', story(Nav))
+storiesOf('Components/Navbar', module).add('Navbar', story(Navbar))
+storiesOf('Components/Offcanvas', module).add('Offcanvas', story(Offcanvas))
+storiesOf('Components/Pagination', module).add('Pagination', story(Pagination))
+storiesOf('Components/Popover', module).add('Popover', story(Popover))
+storiesOf('Components/Progress', module).add('Progress', story(Progress))
+storiesOf('Components/Spinner', module).add('Spinner', story(Spinner))
+storiesOf('Components/Styles', module).add('Styles', story(Styles))
+storiesOf('Components/Tabs', module).add('Tabs', story(Tab))
+storiesOf('Components/Toast', module).add('Toast', story(Toast))
+storiesOf('Components/Tooltip', module).add('Tooltip', story(Tooltip));
diff --git a/stories/input/Sample.svelte b/stories/input/Sample.svelte
@@ -4,6 +4,10 @@
 </script>
 
 <Form>
+ <FormGroup>
+ <Label for="exampleText">Text</Label>
+ <Input id="exampleText" value="Some text value" />
+ </FormGroup>
  <FormGroup>
  <Label for="exampleEmail">Plain Text (Static)</Label>
  <Input plaintext value="Some plain text/ static value" />

diff --git a/stories/layout/Grid.svelte b/stories/layout/Grid.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+ import Example from '../Example.svelte';
+ import Sample from './Sample.svelte';
+ import sampleSource from '!!raw-loader!./SimplifiedSample.svelte';
+</script>
+
+<h1>Layout</h1>
+<a href="https://getbootstrap.com/docs/5.3/layout/grid/" target="_blank">
+ Bootstrap Layout Grid
+</a>
+
+<Example source={sampleSource}>
+ <Sample />
+</Example>
+
diff --git a/stories/layout/Index.svelte b/stories/layout/Index.svelte
@@ -1,20 +1,14 @@
 <script lang="ts">
  import Example from '../Example.svelte';
- import Sample from './Sample.svelte';
- import sampleSource from '!!raw-loader!./SimplifiedSample.svelte';
  import Container from './Container.svelte';
  import containerSource from '!!raw-loader!./Container.svelte';
 </script>
 
-<h1>Layout</h1>
-<a href="https://getbootstrap.com/docs/5.3/layout/grid/" target="_blank">
- Bootstrap Layout Grid
+<h1>Containers</h1>
+<a href="https://getbootstrap.com/docs/5.3/layout/containers/" target="_blank">
+ Bootstrap Containers
 </a>
 
-<Example source={sampleSource}>
- <Sample />
-</Example>
-
 <Example title="Container" stacked source={containerSource}>
  <Container />
 </Example>