fix(ListRow): Add hover state and remove overflow menu and button fro…

…m the link
ticketmaster · Jun 1, 2018 · cd6bcdc · cd6bcdc
1 parent dcf17d5
commit cd6bcdc
Show file tree

Hide file tree

Showing 6 changed files with 10,063 additions and 679 deletions.
diff --git a/catalog/pages/listRow/index.js b/catalog/pages/listRow/index.js
@@ -1,7 +1,8 @@
 import { pageLoader } from "catalog";
 
 import ListRow from "../../../src/components/List/Row";
-import { Container, Row, Column } from "../../../src/components/Grid";
+import Container from "../../../src/components/List/Container";
+import { Row, Column } from "../../../src/components/Grid";
 
 export default {
   path: "/listRow",

diff --git a/catalog/pages/listRow/index.md b/catalog/pages/listRow/index.md
@@ -47,7 +47,6 @@ rows:
 ```react
 responsive: true
 ---
-
  <ListRow
       title="Del Mar Fairgrounds"
       subTitle="KABOO 3-Day Pass"
@@ -60,12 +59,12 @@ responsive: true
     />
 ```
 
-### Standard List Row last item
+### Multiple List Row with the Container
 
 ```react
 responsive: true
 ---
-
+<Container>
  <ListRow
       title="Del Mar Fairgrounds"
       subTitle="KABOO 3-Day Pass"
@@ -75,8 +74,28 @@ responsive: true
       variant="standard"
       onClick={()=>{}}
       onOverflowClick={()=>{}}
-      isLast={true}
     />
+     <ListRow
+      title="Inglewood, CA - The Forum"
+      subTitle="The Weezer Tour"
+      dateTitle="apr 26"
+      dateSubTitle="Sun, 8:00 PM"
+      buttonText="See Tickets"
+      variant="standard"
+      onClick={()=>{}}
+      onOverflowClick={()=>{}}
+    />
+      <ListRow
+      title="Inglewood, CA - The Forum"
+      subTitle="The Weezer Tour"
+      dateTitle="apr 27"
+      dateSubTitle="Thu, 8:00 PM"
+      buttonText="See Tickets"
+      variant="standard"
+      onClick={()=>{}}
+      onOverflowClick={()=>{}}
+    />
+</Container>
 ```
 
 ### List Row with Link

diff --git a/src/components/List/Row.js b/src/components/List/Row.js
@@ -13,15 +13,8 @@ import { mediumAndUp, largeAndUp } from "../../theme/mediaQueries";
 
 const variants = ["standard", "withLink"];
 
-const ListContainer = styled.div`
-  padding: ${spacing.moderate} 0
-    ${props => (props.variant === "withLink" ? spacing.cozy : "12px")} 12px;
+const RowContainer = styled.div`
   background-color: ${colors.white.base};
-  ${mediumAndUp`
-    padding: 18px 0
-      ${props => (props.variant === "withLink" ? spacing.cozy : "18px")}
-      12px;
-  `};
 
   &:not(:last-of-type) {
     border-bottom: 1px solid ${colors.lightGray};
@@ -60,21 +53,45 @@ const LinkWrapper = styled.a`
   text-decoration: none;
   display: block;
   width: 100%;
+  cursor: pointer;
+  padding-top: ${spacing.cozy};
+  padding-bottom: ${spacing.cozy};
+  margin: 12px 0
+    ${props => (props.variant === "withLink" ? spacing.cozy : "12px")} 0;
+  ${mediumAndUp`
+    margin: 18px 0
+      ${props => (props.variant === "withLink" ? spacing.cozy : "18px")}
+      0;
+  `};
+  &:hover {
+    background: ${colors.azure.muted};
+  }
 `;
 
-const ClickableButton = styled.span`
+const ClickableButton = styled.button`
   background: none;
   border: none;
-  padding: 0;
   cursor: pointer;
-  width: 100%;
+  display: block;
   text-align: start;
+  padding: 14px 0
+    ${props => (props.variant === "withLink" ? spacing.cozy : "14px")} 0;
 `;
 
 const ListRowButton = StyledButton.withComponent("span").extend`
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 18px 0
+      ${props => (props.variant === "withLink" ? spacing.cozy : "18px")}
+      0;
+`;
+
+const LinkRow = styled(Row)`
+  padding-left: ${spacing.cozy};
+  ${mediumAndUp`
+  padding-left: 12px;
+  `};
 `;
 
 const ListItem = ({
@@ -90,79 +107,86 @@ const ListItem = ({
   linkSubTitle,
   coloredDate,
   onClick,
-  onOverflowClick,
-  isLast
+  onOverflowClick
 }) => (
-  <ListContainer isLast={isLast} variant={variant} onExpand={onClick}>
-    <LinkWrapper onClick={onClick} href={href}>
-      <ListRow>
-        <Column small={3} medium={1.8} large={1.3} xLarge={1}>
-          <BoldText
-            style={{ textTransform: "uppercase" }}
-            color={coloredDate ? colors.heliotrope.base : null}
-          >
-            {dateTitle}
-          </BoldText>
-          <SecondaryText>{dateSubTitle}</SecondaryText>
-        </Column>
-
-        <MobileOnlyColumn small={8}>
-          <Column medium={4} large={3}>
-            <PrimaryText>{title}</PrimaryText>
-          </Column>
-          <Column>
-            <SecondaryText>{subTitle}</SecondaryText>
-          </Column>
-        </MobileOnlyColumn>
-
-        <DesktopOnlyColumn medium={8} large={4.5} xLarge={4.9}>
-          <PrimaryText>{title}</PrimaryText>
-        </DesktopOnlyColumn>
-        <SubTitleColumn large={4.5} xLarge={4.9}>
-          <PrimaryText>{subTitle}</PrimaryText>
-        </SubTitleColumn>
-
-        <DesktopOnlyColumn medium={2} large={1.6} xLarge={1.1}>
-          <ListRowButton
-            aria-label={buttonText}
-            role="button"
-            width="102px"
-            variant="standard"
-          >
-            {buttonText}
-          </ListRowButton>
-        </DesktopOnlyColumn>
-
-        <MobileOnlyColumn small={1}>
-          <ClickableButton onClick={onOverflowClick}>
-            <OverflowIcon
-              size={22}
-              color={colors.onyx.light}
-              onClick={onOverflowClick}
-            />
-          </ClickableButton>
-        </MobileOnlyColumn>
-      </ListRow>
-    </LinkWrapper>
+  <RowContainer variant={variant} onExpand={onClick}>
+    <ListRow>
+      <Column small={10.6} medium={9.8} large={10.2} xLarge={10.8}>
+        <LinkWrapper onClick={onClick} href={href}>
+          <Row>
+            <Column small={3.8} medium={2.1} large={1.5} xLarge={1}>
+              <BoldText
+                style={{ textTransform: "uppercase" }}
+                color={coloredDate ? colors.heliotrope.base : null}
+              >
+                {dateTitle}
+              </BoldText>
+              <SecondaryText>{dateSubTitle}</SecondaryText>
+            </Column>
+
+            <MobileOnlyColumn small={7}>
+              <Column medium={4} large={3}>
+                <PrimaryText>{title}</PrimaryText>
+              </Column>
+              <Column>
+                <SecondaryText>{subTitle}</SecondaryText>
+              </Column>
+            </MobileOnlyColumn>
+
+            <DesktopOnlyColumn medium={8} large={4.5} xLarge={4.9}>
+              <PrimaryText>{title}</PrimaryText>
+            </DesktopOnlyColumn>
+            <SubTitleColumn large={4.5} xLarge={4.9}>
+              <PrimaryText>{subTitle}</PrimaryText>
+            </SubTitleColumn>
+          </Row>
+        </LinkWrapper>
+      </Column>
+
+      <DesktopOnlyColumn medium={2} large={1.6} xLarge={1.1}>
+        <ListRowButton
+          aria-label={buttonText}
+          role="button"
+          width="102px"
+          variant="standard"
+        >
+          {buttonText}
+        </ListRowButton>
+      </DesktopOnlyColumn>
+
+      <MobileOnlyColumn small={1.4}>
+        <ClickableButton
+          onClick={onOverflowClick}
+          aria-label="More Info"
+          role="button"
+        >
+          <OverflowIcon
+            size={22}
+            // style={{ paddingTop: "5px", paddingBottom: "5px" }}
+            color={colors.onyx.light}
+            onClick={onOverflowClick}
+          />
+        </ClickableButton>
+      </MobileOnlyColumn>
+    </ListRow>
     {variant === "withLink" ? (
-      <Row>
+      <LinkRow>
         <Column small={9} medium={10} large={10.5} xLarge={10.8}>
           <Link href={linkUrl}>{linkTitle}</Link>
         </Column>
         <Column small={3} medium={2} large={1.5} xLarge={1.2}>
           <SecondaryText>{linkSubTitle}</SecondaryText>
         </Column>
-      </Row>
+      </LinkRow>
     ) : null}
-  </ListContainer>
+  </RowContainer>
 );
 
 ListItem.defaultProps = {
   linkTitle: "",
   linkUrl: "",
   linkSubTitle: "",
-  coloredDate: false,
-  isLast: false
+  coloredDate: false
 };
 
 ListItem.propTypes = {
@@ -178,8 +202,7 @@ ListItem.propTypes = {
   linkSubTitle: PropTypes.string,
   coloredDate: PropTypes.bool,
   onClick: PropTypes.func.isRequired,
-  onOverflowClick: PropTypes.func.isRequired,
-  isLast: PropTypes.bool
+  onOverflowClick: PropTypes.func.isRequired
 };
 
 export default ListItem;