From 94a73422a6d4bbca0b8f3d3715978ba7d86cc649 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Tue, 16 Jul 2024 09:35:19 +0300 Subject: [PATCH 1/9] Location highlight setup Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../src/components/HURUmap/Location/index.js | 15 ++++----- .../LocationHighlight/LocationHighlight.js | 33 +++++++++++++++++++ .../src/LocationHighlight/index.js | 3 ++ packages/hurumap-core/src/index.js | 1 + 4 files changed, 44 insertions(+), 8 deletions(-) create mode 100644 packages/hurumap-core/src/LocationHighlight/LocationHighlight.js create mode 100644 packages/hurumap-core/src/LocationHighlight/index.js diff --git a/apps/pesayetu/src/components/HURUmap/Location/index.js b/apps/pesayetu/src/components/HURUmap/Location/index.js index feb8737cc..4b181ea1b 100644 --- a/apps/pesayetu/src/components/HURUmap/Location/index.js +++ b/apps/pesayetu/src/components/HURUmap/Location/index.js @@ -1,12 +1,10 @@ -import { LocationTag } from "@hurumap/core"; +import { LocationTag, LocationHighlight } from "@hurumap/core"; import { Box } from "@mui/material"; import clsx from "clsx"; import PropTypes from "prop-types"; import useStyles from "./useStyles"; -import LocationHighlight from "@/pesayetu/components/HURUmap/LocationHighlight"; - function Location({ className, highlights, isLoading, tags, ...props }) { const classes = useStyles(props); @@ -53,11 +51,12 @@ function Location({ className, highlights, isLoading, tags, ...props }) { key={highlight.title} isLoading={isLoading} {...highlight} - classes={{ - root: classes.highlight, - title: classes.highlightTitle, - value: classes.highlightValue, - }} + sx={(theme) => ({ + paddingTop: "4.5px", + "&:not(:first-of-type)": { + borderLeft: `1px solid ${theme.palette.grey.main}`, + }, + })} /> ))} diff --git a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js new file mode 100644 index 000000000..be1908efa --- /dev/null +++ b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js @@ -0,0 +1,33 @@ +import { Box, Typography } from "@mui/material"; +import React from "react"; + +const LocationHighlight = React.forwardRef(function LocationHighlight( + { title, value, isLoading, ...props }, + ref, +) { + return ( + + ({ + fontSize: theme.typography.pxToRem(10), + fontWeight: 300, + lineHeight: 24 / 10, + textTransform: "uppercase", + })} + > + {title} + + {isLoading ? "…" : value} + + ); +}); + +export default LocationHighlight; diff --git a/packages/hurumap-core/src/LocationHighlight/index.js b/packages/hurumap-core/src/LocationHighlight/index.js new file mode 100644 index 000000000..5c355f40a --- /dev/null +++ b/packages/hurumap-core/src/LocationHighlight/index.js @@ -0,0 +1,3 @@ +import LocationHighlight from "./LocationHighlight"; + +export default LocationHighlight; diff --git a/packages/hurumap-core/src/index.js b/packages/hurumap-core/src/index.js index 327f108d2..881ae0422 100644 --- a/packages/hurumap-core/src/index.js +++ b/packages/hurumap-core/src/index.js @@ -1,2 +1,3 @@ /* eslint-disable import/prefer-default-export */ export { default as LocationTag } from "./LocationTag"; +export { default as LocationHighlight } from "./LocationHighlight"; From 2ac4cb11ad070b51aea9573ce62f791b43c03063 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Tue, 16 Jul 2024 09:44:41 +0300 Subject: [PATCH 2/9] Add storybook Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../HURUmap/core/LocationHighlight.stories.js | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 apps/uibook/stories/HURUmap/core/LocationHighlight.stories.js diff --git a/apps/uibook/stories/HURUmap/core/LocationHighlight.stories.js b/apps/uibook/stories/HURUmap/core/LocationHighlight.stories.js new file mode 100644 index 000000000..cd960db2e --- /dev/null +++ b/apps/uibook/stories/HURUmap/core/LocationHighlight.stories.js @@ -0,0 +1,39 @@ +import { LocationHighlight } from "@hurumap/core"; +import React from "react"; + +const highlights = [ + { + title: "Population", + value: "1,000,000", + }, + { + title: "GDP", + value: "1,000,000", + }, + { + title: "Area", + value: "1,000,000", + }, +]; + +export default { + title: "@hurumap/core/LocationHighlight", + argTypes: { + isLoading: { + control: { + type: "boolean", + }, + }, + }, +}; + +function Template({ ...args }) { + return ; +} + +export const Default = Template.bind({}); + +Default.args = { + isLoading: false, + ...highlights[0], +}; From d4a1f48198125cf2e48022514e535b45fdcd1321 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Tue, 16 Jul 2024 09:48:02 +0300 Subject: [PATCH 3/9] Add tests Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../LocationHighlight.snap.js | 20 +++++++++++++++++++ .../LocationHighlight.test.js | 13 ++++++++++++ 2 files changed, 33 insertions(+) create mode 100644 packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js create mode 100644 packages/hurumap-core/src/LocationHighlight/LocationHighlight.test.js diff --git a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js new file mode 100644 index 000000000..c92cf918e --- /dev/null +++ b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.snap.js @@ -0,0 +1,20 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LocationHighlight renders unchanged 1`] = ` +
+
+
+ Population +
+

+ 1,000,000 +

+
+
+`; diff --git a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.test.js b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.test.js new file mode 100644 index 000000000..d7ae87420 --- /dev/null +++ b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.test.js @@ -0,0 +1,13 @@ +import { render } from "@commons-ui/testing-library"; +import * as React from "react"; + +import LocationHighlight from "./LocationHighlight"; + +describe("LocationHighlight", () => { + it("renders unchanged", () => { + const { container } = render( + , + ); + expect(container).toMatchSnapshot(); + }); +}); From 7f990af1625e59b213ba3b32009480b9375812fa Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Tue, 16 Jul 2024 09:49:29 +0300 Subject: [PATCH 4/9] Delete location Highlight Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../HURUmap/LocationHighlight/index.js | 58 ------------------- .../LocationHighlight/index.stories.js | 22 ------- .../HURUmap/LocationHighlight/useStyles.js | 14 ----- 3 files changed, 94 deletions(-) delete mode 100644 apps/pesayetu/src/components/HURUmap/LocationHighlight/index.js delete mode 100644 apps/pesayetu/src/components/HURUmap/LocationHighlight/index.stories.js delete mode 100644 apps/pesayetu/src/components/HURUmap/LocationHighlight/useStyles.js diff --git a/apps/pesayetu/src/components/HURUmap/LocationHighlight/index.js b/apps/pesayetu/src/components/HURUmap/LocationHighlight/index.js deleted file mode 100644 index 6e1be30f3..000000000 --- a/apps/pesayetu/src/components/HURUmap/LocationHighlight/index.js +++ /dev/null @@ -1,58 +0,0 @@ -import { Box, Typography } from "@mui/material"; -import clsx from "clsx"; -import PropTypes from "prop-types"; -import React from "react"; - -import useStyles from "./useStyles"; - -function LocationHighlight({ - className, - formattedValue: formattedValueProp, - isLoading, - value: valueProp, - title: titleProp, - ...props -}) { - const classes = useStyles(props); - - if (!(isLoading || ((valueProp || formattedValueProp) && titleProp))) { - return null; - } - - const title = titleProp || (isLoading && "…"); - const formattedValue = isLoading ? "…" : formattedValueProp || valueProp; - return ( - - - {title} - - - {formattedValue} - - - ); -} - -LocationHighlight.propTypes = { - className: PropTypes.string, - isLoading: PropTypes.bool, - formattedValue: PropTypes.string, - title: PropTypes.string, - value: PropTypes.number, -}; - -LocationHighlight.defaultProps = { - className: undefined, - isLoading: undefined, - formattedValue: undefined, - title: undefined, - value: undefined, -}; - -export default LocationHighlight; diff --git a/apps/pesayetu/src/components/HURUmap/LocationHighlight/index.stories.js b/apps/pesayetu/src/components/HURUmap/LocationHighlight/index.stories.js deleted file mode 100644 index 159936326..000000000 --- a/apps/pesayetu/src/components/HURUmap/LocationHighlight/index.stories.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from "react"; - -import LocationHighlight from "."; - -import { hurumapArgs } from "@/pesayetu/config"; - -const { - location: { - highlights: [highlight], - }, -} = hurumapArgs; -export default { - title: "HURUmap/Components/LocationHighlight", -}; - -function Template(args) { - return ; -} - -export const Default = Template.bind({}); - -Default.args = highlight; diff --git a/apps/pesayetu/src/components/HURUmap/LocationHighlight/useStyles.js b/apps/pesayetu/src/components/HURUmap/LocationHighlight/useStyles.js deleted file mode 100644 index 18c304770..000000000 --- a/apps/pesayetu/src/components/HURUmap/LocationHighlight/useStyles.js +++ /dev/null @@ -1,14 +0,0 @@ -import makeStyles from "@mui/styles/makeStyles"; - -const useStyles = makeStyles(({ typography }) => ({ - root: {}, - title: { - fontSize: typography.pxToRem(10), - fontWeight: 300, - lineHeight: 24 / 10, - textTransform: "uppercase", - }, - value: {}, -})); - -export default useStyles; From da99833a97eb11aedd1386f64e1d01462300794a Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Tue, 16 Jul 2024 09:56:34 +0300 Subject: [PATCH 5/9] Add to climatemapped Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../src/components/HURUmap/Location/index.js | 15 +++-- .../HURUmap/LocationHighlight/index.js | 58 ------------------- .../LocationHighlight/index.stories.js | 22 ------- .../HURUmap/LocationHighlight/useStyles.js | 14 ----- 4 files changed, 7 insertions(+), 102 deletions(-) delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/index.js delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/index.stories.js delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/useStyles.js diff --git a/apps/climatemappedafrica/src/components/HURUmap/Location/index.js b/apps/climatemappedafrica/src/components/HURUmap/Location/index.js index 6a68d1710..ba9a2fb0c 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Location/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Location/index.js @@ -1,12 +1,10 @@ -import { LocationTag } from "@hurumap/core"; +import { LocationTag, LocationHighlight } from "@hurumap/core"; import { Box } from "@mui/material"; import clsx from "clsx"; import PropTypes from "prop-types"; import useStyles from "./useStyles"; -import LocationHighlight from "@/climatemappedafrica/components/HURUmap/LocationHighlight"; - function Location({ className, highlights, isLoading, tags, ...props }) { const classes = useStyles(props); @@ -53,11 +51,12 @@ function Location({ className, highlights, isLoading, tags, ...props }) { key={highlight.title} isLoading={isLoading} {...highlight} - classes={{ - root: classes.highlight, - title: classes.highlightTitle, - value: classes.highlightValue, - }} + sx={(theme) => ({ + paddingTop: "4.5px", + "&:not(:first-of-type)": { + borderLeft: `1px solid ${theme.palette.grey.main}`, + }, + })} /> ))} diff --git a/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/index.js b/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/index.js deleted file mode 100644 index 6e1be30f3..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/index.js +++ /dev/null @@ -1,58 +0,0 @@ -import { Box, Typography } from "@mui/material"; -import clsx from "clsx"; -import PropTypes from "prop-types"; -import React from "react"; - -import useStyles from "./useStyles"; - -function LocationHighlight({ - className, - formattedValue: formattedValueProp, - isLoading, - value: valueProp, - title: titleProp, - ...props -}) { - const classes = useStyles(props); - - if (!(isLoading || ((valueProp || formattedValueProp) && titleProp))) { - return null; - } - - const title = titleProp || (isLoading && "…"); - const formattedValue = isLoading ? "…" : formattedValueProp || valueProp; - return ( - - - {title} - - - {formattedValue} - - - ); -} - -LocationHighlight.propTypes = { - className: PropTypes.string, - isLoading: PropTypes.bool, - formattedValue: PropTypes.string, - title: PropTypes.string, - value: PropTypes.number, -}; - -LocationHighlight.defaultProps = { - className: undefined, - isLoading: undefined, - formattedValue: undefined, - title: undefined, - value: undefined, -}; - -export default LocationHighlight; diff --git a/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/index.stories.js b/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/index.stories.js deleted file mode 100644 index ce1527380..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/index.stories.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from "react"; - -import LocationHighlight from "."; - -import { hurumapArgs } from "@/climatemappedafrica/config"; - -const { - location: { - highlights: [highlight], - }, -} = hurumapArgs; -export default { - title: "Components/HURUmap/LocationHighlight", -}; - -function Template(args) { - return ; -} - -export const Default = Template.bind({}); - -Default.args = highlight; diff --git a/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/useStyles.js deleted file mode 100644 index 18c304770..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/LocationHighlight/useStyles.js +++ /dev/null @@ -1,14 +0,0 @@ -import makeStyles from "@mui/styles/makeStyles"; - -const useStyles = makeStyles(({ typography }) => ({ - root: {}, - title: { - fontSize: typography.pxToRem(10), - fontWeight: 300, - lineHeight: 24 / 10, - textTransform: "uppercase", - }, - value: {}, -})); - -export default useStyles; From a2cd2dc53ea7b2d565c5bae308ae9ddd6d50274c Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Tue, 16 Jul 2024 10:00:16 +0300 Subject: [PATCH 6/9] Remove unused styles Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../src/components/HURUmap/Location/useStyles.js | 8 -------- .../pesayetu/src/components/HURUmap/Location/useStyles.js | 8 -------- 2 files changed, 16 deletions(-) diff --git a/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js index fca627bf5..e659b2925 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js @@ -17,14 +17,6 @@ const useStyles = makeStyles(({ palette, typography }) => ({ marginTop: 4.5, width: "100%", }, - highlight: { - paddingTop: 4.5, - "&:not(:first-of-type)": { - borderLeft: `1px solid ${palette.grey.main}`, - }, - }, - highlightTitle: {}, - highlightValue: {}, })); export default useStyles; diff --git a/apps/pesayetu/src/components/HURUmap/Location/useStyles.js b/apps/pesayetu/src/components/HURUmap/Location/useStyles.js index fca627bf5..e659b2925 100644 --- a/apps/pesayetu/src/components/HURUmap/Location/useStyles.js +++ b/apps/pesayetu/src/components/HURUmap/Location/useStyles.js @@ -17,14 +17,6 @@ const useStyles = makeStyles(({ palette, typography }) => ({ marginTop: 4.5, width: "100%", }, - highlight: { - paddingTop: 4.5, - "&:not(:first-of-type)": { - borderLeft: `1px solid ${palette.grey.main}`, - }, - }, - highlightTitle: {}, - highlightValue: {}, })); export default useStyles; From f0c281b11932e782aa9380d3eccde7d97b2712a7 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Tue, 16 Jul 2024 15:59:38 +0300 Subject: [PATCH 7/9] Update packages/hurumap-core/src/LocationHighlight/LocationHighlight.test.js Co-authored-by: KEVIN KOECH --- .../src/LocationHighlight/LocationHighlight.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.test.js b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.test.js index d7ae87420..4b417befa 100644 --- a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.test.js +++ b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.test.js @@ -1,5 +1,5 @@ import { render } from "@commons-ui/testing-library"; -import * as React from "react"; +import React from "react"; import LocationHighlight from "./LocationHighlight"; From dedba1763b5e63f01a51fdfaa0a9b0ff7326447d Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Tue, 16 Jul 2024 16:28:01 +0300 Subject: [PATCH 8/9] add title and value customization options Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../src/LocationHighlight/LocationHighlight.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js index be1908efa..85e215524 100644 --- a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js +++ b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js @@ -2,7 +2,14 @@ import { Box, Typography } from "@mui/material"; import React from "react"; const LocationHighlight = React.forwardRef(function LocationHighlight( - { title, value, isLoading, ...props }, + { + title, + value, + isLoading, + TitleTypographyProps, + ValueTypographyProps, + ...props + }, ref, ) { return ( @@ -16,16 +23,20 @@ const LocationHighlight = React.forwardRef(function LocationHighlight( > ({ fontSize: theme.typography.pxToRem(10), fontWeight: 300, lineHeight: 24 / 10, textTransform: "uppercase", + ...TitleTypographyProps?.sx, })} > {title} - {isLoading ? "…" : value} + + {isLoading ? "…" : value} + ); }); From 5b33c4f821dc6df68969a121206266f0cc327386 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Tue, 16 Jul 2024 16:49:57 +0300 Subject: [PATCH 9/9] Sort Props alphabetically Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../hurumap-core/src/LocationHighlight/LocationHighlight.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js index 85e215524..b0789e3ba 100644 --- a/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js +++ b/packages/hurumap-core/src/LocationHighlight/LocationHighlight.js @@ -3,11 +3,11 @@ import React from "react"; const LocationHighlight = React.forwardRef(function LocationHighlight( { + TitleTypographyProps, + ValueTypographyProps, title, value, isLoading, - TitleTypographyProps, - ValueTypographyProps, ...props }, ref,