Skip to content

Commit 9c1aa46

Browse files
langztujoworker
langz
and
tujoworker
authored
feat(Forms): add help property to all Value.* components (#4607)
Co-authored-by: Tobias Høegh <tobias@tujo.no>
1 parent e6495e5 commit 9c1aa46

30 files changed

+777
-45
lines changed

‎packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/Examples.tsx

+31
Original file line numberDiff line numberDiff line change
@@ -462,3 +462,34 @@ export const TransformData = () => {
462462
</ComponentBox>
463463
)
464464
}
465+
466+
export const WithHelp = () => {
467+
return (
468+
<ComponentBox>
469+
<Form.Handler
470+
defaultData={{
471+
myField: 12345,
472+
}}
473+
>
474+
<Form.Card>
475+
<Field.Number
476+
path="/myField"
477+
label="Label text"
478+
help={{
479+
title: 'Help title',
480+
content: 'Help content.',
481+
}}
482+
/>
483+
<Value.Number
484+
path="/myField"
485+
inheritLabel
486+
help={{
487+
title: 'Help title',
488+
content: 'Help content.',
489+
}}
490+
/>
491+
</Form.Card>
492+
</Form.Handler>
493+
</ComponentBox>
494+
)
495+
}

‎packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/demos.mdx

+4
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ import * as Examples from './Handler/Examples'
77

88
## Demos
99

10+
### With a help button
11+
12+
<Examples.WithHelp />
13+
1014
### In combination with a SubmitButton
1115

1216
<Examples.AsyncSubmit />

‎packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Composition/Examples.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import ComponentBox from '../../../../../../shared/tags/ComponentBox'
2+
import { Flex } from '@dnb/eufemia/src'
23
import { Form, Value } from '@dnb/eufemia/src/extensions/forms'
34

45
export const Basic = () => {
@@ -122,3 +123,38 @@ export const WithSummaryListGridLayout = () => {
122123
</ComponentBox>
123124
)
124125
}
126+
127+
export const WithHelp = () => {
128+
return (
129+
<ComponentBox data-visual-test="forms-value-composition-help">
130+
<Flex.Stack>
131+
<Value.Composition
132+
label="Label with help"
133+
help={{
134+
title: 'Hva betyr lånebeløp?',
135+
content: 'Dette er hvor mye du har tenkt å låne totalt.',
136+
}}
137+
>
138+
<Value.String value="value" />
139+
<Value.Number value={123} />
140+
</Value.Composition>
141+
142+
<Form.Card>
143+
<Value.SummaryList>
144+
<Value.Composition
145+
label="Label with help inside SummaryList"
146+
help={{
147+
title: 'Hva betyr lånebeløp?',
148+
content: 'Dette er hvor mye du har tenkt å låne totalt.',
149+
}}
150+
>
151+
<Value.String value="value" />
152+
<Value.Number value={123} />
153+
</Value.Composition>
154+
<Value.String value="Another value" />
155+
</Value.SummaryList>
156+
</Form.Card>
157+
</Flex.Stack>
158+
</ComponentBox>
159+
)
160+
}

‎packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Composition/demos.mdx

+4
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,7 @@ import * as Examples from './Examples'
2525
### Width comparison
2626

2727
<Examples.WidthComparison />
28+
29+
### With help
30+
31+
<Examples.WithHelp />

‎packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/String/Examples.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -53,3 +53,18 @@ export const Inline = () => {
5353
</ComponentBox>
5454
)
5555
}
56+
57+
export const WithHelp = () => {
58+
return (
59+
<ComponentBox>
60+
<Value.String
61+
label="Label text"
62+
value="Value text"
63+
help={{
64+
title: 'Help title',
65+
content: 'Help content.',
66+
}}
67+
/>
68+
</ComponentBox>
69+
)
70+
}

‎packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/String/demos.mdx

+4
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@ import * as Examples from './Examples'
2626

2727
<Examples.LabelAndValue />
2828

29+
### With help
30+
31+
<Examples.WithHelp />
32+
2933
### Inline
3034

3135
<Examples.Inline />

‎packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/Examples.tsx

+177
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,183 @@ export const HorizontalLayout = () => {
6868
)
6969
}
7070

71+
export const DefaultLayoutWithHelp = () => {
72+
return (
73+
<ComponentBox data-visual-test="forms-value-summary-list-default-with-help">
74+
<Form.Handler
75+
data={{
76+
firstName: 'John',
77+
lastName: 'Doe',
78+
nickName: 'JD',
79+
streetName: 'Osloveien',
80+
streetNr: 12,
81+
}}
82+
>
83+
<Form.Card>
84+
<Form.SubHeading>Subheading</Form.SubHeading>
85+
86+
<Value.SummaryList>
87+
<Value.Name.First
88+
path="/firstName"
89+
help={{
90+
open: true,
91+
title: 'Help title',
92+
content: 'Help content',
93+
}}
94+
/>
95+
<Value.Name.Last path="/lastName" />
96+
<Value.String
97+
path="/nickName"
98+
label="kallenavn"
99+
help={{
100+
open: true,
101+
title: 'Help title',
102+
content: 'Help content',
103+
}}
104+
/>
105+
<Value.Composition
106+
label="Street"
107+
help={{
108+
open: true,
109+
title: 'Help title',
110+
content: 'Help content',
111+
}}
112+
>
113+
<Value.String path="/streetName" />
114+
<Value.Number
115+
path="/streetNr"
116+
help={{
117+
open: true,
118+
title: 'Help title',
119+
content: 'Help content',
120+
}}
121+
/>
122+
</Value.Composition>
123+
</Value.SummaryList>
124+
</Form.Card>
125+
</Form.Handler>
126+
</ComponentBox>
127+
)
128+
}
129+
130+
export const GridLayoutWithHelp = () => {
131+
return (
132+
<ComponentBox data-visual-test="forms-value-summary-list-grid-with-help">
133+
<Form.Handler
134+
data={{
135+
firstName: 'John',
136+
lastName: 'Doe',
137+
nickName: 'JD',
138+
streetName: 'Osloveien',
139+
streetNr: 12,
140+
}}
141+
>
142+
<Form.Card>
143+
<Form.SubHeading>Subheading</Form.SubHeading>
144+
145+
<Value.SummaryList layout="grid">
146+
<Value.Name.First
147+
path="/firstName"
148+
help={{
149+
open: true,
150+
title: 'Help title',
151+
content: 'Help content',
152+
}}
153+
/>
154+
<Value.Name.Last path="/lastName" />
155+
<Value.String
156+
path="/nickName"
157+
label="kallenavn"
158+
help={{
159+
open: true,
160+
title: 'Help title',
161+
content: 'Help content',
162+
}}
163+
/>
164+
<Value.Composition
165+
label="Street"
166+
help={{
167+
open: true,
168+
title: 'Help title',
169+
content: 'Help content',
170+
}}
171+
>
172+
<Value.String path="/streetName" />
173+
<Value.Number
174+
path="/streetNr"
175+
help={{
176+
open: true,
177+
title: 'Help title',
178+
content: 'Help content',
179+
}}
180+
/>
181+
</Value.Composition>
182+
</Value.SummaryList>
183+
</Form.Card>
184+
</Form.Handler>
185+
</ComponentBox>
186+
)
187+
}
188+
189+
export const HorizontalLayoutWithHelp = () => {
190+
return (
191+
<ComponentBox data-visual-test="forms-value-summary-list-horizontal-with-help">
192+
<Form.Handler
193+
data={{
194+
firstName: 'John',
195+
lastName: 'Doe',
196+
nickName: 'JD',
197+
streetName: 'Osloveien',
198+
streetNr: 12,
199+
}}
200+
>
201+
<Form.Card>
202+
<Form.SubHeading>Subheading</Form.SubHeading>
203+
204+
<Value.SummaryList layout="horizontal">
205+
<Value.Name.First
206+
path="/firstName"
207+
help={{
208+
open: true,
209+
title: 'Help title',
210+
content: 'Help content',
211+
}}
212+
/>
213+
<Value.Name.Last path="/lastName" />
214+
<Value.String
215+
path="/nickName"
216+
label="kallenavn"
217+
help={{
218+
open: true,
219+
title: 'Help title',
220+
content: 'Help content',
221+
}}
222+
/>
223+
<Value.Composition
224+
label="Street"
225+
help={{
226+
open: true,
227+
title: 'Help title',
228+
content: 'Help content',
229+
}}
230+
>
231+
<Value.String path="/streetName" />
232+
<Value.Number
233+
path="/streetNr"
234+
help={{
235+
open: true,
236+
title: 'Help title',
237+
content: 'Help content',
238+
}}
239+
/>
240+
</Value.Composition>
241+
</Value.SummaryList>
242+
</Form.Card>
243+
</Form.Handler>
244+
</ComponentBox>
245+
)
246+
}
247+
71248
export const CombinedLayout = () => {
72249
return (
73250
<ComponentBox data-visual-test="forms-value-summary-list-combined">

‎packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/demos.mdx

+3
Original file line numberDiff line numberDiff line change
@@ -42,4 +42,7 @@ To maintain the semantic structure of the `dl` element, the `Form.Visibility` co
4242

4343
<VisibleWhenVisualTest>
4444
<Examples.HorizontalLayoutWithoutLabel />
45+
<Examples.DefaultLayoutWithHelp />
46+
<Examples.HorizontalLayoutWithHelp />
47+
<Examples.GridLayoutWithHelp />
4548
</VisibleWhenVisualTest>

‎packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/ValueBlock/Examples.tsx

+43-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import ComponentBox from '../../../../../../shared/tags/ComponentBox'
22
import { ValueBlock } from '@dnb/eufemia/src/extensions/forms'
3-
import { P } from '@dnb/eufemia/src'
3+
import { Anchor, P } from '@dnb/eufemia/src'
44

55
export const Default = () => {
66
return (
@@ -13,8 +13,8 @@ export const Default = () => {
1313
export const Inline = () => {
1414
return (
1515
<ComponentBox
16-
scope={{ ValueBlock }}
1716
data-visual-test="value-block-inline"
17+
scope={{ ValueBlock }}
1818
>
1919
<P>
2020
this is before the value <ValueBlock inline>Foo</ValueBlock>{' '}
@@ -23,3 +23,44 @@ export const Inline = () => {
2323
</ComponentBox>
2424
)
2525
}
26+
27+
export const Help = () => {
28+
return (
29+
<ComponentBox
30+
scope={{ ValueBlock }}
31+
data-visual-test="value-block-help-button"
32+
>
33+
<ValueBlock
34+
label="Label text"
35+
help={{ title: 'Help title', content: 'Help content' }}
36+
>
37+
Data-value goes here
38+
</ValueBlock>
39+
</ComponentBox>
40+
)
41+
}
42+
43+
export const HelpHtml = () => {
44+
return (
45+
<ComponentBox
46+
scope={{ ValueBlock }}
47+
data-visual-test="value-block-help-button-html"
48+
>
49+
<ValueBlock
50+
label="Label text with a long label label – lorem ipsum
51+
dolor sit"
52+
help={{
53+
open: true,
54+
title: <strong>Help title</strong>,
55+
content: (
56+
<>
57+
Help content with a <Anchor href="/">Anchor</Anchor>.
58+
</>
59+
),
60+
}}
61+
>
62+
Data-value goes here – lorem ipsum dolor sit amet consectetur.
63+
</ValueBlock>
64+
</ComponentBox>
65+
)
66+
}

‎packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/ValueBlock/demos.mdx

+8
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,11 @@ import * as Examples from './Examples'
1111
### Inline
1212

1313
<Examples.Inline />
14+
15+
## Help button
16+
17+
<Examples.Help />
18+
19+
## Help button with HTML
20+
21+
<Examples.HelpHtml />

0 commit comments

Comments
 (0)