Card component

packages/next-templates/src/app/card-component/card-list/page.tsx

@@ -0,0 +1,23 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';
+
+export type CardListProps = HTMLAttributes<HTMLUListElement>;
+
+export const CardList = forwardRef(
+  ({ children, className, ...restProps }: PropsWithChildren<CardListProps>, ref: ForwardedRef<HTMLUListElement>) => (
+    <ul role="list" {...restProps} ref={ref} className={clsx('utrecht-card-list', className)}>
+      {children}
+    </ul>
+  ),
+);
+
+CardList.displayName = 'CardList';
+
+export default function show() {
+  return <CardList>test</CardList>;
+}

packages/next-templates/src/app/card-component/card/index.style.css

@@ -0,0 +1,25 @@
+.utrecht-card-list-item {
+  background-color: var(--utrecht-color-blue-90);
+  max-width: 312px;
+  list-style: none;
+}
+
+.utrecht-card-list-item:hover {
+  --utrecht-link-text-decoration: underline;
+  --utrecht-link-text-decoration-thickness: var(--utrecht-link-hover-text-decoration-thickness);
+
+  cursor: pointer;
+  text-decoration-skip-ink: none;
+}
+
+.utrecht-card-list-item__image {
+  max-width: 100%;
+  object-fit: cover;
+}
+
+.utrecht-card-list-item__content {
+  padding-block-end: 1rem;
+  padding-block-start: 0;
+  padding-inline-end: 1rem;
+  padding-inline-start: 1rem;
+}

packages/next-templates/src/app/card-component/card/page.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { Heading, Link, Paragraph } from '@utrecht/component-library-react';
+import clsx from 'clsx';
+import Image from 'next/image';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import './index.style.css';
+import { CardList } from '../card-list/page';
+import { type } from 'os';
+
+interface CardListItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'children'> {
+  headingLevel: number;
+  title?: string;
+  preHeading?: string;
+  children?: any;
+  imageHeight?: number;
+  imageWidth?: number;
+  imageSrc?: string;
+  imageAlt?: string;
+  href?: string;
+  cardRole?: 'article' | string;
+}
+
+export const CardListItem = ({
+  headingLevel,
+  children,
+  title,
+  preHeading,
+  imageHeight,
+  imageWidth,
+  imageSrc,
+  imageAlt,
+  href,
+  cardRole,
+  ...props
+}: PropsWithChildren<CardListItemProps>) => {
+  const linkRef = React.useRef<HTMLAnchorElement>(null);
+
+  let headingContent: any = title;
+  if (typeof href === 'string') {
+    headingContent = <Link href={href}>{title}</Link>;
+  } else {
+    headingContent;
+  }
+
+  let card = (
+    <div className={'utrecht-card-list-item__content'}>
+      <hgroup>
+        <Heading level={headingLevel} className="utrecht-card-list-item__title">
+          {headingContent}
+        </Heading>
+        {preHeading && <p className="utrecht-card-list-item__pre-heading">{preHeading}</p>}
+      </hgroup>
+      {children}
+    </div>
+  );
+
+  if (cardRole === 'article') {
+    card = (
+      <li
+        {...props}
+        className={clsx('utrecht-card-list-item', props.className)}
+        onClick={() => linkRef.current?.click()}
+      >
+        {imageSrc && imageAlt && (
+          <Image
+            src={imageSrc}
+            alt={imageAlt}
+            height={imageHeight}
+            width={imageWidth}
+            className={'utrecht-card-list-item__image'}
+          />
+        )}
+        <article>{card}</article>
+      </li>
+    );
+  } else {
+    card = (
+      <li
+        {...props}
+        className={clsx('utrecht-card-list-item', props.className)}
+        onClick={() => linkRef.current?.click()}
+      >
+        {imageSrc && imageAlt && (
+          <Image
+            src={imageSrc}
+            alt={imageAlt}
+            height={imageHeight}
+            width={imageWidth}
+            className={'utrecht-card-list-item__image'}
+          />
+        )}
+        {card}
+      </li>
+    );
+  }
+
+  return card;
+};
+export default function Home() {
+  return (
+    <CardList>
+      <CardListItem
+        headingLevel={2}
+        title="test"
+        imageAlt="test"
+        imageSrc="/business_corgi.jpeg"
+        imageWidth={500}
+        imageHeight={300}
+        cardRole="article"
+        preHeading="optional testje"
+      >
+        <Paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ipsum rhoncus, rhoncus nisl eu, sollicitudin
+          erat. Duis posuere bibendum diam, semper iaculis mi varius in. Interdum et malesuada fames ac ante ipsum
+          primis in faucibus. Aliquam erat volutpat.
+        </Paragraph>
+      </CardListItem>
+      <CardListItem
+        headingLevel={2}
+        title="test"
+        imageAlt="test"
+        imageSrc="/business_corgi.jpeg"
+        imageWidth={500}
+        imageHeight={300}
+        href="#"
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ipsum rhoncus, rhoncus nisl eu, sollicitudin
+        erat. Duis posuere bibendum diam, semper iaculis mi varius in. Interdum et malesuada fames ac ante ipsum primis
+        in faucibus. Aliquam erat volutpat.
+      </CardListItem>
+    </CardList>
+  );
+}