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

raquelarrojo · web-flow · commit 661349fb521d · 2024-04-30T16:57:18.000+02:00
Site updates
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/website/screens/overview/component-lifecycle/ComponentLifecyclePage.tsx b/website/screens/overview/component-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>
   );
 };

Original file line number	Diff line number	Diff line change
`@@ -117,7 +117,7 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {`
`117`	`117`	`>`
`118`	`118`	`{label}`
`119`	`119`	`{status && status !== "stable" && (`
`120`		`- <StatusBadge componentStatus status={status} />`
	`120`	`+ <StatusBadge hasTitle status={status} />`
`121`	`121`	`)}`
`122`	`122`	`</DxcApplicationLayout.SideNav.Link>`
`123`	`123`	`</Link>`