update Summary to TS and Vitest

src/ui/Summary/Summary.stories.tsx

@@ -0,0 +1,53 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import Summary from './Summary'
+
+import TotalsNumber from '../TotalsNumber'
+
+const meta: Meta<typeof Summary> = {
+  title: 'Components/Summary',
+  component: Summary,
+}
+
+export default meta
+
+type Story = StoryObj<typeof Summary>
+
+export const DefaultSummary: Story = {
+  args: {
+    fields: [
+      {
+        name: 'sample title',
+        title: 'Sample title',
+        value: <span>Fancy markup</span>,
+      },
+    ],
+  },
+}
+
+export const SummaryManyFields: Story = {
+  args: {
+    fields: [
+      {
+        name: 'Head',
+        title: (
+          <>
+            <span>HEAD</span>
+            <span className="text-ds-gray-octonary">fc43199</span>
+          </>
+        ),
+        value: <TotalsNumber value={39.67} plain large />,
+      },
+      {
+        name: 'patch',
+        title: 'Patch',
+        value: <TotalsNumber value={83.43} plain large />,
+      },
+      {
+        name: 'change',
+        title: 'Change',
+        value: <TotalsNumber value={27.36} showChange large />,
+      },
+    ],
+  },
+}

src/ui/Summary/Summary.spec.jsx → src/ui/Summary/Summary.test.tsx

@@ -1,44 +1,40 @@
 import { render, screen } from '@testing-library/react'
 
-import Summary from '.'
+import Summary from './Summary'
 
 describe('Summary', () => {
-  let container
-
-  function setup({ fields }) {
-    ;({ container } = render(<Summary fields={fields} />))
-  }
-
-  it('doesnt render anything when fields array is empty', () => {
-    const fields = []
-    setup({ fields })
+  it('does not render anything when fields array is empty', () => {
+    const fields: any[] = []
+    const { container } = render(<Summary fields={fields} />)
 
     expect(container).toBeEmptyDOMElement()
   })
 
   it('renders a summary field for every field provided', () => {
     const fieldOne = {
-      name: 'firstfield',
+      name: 'firstField',
       title: 'random title',
       value: 'random value',
     }
     const fieldTwo = {
-      name: 'secondfield',
+      name: 'secondField',
       title: <span>Fancy title</span>,
       value: <span>Fancy value</span>,
     }
     const fields = [fieldOne, fieldTwo]
-    setup({ fields })
+    const { container } = render(<Summary fields={fields} />)
 
     expect(container).not.toBeEmptyDOMElement()
 
     const fieldOneTitle = screen.getByText('random title')
     expect(fieldOneTitle).toBeInTheDocument()
+
     const fieldOneValue = screen.getByText('random value')
     expect(fieldOneValue).toBeInTheDocument()
 
     const fieldTwoTitle = screen.getByText('Fancy title')
     expect(fieldTwoTitle).toBeInTheDocument()
+
     const fieldTwoValue = screen.getByText('Fancy value')
     expect(fieldTwoValue).toBeInTheDocument()
   })

src/ui/Summary/Summary.tsx

@@ -0,0 +1,36 @@
+// Summary on Commit Detail and Compare using a config object instead of composition
+// The newer preferred way is to import the Summary root and field yourself per implementation.
+//
+// TODO: Update Commit Detail and Compare pages to use the composable summary components instead.
+
+interface Fields {
+  name: string
+  title?: React.ReactNode
+  value: React.ReactNode
+}
+
+interface SummaryProps {
+  fields?: Fields[]
+}
+
+const Summary: React.FC<SummaryProps> = ({ fields }) => {
+  return fields && fields.length > 0 ? (
+    <div className="flex flex-wrap items-start justify-start gap-8 md:flex-nowrap">
+      {fields.map(({ name, title, value }) => {
+        // Below changes is the original SummaryField markup
+        return value ? (
+          <div key={name} className="flex flex-col justify-center gap-1">
+            {title ? (
+              <h4 className="flex gap-2 font-mono text-xs text-ds-gray-quinary">
+                {title}
+              </h4>
+            ) : null}
+            {value ? <div className="text-xl font-light">{value}</div> : null}
+          </div>
+        ) : null
+      })}
+    </div>
+  ) : null
+}
+
+export default Summary