From 4f44ccc11c44774a956417980e13bb085319ddbf Mon Sep 17 00:00:00 2001 From: Anil Natha Date: Fri, 8 Nov 2024 16:00:06 -0800 Subject: [PATCH 01/12] CSS cleanup. --- src/index.css | 13 ------------- src/routes/errors/not-found/index.tsx | 2 +- src/routes/health-dashboard/index.tsx | 2 +- src/routes/home/index.tsx | 2 +- src/styles/components/_Containers.scss | 15 ++++++++++++++- 5 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/index.css b/src/index.css index 6008994..f74cfe3 100644 --- a/src/index.css +++ b/src/index.css @@ -14,17 +14,4 @@ body { margin: 0; min-width: 320px; min-height: 100vh; -} - -.main-view { - width: 100%; - height: 100%; - padding: 20px; -} - -.detail-view { - height: 100%; - min-width: 250px; - background-color: var(--unity-white); - padding: 8px; } \ No newline at end of file diff --git a/src/routes/errors/not-found/index.tsx b/src/routes/errors/not-found/index.tsx index 3dc3830..4b2c690 100644 --- a/src/routes/errors/not-found/index.tsx +++ b/src/routes/errors/not-found/index.tsx @@ -8,7 +8,7 @@ function NotFound() { title="Not Found" description="Not Found" /> -
+

Not Found

The requested resource cannot be found
diff --git a/src/routes/health-dashboard/index.tsx b/src/routes/health-dashboard/index.tsx index 75aa4fa..db77a16 100644 --- a/src/routes/health-dashboard/index.tsx +++ b/src/routes/health-dashboard/index.tsx @@ -119,7 +119,7 @@ function HealthDashboard() { return ( <> -
+

Health Dashboard

{ healthApiError && {healthApiErrorMessage} }
diff --git a/src/routes/home/index.tsx b/src/routes/home/index.tsx index ea76cc4..f99c79c 100644 --- a/src/routes/home/index.tsx +++ b/src/routes/home/index.tsx @@ -12,7 +12,7 @@ function Home() { title="Home" description="Home" /> -
+

Home

Project: {project}
Venue: {venue}
diff --git a/src/styles/components/_Containers.scss b/src/styles/components/_Containers.scss index 41a710d..cf86c2f 100644 --- a/src/styles/components/_Containers.scss +++ b/src/styles/components/_Containers.scss @@ -8,9 +8,22 @@ display: flex; height: 100vh; padding: 0px; - background-color: #F1F2F3; + background-color: var(--st-gray-15); flex-grow: 1; + .unity-main-view { + width: 100%; + height: 100%; + padding: 20px; + } + + .unity-detail-view { + height: 100%; + min-width: 250px; + background-color: var(--unity-white); + padding: 8px; + } + &.unity-view-with-status { justify-content: center; align-items: center; From cdcf600462e8d0370256fd85e697d245ed6cf554 Mon Sep 17 00:00:00 2001 From: Anil Natha Date: Fri, 8 Nov 2024 16:12:06 -0800 Subject: [PATCH 02/12] Added Unity primary color palette to unity SASS variables. --- src/styles/_variables.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 3985d96..dc63c8d 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,6 +1,20 @@ :root { + /* Colors. */ --unity-black: #000; --unity-white: #fff; --unity-brand: #8851CB; + + /* Primary Color Pallette. */ + --unity-primary-100: #46039C; + --unity-primary-90: #5809BB; + --unity-primary-80: #6B0EE1; + --unity-primary-70: #811FFF; + --unity-primary-60: #984EFF; + --unity-primary-50: #A864FF; + --unity-primary-40: #B881FF; + --unity-primary-30: #CAA0FF; + --unity-primary-20: #E0CAFF; + --unity-primary-10: #F0E4FF; + } \ No newline at end of file From 5afcd3d3f3449c3fb0695e09c816d8265ca35036 Mon Sep 17 00:00:00 2001 From: Anil Natha Date: Fri, 8 Nov 2024 16:27:00 -0800 Subject: [PATCH 03/12] Updated homepage using information returned by health endpoint to display cards for each service. Crated Card and Pill components in support of this change. --- src/components/Card/index.tsx | 34 ++++++++++++ src/components/Pill/index.tsx | 11 ++++ src/routes/home/index.tsx | 56 ++++++++++++++------ src/styles/_variables.scss | 2 +- src/styles/components/_Cards.scss | 71 ++++++++++++++++++++++++++ src/styles/components/_Containers.scss | 16 ++++++ src/styles/components/_Pills.scss | 11 ++++ src/styles/styles.scss | 2 + 8 files changed, 187 insertions(+), 16 deletions(-) create mode 100644 src/components/Card/index.tsx create mode 100644 src/components/Pill/index.tsx create mode 100644 src/styles/components/_Cards.scss create mode 100644 src/styles/components/_Pills.scss diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx new file mode 100644 index 0000000..2d41632 --- /dev/null +++ b/src/components/Card/index.tsx @@ -0,0 +1,34 @@ +import { IconExternalLink } from "@nasa-jpl/react-stellar"; +import { Pill } from "../../components/Pill"; +import { formatRoute } from "../../utils/strings"; + +export type CardProps = { + description:string; + title:string; + type:string; + url:string; +} + +export const Card = ({ + description, + title, + type, + url +}:CardProps) => { + return ( + + + + {title} + + + + +
{description}
+
+ +
+ + + ) +} \ No newline at end of file diff --git a/src/components/Pill/index.tsx b/src/components/Pill/index.tsx new file mode 100644 index 0000000..c416fd0 --- /dev/null +++ b/src/components/Pill/index.tsx @@ -0,0 +1,11 @@ +export type PillProps = { + label:string +} + +export const Pill = ({ + label +}:PillProps) => { + return ( + {label} + ) +} \ No newline at end of file diff --git a/src/routes/home/index.tsx b/src/routes/home/index.tsx index f99c79c..5834b88 100644 --- a/src/routes/home/index.tsx +++ b/src/routes/home/index.tsx @@ -1,24 +1,50 @@ -import { DocumentMeta } from "../../components/DocumentMeta/DocumentMeta" import Config from "../../Config"; +import { Card } from "../../components/Card"; + + +import { DocumentMeta } from "../../components/DocumentMeta/DocumentMeta"; +import { useAppSelector } from "../../state/hooks"; function Home() { const project = Config['general']['project']; const venue = Config['general']['venue']; - return ( - <> - -
-

Home

-
Project: {project}
-
Venue: {venue}
-
- - ) + const healthState = useAppSelector((state) => { + return state.health; + }); + + return ( + <> + +
+

Home

+
Project: {project}
+
Venue: {venue}
+ +
+ + { + healthState.items.map((item) => { + return ( + + ) + }) + } + +
+ +
+ + ) } -export default Home \ No newline at end of file +export default Home; diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index dc63c8d..59f5027 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -5,7 +5,7 @@ --unity-white: #fff; --unity-brand: #8851CB; - /* Primary Color Pallette. */ + /* Primary Color Palette. */ --unity-primary-100: #46039C; --unity-primary-90: #5809BB; --unity-primary-80: #6B0EE1; diff --git a/src/styles/components/_Cards.scss b/src/styles/components/_Cards.scss new file mode 100644 index 0000000..61436c0 --- /dev/null +++ b/src/styles/components/_Cards.scss @@ -0,0 +1,71 @@ +.unity-card { + + background-color: var(--unity-white); + border-color: var(--st-gray-20); + border-radius: 8px; + border-style: solid; + border-width: 2px; + display: flex; + flex-direction: column; + gap: 16px; + max-width: 324px; + padding: 8px 16px 16px 16px; + + &:hover { + border-color: var(--unity-brand); + transition: border-color 0.2s linear; + + > .header > .icons { + visibility: visible; + opacity: 1; + transition: opacity 0.2s linear; + } + } + + > .header { + + display: flex; + justify-content: space-between; + align-items: center; + + > .title { + color: var(--unity-black); + font-size: 1.5em; + font-weight: 600; + line-height: 32px; + word-wrap: break-word; + } + + > .icons { + display: flex; + gap: 8px; + opacity: 0; + visibility: hidden; + } + + } + + > .footer { + display: flex; + justify-content: flex-start; + align-content: flex-start; + } + + a { + color: var(--unity-primary-80); + font-size: 0.75em; + font-weight: 400; + line-height: 1em; + letter-spacing: 0.48; + text-decoration: underline; + word-wrap: break-word; + } + + .description { + color: var(--unity-black); + font-size: 1em; + font-weight: 400; + letter-spacing: 0.16; + word-wrap: break-word; + } +} \ No newline at end of file diff --git a/src/styles/components/_Containers.scss b/src/styles/components/_Containers.scss index cf86c2f..290b9f6 100644 --- a/src/styles/components/_Containers.scss +++ b/src/styles/components/_Containers.scss @@ -24,6 +24,22 @@ padding: 8px; } + .unity-card-container { + + margin-top: 24px; + margin-bottom: 24px; + align-content: flex-start; + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 24px; + + > a { + text-decoration: none; + } + + } + &.unity-view-with-status { justify-content: center; align-items: center; diff --git a/src/styles/components/_Pills.scss b/src/styles/components/_Pills.scss new file mode 100644 index 0000000..68dbe12 --- /dev/null +++ b/src/styles/components/_Pills.scss @@ -0,0 +1,11 @@ +.unity-pill { + background-color: var(--st-gray-50); + border-radius: 10px; + color: var(--st-white); + font-size: 0.75em; + font-weight: 700; + line-height: 100%; + padding: 4px 8px; + text-transform: uppercase; + word-wrap: break-word; +} \ No newline at end of file diff --git a/src/styles/styles.scss b/src/styles/styles.scss index e70f0e0..02da42b 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -12,6 +12,8 @@ @import "_variables"; // Components +@import "components/_Cards"; @import "components/_Containers"; @import "components/_Grid"; @import "components/_Icons"; +@import "components/_Pills"; From 16d8a1ad81a589435b64064e2ae2243be4575eb2 Mon Sep 17 00:00:00 2001 From: Anil Natha Date: Fri, 8 Nov 2024 16:28:23 -0800 Subject: [PATCH 04/12] Set background color of body. --- src/index.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.css b/src/index.css index f74cfe3..28884c4 100644 --- a/src/index.css +++ b/src/index.css @@ -11,6 +11,7 @@ } body { + background-color: var(--st-gray-15); margin: 0; min-width: 320px; min-height: 100vh; From 834d963e7863ab915869f028ed674aef00228424 Mon Sep 17 00:00:00 2001 From: Anil Natha Date: Fri, 8 Nov 2024 16:31:43 -0800 Subject: [PATCH 05/12] Updated Unity brand color. --- src/styles/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 59f5027..6b68a9f 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -3,7 +3,7 @@ /* Colors. */ --unity-black: #000; --unity-white: #fff; - --unity-brand: #8851CB; + --unity-brand: var(--unity-primary-90); /* Primary Color Palette. */ --unity-primary-100: #46039C; From 7b09ac37c15e47f6cd3fdf25e1f908e412b3516d Mon Sep 17 00:00:00 2001 From: Anil Natha Date: Sun, 10 Nov 2024 20:12:57 -0800 Subject: [PATCH 06/12] Added hard coded references to the Health Dashboard and Gitbook documentation on homepage card display. Also updated Card component to account for differing routes. --- src/components/Card/index.tsx | 10 ++++--- src/routes/home/index.tsx | 50 ++++++++++++++++++++++------------- 2 files changed, 37 insertions(+), 23 deletions(-) diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx index 2d41632..43766e0 100644 --- a/src/components/Card/index.tsx +++ b/src/components/Card/index.tsx @@ -1,28 +1,30 @@ import { IconExternalLink } from "@nasa-jpl/react-stellar"; import { Pill } from "../../components/Pill"; -import { formatRoute } from "../../utils/strings"; export type CardProps = { description:string; + route:string; title:string; type:string; - url:string; + url?:string; } export const Card = ({ description, + route, title, type, url }:CardProps) => { return ( - + {title} - + { url && + }
{description}
diff --git a/src/routes/home/index.tsx b/src/routes/home/index.tsx index 5834b88..c678de4 100644 --- a/src/routes/home/index.tsx +++ b/src/routes/home/index.tsx @@ -1,9 +1,9 @@ import Config from "../../Config"; import { Card } from "../../components/Card"; - import { DocumentMeta } from "../../components/DocumentMeta/DocumentMeta"; import { useAppSelector } from "../../state/hooks"; +import { formatRoute } from "../../utils/strings"; function Home() { @@ -14,6 +14,33 @@ function Home() { return state.health; }); + let appCards = healthState.items.map( (item) => { + return ( + + ) + }) + + appCards.push( + , + + ); + return ( <> Home
Project: {project}
Venue: {venue}
- -
- - { - healthState.items.map((item) => { - return ( - - ) - }) - } - -
- +
+ {appCards} +
) From 44e8806899ac94c5c7346e6256dbac232243ab5a Mon Sep 17 00:00:00 2001 From: Anil Natha Date: Sun, 10 Nov 2024 20:13:16 -0800 Subject: [PATCH 07/12] Apps on homepage are now sorted. --- src/routes/home/index.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/routes/home/index.tsx b/src/routes/home/index.tsx index c678de4..60b40e8 100644 --- a/src/routes/home/index.tsx +++ b/src/routes/home/index.tsx @@ -41,6 +41,16 @@ function Home() { /> ); + appCards = appCards.sort( (a, b) => { + if( a.props.title < b.props.title ) { + return -1; + } + if( a.props.title > b.props.title ) { + return 1; + } + return 0; + }); + return ( <> Date: Sun, 10 Nov 2024 20:13:31 -0800 Subject: [PATCH 08/12] Updated link to gitbook documentation --- src/components/Navbar/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index 7dc9e24..1fe60dd 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -102,7 +102,7 @@ export default function Navbar() { }) } - + Documentation (Gitbook) { @@ -166,7 +166,7 @@ export default function Navbar() { }) } - + Documentation (Gitbook) { @@ -230,7 +230,7 @@ export default function Navbar() { return {service.componentName} }) } - {' '}Documentation (Gitbook) + {' '}Documentation (Gitbook) { healthApiError && } From 8ee8cff9b45163255d04668320feb95a5d7ef4ea Mon Sep 17 00:00:00 2001 From: Anil Natha Date: Mon, 11 Nov 2024 09:07:48 -0800 Subject: [PATCH 09/12] Fixed alignment of icons in card header. --- src/styles/components/_Cards.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/components/_Cards.scss b/src/styles/components/_Cards.scss index 61436c0..7fdad5b 100644 --- a/src/styles/components/_Cards.scss +++ b/src/styles/components/_Cards.scss @@ -26,7 +26,7 @@ display: flex; justify-content: space-between; - align-items: center; + align-items: flex-start; > .title { color: var(--unity-black); @@ -40,6 +40,7 @@ display: flex; gap: 8px; opacity: 0; + padding-top: 8px; visibility: hidden; } From 81826249aa6e8f194997bddc707fdf7bb55851b8 Mon Sep 17 00:00:00 2001 From: Anil Natha Date: Mon, 11 Nov 2024 09:10:52 -0800 Subject: [PATCH 10/12] Fixed issues with inability to open links in new window when clicking the external link icon in a card. --- src/components/Card/index.tsx | 19 +++++++++++++------ src/routes/home/index.tsx | 2 ++ 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx index 43766e0..a0bd7cd 100644 --- a/src/components/Card/index.tsx +++ b/src/components/Card/index.tsx @@ -1,12 +1,13 @@ import { IconExternalLink } from "@nasa-jpl/react-stellar"; import { Pill } from "../../components/Pill"; +import { Link } from "react-router-dom"; export type CardProps = { description:string; route:string; title:string; type:string; - url?:string; + url:string; } export const Card = ({ @@ -16,21 +17,27 @@ export const Card = ({ type, url }:CardProps) => { + + const onClickExternalHandler = (event:React.SyntheticEvent) => { + // Stop Propgation of event to parent card element; otherwise, + // the user will be navigated to the parent card route + if(event && event.stopPropagation) event.stopPropagation(); + } + return ( - + {title} - { url && - + + {onClickExternalHandler(e)}}> - }
{description}
- + ) } \ No newline at end of file diff --git a/src/routes/home/index.tsx b/src/routes/home/index.tsx index 60b40e8..3cbe305 100644 --- a/src/routes/home/index.tsx +++ b/src/routes/home/index.tsx @@ -32,12 +32,14 @@ function Home() { route={"/health-dashboard"} title="Health Dashboard" type={"web"} + url={"/health-dashboard"} />, ); From 64df2a500fdfe645440b92e1fb5ed550367b8f38 Mon Sep 17 00:00:00 2001 From: Anil Natha Date: Mon, 11 Nov 2024 09:15:12 -0800 Subject: [PATCH 11/12] Changed description for the health service card on homepage. --- src/routes/home/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/home/index.tsx b/src/routes/home/index.tsx index 3cbe305..8c2d386 100644 --- a/src/routes/home/index.tsx +++ b/src/routes/home/index.tsx @@ -28,7 +28,7 @@ function Home() { appCards.push( Date: Mon, 11 Nov 2024 09:19:48 -0800 Subject: [PATCH 12/12] Updated Changelog --- CHANGELOG.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index dce6c27..1645742 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,11 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## Unreleased (0.8.0) -- Added support to report on when health API endpoint is not avaialble in navbar and on health dashboard +- Added support to report on when health API endpoint is not available in navbar and on health dashboard - Fixed clickable area of navbar menu items - Added support to hard code links for projects/venues -- Added health check URL to health dashboard +- Added health check URL to health dashboard [#40](https://github.com/unity-sds/unity-ui/issues/40) - Fixed health dashboard column resizer element z-index +- Added cards to homepage [#38](https://github.com/unity-sds/unity-ui/issues/38) ## [0.7.0] 2024-09-27 - Updated node version lts/iron