diff --git a/.storybook/main.ts b/.storybook/main.ts index 836cbeb..4881474 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -10,7 +10,9 @@ const config: StorybookConfig = { { name: '@storybook/addon-styling', options: { - postCss: true + // postCss: { + // implementation: require.resolve('postcss') + // } } }, 'storybook-tailwind-dark-mode' diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 999427b..75993b3 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,5 +1,6 @@ + - + + diff --git a/src/lib/index.js b/src/lib/index.js index 5445360..4c48333 100644 --- a/src/lib/index.js +++ b/src/lib/index.js @@ -12,8 +12,9 @@ import SearchInput from './atoms/Input.svelte'; // Molecules import ActivityTabs from './molecules/ActivityTabs.svelte'; import TopNavigation from './molecules/TopNavigation.svelte'; -import BottomNavigation from './molecules/BottomNavigation.svelte'; +import BottomNavBar from './molecules/navigation/BottomNavBar.svelte'; import CredentialListEntry from './molecules/CredentialListEntry.svelte'; +import BottomDrawer from './molecules/dialogs/BottomDrawer.svelte'; // Templates import ActionTemplate from './templates/ActionTemplate.svelte'; @@ -48,10 +49,11 @@ export { Checkbox, ProgressBar, TopNavigation, - BottomNavigation, + BottomNavBar, CredentialListEntry, ActionTemplate, - DetailsTemplate + DetailsTemplate, + BottomDrawer }; export * from './components/ui/tabs'; diff --git a/src/lib/melt-ui/Select.svelte b/src/lib/melt-ui/Select.svelte index af55acf..fa8452a 100644 --- a/src/lib/melt-ui/Select.svelte +++ b/src/lib/melt-ui/Select.svelte @@ -1,9 +1,15 @@ - - -
- {#each Object.entries(options) as [key, arr]} -
-
{key}
- {#each arr as item} -
- {#if $isSelected(item)} -
- +
+ + + + {#if $open} +
+ {#each Object.entries(options) as [key, arr]} +
+
+ {key} +
+ {#each arr as item} +
+ {#if $isSelected(item)} +
+ +
+ {/if} + {item}
- {/if} - {item} + {/each}
{/each}
- {/each} + {/if}
diff --git a/src/lib/melt-ui/Tabs.svelte b/src/lib/melt-ui/Tabs.svelte new file mode 100644 index 0000000..358bebe --- /dev/null +++ b/src/lib/melt-ui/Tabs.svelte @@ -0,0 +1,84 @@ + + +
+
+ {#each triggers as triggerItem} + + {/each} +
+ + {#each triggers as triggerItem} +
+ + +
+ {/each} +
+ + diff --git a/src/lib/melt-ui/tabs/ActivityTabs.svelte b/src/lib/melt-ui/tabs/ActivityTabs.svelte index 25da929..335f9cc 100644 --- a/src/lib/melt-ui/tabs/ActivityTabs.svelte +++ b/src/lib/melt-ui/tabs/ActivityTabs.svelte @@ -1,108 +1,80 @@ -
+
- - + {#each triggers as triggerItem} + + {/each}
-
+
-
+
diff --git a/src/lib/melt-ui/tabs/ConnectionTabs.svelte b/src/lib/melt-ui/tabs/ConnectionTabs.svelte index 78bf7c9..9ef48a8 100644 --- a/src/lib/melt-ui/tabs/ConnectionTabs.svelte +++ b/src/lib/melt-ui/tabs/ConnectionTabs.svelte @@ -1,111 +1,85 @@ -
+
- - - + {#each triggers as triggerItem} + + {/each}
-
+
-
+
-
+
diff --git a/src/lib/molecules/BottomNavigation.svelte b/src/lib/molecules/BottomNavigation.svelte deleted file mode 100644 index afc313d..0000000 --- a/src/lib/molecules/BottomNavigation.svelte +++ /dev/null @@ -1,47 +0,0 @@ - - -
- - - dispatch('me')}> - - - - - - dispatch('scan')}> - - - - - dispatch('activity')}> - - -
diff --git a/src/lib/molecules/CredentialListEntry.svelte b/src/lib/molecules/CredentialListEntry.svelte index e1d56c9..63b9e5d 100644 --- a/src/lib/molecules/CredentialListEntry.svelte +++ b/src/lib/molecules/CredentialListEntry.svelte @@ -1,29 +1,43 @@ -
dispatch('clicked')} - on:keyup={() => dispatch('clicked')} -> + +
dispatch('clicked')} + on:keyup={() => dispatch('clicked')} + use:melt={trigger} > - - - - - +
+ + + + + +
+
+

{title}

+

{description}

+
-
-

{title}

-

{description}

-
-
+ + + + + + diff --git a/src/lib/molecules/TopNavigation.svelte b/src/lib/molecules/TopNavigation.svelte index de5a425..e087bd0 100644 --- a/src/lib/molecules/TopNavigation.svelte +++ b/src/lib/molecules/TopNavigation.svelte @@ -7,11 +7,28 @@ export let title: string; -
- {#if title} -

{title}

+

+ {title} +

{/if} +
+ +
+ + diff --git a/src/lib/molecules/dialogs/BottomDrawer.svelte b/src/lib/molecules/dialogs/BottomDrawer.svelte new file mode 100644 index 0000000..bfc1d66 --- /dev/null +++ b/src/lib/molecules/dialogs/BottomDrawer.svelte @@ -0,0 +1,127 @@ + + + + + + + +
+ {#if $open} + +
+ + +
+ + +

+ {titleText} +

+

+ {descriptionText} +

+ + + + + + + + + +
+ {/if} +
+ + diff --git a/src/lib/molecules/navigation/BottomNavBar.svelte b/src/lib/molecules/navigation/BottomNavBar.svelte new file mode 100644 index 0000000..b4ee5d6 --- /dev/null +++ b/src/lib/molecules/navigation/BottomNavBar.svelte @@ -0,0 +1,62 @@ + + +
+ + dispatch('me')}> + + + + + + + dispatch('scan')}> + + + + + dispatch('activity')} + > + + +
diff --git a/src/lib/molecules/navigation/icons/Activity.svelte b/src/lib/molecules/navigation/icons/Activity.svelte new file mode 100644 index 0000000..358d986 --- /dev/null +++ b/src/lib/molecules/navigation/icons/Activity.svelte @@ -0,0 +1,25 @@ + + + + + + diff --git a/src/lib/molecules/navigation/icons/Me.svelte b/src/lib/molecules/navigation/icons/Me.svelte new file mode 100644 index 0000000..b797dd3 --- /dev/null +++ b/src/lib/molecules/navigation/icons/Me.svelte @@ -0,0 +1,34 @@ + + + + + + + + + + + diff --git a/src/lib/molecules/navigation/icons/Scan.svelte b/src/lib/molecules/navigation/icons/Scan.svelte new file mode 100644 index 0000000..84e475f --- /dev/null +++ b/src/lib/molecules/navigation/icons/Scan.svelte @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index dc1c841..2c33b13 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,5 +1,6 @@ + diff --git a/src/routes/credentials/+page.svelte b/src/routes/credentials/+page.svelte index 3506e2e..406896c 100644 --- a/src/routes/credentials/+page.svelte +++ b/src/routes/credentials/+page.svelte @@ -1,6 +1,6 @@ @@ -12,6 +12,6 @@ goto('/profile')} />
- goto('/profile')} /> + goto('/profile')} />
diff --git a/src/routes/credentials/share/+page.svelte b/src/routes/credentials/share/+page.svelte index 6787272..acfd746 100644 --- a/src/routes/credentials/share/+page.svelte +++ b/src/routes/credentials/share/+page.svelte @@ -2,7 +2,7 @@ import { goto } from '$app/navigation'; import Button from '$lib/atoms/Button.svelte'; import ProgressBar from '$lib/atoms/ProgressBar.svelte'; - import BottomNavigation from '$lib/molecules/BottomNavigation.svelte'; + import BottomNavBar from '$lib/molecules/navigation/BottomNavBar.svelte'; import CredentialListEntry from '$lib/molecules/CredentialListEntry.svelte'; import ActionTemplate from '$lib/templates/ActionTemplate.svelte'; import { AtSymbol, FingerPrint } from 'svelte-heros-v2'; @@ -35,5 +35,5 @@
- +
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte index e37b167..515a0d6 100644 --- a/src/routes/login/+page.svelte +++ b/src/routes/login/+page.svelte @@ -1,7 +1,7 @@ diff --git a/src/routes/login/confirm/+page.svelte b/src/routes/login/confirm/+page.svelte index 4f26052..50279f8 100644 --- a/src/routes/login/confirm/+page.svelte +++ b/src/routes/login/confirm/+page.svelte @@ -1,7 +1,7 @@