@ogcio/design-system-react 1.26.0 → 1.27.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.
Files changed (7) hide show
  1. package/README.md +27 -11
  2. package/dist/index.d.ts +5 -1
  3. package/dist/index.js +38 -37
  4. package/dist/load-symbols/load-symbols.d.ts +7 -0
  5. package/dist/{load-fonts/load-fonts.js → load-symbols/load-symbols.js} +7 -13
  6. package/package.json +1 -1
  7. package/dist/load-fonts/load-fonts.d.ts +0 -40
package/README.md CHANGED
@@ -73,17 +73,33 @@ function MyComponent() {
73
73
  }
74
74
  ```
75
75
 
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
-
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
- > ```
76
+ #### Font Loading
77
+
78
+ The Government of Ireland Design System uses the [Lato](https://fonts.google.com/specimen/Lato) Google font. While the design system includes font loading through `styles.css`, **in Next.js 16 applications, CSS `@import` statements do not load fonts properly**. Therefore, you must explicitly load fonts using `next/font/google` for optimal font loading.
79
+
80
+ **Recommended approach for Next.js (Primary):**
81
+
82
+ For Next.js applications, we strongly recommend using [`next/font/google`](https://nextjs.org/docs/app/getting-started/fonts) as it provides optimal font loading with automatic optimisation.
83
+
84
+ ```tsx
85
+ // app/layout.tsx (App Router)
86
+ import { Lato } from 'next/font/google';
87
+
88
+ const lato = Lato({
89
+ subsets: ['latin'],
90
+ weight: ['100', '300', '400', '700', '900'],
91
+ style: ['normal', 'italic'],
92
+ display: 'swap',
93
+ });
94
+
95
+ export default function RootLayout({ children }) {
96
+ return (
97
+ <html lang="en" className={lato.className}>
98
+ <body>{children}</body>
99
+ </html>
100
+ );
101
+ }
102
+ ```
87
103
 
88
104
  ### Internationalization (i18n) Guidelines
89
105
 
package/dist/index.d.ts CHANGED
@@ -109,4 +109,8 @@ 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';
112
+ export { LoadMaterialSymbols } from './load-symbols/load-symbols.js';
113
+ /**
114
+ * @deprecated added for the backwards compatibility
115
+ */
116
+ export { LoadMaterialSymbols as LoadFonts } from './load-symbols/load-symbols.js';
package/dist/index.js CHANGED
@@ -4,10 +4,10 @@ import { Alert as m } from "./alert/alert.js";
4
4
  import { alertVariants as f } from "./alert/variants.js";
5
5
  import { Autocomplete as n, AutocompleteItem as i } from "./autocomplete/autocomplete.js";
6
6
  import { Blockquote as u } from "./blockquote/blockquote.js";
7
- import { BreadcrumbCurrentLink as b, BreadcrumbEllipsis as c, BreadcrumbLink as S, Breadcrumbs as s } from "./breadcrumbs/breadcrumbs.js";
7
+ import { BreadcrumbCurrentLink as T, BreadcrumbEllipsis as c, BreadcrumbLink as S, Breadcrumbs as s } from "./breadcrumbs/breadcrumbs.js";
8
8
  import { ButtonGroup as I, ButtonGroupItem as H } from "./button-group/button-group.js";
9
9
  import { Button as D } from "./button/button.js";
10
- import { CardAction as L, CardContainer as M, CardDescription as k, CardHeader as g, CardMedia as h, CardSubtitle as P, CardTag as y, CardTitle as w } from "./card/card-next.js";
10
+ import { CardAction as L, CardContainer as M, CardDescription as k, CardHeader as g, CardMedia as y, CardSubtitle as h, CardTag as P, CardTitle as w } from "./card/card-next.js";
11
11
  import { Card as G } from "./card/card.js";
12
12
  import { CheckboxGroup as R } from "./checkbox/checkbox-group.js";
13
13
  import { Checkbox as N } from "./checkbox/checkbox.js";
@@ -22,14 +22,14 @@ import { FileUpload as tr } from "./file-upload/file-upload.js";
22
22
  import { Footer as pr } from "./footer/footer.js";
23
23
  import { FormFieldWithTag as xr } from "./forms/form-field-with-tag/form-field-with-tag.js";
24
24
  import { FormField as lr, FormFieldError as nr, FormFieldHint as ir, FormFieldLabel as dr } from "./forms/form-field/form-field.js";
25
- import { Form as Tr } from "./forms/form.js";
25
+ import { Form as br } from "./forms/form.js";
26
26
  import { HeaderSearch as cr } from "./header/components/header-search.js";
27
27
  import { Header as sr } from "./header/header.js";
28
28
  import { HeaderNext as Ir, HeaderSlotContainer as Hr } from "./header/header-next/header-next.js";
29
29
  import { HeaderProvider as Dr, useHeaderContext as Br } from "./header/header-next/header-context.js";
30
30
  import { HeaderLogo as Mr } from "./header/header-next/components/header-logo.js";
31
31
  import { HeaderTitle as gr } from "./header/header-next/components/header-title.js";
32
- import { HeaderMenuSectionProvider as Pr, useHeaderMenuSection as yr } from "./header/header-next/components/menu/header-menu-context.js";
32
+ import { HeaderMenuSectionProvider as hr, useHeaderMenuSection as Pr } from "./header/header-next/components/menu/header-menu-context.js";
33
33
  import { HeaderPrimaryMenu as Ar } from "./header/header-next/components/menu/header-primary-menu.js";
34
34
  import { HeaderSecondaryMenu as vr } from "./header/header-next/components/menu/header-secondary-menu.js";
35
35
  import { HeaderMenuItemButton as Er } from "./header/header-next/components/menu/components/header-menu-item-button.js";
@@ -47,13 +47,13 @@ import { InputCheckboxSizeEnum as me } from "./input-checkbox/types.js";
47
47
  import { InputFile as fe } from "./input-file/input-file.js";
48
48
  import { InputPassword as ne } from "./input-password/input-password.js";
49
49
  import { InputRadioGroup as de } from "./input-radio-group/input-radio-group.js";
50
- import { InputRadio as Te } from "./input-radio/input-radio.js";
50
+ import { InputRadio as be } from "./input-radio/input-radio.js";
51
51
  import { InputRadioSizeEnum as ce } from "./input-radio/types.js";
52
52
  import { InputText as se, InputTextTableCell as Ce } from "./input-text/input-text.js";
53
53
  import { Link as He } from "./link/link.js";
54
54
  import { ListItem as De } from "./list-item/list-item.js";
55
55
  import { List as Le } from "./list/list.js";
56
- import { Modal as ke, ModalBody as ge, ModalFooter as he, ModalTitle as Pe, ModalWrapper as ye } from "./modal/modal.js";
56
+ import { Modal as ke, ModalBody as ge, ModalFooter as ye, ModalTitle as he, ModalWrapper as Pe } from "./modal/modal.js";
57
57
  import { Pagination as Ae } from "./pagination/pagination.js";
58
58
  import { Paragraph as ve } from "./paragraph/paragraph.js";
59
59
  import { PhaseBanner as Ee } from "./phase-banner/phase-banner.js";
@@ -68,15 +68,15 @@ import { SectionBreak as oo } from "./section-break/section-break.js";
68
68
  import { Select as ao } from "./select/select.js";
69
69
  import { SelectGroupItemNext as mo, SelectItemNext as xo, SelectNext as fo } from "./select/select-next.js";
70
70
  import { SideNav as no, SideNavHeading as io, SideNavItem as uo } from "./side-nav/side-nav.js";
71
- import { Spinner as bo } from "./spinner/spinner.js";
71
+ import { Spinner as To } from "./spinner/spinner.js";
72
72
  import { Stack as So } from "./stack/stack.js";
73
73
  import { SummaryListRow as Co } from "./summary-list/summary-list-row.js";
74
74
  import { SummaryListAction as Ho } from "./summary-list/summary-list-action.js";
75
75
  import { SummaryListValue as Do } from "./summary-list/summary-list-value.js";
76
76
  import { SummaryList as Lo } from "./summary-list/summary-list.js";
77
77
  import { SummaryListHeader as ko } from "./summary-list/summary-list-header.js";
78
- import { Caption as ho } from "./table/caption.js";
79
- import { ColumnGroup as yo } from "./table/column-group.js";
78
+ import { Caption as yo } from "./table/caption.js";
79
+ import { ColumnGroup as Po } from "./table/column-group.js";
80
80
  import { Column as Ao } from "./table/column.js";
81
81
  import { TableBody as vo } from "./table/table-body.js";
82
82
  import { TableData as Eo } from "./table/table-data.js";
@@ -90,19 +90,19 @@ import { TabList as Zo } from "./tabs/tab-list.js";
90
90
  import { TabPanel as $o } from "./tabs/tab-panel.js";
91
91
  import { Tabs as et } from "./tabs/tabs.js";
92
92
  import { DataTableFooter as tt, DataTableFooterCenter as at, DataTableFooterEnd as pt, DataTableFooterStart as mt } from "./data-table/data-table-footer.js";
93
- import { DataTableHeader as ft, DataTableHeaderActions as lt, DataTableHeaderFilter as nt, DataTableHeaderFilterActions as it, DataTableHeaderFilterContent as dt, DataTableHeaderFilterContentTitle as ut, DataTableHeaderFilterList as Tt, DataTableHeaderSearch as bt } from "./data-table/data-table-header.js";
93
+ import { DataTableHeader as ft, DataTableHeaderActions as lt, DataTableHeaderFilter as nt, DataTableHeaderFilterActions as it, DataTableHeaderFilterContent as dt, DataTableHeaderFilterContentTitle as ut, DataTableHeaderFilterList as bt, DataTableHeaderSearch as Tt } from "./data-table/data-table-header.js";
94
94
  import { DataTableSelectedRowsBanner as St } from "./data-table/data-table-selected-rows.js";
95
95
  import { EditableTableCell as Ct } from "./data-table/editable-table-cell.js";
96
96
  import { Tag as Ht, TagTypeEnum as Ft } from "./tag/tag.js";
97
97
  import { TextInput as Bt } from "./text-input/text-input.js";
98
98
  import { TextArea as Mt } from "./textarea/textarea.js";
99
- import { ToastProvider as gt, toaster as ht } from "./toast/toast.js";
100
- import { Tooltip as yt } from "./tooltip/tooltip.js";
99
+ import { ToastProvider as gt, toaster as yt } from "./toast/toast.js";
100
+ import { Tooltip as Pt } 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 { 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";
103
+ import { LoadMaterialSymbols as Et, LoadMaterialSymbols as Nt } from "./load-symbols/load-symbols.js";
104
+ import { SelectGroupItem as zt, SelectItem as Vt, SelectTableCell as qt } from "./select/select-native.js";
105
+ import { i as jt } from "./i18next-B_GQfCrJ.js";
106
106
  export {
107
107
  a as Accordion,
108
108
  o as AccordionItem,
@@ -110,7 +110,7 @@ export {
110
110
  n as Autocomplete,
111
111
  i as AutocompleteItem,
112
112
  u as Blockquote,
113
- b as BreadcrumbCurrentLink,
113
+ T as BreadcrumbCurrentLink,
114
114
  c as BreadcrumbEllipsis,
115
115
  S as BreadcrumbLink,
116
116
  s as Breadcrumbs,
@@ -118,21 +118,21 @@ export {
118
118
  D as Button,
119
119
  I as ButtonGroup,
120
120
  H as ButtonGroupItem,
121
- ho as Caption,
121
+ yo as Caption,
122
122
  G as Card,
123
123
  L as CardAction,
124
124
  M as CardContainer,
125
125
  k as CardDescription,
126
126
  g as CardHeader,
127
- h as CardMedia,
128
- P as CardSubtitle,
129
- y as CardTag,
127
+ y as CardMedia,
128
+ h as CardSubtitle,
129
+ P as CardTag,
130
130
  w as CardTitle,
131
131
  N as Checkbox,
132
132
  R as CheckboxGroup,
133
133
  z as Chip,
134
134
  Ao as Column,
135
- yo as ColumnGroup,
135
+ Po as ColumnGroup,
136
136
  q as Combobox,
137
137
  K as Container,
138
138
  Q as CookieBanner,
@@ -146,8 +146,8 @@ export {
146
146
  it as DataTableHeaderFilterActions,
147
147
  dt as DataTableHeaderFilterContent,
148
148
  ut as DataTableHeaderFilterContentTitle,
149
- Tt as DataTableHeaderFilterList,
150
- bt as DataTableHeaderSearch,
149
+ bt as DataTableHeaderFilterList,
150
+ Tt as DataTableHeaderSearch,
151
151
  St as DataTableSelectedRowsBanner,
152
152
  Y as Details,
153
153
  _ as Drawer,
@@ -158,7 +158,7 @@ export {
158
158
  Ct as EditableTableCell,
159
159
  tr as FileUpload,
160
160
  pr as Footer,
161
- Tr as Form,
161
+ br as Form,
162
162
  lr as FormField,
163
163
  nr as FormFieldError,
164
164
  ir as FormFieldHint,
@@ -170,7 +170,7 @@ export {
170
170
  Wr as HeaderMenuItemLink,
171
171
  Vr as HeaderMenuItemSeparator,
172
172
  Ur as HeaderMenuItemSlot,
173
- Pr as HeaderMenuSectionProvider,
173
+ hr as HeaderMenuSectionProvider,
174
174
  Ir as HeaderNext,
175
175
  Ar as HeaderPrimaryMenu,
176
176
  Dr as HeaderProvider,
@@ -188,7 +188,7 @@ export {
188
188
  ae as InputCheckboxTableCell,
189
189
  fe as InputFile,
190
190
  ne as InputPassword,
191
- Te as InputRadio,
191
+ be as InputRadio,
192
192
  de as InputRadioGroup,
193
193
  ce as InputRadioSizeEnum,
194
194
  se as InputText,
@@ -197,11 +197,12 @@ export {
197
197
  Le as List,
198
198
  De as ListItem,
199
199
  Et as LoadFonts,
200
+ Nt as LoadMaterialSymbols,
200
201
  ke as Modal,
201
202
  ge as ModalBody,
202
- he as ModalFooter,
203
- Pe as ModalTitle,
204
- ye as ModalWrapper,
203
+ ye as ModalFooter,
204
+ he as ModalTitle,
205
+ Pe as ModalWrapper,
205
206
  Ae as Pagination,
206
207
  ve as Paragraph,
207
208
  Ee as PhaseBanner,
@@ -213,16 +214,16 @@ export {
213
214
  ro as ScoreSelect,
214
215
  oo as SectionBreak,
215
216
  ao as Select,
216
- Wt as SelectGroupItem,
217
+ zt as SelectGroupItem,
217
218
  mo as SelectGroupItemNext,
218
- zt as SelectItem,
219
+ Vt as SelectItem,
219
220
  xo as SelectItemNext,
220
221
  fo as SelectNext,
221
- Vt as SelectTableCell,
222
+ qt as SelectTableCell,
222
223
  no as SideNav,
223
224
  io as SideNavHeading,
224
225
  uo as SideNavItem,
225
- bo as Spinner,
226
+ To as Spinner,
226
227
  So as Stack,
227
228
  Oe as Step,
228
229
  Ue as StepFillLevel,
@@ -249,12 +250,12 @@ export {
249
250
  Mt as TextArea,
250
251
  Bt as TextInput,
251
252
  gt as ToastProvider,
252
- yt as Tooltip,
253
+ Pt as Tooltip,
253
254
  f as alertVariants,
254
- Ut as i18next,
255
+ jt as i18next,
255
256
  Or as initI18n,
256
- ht as toaster,
257
+ yt as toaster,
257
258
  Br as useHeaderContext,
258
- yr as useHeaderMenuSection,
259
+ Pr as useHeaderMenuSection,
259
260
  At as useToggleMap
260
261
  };
package/dist/load-symbols/load-symbols.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ /**
2
+ * LoadMaterialSymbols Component
3
+ *
4
+ * This component is a workaround solution, responsible for loading the Material Symbols font from Google Fonts specifically for Next.js 16 users.
5
+ */
6
+ export declare const LoadMaterialSymbols: () => import("react/jsx-runtime").JSX.Element;
7
+ export default LoadMaterialSymbols;
package/dist/{load-fonts/load-fonts.js → load-symbols/load-symbols.js} RENAMED
@@ -1,7 +1,7 @@
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(
1
+ import { jsxs as o, Fragment as e, jsx as r } from "react/jsx-runtime";
2
+ const t = () => /* @__PURE__ */ o(e, { children: [
3
+ /* @__PURE__ */ r("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }),
4
+ /* @__PURE__ */ r(
5
5
  "link",
6
6
  {
7
7
  rel: "preconnect",
@@ -9,14 +9,7 @@ const a = () => /* @__PURE__ */ r(e, { children: [
9
9
  crossOrigin: "anonymous"
10
10
  }
11
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(
12
+ /* @__PURE__ */ r(
20
13
  "link",
21
14
  {
22
15
  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",
@@ -25,5 +18,6 @@ const a = () => /* @__PURE__ */ r(e, { children: [
25
18
  )
26
19
  ] });
27
20
  export {
28
- a as LoadFonts
21
+ t as LoadMaterialSymbols,
22
+ t as default
29
23
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ogcio/design-system-react",
3
- "version": "1.26.0",
3
+ "version": "1.27.0",
4
4
  "description": "The Government of Ireland Design System React components.",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
package/dist/load-fonts/load-fonts.d.ts DELETED
@@ -1,40 +0,0 @@
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;