Metadata component #241

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' },
+}))

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' },
+    ],
+  },
+}