@ogcio/design-system-react 1.25.1 → 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 -1
  2. package/dist/index.d.ts +5 -0
  3. package/dist/index.js +39 -36
  4. package/dist/load-symbols/load-symbols.d.ts +7 -0
  5. package/dist/load-symbols/load-symbols.js +23 -0
  6. package/dist/styles.css +1 -1
  7. package/package.json +3 -3
package/README.md CHANGED
@@ -73,7 +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.
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
+ ```
77
103
 
78
104
  ### Internationalization (i18n) Guidelines
79
105
 
package/dist/index.d.ts CHANGED
@@ -109,3 +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 { 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,18 +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 { SelectGroupItem as Et, SelectItem as Nt, SelectTableCell as Wt } from "./select/select-native.js";
104
- import { i as Vt } 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";
105
106
  export {
106
107
  a as Accordion,
107
108
  o as AccordionItem,
@@ -109,7 +110,7 @@ export {
109
110
  n as Autocomplete,
110
111
  i as AutocompleteItem,
111
112
  u as Blockquote,
112
- b as BreadcrumbCurrentLink,
113
+ T as BreadcrumbCurrentLink,
113
114
  c as BreadcrumbEllipsis,
114
115
  S as BreadcrumbLink,
115
116
  s as Breadcrumbs,
@@ -117,21 +118,21 @@ export {
117
118
  D as Button,
118
119
  I as ButtonGroup,
119
120
  H as ButtonGroupItem,
120
- ho as Caption,
121
+ yo as Caption,
121
122
  G as Card,
122
123
  L as CardAction,
123
124
  M as CardContainer,
124
125
  k as CardDescription,
125
126
  g as CardHeader,
126
- h as CardMedia,
127
- P as CardSubtitle,
128
- y as CardTag,
127
+ y as CardMedia,
128
+ h as CardSubtitle,
129
+ P as CardTag,
129
130
  w as CardTitle,
130
131
  N as Checkbox,
131
132
  R as CheckboxGroup,
132
133
  z as Chip,
133
134
  Ao as Column,
134
- yo as ColumnGroup,
135
+ Po as ColumnGroup,
135
136
  q as Combobox,
136
137
  K as Container,
137
138
  Q as CookieBanner,
@@ -145,8 +146,8 @@ export {
145
146
  it as DataTableHeaderFilterActions,
146
147
  dt as DataTableHeaderFilterContent,
147
148
  ut as DataTableHeaderFilterContentTitle,
148
- Tt as DataTableHeaderFilterList,
149
- bt as DataTableHeaderSearch,
149
+ bt as DataTableHeaderFilterList,
150
+ Tt as DataTableHeaderSearch,
150
151
  St as DataTableSelectedRowsBanner,
151
152
  Y as Details,
152
153
  _ as Drawer,
@@ -157,7 +158,7 @@ export {
157
158
  Ct as EditableTableCell,
158
159
  tr as FileUpload,
159
160
  pr as Footer,
160
- Tr as Form,
161
+ br as Form,
161
162
  lr as FormField,
162
163
  nr as FormFieldError,
163
164
  ir as FormFieldHint,
@@ -169,7 +170,7 @@ export {
169
170
  Wr as HeaderMenuItemLink,
170
171
  Vr as HeaderMenuItemSeparator,
171
172
  Ur as HeaderMenuItemSlot,
172
- Pr as HeaderMenuSectionProvider,
173
+ hr as HeaderMenuSectionProvider,
173
174
  Ir as HeaderNext,
174
175
  Ar as HeaderPrimaryMenu,
175
176
  Dr as HeaderProvider,
@@ -187,7 +188,7 @@ export {
187
188
  ae as InputCheckboxTableCell,
188
189
  fe as InputFile,
189
190
  ne as InputPassword,
190
- Te as InputRadio,
191
+ be as InputRadio,
191
192
  de as InputRadioGroup,
192
193
  ce as InputRadioSizeEnum,
193
194
  se as InputText,
@@ -195,11 +196,13 @@ export {
195
196
  He as Link,
196
197
  Le as List,
197
198
  De as ListItem,
199
+ Et as LoadFonts,
200
+ Nt as LoadMaterialSymbols,
198
201
  ke as Modal,
199
202
  ge as ModalBody,
200
- he as ModalFooter,
201
- Pe as ModalTitle,
202
- ye as ModalWrapper,
203
+ ye as ModalFooter,
204
+ he as ModalTitle,
205
+ Pe as ModalWrapper,
203
206
  Ae as Pagination,
204
207
  ve as Paragraph,
205
208
  Ee as PhaseBanner,
@@ -211,16 +214,16 @@ export {
211
214
  ro as ScoreSelect,
212
215
  oo as SectionBreak,
213
216
  ao as Select,
214
- Et as SelectGroupItem,
217
+ zt as SelectGroupItem,
215
218
  mo as SelectGroupItemNext,
216
- Nt as SelectItem,
219
+ Vt as SelectItem,
217
220
  xo as SelectItemNext,
218
221
  fo as SelectNext,
219
- Wt as SelectTableCell,
222
+ qt as SelectTableCell,
220
223
  no as SideNav,
221
224
  io as SideNavHeading,
222
225
  uo as SideNavItem,
223
- bo as Spinner,
226
+ To as Spinner,
224
227
  So as Stack,
225
228
  Oe as Step,
226
229
  Ue as StepFillLevel,
@@ -247,12 +250,12 @@ export {
247
250
  Mt as TextArea,
248
251
  Bt as TextInput,
249
252
  gt as ToastProvider,
250
- yt as Tooltip,
253
+ Pt as Tooltip,
251
254
  f as alertVariants,
252
- Vt as i18next,
255
+ jt as i18next,
253
256
  Or as initI18n,
254
- ht as toaster,
257
+ yt as toaster,
255
258
  Br as useHeaderContext,
256
- yr as useHeaderMenuSection,
259
+ Pr as useHeaderMenuSection,
257
260
  At as useToggleMap
258
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-symbols/load-symbols.js ADDED
@@ -0,0 +1,23 @@
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
+ "link",
6
+ {
7
+ rel: "preconnect",
8
+ href: "https://fonts.gstatic.com",
9
+ crossOrigin: "anonymous"
10
+ }
11
+ ),
12
+ /* @__PURE__ */ r(
13
+ "link",
14
+ {
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",
16
+ rel: "stylesheet"
17
+ }
18
+ )
19
+ ] });
20
+ export {
21
+ t as LoadMaterialSymbols,
22
+ t as default
23
+ };