fix: clean code and remove useless props

packages/junipero/lib/Card/index.js

@@ -1,40 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { classNames } from '@poool/junipero-utils';
 
-const Card = ({
-  className,
-  title,
-  text,
-  icon,
-  illustration,
-  children,
-}) => {
-  return (
-    <div className={classNames(
-      'junipero',
-      'card',
-      className
-    )}>
-      <div className="card-body">
-        { icon && <img className="card-icon" src={icon}/> }
-        { illustration &&
-          <img className="card-illustration" src={illustration}/>
-        }
-        { title && <span className="card-title">{title}</span>}
-        { text && <span className="card-text">{text}</span>}
-        { children }
-      </div>
-    </div>
-  );
-};
+const Card = ({ className, ...rest }) => (
+  <div { ...rest } className={classNames('junipero', 'card', className)}/>
+);
 
 export default Card;
-
-Card.propTypes = {
-  title: PropTypes.string,
-  text: PropTypes.string,
-  icon: PropTypes.string,
-  illustration: PropTypes.string,
-  Form: PropTypes.node,
-};

packages/junipero/lib/Card/index.stories.js

@@ -6,50 +6,48 @@ import TextField from '../TextField';
 
 export default { title: 'junipero/Card' };
 
-const text = 'This is a basic card. You can use it to display any type of' +
-  'text, picture and/or icon. It is supposed to have 30px/40px paddings and' +
-  'regular paragraph texts.';
-
-const Form = () => {
-  return (
-    <React.Fragment>
-      <TextField
-        label="Label"
-        value="Thomas Bangalter"
-      />
+const Form = () => (
+  <React.Fragment>
+    <div className="card-title">Card title</div>
+    <div className="card-body">This form centralises everything you need to
+    configure your app the easiest way possible. It has beautiful text fields,
+    some hand crafted card header & footer, and a nice box shadow that will
+    melt your 2001 ATI graphics card.</div>
+    <div className="card-form">
+      <TextField label="Label" value="Thomas Bangalter" />
+      <TextField label="Label" type="password" value="securePassword" />
       <Button className="primary">Update</Button>
-    </React.Fragment>
-  );
-};
+    </div>
+  </React.Fragment>
+);
 
-export const basic = () => (
-  <>
-    <Card title="Card Title" text={text}/>
-  </>
+const CardBody = () => (
+  <React.Fragment>
+    <div className="card-title">Card title</div>
+    <div className="card-body">This is a basic card. You can use it to display
+    any type of text, picture and/or icon. It is supposed to have 30px/40px
+    paddings and regular paragraph texts.</div>
+  </React.Fragment>
 );
 
-export const withIcon = () => (
-  <>
-    <Card icon="https://cutt.ly/6k12q0g" title="Card Title" text={text}/>
-  </>
+const CardBodyWithIcon = () => (
+  <React.Fragment>
+    <img className="card-icon" src="https://cutt.ly/6k12q0g"/>
+    <div className="card-title">Card title</div>
+    <div className="card-body">This is a basic card. You can use it to display
+    any type of text, picture and/or icon. It is supposed to have 30px/40px
+    paddings and regular paragraph texts.</div>
+  </React.Fragment>
 );
 
-export const withIllustration = () => (
-  <>
-    <Card
-      illustration="https://cutt.ly/Pk19ejU"
-      title="Card Title"
-      text={text}
-    />
-  </>
+export const basic = () => (
+  <Card><CardBody /></Card>
+);
+
+export const withIcon = () => (
+  <Card><CardBodyWithIcon /></Card>
 );
 
 export const withForm = () => (
-  <>
-    <Card
-      title="Card Title"
-    >
-      <Form />
-    </Card>
-  </>
+  <Card><Form /></Card>
 );

packages/junipero/lib/Card/index.styl

@@ -6,23 +6,27 @@
   box-shadow: 0px 4px 30px -7px rgba(0, 10, 36, 0.1)
   border-radius: 10px
 
-  .card-body
-    display: flex
-    flex-direction: column
 
-    .card-title
-      font-size: 22px
-      line-height: 38px
-      margin-bottom: 20px
+  .card-title
+    font-size: 22px
+    line-height: 38px
+    margin-bottom: 20px
+
+  .card-text
+    font-size: 16px
+    line-height: 32px
 
-    .card-text
-      font-size: 16px
-      line-height: 32px
+  .card-icon
+    margin-bottom: 50px
+    height: 50px
+    width: 50px
 
-    .card-icon
-      margin-bottom: 50px
-      height: 50px
-      width: 50px
+  .card-illustration
+    margin-bottom: 30px
+
+  .card-form
+    display: flex
+    flex-direction: column
 
-    .card-illustration
-      margin-bottom: 30px
+    > *
+      margin-top: 30px