Working on HeaderCardV2 and stories for that and the original HeaderCard

package.json

@@ -30,6 +30,7 @@
     "husky": "^9.1.7",
     "lint-staged": "^15.2.10",
     "nx": "19.7.3",
+    "prettier": "^2.8.8",
     "rimraf": "^5.0.5",
     "typescript": "5.5.2",
     "typescript-eslint": "^8.16.0"

packages/synapse-react-client/src/components/HeaderCard.stories.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import HeaderCard from './HeaderCard'
+import type { HeaderCardProps } from './HeaderCard'
+import { Study } from '../assets/themed_icons'
+
+const meta = {
+  title: 'Synapse/HeaderCard',
+  component: HeaderCard,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} as Meta<typeof HeaderCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    type: 'Standard',
+    title: 'Example Study',
+    description:
+      'This is an example study description that demonstrates the HeaderCard component.',
+    values: [
+      ['Status', 'Active'],
+      ['Data Type', 'Genomics'],
+      ['Access', 'Public'],
+    ],
+    secondaryLabelLimit: 3,
+    isAlignToLeftNav: false,
+    descriptionConfig: {
+      showFullDescriptionByDefault: true,
+    },
+    icon: <Study />,
+  },
+}
+
+export const WithSubtitle: Story = {
+  args: {
+    ...Default.args,
+    title: 'Study With Subtitle',
+    subTitle: 'Principal Investigator: John Doe',
+  },
+}
+
+export const Dicom: Story = {
+  args: {
+    ...Default.args,
+    title: 'DICOM',
+    description:
+      'Radiology imaging, including templates for narrative reports and machine-generated output. DICOM® — Digital Imaging and Communications in Medicine — is the international standard for medical images and related information. It defines the formats for medical images that can be exchanged with the data and quality necessary for clinical use.',
+    values: [
+      ['AUTHOR NAME', 'DICOM (@dicom)'],
+      ['LAT UPDATED', '2024-01-01'],
+      ['BASED ON', 'None'],
+    ],
+  },
+}

packages/synapse-react-client/src/components/HeaderCard.tsx

@@ -1,6 +1,6 @@
+import { useState, useEffect } from 'react'
 import { CardFooter } from './row_renderers/utils'
 import { DescriptionConfig } from './CardContainerLogic'
-import { useState, useEffect } from 'react'
 import { CollapsibleDescription } from './GenericCard/CollapsibleDescription'
 
 export type HeaderCardProps = {

packages/synapse-react-client/src/components/HeaderCard/HeaderCard.stories.tsx

@@ -0,0 +1,144 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import HeaderCard from './HeaderCardV2'
+import type { HeaderCardProps } from './HeaderCardV2'
+import { Study } from '../../assets/themed_icons'
+import { LaunchOutlined } from '@mui/icons-material'
+
+const meta = {
+  title: 'Synapse/HeaderCardV2',
+  component: HeaderCard,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof HeaderCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    type: 'defaultType',
+    title: 'Default HeaderCard',
+    description: 'This is a default header card',
+    values: [
+      ['Label 1', 'Value 1'],
+      ['Label 2', 'Value 2'],
+      ['Label 3', 'Value 3'],
+    ],
+    secondaryLabelLimit: 3,
+    isAlignToLeftNav: false,
+    descriptionConfig: {
+      showFullDescriptionByDefault: true,
+    },
+    icon: <Study />,
+  },
+}
+
+export const DicomCard: Story = {
+  args: {
+    type: 'DICOM',
+    title: 'DICOM',
+    description:
+      'Radiology imaging, including templates for narrative reports and machine-generated output. DICOM® — Digital Imaging and Communications in Medicine — is the international standard for medical images and related information. It defines the formats for medical images that can be exchanged with the data and quality necessary for clinical use.',
+    values: [
+      ['AUTHOR NAME', 'DICOM (@dicom)'],
+      ['LAST UPDATED', '2024-01-01'],
+      ['BASED ON', 'None'],
+    ],
+    icon: <Study />,
+    ctaButtons: [
+      {
+        label: 'View Standard on External Website',
+        variant: 'outlined',
+        href: 'https://dicom.nema.org/',
+        target: '_blank',
+        endIcon: <LaunchOutlined />,
+        sx: { borderRadius: 1 },
+      },
+    ],
+  },
+}
+
+export const WithMultipleButtons: Story = {
+  args: {
+    ...DicomCard.args,
+    title: 'DICOM with Multiple Actions',
+    ctaButtons: [
+      {
+        label: 'View Standard on External Website',
+        variant: 'outlined',
+        href: 'https://dicom.nema.org/',
+        target: '_blank',
+        endIcon: <LaunchOutlined />,
+        sx: { borderRadius: 1 },
+      },
+      {
+        label: 'Download Documentation',
+        variant: 'contained',
+        href: '#',
+        sx: { borderRadius: 1 },
+      },
+      {
+        label: 'View Examples',
+        variant: 'outlined',
+        href: '#',
+        sx: { borderRadius: 1 },
+      },
+    ],
+  },
+}
+
+export const WithStackedLayout: Story = {
+  args: {
+    ...DicomCard.args,
+    title: 'DICOM with Stacked Layout',
+    forceStackedLayout: true,
+    values: [
+      ['AUTHOR NAME', 'DICOM (@dicom)'],
+      ['LAST UPDATED', '2024-01-01'],
+      ['BASED ON', 'None'],
+      [
+        'VERY LONG LABEL',
+        'This is a very long value that demonstrates why we might want to force a stacked layout. It contains lots of text that would be hard to read in a side-by-side layout.',
+      ],
+      [
+        'ANOTHER LONG ONE',
+        'More extensive content that benefits from the full width of the card when displayed in a stacked layout.',
+      ],
+    ],
+  },
+}
+
+export const StudyHeaderCardV2: Story = {
+  args: {
+    type: 'Study',
+    title: 'Synodos NF2',
+    subTitle: 'Jaishri Blakeley, D. Wade Clapp, James Gusella, Scott Plotkin',
+    description:
+      'Synodos for NF2 is a first-of-its-kind neurofibromatosis research collaboration dedicated to defeating the rare genetic disorder neurofibromatosis type 2 (NF2)...',
+    values: [
+      ['Study Status', 'Completed'],
+      ['Data Status', 'Available'],
+      ['Disease Focus', 'Neurofibromatosis type 2'],
+      ['Manifestation', 'Schwannoma, Meningioma'],
+      ['Funding Agency', 'CTF'],
+      [
+        'Institutions',
+        "Johns Hopkins Medicine, Indiana University, Massachusetts General Hospital, Harvard Medical School, University of Central Florida, FLI-Leibniz-Germany, University of North Carolina, Ohio State University, Sage Bionetworks, Children's Tumor Foundation",
+      ],
+      ['On Synapse', 'syn2343195'],
+      [
+        'Grant DOI',
+        'https://doi.org/10.48105/pc.gr.88541, https://doi.org/10.48105/pc.gr.88552',
+      ],
+    ],
+    secondaryLabelLimit: 8,
+    isAlignToLeftNav: false,
+    descriptionConfig: {
+      showFullDescriptionByDefault: true,
+    },
+    icon: <Study />,
+  },
+}