From 62a70b6633814bc817566026accdfe85efeb5334 Mon Sep 17 00:00:00 2001 From: razzle Date: Tue, 24 Jan 2023 18:29:38 -0600 Subject: [PATCH] 1247 configure/review page redesign (#1252) ## Description This PR introduces some updates to the `configure` and `review` pages, tweaking the section header components. To accomplish this, two new complex components were introduced: - `Tooltip` - powered by [Floating UI](https://floating-ui.com/) (popperJS 3.0) In addition to the above, there are some refactoring on how theming works across Zarf UI, with the introduction of using the `html` `data-theme` property until such time that Unicorn UI's theming is fully mature. ## Related Issue Fixes #1247 ## Type of change - [x] New feature (non-breaking change which adds functionality) ## Checklist before merging - [ ] Test, docs, adr added or updated as needed - [x] [Contributor Guide Steps](https://github.com/defenseunicorns/zarf/blob/main/CONTRIBUTING.md#developer-workflow) followed --- package-lock.json | 27 ++++ package.json | 1 + src/ui/app.css | 6 +- src/ui/lib/components/header.svelte | 2 +- src/ui/lib/components/icon.svelte | 18 ++- src/ui/lib/components/index.ts | 4 + .../components/package-err-not-found.svelte | 40 ++++++ .../components/package-section-header.svelte | 61 +++++++++ src/ui/lib/components/tooltip.svelte | 121 ++++++++++++++++++ src/ui/lib/palette.ts | 52 +------- src/ui/lib/store.ts | 1 + src/ui/routes/initialize/+layout.svelte | 76 ++++++----- .../routes/initialize/configure/+page.svelte | 35 ++--- src/ui/routes/initialize/deploy/+page.svelte | 2 +- src/ui/routes/initialize/review/+page.svelte | 24 ++-- 15 files changed, 339 insertions(+), 131 deletions(-) create mode 100644 src/ui/lib/components/package-err-not-found.svelte create mode 100644 src/ui/lib/components/package-section-header.svelte create mode 100644 src/ui/lib/components/tooltip.svelte diff --git a/package-lock.json b/package-lock.json index e463490405..38ce78f808 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.1", "dependencies": { "@defense-unicorns/unicorn-ui": "0.0.32", + "@floating-ui/dom": "^1.1.0", "@fontsource/roboto": "4.5.8", "@material/card": "14.0.0", "@material/data-table": "14.0.0", @@ -556,6 +557,19 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/@floating-ui/core": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.1.0.tgz", + "integrity": "sha512-zbsLwtnHo84w1Kc8rScAo5GMk1GdecSlrflIbfnEBJwvTSj1SL6kkOYV+nHraMCPEy+RNZZUaZyL8JosDGCtGQ==" + }, + "node_modules/@floating-ui/dom": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.0.tgz", + "integrity": "sha512-TSogMPVxbRe77QCj1dt8NmRiJasPvuc+eT5jnJ6YpLqgOD2zXc5UA3S1qwybN+GVCDNdKfpKy1oj8RpzLJvh6A==", + "dependencies": { + "@floating-ui/core": "^1.0.5" + } + }, "node_modules/@fontsource/roboto": { "version": "4.5.8", "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-4.5.8.tgz", @@ -6113,6 +6127,19 @@ "strip-json-comments": "^3.1.1" } }, + "@floating-ui/core": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.1.0.tgz", + "integrity": "sha512-zbsLwtnHo84w1Kc8rScAo5GMk1GdecSlrflIbfnEBJwvTSj1SL6kkOYV+nHraMCPEy+RNZZUaZyL8JosDGCtGQ==" + }, + "@floating-ui/dom": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.0.tgz", + "integrity": "sha512-TSogMPVxbRe77QCj1dt8NmRiJasPvuc+eT5jnJ6YpLqgOD2zXc5UA3S1qwybN+GVCDNdKfpKy1oj8RpzLJvh6A==", + "requires": { + "@floating-ui/core": "^1.0.5" + } + }, "@fontsource/roboto": { "version": "4.5.8", "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-4.5.8.tgz", diff --git a/package.json b/package.json index 59015aaa63..f6b44cd470 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ }, "dependencies": { "@defense-unicorns/unicorn-ui": "0.0.32", + "@floating-ui/dom": "^1.1.0", "@fontsource/roboto": "4.5.8", "@material/card": "14.0.0", "@material/data-table": "14.0.0", diff --git a/src/ui/app.css b/src/ui/app.css index 4694277bd4..a5ffda3462 100644 --- a/src/ui/app.css +++ b/src/ui/app.css @@ -45,16 +45,12 @@ body > div { .page .actionButtonsContainer { display: flex; justify-content: space-between; - margin-top: 2rem; } .page .page-section { - gap: 20px; + gap: 4px; display: flex; flex-direction: column; } -.page .page-header { - margin-top: 2rem; -} /* Shorthand Classes */ .invisible { diff --git a/src/ui/lib/components/header.svelte b/src/ui/lib/components/header.svelte index 0becf1271b..35d7573742 100644 --- a/src/ui/lib/components/header.svelte +++ b/src/ui/lib/components/header.svelte @@ -39,7 +39,7 @@ display: flex; align-items: center; background-color: #0d133d; - color: var(--mdc-theme-text-secondary-on-dark); + color: rgba(255, 255, 255, 0.7); padding: 0.5rem 1rem; justify-content: space-between; } diff --git a/src/ui/lib/components/icon.svelte b/src/ui/lib/components/icon.svelte index ee4710035f..16a00605d7 100644 --- a/src/ui/lib/components/icon.svelte +++ b/src/ui/lib/components/icon.svelte @@ -2,21 +2,21 @@ // SPDX-License-Identifier: Apache-2.0 // SPDX-FileCopyrightText: 2021-Present The Zarf Authors --> - - export let variant: MaterialSymbol | ZarfSymbol; + {#if zarfSymbols.includes(variant)} @@ -31,7 +31,6 @@ > @@ -45,7 +44,6 @@ > diff --git a/src/ui/lib/components/index.ts b/src/ui/lib/components/index.ts index dff76b2487..3b73fb40d1 100644 --- a/src/ui/lib/components/index.ts +++ b/src/ui/lib/components/index.ts @@ -8,6 +8,8 @@ import Hero from './hero.svelte'; import Icon from './icon.svelte'; import PackageComponentAccordion from './package-component-accordion.svelte'; import PackageDetailsCard from './package-details-card.svelte'; +import PackageErrNotFound from './package-err-not-found.svelte'; +import PackageSectionHeader from './package-section-header.svelte'; import Spinner from './spinner.svelte'; import ThemeToggle from './theme-toggle.svelte'; import YamlCode from './yaml-code.svelte'; @@ -20,6 +22,8 @@ export { Icon, PackageComponentAccordion, PackageDetailsCard, + PackageErrNotFound, + PackageSectionHeader, Spinner, ThemeToggle, YamlCode diff --git a/src/ui/lib/components/package-err-not-found.svelte b/src/ui/lib/components/package-err-not-found.svelte new file mode 100644 index 0000000000..ed1ee93964 --- /dev/null +++ b/src/ui/lib/components/package-err-not-found.svelte @@ -0,0 +1,40 @@ + + + + +
+ + + Package Not Found + + Make sure the following package is in the current working directory: + + {pkgName} +
+ +
+
+ + + \ No newline at end of file diff --git a/src/ui/lib/components/package-section-header.svelte b/src/ui/lib/components/package-section-header.svelte new file mode 100644 index 0000000000..5656e1528f --- /dev/null +++ b/src/ui/lib/components/package-section-header.svelte @@ -0,0 +1,61 @@ + + + +
+
+ + + {#if $$slots.tooltip} +
+ {/if} +
+ {#if $$slots.actions} +
+ +
+ {/if} +
+ + diff --git a/src/ui/lib/components/tooltip.svelte b/src/ui/lib/components/tooltip.svelte new file mode 100644 index 0000000000..4df13d40ad --- /dev/null +++ b/src/ui/lib/components/tooltip.svelte @@ -0,0 +1,121 @@ + + + + +