From 6ebb5fd061ed1cec4cc35c844dddf87aa1bb7889 Mon Sep 17 00:00:00 2001
From: "Justin B. Yee" <jbyee2015@gmail.com>
Date: Wed, 19 Mar 2025 13:08:45 -0700
Subject: [PATCH] Implemented Metadata component and stories.
---
app/components/metadata.js | 46 ++++++++++++++++++++++++++
stories/metadata.stories.js | 65 +++++++++++++++++++++++++++++++++++++
2 files changed, 111 insertions(+)
create mode 100644 app/components/metadata.js
create mode 100644 stories/metadata.stories.js
diff --git a/app/components/metadata.js b/app/components/metadata.js
new file mode 100644
index 000000000..c583f716e
--- /dev/null
+++ b/app/components/metadata.js
@@ -0,0 +1,46 @@
+// https://github.com/EnCiv/civil-pursuit/issues/241
+
+import React from 'react'
+import { createUseStyles } from 'react-jss'
+import cx from 'classnames'
+
+export default function Metadata(props) {
+ const { className, title, child, data, ...otherProps } = props
+ const classes = useStylesFromThemeFunction(props)
+
+ return (
+ <div className={cx(classes.container, className)} {...otherProps}>
+ {child && <div className={cx(classes.child, className)}>{child}</div>}
+ <div className={cx(classes.table, className)}>
+ <tr>
+ <td className={cx(classes.title, className)}>{title}</td>
+ </tr>
+ {data?.map(field => (
+ <tr>
+ <td className={cx(classes.label, className)}>{field.label}</td>
+ <td className={cx(classes.value, className)}>{field.value}</td>
+ </tr>
+ ))}
+ </div>
+ </div>
+ )
+}
+
+const useStylesFromThemeFunction = createUseStyles(theme => ({
+ container: {
+ borderRadius: '1.875rem',
+ border: `0.0625rem solid ${theme.colors.secondaryDivider}`,
+ backgroundColor: 'rgba(235, 235, 235, 0.4)',
+ boxSizing: 'border-box',
+ flexDirection: 'column',
+ padding: '1.25rem',
+ [`@media (max-width: ${theme.condensedWidthBreakPoint})`]: {
+ borderRadius: '0',
+ },
+ },
+ child: { paddingBottom: '1rem' },
+ table: { fontSize: '0.8rem', borderCollapse: 'separate', borderSpacing: '2.25rem 1rem', marginLeft: '-2.25rem' },
+ title: { fontWeight: 'bold', paddingBottom: '0.375rem' },
+ label: { fontWeight: 'bold', color: theme.colors.encivGray },
+ value: { fontWeight: 'bold' },
+}))
diff --git a/stories/metadata.stories.js b/stories/metadata.stories.js
new file mode 100644
index 000000000..dc9e8743d
--- /dev/null
+++ b/stories/metadata.stories.js
@@ -0,0 +1,65 @@
+// https://github.com/EnCiv/civil-pursuit/issues/241
+
+import React from 'react'
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import { onDoneDecorator, onDoneResult } from './common'
+import Metadata from './../app/components/metadata'
+import Point from '../app/components/point'
+
+export default {
+ component: Metadata,
+ args: {},
+ decorators: [onDoneDecorator],
+ parameters: {
+ viewport: {
+ viewports: INITIAL_VIEWPORTS,
+ },
+ },
+}
+
+const pointDoc = {
+ subject: 'Phasellus diam sapien, placerat id sollicitudin eget',
+ description: 'Cras porttitor quam eros, vel auctor magna consequat vitae. Donec condimentum ac libero mollis tristique.',
+ demInfo: { dob: '1990-10-20T00:00:00.000Z', state: 'NY', party: 'Independent' },
+}
+
+export const Empty = {
+ args: {},
+}
+
+export const NoChild = {
+ args: {
+ title: 'View Dates',
+ data: [
+ { label: 'Created', value: 'Sep 16, 2024' },
+ { label: 'Last Accessed', value: 'Jan 29, 2023' },
+ { label: 'Last Modified', value: 'Oct 7, 2022' },
+ ],
+ },
+}
+
+export const ThreeRowsWithChild = {
+ args: {
+ child: <Point point={pointDoc} />,
+ title: 'View Dates',
+ data: [
+ { label: 'Created', value: 'Sep 16, 2024' },
+ { label: 'Last Accessed', value: 'Jan 29, 2023' },
+ { label: 'Last Modified', value: 'Oct 7, 2022' },
+ ],
+ },
+}
+
+export const FiveRowsWithChild = {
+ args: {
+ child: <Point point={pointDoc} />,
+ title: 'Statistics',
+ data: [
+ { label: 'Viewed', value: '143,494 times' },
+ { label: 'Published', value: 'Last week' },
+ { label: 'Created', value: 'Sep 16, 2024' },
+ { label: 'Last Accessed', value: 'Jan 29, 2023' },
+ { label: 'Last Modified', value: 'Oct 7, 2022' },
+ ],
+ },
+}