[Patch] Fix #399 Sidenav component specs update

dxc-technology · Oct 28, 2021 · d1e7ca2 · d1e7ca2
1 parent 4291e62
commit d1e7ca2
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 93 deletions.
diff --git a/docs/src/pages/components/cdk-components/sidenav/examples/compound.jsx b/docs/src/pages/components/cdk-components/sidenav/examples/compound.jsx
@@ -2,22 +2,21 @@ import { DxcSidenav } from "@dxc-technology/halstack-react";
 import { useState } from "react";
 
 const code = `() => {
-    const linkClick = () => {
-        console.log("click");
-    };
+  const linkClick = () => {
+    console.log("click");
+  };
 
-    return (
-        <DxcSidenav>
-            <DxcSidenav.Title>My sidenav</DxcSidenav.Title>
-            <p>This is a sidenav.</p>
-            <DxcSidenav.Subtitle>Components</DxcSidenav.Subtitle>
-            <DxcSidenav.Link href="#">Button</DxcSidenav.Link>
-            <DxcSidenav.Link href="#">Date</DxcSidenav.Link>
-            <DxcSidenav.Subtitle>Guidelines</DxcSidenav.Subtitle>
-            <DxcSidenav.Link onClick={linkClick}>Layout</DxcSidenav.Link>
-            <DxcSidenav.Link onClick={linkClick}>Footer</DxcSidenav.Link>
-        </DxcSidenav>
-    );
+  return (
+    <DxcSidenav padding="large">
+      <DxcSidenav.Title>My sidenav</DxcSidenav.Title>
+      <DxcSidenav.Subtitle>Components</DxcSidenav.Subtitle>
+      <DxcSidenav.Link href="#">Button</DxcSidenav.Link>
+      <DxcSidenav.Link href="#">Date</DxcSidenav.Link>
+      <DxcSidenav.Subtitle>Guidelines</DxcSidenav.Subtitle>
+      <DxcSidenav.Link onClick={linkClick}>Layout</DxcSidenav.Link>
+      <DxcSidenav.Link onClick={linkClick}>Footer</DxcSidenav.Link>
+    </DxcSidenav>
+  );
 }`;
 
 const scope = {

diff --git a/docs/src/pages/themeBuilder/themes/AdvancedTheme.json b/docs/src/pages/themeBuilder/themes/AdvancedTheme.json
@@ -697,35 +697,36 @@
     "arrowColorOnDark": "#ffffff"
   },
   "sidenav": {
-    "backgroundColor": "#F8F8F8",
-    "arrowContainerColor": "#D9D9D9",
+    "backgroundColor": "#f2f2f2",
+    "arrowContainerColor": "#e6e6e6",
     "arrowColor": "#000000",
     "titleFontFamily": "Open Sans, sans-serif",
     "titleFontSize": "1.5rem",
     "titleFontStyle": "normal",
     "titleFontWeight": "400",
-    "titleFontColor": "#000000de",
+    "titleFontColor": "#000000",
     "titleFontTextTransform": "none",
     "titleFontLetterSpacing": "0",
     "subtitleFontFamily": "Open Sans, sans-serif",
-    "subtitleFontSize": "0.75rem",
+    "subtitleFontSize": "1rem",
     "subtitleFontStyle": "normal",
     "subtitleFontWeight": "400",
-    "subtitleFontColor": "#00000099",
+    "subtitleFontColor": "#4d4d4d",
     "subtitleFontTextTransform": "uppercase",
-    "subtitleFontLetterSpacing": "0.1em",
+    "subtitleFontLetterSpacing": "0.05em",
     "linkFontFamily": "Open Sans, sans-serif",
     "linkFontSize": "0.875rem",
     "linkFontStyle": "normal",
     "linkFontWeight": "400",
-    "linkFontColor": "#00000099",
+    "linkFontColor": "#4d4d4d",
     "linkFontTextTransform": "none",
     "linkFontLetterSpacing": "0.025em",
     "linkTextDecoration": "none",
-    "linkMarginTop": "6px",
-    "linkMarginRight": "18px",
-    "linkMarginBottom": "6px",
-    "linkMarginLeft": "18px",
+    "linkMarginTop": "4px",
+    "linkMarginBottom": "4px",
+    "linkMarginRight": "16px",
+    "linkMarginLeft": "16px",
+    "linkFocusColor": "#0095ff",
     "scrollBarThumbColor": "#66666626",
     "scrollBarTrackColor": "transparent"
   },

diff --git a/docs/src/pages/themeBuilder/themes/schemas/Advanced.schema.json b/docs/src/pages/themeBuilder/themes/schemas/Advanced.schema.json
@@ -726,6 +726,7 @@
     "linkMarginRight": "length",
     "linkMarginBottom": "length",
     "linkMarginLeft": "length",
+    "linkFocusColor": "color",
     "scrollBarThumbColor": "color",
     "scrollBarTrackColor": "color"
   },

diff --git a/lib/src/common/variables.js b/lib/src/common/variables.js
@@ -862,35 +862,36 @@ export const componentTokens = {
     focusColorOnDark: globalTokens.hal_blue_l_50,
   },
   sidenav: {
-    backgroundColor: globalTokens.lighterGrey,
-    arrowContainerColor: globalTokens.lightGrey,
-    arrowColor: globalTokens.black,
+    backgroundColor: globalTokens.hal_grey_l_95,
+    arrowContainerColor: globalTokens.hal_grey_l_90,
+    arrowColor: globalTokens.hal_black,
     titleFontFamily: globalTokens.type_sans,
     titleFontSize: globalTokens.type_scale_05,
     titleFontStyle: globalTokens.type_normal,
     titleFontWeight: globalTokens.type_regular,
-    titleFontColor: "#000000de",
+    titleFontColor: globalTokens.hal_black,
     titleFontTextTransform: "none",
     titleFontLetterSpacing: globalTokens.type_spacing_normal,
     subtitleFontFamily: globalTokens.type_sans,
-    subtitleFontSize: globalTokens.type_scale_01,
+    subtitleFontSize: globalTokens.type_scale_03,
     subtitleFontStyle: globalTokens.type_normal,
     subtitleFontWeight: globalTokens.type_regular,
-    subtitleFontColor: "#00000099",
+    subtitleFontColor: globalTokens.color_grey_800,
     subtitleFontTextTransform: globalTokens.type_uppercase,
-    subtitleFontLetterSpacing: globalTokens.type_spacing_wide_03,
+    subtitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
     linkFontFamily: globalTokens.type_sans,
     linkFontSize: globalTokens.type_scale_02,
     linkFontStyle: globalTokens.type_normal,
     linkFontWeight: globalTokens.type_regular,
-    linkFontColor: "#00000099",
+    linkFontColor: globalTokens.color_grey_800,
     linkFontTextTransform: "none",
     linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
     linkTextDecoration: globalTokens.type_no_line,
-    linkMarginTop: "6px",
-    linkMarginRight: "18px",
-    linkMarginBottom: "6px",
-    linkMarginLeft: "18px",
+    linkMarginTop: "4px",
+    linkMarginBottom: "4px",
+    linkMarginRight: "16px",
+    linkMarginLeft: "16px",
+    linkFocusColor: globalTokens.hal_blue_l_50,
     scrollBarThumbColor: "#66666626",
     scrollBarTrackColor: globalTokens.transparent,
   },

diff --git a/lib/src/layout/ApplicationLayout.jsx b/lib/src/layout/ApplicationLayout.jsx
@@ -137,39 +137,39 @@ const DxcApplicationLayout = ({ children }) => {
 
   return (
     <ThemeProvider theme={colorsTheme.sidenav}>
-          <ApplicationLayoutContainer ref={ref}>
-          <HeaderContainer>{header}</HeaderContainer>
-          <BodyContainer>
-            <ContentContainer>
-              <SideNavArrowContainer isSideNavVisible={isSideNavVisible}>
-                {sideNav}
-                <ArrowContainer>
-                  {sideNav && (displayArrow || isResponsive) && (
-                    <ArrowTrigger tabIndex={0} onClick={handleSidenav} isSideNavVisible={isSideNavVisible}>
-                      <ArrowIcon />
-                    </ArrowTrigger>
-                  )}
-                </ArrowContainer>
-              </SideNavArrowContainer>
-              <MainBodyContainer>
-                <MainContent
-                  sideNav={sideNav}
-                  mode={isResponsive ? "overlay" : sideNavMode}
-                  isSideNavVisible={isSideNavVisible}
-                >
-                  {main}
-                </MainContent>
-                <FooterContainer
-                  sideNav={sideNav}
-                  mode={isResponsive ? "overlay" : sideNavMode}
-                  isSideNavVisible={isSideNavVisible}
-                >
-                  {footer}
-                </FooterContainer>
-              </MainBodyContainer>
-            </ContentContainer>
-          </BodyContainer>
-          </ApplicationLayoutContainer>
+      <ApplicationLayoutContainer ref={ref}>
+        <HeaderContainer>{header}</HeaderContainer>
+        <BodyContainer>
+          <ContentContainer>
+            <SideNavArrowContainer isSideNavVisible={isSideNavVisible}>
+              {sideNav}
+              <ArrowContainer>
+                {sideNav && (displayArrow || isResponsive) && (
+                  <ArrowTrigger tabIndex={0} onClick={handleSidenav} isSideNavVisible={isSideNavVisible}>
+                    <ArrowIcon />
+                  </ArrowTrigger>
+                )}
+              </ArrowContainer>
+            </SideNavArrowContainer>
+            <MainBodyContainer>
+              <MainContent
+                sideNav={sideNav}
+                mode={isResponsive ? "overlay" : sideNavMode}
+                isSideNavVisible={isSideNavVisible}
+              >
+                {main}
+              </MainContent>
+              <FooterContainer
+                sideNav={sideNav}
+                mode={isResponsive ? "overlay" : sideNavMode}
+                isSideNavVisible={isSideNavVisible}
+              >
+                {footer}
+              </FooterContainer>
+            </MainBodyContainer>
+          </ContentContainer>
+        </BodyContainer>
+      </ApplicationLayoutContainer>
     </ThemeProvider>
   );
 };
@@ -186,7 +186,7 @@ const ApplicationLayoutContainer = styled.div`
   top: 64px;
   bottom: 0;
   left: 0;
-  right:0;
+  right: 0;
 `;
 
 const HeaderContainer = styled.div`

diff --git a/lib/src/link/Link.jsx b/lib/src/link/Link.jsx
@@ -161,16 +161,15 @@ const LinkText = styled.div`
 const LinkIcon = styled.img`
   width: ${(props) => props.theme.iconSize};
   height: ${(props) => props.theme.iconSize};
-  ${(props) => (props.iconPosition === "before" ? "margin-right" : "margin-left")}: ${(props) =>
-    props.theme.iconSpacing};
+  ${(props) => `${(props.iconPosition === "before" ? "margin-right" : "margin-left")}: ${props.theme.iconSpacing}`};
 `;
 
 const LinkIconContainer = styled.div`
   width: ${(props) => props.theme.iconSize};
   height: ${(props) => props.theme.iconSize};
-  ${(props) => (props.iconPosition === "before" ? "margin-right" : "margin-left")}: ${(props) =>
-    props.theme.iconSpacing};
+  ${(props) => `${(props.iconPosition === "before" ? "margin-right" : "margin-left")}: ${props.theme.iconSpacing}`};
   overflow: hidden;
+  
   img,
   svg {
     height: 100%;

diff --git a/lib/src/sidenav/Sidenav.jsx b/lib/src/sidenav/Sidenav.jsx
@@ -19,23 +19,19 @@ const DxcSidenav = ({ padding, children }) => {
   );
 };
 
-const Title = ({ children }) => {
-  return <SideNavMenuTitle>{children}</SideNavMenuTitle>;
-};
+const Title = ({ children }) => <SideNavMenuTitle>{children}</SideNavMenuTitle>;
 
-const Subtitle = ({ children }) => {
-  return <SideNavMenuSubTitle>{children}</SideNavMenuSubTitle>;
-};
+const Subtitle = ({ children }) => <SideNavMenuSubTitle>{children}</SideNavMenuSubTitle>;
 
-const Link = ({ href, onClick, children }) => {
-  return (
-    <SideNavMenuLink href={href} onClick={onClick}>
-      {children}
-    </SideNavMenuLink>
-  );
-};
+const Link = ({ href, onClick, children }) => (
+  <SideNavMenuLink href={href} onClick={onClick}>
+    {children}
+  </SideNavMenuLink>
+);
 
 const SideNavContainer = styled.div`
+  display: flex;
+  flex-direction: column;
   background-color: ${(props) => props.theme.backgroundColor};
   max-width: 300px;
   width: ${(props) => (props.padding ? `calc(300px - ${spaces[props.padding]} - ${spaces[props.padding]})` : "300px")};
@@ -54,8 +50,6 @@ const SideNavContainer = styled.div`
     background-color: ${(props) => props.theme.scrollBarThumbColor};
     border-radius: 3px;
   }
-  display: flex;
-  flex-direction: column;
 `;
 
 const SideNavMenuTitle = styled.div`
@@ -66,7 +60,7 @@ const SideNavMenuTitle = styled.div`
   color: ${(props) => props.theme.titleFontColor};
   letter-spacing: ${(props) => props.theme.titleFontLetterSpacing};
   text-transform: ${(props) => props.theme.titleFontTextTransform};
-  margin: 15px 0;
+  margin-bottom: 16px;
 `;
 
 const SideNavMenuSubTitle = styled.div`
@@ -77,7 +71,7 @@ const SideNavMenuSubTitle = styled.div`
   color: ${(props) => props.theme.subtitleFontColor};
   letter-spacing: ${(props) => props.theme.subtitleFontLetterSpacing};
   text-transform: ${(props) => props.theme.subtitleFontTextTransform};
-  margin-top: 15px;
+  margin-bottom: 4px;
 `;
 
 const SideNavMenuLink = styled.a`
@@ -92,6 +86,11 @@ const SideNavMenuLink = styled.a`
   margin: ${(props) =>
     `${props.theme.linkMarginTop} ${props.theme.linkMarginRight} ${props.theme.linkMarginBottom} ${props.theme.linkMarginLeft}`};
   cursor: pointer;
+
+  :focus-visible {
+    outline: 2px solid ${(props) => props.theme.linkFocusColor};
+    outline-offset: 1px;
+  }
 `;
 
 DxcSidenav.propTypes = {