@popsure/dirty-swan 0.66.19 → 0.66.21

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

@@ -20,6 +20,7 @@ import {
   TableCellData,
   TableData,
 } from './types';
+import { Tabs, TabItem } from '../tabs/Tabs';
 
 export type { TableData } from './types';
 
@@ -49,6 +50,7 @@ export interface TableProps {
   hideTableNavigation?: boolean;
   hideStickyHeader?: boolean;
   showSelectedColumn?: boolean;
+  mobileNavigationMode?: 'arrows' | 'tabs';
 }
 
 const defaultTextOverrides = {
@@ -77,6 +79,7 @@ const Table = ({
   hideTableNavigation = false,
   hideStickyHeader = false,
   showSelectedColumn = false,
+  mobileNavigationMode = 'arrows',
 }: TableProps) => {
   const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };
   const isMobile = useMediaQuery('BELOW_MOBILE');
@@ -89,6 +92,8 @@ const Table = ({
 
   useScrollSync(headerRef, containerRef, !isMobile);
 
+  const useTabs = isMobile && mobileNavigationMode === 'tabs';
+
   const { activeSection, navigateTable, setActiveSection } = useTableNavigation(
     {
       enabled: isMobile,
@@ -97,11 +102,25 @@ const Table = ({
     }
   );
 
+  const headerRow = tableData?.[0]?.rows?.[0];
   const titleCell = {
     text: '',
-    ...(tableData?.[0]?.rows?.[0]?.[0] || {}),
+    ...(headerRow?.[0] || {}),
   };
-  const currentActiveSection = tableData?.[0]?.rows?.[0]?.[activeSection];
+  const currentActiveSection = headerRow?.[activeSection];
+
+  const mobileTabs: TabItem[] = useTabs
+    ? headerRow
+        ?.slice(1)
+        .map((cell, index) => {
+          let label = '';
+          if (!cell.type) label = String(cell.text || '');
+          else if (cell.type === 'CTA') label = String(cell.title || '');
+          else if (cell.type === 'BUTTON') label = String(cell.buttonCaption || '');
+          return { id: String(index), label };
+        }) ?? []
+    : [];
+
   const currentActiveSectionReplacements =
     (currentActiveSection?.cellId &&
       cellReplacements?.[currentActiveSection.cellId]) ||
@@ -127,7 +146,7 @@ const Table = ({
     <div className={classNames(styles.wrapper, 'bg-white')}>
       {isMobile ? (
         <>
-          {titleCell?.text && (
+          {!useTabs && titleCell?.text && (
             <TableCell
               {...titleCell}
               align="left"
@@ -138,27 +157,44 @@ const Table = ({
           )}
 
           {!hideTableNavigation && currentActiveSection && (
-            <TableControls
-              activeSection={activeSection}
-              columnsLength={columnsLength}
-              navigateTable={navigateTable}
-              stickyHeaderTopOffset={stickyHeaderTopOffset}
-            >
-              <TableCell
-                {...(isBaseCell(currentActiveSection)
-                  ? {
-                      openModal: (body: ReactNode) =>
-                        handleOpenModal({
-                          body,
-                          title: currentActiveSection?.text,
-                        }),
-                    }
-                  : {})}
-                {...activeCellProps}
-                imageComponent={imageComponent}
-                isNavigation
-              />
-            </TableControls>
+            useTabs ? (
+              <div
+                className={classNames(
+                  'bg-white',
+                  styles.stickyHeader
+                )}
+                style={{ top: `${stickyHeaderTopOffset}px` }}
+              >
+                <Tabs
+                  tabs={mobileTabs}
+                  activeIndex={activeSection - 1}
+                  onTabChange={(index) => setActiveSection(index)}
+                  className="mb16"
+                />
+              </div>
+            ) : (
+              <TableControls
+                activeSection={activeSection}
+                columnsLength={columnsLength}
+                navigateTable={navigateTable}
+                stickyHeaderTopOffset={stickyHeaderTopOffset}
+              >
+                <TableCell
+                  {...(isBaseCell(currentActiveSection)
+                    ? {
+                        openModal: (body: ReactNode) =>
+                          handleOpenModal({
+                            body,
+                            title: currentActiveSection?.text,
+                          }),
+                      }
+                    : {})}
+                  {...activeCellProps}
+                  imageComponent={imageComponent}
+                  isNavigation
+                />
+              </TableControls>
+            )
           )}
         </>
       ) : (
@@ -203,6 +239,7 @@ const Table = ({
           cellReplacements={cellReplacements}
           imageComponent={imageComponent}
           selectedColumn={showSelectedColumn ? activeSection : undefined}
+          showHeader={useTabs}
         />
       </div>
 

package/src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.module.scss

@@ -2,21 +2,28 @@
 @use "../../../../../scss/public/colors" as *;
 
 .buttonCell {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% + 40px);
+  margin-left: -20px;
+  margin-right: -20px;
+  padding: 16px 24px;
+  border-radius: 12px;
+  border: 1px solid $ds-neutral-300;
+  background-color: transparent;
   color: $ds-neutral-900;
-  border: 1px solid $ds-neutral-400;
+  cursor: pointer;
+  transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+  text-align: left;
 
-  transition: all 0.3s ease-in-out;
-
-  &:disabled {
-    border: none;
-    background-color: $ds-neutral-100;
-    color: $ds-neutral-900;
-    opacity: 1;
-    cursor: default;
+  &:hover:not(:disabled):not(.selected) {
+    background-color: $ds-orange-50;
+  }
 
-    &:hover {
-      background-color: $ds-neutral-100;
-    }
+  &:focus-visible {
+    outline: 1px solid $ds-neutral-900;
+    outline-offset: 0;
   }
 
   @include p-size-mobile {
@@ -24,15 +31,14 @@
   }
 }
 
-.withoutPrice {
-  height: 64px;
-}
-
-.withPrice {
-  height: 75px;
+.selected {
+  border: 1px solid $ds-neutral-900;
+  background-color: $ds-orange-50;
 }
 
-.selected {
-  transition: all 0.3 ease-in-out;
-  border: 2px solid $ds-neutral-900;
+.disabled {
+  background-color: $ds-neutral-100;
+  cursor: default;
+  opacity: 1;
+  pointer-events: none;
 }

package/src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 
 import styles from './ButtonCell.module.scss';
-import { Button } from '../../../../button';
+import { CircleSelectedIcon, CircleUnselectedIcon } from '../../../../icon';
 import { ReactNode } from 'react';
 
 export type ButtonCellProps = {
@@ -27,29 +27,32 @@ export const ButtonCell = ({
 }: ButtonCellProps) => {
   return (
     <div
-      className={
-        classNames(
-          "w100 d-flex fd-column ai-start jc-center gap8",
-          className,
-        )
-      }
+      className={classNames(
+        "w100 d-flex fd-column ai-start jc-center gap8",
+        className,
+      )}
       data-cy={dataCy}
       data-testid={dataTestId}
     >
-      <Button
-        className={classNames('w100 wmx5 d-flex fd-column', styles.buttonCell, {
+      <button
+        className={classNames('w100 wmx5', styles.buttonCell, {
           [styles.selected]: isSelected,
-          [styles.withoutPrice]: !price,
-          [styles.withPrice]: !!price,
+          [styles.disabled]: disabled,
         })}
-        variant="filledWhite"
-        type="submit"
+        type="button"
         onClick={onClick}
         disabled={disabled}
       >
-        {buttonCaption}
-        {price && <span className="p-p">{price}</span>}
-      </Button>
+        <div className="d-flex fd-column ai-start">
+          <span className="p-p fw-bold">{buttonCaption}</span>
+          {price && <span className="p-p">{price}</span>}
+        </div>
+        {!disabled && (isSelected ? (
+          <CircleSelectedIcon size={16} />
+        ) : (
+          <CircleUnselectedIcon size={16} />
+        ))}
+      </button>
     </div>
   );
 };

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

@@ -73,4 +73,25 @@ describe('TableContents', () => {
     expect(screen.queryByText('Section 2')).not.toBeInTheDocument();
     expect(screen.queryByText('Item 2.1.1')).not.toBeInTheDocument();
   });
+
+  it('shows the header row only in the first section when showHeader is set', () => {
+    const { container } = render(
+      <TableContents showHeader tableData={mockData} title="Table" />
+    );
+
+    const tableHeaders = container.querySelectorAll('thead');
+    expect(tableHeaders).toHaveLength(2);
+    expect(tableHeaders[0]).not.toHaveClass('sr-only');
+    expect(tableHeaders[1]).toHaveClass('sr-only');
+  });
+
+  it('keeps every header row hidden when showHeader is not set', () => {
+    const { container } = render(
+      <TableContents tableData={mockData} title="Table" />
+    );
+
+    container.querySelectorAll('thead').forEach((tableHeader) => {
+      expect(tableHeader).toHaveClass('sr-only');
+    });
+  });
 });

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

@@ -25,6 +25,7 @@ export interface TableContentsProps {
   cellReplacements?: CellReplacements;
   imageComponent?: (args: any) => JSX.Element;
   selectedColumn?: number;
+  showHeader?: boolean;
 }
 
 const TableContents = ({
@@ -44,6 +45,7 @@ const TableContents = ({
   cellReplacements,
   imageComponent,
   selectedColumn,
+  showHeader = false,
 }: TableContentsProps) => {
   const [isSectionOpen, setOpenSection] = useState<number | null>(null);
   const lastToggledSection = useRef<number | null>(null);
@@ -147,7 +149,7 @@ const TableContents = ({
                 }
                 hideColumns={hideColumns}
                 hideRows={sectionHideRows}
-                hideHeader
+                hideHeader={!showHeader || !isFirstSection}
                 openModal={openModal}
                 title={`${title}${
                   section?.title ? ` - ${section.title}` : ''

package/src/lib/components/tabs/Tabs.module.scss

@@ -0,0 +1,26 @@
+@use '../../scss/public/colors' as *;
+@use '../../scss/public/font-weight' as *;
+
+.tabs {
+  display: flex;
+  column-gap: 24px;
+}
+
+.tab {
+  border: none;
+  border-bottom: 2px solid transparent;
+  font-weight: $p-font-weight-bold;
+  padding: 0 0 4px;
+  color: $ds-neutral-500;
+
+  &:hover, &Active {
+    color: $ds-neutral-900;
+    border-bottom-color: $ds-neutral-900;
+  }
+
+  &:focus-visible {
+    outline: 1px solid $ds-neutral-900;
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+}

package/src/lib/components/tabs/Tabs.stories.tsx

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import { Tabs, TabsProps } from './Tabs';
+
+const story = {
+  title: 'JSX/Tabs',
+  component: Tabs,
+  argTypes: {
+    tabs: {
+      description: 'Array of tab items with id and label',
+    },
+    activeIndex: {
+      description: 'The currently active tab index',
+    },
+    onTabChange: {
+      action: true,
+      table: {
+        category: 'Callbacks',
+      },
+    },
+    className: {
+      description: 'Optional CSS class to apply to the tabs container',
+    },
+  },
+  args: {
+    tabs: [
+      { id: 'basic', label: 'Basic' },
+      { id: 'standard', label: 'Standard' },
+      { id: 'premium', label: 'Premium' },
+    ],
+    activeIndex: 0,
+  },
+  parameters: {
+    componentSubtitle:
+      'A horizontal tab bar for switching between content sections.',
+  },
+};
+
+export const Default = {
+  render: ({ tabs, activeIndex, onTabChange }: TabsProps) => {
+    const [index, setIndex] = useState(activeIndex);
+
+    const handleChange = (newIndex: number) => {
+      onTabChange?.(newIndex);
+      setIndex(newIndex);
+    };
+
+    return <Tabs tabs={tabs} activeIndex={index} onTabChange={handleChange} />;
+  },
+
+  name: 'Default',
+};
+
+export const TwoTabs = {
+  render: () => {
+    const [index, setIndex] = useState(0);
+
+    return (
+      <Tabs
+        tabs={[
+          { id: 'monthly', label: 'Monthly' },
+          { id: 'yearly', label: 'Yearly' },
+        ]}
+        activeIndex={index}
+        onTabChange={setIndex}
+      />
+    );
+  },
+
+  name: 'Two Tabs',
+};
+
+export const ManyTabs = {
+  render: () => {
+    const [index, setIndex] = useState(0);
+
+    return (
+      <Tabs
+        tabs={[
+          { id: 'overview', label: 'Overview' },
+          { id: 'coverage', label: 'Coverage' },
+          { id: 'pricing', label: 'Pricing' },
+          { id: 'reviews', label: 'Reviews' },
+          { id: 'faq', label: 'FAQ' },
+        ]}
+        activeIndex={index}
+        onTabChange={setIndex}
+      />
+    );
+  },
+
+  name: 'Many Tabs',
+};
+
+export default story;

package/src/lib/components/tabs/Tabs.tsx

@@ -0,0 +1,65 @@
+import classNames from 'classnames';
+import { KeyboardEvent, useCallback, useRef } from 'react';
+
+import styles from './Tabs.module.scss';
+
+export interface TabItem {
+  id: string;
+  label: string;
+}
+
+export interface TabsProps {
+  tabs: TabItem[];
+  activeIndex: number;
+  onTabChange: (index: number) => void;
+  className?: string;
+}
+
+const Tabs = ({ tabs, activeIndex, onTabChange, className }: TabsProps) => {
+  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const setTabRef = useCallback(
+    (index: number) => (el: HTMLButtonElement | null) => {
+      tabRefs.current[index] = el;
+    },
+    []
+  );
+
+  const handleKeyDown = (e: KeyboardEvent, index: number) => {
+    const count = tabs.length;
+    let nextIndex: number | null = null;
+
+    if (e.key === 'ArrowRight') nextIndex = (index + 1) % count;
+    if (e.key === 'ArrowLeft') nextIndex = (index - 1 + count) % count;
+
+    if (nextIndex !== null) {
+      e.preventDefault();
+      onTabChange(nextIndex);
+      tabRefs.current[nextIndex]?.focus({ preventScroll: true });
+    }
+  };
+
+  return (
+    <div className={classNames(styles.tabs, className)} role="tablist">
+      {tabs.map((tab, index) => (
+        <button
+          ref={setTabRef(index)}
+          key={tab.id}
+          type="button"
+          role="tab"
+          aria-selected={activeIndex === index}
+          tabIndex={activeIndex === index ? 0 : -1}
+          className={classNames('p-p bg-transparent c-pointer', styles.tab, {
+            [styles.tabActive]: activeIndex === index,
+          })}
+          onClick={() => onTabChange(index)}
+          onKeyDown={(e) => handleKeyDown(e, index)}
+        >
+          {tab.label}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export { Tabs };

package/src/lib/index.tsx

@@ -54,6 +54,7 @@ import { Toaster, toast } from './components/toast';
 import { IconWrapperProps } from './components/icon/IconWrapper';
 import { Accordion, AccordionProps } from './components/accordion';
 import { Table, TableData, TableProps } from './components/table/Table';
+import { Tabs, TabsProps, TabItem } from './components/tabs/Tabs';
 import { useEscapeKey } from './hooks/useEscapeKey';
 import { useFocusWithin } from './hooks/useFocusWithin';
 import { useMediaQuery } from './hooks/useMediaQuery';
@@ -107,6 +108,7 @@ export {
   illustrations,
   Spinner,
   Table,
+  Tabs,
   Toggle,
   Toaster,
   toast,
@@ -139,6 +141,8 @@ export type {
   UploadStatus,
   CardProps,
   IconWrapperProps,
+  TabItem,
+  TabsProps,
   TableData,
   TableProps,
 };