feat: Tabs variants and trailingIcon (#1210)

* chore: Update gitignore

* style: New text hover color on inactive tab

* feat: Added 'trailingIcon' and 'variant' to Tabs options

Author: mariush2

.gitignore

@@ -1,8 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# Webstorm specific
-.idea/workspace.xml
-
 package-lock.json
 
 # dependencies
@@ -17,6 +14,7 @@ package-lock.json
 
 # Webstorm user specific settings
 .idea/workspace.xml
+.idea/vcs.xml
 
 # production
 /build

src/molecules/Tabs/Tab.styles.ts

@@ -44,6 +44,9 @@ export const Button = styled.button<ButtonProps>`
 
   &:hover:not(:disabled) {
     background: ${colors.interactive.primary__hover_alt.rgba};
+    > label {
+      color: ${colors.text.static_icons__secondary.rgba};
+    }
 
     &[aria-selected='true'] {
       > svg {

src/molecules/Tabs/Tab.tsx

@@ -2,6 +2,16 @@ import { Icon, Typography } from '@equinor/eds-core-react';
 
 import { ActiveLine, Button, Count, Line } from './Tab.styles';
 import { Tab as TabType, Tabs } from './Tabs.types';
+import { colors } from 'src/atoms/style/colors';
+import { getVariantIcon } from 'src/atoms/utils';
+
+const VARIANT_ICON_COLORS: Record<
+  Required<Pick<TabType<unknown>, 'variant'>>['variant'],
+  string
+> = {
+  warning: colors.interactive.warning__text.rgba,
+  error: colors.interactive.danger__text.rgba,
+} as const;
 
 type TabProps<T> = {
   onChange: Tabs<T>['onChange'];
@@ -23,8 +33,12 @@ export function Tab<T>({
   animated,
   disabled,
   leadingIcon,
+  trailingIcon,
+  variant,
   count,
 }: TabProps<T>) {
+  const usingLeadingIcon = variant ? getVariantIcon(variant) : leadingIcon;
+
   const handleOnClick = () => {
     onChange(value);
   };
@@ -43,7 +57,19 @@ export function Tab<T>({
       $centered={centered}
       disabled={disabled}
     >
-      {leadingIcon ? <Icon data={leadingIcon} size={24} /> : null}
+      {usingLeadingIcon ? (
+        <Icon
+          data={usingLeadingIcon}
+          size={24}
+          style={
+            variant
+              ? {
+                  fill: VARIANT_ICON_COLORS[variant],
+                }
+              : undefined
+          }
+        />
+      ) : null}
       <Typography as="label" variant="menu_tabs" group="navigation">
         {label}
       </Typography>
@@ -54,6 +80,7 @@ export function Tab<T>({
           </Typography>
         </Count>
       ) : null}
+      {trailingIcon ? <Icon data={trailingIcon} size={24} /> : null}
       {animated ? (
         <>
           <Line className="static-line" />

src/molecules/Tabs/Tabs.stories.tsx

@@ -5,9 +5,10 @@ import { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Tabs } from './Tabs';
 import { Tab, Tabs as TabsType } from './Tabs.types';
+import { getVariantIcon } from 'src/atoms/utils';
 
 import { PartialStoryFn } from 'storybook/internal/types';
-import { expect, fn, userEvent } from 'storybook/test';
+import { expect, fn, userEvent, within } from 'storybook/test';
 
 const OPTIONS: [Tab<number>, Tab<number>, Tab<number>] = [
   {
@@ -114,6 +115,84 @@ export const WithLeadingIcon: Story = {
       },
     ],
   },
+  play: async ({ canvas, args }) => {
+    for (const item of args.options) {
+      const tabElement = canvas.getByRole('tab', { name: item.label });
+      const icon = within(tabElement).getByTestId('eds-icon-path');
+      await expect(icon).toBeInTheDocument();
+      await expect(icon).toHaveAttribute(
+        'd',
+        item.leadingIcon?.svgPathData as string
+      );
+    }
+  },
+};
+
+export const WithTrailingIcon: Story = {
+  args: {
+    options: [
+      {
+        value: 1,
+        trailingIcon: car,
+        label: 'トヨタ',
+      },
+      {
+        value: 2,
+        trailingIcon: gamepad,
+        label: '任天堂',
+      },
+      {
+        value: 3,
+        trailingIcon: motorcycle,
+        label: 'ヤマハ',
+      },
+    ],
+  },
+  play: async ({ canvas, args }) => {
+    for (const item of args.options) {
+      const tabElement = canvas.getByRole('tab', { name: item.label });
+      const icon = within(tabElement).getByTestId('eds-icon-path');
+      await expect(icon).toBeInTheDocument();
+      await expect(icon).toHaveAttribute(
+        'd',
+        item.trailingIcon?.svgPathData as string
+      );
+    }
+  },
+};
+
+export const Variants: Story = {
+  args: {
+    options: [
+      {
+        value: 1,
+        variant: 'error',
+        label: 'トヨタ',
+      },
+      {
+        value: 2,
+        variant: 'warning',
+        label: '任天堂',
+      },
+      {
+        value: 3,
+        leadingIcon: motorcycle,
+        label: 'ヤマハ',
+      },
+    ],
+  },
+  play: async ({ canvas, args }) => {
+    const errorTab = canvas.getByRole('tab', { name: args.options[0].label });
+    await expect(within(errorTab).getByTestId('eds-icon-path')).toHaveAttribute(
+      'd',
+      getVariantIcon('error').svgPathData as string
+    );
+
+    const warningTab = canvas.getByRole('tab', { name: args.options[1].label });
+    await expect(
+      within(warningTab).getByTestId('eds-icon-path')
+    ).toHaveAttribute('d', getVariantIcon('warning').svgPathData as string);
+  },
 };
 
 export const WithCount: Story = {

src/molecules/Tabs/Tabs.types.ts

@@ -1,12 +1,17 @@
 import { IconData } from '@equinor/eds-icons';
 
+import { Variants } from 'src/atoms/types/variants';
+
 export interface Tab<T> {
   value: T;
   label: string;
   count?: number;
   leadingIcon?: IconData;
+  trailingIcon?: IconData;
+  variant?: Extract<Variants, 'warning' | 'error'>;
   disabled?: boolean;
 }
+
 export interface Tabs<T> {
   selected: T;
   onChange: (value: T) => void;