Skip to content

Commit cd6bcdc

Browse files
monicavarhaleooHmartY
monicavarhale
authored and
ooHmartY
committed
fix(ListRow): Add hover state and remove overflow menu and button from the link
1 parent dcf17d5 commit cd6bcdc

File tree

6 files changed

+10063
-679
lines changed

6 files changed

+10063
-679
lines changed

‎catalog/pages/listRow/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { pageLoader } from "catalog";
22

33
import ListRow from "../../../src/components/List/Row";
4-
import { Container, Row, Column } from "../../../src/components/Grid";
4+
import Container from "../../../src/components/List/Container";
5+
import { Row, Column } from "../../../src/components/Grid";
56

67
export default {
78
path: "/listRow",

‎catalog/pages/listRow/index.md

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ rows:
4747
```react
4848
responsive: true
4949
---
50-
5150
<ListRow
5251
title="Del Mar Fairgrounds"
5352
subTitle="KABOO 3-Day Pass"
@@ -60,12 +59,12 @@ responsive: true
6059
/>
6160
```
6261

63-
### Standard List Row last item
62+
### Multiple List Row with the Container
6463

6564
```react
6665
responsive: true
6766
---
68-
67+
<Container>
6968
<ListRow
7069
title="Del Mar Fairgrounds"
7170
subTitle="KABOO 3-Day Pass"
@@ -75,8 +74,28 @@ responsive: true
7574
variant="standard"
7675
onClick={()=>{}}
7776
onOverflowClick={()=>{}}
78-
isLast={true}
7977
/>
78+
<ListRow
79+
title="Inglewood, CA - The Forum"
80+
subTitle="The Weezer Tour"
81+
dateTitle="apr 26"
82+
dateSubTitle="Sun, 8:00 PM"
83+
buttonText="See Tickets"
84+
variant="standard"
85+
onClick={()=>{}}
86+
onOverflowClick={()=>{}}
87+
/>
88+
<ListRow
89+
title="Inglewood, CA - The Forum"
90+
subTitle="The Weezer Tour"
91+
dateTitle="apr 27"
92+
dateSubTitle="Thu, 8:00 PM"
93+
buttonText="See Tickets"
94+
variant="standard"
95+
onClick={()=>{}}
96+
onOverflowClick={()=>{}}
97+
/>
98+
</Container>
8099
```
81100

82101
### List Row with Link

‎src/components/List/Row.js

Lines changed: 94 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,8 @@ import { mediumAndUp, largeAndUp } from "../../theme/mediaQueries";
1313

1414
const variants = ["standard", "withLink"];
1515

16-
const ListContainer = styled.div`
17-
padding: ${spacing.moderate} 0
18-
${props => (props.variant === "withLink" ? spacing.cozy : "12px")} 12px;
16+
const RowContainer = styled.div`
1917
background-color: ${colors.white.base};
20-
${mediumAndUp`
21-
padding: 18px 0
22-
${props => (props.variant === "withLink" ? spacing.cozy : "18px")}
23-
12px;
24-
`};
2518
2619
&:not(:last-of-type) {
2720
border-bottom: 1px solid ${colors.lightGray};
@@ -60,21 +53,45 @@ const LinkWrapper = styled.a`
6053
text-decoration: none;
6154
display: block;
6255
width: 100%;
56+
cursor: pointer;
57+
padding-top: ${spacing.cozy};
58+
padding-bottom: ${spacing.cozy};
59+
margin: 12px 0
60+
${props => (props.variant === "withLink" ? spacing.cozy : "12px")} 0;
61+
${mediumAndUp`
62+
margin: 18px 0
63+
${props => (props.variant === "withLink" ? spacing.cozy : "18px")}
64+
0;
65+
`};
66+
&:hover {
67+
background: ${colors.azure.muted};
68+
}
6369
`;
6470

65-
const ClickableButton = styled.span`
71+
const ClickableButton = styled.button`
6672
background: none;
6773
border: none;
68-
padding: 0;
6974
cursor: pointer;
70-
width: 100%;
75+
display: block;
7176
text-align: start;
77+
padding: 14px 0
78+
${props => (props.variant === "withLink" ? spacing.cozy : "14px")} 0;
7279
`;
7380

7481
const ListRowButton = StyledButton.withComponent("span").extend`
7582
display: flex;
7683
justify-content: center;
7784
align-items: center;
85+
padding: 18px 0
86+
${props => (props.variant === "withLink" ? spacing.cozy : "18px")}
87+
0;
88+
`;
89+
90+
const LinkRow = styled(Row)`
91+
padding-left: ${spacing.cozy};
92+
${mediumAndUp`
93+
padding-left: 12px;
94+
`};
7895
`;
7996

8097
const ListItem = ({
@@ -90,79 +107,86 @@ const ListItem = ({
90107
linkSubTitle,
91108
coloredDate,
92109
onClick,
93-
onOverflowClick,
94-
isLast
110+
onOverflowClick
95111
}) => (
96-
<ListContainer isLast={isLast} variant={variant} onExpand={onClick}>
97-
<LinkWrapper onClick={onClick} href={href}>
98-
<ListRow>
99-
<Column small={3} medium={1.8} large={1.3} xLarge={1}>
100-
<BoldText
101-
style={{ textTransform: "uppercase" }}
102-
color={coloredDate ? colors.heliotrope.base : null}
103-
>
104-
{dateTitle}
105-
</BoldText>
106-
<SecondaryText>{dateSubTitle}</SecondaryText>
107-
</Column>
108-
109-
<MobileOnlyColumn small={8}>
110-
<Column medium={4} large={3}>
111-
<PrimaryText>{title}</PrimaryText>
112-
</Column>
113-
<Column>
114-
<SecondaryText>{subTitle}</SecondaryText>
115-
</Column>
116-
</MobileOnlyColumn>
117-
118-
<DesktopOnlyColumn medium={8} large={4.5} xLarge={4.9}>
119-
<PrimaryText>{title}</PrimaryText>
120-
</DesktopOnlyColumn>
121-
<SubTitleColumn large={4.5} xLarge={4.9}>
122-
<PrimaryText>{subTitle}</PrimaryText>
123-
</SubTitleColumn>
124-
125-
<DesktopOnlyColumn medium={2} large={1.6} xLarge={1.1}>
126-
<ListRowButton
127-
aria-label={buttonText}
128-
role="button"
129-
width="102px"
130-
variant="standard"
131-
>
132-
{buttonText}
133-
</ListRowButton>
134-
</DesktopOnlyColumn>
135-
136-
<MobileOnlyColumn small={1}>
137-
<ClickableButton onClick={onOverflowClick}>
138-
<OverflowIcon
139-
size={22}
140-
color={colors.onyx.light}
141-
onClick={onOverflowClick}
142-
/>
143-
</ClickableButton>
144-
</MobileOnlyColumn>
145-
</ListRow>
146-
</LinkWrapper>
112+
<RowContainer variant={variant} onExpand={onClick}>
113+
<ListRow>
114+
<Column small={10.6} medium={9.8} large={10.2} xLarge={10.8}>
115+
<LinkWrapper onClick={onClick} href={href}>
116+
<Row>
117+
<Column small={3.8} medium={2.1} large={1.5} xLarge={1}>
118+
<BoldText
119+
style={{ textTransform: "uppercase" }}
120+
color={coloredDate ? colors.heliotrope.base : null}
121+
>
122+
{dateTitle}
123+
</BoldText>
124+
<SecondaryText>{dateSubTitle}</SecondaryText>
125+
</Column>
126+
127+
<MobileOnlyColumn small={7}>
128+
<Column medium={4} large={3}>
129+
<PrimaryText>{title}</PrimaryText>
130+
</Column>
131+
<Column>
132+
<SecondaryText>{subTitle}</SecondaryText>
133+
</Column>
134+
</MobileOnlyColumn>
135+
136+
<DesktopOnlyColumn medium={8} large={4.5} xLarge={4.9}>
137+
<PrimaryText>{title}</PrimaryText>
138+
</DesktopOnlyColumn>
139+
<SubTitleColumn large={4.5} xLarge={4.9}>
140+
<PrimaryText>{subTitle}</PrimaryText>
141+
</SubTitleColumn>
142+
</Row>
143+
</LinkWrapper>
144+
</Column>
145+
146+
<DesktopOnlyColumn medium={2} large={1.6} xLarge={1.1}>
147+
<ListRowButton
148+
aria-label={buttonText}
149+
role="button"
150+
width="102px"
151+
variant="standard"
152+
>
153+
{buttonText}
154+
</ListRowButton>
155+
</DesktopOnlyColumn>
156+
157+
<MobileOnlyColumn small={1.4}>
158+
<ClickableButton
159+
onClick={onOverflowClick}
160+
aria-label="More Info"
161+
role="button"
162+
>
163+
<OverflowIcon
164+
size={22}
165+
// style={{ paddingTop: "5px", paddingBottom: "5px" }}
166+
color={colors.onyx.light}
167+
onClick={onOverflowClick}
168+
/>
169+
</ClickableButton>
170+
</MobileOnlyColumn>
171+
</ListRow>
147172
{variant === "withLink" ? (
148-
<Row>
173+
<LinkRow>
149174
<Column small={9} medium={10} large={10.5} xLarge={10.8}>
150175
<Link href={linkUrl}>{linkTitle}</Link>
151176
</Column>
152177
<Column small={3} medium={2} large={1.5} xLarge={1.2}>
153178
<SecondaryText>{linkSubTitle}</SecondaryText>
154179
</Column>
155-
</Row>
180+
</LinkRow>
156181
) : null}
157-
</ListContainer>
182+
</RowContainer>
158183
);
159184

160185
ListItem.defaultProps = {
161186
linkTitle: "",
162187
linkUrl: "",
163188
linkSubTitle: "",
164-
coloredDate: false,
165-
isLast: false
189+
coloredDate: false
166190
};
167191

168192
ListItem.propTypes = {
@@ -178,8 +202,7 @@ ListItem.propTypes = {
178202
linkSubTitle: PropTypes.string,
179203
coloredDate: PropTypes.bool,
180204
onClick: PropTypes.func.isRequired,
181-
onOverflowClick: PropTypes.func.isRequired,
182-
isLast: PropTypes.bool
205+
onOverflowClick: PropTypes.func.isRequired
183206
};
184207

185208
export default ListItem;

0 commit comments

Comments
 (0)