Merge pull request #7 from selsa-inube/ja/ids1451/Refactor_component_…

…to_use_new_token_structure

refactor component to use new token structure

package.json

@@ -40,11 +40,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@inubekit/stack": "^1.1.0",
-    "@inubekit/text": "^1.3.0",
+    "@inubekit/foundations": "^2.12.1",
     "@inubekit/grid": "^2.0.0",
-    "@inubekit/icon": "^1.1.0",
-    "@inubekit/foundations": "^1.1.2"
+    "@inubekit/icon": "^1.5.0",
+    "@inubekit/stack": "^2.1.1",
+    "@inubekit/text": "^2.2.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",

src/Nav/index.tsx

@@ -1,39 +1,27 @@
 import { useLocation } from "react-router-dom";
 import { MdLogout } from "react-icons/md";
 
-import { Text } from "@inubekit/text";
+import { ITextAppearance, Text } from "@inubekit/text";
 import { Stack } from "@inubekit/stack";
+import { inube } from "@inubekit/foundations";
 
 import { StyledNav, StyledFooter, SeparatorLine } from "./styles";
 import { NavLink } from "../NavLink";
+import { ILink, INavNavigation } from "./props";
 
-interface INavLink {
-  section: ILink[];
-}
-
-interface ILink {
-  id: string;
-  label: string;
-  icon: React.ReactNode;
-  path: string;
-}
-
-interface INavSection {
-  name: string;
-  links: { [key: string]: ILink };
-}
-
-interface INavNavigation {
-  title: string;
-  sections: { [key: string]: INavSection };
-}
+import { useContext } from "react";
+import { ThemeContext } from "styled-components";
 
 interface INav {
   navigation: INavNavigation;
   logoutPath: string;
   logoutTitle: string;
 }
 
+interface INavLink {
+  section: ILink[];
+}
+
 const year = new Date().getFullYear();
 
 const Links = (props: INavLink) => {
@@ -57,6 +45,10 @@ const Links = (props: INavLink) => {
 
 const MultiSections = ({ navigation }: INav) => {
   const sections = Object.keys(navigation.sections);
+  const theme: typeof inube = useContext(ThemeContext);
+  const navTitleAppearance =
+    (theme?.nav?.title?.appearance as ITextAppearance) ||
+    inube.nav.title.appearance;
 
   return (
     <Stack direction="column">
@@ -69,7 +61,7 @@ const MultiSections = ({ navigation }: INav) => {
           <Text
             padding="16px"
             as="h2"
-            appearance="gray"
+            appearance={navTitleAppearance}
             type="title"
             size="small"
             textAlign="start"
@@ -101,15 +93,21 @@ const OneSection = ({ navigation }: INav) => {
 
 const Nav = (props: INav) => {
   const { navigation, logoutTitle, logoutPath } = props;
-
+  const theme: typeof inube = useContext(ThemeContext);
+  const navSubtitleAppearance =
+    (theme?.nav?.subtitle?.appearance?.regular as ITextAppearance) ||
+    inube.nav.subtitle.appearance.regular;
+  const navCopyrightAppearance =
+    (theme?.nav?.copyright?.appearance as ITextAppearance) ||
+    inube.nav.copyright.appearance;
   return (
     <StyledNav>
       <Stack direction="column" justifyContent="space-between" height="100dvh">
         <Stack direction="column">
           <Text
             padding="32px 16px 16px 16px"
             as="h2"
-            appearance="gray"
+            appearance={navSubtitleAppearance}
             type="title"
             size="small"
             textAlign="start"
@@ -142,7 +140,7 @@ const Nav = (props: INav) => {
             <Text
               type="label"
               size="medium"
-              appearance="gray"
+              appearance={navCopyrightAppearance}
               padding="24px"
               textAlign="start"
             >
@@ -156,4 +154,4 @@ const Nav = (props: INav) => {
 };
 
 export { Nav };
-export type { INav, INavLink, ILink, INavSection, INavNavigation };
+export type { INav };

src/Nav/props.ts

@@ -1,3 +1,20 @@
+interface ILink {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+  path: string;
+}
+
+interface INavSection {
+  name: string;
+  links: { [key: string]: ILink };
+}
+
+interface INavNavigation {
+  title: string;
+  sections: { [key: string]: INavSection };
+}
+
 const parameters = {
   layout: "fullscreen",
   docs: {
@@ -20,3 +37,4 @@ const props = {
 };
 
 export { parameters, props };
+export type { ILink, INavSection, INavNavigation };

src/Nav/styles.js

@@ -5,11 +5,9 @@ const StyledNav = styled.div`
   width: 248px;
   box-sizing: border-box;
   background-color: ${({ theme }) =>
-    theme?.color?.surface?.nav?.regular || inube.color.surface.nav.regular};
+    theme?.nav?.background?.color || inube.nav.background.color};
   border-right: 1px solid
-    ${({ theme }) =>
-      theme?.color?.stroke?.divider?.regular ||
-      inube.color.stroke.divider.regular};
+    ${({ theme }) => theme?.nav?.divider?.color || inube.nav.divider.color};
 `;
 
 const StyledFooter = styled.footer`
@@ -18,15 +16,11 @@ const StyledFooter = styled.footer`
 
 const SeparatorLine = styled.div`
   width: calc(100% - 32px);
-  margin: ${({ theme }) =>
-    `${theme?.spacing?.s100 || inube.spacing.s100} ${
-      theme?.spacing?.s200 || inube.spacing.s200
-    }`};
+  margin: 8px 16px;
   height: 1px;
-  padding: ${({ theme }) => theme?.spacing?.s0 || inube.spacing.s0};
+  padding: 0px;
   background-color: ${({ theme }) =>
-    theme?.color?.stroke?.divider?.regular ||
-    inube.color.stroke.divider.regular};
+    theme?.nav?.divider?.color || inube.nav.divider.color};
 `;
 
 export { StyledNav, StyledFooter, SeparatorLine };

src/NavLink/index.tsx

@@ -1,9 +1,12 @@
 import { MdKeyboardArrowRight } from "react-icons/md";
-import { Icon } from "@inubekit/icon";
+import { IIconAppearance, Icon } from "@inubekit/icon";
 import { Text } from "@inubekit/text";
 import { Grid } from "@inubekit/grid";
 
 import { StyledLink, StyledNavList } from "./styles";
+import { useContext } from "react";
+import { ThemeContext } from "styled-components";
+import { inube } from "@inubekit/foundations";
 
 interface INavLink {
   id: string;
@@ -26,11 +29,19 @@ const NavLink = (props: INavLink) => {
     onClick,
   } = props;
 
+  const theme: typeof inube = useContext(ThemeContext);
+
+  const selectedNavLinkAppearance =
+    (theme?.nav?.link?.appearance?.selected as IIconAppearance) ||
+    inube.nav.link.appearance.selected;
+  const regularNavLinkAppearance =
+    (theme?.nav?.link?.appearance?.regular as IIconAppearance) ||
+    inube.nav.link.appearance.regular;
   return (
     <StyledNavList
       id={id}
       disabled={disabled}
-      selected={selected}
+      appearance={selected ? selectedNavLinkAppearance : undefined}
       onClick={onClick}
     >
       <StyledLink to={path} disabled={+disabled}>
@@ -43,19 +54,30 @@ const NavLink = (props: INavLink) => {
           {icon && (
             <Icon
               icon={icon}
-              appearance={selected ? "primary" : "dark"}
+              appearance={
+                selected ? selectedNavLinkAppearance : regularNavLinkAppearance
+              }
               disabled={disabled}
               size="24px"
               parentHover={!disabled && true}
             />
           )}
-          <Text type="label" disabled={disabled} textAlign="start">
+          <Text
+            appearance={
+              selected ? selectedNavLinkAppearance : regularNavLinkAppearance
+            }
+            type="label"
+            disabled={disabled}
+            textAlign="start"
+          >
             {label}
           </Text>
           {!disabled && selected && (
             <Icon
               icon={<MdKeyboardArrowRight />}
-              appearance="dark"
+              appearance={
+                selected ? selectedNavLinkAppearance : regularNavLinkAppearance
+              }
               size="24px"
               parentHover={!disabled && true}
             />

src/NavLink/styles.js

@@ -11,40 +11,36 @@ const StyledNavList = styled.li`
   min-width: 180px;
   min-height: 40px;
   box-sizing: border-box;
-  border-left: ${({ disabled, selected, theme }) => {
-    if (selected && !disabled) {
+  border-left: ${({ appearance, disabled, theme }) => {
+    if (appearance && !disabled) {
       return `5px solid ${
-        theme?.color?.stroke?.dark?.regular || inube.color.stroke.dark.regular
+        theme?.nav?.[appearance]?.content?.color?.regular ||
+        inube.text[appearance].content.color.regular
       }`;
     }
-    return `0px`;
+    return `5px solid transparent`;
   }};
   background-color: ${({ selected, disabled, theme }) => {
     if (disabled) {
       return (
-        theme?.color?.surface?.navLink?.regular ||
-        inube.color.surface.navLink.regular
+        theme?.nav?.link?.background?.selected ||
+        inube.nav.link.background.selected
       );
     }
     if (selected && !disabled) {
       return (
-        theme?.color?.surface?.navLink?.selected ||
-        inube.color.surface.navLink.selected
+        theme?.nav?.link?.background?.selected ||
+        inube.nav.link.background.selected
       );
     }
-    return (
-      theme?.color?.surface?.navLink?.regular ||
-      inube.color.surface.navLink.regular
-    );
   }};
 
   ${({ disabled, theme }) =>
     !disabled &&
     `
       &:hover {
         background-color: ${
-          theme?.color?.surface?.navLink?.hover ||
-          inube.color.surface.navLink.hover
+          theme?.nav?.link?.background?.hover || inube.nav.link.background.hover
         };     
       }
   `};

src/index.ts

@@ -1,4 +1,5 @@
 export { Nav } from "./Nav";
 export { NavLink } from "./NavLink";
-export type { INav, ILink, INavSection, INavNavigation } from "./Nav";
+export type { INav } from "./Nav";
 export type { INavLink } from "./NavLink";
+export type { ILink, INavSection, INavNavigation } from "./Nav/props";