Skip to content

New Component lifecycle page #1949

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Apr 23, 2024
Merged

New Component lifecycle page #1949

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c8de059
Fixed broken link in box
GomezIvann Apr 12, 2024
b29a08e
First draft of the Component lifecycle page
GomezIvann Apr 16, 2024
cc23918
Merge branch 'master' into gomezivann/fix-broken-link
raquelarrojo Apr 18, 2024
6d7cc97
Merge branch 'master' into gomezivann/fix-broken-link
raquelarrojo Apr 23, 2024
923f22e
Updates based on feedback
GomezIvann Apr 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions website/pages/overview/component-lifecycle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import Head from "next/head";
import ComponentLifecyclePage from "../../screens/principles/component-lifecycle/ComponentLifecyclePage";

const ComponentLifecycle = () => {
return (
<>
<Head>
<title>Component Lifecycle — Halstack Design System</title>
</Head>
<ComponentLifecyclePage></ComponentLifecyclePage>
</>
);
};

export default ComponentLifecycle;
1 change: 1 addition & 0 deletions website/screens/common/pagesList.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export const themeGeneratorLinks = [

const overviewLinks: LinkDetails[] = [
{ label: "Introduction", path: "/overview/introduction", status: "ready" },
{ label: "Component lifecycle", path: "/overview/component-lifecycle", status: "ready" },
{ label: "Releases", path: "/overview/releases", status: "ready" },
];
const utilitiesLinks: LinkDetails[] = [
Expand Down
11 changes: 7 additions & 4 deletions website/screens/components/box/BoxPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
import PageHeading from "@/common/PageHeading";
import TabsPageHeading from "@/common/TabsPageLayout";
import ComponentHeading from "@/common/ComponentHeading";
import Link from "next/link";

const BoxPageHeading = ({ children }: { children: React.ReactNode }) => {
const tabs = [
Expand All @@ -28,10 +29,12 @@ const BoxPageHeading = ({ children }: { children: React.ReactNode }) => {
be achieved by using a dedicated Box component.
</DxcParagraph>
<DxcAlert type="warning" size="fillParent">
This component will be removed from Halstack Design System in the future.
Please consider the new{" "}
<DxcLink href="/components/container">Container</DxcLink> component
as an alternative for your current use cases.
This component will be removed from Halstack Design System in the
future. Please consider the new{" "}
<Link href="/components/container" passHref legacyBehavior>
<DxcLink href="/components/container">Container</DxcLink>
</Link>{" "}
component as an alternative for your current use cases.
</DxcAlert>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
</DxcFlex>
Expand Down
234 changes: 234 additions & 0 deletions website/screens/principles/component-lifecycle/ComponentLifecyclePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,234 @@
import DocFooter from "@/common/DocFooter";
import PageHeading from "@/common/PageHeading";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import {
DxcBulletedList,
DxcFlex,
DxcHeading,
DxcParagraph,
} from "@dxc-technology/halstack-react";

const sections = [
{
title: "Introduction",
content: (
<>
<DxcParagraph>
The lifecycle of a component within a Design System comprises several
stages, spanning from its creation to eventual retirement. Starting
with the design and development phases, components are conceptualized,
designed and implemented. Once in use, they undergo real-world testing
and user feedback to identify usability issues and potential
improvements. As the system progresses, components may be upgraded or
even withdrawn to meet ever-evolving standards and user requirements.
</DxcParagraph>
<DxcParagraph>
Each of the stages 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
component can go backwards if the situation requires so.
</DxcParagraph>
<DxcParagraph>
Adhering to this lifecycle ensures that our designers and developers
uphold a well-organized Design System, facilitating a smooth and
intuitive user experience.
</DxcParagraph>
</>
),
},
{
title: "Experimental",
content: (
<>
<DxcParagraph>
The component is ready for preliminary usage. It meets most maturity
criteria, and use is encouraged for most scenarios. It may undergo
last minute changes from its first uses, unexpected scenarios and
actual user experience, which can sometimes be hard to estimate.
</DxcParagraph>
</>
),
subSections: [
{
title: "Implications",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
<strong>Partial documentation.</strong> The documentation of the
component may be incomplete, with missing parts, examples or even
entire pages.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Partial implementation.</strong> The component may lack
some features or new ones may be incoming. Regardless of this, all
the released functionality is fully tested, including visual
regression testing, snapshot testing, unit test, etc.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Already released and available in the next version of the Halstack
npm library.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Already released and available in our design tools.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
The component API may be subject to change.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
],
},
{
title: "New",
content: (
<>
<DxcParagraph>
The component has reached a level of maturity and completeness that
the Halstack team is happy and confident with.
</DxcParagraph>
</>
),
subSections: [
{
title: "Implications",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
<strong>Fully available.</strong> The component is already
available in our design tools and has also been released in a{" "}
minor version of the Halstack npm library.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Fully documented.</strong> Usage guidelines, API
configuration, examples and design specifications cover all the
features and use cases of the component.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Fully implemented.</strong> All the planned features of
the component are available.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Fully tested.</strong> All the functionality offered by
the component has been tested by our common tools (storybook,
jest, chromatic, etc).
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
],
},
{
title: "Stable",
content: (
<>
<DxcParagraph>
The component is significantly mature and usage is strongly
encouraged, with long-term support expected.
</DxcParagraph>
</>
),
subSections: [
{
title: "Implications",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
The API remains stable, with no breaking changes for at least one
month.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
The component implementation remains fairly stable, with no
breaking changes for at least one month.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
],
},
{
title: "Legacy",
content: (
<>
<DxcParagraph>
The component is stable but there are plans to replace its
functionality with a new component or a combination of new components.
The use of legacy components is not discouraged, with the caveat that
they will be deprecated and replaced in the next major release.
</DxcParagraph>
</>
),
subSections: [
{
title: "Implications",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
Documentation exists for the legacy component and includes any
alternative components.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Manual or automated migration paths have been documented and will
be code-available as soon as possible.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
The component will be considered as legacy for one release, so
users can prepare to its eventual removal.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
],
},
{
title: "Deprecated",
content: (
<>
<DxcParagraph>
The component will be removed in the near future. Users should start
avoiding it for new application and existing ones should start
considering other approaches.
</DxcParagraph>
</>
),
subSections: [
{
title: "Implications",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
The component will be removed in the next major release.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
],
},
];

const ComponentLifecyclePage = () => {
return (
<DxcFlex direction="column" gap="4rem">
<PageHeading>
<DxcFlex direction="column" gap="2rem">
<DxcHeading
level={1}
text="Component lifecycle"
weight="bold"
></DxcHeading>
</DxcFlex>
</PageHeading>
<QuickNavContainerLayout>
<QuickNavContainer
sections={sections}
startHeadingLevel={2}
></QuickNavContainer>
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/principles/component-lifecycle/ComponentLifecyclePage.tsx" />
</DxcFlex>
);
};

export default ComponentLifecyclePage;