Introduce Summary card component

packages/esm-patient-common-lib/src/cards/index.ts

@@ -1 +1,2 @@
 export * from './card-header.component';
+export * from './summary-card.component';

packages/esm-patient-common-lib/src/cards/summary-card.component.tsx

@@ -0,0 +1,64 @@
+/** @module @category UI */
+import React, { useMemo } from 'react';
+import { Tile, Column } from '@carbon/react';
+import styles from './summary-card.scss';
+
+export interface SummaryCardProps {
+  columns: Array<SummaryCardColumn>;
+  headerTitle: string;
+  maxRowItems?: number;
+}
+
+export interface SummaryCardColumn {
+  header: string;
+  value: string;
+  summary?: string;
+}
+
+export const SummaryCard = ({ columns, headerTitle, maxRowItems }: SummaryCardProps) => {
+  const groupedColumns = useMemo(() => {
+    if (maxRowItems && columns.length > maxRowItems) {
+      let groups: SummaryCardColumn[][] = [];
+      for (let i = 0; i < columns.length; i += maxRowItems) {
+        groups.push(columns.slice(i, i + maxRowItems));
+      }
+      return groups;
+    }
+    return [columns];
+  }, [columns, maxRowItems]);
+
+  return (
+    <Tile className={styles.tile}>
+      <div className={styles.cardTitle}>
+        <h4 className={styles.title}> {headerTitle} </h4>
+      </div>
+      {maxRowItems ? (
+        groupedColumns.map((group) => (
+          <Column className={styles.columnContainer}>
+            {group.map((column, index) => (
+              <SummaryItem column={column} key={index} />
+            ))}
+          </Column>
+        ))
+      ) : (
+        <Column className={styles.columnContainer}>
+          {columns.map((column, index) => (
+            <SummaryItem column={column} key={index} />
+          ))}
+        </Column>
+      )}
+    </Tile>
+  );
+};
+
+function SummaryItem({ column }: { column: SummaryCardColumn }) {
+  return (
+    <div className={styles.tileBox}>
+      <div className={styles.tileBoxColumn}>
+        <span className={styles.tileTitle}> {column.header} </span>
+        <span className={styles.tileValue}>{column.value}</span>
+        {column.summary && <span className={styles.tileSummary}>{column.summary}</span>}
+      </div>
+    </div>
+  );
+}

packages/esm-patient-common-lib/src/cards/summary-card.scss

@@ -0,0 +1,93 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.title {
+  @extend .productiveHeading03;
+}
+
+.title:after {
+  content: '';
+  display: block;
+  width: $spacing-08;
+  padding-top: $spacing-01;
+  border-bottom: $spacing-03 solid $brand-teal-01;
+}
+
+.cardTitle {
+  display: flex;
+  justify-content: space-between;
+  padding: spacing.$spacing-04 0 spacing.$spacing-04 spacing.$spacing-05;
+}
+
+.tile {
+  height: 100%;
+  padding: $spacing-01 0 $spacing-06 $spacing-06;
+  margin: $spacing-03;
+  border: solid 1px #e0e0e0;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  background-color: #ffffff;
+}
+
+.tileTitle {
+  @include type.type-style('label-01');
+  display: block;
+}
+
+.columnContainer {
+  margin: 0px 0px $spacing-07 $spacing-07;
+  font-size: 14px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.29;
+  letter-spacing: 0.16px;
+  color: #525252;
+  display: flex;
+  flex-direction: row;
+}
+
+.tileBoxColumn {
+  width: 100%;
+  display: 'flex';
+  flex-direction: 'row';
+}
+
+.tileSubTitle {
+  height: $spacing-06;
+  font-size: $body-compact-01-font-size;
+  line-height: 1.33;
+  letter-spacing: 0.32px;
+  color: #525252;
+  display: block;
+}
+
+.tileValue {
+  display: block;
+  font-size: $productive-heading-03-font-size;
+  line-height: 1.29;
+  color: $text-primary; /* #161616 */
+  margin: $spacing-05 $spacing-11 $spacing-07 0;
+}
+
+.tabletTileTitle {
+  margin: 0px 0px $spacing-03 $spacing-07;
+  font-size: $body-compact-01-font-size;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.29;
+  letter-spacing: 0.16px;
+  color: $text-secondary; /* #525252 */
+  display: flex;
+  flex-direction: row;
+}
+
+.tileBox {
+  width: 25%;
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+}