Skip to content

Commit d09765f

Browse files
marcialfpsmarcialfps
authored
Merge branch 'master' into marcialfps-issue-1218
2 parents 2c6f90d + 3ddd593 commit d09765f

File tree

1 file changed

+143
-107
lines changed

1 file changed

+143
-107
lines changed

‎website/screens/overview/introduction/IntroductionPage.tsx‎

Lines changed: 143 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -12,151 +12,187 @@ import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
1212

1313
const sections = [
1414
{
15-
title: "Introduction",
15+
title: "What is Halstack",
1616
content: (
1717
<DxcParagraph>
18-
Halstack is the DXC Technology&#39;s open source Design System for
19-
insurance products and digital experiences. Our system provides all the
20-
tools and resources needed to create superior, beautiful but above all,
21-
functional user experiences.
18+
Halstack is an Open Source Design System built and maintained by DXC
19+
Technology with the purpose of providing all the necessary tools for
20+
designing and implementing accessible, intuitive and consistent User
21+
Experiences with Adobe XD and React.
2222
</DxcParagraph>
2323
),
24-
},
25-
{
26-
title: "Design principles",
27-
content: (
28-
<>
29-
<DxcParagraph>
30-
Halstack design principles are the fundamental part of DXC
31-
Technology&#39;s approach to provide guidance for development teams in
32-
order to deliver delightful and consistent user experiences to our
33-
customers:
34-
</DxcParagraph>
35-
<DxcBulletedList>
36-
<DxcBulletedList.Item>Balance</DxcBulletedList.Item>
37-
<DxcBulletedList.Item>Consistency</DxcBulletedList.Item>
38-
<DxcBulletedList.Item>Visual hierarchy</DxcBulletedList.Item>
39-
</DxcBulletedList>
40-
<DxcParagraph>
41-
All our components, design tokens, accessibility guidelines,
42-
responsive design techniques, and layout proposals have been carefully
43-
curated by DXC design and engineering teams with the objective of
44-
creating a unique visual language and ecosystem for our applications.
45-
This is the DXC way of creating User Experiences.
46-
</DxcParagraph>
47-
</>
48-
),
49-
},
50-
{
51-
title: "Open Source",
52-
content: (
53-
<>
54-
<DxcParagraph>
55-
Halstack is an open source Design System, this means that we work
56-
towards DXC Technology bussines needs, but it is open for anyone to
57-
use and contribute back to.
58-
</DxcParagraph>
59-
<DxcParagraph>
60-
We are charmed to receive external contributions to help us find bugs,
61-
design new features, or help us improve the project documentation. If
62-
you&#39;re interested, definitely check out our{" "}
63-
<DxcLink href="https://github.com/dxc-technology/halstack-style-guide/blob/master/contributing/overview.md">
64-
contribution guidelines
65-
</DxcLink>
66-
.
67-
</DxcParagraph>
68-
</>
69-
),
70-
},
71-
{
72-
title: "Our Assets",
7324
subSections: [
7425
{
75-
title: "Design",
26+
title: "A tool for designers",
7627
content: (
7728
<DxcParagraph>
78-
In addition to our design guidelines, we mantain an{" "}
79-
<DxcLink href="https://shared-assets.adobe.com/link/732533f4-d925-487e-4761-9a760574cfac">
80-
Adobe XD public library
81-
</DxcLink>{" "}
82-
in order to provide designers all the building blocks needed to
83-
quickly create solutions four our clients. Helping them focusing on
84-
innovation and user experience.
29+
Halstack&#39;s first goal is to provide Product Designers with
30+
pre-created designs for the most common use-cases they will face
31+
during the product design stage. Using Halstack, they don&#39;t need
32+
to reinvent the wheel looking for a solution to these mundane
33+
problems, and can focus on adding business value. Also, by
34+
centralizing these efforts in a Design System team, we can pay the
35+
right amount of attention to aspects as important as usability,
36+
accessibility, or consistency.
8537
</DxcParagraph>
8638
),
8739
},
8840
{
89-
title: "Code implementation",
41+
title: "A tool for developers",
42+
content: (
43+
<DxcParagraph>
44+
Halstack&#39;s second goal is to simplify the handoff process from
45+
designers to developers, and facilitate the development of the
46+
components and patterns that already exist as part of the Design
47+
System. This way, we speed up the development process and minimize
48+
the room for errors when implementing these components.
49+
</DxcParagraph>
50+
),
51+
},
52+
],
53+
},
54+
{
55+
title: "What is not Halstack",
56+
subSections: [
57+
{
58+
title: "A headless component library",
9059
content: (
9160
<>
9261
<DxcParagraph>
93-
We also have our components documentation available in the
94-
following frameworks:
62+
Unlike headless component libraries like Radix UI or Reach UI,
63+
which are intentionally agnostic of design decisions, Halstack is
64+
a highly opinionated Design System, and most of its value resides
65+
in its design opinions.
9566
</DxcParagraph>
96-
<DxcBulletedList>
97-
<DxcBulletedList.Item>
98-
<DxcLink href="https://developer.dxc.com/tools/react/next/#/">
99-
React documentation
100-
</DxcLink>
101-
</DxcBulletedList.Item>
102-
<DxcBulletedList.Item>
103-
<DxcLink href="https://developer.dxc.com/tools/angular/next/#/">
104-
Angular documentation
105-
</DxcLink>
106-
</DxcBulletedList.Item>
107-
</DxcBulletedList>
10867
<DxcParagraph>
109-
If you&#39;re using a different framework, you can still build
110-
components by following our design guidelines.
68+
Halstack React library does expose a themes API that allows
69+
developers to override many of these opinions. Still, the themes
70+
API has its limitations, and it is considered a work around the
71+
Design System guidelines to allow a restricted level of
72+
white-labeling. That means if you are designing an application and
73+
you already have strong UI/UX opinions, Halstack might not be the
74+
right tool for you.
11175
</DxcParagraph>
11276
</>
11377
),
11478
},
11579
{
116-
title: "GitHub",
80+
title: "A business component library",
11781
content: (
11882
<>
11983
<DxcParagraph>
120-
Our code implementation is available in the following GitHub
121-
public repositories:
84+
All the opinions provided by Halstack Design System always remain
85+
within the boundaries of the generalistic UI/UX Design domain.
86+
Halstack will not get into business-specific elements even if they
87+
are reusable. For example, Halstack might provide guidelines on
88+
using forms within the context of digital applications. Still, it
89+
doesn&#39;t get into the specifics of designing a form for an
90+
insurance quote application.
91+
</DxcParagraph>
92+
<DxcParagraph>
93+
This design domain is noticeable by looking at the different
94+
configuration parameters in the Halstack React library, which
95+
resemble the language used by UX designers, without ever getting
96+
into the business semantics.
97+
</DxcParagraph>
98+
<DxcParagraph>
99+
Although it doesn&#39;t get into the business domain, Halstack is
100+
currently used for the most part by insurance applications. For
101+
this reason, many of the decisions taken and the patterns observed
102+
might be influenced by this reality.
122103
</DxcParagraph>
123-
<DxcBulletedList>
124-
<DxcBulletedList.Item>
125-
<DxcLink href="https://github.com/dxc-technology/halstack-style-guide">
126-
halstack-style-guide
127-
</DxcLink>
128-
: Design guidelines
129-
</DxcBulletedList.Item>
130-
<DxcBulletedList.Item>
131-
<DxcLink href="https://github.com/dxc-technology/halstack-react">
132-
halstack-react
133-
</DxcLink>
134-
: React CDK
135-
</DxcBulletedList.Item>
136-
<DxcBulletedList.Item>
137-
<DxcLink href="https://github.com/dxc-technology/halstack-angular">
138-
halstack-angular
139-
</DxcLink>
140-
: Angular CDK
141-
</DxcBulletedList.Item>
142-
</DxcBulletedList>
143104
</>
144105
),
145106
},
107+
{
108+
title: "A replacement for the Product Design stage",
109+
content: (
110+
<DxcParagraph>
111+
Halstack should always be considered as assistance to the Product
112+
Design process, but never as a replacement. Product Designers are
113+
still a fundamental piece of this process since they will need to
114+
add the business context, validate the patterns contemplated by the
115+
Design System, and contribute back to the design system when
116+
necessary.
117+
</DxcParagraph>
118+
),
119+
},
120+
],
121+
},
122+
{
123+
title: "Assets",
124+
subSections: [
125+
{
126+
title: "Design Guidelines",
127+
content: (
128+
<DxcParagraph>
129+
These are the pre-defined design opinions explained by writing. They
130+
are contained on this website and describe, with a high level of
131+
detail, aspects like usage, existing variants, or design
132+
specifications of the identified patterns.{" "}
133+
</DxcParagraph>
134+
),
135+
},
136+
{
137+
title: "Adobe XD Library",
138+
content: (
139+
<DxcParagraph>
140+
Implementing the previously described Design Guidelines so that
141+
product designers can easily drag and drop the pre-created
142+
components into their designs, obtaining automatic updates of these
143+
components as the Design System evolves.
144+
</DxcParagraph>
145+
),
146+
},
147+
{
148+
title: "React Library",
149+
content: (
150+
<DxcParagraph>
151+
Including tailored development tools that will assist React
152+
developers in implementing Halstack applications. This library
153+
attempts to bring the Design System guidelines to your application,
154+
minimizing the effort by abstracting developers from the
155+
implementation details while taking the design semantics into the
156+
code.
157+
</DxcParagraph>
158+
),
159+
},
146160
],
147161
},
162+
{
163+
title: "How to use this site",
164+
content: (
165+
<>
166+
<DxcParagraph>
167+
This website contains essential information for both designers and
168+
developers. These are two different types of users, but they share a
169+
significant part of the journey.
170+
</DxcParagraph>
171+
<DxcParagraph>
172+
Some Design Systems decide to organize their documentation following a
173+
development-centric approach, mimicking the structure of the
174+
development libraries. That is not the case for Halstack. Since the
175+
design process starts with designs, the Halstack documentation
176+
site&#39;s main navigation structure follows a design-first approach.
177+
</DxcParagraph>
178+
<DxcParagraph>
179+
Content is always presented and arranged by design elements. Each
180+
design page contains not only information about usage and design
181+
specifications but also technical details about the different tools
182+
available for developers. These tools will help them implement the
183+
corresponding design element.
184+
</DxcParagraph>
185+
</>
186+
),
187+
},
148188
];
149189

150190
const Introduction = () => {
151191
return (
152192
<DxcFlex direction="column" gap="4rem">
153193
<PageHeading>
154194
<DxcFlex direction="column" gap="2rem">
155-
<DxcHeading
156-
level={1}
157-
text="Halstack Design System"
158-
weight="bold"
159-
></DxcHeading>
195+
<DxcHeading level={1} text="Introduction" weight="bold"></DxcHeading>
160196
</DxcFlex>
161197
</PageHeading>
162198
<QuickNavContainerLayout>

0 commit comments

Comments
 (0)