From 247352342e4b8ea8c06b62122ad8f07128e350dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Tue, 29 Dec 2020 10:36:16 -0300 Subject: [PATCH 1/6] fix margins and borders --- package.json | 3 +- .../Accordion/accordion.stories.tsx | 25 +++ src/dataDisplay/Accordion/index.tsx | 142 ++++++++++++++++++ src/dataDisplay/index.ts | 1 + yarn.lock | 9 +- 5 files changed, 178 insertions(+), 2 deletions(-) create mode 100644 src/dataDisplay/Accordion/accordion.stories.tsx create mode 100644 src/dataDisplay/Accordion/index.tsx diff --git a/package.json b/package.json index 02ad5598..0510e3b8 100644 --- a/package.json +++ b/package.json @@ -22,12 +22,13 @@ "author": "Gnosis (https://gnosis.pm)", "license": "MIT", "dependencies": { + "@material-ui/icons": "^4.11.2", "classnames": "^2.2.6", "polished": "^3.6.7", "react-media": "^1.10.0" }, "devDependencies": { - "@material-ui/core": "^4.11.0", + "@material-ui/core": "^4.11.2", "@storybook/addon-actions": "^6.1.0", "@storybook/addon-docs": "^6.1.0", "@storybook/addon-links": "^6.1.0", diff --git a/src/dataDisplay/Accordion/accordion.stories.tsx b/src/dataDisplay/Accordion/accordion.stories.tsx new file mode 100644 index 00000000..52933c75 --- /dev/null +++ b/src/dataDisplay/Accordion/accordion.stories.tsx @@ -0,0 +1,25 @@ +import React from 'react'; + +import Accordion from './index'; +import { Card, Title, Text } from '../../index'; + +export default { + title: 'Data Display/Accordion', + component: Accordion, + parameters: { + componentSubtitle: 'Useful to wrap content inside a styled container.', + }, +}; + +export const SimpleAccordion = (): React.ReactElement => ( + + + +); + + +export const CompactAccordion = (): React.ReactElement => ( + + + +); \ No newline at end of file diff --git a/src/dataDisplay/Accordion/index.tsx b/src/dataDisplay/Accordion/index.tsx new file mode 100644 index 00000000..8e9672fc --- /dev/null +++ b/src/dataDisplay/Accordion/index.tsx @@ -0,0 +1,142 @@ +import React from 'react'; +import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'; +import Accordion from '@material-ui/core/Accordion'; +import AccordionSummary from '@material-ui/core/AccordionSummary'; +import AccordionDetails from '@material-ui/core/AccordionDetails'; +import Typography from '@material-ui/core/Typography'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import { Text, IconText } from '../../index'; +import styled from 'styled-components'; + +/* type Props = { + compact?: boolean; +}; */ + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + }, + heading: { + fontSize: theme.typography.pxToRem(15), + fontWeight: theme.typography.fontWeightRegular, + }, + '.MuiAccordionSummary-root.Mui-expanded': { + minHeight: '48px', + }, + '.MuiAccordionSummary-content.Mui-expanded': { + margin: '12px 0', + }, + '.MuiAccordion-root.Mui-expanded': { + margin: '0', + }, + }) +); + +const StyledAccordion = styled(Accordion)` + &.MuiAccordion-root { + border-bottom: 2px solid ${({ theme }) => theme.colors.separator}; + } + &.MuiAccordion-root.Mui-expanded { + margin: 0; + } + & .MuiCollapse-wrapper { + } +`; + +const StyledAccordionSummary = styled(AccordionSummary)` + border-bottom: 2px solid ${({ theme }) => theme.colors.separator}; + + &.MuiAccordionSummary-root.Mui-expanded { + min-height: 48px; + } + + & .MuiAccordionSummary-content.Mui-expanded { + margin: 0; + } + + &:hover { + background-color: ${({ theme }) => theme.colors.background}; + } +`; + +export default function SimpleAccordion() { + const classes = useStyles(); + + return ( +
+ + } + aria-controls="panel1a-content" + id="panel1a-header"> + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Suspendisse malesuada lacus ex, sit amet blandit leo lobortis + eget. + + + + + + } + aria-controls="panel2a-content" + id="panel2a-header"> + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Suspendisse malesuada lacus ex, sit amet blandit leo lobortis + eget. + + + + + + } + aria-controls="panel3a-content" + id="panel3a-header"> + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Suspendisse malesuada lacus ex, sit amet blandit leo lobortis + eget. + + + + +
+ ); +} diff --git a/src/dataDisplay/index.ts b/src/dataDisplay/index.ts index 0f29ac95..bb6afd7c 100644 --- a/src/dataDisplay/index.ts +++ b/src/dataDisplay/index.ts @@ -1,4 +1,5 @@ export { default as Card } from './Card'; +export { default as Accordion } from './Accordion'; export { default as Divider } from './Divider'; export { default as Dot } from './Dot'; export { default as FixedIcon } from './FixedIcon'; diff --git a/yarn.lock b/yarn.lock index 25a08f5c..5b19bd5c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1172,7 +1172,7 @@ "@types/yargs" "^15.0.0" chalk "^4.0.0" -"@material-ui/core@^4.11.0": +"@material-ui/core@^4.11.2": version "4.11.2" resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.2.tgz#f8276dfa40d88304e6ceb98962af73803d27d42d" integrity sha512-/D1+AQQeYX/WhT/FUk78UCRj8ch/RCglsQLYujYTIqPSJlwZHKcvHidNeVhODXeApojeXjkl0tWdk5C9ofwOkQ== @@ -1190,6 +1190,13 @@ react-is "^16.8.0 || ^17.0.0" react-transition-group "^4.4.0" +"@material-ui/icons@^4.11.2": + version "4.11.2" + resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5" + integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ== + dependencies: + "@babel/runtime" "^7.4.4" + "@material-ui/styles@^4.11.2": version "4.11.2" resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.2.tgz#e70558be3f41719e8c0d63c7a3c9ae163fdc84cb" From 9e5f87de4f6f42fcdd5e9b007d44312b08fe8392 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Wed, 30 Dec 2020 09:22:45 -0300 Subject: [PATCH 2/6] refactor accordion --- .../Accordion/accordion.stories.tsx | 100 +++++++++++- src/dataDisplay/Accordion/index.tsx | 151 +++++------------- 2 files changed, 135 insertions(+), 116 deletions(-) diff --git a/src/dataDisplay/Accordion/accordion.stories.tsx b/src/dataDisplay/Accordion/accordion.stories.tsx index 52933c75..b485591c 100644 --- a/src/dataDisplay/Accordion/accordion.stories.tsx +++ b/src/dataDisplay/Accordion/accordion.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import Accordion from './index'; -import { Card, Title, Text } from '../../index'; +import { Card, Text, IconText } from '../../index'; export default { title: 'Data Display/Accordion', @@ -13,13 +13,99 @@ export default { export const SimpleAccordion = (): React.ReactElement => ( - + + } + detailsContent={ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse + malesuada lacus ex, sit amet blandit leo lobortis eget. + + } + /> + + } + detailsContent={ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse + malesuada lacus ex, sit amet blandit leo lobortis eget. + + } + /> + + } + detailsContent={ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse + malesuada lacus ex, sit amet blandit leo lobortis eget. + + } + /> ); - export const CompactAccordion = (): React.ReactElement => ( - - - -); \ No newline at end of file +
+ + } + detailsContent={ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse + malesuada lacus ex, sit amet blandit leo lobortis eget. + + } + /> + + } + detailsContent={ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse + malesuada lacus ex, sit amet blandit leo lobortis eget. + + } + /> +
+); diff --git a/src/dataDisplay/Accordion/index.tsx b/src/dataDisplay/Accordion/index.tsx index 8e9672fc..c79fdfda 100644 --- a/src/dataDisplay/Accordion/index.tsx +++ b/src/dataDisplay/Accordion/index.tsx @@ -1,41 +1,25 @@ -import React from 'react'; -import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'; -import Accordion from '@material-ui/core/Accordion'; -import AccordionSummary from '@material-ui/core/AccordionSummary'; -import AccordionDetails from '@material-ui/core/AccordionDetails'; -import Typography from '@material-ui/core/Typography'; +import React, { ReactNode, ReactElement } from 'react'; +import AccordionMUI from '@material-ui/core/Accordion'; +import AccordionSummaryMUI from '@material-ui/core/AccordionSummary'; +import AccordionDetailsMUI from '@material-ui/core/AccordionDetails'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import { Text, IconText } from '../../index'; import styled from 'styled-components'; -/* type Props = { +type AccordionProps = { compact?: boolean; -}; */ +}; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - width: '100%', - }, - heading: { - fontSize: theme.typography.pxToRem(15), - fontWeight: theme.typography.fontWeightRegular, - }, - '.MuiAccordionSummary-root.Mui-expanded': { - minHeight: '48px', - }, - '.MuiAccordionSummary-content.Mui-expanded': { - margin: '12px 0', - }, - '.MuiAccordion-root.Mui-expanded': { - margin: '0', - }, - }) -); - -const StyledAccordion = styled(Accordion)` +export const StyledAccordion = styled(AccordionMUI)` &.MuiAccordion-root { + /* width: ${({ compact }) => (compact ? '70%' : '100%')}; */ + border-radius: ${({ compact }) => (compact ? '8px' : '0')}; + border: ${({ compact, theme }) => + compact ? '2px solid ' + theme.colors.separator : 'none'}; border-bottom: 2px solid ${({ theme }) => theme.colors.separator}; + margin-bottom: ${({ compact }) => (compact ? '16px' : '0')}; + } + &.MuiAccordion-root:first-child { + border-top: 2px solid ${({ theme }) => theme.colors.separator}; } &.MuiAccordion-root.Mui-expanded { margin: 0; @@ -44,11 +28,13 @@ const StyledAccordion = styled(Accordion)` } `; -const StyledAccordionSummary = styled(AccordionSummary)` +export const AccordionSummary = styled(AccordionSummaryMUI)` border-bottom: 2px solid ${({ theme }) => theme.colors.separator}; &.MuiAccordionSummary-root.Mui-expanded { min-height: 48px; + border-bottom: 2px solid ${({ theme }) => theme.colors.separator}; + margin-bottom: ${({ compact }) => (compact ? '16px' : '0')}; } & .MuiAccordionSummary-content.Mui-expanded { @@ -60,83 +46,30 @@ const StyledAccordionSummary = styled(AccordionSummary)` } `; -export default function SimpleAccordion() { - const classes = useStyles(); +export const AccordionDetails = styled(AccordionDetailsMUI)``; +type Props = { + compact?: boolean; + summaryContent: ReactNode; + detailsContent: ReactNode; +}; + +const Accordion = ({ + compact, + summaryContent, + detailsContent, +}: Props): ReactElement => { return ( -
- - } - aria-controls="panel1a-content" - id="panel1a-header"> - - - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Suspendisse malesuada lacus ex, sit amet blandit leo lobortis - eget. - - - - - - } - aria-controls="panel2a-content" - id="panel2a-header"> - - - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Suspendisse malesuada lacus ex, sit amet blandit leo lobortis - eget. - - - - - - } - aria-controls="panel3a-content" - id="panel3a-header"> - - - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Suspendisse malesuada lacus ex, sit amet blandit leo lobortis - eget. - - - - -
+ + } + aria-controls="panel1a-content" + id="panel1a-header"> + {summaryContent} + + {detailsContent} + ); -} +}; + +export default Accordion; From 3c5710349da299f76c2d20197ec7b05ca2cc94ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Wed, 30 Dec 2020 15:58:48 -0300 Subject: [PATCH 3/6] fix styles, margins and borders --- .../Accordion/accordion.stories.tsx | 2 +- src/dataDisplay/Accordion/index.tsx | 64 +++++++++---------- 2 files changed, 32 insertions(+), 34 deletions(-) diff --git a/src/dataDisplay/Accordion/accordion.stories.tsx b/src/dataDisplay/Accordion/accordion.stories.tsx index b485591c..71663c8d 100644 --- a/src/dataDisplay/Accordion/accordion.stories.tsx +++ b/src/dataDisplay/Accordion/accordion.stories.tsx @@ -7,7 +7,7 @@ export default { title: 'Data Display/Accordion', component: Accordion, parameters: { - componentSubtitle: 'Useful to wrap content inside a styled container.', + componentSubtitle: 'Expansion panels with Summary and Detail content.', }, }; diff --git a/src/dataDisplay/Accordion/index.tsx b/src/dataDisplay/Accordion/index.tsx index c79fdfda..1a1d083b 100644 --- a/src/dataDisplay/Accordion/index.tsx +++ b/src/dataDisplay/Accordion/index.tsx @@ -1,66 +1,65 @@ import React, { ReactNode, ReactElement } from 'react'; -import AccordionMUI from '@material-ui/core/Accordion'; +import AccordionMUI, { + AccordionProps as AccordionPropsMUI, +} from '@material-ui/core/Accordion'; import AccordionSummaryMUI from '@material-ui/core/AccordionSummary'; import AccordionDetailsMUI from '@material-ui/core/AccordionDetails'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import styled from 'styled-components'; - type AccordionProps = { compact?: boolean; }; - export const StyledAccordion = styled(AccordionMUI)` &.MuiAccordion-root { - /* width: ${({ compact }) => (compact ? '70%' : '100%')}; */ border-radius: ${({ compact }) => (compact ? '8px' : '0')}; border: ${({ compact, theme }) => compact ? '2px solid ' + theme.colors.separator : 'none'}; border-bottom: 2px solid ${({ theme }) => theme.colors.separator}; margin-bottom: ${({ compact }) => (compact ? '16px' : '0')}; - } - &.MuiAccordion-root:first-child { - border-top: 2px solid ${({ theme }) => theme.colors.separator}; - } - &.MuiAccordion-root.Mui-expanded { - margin: 0; - } - & .MuiCollapse-wrapper { + + &:before { + height: 0; + } + &:first-child { + border-top: 2px solid ${({ theme }) => theme.colors.separator}; + } + &.Mui-expanded { + margin: ${({ compact }) => (compact ? '0 0 16px 0' : '0')}; + } } `; - export const AccordionSummary = styled(AccordionSummaryMUI)` - border-bottom: 2px solid ${({ theme }) => theme.colors.separator}; - - &.MuiAccordionSummary-root.Mui-expanded { - min-height: 48px; - border-bottom: 2px solid ${({ theme }) => theme.colors.separator}; - margin-bottom: ${({ compact }) => (compact ? '16px' : '0')}; - } - - & .MuiAccordionSummary-content.Mui-expanded { - margin: 0; - } - - &:hover { - background-color: ${({ theme }) => theme.colors.background}; + &.MuiAccordionSummary-root { + &.Mui-expanded { + min-height: 48px; + border-bottom: 2px solid ${({ theme }) => theme.colors.separator}; + margin-bottom: ${({ compact }) => (compact ? '16px' : '0')}; + background-color: ${({ theme }) => theme.colors.background}; + } + &:hover { + background-color: ${({ theme }) => theme.colors.background}; + } + .MuiAccordionSummary-content { + &.Mui-expanded { + margin: 0; + } + } } `; - export const AccordionDetails = styled(AccordionDetailsMUI)``; - -type Props = { +type Props = Partial & { compact?: boolean; summaryContent: ReactNode; detailsContent: ReactNode; }; - const Accordion = ({ compact, summaryContent, detailsContent, + ...props }: Props): ReactElement => { return ( - + } aria-controls="panel1a-content" @@ -71,5 +70,4 @@ const Accordion = ({ ); }; - export default Accordion; From 4620345e89dead11d040033baa9767b3b4b8a866 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Wed, 30 Dec 2020 16:39:36 -0300 Subject: [PATCH 4/6] fix overflow on :hover event --- src/dataDisplay/Accordion/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/dataDisplay/Accordion/index.tsx b/src/dataDisplay/Accordion/index.tsx index 1a1d083b..c094811d 100644 --- a/src/dataDisplay/Accordion/index.tsx +++ b/src/dataDisplay/Accordion/index.tsx @@ -16,6 +16,7 @@ export const StyledAccordion = styled(AccordionMUI)` compact ? '2px solid ' + theme.colors.separator : 'none'}; border-bottom: 2px solid ${({ theme }) => theme.colors.separator}; margin-bottom: ${({ compact }) => (compact ? '16px' : '0')}; + overflow: hidden; &:before { height: 0; @@ -38,6 +39,7 @@ export const AccordionSummary = styled(AccordionSummaryMUI)` } &:hover { background-color: ${({ theme }) => theme.colors.background}; + border-radius: ${({ compact }) => (compact ? '8px' : '0')}; } .MuiAccordionSummary-content { &.Mui-expanded { From 31c21cfcd1db4410955c32180bb8a83ff3adc084 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Mon, 4 Jan 2021 12:32:58 -0300 Subject: [PATCH 5/6] add prop id and format --- src/dataDisplay/Accordion/index.tsx | 34 ++++++++++++++++++++++++----- 1 file changed, 28 insertions(+), 6 deletions(-) diff --git a/src/dataDisplay/Accordion/index.tsx b/src/dataDisplay/Accordion/index.tsx index c094811d..5219ea2e 100644 --- a/src/dataDisplay/Accordion/index.tsx +++ b/src/dataDisplay/Accordion/index.tsx @@ -1,14 +1,14 @@ import React, { ReactNode, ReactElement } from 'react'; -import AccordionMUI, { - AccordionProps as AccordionPropsMUI, -} from '@material-ui/core/Accordion'; +import AccordionMUI from '@material-ui/core/Accordion'; import AccordionSummaryMUI from '@material-ui/core/AccordionSummary'; import AccordionDetailsMUI from '@material-ui/core/AccordionDetails'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import styled from 'styled-components'; + type AccordionProps = { compact?: boolean; }; + export const StyledAccordion = styled(AccordionMUI)` &.MuiAccordion-root { border-radius: ${({ compact }) => (compact ? '8px' : '0')}; @@ -21,9 +21,11 @@ export const StyledAccordion = styled(AccordionMUI)` &:before { height: 0; } + &:first-child { border-top: 2px solid ${({ theme }) => theme.colors.separator}; } + &.Mui-expanded { margin: ${({ compact }) => (compact ? '0 0 16px 0' : '0')}; } @@ -37,10 +39,12 @@ export const AccordionSummary = styled(AccordionSummaryMUI)` margin-bottom: ${({ compact }) => (compact ? '16px' : '0')}; background-color: ${({ theme }) => theme.colors.background}; } + &:hover { background-color: ${({ theme }) => theme.colors.background}; border-radius: ${({ compact }) => (compact ? '8px' : '0')}; } + .MuiAccordionSummary-content { &.Mui-expanded { margin: 0; @@ -49,27 +53,45 @@ export const AccordionSummary = styled(AccordionSummaryMUI)` } `; export const AccordionDetails = styled(AccordionDetailsMUI)``; -type Props = Partial & { + +type Props = { compact?: boolean; + id?: string; + onChange?: ( + event: React.ChangeEvent>, + expanded: boolean, + id?: string + ) => void; summaryContent: ReactNode; detailsContent: ReactNode; }; + const Accordion = ({ compact, + id, + onChange, summaryContent, detailsContent, ...props }: Props): ReactElement => { return ( - + { + onChange?.(event, expanded, id); + }}> } aria-controls="panel1a-content" id="panel1a-header"> {summaryContent} - {detailsContent} + {detailsContent} ); }; + export default Accordion; From 39d31afb7d57d08e4ccda37adccdd8fa120615d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Mon, 4 Jan 2021 14:40:26 -0300 Subject: [PATCH 6/6] remove @material-ui/icons dep and use chevron icon --- package.json | 1 - src/dataDisplay/Accordion/index.tsx | 8 ++++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 0510e3b8..b4f3b4f2 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,6 @@ "author": "Gnosis (https://gnosis.pm)", "license": "MIT", "dependencies": { - "@material-ui/icons": "^4.11.2", "classnames": "^2.2.6", "polished": "^3.6.7", "react-media": "^1.10.0" diff --git a/src/dataDisplay/Accordion/index.tsx b/src/dataDisplay/Accordion/index.tsx index 5219ea2e..75d704a4 100644 --- a/src/dataDisplay/Accordion/index.tsx +++ b/src/dataDisplay/Accordion/index.tsx @@ -2,9 +2,10 @@ import React, { ReactNode, ReactElement } from 'react'; import AccordionMUI from '@material-ui/core/Accordion'; import AccordionSummaryMUI from '@material-ui/core/AccordionSummary'; import AccordionDetailsMUI from '@material-ui/core/AccordionDetails'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import styled from 'styled-components'; +import FixedIcon from '../FixedIcon'; + type AccordionProps = { compact?: boolean; }; @@ -50,6 +51,9 @@ export const AccordionSummary = styled(AccordionSummaryMUI)` margin: 0; } } + .MuiIconButton-root { + font-size: 0; + } } `; export const AccordionDetails = styled(AccordionDetailsMUI)``; @@ -84,7 +88,7 @@ const Accordion = ({ onChange?.(event, expanded, id); }}> } + expandIcon={} aria-controls="panel1a-content" id="panel1a-header"> {summaryContent}