@popsure/dirty-swan 0.66.12 → 0.66.14

package/src/lib/components/table/components/TableContents/TableContents.tsx

@@ -1,7 +1,6 @@
 import { MutableRefObject, useCallback, useRef, useState } from 'react';
 import { TableSection } from '../TableSection/TableSection';
 import { ChevronDownIcon, ChevronUpIcon } from '../../../icon';
-import { Card } from '../../../cards/card';
 
 import styles from './TableContents.module.scss';
 import classNames from 'classnames';
@@ -25,6 +24,7 @@ export interface TableContentsProps {
   title: string;
   cellReplacements?: CellReplacements;
   imageComponent?: (args: any) => JSX.Element;
+  selectedColumn?: number;
 }
 
 const TableContents = ({
@@ -43,6 +43,7 @@ const TableContents = ({
   title,
   cellReplacements,
   imageComponent,
+  selectedColumn,
 }: TableContentsProps) => {
   const [isSectionOpen, setOpenSection] = useState<number | null>(null);
   const lastToggledSection = useRef<number | null>(null);
@@ -96,35 +97,40 @@ const TableContents = ({
         const result = (isFirstSection || isVisible) && (
           <div key={index} ref={(el) => { sectionRefs.current[index] = el; }}>
             {section?.title && (
-              <div className={styles.cardWrapper}>
-                <div className={classNames(styles.card, 'p0')}>
-                  <Card
-                    actionIcon={
-                      isExpanded ? (
-                        <ChevronUpIcon size={24} />
-                      ) : (
-                        <ChevronDownIcon size={24} />
-                      )
-                    }
-                    aria-expanded={isExpanded ? 'true' : 'false'}
-                    aria-hidden
-                    classNames={{
-                      wrapper: 'pl16',
-                      buttonWrapper: styles.cardButton,
-                      icon: classNames(styles.cardIcon, 'tc-neutral-900'),
-                    }}
-                    dropShadow={false}
-                    icon={renderedIcon}
-                    title={section.title}
-                    titleVariant="medium"
-                    variant="primary"
-                    {...(collapsibleSections
-                      ? {
-                          onClick: () => handleToggleSection(index),
-                        }
-                      : {})}
-                  />
-                </div>
+              <div className={styles.sectionButtonWrapper}>
+                {collapsibleSections ? (
+                  <button
+                    type="button"
+                    aria-expanded={isExpanded}
+                    className={classNames(
+                      'd-flex ai-center jc-between ta-left bg-white',
+                      styles.sectionButton
+                    )}
+                    onClick={() => handleToggleSection(index)}
+                  >
+                    <span className="d-flex ai-center gap8">
+                      {renderedIcon}
+                      <span className="p-h3">{section.title}</span>
+                    </span>
+                    {isExpanded ? (
+                      <ChevronUpIcon size={20} />
+                    ) : (
+                      <ChevronDownIcon size={20} />
+                    )}
+                  </button>
+                ) : (
+                  <div
+                    className={classNames(
+                      'd-flex ai-center jc-between ta-left bg-white',
+                      styles.sectionButton
+                    )}
+                  >
+                    <span className="d-flex ai-center gap8">
+                      {renderedIcon}
+                      <span className="p-h3">{section.title}</span>
+                    </span>
+                  </div>
+                )}
               </div>
             )}
 
@@ -133,7 +139,9 @@ const TableContents = ({
               onTransitionEnd={() => handleScrollToSection(index)}
             >
               <TableSection
-                className={classNames(className, 'mb24')}
+                className={classNames(className, 'mb16', {
+                  mt16: !!section?.title,
+                })}
                 tableCellRows={
                   isFirstSection ? rows : [firstHeadRow, ...rows]
                 }
@@ -147,6 +155,7 @@ const TableContents = ({
                 width={tableWidth}
                 cellReplacements={cellReplacements}
                 imageComponent={imageComponent}
+                selectedColumn={selectedColumn}
               />
             </Collapsible>
           </div>

package/src/lib/components/table/components/TableSection/TableSection.module.scss

@@ -4,7 +4,9 @@
 .table {
   border-collapse: collapse;
   table-layout: fixed;
+}
 
+.tableMultiplePlans {
   @include p-size-tablet {
     min-width: 845px;
   }
@@ -12,4 +14,9 @@
 
 .tr {
   min-height: 72px;
+  border-bottom: 1px solid $ds-neutral-300;
+
+  &:last-child {
+    border-bottom: none;
+  }
 }

package/src/lib/components/table/components/TableSection/TableSection.tsx

@@ -23,6 +23,7 @@ export interface TableSectionProps {
   width?: number | string;
   cellReplacements?: CellReplacements;
   imageComponent?: (args: any) => JSX.Element;
+  selectedColumn?: number;
 }
 
 const TableSection = ({
@@ -36,10 +37,21 @@ const TableSection = ({
   width,
   cellReplacements,
   imageComponent,
+  selectedColumn,
 }: TableSectionProps) => {
   const headerRow = tableCellRows?.[0];
   const isBelowDesktop = useMediaQuery('BELOW_DESKTOP');
 
+  const firstVisibleBodyRowIndex = tableCellRows.findIndex(
+    (_, index) => index > 0 && !hideRows.includes(index)
+  );
+
+  const lastVisibleRowIndex = tableCellRows.reduce(
+    (last, row, index) =>
+      index > 0 && !hideRows.includes(index) && row.length > 1 ? index : last,
+    -1
+  );
+
   const getModalTitleFromColumnHeader = (cellIndex: number) => {
     const firstCellInColumn = tableCellRows?.[0]?.[cellIndex];
     let titleFromColumn;
@@ -77,9 +89,14 @@ const TableSection = ({
     [hideRows]
   );
 
+  const visibleColumnsLength =
+    headerRow?.filter((_, cellIndex) => isVisibleColumn(cellIndex)).length ?? 0;
+
   return (
     <table
-      className={classNames(className, 'w100', styles.table)}
+      className={classNames(className, 'w100', styles.table, {
+        [styles.tableMultiplePlans]: visibleColumnsLength > 2,
+      })}
       width={width}
     >
       <caption className="sr-only">{title}</caption>
@@ -102,7 +119,7 @@ const TableSection = ({
                   modalTitle:
                     (isBaseCell(tableCellData) && tableCellData.text) ||
                     getModalTitleFromColumnHeader(cellIndex),
-                  align: isFirstCellInRow ? 'left' : 'center',
+                  align: 'left',
                 },
               } as TableCellData;
 
@@ -114,6 +131,8 @@ const TableSection = ({
                     isHeader
                     isFirstCellInRow={isFirstCellInRow}
                     isTopLeftCell={isFirstCellInRow}
+                    isSelectedColumn={selectedColumn === cellIndex}
+                    selectedColumnPosition={selectedColumn === cellIndex ? 'top' : undefined}
                     {...cellProps}
                     imageComponent={imageComponent}
                   />
@@ -133,6 +152,14 @@ const TableSection = ({
                   const key = `${rowIndex}-${cellIndex}`;
                   const isFirstCellInRow = cellIndex === 0;
                   const titleFromRow = getModalTitleFromRowHeader(row);
+                  const isSelected = selectedColumn === cellIndex;
+
+                  const getSelectedColumnPosition = () => {
+                    if (!isSelected) return undefined;
+                    if (rowIndex === lastVisibleRowIndex) return 'bottom';
+                    if (hideHeader && rowIndex === firstVisibleBodyRowIndex) return 'top';
+                    return 'middle';
+                  };
 
                   const cellReplacementData =
                     (tableCellData.cellId &&
@@ -145,7 +172,7 @@ const TableSection = ({
                     ...{
                       openModal,
                       modalTitle: tableCellData?.modalTitle || titleFromRow,
-                      align: isFirstCellInRow ? 'left' : 'center',
+                      align: 'left',
                     },
                   } as TableCellData;
 
@@ -154,6 +181,8 @@ const TableSection = ({
                       <TableCell
                         isBelowDesktop={isBelowDesktop}
                         isFirstCellInRow={isFirstCellInRow}
+                        isSelectedColumn={isSelected}
+                        selectedColumnPosition={getSelectedColumnPosition()}
                         key={key}
                         {...cellProps}
                         imageComponent={imageComponent}

package/src/lib/models/styles.ts

@@ -22,6 +22,7 @@ export type Color = 'transparent' | 'blue-100'
 | 'neutral-100'
 | 'neutral-300'
 | 'neutral-400'
+| 'neutral-500'
 | 'neutral-600'
 | 'neutral-700'
 | 'neutral-800'

package/dist/esm/TableSection-CEhD4eoy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableSection-CEhD4eoy.js","sources":["../../../src/lib/components/table/types.ts","../../../src/lib/components/table/components/TableSection/TableSection.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { BaseCellProps } from './components/TableCell/BaseCell/BaseCell';\nimport { CTACellProps } from './components/TableCell/CTACell/CTACell';\nimport { ButtonCellProps } from './components/TableCell/ButtonCell/ButtonCell';\nimport { CardCellProps } from './components/TableCell/CardCell/CardCell';\n\ntype DefaultCellProps = {\n  cellId?: string;\n  colSpan?: number;\n  modalTitle?: ReactNode;\n};\n\ntype BaseCellData = BaseCellProps & { type?: undefined } & DefaultCellProps;\ntype CTACellData = CTACellProps & { type: 'CTA' } & DefaultCellProps;\ntype ButtonCellData = ButtonCellProps & { type: 'BUTTON' } & DefaultCellProps;\ntype CardCellData = CardCellProps & { type: 'CARD' } & DefaultCellProps;\n\nexport type TableCellData =\n  | BaseCellData\n  | CTACellData\n  | ButtonCellData\n  | CardCellData;\n\nexport const isBaseCell = (\n  tableCellData: TableCellData\n): tableCellData is BaseCellData => {\n  return !tableCellData.type;\n};\n\nexport type TableSectionType = {\n  title?: string;\n  icon?: ReactNode;\n};\n\nexport type ModalData = {\n  title?: ReactNode;\n  body?: ReactNode;\n};\n\nexport type TableCellRowData = TableCellData[];\n\nexport type TableSectionData = {\n  section?: TableSectionType;\n  rows: TableCellRowData[];\n};\n\nexport type TableData = TableSectionData[];\n\nexport type ModalFunction = (modalData: ModalData) => void;\n\nexport type CellReplacements = Record<string, Partial<TableCellData>>;\n","import classNames from 'classnames';\n\nimport styles from './TableSection.module.scss';\nimport { TableCell } from '../TableCell/TableCell';\nimport {\n  CellReplacements,\n  isBaseCell,\n  ModalFunction,\n  TableCellData,\n  TableCellRowData,\n} from '../../types';\nimport { useCallback } from 'react';\nimport { useMediaQuery } from '../../../../hooks/useMediaQuery';\n\nexport interface TableSectionProps {\n  className?: string;\n  tableCellRows: TableCellRowData[];\n  hideColumns?: number[];\n  hideRows?: number[];\n  hideHeader?: boolean;\n  openModal?: ModalFunction;\n  title: string;\n  width?: number | string;\n  cellReplacements?: CellReplacements;\n  imageComponent?: (args: any) => JSX.Element;\n}\n\nconst TableSection = ({\n  className,\n  tableCellRows,\n  hideColumns = [],\n  hideRows = [],\n  hideHeader,\n  openModal,\n  title,\n  width,\n  cellReplacements,\n  imageComponent,\n}: TableSectionProps) => {\n  const headerRow = tableCellRows?.[0];\n  const isBelowDesktop = useMediaQuery('BELOW_DESKTOP');\n\n  const getModalTitleFromColumnHeader = (cellIndex: number) => {\n    const firstCellInColumn = tableCellRows?.[0]?.[cellIndex];\n    let titleFromColumn;\n\n    switch (firstCellInColumn.type) {\n      case 'BUTTON':\n        titleFromColumn = firstCellInColumn.buttonCaption;\n        break;\n      case 'CTA':\n        titleFromColumn = firstCellInColumn.title;\n        break;\n      case undefined:\n        titleFromColumn = firstCellInColumn.text || '';\n        break;\n    }\n\n    return titleFromColumn;\n  };\n\n  const getModalTitleFromRowHeader = (currentRow: TableCellRowData) => {\n    const firstCellInRow = currentRow?.[0];\n    const titleFromRow =\n      (isBaseCell(firstCellInRow) && firstCellInRow.text) || '';\n\n    return titleFromRow;\n  };\n\n  const isVisibleColumn = useCallback(\n    (cellIndex: number) => !hideColumns.includes(cellIndex),\n    [hideColumns]\n  );\n\n  const isVisibleRow = useCallback(\n    (rowIndex: number) => !hideRows.includes(rowIndex),\n    [hideRows]\n  );\n\n  return (\n    <table\n      className={classNames(className, 'w100', styles.table)}\n      width={width}\n    >\n      <caption className=\"sr-only\">{title}</caption>\n\n      {headerRow && (\n        <thead className={hideHeader ? 'sr-only' : ''}>\n          <tr>\n            {headerRow.map((tableCellData, cellIndex) => {\n              const isFirstCellInRow = cellIndex === 0;\n              const cellReplacementData =\n                (tableCellData.cellId &&\n                  cellReplacements?.[tableCellData.cellId]) ||\n                {};\n\n              const cellProps = {\n                ...tableCellData,\n                ...cellReplacementData,\n                ...{\n                  openModal,\n                  modalTitle:\n                    (isBaseCell(tableCellData) && tableCellData.text) ||\n                    getModalTitleFromColumnHeader(cellIndex),\n                  align: isFirstCellInRow ? 'left' : 'center',\n                },\n              } as TableCellData;\n\n              return (\n                isVisibleColumn(cellIndex) && (\n                  <TableCell\n                    key={cellIndex}\n                    isBelowDesktop={isBelowDesktop}\n                    isHeader\n                    isFirstCellInRow={isFirstCellInRow}\n                    isTopLeftCell={isFirstCellInRow}\n                    {...cellProps}\n                    imageComponent={imageComponent}\n                  />\n                )\n              );\n            })}\n          </tr>\n        </thead>\n      )}\n\n      <tbody>\n        {tableCellRows.map(\n          (row, rowIndex) =>\n            rowIndex > 0 && isVisibleRow(rowIndex) && (\n              <tr key={rowIndex} className={styles.tr}>\n                {row.map((tableCellData, cellIndex) => {\n                  const key = `${rowIndex}-${cellIndex}`;\n                  const isFirstCellInRow = cellIndex === 0;\n                  const titleFromRow = getModalTitleFromRowHeader(row);\n\n                  const cellReplacementData =\n                    (tableCellData.cellId &&\n                      cellReplacements?.[tableCellData.cellId]) ||\n                    {};\n\n                  const cellProps = {\n                    ...tableCellData,\n                    ...cellReplacementData,\n                    ...{\n                      openModal,\n                      modalTitle: tableCellData?.modalTitle || titleFromRow,\n                      align: isFirstCellInRow ? 'left' : 'center',\n                    },\n                  } as TableCellData;\n\n                  return (\n                    !hideColumns.includes(cellIndex) && (\n                      <TableCell\n                        isBelowDesktop={isBelowDesktop}\n                        isFirstCellInRow={isFirstCellInRow}\n                        key={key}\n                        {...cellProps}\n                        imageComponent={imageComponent}\n                      />\n                    )\n                  );\n                })}\n              </tr>\n            )\n        )}\n      </tbody>\n    </table>\n  );\n};\n\nexport { TableSection };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}