@i-dot-ai-npm/component-library-react 0.0.5 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/date-input/DateInputField.tsx +1 -1
- package/src/fieldset/FieldsetLegend.tsx +1 -1
- package/src/footer/Footer.tsx +34 -173
- package/src/govuk-footer/GovukFooter.tsx +203 -0
- package/src/index.ts +1 -0
- package/src/input/Input.tsx +1 -1
- package/src/input-label/InputLabel.tsx +1 -1
- package/src/label/Label.tsx +1 -1
- package/src/link/Link.tsx +1 -1
- package/src/table/TableCaption.tsx +1 -1
- package/src/tag/Tag.tsx +1 -1
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@ type DateInputFieldProps = {
|
|
|
7
7
|
export default function DateInputField({ width, class: className, ...rest }: DateInputFieldProps) {
|
|
8
8
|
const classes = [
|
|
9
9
|
"govuk-input govuk-date-input__input",
|
|
10
|
-
({ "2": "govuk-input--width-2", "3": "govuk-input--width-3", "4": "govuk-input--width-4" }[width
|
|
10
|
+
(width ? { "2": "govuk-input--width-2", "3": "govuk-input--width-3", "4": "govuk-input--width-4" }[width] : ""),
|
|
11
11
|
className ?? "",
|
|
12
12
|
]
|
|
13
13
|
.filter(Boolean)
|
|
@@ -11,7 +11,7 @@ type FieldsetLegendProps = {
|
|
|
11
11
|
export default function FieldsetLegend({ size, isPageHeading, class: className, children, ...rest }: FieldsetLegendProps) {
|
|
12
12
|
const classes = [
|
|
13
13
|
"govuk-fieldset__legend",
|
|
14
|
-
({ "small": "govuk-fieldset__legend--s", "medium": "govuk-fieldset__legend--m", "large": "govuk-fieldset__legend--l", "xl": "govuk-fieldset__legend--xl" }[size]
|
|
14
|
+
(size ? { "small": "govuk-fieldset__legend--s", "medium": "govuk-fieldset__legend--m", "large": "govuk-fieldset__legend--l", "xl": "govuk-fieldset__legend--xl" }[size] : ""),
|
|
15
15
|
className ?? "",
|
|
16
16
|
]
|
|
17
17
|
.filter(Boolean)
|
package/src/footer/Footer.tsx
CHANGED
|
@@ -1,92 +1,27 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
return (
|
|
5
|
-
<svg
|
|
6
|
-
focusable="false"
|
|
7
|
-
role="presentation"
|
|
8
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
-
viewBox="0 0 64 60"
|
|
10
|
-
height="30"
|
|
11
|
-
width="32"
|
|
12
|
-
fill="currentcolor"
|
|
13
|
-
className="govuk-footer__crown"
|
|
14
|
-
>
|
|
15
|
-
<g>
|
|
16
|
-
<circle cx="20" cy="17.6" r="3.7" />
|
|
17
|
-
<circle cx="10.2" cy="23.5" r="3.7" />
|
|
18
|
-
<circle cx="3.7" cy="33.2" r="3.7" />
|
|
19
|
-
<circle cx="31.7" cy="30.6" r="3.7" />
|
|
20
|
-
<circle cx="43.3" cy="17.6" r="3.7" />
|
|
21
|
-
<circle cx="53.2" cy="23.5" r="3.7" />
|
|
22
|
-
<circle cx="59.7" cy="33.2" r="3.7" />
|
|
23
|
-
<circle cx="31.7" cy="30.6" r="3.7" />
|
|
24
|
-
<path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z" />
|
|
25
|
-
</g>
|
|
26
|
-
</svg>
|
|
27
|
-
);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
function FooterLicenceLogo() {
|
|
31
|
-
return (
|
|
32
|
-
<svg
|
|
33
|
-
aria-hidden="true"
|
|
34
|
-
focusable="false"
|
|
35
|
-
className="govuk-footer__licence-logo"
|
|
36
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
37
|
-
viewBox="0 0 483.2 195.7"
|
|
38
|
-
height="17"
|
|
39
|
-
width="41"
|
|
40
|
-
>
|
|
41
|
-
<path
|
|
42
|
-
fill="currentColor"
|
|
43
|
-
d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
|
|
44
|
-
/>
|
|
45
|
-
</svg>
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
type FooterNavItem = { href?: string; text?: string; attributes?: Record<string, string> };
|
|
50
|
-
type FooterNav = { title?: string; columns?: number; width?: string; items?: FooterNavItem[] };
|
|
51
|
-
type FooterMetaItem = { href?: string; text?: string; attributes?: Record<string, string> };
|
|
52
|
-
type FooterMeta = {
|
|
53
|
-
visuallyHiddenTitle?: string;
|
|
54
|
-
items?: FooterMetaItem[];
|
|
55
|
-
text?: string;
|
|
56
|
-
/** Re-authored meta content (raw govuk `meta.html`). */
|
|
57
|
-
content?: ReactNode;
|
|
58
|
-
};
|
|
59
|
-
type FooterLicence = {
|
|
60
|
-
text?: string;
|
|
61
|
-
/** Re-authored licence content (raw govuk `contentLicence.html`). */
|
|
62
|
-
content?: ReactNode;
|
|
63
|
-
} | null;
|
|
64
|
-
type FooterCopyright = {
|
|
65
|
-
text?: string;
|
|
66
|
-
/** Re-authored copyright content (raw govuk `copyright.html`). */
|
|
67
|
-
content?: ReactNode;
|
|
68
|
-
};
|
|
3
|
+
type FooterLink = { href?: string; text?: string; attributes?: Record<string, string> };
|
|
69
4
|
|
|
70
5
|
type FooterProps = {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
6
|
+
/** Support links shown in the inline list (e.g. Accessibility statement, Cookies, Privacy). */
|
|
7
|
+
links?: FooterLink[];
|
|
8
|
+
/** Visually-hidden heading above the support links. */
|
|
9
|
+
visuallyHiddenTitle?: string;
|
|
75
10
|
containerClasses?: string;
|
|
76
11
|
class?: string;
|
|
12
|
+
children?: ReactNode;
|
|
77
13
|
[key: string]: unknown;
|
|
78
14
|
};
|
|
79
15
|
|
|
80
16
|
export default function Footer({
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
contentLicence,
|
|
84
|
-
copyright,
|
|
17
|
+
links,
|
|
18
|
+
visuallyHiddenTitle,
|
|
85
19
|
containerClasses,
|
|
86
20
|
class: className,
|
|
21
|
+
children,
|
|
87
22
|
...rest
|
|
88
23
|
}: FooterProps) {
|
|
89
|
-
const classes = ['govuk-footer', className ?? ''].filter(Boolean).join(' ');
|
|
24
|
+
const classes = ['govuk-footer', 'iai-footer', className ?? ''].filter(Boolean).join(' ');
|
|
90
25
|
const containerClass = ['govuk-width-container', containerClasses ?? '']
|
|
91
26
|
.filter(Boolean)
|
|
92
27
|
.join(' ');
|
|
@@ -94,108 +29,34 @@ export default function Footer({
|
|
|
94
29
|
return (
|
|
95
30
|
<div className={classes} {...rest}>
|
|
96
31
|
<div className={containerClass}>
|
|
97
|
-
<FooterCrown />
|
|
98
|
-
{navigation && navigation.length > 0 && (
|
|
99
|
-
<>
|
|
100
|
-
<div className="govuk-footer__navigation">
|
|
101
|
-
{navigation.map((nav, i) => (
|
|
102
|
-
<div
|
|
103
|
-
key={i}
|
|
104
|
-
className={`govuk-footer__section govuk-grid-column-${nav.width ?? 'full'}`}
|
|
105
|
-
>
|
|
106
|
-
<h2 className="govuk-footer__heading govuk-heading-m">{nav.title}</h2>
|
|
107
|
-
{nav.items && nav.items.length > 0 && (
|
|
108
|
-
<ul
|
|
109
|
-
className={[
|
|
110
|
-
'govuk-footer__list',
|
|
111
|
-
nav.columns ? `govuk-footer__list--columns-${nav.columns}` : '',
|
|
112
|
-
]
|
|
113
|
-
.filter(Boolean)
|
|
114
|
-
.join(' ')}
|
|
115
|
-
>
|
|
116
|
-
{nav.items
|
|
117
|
-
.filter((item) => item.href && item.text)
|
|
118
|
-
.map((item, j) => (
|
|
119
|
-
<li key={j} className="govuk-footer__list-item">
|
|
120
|
-
<a
|
|
121
|
-
className="govuk-footer__link"
|
|
122
|
-
href={item.href}
|
|
123
|
-
{...(item.attributes ?? {})}
|
|
124
|
-
>
|
|
125
|
-
{item.text}
|
|
126
|
-
</a>
|
|
127
|
-
</li>
|
|
128
|
-
))}
|
|
129
|
-
</ul>
|
|
130
|
-
)}
|
|
131
|
-
</div>
|
|
132
|
-
))}
|
|
133
|
-
</div>
|
|
134
|
-
<hr className="govuk-footer__section-break" />
|
|
135
|
-
</>
|
|
136
|
-
)}
|
|
137
32
|
<div className="govuk-footer__meta">
|
|
138
33
|
<div className="govuk-footer__meta-item govuk-footer__meta-item--grow">
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
{
|
|
145
|
-
<
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
))}
|
|
157
|
-
</ul>
|
|
158
|
-
)}
|
|
159
|
-
{(meta.content || meta.text) && (
|
|
160
|
-
<div className="govuk-footer__meta-custom">
|
|
161
|
-
{meta.content ?? meta.text}
|
|
162
|
-
</div>
|
|
163
|
-
)}
|
|
164
|
-
</>
|
|
165
|
-
)}
|
|
166
|
-
{contentLicence !== null && (
|
|
167
|
-
<>
|
|
168
|
-
<FooterLicenceLogo />
|
|
169
|
-
<span className="govuk-footer__licence-description">
|
|
170
|
-
{contentLicence && (contentLicence.content || contentLicence.text) ? (
|
|
171
|
-
contentLicence.content ?? contentLicence.text
|
|
172
|
-
) : (
|
|
173
|
-
<>
|
|
174
|
-
All content is available under the{' '}
|
|
175
|
-
<a
|
|
176
|
-
className="govuk-footer__link"
|
|
177
|
-
href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
|
|
178
|
-
rel="license"
|
|
179
|
-
>
|
|
180
|
-
Open Government Licence v3.0
|
|
181
|
-
</a>
|
|
182
|
-
, except where otherwise stated
|
|
183
|
-
</>
|
|
184
|
-
)}
|
|
185
|
-
</span>
|
|
186
|
-
</>
|
|
34
|
+
<h2 className="govuk-visually-hidden">
|
|
35
|
+
{visuallyHiddenTitle ?? 'Support links'}
|
|
36
|
+
</h2>
|
|
37
|
+
{links && links.length > 0 && (
|
|
38
|
+
<ul className="govuk-footer__inline-list">
|
|
39
|
+
{links.map((link, i) => (
|
|
40
|
+
<li key={i} className="govuk-footer__inline-list-item">
|
|
41
|
+
<a
|
|
42
|
+
className="govuk-footer__link"
|
|
43
|
+
href={link.href}
|
|
44
|
+
{...(link.attributes ?? {})}
|
|
45
|
+
>
|
|
46
|
+
{link.text}
|
|
47
|
+
</a>
|
|
48
|
+
</li>
|
|
49
|
+
))}
|
|
50
|
+
</ul>
|
|
187
51
|
)}
|
|
52
|
+
<div className="govuk-footer__meta-custom">
|
|
53
|
+
Built by the{' '}
|
|
54
|
+
<a className="govuk-footer__link" href="https://ai.gov.uk/">
|
|
55
|
+
Incubator for Artificial Intelligence
|
|
56
|
+
</a>
|
|
57
|
+
</div>
|
|
188
58
|
</div>
|
|
189
|
-
<div className="govuk-footer__meta-item">
|
|
190
|
-
<a
|
|
191
|
-
className="govuk-footer__link govuk-footer__copyright-logo"
|
|
192
|
-
href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
|
|
193
|
-
>
|
|
194
|
-
{copyright && (copyright.content || copyright.text)
|
|
195
|
-
? (copyright.content ?? copyright.text)
|
|
196
|
-
: '© Crown copyright'}
|
|
197
|
-
</a>
|
|
198
|
-
</div>
|
|
59
|
+
<div className="govuk-footer__meta-item">{children}</div>
|
|
199
60
|
</div>
|
|
200
61
|
</div>
|
|
201
62
|
</div>
|
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
|
|
3
|
+
function FooterCrown() {
|
|
4
|
+
return (
|
|
5
|
+
<svg
|
|
6
|
+
focusable="false"
|
|
7
|
+
role="presentation"
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
viewBox="0 0 64 60"
|
|
10
|
+
height="30"
|
|
11
|
+
width="32"
|
|
12
|
+
fill="currentcolor"
|
|
13
|
+
className="govuk-footer__crown"
|
|
14
|
+
>
|
|
15
|
+
<g>
|
|
16
|
+
<circle cx="20" cy="17.6" r="3.7" />
|
|
17
|
+
<circle cx="10.2" cy="23.5" r="3.7" />
|
|
18
|
+
<circle cx="3.7" cy="33.2" r="3.7" />
|
|
19
|
+
<circle cx="31.7" cy="30.6" r="3.7" />
|
|
20
|
+
<circle cx="43.3" cy="17.6" r="3.7" />
|
|
21
|
+
<circle cx="53.2" cy="23.5" r="3.7" />
|
|
22
|
+
<circle cx="59.7" cy="33.2" r="3.7" />
|
|
23
|
+
<circle cx="31.7" cy="30.6" r="3.7" />
|
|
24
|
+
<path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z" />
|
|
25
|
+
</g>
|
|
26
|
+
</svg>
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
function FooterLicenceLogo() {
|
|
31
|
+
return (
|
|
32
|
+
<svg
|
|
33
|
+
aria-hidden="true"
|
|
34
|
+
focusable="false"
|
|
35
|
+
className="govuk-footer__licence-logo"
|
|
36
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
37
|
+
viewBox="0 0 483.2 195.7"
|
|
38
|
+
height="17"
|
|
39
|
+
width="41"
|
|
40
|
+
>
|
|
41
|
+
<path
|
|
42
|
+
fill="currentColor"
|
|
43
|
+
d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
|
|
44
|
+
/>
|
|
45
|
+
</svg>
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
type FooterNavItem = { href?: string; text?: string; attributes?: Record<string, string> };
|
|
50
|
+
type FooterNav = { title?: string; columns?: number; width?: string; items?: FooterNavItem[] };
|
|
51
|
+
type FooterMetaItem = { href?: string; text?: string; attributes?: Record<string, string> };
|
|
52
|
+
type FooterMeta = {
|
|
53
|
+
visuallyHiddenTitle?: string;
|
|
54
|
+
items?: FooterMetaItem[];
|
|
55
|
+
text?: string;
|
|
56
|
+
/** Re-authored meta content (raw govuk `meta.html`). */
|
|
57
|
+
content?: ReactNode;
|
|
58
|
+
};
|
|
59
|
+
type FooterLicence = {
|
|
60
|
+
text?: string;
|
|
61
|
+
/** Re-authored licence content (raw govuk `contentLicence.html`). */
|
|
62
|
+
content?: ReactNode;
|
|
63
|
+
} | null;
|
|
64
|
+
type FooterCopyright = {
|
|
65
|
+
text?: string;
|
|
66
|
+
/** Re-authored copyright content (raw govuk `copyright.html`). */
|
|
67
|
+
content?: ReactNode;
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
type FooterProps = {
|
|
71
|
+
navigation?: FooterNav[];
|
|
72
|
+
meta?: FooterMeta;
|
|
73
|
+
contentLicence?: FooterLicence;
|
|
74
|
+
copyright?: FooterCopyright;
|
|
75
|
+
containerClasses?: string;
|
|
76
|
+
class?: string;
|
|
77
|
+
[key: string]: unknown;
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
export default function GovukFooter({
|
|
81
|
+
navigation,
|
|
82
|
+
meta,
|
|
83
|
+
contentLicence,
|
|
84
|
+
copyright,
|
|
85
|
+
containerClasses,
|
|
86
|
+
class: className,
|
|
87
|
+
...rest
|
|
88
|
+
}: FooterProps) {
|
|
89
|
+
const classes = ['govuk-footer', className ?? ''].filter(Boolean).join(' ');
|
|
90
|
+
const containerClass = ['govuk-width-container', containerClasses ?? '']
|
|
91
|
+
.filter(Boolean)
|
|
92
|
+
.join(' ');
|
|
93
|
+
|
|
94
|
+
return (
|
|
95
|
+
<div className={classes} {...rest}>
|
|
96
|
+
<div className={containerClass}>
|
|
97
|
+
<FooterCrown />
|
|
98
|
+
{navigation && navigation.length > 0 && (
|
|
99
|
+
<>
|
|
100
|
+
<div className="govuk-footer__navigation">
|
|
101
|
+
{navigation.map((nav, i) => (
|
|
102
|
+
<div
|
|
103
|
+
key={i}
|
|
104
|
+
className={`govuk-footer__section govuk-grid-column-${nav.width ?? 'full'}`}
|
|
105
|
+
>
|
|
106
|
+
<h2 className="govuk-footer__heading govuk-heading-m">{nav.title}</h2>
|
|
107
|
+
{nav.items && nav.items.length > 0 && (
|
|
108
|
+
<ul
|
|
109
|
+
className={[
|
|
110
|
+
'govuk-footer__list',
|
|
111
|
+
nav.columns ? `govuk-footer__list--columns-${nav.columns}` : '',
|
|
112
|
+
]
|
|
113
|
+
.filter(Boolean)
|
|
114
|
+
.join(' ')}
|
|
115
|
+
>
|
|
116
|
+
{nav.items
|
|
117
|
+
.filter((item) => item.href && item.text)
|
|
118
|
+
.map((item, j) => (
|
|
119
|
+
<li key={j} className="govuk-footer__list-item">
|
|
120
|
+
<a
|
|
121
|
+
className="govuk-footer__link"
|
|
122
|
+
href={item.href}
|
|
123
|
+
{...(item.attributes ?? {})}
|
|
124
|
+
>
|
|
125
|
+
{item.text}
|
|
126
|
+
</a>
|
|
127
|
+
</li>
|
|
128
|
+
))}
|
|
129
|
+
</ul>
|
|
130
|
+
)}
|
|
131
|
+
</div>
|
|
132
|
+
))}
|
|
133
|
+
</div>
|
|
134
|
+
<hr className="govuk-footer__section-break" />
|
|
135
|
+
</>
|
|
136
|
+
)}
|
|
137
|
+
<div className="govuk-footer__meta">
|
|
138
|
+
<div className="govuk-footer__meta-item govuk-footer__meta-item--grow">
|
|
139
|
+
{meta && (
|
|
140
|
+
<>
|
|
141
|
+
<h2 className="govuk-visually-hidden">
|
|
142
|
+
{meta.visuallyHiddenTitle ?? 'Support links'}
|
|
143
|
+
</h2>
|
|
144
|
+
{meta.items && meta.items.length > 0 && (
|
|
145
|
+
<ul className="govuk-footer__inline-list">
|
|
146
|
+
{meta.items.map((item, i) => (
|
|
147
|
+
<li key={i} className="govuk-footer__inline-list-item">
|
|
148
|
+
<a
|
|
149
|
+
className="govuk-footer__link"
|
|
150
|
+
href={item.href}
|
|
151
|
+
{...(item.attributes ?? {})}
|
|
152
|
+
>
|
|
153
|
+
{item.text}
|
|
154
|
+
</a>
|
|
155
|
+
</li>
|
|
156
|
+
))}
|
|
157
|
+
</ul>
|
|
158
|
+
)}
|
|
159
|
+
{(meta.content || meta.text) && (
|
|
160
|
+
<div className="govuk-footer__meta-custom">
|
|
161
|
+
{meta.content ?? meta.text}
|
|
162
|
+
</div>
|
|
163
|
+
)}
|
|
164
|
+
</>
|
|
165
|
+
)}
|
|
166
|
+
{contentLicence !== null && (
|
|
167
|
+
<>
|
|
168
|
+
<FooterLicenceLogo />
|
|
169
|
+
<span className="govuk-footer__licence-description">
|
|
170
|
+
{contentLicence && (contentLicence.content || contentLicence.text) ? (
|
|
171
|
+
contentLicence.content ?? contentLicence.text
|
|
172
|
+
) : (
|
|
173
|
+
<>
|
|
174
|
+
All content is available under the{' '}
|
|
175
|
+
<a
|
|
176
|
+
className="govuk-footer__link"
|
|
177
|
+
href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
|
|
178
|
+
rel="license"
|
|
179
|
+
>
|
|
180
|
+
Open Government Licence v3.0
|
|
181
|
+
</a>
|
|
182
|
+
, except where otherwise stated
|
|
183
|
+
</>
|
|
184
|
+
)}
|
|
185
|
+
</span>
|
|
186
|
+
</>
|
|
187
|
+
)}
|
|
188
|
+
</div>
|
|
189
|
+
<div className="govuk-footer__meta-item">
|
|
190
|
+
<a
|
|
191
|
+
className="govuk-footer__link govuk-footer__copyright-logo"
|
|
192
|
+
href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
|
|
193
|
+
>
|
|
194
|
+
{copyright && (copyright.content || copyright.text)
|
|
195
|
+
? (copyright.content ?? copyright.text)
|
|
196
|
+
: '© Crown copyright'}
|
|
197
|
+
</a>
|
|
198
|
+
</div>
|
|
199
|
+
</div>
|
|
200
|
+
</div>
|
|
201
|
+
</div>
|
|
202
|
+
);
|
|
203
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -51,6 +51,7 @@ export { default as Feedback } from "./feedback/Feedback";
|
|
|
51
51
|
export { default as FileUpload } from "./file-upload/FileUpload";
|
|
52
52
|
export { default as Footer } from "./footer/Footer";
|
|
53
53
|
export { default as FormGroup } from "./form-group/FormGroup";
|
|
54
|
+
export { default as GovukFooter } from "./govuk-footer/GovukFooter";
|
|
54
55
|
export { default as GovukHeader } from "./govuk-header/GovukHeader";
|
|
55
56
|
export { default as Header } from "./header/Header";
|
|
56
57
|
export { default as Hint } from "./hint/Hint";
|
package/src/input/Input.tsx
CHANGED
|
@@ -13,7 +13,7 @@ export default function Input({ error, extraLetterSpacing, subtle, width, class:
|
|
|
13
13
|
error ? "govuk-input--error" : "",
|
|
14
14
|
extraLetterSpacing ? "govuk-input--extra-letter-spacing" : "",
|
|
15
15
|
subtle ? "govuk-input--subtle" : "",
|
|
16
|
-
({ "2": "govuk-input--width-2", "3": "govuk-input--width-3", "4": "govuk-input--width-4", "5": "govuk-input--width-5", "10": "govuk-input--width-10", "20": "govuk-input--width-20", "30": "govuk-input--width-30" }[width]
|
|
16
|
+
(width ? { "2": "govuk-input--width-2", "3": "govuk-input--width-3", "4": "govuk-input--width-4", "5": "govuk-input--width-5", "10": "govuk-input--width-10", "20": "govuk-input--width-20", "30": "govuk-input--width-30" }[width] : ""),
|
|
17
17
|
className ?? "",
|
|
18
18
|
]
|
|
19
19
|
.filter(Boolean)
|
|
@@ -10,7 +10,7 @@ type InputLabelProps = {
|
|
|
10
10
|
export default function InputLabel({ size, class: className, children, ...rest }: InputLabelProps) {
|
|
11
11
|
const classes = [
|
|
12
12
|
"govuk-label",
|
|
13
|
-
({ "small": "govuk-label--s", "medium": "govuk-label--m", "large": "govuk-label--l", "xl": "govuk-label--xl" }[size]
|
|
13
|
+
(size ? { "small": "govuk-label--s", "medium": "govuk-label--m", "large": "govuk-label--l", "xl": "govuk-label--xl" }[size] : ""),
|
|
14
14
|
className ?? "",
|
|
15
15
|
]
|
|
16
16
|
.filter(Boolean)
|
package/src/label/Label.tsx
CHANGED
|
@@ -11,7 +11,7 @@ type LabelProps = {
|
|
|
11
11
|
export default function Label({ size, isPageHeading = false, class: className, children, ...rest }: LabelProps) {
|
|
12
12
|
const classes = [
|
|
13
13
|
"govuk-label",
|
|
14
|
-
({ "small": "govuk-label--s", "medium": "govuk-label--m", "large": "govuk-label--l", "xl": "govuk-label--xl" }[size]
|
|
14
|
+
(size ? { "small": "govuk-label--s", "medium": "govuk-label--m", "large": "govuk-label--l", "xl": "govuk-label--xl" }[size] : ""),
|
|
15
15
|
className ?? "",
|
|
16
16
|
]
|
|
17
17
|
.filter(Boolean)
|
package/src/link/Link.tsx
CHANGED
|
@@ -14,7 +14,7 @@ export default function Link({ noUnderline, noVisitedState, variant, class: clas
|
|
|
14
14
|
"govuk-link",
|
|
15
15
|
noUnderline ? "govuk-link--no-underline" : "",
|
|
16
16
|
noVisitedState ? "govuk-link--no-visited-state" : "",
|
|
17
|
-
({ "warning": "govuk-link--warning", "inverse": "govuk-link--inverse" }[variant]
|
|
17
|
+
(variant ? { "warning": "govuk-link--warning", "inverse": "govuk-link--inverse" }[variant] : ""),
|
|
18
18
|
className ?? "",
|
|
19
19
|
]
|
|
20
20
|
.filter(Boolean)
|
|
@@ -12,7 +12,7 @@ type TableCaptionProps = {
|
|
|
12
12
|
export default function TableCaption({ size, class: className, children, ...rest }: TableCaptionProps) {
|
|
13
13
|
const classes = [
|
|
14
14
|
"govuk-table__caption",
|
|
15
|
-
({ "small": "govuk-table__caption--s", "medium": "govuk-table__caption--m", "large": "govuk-table__caption--l", "xl": "govuk-table__caption--xl" }[size]
|
|
15
|
+
(size ? { "small": "govuk-table__caption--s", "medium": "govuk-table__caption--m", "large": "govuk-table__caption--l", "xl": "govuk-table__caption--xl" }[size] : ""),
|
|
16
16
|
className ?? "",
|
|
17
17
|
]
|
|
18
18
|
.filter(Boolean)
|
package/src/tag/Tag.tsx
CHANGED
|
@@ -10,7 +10,7 @@ type TagProps = {
|
|
|
10
10
|
export default function Tag({ colour, class: className, children, ...rest }: TagProps) {
|
|
11
11
|
const classes = [
|
|
12
12
|
"govuk-tag",
|
|
13
|
-
({ "grey": "govuk-tag--grey", "green": "govuk-tag--green", "teal": "govuk-tag--teal", "turquoise": "govuk-tag--turquoise", "blue": "govuk-tag--blue", "light-blue": "govuk-tag--light-blue", "purple": "govuk-tag--purple", "magenta": "govuk-tag--magenta", "pink": "govuk-tag--pink", "red": "govuk-tag--red", "orange": "govuk-tag--orange", "yellow": "govuk-tag--yellow" }[colour]
|
|
13
|
+
(colour ? { "grey": "govuk-tag--grey", "green": "govuk-tag--green", "teal": "govuk-tag--teal", "turquoise": "govuk-tag--turquoise", "blue": "govuk-tag--blue", "light-blue": "govuk-tag--light-blue", "purple": "govuk-tag--purple", "magenta": "govuk-tag--magenta", "pink": "govuk-tag--pink", "red": "govuk-tag--red", "orange": "govuk-tag--orange", "yellow": "govuk-tag--yellow" }[colour] : ""),
|
|
14
14
|
className ?? "",
|
|
15
15
|
]
|
|
16
16
|
.filter(Boolean)
|