@ogcio/design-system-react 1.25.0 → 1.26.0
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/README.md +10 -0
- package/dist/combo-box/dropdown-item.js +2 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +8 -6
- package/dist/load-fonts/load-fonts.d.ts +40 -0
- package/dist/load-fonts/load-fonts.js +29 -0
- package/dist/styles.css +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -75,6 +75,16 @@ function MyComponent() {
|
|
|
75
75
|
|
|
76
76
|
The Government of Ireland Design System uses the [Lato](https://fonts.google.com/specimen/Lato) Google font. The font should be added to your application, e.g. via [next/font](https://nextjs.org/docs/app/building-your-application/optimizing/fonts), [Fontsource](https://fontsource.org/docs/getting-started/install) or embed code.
|
|
77
77
|
|
|
78
|
+
> **Next.js 16+ users:** Use the `LoadFonts` component in your root layout to load fonts from Google CDN:
|
|
79
|
+
>
|
|
80
|
+
> ```tsx
|
|
81
|
+
> import { LoadFonts } from '@ogcio/design-system-react';
|
|
82
|
+
>
|
|
83
|
+
> <head>
|
|
84
|
+
> <LoadFonts />
|
|
85
|
+
> </head>;
|
|
86
|
+
> ```
|
|
87
|
+
|
|
78
88
|
### Internationalization (i18n) Guidelines
|
|
79
89
|
|
|
80
90
|
To support multiple languages across your application, we use the `initI18n` utility provided by `@ogcio/design-system-react`. This ensures consistency, accessibility, and localization across all components.
|
package/dist/index.d.ts
CHANGED
|
@@ -109,3 +109,4 @@ export type { ToastHorizontalPosition, ToastPosition, ToastProps, ToastVariant,
|
|
|
109
109
|
export { Tooltip, type TooltipProps } from './tooltip/tooltip.js';
|
|
110
110
|
export { useToggleMap } from './hooks/use-toggle-map.js';
|
|
111
111
|
export * from './browser-support/index.js';
|
|
112
|
+
export { LoadFonts } from './load-fonts/load-fonts.js';
|
package/dist/index.js
CHANGED
|
@@ -100,8 +100,9 @@ import { ToastProvider as gt, toaster as ht } from "./toast/toast.js";
|
|
|
100
100
|
import { Tooltip as yt } from "./tooltip/tooltip.js";
|
|
101
101
|
import { useToggleMap as At } from "./hooks/use-toggle-map.js";
|
|
102
102
|
import { BrowserSupport as vt } from "./browser-support/browser-support.js";
|
|
103
|
-
import {
|
|
104
|
-
import {
|
|
103
|
+
import { LoadFonts as Et } from "./load-fonts/load-fonts.js";
|
|
104
|
+
import { SelectGroupItem as Wt, SelectItem as zt, SelectTableCell as Vt } from "./select/select-native.js";
|
|
105
|
+
import { i as Ut } from "./i18next-B_GQfCrJ.js";
|
|
105
106
|
export {
|
|
106
107
|
a as Accordion,
|
|
107
108
|
o as AccordionItem,
|
|
@@ -195,6 +196,7 @@ export {
|
|
|
195
196
|
He as Link,
|
|
196
197
|
Le as List,
|
|
197
198
|
De as ListItem,
|
|
199
|
+
Et as LoadFonts,
|
|
198
200
|
ke as Modal,
|
|
199
201
|
ge as ModalBody,
|
|
200
202
|
he as ModalFooter,
|
|
@@ -211,12 +213,12 @@ export {
|
|
|
211
213
|
ro as ScoreSelect,
|
|
212
214
|
oo as SectionBreak,
|
|
213
215
|
ao as Select,
|
|
214
|
-
|
|
216
|
+
Wt as SelectGroupItem,
|
|
215
217
|
mo as SelectGroupItemNext,
|
|
216
|
-
|
|
218
|
+
zt as SelectItem,
|
|
217
219
|
xo as SelectItemNext,
|
|
218
220
|
fo as SelectNext,
|
|
219
|
-
|
|
221
|
+
Vt as SelectTableCell,
|
|
220
222
|
no as SideNav,
|
|
221
223
|
io as SideNavHeading,
|
|
222
224
|
uo as SideNavItem,
|
|
@@ -249,7 +251,7 @@ export {
|
|
|
249
251
|
gt as ToastProvider,
|
|
250
252
|
yt as Tooltip,
|
|
251
253
|
f as alertVariants,
|
|
252
|
-
|
|
254
|
+
Ut as i18next,
|
|
253
255
|
Or as initI18n,
|
|
254
256
|
ht as toaster,
|
|
255
257
|
Br as useHeaderContext,
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* LoadFonts Component
|
|
3
|
+
*
|
|
4
|
+
* This component injects Google Fonts link tags for Lato font family and Material Symbols Outlined icons.
|
|
5
|
+
* Use this component in your app's root layout or _app file to load fonts from Google CDN.
|
|
6
|
+
*
|
|
7
|
+
* **Next.js App Router (app/layout.tsx):**
|
|
8
|
+
* ```tsx
|
|
9
|
+
* import { LoadFonts } from '@ogcio/design-system-react';
|
|
10
|
+
*
|
|
11
|
+
* export default function RootLayout({ children }) {
|
|
12
|
+
* return (
|
|
13
|
+
* <html lang="en">
|
|
14
|
+
* <head>
|
|
15
|
+
* <LoadFonts />
|
|
16
|
+
* </head>
|
|
17
|
+
* <body>{children}</body>
|
|
18
|
+
* </html>
|
|
19
|
+
* );
|
|
20
|
+
* }
|
|
21
|
+
* ```
|
|
22
|
+
*
|
|
23
|
+
* **Next.js Pages Router (pages/_app.tsx):**
|
|
24
|
+
* ```tsx
|
|
25
|
+
* import Head from 'next/head';
|
|
26
|
+
* import { LoadFonts } from '@ogcio/design-system-react';
|
|
27
|
+
*
|
|
28
|
+
* export default function App({ Component, pageProps }) {
|
|
29
|
+
* return (
|
|
30
|
+
* <>
|
|
31
|
+
* <Head>
|
|
32
|
+
* <LoadFonts />
|
|
33
|
+
* </Head>
|
|
34
|
+
* <Component {...pageProps} />
|
|
35
|
+
* </>
|
|
36
|
+
* );
|
|
37
|
+
* }
|
|
38
|
+
* ```
|
|
39
|
+
*/
|
|
40
|
+
export declare const LoadFonts: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsxs as r, Fragment as e, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
const a = () => /* @__PURE__ */ r(e, { children: [
|
|
3
|
+
/* @__PURE__ */ o("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }),
|
|
4
|
+
/* @__PURE__ */ o(
|
|
5
|
+
"link",
|
|
6
|
+
{
|
|
7
|
+
rel: "preconnect",
|
|
8
|
+
href: "https://fonts.gstatic.com",
|
|
9
|
+
crossOrigin: "anonymous"
|
|
10
|
+
}
|
|
11
|
+
),
|
|
12
|
+
/* @__PURE__ */ o(
|
|
13
|
+
"link",
|
|
14
|
+
{
|
|
15
|
+
href: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap",
|
|
16
|
+
rel: "stylesheet"
|
|
17
|
+
}
|
|
18
|
+
),
|
|
19
|
+
/* @__PURE__ */ o(
|
|
20
|
+
"link",
|
|
21
|
+
{
|
|
22
|
+
href: "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0..1,0&icon_names=accessibility_new,add_circle,apps,arrow_back,arrow_downward,arrow_drop_down,arrow_drop_up,arrow_forward,arrow_left_alt,arrow_outward,arrow_right_alt,arrow_upward,attach_file,block,call,cancel,candlestick_chart,chat_bubble,check,check_circle,chevron_left,chevron_right,child_care,close,content_copy,credit_card,delete,directions_car,do_not_disturb_on,download,edit,error,event,filter_list,first_page,health_and_safety,home,info,keyboard_arrow_down,keyboard_arrow_up,last_page,link,location_on,login,logout,mail,menu,mic,more_horiz,more_vert,open_in_new,person,person_cancel,person_check,refresh,search,send,settings,sort,space_dashboard,swap_vert,sync,thumb_down,thumb_up,unfold_more,upload,visibility,visibility_off,warning,work",
|
|
23
|
+
rel: "stylesheet"
|
|
24
|
+
}
|
|
25
|
+
)
|
|
26
|
+
] });
|
|
27
|
+
export {
|
|
28
|
+
a as LoadFonts
|
|
29
|
+
};
|