Merge pull request #15 from stellar/update/card

update/card > updated card's design based on new design

Author: jeesunikim

src/components/Card.js

@@ -2,33 +2,39 @@ import * as React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
 
-import { PALETTE } from "../shared";
+import { PALETTE, MEDIA_QUERIES } from "../shared";
 
 import Text from "./Text";
 import SubsectionHeader from "./SubsectionHeader";
 
 const CardEl = styled.div`
   display: flex;
-  flex-direction: column;
-  padding: 2rem;
+  flex-direction: ${(props) => (props.isIconInline ? "row" : "column")};
+  padding: 1.5rem;
   border-radius: 4px;
   border: solid 1px ${PALETTE.white80};
-  box-shadow: 0 8px 16px -8px rgba(19, 12, 51, 0.08);
+  box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.08);
+
+  @media (${MEDIA_QUERIES.ltTablet}) {
+    flex-direction: column;
+  }
 
   ${SubsectionHeader} {
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.65rem;
   }
 
   img {
     display: block;
-    overflow: hidden;
     width: 3rem;
     height: 3rem;
     border-radius: 50%;
+    margin-right: 1.5rem;
     margin-bottom: 1.5rem;
   }
 `;
 
+const ContentEl = styled.div``;
+
 /**
  * Note: This exports a React component instead of a styled-component.
  * [Design Mockup](https://app.zeplin.io/project/5d5aecf2918cf74d46363015/screen/5d813f575d1398783f61df5b)
@@ -41,8 +47,10 @@ const Card = React.forwardRef(function Card(
   return (
     <CardEl ref={ref} {...props}>
       {icon && <img src={icon} alt={title} />}
-      <SubsectionHeader color={PALETTE.black60}>{title}</SubsectionHeader>
-      <Text>{children}</Text>
+      <ContentEl>
+        <SubsectionHeader>{title}</SubsectionHeader>
+        <Text>{children}</Text>
+      </ContentEl>
     </CardEl>
   );
 });
@@ -56,6 +64,10 @@ Card.propTypes = {
    * The icon of the card. @TODO
    */
   icon: PropTypes.string,
+  /**
+   * Set to true if an icon should appear next to the card's content on desktop
+   */
+  isIconInline: PropTypes.bool,
   /**
    * The copy of the card
    */

src/components/Card.md

@@ -1,11 +1,3 @@
-Card with an icon
-
-```jsx
-<Card title="Issue assets" icon="https://via.placeholder.com/48/999999">
-  Start building on the most powerful payment network today.
-</Card>
-```
-
 Card without an icon
 
 ```jsx
@@ -15,3 +7,36 @@ Card without an icon
   issue interoperable assets.
 </Card>
 ```
+
+Card with `isIconInline` set to `true`. This is for cards within only one column
+grid on desktop.
+
+```jsx
+<Card
+  title="Issue assets"
+  icon="https://via.placeholder.com/48/999999"
+  isIconInline
+>
+  Start building on the most powerful payment network today.
+</Card>
+```
+
+Card with `isIconInline` set to `false`. This is for cards within multiple
+column grid on desktop. On mobile, this design is adopted in all cards.
+
+```jsx
+<div
+  style={{
+    display: "grid",
+    gridTemplateColumns: "repeat(2, 1fr)",
+    gridGap: "20px",
+  }}
+>
+  <Card title="Issue assets" icon="https://via.placeholder.com/48/999999">
+    Start building on the most powerful payment network today.
+  </Card>
+  <Card title="Issue assets" icon="https://via.placeholder.com/48/999999">
+    Start building on the most powerful payment network today.
+  </Card>
+</div>
+```

src/shared.js

@@ -19,3 +19,24 @@ export const PALETTE = {
   black80: "#333333",
   purple: "#3e1bdb",
 };
+
+export const SCREEN_SIZES = {
+  mobile: 420,
+  tablet: 769,
+  laptop: 1025,
+  desktop: 1281,
+};
+
+export const MEDIA_QUERIES = {
+  ltMobile: `max-width: ${SCREEN_SIZES.mobile}px`,
+  gtMobile: `min-width: ${SCREEN_SIZES.mobile}px`,
+  ltTablet: `max-width: ${SCREEN_SIZES.tablet}px`,
+  gtTablet: `min-width: ${SCREEN_SIZES.tablet}px`,
+  ltLaptop: `max-width: ${SCREEN_SIZES.laptop}px`,
+  gtLaptop: `min-width: ${SCREEN_SIZES.laptop}px`,
+  ltDesktop: `max-width: ${SCREEN_SIZES.desktop}px`,
+  gtDesktop: `min-width: ${SCREEN_SIZES.desktop}px`,
+
+  canHover: `hover: hover`,
+  noHover: `hover: none`,
+};