feature/component/card > Card and Text component added

Author: Jeesun Kim

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

src/components/Card.js

@@ -0,0 +1,51 @@
+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;
+  }
+`;
+
+const Card = ({ title, icon, children }) => (
+  <CardEl>
+    {icon && <img src={icon} alt={title} />}
+    <SubsectionHeader color={PALETTE.black60}>{title}</SubsectionHeader>
+    <Text>{children}</Text>
+  </CardEl>
+);
+
+Card.propTypes = {
+  /**
+   * The type of button to show. Don't pass a string; use the object
+   * `Card.Types` to pass a named constant.
+   */
+  title: PropTypes.string.isRequired,
+  icon: PropTypes.string,
+  children: PropTypes.node.isRequired,
+};
+
+/** @component */
+export default Card;

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>
+```

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;
 `;
 

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;

src/components/Text.md

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

src/shared.js

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