Feature/#79 cards case

.github/workflows/cicd.yml

@@ -42,7 +42,7 @@ jobs:
 
       - name: build storybook
         run: yarn build-storybook
-        
+
       - name: Run Cypress component tests
         uses: cypress-io/github-action@v2
         with:

src/components/Card/package.json

@@ -18,7 +18,7 @@
         "dist"
     ],
     "scripts": {
-        "build": "tsc -b",
+        "build": "tsc -b && copyfiles -u 1 \"src/**/*.css\" dist",
         "clean": "yarn rimraf dist tsconfig.tsbuildinfo"
     },
     "dependencies": {
@@ -29,10 +29,7 @@
         "react": "^17.0.1"
     },
     "devDependencies": {
-        "@gemeente-denhaag/avatar": "*",
-        "@gemeente-denhaag/iconbutton": "*",
-        "@gemeente-denhaag/icons": "*",
-        "@gemeente-denhaag/typography": "*"
+        "@gemeente-denhaag/icons": "*"
     },
     "gitHead": "dcf72a9b79266c1ebede35aff4a02dd9121a980f"
 }

src/components/Card/src/Card/Card.tsx

@@ -0,0 +1,110 @@
+import React, { createRef } from 'react';
+import MaterialCard from '@material-ui/core/Card';
+import { StylesProvider } from '@material-ui/core/styles';
+import { ArrowRightIcon } from '@gemeente-denhaag/icons';
+import BaseProps from '@gemeente-denhaag/baseprops';
+import './mui-override.css';
+import './card.css';
+import { Typography } from '@material-ui/core';
+import { cardClasses, cardArrowClasses, cardTitleClasses, cardSubtitleClasses, cardCaseClasses } from './bem-mapping';
+import { CardContent } from '../CardContent/CardContent';
+import { CardActions } from '../CardActions/CardActions';
+import { Icon } from '@material-ui/core';
+
+export interface CardProps extends BaseProps {
+  /**
+   * Callback fired when the Card is clicked.
+   */
+  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+
+  /**
+   * Determines the variant of the card
+   * Variant can be either `basic` or `case`
+   */
+  variant?: 'basic' | 'case';
+
+  /**
+   * Determines the title of the card
+   */
+  title: string;
+
+  /**
+   * Determines the subtitle of the card
+   */
+  subTitle?: string;
+
+  /**
+   * Determines the date shown on the card
+   */
+  date: Date;
+
+  /**
+   * Determines the url the card points to
+   */
+  href: string;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Card: React.FC<CardProps> = (props: CardProps) => {
+  let classes;
+  const arrowClasses = cardArrowClasses;
+  const titleClasses = cardTitleClasses;
+  const subtitleClasses = cardSubtitleClasses;
+  const linkRef = createRef<HTMLAnchorElement>();
+
+  const title = (
+    <a href={props.href} ref={linkRef}>
+      {props.title}
+    </a>
+  );
+
+  const onClick = () => {
+    if (linkRef.current !== null) {
+      linkRef.current.click();
+    }
+  };
+
+  switch (props.variant) {
+    case 'case':
+      classes = cardCaseClasses;
+      break;
+    case 'basic':
+    default:
+      classes = cardClasses;
+  }
+
+  return (
+    <StylesProvider injectFirst>
+      <MaterialCard classes={classes} onClick={onClick}>
+        <div className="denhaag-card__wrapper">
+          <div className="denhaag-card__background"></div>
+          <CardContent>
+            <div className="denhaag-card__text-wrapper">
+              <Typography classes={titleClasses} component="p">
+                {title}
+              </Typography>
+              <Typography classes={subtitleClasses} component="p">
+                {props.subTitle}
+              </Typography>
+            </div>
+            <CardActions disableSpacing={true}>
+              <Typography component="div" classes={subtitleClasses}>
+                <time dateTime={props.date.toDateString()}>{props.date.toLocaleDateString()}</time>
+              </Typography>
+              <Icon classes={arrowClasses} aria-label="ArrowRightIcon">
+                <ArrowRightIcon />
+              </Icon>
+            </CardActions>
+          </CardContent>
+        </div>
+      </MaterialCard>
+    </StylesProvider>
+  );
+};
+
+/**
+ * Default export for Card
+ */
+export default Card;

src/components/Card/src/Card/bem-mapping.jsx

@@ -0,0 +1,23 @@
+export const cardClasses = {
+  root: 'denhaag-card',
+};
+
+export const cardArrowClasses = {
+  root: 'denhaag-card__arrow',
+};
+
+export const cardTitleClasses = {
+  root: 'denhaag-card__title',
+};
+
+export const cardSubtitleClasses = {
+  root: 'denhaag-card__subtitle',
+};
+
+export const cardPaperClasses = {
+  root: 'denhaag-card__paper',
+};
+
+export const cardCaseClasses = {
+  root: 'denhaag-card denhaag-card--case',
+};