@i-dot-ai-npm/component-library-react 0.0.4 → 0.0.6
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/contents-panel/ContentsPanel.tsx +28 -0
- package/src/contents-panel/ContentsPanelItem.tsx +37 -0
- package/src/contents-panel/ContentsPanelList.tsx +17 -0
- package/src/contents-panel/ContentsPanelListHeading.tsx +17 -0
- package/src/footer/Footer.tsx +34 -173
- package/src/govuk-footer/GovukFooter.tsx +203 -0
- package/src/index.ts +5 -0
- package/src/toggle/Toggle.tsx +1 -5
- package/src/toggle/ToggleItem.tsx +1 -1
package/package.json
CHANGED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
|
|
3
|
+
type ContentsPanelProps = {
|
|
4
|
+
heading?: string;
|
|
5
|
+
headingId?: string;
|
|
6
|
+
class?: string;
|
|
7
|
+
children?: ReactNode;
|
|
8
|
+
[key: string]: unknown;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export default function ContentsPanel({
|
|
12
|
+
heading = "Pages in this section",
|
|
13
|
+
headingId = "contents-panel-heading",
|
|
14
|
+
class: className,
|
|
15
|
+
children,
|
|
16
|
+
...rest
|
|
17
|
+
}: ContentsPanelProps) {
|
|
18
|
+
const classes = ["contents-panel", className ?? ""].filter(Boolean).join(" ");
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<nav className={classes} aria-labelledby={headingId} {...rest}>
|
|
22
|
+
<h2 className="govuk-visually-hidden" id={headingId}>
|
|
23
|
+
{heading}
|
|
24
|
+
</h2>
|
|
25
|
+
{children}
|
|
26
|
+
</nav>
|
|
27
|
+
);
|
|
28
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
|
|
3
|
+
type ContentsPanelItemProps = {
|
|
4
|
+
href?: string;
|
|
5
|
+
current?: boolean;
|
|
6
|
+
class?: string;
|
|
7
|
+
children?: ReactNode;
|
|
8
|
+
[key: string]: unknown;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export default function ContentsPanelItem({
|
|
12
|
+
href,
|
|
13
|
+
current = false,
|
|
14
|
+
class: className,
|
|
15
|
+
children,
|
|
16
|
+
...rest
|
|
17
|
+
}: ContentsPanelItemProps) {
|
|
18
|
+
const itemClasses = [
|
|
19
|
+
"contents-panel__list-item",
|
|
20
|
+
current ? "contents-panel__list-item--current" : "",
|
|
21
|
+
className ?? "",
|
|
22
|
+
]
|
|
23
|
+
.filter(Boolean)
|
|
24
|
+
.join(" ");
|
|
25
|
+
|
|
26
|
+
return (
|
|
27
|
+
<li className={itemClasses} {...rest}>
|
|
28
|
+
<a
|
|
29
|
+
className="contents-panel__link govuk-link govuk-link--no-visited-state govuk-link--no-underline"
|
|
30
|
+
href={href}
|
|
31
|
+
aria-current={current ? "page" : undefined}
|
|
32
|
+
>
|
|
33
|
+
{children}
|
|
34
|
+
</a>
|
|
35
|
+
</li>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
|
|
3
|
+
type ContentsPanelListProps = {
|
|
4
|
+
class?: string;
|
|
5
|
+
children?: ReactNode;
|
|
6
|
+
[key: string]: unknown;
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
export default function ContentsPanelList({ class: className, children, ...rest }: ContentsPanelListProps) {
|
|
10
|
+
const classes = ["contents-panel__list", className ?? ""].filter(Boolean).join(" ");
|
|
11
|
+
|
|
12
|
+
return (
|
|
13
|
+
<ul className={classes} {...rest}>
|
|
14
|
+
{children}
|
|
15
|
+
</ul>
|
|
16
|
+
);
|
|
17
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
|
|
3
|
+
type ContentsPanelListHeadingProps = {
|
|
4
|
+
class?: string;
|
|
5
|
+
children?: ReactNode;
|
|
6
|
+
[key: string]: unknown;
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
export default function ContentsPanelListHeading({ class: className, children, ...rest }: ContentsPanelListHeadingProps) {
|
|
10
|
+
const classes = ["contents-panel__list-heading", className ?? ""].filter(Boolean).join(" ");
|
|
11
|
+
|
|
12
|
+
return (
|
|
13
|
+
<h3 className={classes} {...rest}>
|
|
14
|
+
{children}
|
|
15
|
+
</h3>
|
|
16
|
+
);
|
|
17
|
+
}
|
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
|
@@ -23,6 +23,10 @@ export { default as CheckboxInput } from "./checkboxes/CheckboxInput";
|
|
|
23
23
|
export { default as CheckboxItem } from "./checkboxes/CheckboxItem";
|
|
24
24
|
export { default as CheckboxLabel } from "./checkboxes/CheckboxLabel";
|
|
25
25
|
export { default as Checkboxes } from "./checkboxes/Checkboxes";
|
|
26
|
+
export { default as ContentsPanelListHeading } from "./contents-panel/ContentsPanelListHeading";
|
|
27
|
+
export { default as ContentsPanelList } from "./contents-panel/ContentsPanelList";
|
|
28
|
+
export { default as ContentsPanelItem } from "./contents-panel/ContentsPanelItem";
|
|
29
|
+
export { default as ContentsPanel } from "./contents-panel/ContentsPanel";
|
|
26
30
|
export { default as CookieBannerActions } from "./cookie-banner/CookieBannerActions";
|
|
27
31
|
export { default as CookieBannerContent } from "./cookie-banner/CookieBannerContent";
|
|
28
32
|
export { default as CookieBannerHeading } from "./cookie-banner/CookieBannerHeading";
|
|
@@ -47,6 +51,7 @@ export { default as Feedback } from "./feedback/Feedback";
|
|
|
47
51
|
export { default as FileUpload } from "./file-upload/FileUpload";
|
|
48
52
|
export { default as Footer } from "./footer/Footer";
|
|
49
53
|
export { default as FormGroup } from "./form-group/FormGroup";
|
|
54
|
+
export { default as GovukFooter } from "./govuk-footer/GovukFooter";
|
|
50
55
|
export { default as GovukHeader } from "./govuk-header/GovukHeader";
|
|
51
56
|
export { default as Header } from "./header/Header";
|
|
52
57
|
export { default as Hint } from "./hint/Hint";
|
package/src/toggle/Toggle.tsx
CHANGED
|
@@ -6,9 +6,5 @@ type ToggleProps = {
|
|
|
6
6
|
export default function Toggle({ class: className, ...rest }: ToggleProps) {
|
|
7
7
|
const classes = ["iai-toggle__input", className ?? ""].filter(Boolean).join(" ");
|
|
8
8
|
|
|
9
|
-
return
|
|
10
|
-
<div className="iai-toggle">
|
|
11
|
-
<input className={classes} type="checkbox" {...rest} />
|
|
12
|
-
</div>
|
|
13
|
-
);
|
|
9
|
+
return <input className={classes} type="checkbox" role="switch" {...rest} />;
|
|
14
10
|
}
|
|
@@ -10,7 +10,7 @@ export default function ToggleItem({ class: className, children, ...rest }: Togg
|
|
|
10
10
|
const classes = ["iai-toggle__item", className ?? ""].filter(Boolean).join(" ");
|
|
11
11
|
|
|
12
12
|
return (
|
|
13
|
-
<div className={classes}
|
|
13
|
+
<div className={classes} {...rest}>
|
|
14
14
|
{children ?? ""}
|
|
15
15
|
</div>
|
|
16
16
|
);
|