Merge pull request #13 from stellar/feature/component/card

Feature/component/card

Author: jeesunikim

Diff for: README.md

@@ -21,9 +21,9 @@ To use other components, you need to explicity import them. Reference on
 <!-- prettier-ignore -->
 ````jsx
 // ```jsx inside Panel/Readme.md or Panel.md
-import { all } from 'dog-names'
-import { RandomButton } from '../RandomButton'
-;<RandomButton variants={all} />
+import { all } from 'dog-names';
+import { RandomButton } from '../RandomButton';
+<RandomButton variants={all} />
 ````
 
 ## Merging in changes

Diff for: src/components/Card.js

@@ -0,0 +1,66 @@
+import * as React from "react";
+import styled from "styled-components";
+import PropTypes from "prop-types";
+
+import { PALETTE } from "../shared";
+
+import Text from "./Text";
+import SubsectionHeader from "./SubsectionHeader";
+
+const CardEl = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 2rem;
+  border-radius: 4px;
+  border: solid 1px ${PALETTE.white80};
+  box-shadow: 0 8px 16px -8px rgba(19, 12, 51, 0.08);
+
+  ${SubsectionHeader} {
+    margin-bottom: 0.5rem;
+  }
+
+  img {
+    display: block;
+    overflow: hidden;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    margin-bottom: 1.5rem;
+  }
+`;
+
+/**
+ * Note: This exports a React component instead of a styled-component.
+ * [Design Mockup](https://app.zeplin.io/project/5d5aecf2918cf74d46363015/screen/5d813f575d1398783f61df5b)
+ */
+
+const Card = React.forwardRef(function Card(
+  { title, icon, children, ...props },
+  ref,
+) {
+  return (
+    <CardEl ref={ref} {...props}>
+      {icon && <img src={icon} alt={title} />}
+      <SubsectionHeader color={PALETTE.black60}>{title}</SubsectionHeader>
+      <Text>{children}</Text>
+    </CardEl>
+  );
+});
+
+Card.propTypes = {
+  /**
+   * The title of the card
+   */
+  title: PropTypes.node.isRequired,
+  /**
+   * The icon of the card. @TODO
+   */
+  icon: PropTypes.string,
+  /**
+   * The copy of the card
+   */
+  children: PropTypes.node.isRequired,
+};
+
+/** @component */
+export default Card;

Diff for: src/components/Card.md

@@ -0,0 +1,17 @@
+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
+<Card title="Digital Asset Stack">
+  Understand how the Stellar node software (Core), API (Horizon), and ecosystem
+  standards (Stellar Ecosystem Proposals, or SEPs) work together to help you
+  issue interoperable assets.
+</Card>
+```

Diff for: src/components/SubsectionHeader.js

@@ -5,7 +5,7 @@ const SubsectionHeader = styled.h3`
   font-size: 1.125rem;
   line-height: 1.5;
   font-weight: normal;
-  color: ${PALETTE.black};
+  color: ${(props) => (props.color ? props.color : PALETTE.black)};
   margin: 0;
 `;
 

Diff for: src/components/Text.js

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+import { PALETTE } from "../shared";
+
+const Text = styled.p`
+  font-size: 1rem;
+  line-height: 1.75;
+  font-weight: normal;
+  color: ${PALETTE.black60};
+  margin: 0;
+`;
+
+/** @component */
+export default Text;

Diff for: src/components/Text.md

@@ -0,0 +1,3 @@
+```jsx
+<Text>I am a paragraph tag.</Text>
+```

Diff for: src/shared.js

@@ -12,6 +12,7 @@ export const FONT_WEIGHT = {
 
 export const PALETTE = {
   white: "#ffffff",
+  white80: "#fafafa",
   black: "#000000",
   black30: "#999999",
   black60: "#666666",

Diff for: styleguide.config.js

@@ -13,14 +13,18 @@ module.exports = {
             "src/components/PageHeader.js",
             "src/components/SectionHeader.js",
             "src/components/SubsectionHeader.js",
+            "src/components/Text.js",
           ],
+          usageMode: "expand",
         },
         {
           name: "Components",
           components: () => [
             "src/components/BulletedList.js",
             "src/components/Button.js",
+            "src/components/Card.js",
           ],
+          usageMode: "expand",
         },
         {
           name: "Form",
@@ -30,6 +34,7 @@ module.exports = {
             "src/components/Select.js",
             "src/components/Textarea.js",
           ],
+          usageMode: "expand",
         },
       ],
     },