@popsure/dirty-swan 0.58.6 → 0.59.0-alpha

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

@@ -15,6 +15,7 @@ export interface TableContentsProps {
   tableData: TableData;
   hideColumns?: number[];
   hideDetails?: boolean;
+  hideRows?: number[];
   isMobile?: boolean;
   openModal?: ModalFunction;
   shouldHideDetails?: boolean;
@@ -29,6 +30,7 @@ const TableContents = ({
   tableData,
   hideColumns = [],
   hideDetails,
+  hideRows = [],
   isMobile,
   openModal,
   shouldHideDetails,
@@ -45,6 +47,9 @@ const TableContents = ({
     );
   };
 
+  // Calculate global row offset for each section
+  let globalRowOffset = 0;
+
   return (
     <div style={{ width: tableWidth }}>
       {tableData.map(({ rows, section = {} }, index) => {
@@ -58,60 +63,69 @@ const TableContents = ({
           <IconRenderer icon={section.icon} imageComponent={imageComponent} width={20} />
         );
 
-        return (
-          (isFirstSection || isVisible) && (
-            <div key={index}>
-              {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: 'bg-purple-50 pl16',
-                        icon: classNames(styles.cardIcon, 'tc-grey-900'),
-                      }}
-                      dropShadow={false}
-                      icon={renderedIcon}
-                      title={section.title}
-                      titleVariant="medium"
-                      {...(collapsibleSections
-                        ? {
-                            onClick: () => handleToggleSection(index),
-                          }
-                        : {})}
-                    />
-                  </div>
+        // Calculate section-specific hideRows based on global offset
+        const sectionHideRows = hideRows
+          .map(globalRowIndex => globalRowIndex - globalRowOffset)
+          .filter(localRowIndex => localRowIndex >= 0 && localRowIndex < rows.length);
+
+        const result = (isFirstSection || isVisible) && (
+          <div key={index}>
+            {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: 'bg-purple-100 pl16',
+                      icon: classNames(styles.cardIcon, 'tc-neutral-900'),
+                    }}
+                    dropShadow={false}
+                    icon={renderedIcon}
+                    title={section.title}
+                    titleVariant="medium"
+                    {...(collapsibleSections
+                      ? {
+                          onClick: () => handleToggleSection(index),
+                        }
+                      : {})}
+                  />
                 </div>
-              )}
+              </div>
+            )}
 
-              <Collapsible isExpanded={isExpanded}>
-                <TableSection
-                  className={classNames(className, 'mb24')}
-                  tableCellRows={
-                    isFirstSection ? rows : [firstHeadRow, ...rows]
-                  }
-                  hideColumns={hideColumns}
-                  hideHeader
-                  openModal={openModal}
-                  title={`${title}${
-                    section?.title ? ` - ${section.title}` : ''
-                  }`}
-                  width={tableWidth}
-                  cellReplacements={cellReplacements}
-                  imageComponent={imageComponent}
-                />
-              </Collapsible>
-            </div>
-          )
+            <Collapsible isExpanded={isExpanded}>
+              <TableSection
+                className={classNames(className, 'mb24')}
+                tableCellRows={
+                  isFirstSection ? rows : [firstHeadRow, ...rows]
+                }
+                hideColumns={hideColumns}
+                hideRows={sectionHideRows}
+                hideHeader
+                openModal={openModal}
+                title={`${title}${
+                  section?.title ? ` - ${section.title}` : ''
+                }`}
+                width={tableWidth}
+                cellReplacements={cellReplacements}
+                imageComponent={imageComponent}
+              />
+            </Collapsible>
+          </div>
         );
+
+        // Update global offset for next section (excluding header row for non-first sections)
+        globalRowOffset += rows.length;
+
+        return result;
       })}
     </div>
   );

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

@@ -16,6 +16,7 @@ export interface TableSectionProps {
   className?: string;
   tableCellRows: TableCellRowData[];
   hideColumns?: number[];
+  hideRows?: number[];
   hideHeader?: boolean;
   openModal?: ModalFunction;
   title: string;
@@ -28,6 +29,7 @@ const TableSection = ({
   className,
   tableCellRows,
   hideColumns = [],
+  hideRows = [],
   hideHeader,
   openModal,
   title,
@@ -70,6 +72,11 @@ const TableSection = ({
     [hideColumns]
   );
 
+  const isVisibleRow = useCallback(
+    (rowIndex: number) => !hideRows.includes(rowIndex),
+    [hideRows]
+  );
+
   return (
     <table
       className={classNames(className, 'w100', styles.table)}
@@ -120,7 +127,7 @@ const TableSection = ({
       <tbody>
         {tableCellRows.map(
           (row, rowIndex) =>
-            rowIndex > 0 && (
+            rowIndex > 0 && isVisibleRow(rowIndex) && (
               <tr key={rowIndex} className={styles.tr}>
                 {row.map((tableCellData, cellIndex) => {
                   const key = `${rowIndex}-${cellIndex}`;

package/src/lib/components/toast/index.stories.tsx

@@ -103,7 +103,7 @@ export const ToastStory = ({
         <div>
           Show a toast using the following code:
         </div>
-        <pre className='bg-grey-300 br4 d-inline-flex p8 mt8'>
+        <pre className='bg-neutral-300 br4 d-inline-flex p8 mt8'>
           {"() => toast(title, { description, type, action })"}
         </pre>
       </div>

package/src/lib/components/toast/index.tsx

@@ -60,7 +60,7 @@ const Toast = ({
       <h4 className='p-h4'>{title}</h4>
       
       {description && (
-        <p className='p-p p-p--small mt8 tc-grey-600'>{description}</p>
+        <p className='p-p p-p--small mt8 tc-neutral-700'>{description}</p>
       )}
 
       {action && (

package/src/lib/components/toast/style.module.scss

@@ -43,11 +43,11 @@
 
 .closeButton {
   background-color: transparent;
-  color: $ds-grey-400;
+  color: $ds-neutral-400;
   min-width: 24px;
 
   &:hover {
-    color: $ds-grey-600;
+    color: $ds-neutral-700;
   }
 }
 
@@ -71,10 +71,10 @@
   }
 
   &--success {
-    color: $ds-spearmint-700;
+    color: $ds-green-700;
 
     &:hover {
-      color: $ds-spearmint-900;
+      color: $ds-green-900;
     }
   }
 

package/src/lib/index.tsx

@@ -53,6 +53,14 @@ import { useEscapeKey } from './hooks/useEscapeKey';
 import { useFocusWithin } from './hooks/useFocusWithin';
 import { useMediaQuery } from './hooks/useMediaQuery';
 import { useOnClickOutside } from './hooks/useOnClickOutside';
+import { LogoColor } from './components/logo/LogoColor';
+import { LogoWhite } from './components/logo/LogoWhite';
+import { LogoBlack } from './components/logo/LogoBlack';
+import { LogoOrangeBox } from './components/logo/LogoOrangeBox';
+import { LogoInvertedColor } from './components/logo/LogoInvertedColor';
+import { LogoInverted } from './components/logo/LogoInverted';
+import { LogoPositiveColor } from './components/logo/LogoPositiveColor';
+import { LogoPositiveBlack } from './components/logo/LogoPositiveBlack';
 
 export * from './components/icon';
 
@@ -100,6 +108,14 @@ export {
   useFocusWithin,
   useOnClickOutside,
   useMediaQuery,
+  LogoColor,
+  LogoWhite,
+  LogoBlack,
+  LogoOrangeBox,
+  LogoInvertedColor,
+  LogoInverted,
+  LogoPositiveColor,
+  LogoPositiveBlack,
 };
 
 export type {

package/src/lib/models/styles.ts

@@ -3,53 +3,34 @@ export type Color = 'transparent' | 'blue-100'
 | 'blue-500'
 | 'blue-700'
 | 'blue-900'
-| 'purple-25'
 | 'purple-50'
 | 'purple-100'
+| 'purple-200'
 | 'purple-300'
+| 'purple-400'
 | 'purple-500'
+| 'purple-600'
 | 'purple-700'
+| 'purple-800'
 | 'purple-900'
-| 'primary-25'
-| 'primary-50'
-| 'primary-100'
-| 'primary-300'
-| 'primary-500'
-| 'primary-700'
-| 'primary-900'
 | 'red-100'
 | 'red-300'
 | 'red-500'
 | 'red-700'
 | 'red-900'
-| 'grey-100'
-| 'grey-200'
-| 'grey-300'
-| 'grey-400'
-| 'grey-500'
-| 'grey-600'
-| 'grey-700'
-| 'grey-900'
+| 'neutral-50'
+| 'neutral-100'
+| 'neutral-300'
+| 'neutral-400'
+| 'neutral-600'
+| 'neutral-700'
+| 'neutral-800'
+| 'neutral-900'
 | 'green-100'
 | 'green-300'
 | 'green-500'
 | 'green-700'
 | 'green-900'
-| 'glacier-100'
-| 'glacier-300'
-| 'glacier-500'
-| 'glacier-700'
-| 'glacier-900'
-| 'spearmint-100'
-| 'spearmint-300'
-| 'spearmint-500'
-| 'spearmint-700'
-| 'spearmint-900'
-| 'pink-100'
-| 'pink-300'
-| 'pink-500'
-| 'pink-700'
-| 'pink-900'
 | 'yellow-100'
 | 'yellow-300'
 | 'yellow-500'

package/src/lib/scss/index.scss

@@ -20,5 +20,5 @@ html {
 }
 
 body {
-  background-color: $ds-grey-200;
+  background-color: $ds-neutral-100;
 }

package/src/lib/scss/private/base/_typography.scss

@@ -71,7 +71,7 @@ body {
 .p-h3,
 .p-h4,
 .p-p {
-  color: $ds-grey-900;
+  color: $ds-neutral-900;
 }
 
 .p-h1 {
@@ -146,16 +146,16 @@ body {
 }
 
 .p-a {
-  color: $ds-primary-500;
+  color: $ds-purple-600;
   text-decoration: none;
 
   &:hover,
   &:focus {
-    color: $ds-primary-700;
+    color: $ds-purple-700;
   }
 
   &:focus-visible {
-    outline: 2px solid $ds-grey-900;
+    outline: 2px solid $ds-neutral-900;
     border-radius: 2px;
     outline-offset: 2px;
   }

package/src/lib/scss/private/base/border_radius.mdx

@@ -30,11 +30,11 @@ export const BorderRadiusExample = () => {
       {values.map((value) =>
         value === '-pill' ? (
           <div
-            className={`d-flex ai-center jc-center bg-primary-100 br${value} ${styles.rectangle}`}
+            className={`d-flex ai-center jc-center bg-purple-300 br${value} ${styles.rectangle}`}
           >{`br${value}`}</div>
         ) : (
           <div
-            className={`d-flex ai-center jc-center bg-primary-100 br${value} ${styles.square}`}
+            className={`d-flex ai-center jc-center bg-purple-300 br${value} ${styles.square}`}
           >{`br${value}`}</div>
         )
       )}

package/src/lib/scss/private/base/flex/flex.mdx

@@ -38,20 +38,20 @@ export const RenderFdExample = () => {
         <div key={value}>
           <p className="p-p fw-bold">.fd-{value}</p>
           <div
-            className={`d-flex bg-grey-500 w100 fd-${value} p16 ${style.container}`}
+            className={`d-flex bg-neutral-600 w100 fd-${value} p16 ${style.container}`}
           >
             <div
-              className={`bg-grey-100 p16 m8 d-flex ai-center jc-center ${style.item}`}
+              className={`bg-neutral-50 p16 m8 d-flex ai-center jc-center ${style.item}`}
             >
               1
             </div>
             <div
-              className={`bg-grey-100 p16 m8 d-flex ai-center jc-center ${style.item}`}
+              className={`bg-neutral-50 p16 m8 d-flex ai-center jc-center ${style.item}`}
             >
               2
             </div>
             <div
-              className={`bg-grey-100 p16 m8 d-flex ai-center jc-center ${style.item}`}
+              className={`bg-neutral-50 p16 m8 d-flex ai-center jc-center ${style.item}`}
             >
               3
             </div>
@@ -82,16 +82,16 @@ export const RenderAiExample = () => {
         <div key={value}>
           <p className="p-p fw-bold">.ai-{value}</p>
           <div
-            className={`d-flex bg-grey-500 w100 ai-${value} p16 ${style.container} ${style['ai-container']}`}
+            className={`d-flex bg-neutral-600 w100 ai-${value} p16 ${style.container} ${style['ai-container']}`}
           >
-            <div className={`bg-grey-100 p16  m8 ${style.item}`}>Item</div>
+            <div className={`bg-neutral-50 p16  m8 ${style.item}`}>Item</div>
             <div
-              className={`bg-grey-100 p16 m8 d-flex ai-center ${style.item} ${style['ai-item-2']}`}
+              className={`bg-neutral-50 p16 m8 d-flex ai-center ${style.item} ${style['ai-item-2']}`}
             >
               Item
             </div>
             <div
-              className={`bg-grey-100 p16 m8 ${style.item} ${
+              className={`bg-neutral-50 p16 m8 ${style.item} ${
                 style[['ai-item-3']]
               }`}
             >
@@ -125,11 +125,11 @@ export const RenderJcExample = () => {
         <div key={value}>
           <p className="p-p fw-bold">.jc-{value}</p>
           <div
-            className={`d-flex bg-grey-500 w100 jc-${value} p16 ${style.container}`}
+            className={`d-flex bg-neutral-600 w100 jc-${value} p16 ${style.container}`}
           >
-            <div className={`bg-grey-100 p16 m8 ${style.item}`}>Item</div>
-            <div className={`bg-grey-100 p16 m8 ${style.item}`}>Item</div>
-            <div className={`bg-grey-100 p16 m8 ${style.item}`}>Item</div>
+            <div className={`bg-neutral-50 p16 m8 ${style.item}`}>Item</div>
+            <div className={`bg-neutral-50 p16 m8 ${style.item}`}>Item</div>
+            <div className={`bg-neutral-50 p16 m8 ${style.item}`}>Item</div>
           </div>
         </div>
       ))}

package/src/lib/scss/private/base/style.module.scss

@@ -7,7 +7,7 @@
     text-align: center;
     border-radius: 8px;
     color: white;
-    background-color: colors.$ds-primary-500;
+    background-color: colors.$ds-purple-600;
 
     margin-top: 4px;
   }
@@ -29,13 +29,13 @@
     & > *:first-child {
       border-top-left-radius: 8px;
       border-bottom-left-radius: 8px;
-      background-color: colors.$ds-primary-500;
+      background-color: colors.$ds-purple-600;
     }
 
     & > *:nth-child(2) {
       border-top-right-radius: 8px;
       border-bottom-right-radius: 8px;
-      background-color: colors.$ds-grey-400;
+      background-color: colors.$ds-neutral-400;
       width: 100%;
     }
   }

package/src/lib/scss/private/components/_badge.scss

@@ -6,7 +6,7 @@
   padding: 0 16px;
 
   font-size: 12px;
-  color: $ds-grey-900;
+  color: $ds-neutral-900;
   text-align: center;
 
   height: 18px;
@@ -26,7 +26,7 @@
 
   &--inactive {
     @extend .p-badge;
-    background-color: $ds-grey-400;
+    background-color: $ds-neutral-400;
   }
 
   &--danger {
@@ -41,6 +41,6 @@
 
   &--default {
     @extend .p-badge;
-    background-color: $ds-purple-100;
+    background-color: $ds-purple-300;
   }
 }