SOV-3435: vertical tab mobile props update (#668)

* feat: vertical tab mobile props update * Create grumpy-cooks-hug.md
DistributedCollective · Nov 1, 2023 · 671278f · 671278f
1 parent 1a88b91
commit 671278f
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 2 deletions.
diff --git a/.changeset/grumpy-cooks-hug.md b/.changeset/grumpy-cooks-hug.md
@@ -0,0 +1,5 @@
+---
+"@sovryn/ui": patch
+---
+
+SOV-3435: Vertical tab mobile custom classname
diff --git a/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.tsx b/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.tsx
@@ -27,7 +27,9 @@ export const VerticalTabItem: FC<VerticalTabsItemButtonProps> = ({
     >
       {icon && <span className={styles.icon}> {icon} </span>}
       <div className={className}>
-        <Heading type={HeadingType.h2}>{label}</Heading>
+        <Heading className={styles.heading} type={HeadingType.h2}>
+          {label}
+        </Heading>
         {infoText && <Paragraph className={styles.info}>{infoText}</Paragraph>}
       </div>
     </button>

diff --git a/packages/ui/src/2_molecules/VerticalTabsMobile/VerticalTabsMobile.stories.tsx b/packages/ui/src/2_molecules/VerticalTabsMobile/VerticalTabsMobile.stories.tsx
@@ -124,6 +124,7 @@ Basic.args = {
           Tab 3 Content
         </>
       ),
+      className: 'h-20',
     },
     {
       label: 'Tab4 ',

diff --git a/packages/ui/src/2_molecules/VerticalTabsMobile/VerticalTabsMobile.types.ts b/packages/ui/src/2_molecules/VerticalTabsMobile/VerticalTabsMobile.types.ts
@@ -16,6 +16,7 @@ export type VerticalTabsMobileItem = {
   infoText?: ReactNode;
   disabled?: boolean;
   dataAttribute?: string;
+  className?: string;
 };
 
 export type VerticalTabMobileItemButtonProps = VerticalTabsMobileItem & {

diff --git a/packages/ui/src/2_molecules/VerticalTabsMobile/components/VerticalTabMobileItem.tsx b/packages/ui/src/2_molecules/VerticalTabsMobile/components/VerticalTabMobileItem.tsx
@@ -1,5 +1,7 @@
 import React, { FC } from 'react';
 
+import classNames from 'classnames';
+
 import { applyDataAttr } from '../../../utils';
 import { VerticalTabMobileItemButtonProps } from '../VerticalTabsMobile.types';
 import styles from './VerticalTabMobileItem.module.css';
@@ -10,9 +12,10 @@ export const VerticalTabMobileItem: FC<VerticalTabMobileItemButtonProps> = ({
   infoText,
   dataAttribute,
   onClick,
+  className,
 }) => (
   <button
-    className={styles.button}
+    className={classNames(styles.button, className)}
     disabled={disabled}
     {...applyDataAttr(dataAttribute)}
     onClick={onClick}