@nuskin/foundation-ui-components 1.8.1-738-v2.1 → 1.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.8.1-738-v2.1",
+    "version": "1.8.1",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {

package/src/common/accordion/NsAccordion.tsx

@@ -1,5 +1,6 @@
-import React, { FC, useMemo } from 'react';
-import { NsAccordionItem, useAccordionMap, NsAccordionProps, AccordionItem } from '..';
+import React, { useMemo } from 'react';
+
+import { AccordionItem, NsAccordionItem, NsAccordionProps, useAccordionMap } from '..';
 import { StyledAccordionWrapper } from './ToggleSection.styled';
 
 /**
@@ -13,7 +14,7 @@ import { StyledAccordionWrapper } from './ToggleSection.styled';
  * is false then only first item of default open is made open
  */
 const createKey = (item: AccordionItem, index: number) => item?.id + index;
-const NsAccordion: FC<NsAccordionProps> = ({
+const NsAccordion = ({
     allowMultipleExpanded,
     invert,
     level,
@@ -24,7 +25,7 @@ const NsAccordion: FC<NsAccordionProps> = ({
     openedIconName,
     additionalProps,
     isChild = false,
-}) => {
+}: NsAccordionProps) => {
     const defaultOpenIds = useMemo(() => {
         return items
             ?.map?.((content, index) => (content?.isDefaultOpen ? createKey(content, index) : null))

package/src/common/nav-tab/NavTitles.tsx

@@ -1,9 +1,9 @@
-import { NsTypography } from '../';
+import { NavTabs, NsLink, NsTypography } from '../';
 import { NavTabBox, NavTabUnderLine, NavTitlesBox } from './NsNavTab.styled';
 import { Show } from '../utility';
 
 type NavTitlesProps = {
-    tabs: any[];
+    tabs: NavTabs[];
     // eslint-disable-next-line no-unused-vars
     setActive(_x: string): void;
     active: string | null;
@@ -11,6 +11,17 @@ type NavTitlesProps = {
 };
 
 export const NavTitles = ({ tabs, setActive, active, tabTitleClassName }: NavTitlesProps) => {
+    const NavTitleTypography = (tab: NavTabs) => (
+        <NsTypography
+            variant={tab.textVariant}
+            additionalProps={{ ...tab?.liveTag }}
+            className={`${tabTitleClassName} ${!active ? 'opacity-8' : ''}`}
+            color={tab.tabName === active ? tab.activeColor : tab.color}
+        >
+            {tab.tabName}
+        </NsTypography>
+    );
+
     return (
         <NavTitlesBox className="desktop-nav-titles">
             {tabs?.map((tab) => {
@@ -32,14 +43,13 @@ export const NavTitles = ({ tabs, setActive, active, tabTitleClassName }: NavTit
                             }}
                             animate
                         >
-                            <NsTypography
-                                variant={tab.textVariant}
-                                additionalProps={{ ...tab?.liveTag }}
-                                className={`${tabTitleClassName} ${!active ? 'opacity-8' : ''}`}
-                                color={tab.tabName === active ? tab.activeColor : tab.color}
-                            >
-                                {tab.tabName}
-                            </NsTypography>
+                            {tab?.tabLink ? (
+                                <NsLink href={tab.tabLink} underlineOnHover={false}>
+                                    <NavTitleTypography {...tab} />
+                                </NsLink>
+                            ) : (
+                                <NavTitleTypography {...tab} />
+                            )}
                         </NavTabBox>
                         <Show when={active === tab.tabName}>
                             <NavTabUnderLine data-testid="underline" layoutId="underline" color={tab.activeColor} />

package/src/common/nav-tab/types.d.ts

@@ -5,6 +5,7 @@ import { AdditionalProps, CslpTag } from '../common.types';
 
 export type NavTabs = {
     tabName: string;
+    tabLink?: string;
     tabContent?: ReactNode;
     activeColor: FoundationTheme.PaletteColors;
     color?: FoundationTheme.PaletteColors;