diff --git a/src/shared/ui/ContentEditable/ContentEditable.stories.svelte b/src/shared/ui/ContentEditable/ContentEditable.stories.svelte index da3c1db..a71fd6d 100644 --- a/src/shared/ui/ContentEditable/ContentEditable.stories.svelte +++ b/src/shared/ui/ContentEditable/ContentEditable.stories.svelte @@ -56,7 +56,7 @@ let longValue = $state( }} > {#snippet template(args)} - + {/snippet} @@ -70,7 +70,7 @@ let longValue = $state( }} > {#snippet template(args)} - + {/snippet} @@ -84,7 +84,7 @@ let longValue = $state( }} > {#snippet template(args)} - + {/snippet} @@ -98,7 +98,7 @@ let longValue = $state( }} > {#snippet template(args)} - + {/snippet} @@ -112,6 +112,6 @@ let longValue = $state( }} > {#snippet template(args)} - + {/snippet} diff --git a/src/shared/ui/Section/Section.stories.svelte b/src/shared/ui/Section/Section.stories.svelte index 50b9596..a7e592f 100644 --- a/src/shared/ui/Section/Section.stories.svelte +++ b/src/shared/ui/Section/Section.stories.svelte @@ -1,5 +1,4 @@ - - -{#snippet searchIcon({ className }: { className?: string })} - -{/snippet} - -{#snippet welcomeTitle({ className }: { className?: string })} -

Welcome

-{/snippet} - -{#snippet welcomeContent({ className }: { className?: string })} -
-

- This is the default section layout with a title and content area. The section uses a 2-column grid layout - with the title on the left and content on the right. -

-
-{/snippet} - -{#snippet stickyTitle({ className }: { className?: string })} -

Sticky Title

-{/snippet} - -{#snippet stickyContent({ className }: { className?: string })} -
-

- This section has a sticky title that stays fixed while you scroll through the content. Try scrolling down to - see the effect. -

-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. -

-

- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. -

-

- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. -

-

- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollim anim id est - laborum. -

-

- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. -

-
-
-{/snippet} - -{#snippet searchFontsTitle({ className }: { className?: string })} -

Search Fonts

-{/snippet} - -{#snippet searchFontsDescription({ className }: { className?: string })} - Find your perfect typeface -{/snippet} - -{#snippet searchFontsContent({ className }: { className?: string })} -
-

- Use the search bar to find fonts by name, or use the filters to browse by category, subset, or provider. -

-
-{/snippet} - -{#snippet longContentTitle({ className }: { className?: string })} -

Long Content

-{/snippet} - -{#snippet longContent({ className }: { className?: string })} -
-
-

- This section demonstrates how the sticky title behaves with longer content. As you scroll through this - content, the title remains visible at the top of the viewport. -

-
- Content block 1 -
-

- The sticky position is achieved using CSS position: sticky with a configurable top offset. This is - useful for long sections where you want to maintain context while scrolling. -

-
- Content block 2 -
-

- The Intersection Observer API is used to detect when the section title scrolls out of view, triggering - the optional onTitleStatusChange callback. -

-
- Content block 3 -
-
-
-{/snippet} - -{#snippet minimalTitle({ className }: { className?: string })} -

Minimal Section

-{/snippet} - -{#snippet minimalContent({ className }: { className?: string })} -
-

- A minimal section without index, icon, or description. Just the essentials. -

-
-{/snippet} - -{#snippet customTitle({ className }: { className?: string })} -

Custom Content

-{/snippet} - -{#snippet customDescription({ className }: { className?: string })} - With interactive elements -{/snippet} - -{#snippet customContent({ className }: { className?: string })} -
-
-
-

Card 1

-

Some content here

-
-
-

Card 2

-

More content here

-
-
-
-{/snippet} - - - {#snippet template(args)} -
-
- {#snippet title({ className })} -

Welcome

- {/snippet} - {#snippet content({ className })} -
-

- This is the default section layout with a title and content area. The section uses a - 2-column grid layout with the title on the left and content on the right. -

-
- {/snippet} -
-
+ + {#snippet template()} +
+ {#snippet content()} +

+ This is the default section layout with a title and content area. The section provides a container + for page widgets. +

+ {/snippet} +
{/snippet} - - {#snippet template(args)} -
-
-
- {#snippet title({ className })} -

Sticky Title

- {/snippet} - {#snippet content({ className })} -
-

- This section has a sticky title that stays fixed while you scroll through the content. - Try scrolling down to see the effect. -

-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. -

-

- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip - ex ea commodo consequat. -

-

- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu - fugiat nulla pariatur. -

-

- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt - mollim anim id est laborum. -

-

- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium - doloremque laudantium. -

-
-
- {/snippet} -
-
-
+ + {#snippet template()} +
+ {#snippet content()} +

+ This section includes a header with title and subtitle above the section title. +

+ {/snippet} +
{/snippet} - - {#snippet template(args)} -
-
- {#snippet title({ className })} -

Search Fonts

- {/snippet} - {#snippet icon({ className })} - - {/snippet} - {#snippet description({ className })} - Find your perfect typeface - {/snippet} - {#snippet content({ className })} -
-

- Use the search bar to find fonts by name, or use the filters to browse by category, subset, - or provider. -

-
- {/snippet} -
-
+ + {#snippet template()} +
+ {#snippet headerContent()} + + {/snippet} + {#snippet content()} +

+ Use the search bar to find fonts by name, or use the filters to browse by category, subset, or + provider. +

+ {/snippet} +
{/snippet} - {#snippet template(args)} -
-
- {#snippet title({ className })} -

Typography

- {/snippet} - {#snippet icon({ className })} - - {/snippet} - {#snippet description({ className })} - Adjust text appearance - {/snippet} - {#snippet content({ className })} -
-

- Control the size, weight, and line height of your text. These settings apply across the - comparison view. -

-
+ {#snippet template()} +
+
+ {#snippet content()} +

+ Control the size, weight, and line height of your text. These settings apply across the + comparison view. +

{/snippet}
-
- {#snippet title({ className })} -

Font Search

- {/snippet} - {#snippet icon({ className })} - - {/snippet} - {#snippet description({ className })} - Browse available typefaces - {/snippet} - {#snippet content({ className })} -
-

- Search through our collection of fonts from Google Fonts and Fontshare. Use filters to - narrow down your selection. -

-
+
+ {#snippet content()} +

+ Search through our collection of fonts from Google Fonts and Fontshare. Use filters to narrow + down your selection. +

{/snippet}
-
- {#snippet title({ className })} -

Sample List

- {/snippet} - {#snippet icon({ className })} - - {/snippet} - {#snippet description({ className })} - Preview font samples - {/snippet} - {#snippet content({ className })} -
-

- Browse through font samples with your custom text. The list is virtualized for optimal - performance. -

-
+
+ {#snippet content()} +

+ Browse through font samples with your custom text. The list is virtualized for optimal + performance. +

{/snippet}
{/snippet} - - {#snippet template(args)} -
-
- {#snippet title({ className })} -

Long Content

- {/snippet} - {#snippet content({ className })} -
-
-

- This section demonstrates how the sticky title behaves with longer content. As you - scroll through this content, the title remains visible at the top of the viewport. -

-
- Content block 1 -
-

- The sticky position is achieved using CSS position: sticky with a configurable top - offset. This is useful for long sections where you want to maintain context while - scrolling. -

-
- Content block 2 -
-

- The Intersection Observer API is used to detect when the section title scrolls out of - view, triggering the optional onTitleStatusChange callback. -

-
- Content block 3 -
-
+ + {#snippet template()} +
+ {#snippet content()} +
+

+ This section demonstrates how the component behaves with longer content. +

+
+ Content block 1
- {/snippet} -
-
+

+ The Section component provides a consistent layout container for page-level widgets with + configurable titles and content areas. +

+
+ Content block 2 +
+

+ Content is passed via snippets, allowing full flexibility in what gets rendered inside. +

+
+ Content block 3 +
+
+ {/snippet} +
{/snippet} - - {#snippet template(args)} -
-
- {#snippet title({ className })} -

Minimal Section

- {/snippet} - {#snippet content({ className })} -
-

- A minimal section without index, icon, or description. Just the essentials. -

-
- {/snippet} -
-
+ + {#snippet template()} +
+ {#snippet content()} +

+ A minimal section without index or header. Just the essentials. +

+ {/snippet} +
{/snippet} - - {#snippet template(args)} -
-
- {#snippet title({ className })} -

Custom Content

- {/snippet} - {#snippet description({ className })} - With interactive elements - {/snippet} - {#snippet content({ className })} -
-
-
-

Card 1

-

Some content here

-
-
-

Card 2

-

More content here

-
-
+ + {#snippet template()} +
+ {#snippet content()} +
+
+

Card 1

+

Some content here

- {/snippet} -
-
+
+

Card 2

+

More content here

+
+
+ {/snippet} + {/snippet}