From bfa2b3199448ff6a96e2226ad2823a9982e8405f Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Tue, 2 Jul 2024 17:11:56 -0400 Subject: [PATCH 01/21] Use SiteAlert component from uswds --- .../components/common/announcement/index.scss | 1 + .../components/common/announcement/index.tsx | 17 +++++++++++++++++ app/scripts/components/common/layout-root.tsx | 3 ++- 3 files changed, 20 insertions(+), 1 deletion(-) create mode 100644 app/scripts/components/common/announcement/index.scss create mode 100644 app/scripts/components/common/announcement/index.tsx diff --git a/app/scripts/components/common/announcement/index.scss b/app/scripts/components/common/announcement/index.scss new file mode 100644 index 000000000..6e124c5cc --- /dev/null +++ b/app/scripts/components/common/announcement/index.scss @@ -0,0 +1 @@ +@use "usa-alert"; \ No newline at end of file diff --git a/app/scripts/components/common/announcement/index.tsx b/app/scripts/components/common/announcement/index.tsx new file mode 100644 index 000000000..01b3ce07d --- /dev/null +++ b/app/scripts/components/common/announcement/index.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import { SiteAlert } from "@trussworks/react-uswds"; +import './index.scss'; + +export default function Announcement() { + return Alert; +} + +// return (
+//
+//

+// Lorem ipsum dolor sit amet, +// consectetur adipiscing +// elit, sed do eiusmod. +//

+//
+//
); \ No newline at end of file diff --git a/app/scripts/components/common/layout-root.tsx b/app/scripts/components/common/layout-root.tsx index efcb4593e..87237eaa4 100644 --- a/app/scripts/components/common/layout-root.tsx +++ b/app/scripts/components/common/layout-root.tsx @@ -10,8 +10,8 @@ import React, { import { useDeepCompareEffect } from 'use-deep-compare'; import styled from 'styled-components'; import { Outlet } from 'react-router'; - import { reveal } from '@devseed-ui/animation'; +import Announcement from './announcement'; import MetaTags from './meta-tags'; import PageFooter from './page-footer'; @@ -57,6 +57,7 @@ function LayoutRoot(props: { children?: ReactNode }) { description={description || appDescription} thumbnail={thumbnail} /> + From 242fa7e0e232cb429376a0101ab7a739642b8495 Mon Sep 17 00:00:00 2001 From: Gjore Milevski Date: Wed, 3 Jul 2024 13:10:04 +0200 Subject: [PATCH 02/21] Safelist component selectors --- app/scripts/components/common/announcement/index.tsx | 2 +- postcss.config.js | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/app/scripts/components/common/announcement/index.tsx b/app/scripts/components/common/announcement/index.tsx index 01b3ce07d..5fd2cb063 100644 --- a/app/scripts/components/common/announcement/index.tsx +++ b/app/scripts/components/common/announcement/index.tsx @@ -3,7 +3,7 @@ import { SiteAlert } from "@trussworks/react-uswds"; import './index.scss'; export default function Announcement() { - return Alert; + return Alert; } // return (
diff --git a/postcss.config.js b/postcss.config.js index d89b70123..50f8b0537 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -10,7 +10,11 @@ module.exports = { './app/**/*.{js,jsx,ts,tsx}', '@trussworks/react-uswds/lib/index.css' ], - defaultExtractor: (content) => content.match(/[\w-/:]+(? content.match(/[\w-/:]+(? Date: Tue, 9 Jul 2024 10:32:25 +0200 Subject: [PATCH 03/21] Replace importing the whole uswds package with usa-site-alert --- app/scripts/components/common/announcement/index.scss | 2 +- app/scripts/styles/styles.scss | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/app/scripts/components/common/announcement/index.scss b/app/scripts/components/common/announcement/index.scss index 6e124c5cc..83080b909 100644 --- a/app/scripts/components/common/announcement/index.scss +++ b/app/scripts/components/common/announcement/index.scss @@ -1 +1 @@ -@use "usa-alert"; \ No newline at end of file +@use "usa-site-alert"; \ No newline at end of file diff --git a/app/scripts/styles/styles.scss b/app/scripts/styles/styles.scss index a325c6d23..f8ddd42fe 100644 --- a/app/scripts/styles/styles.scss +++ b/app/scripts/styles/styles.scss @@ -1,2 +1 @@ @forward 'uswds-theme'; -@forward 'uswds'; \ No newline at end of file From d26df3eaed0b4bd4858bd164205fdda1198c14d7 Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Tue, 2 Jul 2024 17:11:56 -0400 Subject: [PATCH 04/21] Use SiteAlert component from uswds --- .../components/common/announcement/index.scss | 1 + .../components/common/announcement/index.tsx | 17 +++++++++++++++++ .../components/common/layout-root/index.tsx | 3 ++- 3 files changed, 20 insertions(+), 1 deletion(-) create mode 100644 app/scripts/components/common/announcement/index.scss create mode 100644 app/scripts/components/common/announcement/index.tsx diff --git a/app/scripts/components/common/announcement/index.scss b/app/scripts/components/common/announcement/index.scss new file mode 100644 index 000000000..6e124c5cc --- /dev/null +++ b/app/scripts/components/common/announcement/index.scss @@ -0,0 +1 @@ +@use "usa-alert"; \ No newline at end of file diff --git a/app/scripts/components/common/announcement/index.tsx b/app/scripts/components/common/announcement/index.tsx new file mode 100644 index 000000000..01b3ce07d --- /dev/null +++ b/app/scripts/components/common/announcement/index.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import { SiteAlert } from "@trussworks/react-uswds"; +import './index.scss'; + +export default function Announcement() { + return Alert; +} + +// return (
+//
+//

+// Lorem ipsum dolor sit amet, +// consectetur adipiscing +// elit, sed do eiusmod. +//

+//
+//
); \ No newline at end of file diff --git a/app/scripts/components/common/layout-root/index.tsx b/app/scripts/components/common/layout-root/index.tsx index f16edd26e..f72330da1 100644 --- a/app/scripts/components/common/layout-root/index.tsx +++ b/app/scripts/components/common/layout-root/index.tsx @@ -2,8 +2,8 @@ import React, { ReactNode, useContext, useCallback } from 'react'; import { useDeepCompareEffect } from 'use-deep-compare'; import styled from 'styled-components'; import { Outlet } from 'react-router'; - import { reveal } from '@devseed-ui/animation'; +import Announcement from './announcement'; import MetaTags from '../meta-tags'; import PageFooter from '../page-footer'; @@ -50,6 +50,7 @@ function LayoutRoot(props: { children?: ReactNode }) { description={description || appDescription} thumbnail={thumbnail} /> + From 090ecf70cae021d48a13ea5214e4e00a6707fdfe Mon Sep 17 00:00:00 2001 From: Gjore Milevski Date: Wed, 3 Jul 2024 13:10:04 +0200 Subject: [PATCH 05/21] Safelist component selectors --- app/scripts/components/common/announcement/index.tsx | 2 +- postcss.config.js | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/app/scripts/components/common/announcement/index.tsx b/app/scripts/components/common/announcement/index.tsx index 01b3ce07d..5fd2cb063 100644 --- a/app/scripts/components/common/announcement/index.tsx +++ b/app/scripts/components/common/announcement/index.tsx @@ -3,7 +3,7 @@ import { SiteAlert } from "@trussworks/react-uswds"; import './index.scss'; export default function Announcement() { - return Alert; + return Alert; } // return (
diff --git a/postcss.config.js b/postcss.config.js index d89b70123..50f8b0537 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -10,7 +10,11 @@ module.exports = { './app/**/*.{js,jsx,ts,tsx}', '@trussworks/react-uswds/lib/index.css' ], - defaultExtractor: (content) => content.match(/[\w-/:]+(? content.match(/[\w-/:]+(? Date: Tue, 9 Jul 2024 10:32:25 +0200 Subject: [PATCH 06/21] Replace importing the whole uswds package with usa-site-alert --- app/scripts/components/common/announcement/index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/scripts/components/common/announcement/index.scss b/app/scripts/components/common/announcement/index.scss index 6e124c5cc..83080b909 100644 --- a/app/scripts/components/common/announcement/index.scss +++ b/app/scripts/components/common/announcement/index.scss @@ -1 +1 @@ -@use "usa-alert"; \ No newline at end of file +@use "usa-site-alert"; \ No newline at end of file From 121c8e5d594a2b23e90f2109c52222e971e9ac03 Mon Sep 17 00:00:00 2001 From: Gjore Milevski Date: Tue, 9 Jul 2024 12:05:56 +0200 Subject: [PATCH 07/21] Merge branch 'main' into 288-announcement --- app/scripts/components/common/layout-root/index.tsx | 2 +- postcss.config.js | 12 ------------ 2 files changed, 1 insertion(+), 13 deletions(-) diff --git a/app/scripts/components/common/layout-root/index.tsx b/app/scripts/components/common/layout-root/index.tsx index f72330da1..68c9cf697 100644 --- a/app/scripts/components/common/layout-root/index.tsx +++ b/app/scripts/components/common/layout-root/index.tsx @@ -3,7 +3,6 @@ import { useDeepCompareEffect } from 'use-deep-compare'; import styled from 'styled-components'; import { Outlet } from 'react-router'; import { reveal } from '@devseed-ui/animation'; -import Announcement from './announcement'; import MetaTags from '../meta-tags'; import PageFooter from '../page-footer'; @@ -12,6 +11,7 @@ import { LayoutRootContext } from './context'; import { useGoogleTagManager } from '$utils/use-google-tag-manager'; import NavWrapper from '$components/common/nav-wrapper'; +import Announcement from '../announcement'; const appTitle = process.env.APP_TITLE; const appDescription = process.env.APP_DESCRIPTION; diff --git a/postcss.config.js b/postcss.config.js index 50f8b0537..08f7b4d32 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -4,17 +4,5 @@ module.exports = { plugins: [ require('autoprefixer'), require('postcss-import'), - require('@fullhuman/postcss-purgecss')({ - content: [ - './dist/index.html', - './app/**/*.{js,jsx,ts,tsx}', - '@trussworks/react-uswds/lib/index.css' - ], - defaultExtractor: (content) => content.match(/[\w-/:]+(? Date: Tue, 9 Jul 2024 12:12:13 +0200 Subject: [PATCH 08/21] Update import --- app/scripts/components/common/layout-root/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/scripts/components/common/layout-root/index.tsx b/app/scripts/components/common/layout-root/index.tsx index 0c420e7cb..68c9cf697 100644 --- a/app/scripts/components/common/layout-root/index.tsx +++ b/app/scripts/components/common/layout-root/index.tsx @@ -3,7 +3,6 @@ import { useDeepCompareEffect } from 'use-deep-compare'; import styled from 'styled-components'; import { Outlet } from 'react-router'; import { reveal } from '@devseed-ui/animation'; -import Announcement from './announcement'; import MetaTags from '../meta-tags'; import PageFooter from '../page-footer'; From 6456ca14a61f9e83d437d1a685f552b1d0d1d26e Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Fri, 12 Jul 2024 15:23:29 -0400 Subject: [PATCH 09/21] Site Alert --- .../components/common/announcement/index.scss | 19 ++++++++- .../components/common/announcement/index.tsx | 39 ++++++++++++------- app/scripts/styles/styles.scss | 1 + postcss.config.js | 5 +-- yarn.lock | 20 ---------- 5 files changed, 45 insertions(+), 39 deletions(-) diff --git a/app/scripts/components/common/announcement/index.scss b/app/scripts/components/common/announcement/index.scss index 83080b909..c60e4d2a0 100644 --- a/app/scripts/components/common/announcement/index.scss +++ b/app/scripts/components/common/announcement/index.scss @@ -1 +1,18 @@ -@use "usa-site-alert"; \ No newline at end of file +@use "usa-site-alert" as siteAlert; +@use "usa-button" as button; +@use "uswds-helpers/src/styles" as helpers; + +// @TODO: How can I use USWDS mixins ? +.position-relative { + position: relative; +} + +.position-absolute { + position: absolute; + top: 0; + right: 0; + height: 100%; + display: flex; + +} + diff --git a/app/scripts/components/common/announcement/index.tsx b/app/scripts/components/common/announcement/index.tsx index 5fd2cb063..e05a39e6f 100644 --- a/app/scripts/components/common/announcement/index.tsx +++ b/app/scripts/components/common/announcement/index.tsx @@ -1,17 +1,28 @@ -import React from "react"; -import { SiteAlert } from "@trussworks/react-uswds"; +import React, {useState} from "react"; +import { Alert } from "@trussworks/react-uswds"; import './index.scss'; -export default function Announcement() { - return Alert; -} +export default function Announcement(props) { + const [isOpen, setIsOpen] = useState(true); + const text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum commodo libero quis bibendum. Ut in lobortis augue, vel ultricies ligula."; + + return ( +
+ {isOpen && + (
+ -// return (
-//
-//

-// Lorem ipsum dolor sit amet, -// consectetur adipiscing -// elit, sed do eiusmod. -//

-//
-//
); \ No newline at end of file + {text} + +
+ +
+
)} +
+ ); +} diff --git a/app/scripts/styles/styles.scss b/app/scripts/styles/styles.scss index f8ddd42fe..e82c169ce 100644 --- a/app/scripts/styles/styles.scss +++ b/app/scripts/styles/styles.scss @@ -1 +1,2 @@ @forward 'uswds-theme'; +@use "uswds-helpers/src/styles" as helpers; diff --git a/postcss.config.js b/postcss.config.js index 08f7b4d32..d4c4a6574 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,8 +1,5 @@ module.exports = { syntax: 'postcss-scss', parser: 'postcss-safe-parser', - plugins: [ - require('autoprefixer'), - require('postcss-import'), - ] + plugins: [require('autoprefixer'), require('postcss-import')] }; diff --git a/yarn.lock b/yarn.lock index 6bc8248aa..bd53f8323 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2460,18 +2460,6 @@ "@parcel/utils" "2.12.0" nullthrows "^1.1.1" -"@parcel/bundler-experimental@^2.7.0": - version "2.7.0" - resolved "http://verdaccio.ds.io:4873/@parcel%2fbundler-experimental/-/bundler-experimental-2.7.0.tgz#b1bdb830732ac77e5997ed7ed4a31448dd6a5866" - integrity sha512-FrQVMiyy/yQHKiXwpgnphnaThRdPe5qmBh/6MZTzHRIUszONOvA1oGvVskDJhVG4zE/l5lCkdvlJH/aaR//s7A== - dependencies: - "@parcel/diagnostic" "2.7.0" - "@parcel/graph" "2.7.0" - "@parcel/hash" "2.7.0" - "@parcel/plugin" "2.7.0" - "@parcel/utils" "2.7.0" - nullthrows "^1.1.1" - "@parcel/cache@2.12.0": version "2.12.0" resolved "http://verdaccio.ds.io:4873/@parcel%2fcache/-/cache-2.12.0.tgz#b8fd2ea2bc7a2353a9b20344cc191bfb4f8284f3" @@ -2684,14 +2672,6 @@ "@parcel/watcher" "^2.0.0" "@parcel/workers" "2.7.0" -"@parcel/graph@2.7.0": - version "2.7.0" - resolved "http://verdaccio.ds.io:4873/@parcel%2fgraph/-/graph-2.7.0.tgz#2ae326c62764aaa53324b89d9c83ec0bc6ad55bf" - integrity sha512-Q6E94GS6q45PtsZh+m+gvFRp/N1Qopxhu2sxjcWsGs5iBd6IWn2oYLWOH5iVzEjWuYpW2HkB08lH6J50O63uOA== - dependencies: - "@parcel/utils" "2.7.0" - nullthrows "^1.1.1" - "@parcel/graph@3.2.0": version "3.2.0" resolved "http://verdaccio.ds.io:4873/@parcel%2fgraph/-/graph-3.2.0.tgz#309e6e3f19ef4ea7f71b2341ec1bcc08e7c43523" From 223481aecac16c96bb8f22528e6f768bb4f6a7c1 Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Mon, 15 Jul 2024 13:27:58 -0400 Subject: [PATCH 10/21] Add announcement banner on top of the website --- .../components/common/announcement/index.scss | 11 +++-- .../components/common/announcement/index.tsx | 44 ++++++++++++++----- .../components/common/layout-root/index.tsx | 6 +-- app/scripts/components/home/index.tsx | 14 +++++- app/scripts/styles/styles.scss | 1 - 5 files changed, 56 insertions(+), 20 deletions(-) diff --git a/app/scripts/components/common/announcement/index.scss b/app/scripts/components/common/announcement/index.scss index c60e4d2a0..97dadf350 100644 --- a/app/scripts/components/common/announcement/index.scss +++ b/app/scripts/components/common/announcement/index.scss @@ -1,7 +1,9 @@ -@use "usa-site-alert" as siteAlert; +@use "usa-banner" as siteAlert; @use "usa-button" as button; -@use "uswds-helpers/src/styles" as helpers; +@use "uswds-core/src/styles/functions/units" as units; +@use "uswds-utilities"; +// @use "uswds-utilities/src/styles/rules"; // @TODO: How can I use USWDS mixins ? .position-relative { position: relative; @@ -13,6 +15,9 @@ right: 0; height: 100%; display: flex; - } +.usa-banner__content { + padding-top: units.spacing-multiple(1); + padding-bottom: units.spacing-multiple(1); +} diff --git a/app/scripts/components/common/announcement/index.tsx b/app/scripts/components/common/announcement/index.tsx index e05a39e6f..792992758 100644 --- a/app/scripts/components/common/announcement/index.tsx +++ b/app/scripts/components/common/announcement/index.tsx @@ -1,25 +1,47 @@ import React, {useState} from "react"; -import { Alert } from "@trussworks/react-uswds"; +import { Banner, BannerContent, Icon } from "@trussworks/react-uswds"; +import SmartLink from '$components/common/smart-link'; import './index.scss'; -export default function Announcement(props) { - const [isOpen, setIsOpen] = useState(true); - const text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum commodo libero quis bibendum. Ut in lobortis augue, vel ultricies ligula."; +const BANNER_KEY = 'dismissedBannerUrl'; + +function hasExpired(expiryDatetime) { + const expiryDate = new Date(expiryDatetime); + const currentDate = new Date(); + return !!(currentDate > expiryDate); +} + +export default function Announcement({expiryDate, actionUrl, contents}) { + const showBanner = (localStorage.getItem(BANNER_KEY) !== actionUrl); + const [isOpen, setIsOpen] = useState(showBanner && !(hasExpired(expiryDate))); + + function onClose () { + localStorage.setItem( + BANNER_KEY, + actionUrl + ); + setIsOpen(false); + } + console.log(showBanner); return (
{isOpen && (
- - - {text} - -
+ + + +

+ + + +

)} diff --git a/app/scripts/components/common/layout-root/index.tsx b/app/scripts/components/common/layout-root/index.tsx index 68c9cf697..97180f2ee 100644 --- a/app/scripts/components/common/layout-root/index.tsx +++ b/app/scripts/components/common/layout-root/index.tsx @@ -6,12 +6,12 @@ import { reveal } from '@devseed-ui/animation'; import MetaTags from '../meta-tags'; import PageFooter from '../page-footer'; +import Announcement from '../announcement'; import { LayoutRootContext } from './context'; import { useGoogleTagManager } from '$utils/use-google-tag-manager'; import NavWrapper from '$components/common/nav-wrapper'; -import Announcement from '../announcement'; const appTitle = process.env.APP_TITLE; const appDescription = process.env.APP_DESCRIPTION; @@ -36,7 +36,7 @@ function LayoutRoot(props: { children?: ReactNode }) { useGoogleTagManager(); - const { title, thumbnail, description, hideFooter } = + const { title, thumbnail, description, announcement, hideFooter } = useContext(LayoutRootContext); const truncatedTitle = @@ -50,7 +50,7 @@ function LayoutRoot(props: { children?: ReactNode }) { description={description || appDescription} thumbnail={thumbnail} /> - + {announcement && } diff --git a/app/scripts/components/home/index.tsx b/app/scripts/components/home/index.tsx index 495e2fcde..f33007329 100644 --- a/app/scripts/components/home/index.tsx +++ b/app/scripts/components/home/index.tsx @@ -5,7 +5,7 @@ import { Button } from '@devseed-ui/button'; import { glsp, listReset, media, themeVal } from '@devseed-ui/theme-provider'; import { Heading } from '@devseed-ui/typography'; import { CollecticonChevronRightSmall } from '@devseed-ui/collecticons'; -import { getOverride } from 'veda'; +import { getOverride, getString } from 'veda'; import rootCoverImage from '../../../graphics/layout/root-welcome--cover.jpg'; @@ -24,6 +24,7 @@ import { ComponentOverride, ContentOverride } from '$components/common/page-overrides'; +import { render } from 'react-dom'; const homeContent = getOverride('homeContent'); @@ -131,9 +132,18 @@ const getCoverProps = () => { function RootHome() { const { show: showFeedbackModal } = useFeedbackModal(); + const renderAnnouncement = getString('bannerUrl')?.other && getString('banner')?.other; + return ( - + Date: Fri, 19 Jul 2024 16:13:48 -0400 Subject: [PATCH 11/21] Make Banner part of configuration --- .../components/common/announcement/index.tsx | 35 ++++++++++--------- .../components/common/layout-root/index.tsx | 2 +- app/scripts/components/home/index.tsx | 16 ++++----- parcel-resolver-veda/index.js | 6 +++- 4 files changed, 32 insertions(+), 27 deletions(-) diff --git a/app/scripts/components/common/announcement/index.tsx b/app/scripts/components/common/announcement/index.tsx index 792992758..bf19f0e39 100644 --- a/app/scripts/components/common/announcement/index.tsx +++ b/app/scripts/components/common/announcement/index.tsx @@ -11,7 +11,7 @@ function hasExpired(expiryDatetime) { return !!(currentDate > expiryDate); } -export default function Announcement({expiryDate, actionUrl, contents}) { +export default function Announcement({appTitle, expiryDate, actionUrl, contents}: {appTitle: string, expiryDate: Date, actionUrl: string, contents: string}) { const showBanner = (localStorage.getItem(BANNER_KEY) !== actionUrl); const [isOpen, setIsOpen] = useState(showBanner && !(hasExpired(expiryDate))); @@ -23,27 +23,28 @@ export default function Announcement({expiryDate, actionUrl, contents}) { ); setIsOpen(false); } - console.log(showBanner); + return (
{isOpen && (
- - - -

- - - -

- -
+ type='button' + aria-label="Close Banner" + onClick={onClose} + > + + +
)}
); diff --git a/app/scripts/components/common/layout-root/index.tsx b/app/scripts/components/common/layout-root/index.tsx index 97180f2ee..1391a6ae7 100644 --- a/app/scripts/components/common/layout-root/index.tsx +++ b/app/scripts/components/common/layout-root/index.tsx @@ -50,7 +50,7 @@ function LayoutRoot(props: { children?: ReactNode }) { description={description || appDescription} thumbnail={thumbnail} /> - {announcement && } + {announcement && } diff --git a/app/scripts/components/home/index.tsx b/app/scripts/components/home/index.tsx index f33007329..0988d1e1d 100644 --- a/app/scripts/components/home/index.tsx +++ b/app/scripts/components/home/index.tsx @@ -4,8 +4,8 @@ import { Link } from 'react-router-dom'; import { Button } from '@devseed-ui/button'; import { glsp, listReset, media, themeVal } from '@devseed-ui/theme-provider'; import { Heading } from '@devseed-ui/typography'; -import { CollecticonChevronRightSmall } from '@devseed-ui/collecticons'; -import { getOverride, getString } from 'veda'; +import { CollecticonChevronRightSmall, CollecticonShrinkToLeft } from '@devseed-ui/collecticons'; +import { getOverride, getBanner, getConfig } from 'veda'; import rootCoverImage from '../../../graphics/layout/root-welcome--cover.jpg'; @@ -24,7 +24,6 @@ import { ComponentOverride, ContentOverride } from '$components/common/page-overrides'; -import { render } from 'react-dom'; const homeContent = getOverride('homeContent'); @@ -132,16 +131,17 @@ const getCoverProps = () => { function RootHome() { const { show: showFeedbackModal } = useFeedbackModal(); - const renderAnnouncement = getString('bannerUrl')?.other && getString('banner')?.other; + const banner = getBanner(); + const renderBanner = !!banner && banner.text && banner.url && banner.expires; return ( diff --git a/parcel-resolver-veda/index.js b/parcel-resolver-veda/index.js index 58e307e4c..afa4f8e25 100644 --- a/parcel-resolver-veda/index.js +++ b/parcel-resolver-veda/index.js @@ -194,7 +194,8 @@ module.exports = new Resolver({ logger )}, strings: ${JSON.stringify(withDefaultStrings(result.strings))}, - booleans: ${JSON.stringify(withDefaultStrings(result.booleans))} + booleans: ${JSON.stringify(withDefaultStrings(result.booleans))}, + banner: ${JSON.stringify(result.banner)} }; export const theme = ${JSON.stringify(result.theme) || null}; @@ -211,6 +212,9 @@ module.exports = new Resolver({ export const getString = (variable) => config.strings[variable]; export const getBoolean = (variable) => config.booleans[variable]; + export const getConfig = () => config; + export const getBanner = () => config.banner; + export const datasets = ${generateMdxDataObject(datasetsImportData)}; export const stories = ${generateMdxDataObject(storiesImportData)}; `; From fb8bf3f51a3224f1ea70e27634aa62b3af0aeec1 Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Fri, 19 Jul 2024 16:19:50 -0400 Subject: [PATCH 12/21] Move style, rename component to banner --- .../common/{announcement => banner}/index.scss | 7 ++----- .../common/{announcement => banner}/index.tsx | 10 +++++----- app/scripts/components/common/layout-root/index.tsx | 4 ++-- app/scripts/styles/styles.scss | 4 ++++ 4 files changed, 13 insertions(+), 12 deletions(-) rename app/scripts/components/common/{announcement => banner}/index.scss (73%) rename app/scripts/components/common/{announcement => banner}/index.tsx (78%) diff --git a/app/scripts/components/common/announcement/index.scss b/app/scripts/components/common/banner/index.scss similarity index 73% rename from app/scripts/components/common/announcement/index.scss rename to app/scripts/components/common/banner/index.scss index 97dadf350..8f6c7153f 100644 --- a/app/scripts/components/common/announcement/index.scss +++ b/app/scripts/components/common/banner/index.scss @@ -1,9 +1,6 @@ -@use "usa-banner" as siteAlert; -@use "usa-button" as button; - @use "uswds-core/src/styles/functions/units" as units; -@use "uswds-utilities"; -// @use "uswds-utilities/src/styles/rules"; + + // @TODO: How can I use USWDS mixins ? .position-relative { position: relative; diff --git a/app/scripts/components/common/announcement/index.tsx b/app/scripts/components/common/banner/index.tsx similarity index 78% rename from app/scripts/components/common/announcement/index.tsx rename to app/scripts/components/common/banner/index.tsx index bf19f0e39..841dae019 100644 --- a/app/scripts/components/common/announcement/index.tsx +++ b/app/scripts/components/common/banner/index.tsx @@ -1,5 +1,5 @@ import React, {useState} from "react"; -import { Banner, BannerContent, Icon } from "@trussworks/react-uswds"; +import { Banner as USWDSBanner, BannerContent, Icon } from "@trussworks/react-uswds"; import SmartLink from '$components/common/smart-link'; import './index.scss'; @@ -11,7 +11,7 @@ function hasExpired(expiryDatetime) { return !!(currentDate > expiryDate); } -export default function Announcement({appTitle, expiryDate, actionUrl, contents}: {appTitle: string, expiryDate: Date, actionUrl: string, contents: string}) { +export default function Banner({appTitle, expiryDate, actionUrl, contents}: {appTitle: string, expiryDate: Date, actionUrl: string, contents: string}) { const showBanner = (localStorage.getItem(BANNER_KEY) !== actionUrl); const [isOpen, setIsOpen] = useState(showBanner && !(hasExpired(expiryDate))); @@ -28,18 +28,18 @@ export default function Announcement({appTitle, expiryDate, actionUrl, contents}
{isOpen && (
- +

- +