Skip to content

Commit 8a25c44

Browse files
raquelarrojoraquelarrojo
authored
Merge pull request #1949 from dxc-technology/gomezivann/fix-broken-link
New Component lifecycle page
2 parents 04efb2d + 923f22e commit 8a25c44

File tree

4 files changed

+257
-4
lines changed

4 files changed

+257
-4
lines changed

‎website/pages/overview/component-lifecycle.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import Head from "next/head";
2+
import ComponentLifecyclePage from "../../screens/principles/component-lifecycle/ComponentLifecyclePage";
3+
4+
const ComponentLifecycle = () => {
5+
return (
6+
<>
7+
<Head>
8+
<title>Component Lifecycle — Halstack Design System</title>
9+
</Head>
10+
<ComponentLifecyclePage></ComponentLifecyclePage>
11+
</>
12+
);
13+
};
14+
15+
export default ComponentLifecycle;

‎website/screens/common/pagesList.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export const themeGeneratorLinks = [
2424

2525
const overviewLinks: LinkDetails[] = [
2626
{ label: "Introduction", path: "/overview/introduction", status: "ready" },
27+
{ label: "Component lifecycle", path: "/overview/component-lifecycle", status: "ready" },
2728
{ label: "Releases", path: "/overview/releases", status: "ready" },
2829
];
2930
const utilitiesLinks: LinkDetails[] = [

‎website/screens/components/box/BoxPageLayout.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
import PageHeading from "@/common/PageHeading";
88
import TabsPageHeading from "@/common/TabsPageLayout";
99
import ComponentHeading from "@/common/ComponentHeading";
10+
import Link from "next/link";
1011

1112
const BoxPageHeading = ({ children }: { children: React.ReactNode }) => {
1213
const tabs = [
@@ -28,10 +29,12 @@ const BoxPageHeading = ({ children }: { children: React.ReactNode }) => {
2829
be achieved by using a dedicated Box component.
2930
</DxcParagraph>
3031
<DxcAlert type="warning" size="fillParent">
31-
This component will be removed from Halstack Design System in the future.
32-
Please consider the new{" "}
33-
<DxcLink href="/components/container">Container</DxcLink> component
34-
as an alternative for your current use cases.
32+
This component will be removed from Halstack Design System in the
33+
future. Please consider the new{" "}
34+
<Link href="/components/container" passHref legacyBehavior>
35+
<DxcLink href="/components/container">Container</DxcLink>
36+
</Link>{" "}
37+
component as an alternative for your current use cases.
3538
</DxcAlert>
3639
<TabsPageHeading tabs={tabs}></TabsPageHeading>
3740
</DxcFlex>

‎website/screens/principles/component-lifecycle/ComponentLifecyclePage.tsx‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
import DocFooter from "@/common/DocFooter";
2+
import PageHeading from "@/common/PageHeading";
3+
import QuickNavContainer from "@/common/QuickNavContainer";
4+
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
5+
import {
6+
DxcBulletedList,
7+
DxcFlex,
8+
DxcHeading,
9+
DxcParagraph,
10+
} from "@dxc-technology/halstack-react";
11+
12+
const sections = [
13+
{
14+
title: "Introduction",
15+
content: (
16+
<>
17+
<DxcParagraph>
18+
The lifecycle of a component within a Design System comprises several
19+
stages, spanning from its creation to eventual retirement. Starting
20+
with the design and development phases, components are conceptualized,
21+
designed and implemented. Once in use, they undergo real-world testing
22+
and user feedback to identify usability issues and potential
23+
improvements. As the system progresses, components may be upgraded or
24+
even withdrawn to meet ever-evolving standards and user requirements.
25+
</DxcParagraph>
26+
<DxcParagraph>
27+
Each of the stages can be understood as milestones that summarize the
28+
maturity lifecycle of the components in Halstack and have their
29+
implications or requirements which need to be fulfilled to move from
30+
one to another. This process is non-linear, which means that a
31+
component can go backwards if the situation requires so.
32+
</DxcParagraph>
33+
<DxcParagraph>
34+
Adhering to this lifecycle ensures that our designers and developers
35+
uphold a well-organized Design System, facilitating a smooth and
36+
intuitive user experience.
37+
</DxcParagraph>
38+
</>
39+
),
40+
},
41+
{
42+
title: "Experimental",
43+
content: (
44+
<>
45+
<DxcParagraph>
46+
The component is ready for preliminary usage. It meets most maturity
47+
criteria, and use is encouraged for most scenarios. It may undergo
48+
last minute changes from its first uses, unexpected scenarios and
49+
actual user experience, which can sometimes be hard to estimate.
50+
</DxcParagraph>
51+
</>
52+
),
53+
subSections: [
54+
{
55+
title: "Implications",
56+
content: (
57+
<DxcBulletedList>
58+
<DxcBulletedList.Item>
59+
<strong>Partial documentation.</strong> The documentation of the
60+
component may be incomplete, with missing parts, examples or even
61+
entire pages.
62+
</DxcBulletedList.Item>
63+
<DxcBulletedList.Item>
64+
<strong>Partial implementation.</strong> The component may lack
65+
some features or new ones may be incoming. Regardless of this, all
66+
the released functionality is fully tested, including visual
67+
regression testing, snapshot testing, unit test, etc.
68+
</DxcBulletedList.Item>
69+
<DxcBulletedList.Item>
70+
Already released and available in the next version of the Halstack
71+
npm library.
72+
</DxcBulletedList.Item>
73+
<DxcBulletedList.Item>
74+
Already released and available in our design tools.
75+
</DxcBulletedList.Item>
76+
<DxcBulletedList.Item>
77+
The component API may be subject to change.
78+
</DxcBulletedList.Item>
79+
</DxcBulletedList>
80+
),
81+
},
82+
],
83+
},
84+
{
85+
title: "New",
86+
content: (
87+
<>
88+
<DxcParagraph>
89+
The component has reached a level of maturity and completeness that
90+
the Halstack team is happy and confident with.
91+
</DxcParagraph>
92+
</>
93+
),
94+
subSections: [
95+
{
96+
title: "Implications",
97+
content: (
98+
<DxcBulletedList>
99+
<DxcBulletedList.Item>
100+
<strong>Fully available.</strong> The component is already
101+
available in our design tools and has also been released in a{" "}
102+
minor version of the Halstack npm library.
103+
</DxcBulletedList.Item>
104+
<DxcBulletedList.Item>
105+
<strong>Fully documented.</strong> Usage guidelines, API
106+
configuration, examples and design specifications cover all the
107+
features and use cases of the component.
108+
</DxcBulletedList.Item>
109+
<DxcBulletedList.Item>
110+
<strong>Fully implemented.</strong> All the planned features of
111+
the component are available.
112+
</DxcBulletedList.Item>
113+
<DxcBulletedList.Item>
114+
<strong>Fully tested.</strong> All the functionality offered by
115+
the component has been tested by our common tools (storybook,
116+
jest, chromatic, etc).
117+
</DxcBulletedList.Item>
118+
</DxcBulletedList>
119+
),
120+
},
121+
],
122+
},
123+
{
124+
title: "Stable",
125+
content: (
126+
<>
127+
<DxcParagraph>
128+
The component is significantly mature and usage is strongly
129+
encouraged, with long-term support expected.
130+
</DxcParagraph>
131+
</>
132+
),
133+
subSections: [
134+
{
135+
title: "Implications",
136+
content: (
137+
<DxcBulletedList>
138+
<DxcBulletedList.Item>
139+
The API remains stable, with no breaking changes for at least one
140+
month.
141+
</DxcBulletedList.Item>
142+
<DxcBulletedList.Item>
143+
The component implementation remains fairly stable, with no
144+
breaking changes for at least one month.
145+
</DxcBulletedList.Item>
146+
</DxcBulletedList>
147+
),
148+
},
149+
],
150+
},
151+
{
152+
title: "Legacy",
153+
content: (
154+
<>
155+
<DxcParagraph>
156+
The component is stable but there are plans to replace its
157+
functionality with a new component or a combination of new components.
158+
The use of legacy components is not discouraged, with the caveat that
159+
they will be deprecated and replaced in the next major release.
160+
</DxcParagraph>
161+
</>
162+
),
163+
subSections: [
164+
{
165+
title: "Implications",
166+
content: (
167+
<DxcBulletedList>
168+
<DxcBulletedList.Item>
169+
Documentation exists for the legacy component and includes any
170+
alternative components.
171+
</DxcBulletedList.Item>
172+
<DxcBulletedList.Item>
173+
Manual or automated migration paths have been documented and will
174+
be code-available as soon as possible.
175+
</DxcBulletedList.Item>
176+
<DxcBulletedList.Item>
177+
The component will be considered as legacy for one release, so
178+
users can prepare to its eventual removal.
179+
</DxcBulletedList.Item>
180+
</DxcBulletedList>
181+
),
182+
},
183+
],
184+
},
185+
{
186+
title: "Deprecated",
187+
content: (
188+
<>
189+
<DxcParagraph>
190+
The component will be removed in the near future. Users should start
191+
avoiding it for new application and existing ones should start
192+
considering other approaches.
193+
</DxcParagraph>
194+
</>
195+
),
196+
subSections: [
197+
{
198+
title: "Implications",
199+
content: (
200+
<DxcBulletedList>
201+
<DxcBulletedList.Item>
202+
The component will be removed in the next major release.
203+
</DxcBulletedList.Item>
204+
</DxcBulletedList>
205+
),
206+
},
207+
],
208+
},
209+
];
210+
211+
const ComponentLifecyclePage = () => {
212+
return (
213+
<DxcFlex direction="column" gap="4rem">
214+
<PageHeading>
215+
<DxcFlex direction="column" gap="2rem">
216+
<DxcHeading
217+
level={1}
218+
text="Component lifecycle"
219+
weight="bold"
220+
></DxcHeading>
221+
</DxcFlex>
222+
</PageHeading>
223+
<QuickNavContainerLayout>
224+
<QuickNavContainer
225+
sections={sections}
226+
startHeadingLevel={2}
227+
></QuickNavContainer>
228+
</QuickNavContainerLayout>
229+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/principles/component-lifecycle/ComponentLifecyclePage.tsx" />
230+
</DxcFlex>
231+
);
232+
};
233+
234+
export default ComponentLifecyclePage;

0 commit comments

Comments
 (0)