From 7f45cbf3a19bb1d96c91ec023093a8b7b70fc827 Mon Sep 17 00:00:00 2001 From: NatSquared Date: Thu, 6 Jun 2024 17:33:09 -0700 Subject: [PATCH] Initial commit --- CHANGELOG.MD | 6 +++ .../appLayouts/AuthenticatedLayout.tsx | 2 +- .../components/appLayouts/PublicLayout.tsx | 2 +- .../src/components/common/Layout/index.tsx | 14 ++++- met-web/src/components/common/index.tsx | 2 +- .../components/engagement/new/view/index.tsx | 52 +++++++++++++++++++ met-web/src/routes/AuthenticatedRoutes.tsx | 1 + met-web/src/routes/UnauthenticatedRoutes.tsx | 11 +++- 8 files changed, 84 insertions(+), 6 deletions(-) create mode 100644 met-web/src/components/engagement/new/view/index.tsx diff --git a/CHANGELOG.MD b/CHANGELOG.MD index 909c64922..7513b6277 100644 --- a/CHANGELOG.MD +++ b/CHANGELOG.MD @@ -1,5 +1,11 @@ ## June 6, 2024 +- **Feature** Add a new engagemnt view page at `/gdx/new-look/[name]/[language]` [🎟️ DESENG-628](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-628) + + - Added a new page to view engagements using the new look for MET + - The page is available at `/gdx/new-look/[name]/[language]` + - The page is a work in progress and will be updated in the future + - **Feature** Use createBrowserRouter insead of \ in the App component [🎟️ DESENG-627](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-627) - Updated the App component to use the more flexible createBrowserRouter function instead of the component - This enables the use of [data router](https://reactrouter.com/en/6.23.0/routers/picking-a-router) functionality and other advanced features in the future, most notably the Blocker component diff --git a/met-web/src/components/appLayouts/AuthenticatedLayout.tsx b/met-web/src/components/appLayouts/AuthenticatedLayout.tsx index d795031b2..dfb6fca9a 100644 --- a/met-web/src/components/appLayouts/AuthenticatedLayout.tsx +++ b/met-web/src/components/appLayouts/AuthenticatedLayout.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import '@bcgov/design-tokens/css-prefixed/variables.css'; +import '@bcgov/design-tokens/css-prefixed/variables.css'; // Variables will be within scope within AuthenticatedLayout and its children import { Outlet } from 'react-router-dom'; import { Box } from '@mui/material'; import InternalHeader from '../layout/Header/InternalHeader'; diff --git a/met-web/src/components/appLayouts/PublicLayout.tsx b/met-web/src/components/appLayouts/PublicLayout.tsx index 12cdcf27e..9dafe23b5 100644 --- a/met-web/src/components/appLayouts/PublicLayout.tsx +++ b/met-web/src/components/appLayouts/PublicLayout.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import '@bcgov/design-tokens/css-prefixed/variables.css'; // Will be available to use in all component +import '@bcgov/design-tokens/css-prefixed/variables.css'; // Variables will be within scope within PublicLayout and its children import { Outlet } from 'react-router-dom'; import PublicHeader from '../layout/Header/PublicHeader'; import { Notification } from 'components/common/notification'; diff --git a/met-web/src/components/common/Layout/index.tsx b/met-web/src/components/common/Layout/index.tsx index e261ac41b..d0fb6e997 100644 --- a/met-web/src/components/common/Layout/index.tsx +++ b/met-web/src/components/common/Layout/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { Box, BoxProps, Theme, useMediaQuery, useTheme } from '@mui/material'; +import { Outlet } from 'react-router-dom'; const useDesktopOrLarger = (theme: Theme) => useMediaQuery(theme.breakpoints.up('md')); const useTabletOrLarger = (theme: Theme) => useMediaQuery(theme.breakpoints.up('sm')); @@ -23,7 +24,7 @@ export const ResponsiveContainer: React.FC = (props: BoxProps) => { return ( @@ -32,5 +33,16 @@ export const ResponsiveContainer: React.FC = (props: BoxProps) => { ); }; +/** + * A route wrapper that adds a responsive container around its child routes. + */ +export const ResponsiveWrapper: React.FC = () => { + return ( + + + + ); +}; + export { Table, TableHead, TableHeadRow, TableHeadCell, TableBody, TableRow, TableCell, TableContainer } from './Table'; export { DetailsContainer, Detail } from './Details'; diff --git a/met-web/src/components/common/index.tsx b/met-web/src/components/common/index.tsx index 4466c486d..1ad0aa3b2 100644 --- a/met-web/src/components/common/index.tsx +++ b/met-web/src/components/common/index.tsx @@ -179,7 +179,7 @@ export const MobileToolbar = styled(Toolbar)(() => ({ })); const StyledPrimaryButton = styled(LoadingButton)(() => ({ - backgroundColor: Palette.primary.main, + backgroundColor: colors.button.default.shade, color: '#fff', lineHeight: '1.1rem', '&:hover': { diff --git a/met-web/src/components/engagement/new/view/index.tsx b/met-web/src/components/engagement/new/view/index.tsx new file mode 100644 index 000000000..e847fa88e --- /dev/null +++ b/met-web/src/components/engagement/new/view/index.tsx @@ -0,0 +1,52 @@ +import { BodyText, Header1 } from 'components/common/Typography'; +import React from 'react'; +import { useParams } from 'react-router-dom'; +import { Link } from 'components/common/Input'; + +export const ViewEngagement = () => { + const { slug, language } = useParams(); + const oldLink = `/${slug}/${language}`; + return ( + <> +
+ View Engagement "{slug}" +
+
+ The new engagement view will be displayed here once work is completed. + + For now, please use the old view. + + Work to be completed: +
    +
  • + + Create new engagement view page + +
    • +
  • + + Add new header section to the new engagement view + +
    • +
  • + + Add new Engagement description section + +
    • +
  • + + Add new Dynamic pages section + +
    • +
  • + + Add new Survey block section + +
    • +
+
+ + ); +}; + +export default ViewEngagement; diff --git a/met-web/src/routes/AuthenticatedRoutes.tsx b/met-web/src/routes/AuthenticatedRoutes.tsx index e124021c6..3df0a1125 100644 --- a/met-web/src/routes/AuthenticatedRoutes.tsx +++ b/met-web/src/routes/AuthenticatedRoutes.tsx @@ -124,6 +124,7 @@ const AuthenticatedRoutes = () => { } /> } /> + } /> } /> ); diff --git a/met-web/src/routes/UnauthenticatedRoutes.tsx b/met-web/src/routes/UnauthenticatedRoutes.tsx index 469702818..f6c021a04 100644 --- a/met-web/src/routes/UnauthenticatedRoutes.tsx +++ b/met-web/src/routes/UnauthenticatedRoutes.tsx @@ -10,8 +10,10 @@ import ManageSubscription from '../components/engagement/view/widgets/Subscribe/ import { FormCAC } from 'components/FormCAC'; import { RedirectLogin } from './RedirectLogin'; import withLanguageParam from './LanguageParam'; -import { Route } from 'react-router-dom'; +import { Navigate, Route } from 'react-router-dom'; import NotFound from './NotFound'; +import ViewEngagement from 'components/engagement/new/view'; +import { ResponsiveWrapper } from 'components/common/Layout'; const ManageSubscriptionWrapper = withLanguageParam(ManageSubscription); const EngagementViewWrapper = withLanguageParam(EngagementView); @@ -26,8 +28,11 @@ const UnauthenticatedRoutes = () => { return ( <> } /> - } /> } /> + }> + } /> + } /> + } /> @@ -47,6 +52,8 @@ const UnauthenticatedRoutes = () => { } /> } /> + } /> + } /> } /> );