From 738ee112243239281e139281fbe6e901a0247e89 Mon Sep 17 00:00:00 2001
From: Janto Lima <jlima@cartodb.com>
Date: Fri, 28 Apr 2023 19:13:46 +0200
Subject: [PATCH] Migrate 'LegendWidgetUI' component from makeStyles to
 styled-component + cleanup (#637)

---
 CHANGELOG.md                                  |  1 +
 .../src/widgets/legend/LegendProportion.js    |  2 +-
 .../src/widgets/legend/LegendWidgetUI.js      | 80 ++++++++-----------
 .../widgetsUI/LegendWidgetUI.stories.js       |  1 -
 4 files changed, 36 insertions(+), 48 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7095a3e03..dd70831e6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - LegendCategories component migrated from makeStyles to styled-components + cleanup [#634](https://github.com/CartoDB/carto-react/pull/634)
 - LegendProportion component migrated from makeStyles to styled-components + cleanup [#635](https://github.com/CartoDB/carto-react/pull/635)
 - LegendRamp component migrated from makeStyles to styled-components + cleanup [#636](https://github.com/CartoDB/carto-react/pull/636)
+- LegendWidgetUI component migrated from makeStyles to styled-components + cleanup [#637](https://github.com/CartoDB/carto-react/pull/637)
 
 ## 2.0
 
diff --git a/packages/react-ui/src/widgets/legend/LegendProportion.js b/packages/react-ui/src/widgets/legend/LegendProportion.js
index d50c1b8f4..5905864e2 100644
--- a/packages/react-ui/src/widgets/legend/LegendProportion.js
+++ b/packages/react-ui/src/widgets/legend/LegendProportion.js
@@ -42,7 +42,7 @@ function LegendProportion({ legend }) {
     <Grid container item direction='row' spacing={2} data-testid='proportion-legend'>
       <ProportionalGrid container item xs={6}>
         {[...Array(4)].map((circle, index) => (
-          <Circle index={index} component='span'></Circle>
+          <Circle key={index} index={index} component='span'></Circle>
         ))}
       </ProportionalGrid>
       <Grid
diff --git a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js
index 6d2c42584..f70a090d3 100644
--- a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js
+++ b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js
@@ -1,6 +1,5 @@
 import React, { createRef, Fragment } from 'react';
-import { Box, Button, Collapse, Divider, Grid, SvgIcon } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
+import { Box, Button, Collapse, Divider, Grid, styled, SvgIcon } from '@mui/material';
 import LegendWrapper from './LegendWrapper';
 import LegendCategories from './LegendCategories';
 import LegendIcon from './LegendIcon';
@@ -28,13 +27,11 @@ const LayersIcon = () => (
   </SvgIcon>
 );
 
-const useStyles = makeStyles((theme) => ({
-  legend: {
-    minWidth: '240px',
-    backgroundColor: theme.palette.background.paper,
-    boxShadow: theme.shadows[1],
-    borderRadius: 4
-  }
+const LegendBox = styled(Box)(({ theme }) => ({
+  minWidth: theme.spacing(30),
+  backgroundColor: theme.palette.background.paper,
+  boxShadow: theme.shadows[1],
+  borderRadius: theme.spacing(0.5)
 }));
 
 function LegendWidgetUI({
@@ -49,11 +46,10 @@ function LegendWidgetUI({
   onChangeLegendRowCollapsed,
   title
 }) {
-  const classes = useStyles();
   const isSingle = layers.length === 1;
 
   return (
-    <Box className={`${classes.legend} ${className}`}>
+    <LegendBox className={className}>
       <LegendContainer
         isSingle={isSingle}
         collapsed={collapsed}
@@ -69,7 +65,7 @@ function LegendWidgetUI({
           onChangeCollapsed={onChangeLegendRowCollapsed}
         />
       </LegendContainer>
-    </Box>
+    </LegendBox>
   );
 }
 
@@ -96,22 +92,25 @@ LegendWidgetUI.propTypes = {
 
 export default LegendWidgetUI;
 
-const useStylesLegendContainer = makeStyles((theme) => ({
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    height: '36px'
-  },
-  button: {
-    flex: '1 1 auto',
-    justifyContent: 'space-between',
-    padding: theme.spacing(0.75, 1.25, 0.75, 3),
-    borderTop: ({ collapsed }) =>
-      collapsed ? 'none' : `1px solid ${theme.palette.divider}`,
-    cursor: 'pointer'
-  },
-  wrapperInner: {
+const Header = styled(Grid)(({ theme }) => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  height: theme.spacing(4.5)
+}));
+
+const HeaderButton = styled(Button, {
+  shouldForwardProp: (prop) => prop !== 'collapsed'
+})(({ theme, collapsed }) => ({
+  flex: '1 1 auto',
+  justifyContent: 'space-between',
+  padding: theme.spacing(0.75, 1.25, 0.75, 3),
+  borderTop: collapsed ? 'none' : `1px solid ${theme.palette.divider}`,
+  cursor: 'pointer'
+}));
+
+const CollapseWrapper = styled(Collapse)(() => ({
+  '.MuiCollapse-wrapperInner': {
     maxHeight: 'max(350px, 80vh)',
     overflowY: 'auto',
     overflowX: 'hidden'
@@ -120,9 +119,6 @@ const useStylesLegendContainer = makeStyles((theme) => ({
 
 function LegendContainer({ isSingle, children, collapsed, onChangeCollapsed, title }) {
   const wrapper = createRef();
-  const classes = useStylesLegendContainer({
-    collapsed
-  });
 
   const handleExpandClick = () => {
     if (onChangeCollapsed) onChangeCollapsed(!collapsed);
@@ -132,26 +128,18 @@ function LegendContainer({ isSingle, children, collapsed, onChangeCollapsed, tit
     children
   ) : (
     <>
-      <Collapse
-        ref={wrapper}
-        in={!collapsed}
-        timeout='auto'
-        unmountOnExit
-        classes={{
-          wrapperInner: classes.wrapperInner
-        }}
-      >
+      <CollapseWrapper ref={wrapper} in={!collapsed} timeout='auto' unmountOnExit>
         {children}
-      </Collapse>
-      <Grid container className={classes.header}>
-        <Button
-          className={classes.button}
+      </CollapseWrapper>
+      <Header container>
+        <HeaderButton
+          collapsed={collapsed}
           endIcon={<LayersIcon />}
           onClick={handleExpandClick}
         >
           <Typography variant='subtitle1'>{title}</Typography>
-        </Button>
-      </Grid>
+        </HeaderButton>
+      </Header>
     </>
   );
 }
diff --git a/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js
index d781d09cb..794e7d8fe 100644
--- a/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js
+++ b/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import LegendWidgetUI from '../../../src/widgets/legend/LegendWidgetUI';
-import CartoIcon from '../../assets/carto-symbol.svg';
 
 const options = {
   title: 'Organisms/Widgets/LegendWidgetUI',