/
HalstackProviderPage.tsx
209 lines (206 loc) · 6.75 KB
/
HalstackProviderPage.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import opinionatedTheme from "./examples/opinionatedTheme";
import advancedTheme from "./examples/advancedTheme";
import customTranslations from "./examples/customTranslations";
import {
DxcFlex,
DxcParagraph,
DxcTable,
DxcLink,
DxcAlert,
DxcTypography,
DxcBleed,
DxcHeading,
} from "@dxc-technology/halstack-react";
import Link from "next/link";
import PageHeading from "@/common/PageHeading";
import TableCode from "@/common/TableCode";
const sections = [
{
title: "Props",
content: (
<DxcTable>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
<tr>
<td>theme</td>
<td>
<TableCode>OpinionatedTheme</TableCode>
</td>
<td>
Object with a given structure, specified below, for defining the
opinionated theme.
</td>
<td>-</td>
</tr>
<tr>
<td>advancedTheme</td>
<td>
<TableCode>AdvancedTheme</TableCode>
</td>
<td>
Object with a given structure, specified below, for defining the
advanced theme.
</td>
<td>-</td>
</tr>
<tr>
<td>labels</td>
<td>
<TableCode>TranslatedLabels</TableCode>
</td>
<td>
Object with a given structure, specified below, for defining
translations.
</td>
<td>-</td>
</tr>
</DxcTable>
),
},
{
title: "Opinionated Theme",
content: (
<>
<DxcParagraph>
As explained on the{" "}
<Link
href="/principles/themes/#different-theming-strategies-opinionated-theme"
passHref
legacyBehavior
>
<DxcLink>Themes</DxcLink>
</Link>{" "}
page, you can apply the opinionated theming strategy to customize the
components.
</DxcParagraph>
<DxcAlert type="info" size="fillParent">
Remember that you can use the{" "}
<Link
href="/theme-generator/opinionated-theme"
passHref
legacyBehavior
>
<DxcLink>opinionated theme generator</DxcLink>
</Link>{" "}
to help you create themes.
</DxcAlert>
<DxcParagraph>
Below is an example of customizing the colours of a{" "}
<Code>DxcAccordion</Code> and a <Code>DxcTextInput</Code>:
</DxcParagraph>
<Example example={opinionatedTheme} defaultIsVisible />
<DxcParagraph>
We create a <Code>customTheme</Code> object with as many components as
we want and their respective values. Then we pass this object to the{" "}
Halstack Provider, which wraps our components, through its{" "}
<Code>theme</Code> property.
</DxcParagraph>
</>
),
},
{
title: "Advanced theme",
content: (
<>
<DxcParagraph>
Advanced theming is the option to choose when further customization is
required. To find out which use cases are valid for this strategy, you
can refer to the{" "}
<Link
href="/principles/themes/#different-theming-strategies-advanced-theme"
passHref
legacyBehavior
>
<DxcLink>Themes</DxcLink>
</Link>{" "}
page.
</DxcParagraph>
<DxcAlert type="info" size="fillParent">
Remember that you can use the{" "}
<Link href="/theme-generator/advanced-theme" passHref legacyBehavior>
<DxcLink>advanced theme generator</DxcLink>
</Link>{" "}
to help you create themes.
</DxcAlert>
<Example example={advancedTheme} defaultIsVisible />
<DxcParagraph>
In the example above we have customized some of the{" "}
<Code>DxcAccordion</Code> tokens. As you can see, it is not necessary
to pass all the tokens of the component, only those that you want to
change their value with respect to the default theme.
</DxcParagraph>
</>
),
},
{
title: "Localization",
content: (
<>
<DxcParagraph>
Halstack Provider can be used to translate all the labels that cannot
be changed by the component properties.
</DxcParagraph>
<DxcAlert type="info" size="fillParent">
To find out the list of labels that are translatable we should refer
to the documentation in the{" "}
<Link href="/principles/localization" passHref legacyBehavior>
<DxcLink>Localization</DxcLink>
</Link>{" "}
section.
</DxcAlert>
<DxcParagraph>
Let's imagine that we want to translate the '(Optional)' label of a{" "}
<Code>DxcTextInput</Code>, as well as the error messages of our{" "}
<Code>DxcFileInput</Code> component. To do so, we need to create an
object with the translations. In this object, you will have as many
objects as components you want to translate with the respective
translation for their labels.
</DxcParagraph>
<Example example={customTranslations} defaultIsVisible />
<DxcBleed top="2rem">
<DxcTypography fontSize="0.875rem">
*(to see the translated error message you should try to add any file
on the <Code>DxcFileInput</Code>).
</DxcTypography>
</DxcBleed>
</>
),
},
];
const HalstackProvider = () => {
return (
<DxcFlex direction="column" gap="4rem">
<PageHeading>
<DxcFlex direction="column" gap="2rem">
<DxcHeading
level={1}
text="Halstack Provider"
weight="bold"
></DxcHeading>
<DxcParagraph>
Halstack Provider is the context provider used for a whole
application or an isolated group of components, which defines the
custom theme and/or translation labels.
</DxcParagraph>
</DxcFlex>
</PageHeading>
<QuickNavContainerLayout>
<QuickNavContainer
sections={sections}
startHeadingLevel={2}
></QuickNavContainer>
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx" />
</DxcFlex>
);
};
export default HalstackProvider;