Revisit the card design (#90)

* Update card design and structure. Update old cards to the new components

* Update broker and service instances list cards

* Prettier missing file

* Fix the card props

* Fix the spacing to solve the issue with the last element

* Move function to classes. Remove unnecesary code. Update props

src/components/Card/Card.css

@@ -1,56 +1,52 @@
-/* Margin: 0.5em */
-
-.CardContainer {
-  display: flex;
-  flex-wrap: wrap;
-  margin: -0.5em;
-  padding: 1em 0;
+.Card,
+.Card__inner {
+  height: 100%;
+  width: 100%;
 }
 
 .Card {
-  border-bottom: 1px solid #f2f2f0;
-  border-radius: 2px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-  display: grid;
-  flex: 0 1 0;
-  grid-template-areas:
-    "title title title icon"
-    "body body body body"
-    "notes button button button";
-  grid-template-columns: 5fr 1fr 2fr 1fr;
-  grid-template-rows: auto auto auto;
-  margin: 0.5em;
-  min-width: 25em;
-  padding: 1em;
+  margin: 0 1% 2%;
+}
+
+.Card__Icon img {
+  max-height: 64px;
 }
 
-.Card__header {
-  grid-area: title;
-  color: #333333;
-  margin: 0;
+/* max 4 items per row (default) */
+@media screen and (min-width: 480px) {
+  .Card.Card-responsive {
+    width: 48%;
+  }
 }
 
-.Card__body {
-  grid-area: body;
-  color: #666666;
-  margin: 1em 0;
+@media screen and (min-width: 768px) {
+  .Card.Card-responsive {
+    width: 31%;
+  }
 }
 
-.Card__notes {
-  grid-area: notes;
-  font-size: small;
+@media screen and (min-width: 1100px) {
+  .Card.Card-responsive {
+    width: 23%;
+  }
 }
 
-.Card__button {
-  grid-area: button;
-  justify-self: end;
-  align-self: end;
+/* max 3 items per row */
+@media screen and (min-width: 768px) {
+  .Card.Card-responsive-3 {
+    width: 48%;
+  }
 }
 
-.Card__icon {
-  grid-area: icon;
+@media screen and (min-width: 1100px) {
+  .Card.Card-responsive-3 {
+    width: 31%;
+  }
 }
 
-.Card__img {
-  max-width: 100%;
+/* max 2 items per row */
+@media screen and (min-width: 768px) {
+  .Card.Card-responsive-2 {
+    width: 48%;
+  }
 }

src/components/Card/Card.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import "./Card.css";
+
+export interface ICardProps {
+  className?: string;
+  children?: React.ReactChildren | React.ReactNode | string;
+  responsive?: boolean;
+  responsiveColumns?: number;
+}
+
+class Card extends React.Component<ICardProps> {
+  public cssClass() {
+    let cssClass = `Card ${this.props.className}`;
+
+    if (this.props.responsive && this.props.responsiveColumns) {
+      cssClass = `${cssClass} Card-responsive-${this.props.responsiveColumns}`;
+    } else if (this.props.responsive) {
+      cssClass = `${cssClass} Card-responsive`;
+    }
+    return cssClass;
+  }
+
+  public render() {
+    return (
+      <article className={this.cssClass()}>
+        <div className="Card__inner bg-white elevation-1">{this.props.children}</div>
+      </article>
+    );
+  }
+}
+
+export default Card;

src/components/Card/CardContent.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+export interface ICardContentProps {
+  className?: string;
+  children?: React.ReactChildren | React.ReactNode | string;
+}
+
+class CardContent extends React.Component<ICardContentProps> {
+  public render() {
+    return (
+      <div className={`Card__content padding-normal ${this.props.className}`}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default CardContent;

src/components/Card/CardFooter.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+export interface ICardFooterProps {
+  className?: string;
+  children?: React.ReactChildren | React.ReactNode | string;
+}
+
+class CardFooter extends React.Component<ICardFooterProps> {
+  public render() {
+    return (
+      <div className={`Card__footer padding-h-normal ${this.props.className}`}>
+        <hr className="separator-small" />
+        <div className="padding-b-normal">{this.props.children}</div>
+      </div>
+    );
+  }
+}
+
+export default CardFooter;

src/components/Card/CardGrid.css

@@ -0,0 +1,12 @@
+.CardGrid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin: 0 -1%;
+}
+
+.CardGrid:after {
+  /* Display the last row properly: https://stackoverflow.com/a/34816625 */
+  content: "";
+  flex: auto;
+}

src/components/Card/CardGrid.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import "./CardGrid.css";
+
+export interface ICardGridProps {
+  className?: string;
+  children?: React.ReactChildren | React.ReactNode | string;
+}
+
+class CardGrid extends React.Component<ICardGridProps> {
+  public render() {
+    return (
+      <div className={`CardGrid padding-v-big ${this.props.className}`}>{this.props.children}</div>
+    );
+  }
+}
+
+export default CardGrid;

src/components/Card/CardIcon.css

@@ -0,0 +1,10 @@
+.Card__icon {
+  display: flex;
+  height: calc(72px + 2em);
+  align-items: center;
+  justify-content: center;
+}
+
+.Card__icon img {
+  max-height: 72px;
+}

src/components/Card/CardIcon.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+import "./CardIcon.css";
+
+export interface ICardIconProps {
+  icon?: string;
+}
+
+class CardIcon extends React.PureComponent<ICardIconProps> {
+  public render() {
+    const { icon } = this.props;
+
+    return icon && icon !== "" ? (
+      <div className="Card__icon bg-light text-c">
+        <img src={icon} />
+      </div>
+    ) : (
+      ""
+    );
+  }
+}
+
+export default CardIcon;

src/components/Card/index.tsx

@@ -1,44 +1,11 @@
-import * as React from "react";
-import { Link } from "react-router-dom";
-
-import "./Card.css";
-
-export interface ICardProps {
-  header: string | JSX.Element | JSX.Element[];
-  body: string | JSX.Element | JSX.Element[];
-  button?: JSX.Element;
-  buttonText?: string | JSX.Element;
-  onClick?: () => (...args: any[]) => Promise<any>;
-  linkTo?: string;
-  notes?: string | JSX.Element;
-  icon?: string;
-}
-
-export const CardContainer = (props: any) => {
-  return <div className="CardContainer">{props.children}</div>;
-};
-
-export const Card = (props: ICardProps) => {
-  const { header, body, buttonText, onClick, linkTo, notes, icon } = props;
-  let button = props.button ? (
-    props.button
-  ) : (
-    <button onClick={onClick} className="button button-primary" style={{ width: "fit-content" }}>
-      {buttonText}
-    </button>
-  );
-  if (linkTo) {
-    button = <Link to={linkTo}>{button}</Link>;
-  }
-  return (
-    <div className="Card">
-      <h5 className="Card__header">{header}</h5>
-      <div className="Card__body">{body}</div>
-      <div className="Card__notes">{notes}</div>
-      <div className="Card__button">{button}</div>
-      <div className="Card__icon">
-        <img className="Card__img" src={icon} />
-      </div>
-    </div>
-  );
-};
+import Card from "./Card";
+import CardContent from "./CardContent";
+import CardFooter from "./CardFooter";
+import CardGrid from "./CardGrid";
+import CardIcon from "./CardIcon";
+
+export { CardContent };
+export { CardFooter };
+export { CardGrid };
+export { CardIcon };
+export default Card;

src/components/ChartList/ChartList.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { IChartState } from "../../shared/types";
-import "./ChartList.css";
+import { CardGrid } from "../Card";
 import ChartListItem from "./ChartListItem";
 
 interface IChartListProps {
@@ -24,9 +24,7 @@ class ChartList extends React.Component<IChartListProps> {
           <h1>Charts</h1>
           <hr />
         </header>
-        <main className="text-c">
-          <div className="ChartList__items">{chartItems}</div>
-        </main>
+        <CardGrid>{chartItems}</CardGrid>
       </section>
     );
   }

src/components/ChartList/ChartListItem.css

@@ -1,3 +1,36 @@
 .ChartListItem {
-  width: 250px;
+  color: #1c2b39;
+}
+
+.ChartListItem__content {
+  display: flex;
+  justify-content: space-between;
+}
+
+.ChartListItem__content__title {
+  /* Avoid 3 line elements */
+  word-break: break-all;
+  flex: 1;
+  font-size: 1.1em;
+  font-weight: bold;
+  margin: 0;
+}
+
+.ChartListItem__content__info {
+  margin: 0.15em 0 0 0.625em;
+}
+
+.ChartListItem__content__repo {
+  background-color: #1c2b39;
+  border-radius: 16px;
+  color: #fff;
+  display: inline-block;
+}
+
+.ChartListItem__content__repo.stable {
+  background-color: #1598cb;
+}
+
+.ChartListItem__content__repo.incubator {
+  background-color: #f58220;
 }