Merge pull request #1967 from dxc-technology/gomezivann/site-updates

Site updates
dxc-technology · Apr 30, 2024 · 661349f · 661349f
2 parents 74dd241 + 09653a9
commit 661349f
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 137 deletions.
diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.json
@@ -8,7 +8,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@dxc-technology/halstack-react": "12.0.2",
+    "@dxc-technology/halstack-react": "next",
     "@radix-ui/react-popover": "^1.0.7",
     "@types/styled-components": "5.1.29",
     "cross-env": "^7.0.3",

diff --git a/website/pages/_app.tsx b/website/pages/_app.tsx
@@ -117,7 +117,7 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
                             >
                               {label}
                               {status && status !== "stable" && (
-                                <StatusBadge componentStatus status={status} />
+                                <StatusBadge hasTitle status={status} />
                               )}
                             </DxcApplicationLayout.SideNav.Link>
                           </Link>

diff --git a/website/pages/overview/component-lifecycle.tsx b/website/pages/overview/component-lifecycle.tsx
@@ -1,11 +1,11 @@
 import Head from "next/head";
-import ComponentLifecyclePage from "../../screens/principles/component-lifecycle/ComponentLifecyclePage";
+import ComponentLifecyclePage from "../../screens/overview/component-lifecycle/ComponentLifecyclePage";
 
 const ComponentLifecycle = () => {
   return (
     <>
       <Head>
-        <title>Component Lifecycle — Halstack Design System</title>
+        <title>Component lifecycle — Halstack Design System</title>
       </Head>
       <ComponentLifecyclePage></ComponentLifecyclePage>
     </>

diff --git a/website/screens/common/StatusBadge.tsx b/website/screens/common/StatusBadge.tsx
@@ -2,7 +2,7 @@ import { DxcBadge } from "@dxc-technology/halstack-react";
 import { ComponentStatus } from "./pagesList";
 
 type StatusBadgeProps = {
-  componentStatus?: boolean;
+  hasTitle?: boolean;
   status: ComponentStatus | "required";
 };
 
@@ -40,11 +40,11 @@ const getBadgeTitle = (status: StatusBadgeProps["status"]) => {
   }
 };
 
-const StatusBadge = ({ componentStatus = false, status }: StatusBadgeProps) => (
+const StatusBadge = ({ hasTitle = false, status }: StatusBadgeProps) => (
   <DxcBadge
     label={status[0].toUpperCase() + status.slice(1)}
     color={getBadgeColor(status)}
-    title={componentStatus ? getBadgeTitle(status) : undefined}
+    title={hasTitle ? getBadgeTitle(status) : undefined}
     size="small"
   />
 );

diff --git a/website/screens/components/contextual-menu/code/ContextualMenuCodePage.tsx b/website/screens/components/contextual-menu/code/ContextualMenuCodePage.tsx
@@ -13,6 +13,7 @@ const itemTypeString = `{
     icon?: string | SVG;
     label: string;
     onSelect?: () => void;
+    selectedByDefault?: boolean;
 }`;
 
 const groupItemTypeString = `{
@@ -23,7 +24,7 @@ const groupItemTypeString = `{
 }`;
 
 const sectionTypeString = `{
-    items: (Item | GroupItem)[]; 
+    items: (Item | GroupItem)[];
     title?: string
 }`;
 

diff --git a/website/screens/components/contextual-menu/usage/ContextualMenuUsagePage.tsx b/website/screens/components/contextual-menu/usage/ContextualMenuUsagePage.tsx
@@ -2,7 +2,6 @@ import {
   DxcParagraph,
   DxcFlex,
   DxcBulletedList,
-  DxcLink,
 } from "@dxc-technology/halstack-react";
 import DocFooter from "@/common/DocFooter";
 import QuickNavContainer from "@/common/QuickNavContainer";
@@ -45,6 +44,10 @@ const sections = [
               Use our Badge component as a complement to the menu items to show
               the status of any navigable section.
             </DxcBulletedList.Item>
+            <DxcBulletedList.Item>
+              We strongly recommend only selecting by default the first option
+              of the menu. Any other option may become unintuitive for the user.
+            </DxcBulletedList.Item>
           </DxcBulletedList>
         ),
       },

diff --git a/...nent-lifecycle/ComponentLifecyclePage.tsx → ...nent-lifecycle/ComponentLifecyclePage.tsx b/...nent-lifecycle/ComponentLifecyclePage.tsx → ...nent-lifecycle/ComponentLifecyclePage.tsx
@@ -24,7 +24,7 @@ const sections = [
           even withdrawn to meet ever-evolving standards and user requirements.
         </DxcParagraph>
         <DxcParagraph>
-          Each of the stages can be understood as milestones that summarize the
+          Each of the states can be understood as milestones that summarize the
           maturity lifecycle of the components in Halstack and have their
           implications or requirements which need to be fulfilled to move from
           one to another. This process is non-linear, which means that a
@@ -226,7 +226,7 @@ const ComponentLifecyclePage = () => {
           startHeadingLevel={2}
         ></QuickNavContainer>
       </QuickNavContainerLayout>
-      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/principles/component-lifecycle/ComponentLifecyclePage.tsx" />
+      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/overview/component-lifecycle/ComponentLifecyclePage.tsx" />
     </DxcFlex>
   );
 };