feat: Tabs - Add links variant

- add variant="links" with larger padding and no background
- use a 2px bottom shadow for hover and active states
- expose tabsInnerClassName for scroll inner styling
- mark active tab with class for links-variant styles

Author: apostololeg

src/components/Tabs/Tabs.styl

@@ -16,3 +16,32 @@ div .inactive
 .tab
   flex-shrink 0
   white-space nowrap
+
+.variant-links
+  & > button
+    &:not(:first-child)
+      margin-left 0
+      border-radius inherit
+    &:not(:last-child)
+      border-radius inherit
+
+  .tab
+    padding var(--p-3) var(--p-5)
+    background-color transparent !important
+    box-shadow none
+
+    &:hover
+    &:focus
+      background-color transparent !important
+      box-shadow 0 2px 0 0 var(--active-color-alpha-100)
+
+  .tab.active
+    color inherit
+    background-color transparent !important
+    box-shadow 0 2px 0 0 var(--active-color)
+
+    &:hover
+    &:focus
+      color inherit
+      background-color transparent !important
+      box-shadow 0 2px 0 0 var(--active-color)

src/components/Tabs/Tabs.tsx

@@ -1,21 +1,22 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import * as T from './Tabs.types';
 
-import cn from 'classnames';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
-import { Scroll } from '../Scroll/Scroll';
 import { Button } from '../Button/Button';
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup';
-
-import * as T from './Tabs.types';
 import S from './Tabs.styl';
+import { Scroll } from '../Scroll/Scroll';
+import cn from 'classnames';
 
 const isId = id => ['string', 'number'].includes(typeof id);
 
 export function Tabs(props: T.Props) {
   const {
     size = 'm',
+    variant = 'default',
     className,
     tabsWrapperClassName,
+    tabsInnerClassName,
     tabsClassName,
     contentClassName,
     items,
@@ -87,7 +88,7 @@ export function Tabs(props: T.Props) {
     return (
       <Button
         {...rest}
-        className={cn(S.tab, rest.className)}
+        className={cn(S.tab, isActive && S.active, rest.className)}
         size={size}
         key={id}
         onClick={e => onTabClick(e, params)}
@@ -104,12 +105,18 @@ export function Tabs(props: T.Props) {
         x
         offset={{ x: { before: 10, after: 10 } }}
         className={tabsWrapperClassName}
-        innerClassName={cn(S.tabsScroll, S[`size-${size}`])}
+        innerClassName={cn(S.tabsScroll, S[`size-${size}`], tabsInnerClassName)}
         autoHide
         fadeSize={size}
         size={size}
       >
-        <ButtonGroup className={tabsClassName} {...rest}>
+        <ButtonGroup
+          className={cn(
+            variant === 'links' && S['variant-links'],
+            tabsClassName
+          )}
+          {...rest}
+        >
           {tabsButtons}
         </ButtonGroup>
       </Scroll>

src/components/Tabs/Tabs.types.ts

@@ -1,6 +1,6 @@
-import { Size } from 'uilib/types';
 import { ButtonProps } from '../Button/Button';
 import { ReactNode } from 'react';
+import { Size } from 'uilib/types';
 
 type ID = string | number;
 
@@ -21,8 +21,10 @@ export type RenderProps = {
 
 export type Props = {
   size?: Size;
+  variant?: 'default' | 'links';
   className?: string;
   tabsWrapperClassName?: string;
+  tabsInnerClassName?: string;
   tabsClassName?: string;
   contentClassName?: string;
   items: Item[];