Add card component and story

Author: itsamoreh

components/molecules/Card/Card.js

@@ -0,0 +1,90 @@
+import Button from '@/components/atoms/Button'
+import Heading from '@/components/atoms/Heading'
+import cn from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import styles from './Card.module.css'
+
+/**
+ * Render the Card component.
+ *
+ * @param {object} props           Card component props.
+ * @param {string} props.body      Card body text.
+ * @param {string} props.className Optional classNames.
+ * @param {string} props.ctaText   The text for the cta button.
+ * @param {string} props.ctaUrl    The url for the cta button.
+ * @param {object} props.image     The image object.
+ * @param {string} props.meta      The card metadata string.
+ * @param {string} props.timestamp The card timestamp.
+ * @param {string} props.title     The card title.
+ * @return {Element}               The Card component.
+ */
+export default function Card({
+  body,
+  className,
+  ctaText,
+  ctaUrl,
+  image,
+  meta,
+  timestamp,
+  title
+}) {
+  return (
+    <div className={cn(styles.card, className)}>
+      <div className={styles.image}>
+        {image && image.sourceUrl && (
+          <img
+            draggable="false"
+            src={image.sourceUrl}
+            alt={`${image.altText ?? title}`}
+            loading="lazy"
+            height={image.height}
+            width={image.width}
+          />
+        )}
+      </div>
+      <div className={styles.content}>
+        {meta && <p className={styles.meta}>{meta}</p>}
+        {title && <Heading className={styles.title}>{title}</Heading>}
+        {body && <p className={styles.body}>{body}</p>}
+      </div>
+      <div className={styles.footer}>
+        {timestamp && (
+          <p className={styles.timestamp}>
+            <time>{timestamp}</time>
+          </p>
+        )}
+        {ctaText && ctaUrl && (
+          <Button
+            className={styles.button}
+            url={ctaUrl}
+            text={ctaText}
+            type="secondary"
+            size="md"
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+Card.propTypes = {
+  body: PropTypes.string,
+  className: PropTypes.string,
+  ctaText: PropTypes.string,
+  ctaUrl: PropTypes.string,
+  headingLevel: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+  image: PropTypes.shape({
+    sourceUrl: PropTypes.string,
+    altText: PropTypes.string,
+    height: PropTypes.string,
+    width: PropTypes.string
+  }),
+  meta: PropTypes.string,
+  title: PropTypes.string,
+  timestamp: PropTypes.string
+}
+
+Card.defaultProps = {
+  headingLevel: 'h2'
+}

components/molecules/Card/Card.module.css

@@ -0,0 +1,35 @@
+.card {
+  @apply flex flex-col;
+
+  & .image {
+    @apply mb-2 relative h-0 w-full rounded;
+
+    padding-top: 64%; /* Aspect ratio box - https://css-tricks.com/aspect-ratio-boxes */
+
+    & img {
+      @apply absolute top-0 left-0 w-full h-full object-cover rounded;
+    }
+  }
+
+  & .content {
+    & .meta {
+      @apply mb-2 text-sm;
+    }
+
+    & .title {
+      @apply mb-2 font-bold;
+    }
+
+    & .body {
+      @apply mb-2;
+    }
+  }
+
+  & .footer {
+    @apply mt-auto flex justify-between items-center;
+
+    & .timestamp {
+      @apply text-sm;
+    }
+  }
+}

components/molecules/Card/Card.stories.mdx

@@ -0,0 +1,25 @@
+import {Canvas, Meta, Story} from '@storybook/addon-docs/blocks'
+import Card from './'
+
+<Meta title="Components/Molecules/Card" component={Card} />
+
+# Card
+
+Use this component to display a card.
+
+<Canvas>
+  <Story name="Card">
+    <Card
+      image={{
+        sourceUrl:
+          'https://images.unsplash.com/photo-1610991149688-c1321006bcc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1110&q=60'
+      }}
+      meta="This is the meta"
+      title="This is the card title"
+      body="This is the card body"
+      timestamp="May 29, 2021"
+      ctaText="Click Here!"
+      ctaUrl="https://google.com"
+    />
+  </Story>
+</Canvas>

components/molecules/Card/index.js

@@ -0,0 +1 @@
+export {default} from './Card.js'