Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove Old Commons-ui section #1019

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open

Remove Old Commons-ui section #1019

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
4fd4aff
Remove Old Commons-ui section
kelvinkipruto Dec 13, 2024
a793e22
Merge branch 'main' into ft/remove-legacy-commons-ui
kelvinkipruto Dec 13, 2024
a551dab
Improve link
kelvinkipruto Dec 13, 2024
48d09e4
Remove Old Commons-ui RichTypography
kelvinkipruto Dec 13, 2024
576ac69
Remove Old Commons-ui Copyright
kelvinkipruto Dec 13, 2024
f785b91
Remove Old Commons-ui QuickLinks
kelvinkipruto Dec 14, 2024
16cfc75
Imrove Hero Component
kelvinkipruto Jan 9, 2025
9c25d29
Improve page layouts
kelvinkipruto Jan 9, 2025
eb43ea9
Add QuickLinks tests
kelvinkipruto Jan 10, 2025
16d6221
Update Copyright
kelvinkipruto Jan 10, 2025
7f59a6a
Improve QuickLinks
kelvinkipruto Jan 10, 2025
e415296
Remove useTheme
kelvinkipruto Jan 10, 2025
c663494
FIx Map
kelvinkipruto Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion apps/climatemappedafrica/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@
"dependencies": {
"@apollo/client": "catalog:",
"@commons-ui/core": "workspace:*",
"@commons-ui/legacy": "catalog:",
"@commons-ui/next": "workspace:*",
"@commons-ui/payload": "workspace:*",
"@emotion/react": "catalog:",
Expand Down
2 changes: 1 addition & 1 deletion apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`<AboutTeam /> renders unchanged 1`] = `
class="MuiBox-root css-1termwk"
>
<div
class="makeStyles-root-5 makeStyles-root-3 makeStyles-root-1 makeStyles-fixed-2 MuiBox-root css-0"
class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1vn3dh6-MuiContainer-root"
>
<h4
class="MuiTypography-root MuiTypography-h4 css-1cvoujm-MuiTypography-root"
Expand Down
2 changes: 1 addition & 1 deletion apps/climatemappedafrica/src/components/DataIndicators/IndicatorPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { RichTypography } from "@commons-ui/legacy";
import { RichTypography } from "@commons-ui/next";
import { RichText } from "@commons-ui/payload";
import { ButtonBase, Slide } from "@mui/material";
import PropTypes from "prop-types";
Expand Down
2 changes: 1 addition & 1 deletion apps/climatemappedafrica/src/components/DataVisualisationGuide/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { RichTypography } from "@commons-ui/legacy";
import { RichTypography } from "@commons-ui/next";
import { useMediaQuery, Box, Grid } from "@mui/material";
import PropTypes from "prop-types";
import React from "react";
Expand Down
136 changes: 96 additions & 40 deletions apps/climatemappedafrica/src/components/Footer/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import { QuickLinks, Copyright } from "@commons-ui/legacy";
import { Link, StayInTouch } from "@commons-ui/next";
import { Copyright, QuickLinks, StayInTouch } from "@commons-ui/core";
import { Link } from "@commons-ui/next";
import { RichText } from "@commons-ui/payload";
import { Box, Grid } from "@mui/material";
import { Box, Grid, useTheme } from "@mui/material";
import React from "react";

import useStyles from "./useStyles";

import NextImageButton from "@/climatemappedafrica/components/NextImageButton";
import Section from "@/climatemappedafrica/components/Section";

Expand All @@ -18,21 +16,23 @@ function Footer(props) {
links,
variant,
} = props;
const classes = useStyles(props);
const theme = useTheme();

return (
<Box
sx={(theme) => ({
sx={({ palette, typography }) => ({
display: {
kelvinkipruto marked this conversation as resolved.
Show resolved Hide resolved
xs: "block",
lg: variant !== "explore" ? "block" : "none",
},
background: theme.palette.grey.dark,
background: palette.grey.dark,
height: "auto",
padding: `${theme.typography.pxToRem(80)} 0`,
[theme.breakpoints.up("md")]: {
paddingTop: `${theme.typography.pxToRem(58)}`,
paddingBottom: `${theme.typography.pxToRem(82)}`,
padding: `${typography.pxToRem(80)} 0`,
paddingTop: {
md: `${typography.pxToRem(58)}`,
},
paddingBottom: {
md: `${typography.pxToRem(82)}`,
},
})}
>
Expand All @@ -47,27 +47,27 @@ function Footer(props) {
width: 220,
}}
priority
sx={(theme) => ({
margin: "0 auto",
padding: 0,
[theme.breakpoints.up("lg")]: {
margin: 0,
sx={{
margin: {
xs: "0 auto",
lg: 0,
},
})}
padding: 0,
}}
/>
)}
</Grid>
<Grid item xs={12} lg={6}>
{description && (
<RichText
variant="body1"
sx={(theme) => ({
color: theme.palette.text.secondary,
padding: `${theme.typography.pxToRem(32)} 0`,
fontSize: theme.typography.subtitle1.fontSize,
textAlign: "center",
[theme.breakpoints.up("lg")]: {
textAlign: "left",
sx={({ palette, typography }) => ({
color: palette.text.secondary,
padding: `${typography.pxToRem(32)} 0`,
fontSize: typography.subtitle1.fontSize,
textAlign: {
xs: "center",
lg: "left",
},
"& > p": {
mt: 2,
Expand All @@ -80,42 +80,94 @@ function Footer(props) {
TypographyProps={{
LinkProps: {
color: "text.secondary",
sx: {
textDecorationColor: "text.secondary",
textDecoration: "underline",
},
textDecorationColor: "text.secondary",
textDecoration: "underline",
},
}}
/>
)}
<Copyright
copyright={`© ${new Date().getFullYear()} ${title}`}
classes={{
root: classes.copyright,
text: classes.copyrightText,
CopyrightProps={{
sx: {
color: theme.palette.text.secondary,
order: 5,
padding: {
xs: `0 ${theme.typography.pxToRem(5)} 0 0`,
lg: `0 ${theme.typography.pxToRem(10)} 0 0`,
},
},
}}
sx={({ typography }) => ({
margin: 0,
display: "flex",
flexWrap: "wrap",
flexDirection: "row",
justifyContent: {
xs: "center",
lg: "flex-start",
},
textAlign: {
xs: "center",
lg: "flex-start",
},
"& > a": {
marginTop: typography.pxToRem(3),
},
})}
/>
</Grid>
<Grid item xs={12} lg={4}>
<Grid
container
sx={(theme) => ({
sx={({ typography }) => ({
margin: "0 auto",
flexDirection: "row",
justifyContent: "center",
marginTop: theme.typography.pxToRem(44.19),
marginTop: typography.pxToRem(44.19),
})}
>
<Grid item xs={12} lg={6}>
{links && (
<QuickLinks
linkComponent={Link}
{...links}
classes={{
root: classes.quickLinkRoot,
list: classes.quickList,
link: classes.quickLink,
title: classes.quickLinksTitle,
sx={{
textAlign: {
xs: "center",
lg: "inherit",
},
padding: {
xs: `${theme.typography.pxToRem(32)} 0 `,
lg: 0,
},
}}
TitleProps={{
variant: "subtitle2",
sx: {
color: theme.palette.text.secondary,
fontWeight: "bold",
},
}}
LinksProps={{
sx: {
listStyle: "none",
color: theme.palette.text.secondary,
padding: 0,
letterspacing: theme.typography.pxToRem(0.7),
"& > li": {
marginTop: theme.typography.pxToRem(16),
},
},
}}
LinkProps={{
sx: {
color: theme.palette.text.secondary,
fontWeight: "normal",
"&:hover": {
color: theme.palette.primary.light,
},
},
}}
/>
)}
Expand All @@ -130,7 +182,11 @@ function Footer(props) {
alignItems: { xs: "center", lg: "flex-end" },
},
}}
alignItems={{ xs: "center", lg: "flex-end" }}
LinksProps={{
justifyContent: "space-between",
width: "100%",
}}
alignItems={{ xs: "center", lg: "flex-start" }}
TitleProps={{
fontWeight: "bold",
variant: "subtitle2",
Expand Down
57 changes: 0 additions & 57 deletions apps/climatemappedafrica/src/components/Footer/useStyles.js
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion apps/climatemappedafrica/src/components/HURUmap/Chart/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { RichTypography } from "@commons-ui/legacy";
import { RichTypography } from "@commons-ui/next";
import { ChartTooltip, IndicatorTitle, Download, Share } from "@hurumap/core";
import { Source } from "@hurumap/next";
import { Box, useMediaQuery, useTheme } from "@mui/material";
Expand Down Expand Up @@ -93,7 +93,7 @@

setView(newView.view);
} catch (error) {
console.error("Error rendering chart", error);

Check warning on line 96 in apps/climatemappedafrica/src/components/HURUmap/Chart/index.js

View workflow job for this annotation

GitHub Actions / Build and Test (20.16, ubuntu-latest) 

Unexpected console statement
}
}
}
Expand All @@ -112,7 +112,7 @@
const viewProp = new vega.View(vega.parse(cSpec), { renderer: "none" });
setDownloadView(viewProp);
} catch (error) {
console.error("Error creating view", error);

Check warning on line 115 in apps/climatemappedafrica/src/components/HURUmap/Chart/index.js

View workflow job for this annotation

GitHub Actions / Build and Test (20.16, ubuntu-latest) 

Unexpected console statement
}
}, [cSpec]);

Expand Down
2 changes: 1 addition & 1 deletion apps/climatemappedafrica/src/components/HURUmap/Tutorial/index.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { RichTypography } from "@commons-ui/legacy";
import { RichTypography } from "@commons-ui/next";
import React from "react";

import Tutorial from "@/climatemappedafrica/components/HURUmap/Tutorial";
Expand Down
2 changes: 1 addition & 1 deletion apps/climatemappedafrica/src/components/Header/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { RichTypography } from "@commons-ui/legacy";
import { RichTypography } from "@commons-ui/next";
import { Box } from "@mui/material";
import PropTypes from "prop-types";
import React from "react";
Expand Down
4 changes: 2 additions & 2 deletions apps/climatemappedafrica/src/components/Header/Header.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ exports[`<Header /> renders unchanged 1`] = `
title="Title with <span class="highlight">Highlight</span>"
>
<div
class="MuiTypography-root makeStyles-root-1 MuiTypography-overline css-1wyl8ke-MuiTypography-root"
class="MuiTypography-root MuiTypography-overline css-2tpb9q-MuiTypography-root"
>
Overline
</div>
<div
class="MuiTypography-root makeStyles-root-1 MuiTypography-subtitle1 css-1gs80bf-MuiTypography-root"
class="MuiTypography-root MuiTypography-subtitle1 css-1ymhwmr-MuiTypography-root"
>
A short paragraph to describe what the header is all about.
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/climatemappedafrica/src/components/Hero/Hero.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { RichTypography } from "@commons-ui/legacy";
import { RichTypography } from "@commons-ui/next";
import { Box, Grid, useMediaQuery } from "@mui/material";
import dynamic from "next/dynamic";
import PropTypes from "prop-types";
Expand Down
6 changes: 3 additions & 3 deletions apps/climatemappedafrica/src/components/Hero/Hero.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ exports[`<Hero /> renders unchanged 1`] = `
/>
</div>
<div
class="makeStyles-root-5 makeStyles-root-3 makeStyles-root-1 makeStyles-fixed-2 MuiBox-root css-1gf8bce"
class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-q6gmsn-MuiContainer-root"
>
<div
class="MuiGrid-root MuiGrid-container css-ljvmaf-MuiGrid-root"
Expand All @@ -35,7 +35,7 @@ exports[`<Hero /> renders unchanged 1`] = `
class="MuiBox-root css-b8dxf0"
>
<h1
class="MuiTypography-root MuiTypography-h1 css-8o8tmo-MuiTypography-root"
class="MuiTypography-root MuiTypography-h1 css-51s2c1-MuiTypography-root"
>
Empowering action through climate data.
</h1>
Expand All @@ -44,7 +44,7 @@ exports[`<Hero /> renders unchanged 1`] = `
class="MuiBox-root css-1733xbc"
>
<h6
class="MuiTypography-root MuiTypography-subtitle1 css-1d1ipbv-MuiTypography-root"
class="MuiTypography-root MuiTypography-subtitle1 css-1ni1tq3-MuiTypography-root"
>
ClimateMapped.AFRICA helps explore, analyse, and use climate data to advocate for stronger, faster action on climate resilience and sustainability.
</h6>
Expand Down
2 changes: 1 addition & 1 deletion apps/climatemappedafrica/src/components/Hero/Legend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { RichTypography } from "@commons-ui/legacy";
import { RichTypography } from "@commons-ui/next";
import { Box } from "@mui/material";
import PropTypes from "prop-types";
import React, { useState, forwardRef } from "react";
Expand Down
Loading
Loading