(feat) O3-3773 Support Summary Tiles component in esm-styleguide commons-lib

packages/framework/esm-styleguide/src/tile/index.ts

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

packages/framework/esm-styleguide/src/tile/summary-card-component.tsx

@@ -0,0 +1,63 @@
+import React, { useMemo } from 'react';
+import { Tile, Column } from '@carbon/react';
+import styles from './tile.scss';
+
+export interface SummaryCardProps {
+  columns: Array<SummaryCardColumn>;
+  headerTitle: string;
+  maxRowItems?: number;
+}
+
+export interface SummaryCardColumn {
+  header: string;
+  value: string;
+  summary?: string;
+}
+
+export const SummaryCard: React.FC<SummaryCardProps> = ({ 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) => (
+              <SummaryItem column={column} />
+            ))}
+          </Column>
+        ))
+      ) : (
+        <Column className={styles.columnContainer}>
+          {columns.map((column) => (
+            <SummaryItem column={column} />
+          ))}
+        </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/framework/esm-styleguide/src/tile/tile.scss

@@ -0,0 +1,112 @@
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '../root.scss';
+
+.title {
+  @extend .productiveHeading03;
+}
+
+.cardTitle {
+  display: flex;
+  justify-content: space-between;
+  padding: spacing.$spacing-04 0 spacing.$spacing-04 spacing.$spacing-05;
+}
+
+.cardTitle > h4:after {
+  content: '';
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid $brand-teal-01;
+}
+
+.tile {
+  height: 100%;
+  padding: 1px 0 16px 16px;
+  margin: 0.5rem;
+  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 20px 20px;
+  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';
+}
+
+.widgetContainer {
+  background-color: $ui-background;
+}
+
+.newServiceEnrolmentBtn {
+  margin-bottom: 0.5em;
+  text-align: right;
+}
+
+.newServiceEnrolmentBtn > button {
+  background-color: $ui-background;
+}
+
+.widgetContainer :global(.cds--data-table) thead th button span {
+  height: unset !important;
+}
+
+.tileSubTitle {
+  height: 16px;
+  font-size: 16px;
+  line-height: 1.33;
+  letter-spacing: 0.32px;
+  color: #525252;
+  display: block;
+}
+
+.tileValue {
+  display: block;
+  font-size: 20px;
+  line-height: 1.29;
+  color: #161616;
+  display: block;
+  margin: 15px 65px 24px 0;
+}
+
+.tabletTileTitle {
+  margin: 0px 0px 10px 20px;
+  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;
+}
+
+.tileBox {
+  width: 25%;
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+}