@postenbring/hedwig-react 3.0.5 → 4.0.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 (130) hide show
  1. package/dist/alert/alert.d.ts +14 -0
  2. package/dist/alert/alert.d.ts.map +1 -1
  3. package/dist/alert/alert.js +43 -7
  4. package/dist/alert/alert.js.map +1 -1
  5. package/dist/alert/alert.mjs +2 -2
  6. package/dist/alert/index.js +43 -7
  7. package/dist/alert/index.js.map +1 -1
  8. package/dist/alert/index.mjs +2 -2
  9. package/dist/badge/badge.d.ts +12 -2
  10. package/dist/badge/badge.d.ts.map +1 -1
  11. package/dist/badge/badge.js +21 -4
  12. package/dist/badge/badge.js.map +1 -1
  13. package/dist/badge/badge.mjs +1 -1
  14. package/dist/badge/index.js +21 -4
  15. package/dist/badge/index.js.map +1 -1
  16. package/dist/badge/index.mjs +1 -1
  17. package/dist/box/box.d.ts +9 -2
  18. package/dist/box/box.d.ts.map +1 -1
  19. package/dist/box/box.js +31 -3
  20. package/dist/box/box.js.map +1 -1
  21. package/dist/box/box.mjs +1 -1
  22. package/dist/box/index.js +31 -3
  23. package/dist/box/index.js.map +1 -1
  24. package/dist/box/index.mjs +1 -1
  25. package/dist/card/card.d.ts +85 -7
  26. package/dist/card/card.d.ts.map +1 -1
  27. package/dist/card/card.js +30 -6
  28. package/dist/card/card.js.map +1 -1
  29. package/dist/card/card.mjs +1 -1
  30. package/dist/card/index.js +30 -6
  31. package/dist/card/index.js.map +1 -1
  32. package/dist/card/index.mjs +1 -1
  33. package/dist/{chunk-JOEPTRHW.mjs → chunk-BFM6UZGI.mjs} +31 -7
  34. package/dist/chunk-BFM6UZGI.mjs.map +1 -0
  35. package/dist/{chunk-3OGHJOJF.mjs → chunk-DEABU7DB.mjs} +32 -4
  36. package/dist/chunk-DEABU7DB.mjs.map +1 -0
  37. package/dist/{chunk-EQFY63YP.mjs → chunk-EDPWJWQO.mjs} +2 -2
  38. package/dist/chunk-F4VC5NPP.mjs +54 -0
  39. package/dist/chunk-F4VC5NPP.mjs.map +1 -0
  40. package/dist/{chunk-W7CPW23K.mjs → chunk-F7MLQ6JI.mjs} +4 -14
  41. package/dist/{chunk-W7CPW23K.mjs.map → chunk-F7MLQ6JI.mjs.map} +1 -1
  42. package/dist/{chunk-EGW3RCXD.mjs → chunk-I76U35YW.mjs} +2 -3
  43. package/dist/chunk-I76U35YW.mjs.map +1 -0
  44. package/dist/{chunk-BYFBK3J7.mjs → chunk-ILN2L5NX.mjs} +4 -4
  45. package/dist/chunk-ILN2L5NX.mjs.map +1 -0
  46. package/dist/{chunk-YZDURLEY.mjs → chunk-INDTHGWZ.mjs} +2 -2
  47. package/dist/{chunk-4P4GPVKZ.mjs → chunk-PZUJLRG4.mjs} +14 -6
  48. package/dist/chunk-PZUJLRG4.mjs.map +1 -0
  49. package/dist/{chunk-OHDHIRAW.mjs → chunk-QE2ZES72.mjs} +1 -1
  50. package/dist/chunk-QE2ZES72.mjs.map +1 -0
  51. package/dist/{chunk-I4NL4ESV.mjs → chunk-YNGU3V4J.mjs} +3 -2
  52. package/dist/chunk-YNGU3V4J.mjs.map +1 -0
  53. package/dist/footer/footer.d.ts.map +1 -1
  54. package/dist/footer/footer.js +2 -1
  55. package/dist/footer/footer.js.map +1 -1
  56. package/dist/footer/footer.mjs +1 -1
  57. package/dist/footer/index.js +2 -1
  58. package/dist/footer/index.js.map +1 -1
  59. package/dist/footer/index.mjs +1 -1
  60. package/dist/form/error-summary/error-summary.d.ts.map +1 -1
  61. package/dist/form/error-summary/error-summary.js +32 -14
  62. package/dist/form/error-summary/error-summary.js.map +1 -1
  63. package/dist/form/error-summary/error-summary.mjs +3 -3
  64. package/dist/form/error-summary/index.js +32 -14
  65. package/dist/form/error-summary/index.js.map +1 -1
  66. package/dist/form/error-summary/index.mjs +3 -3
  67. package/dist/form/index.js +32 -14
  68. package/dist/form/index.js.map +1 -1
  69. package/dist/form/index.mjs +3 -3
  70. package/dist/help-text/help-text.js +31 -3
  71. package/dist/help-text/help-text.js.map +1 -1
  72. package/dist/help-text/help-text.mjs +2 -2
  73. package/dist/help-text/index.js +31 -3
  74. package/dist/help-text/index.js.map +1 -1
  75. package/dist/help-text/index.mjs +2 -2
  76. package/dist/index.js +102 -35
  77. package/dist/index.js.map +1 -1
  78. package/dist/index.mjs +16 -16
  79. package/dist/link/index.js.map +1 -1
  80. package/dist/link/index.mjs +1 -1
  81. package/dist/link/link.d.ts +1 -1
  82. package/dist/link/link.d.ts.map +1 -1
  83. package/dist/link/link.js.map +1 -1
  84. package/dist/link/link.mjs +1 -1
  85. package/dist/message/index.js +33 -5
  86. package/dist/message/index.js.map +1 -1
  87. package/dist/message/index.mjs +2 -2
  88. package/dist/message/message.d.ts +1 -0
  89. package/dist/message/message.d.ts.map +1 -1
  90. package/dist/message/message.js +33 -5
  91. package/dist/message/message.js.map +1 -1
  92. package/dist/message/message.mjs +2 -2
  93. package/dist/modal/index.js +31 -3
  94. package/dist/modal/index.js.map +1 -1
  95. package/dist/modal/index.mjs +2 -2
  96. package/dist/modal/modal.js +31 -3
  97. package/dist/modal/modal.js.map +1 -1
  98. package/dist/modal/modal.mjs +2 -2
  99. package/dist/styled-html/index.js +1 -2
  100. package/dist/styled-html/index.js.map +1 -1
  101. package/dist/styled-html/index.mjs +1 -1
  102. package/dist/styled-html/styled-html.d.ts +0 -4
  103. package/dist/styled-html/styled-html.d.ts.map +1 -1
  104. package/dist/styled-html/styled-html.js +1 -2
  105. package/dist/styled-html/styled-html.js.map +1 -1
  106. package/dist/styled-html/styled-html.mjs +1 -1
  107. package/package.json +2 -2
  108. package/src/alert/alert.stories.tsx +2 -2
  109. package/src/alert/alert.tsx +36 -4
  110. package/src/badge/badge.tsx +34 -4
  111. package/src/box/box.stories.tsx +7 -1
  112. package/src/box/box.tsx +47 -4
  113. package/src/card/card.tsx +139 -13
  114. package/src/footer/footer.tsx +2 -1
  115. package/src/form/error-summary/error-summary.tsx +1 -7
  116. package/src/link/link.tsx +1 -1
  117. package/src/message/message.tsx +2 -0
  118. package/src/styled-html/styled-html.stories.tsx +0 -7
  119. package/src/styled-html/styled-html.tsx +1 -7
  120. package/dist/chunk-3OGHJOJF.mjs.map +0 -1
  121. package/dist/chunk-4P4GPVKZ.mjs.map +0 -1
  122. package/dist/chunk-BYFBK3J7.mjs.map +0 -1
  123. package/dist/chunk-EGW3RCXD.mjs.map +0 -1
  124. package/dist/chunk-I4NL4ESV.mjs.map +0 -1
  125. package/dist/chunk-JOEPTRHW.mjs.map +0 -1
  126. package/dist/chunk-OHDHIRAW.mjs.map +0 -1
  127. package/dist/chunk-OXZOGFNV.mjs +0 -37
  128. package/dist/chunk-OXZOGFNV.mjs.map +0 -1
  129. /package/dist/{chunk-EQFY63YP.mjs.map → chunk-EDPWJWQO.mjs.map} +0 -0
  130. /package/dist/{chunk-YZDURLEY.mjs.map → chunk-INDTHGWZ.mjs.map} +0 -0
package/src/box/box.tsx CHANGED
@@ -2,6 +2,17 @@ import { forwardRef, useCallback, useState } from "react";
2
2
  import { clsx } from "@postenbring/hedwig-css/typed-classname";
3
3
  import { Slot, Slottable } from "@radix-ui/react-slot";
4
4
 
5
+ function CloseIcon() {
6
+ return (
7
+ <svg aria-hidden xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32">
8
+ <path
9
+ d="M17.5469 16.3333L22.375 11.5521L23.3594 10.5677C23.5 10.4271 23.5 10.1927 23.3594 10.0052L22.3281 8.97394C22.1406 8.83331 21.9062 8.83331 21.7656 8.97394L16 14.7864L10.1875 8.97394C10.0469 8.83331 9.8125 8.83331 9.625 8.97394L8.59375 10.0052C8.45312 10.1927 8.45312 10.4271 8.59375 10.5677L14.4062 16.3333L8.59375 22.1458C8.45312 22.2864 8.45312 22.5208 8.59375 22.7083L9.625 23.7396C9.8125 23.8802 10.0469 23.8802 10.1875 23.7396L16 17.9271L20.7812 22.7552L21.7656 23.7396C21.9062 23.8802 22.1406 23.8802 22.3281 23.7396L23.3594 22.7083C23.5 22.5208 23.5 22.2864 23.3594 22.1458L17.5469 16.3333Z"
10
+ fill="currentColor"
11
+ />
12
+ </svg>
13
+ );
14
+ }
15
+
5
16
  export type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, "children">;
6
17
  export const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(
7
18
  ({ className, ...rest }, ref) => {
@@ -11,7 +22,9 @@ export const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>
11
22
  ref={ref}
12
23
  type="button"
13
24
  {...rest}
14
- />
25
+ >
26
+ <CloseIcon />
27
+ </button>
15
28
  );
16
29
  },
17
30
  );
@@ -21,11 +34,23 @@ export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
21
34
  children?: React.ReactNode;
22
35
 
23
36
  /**
24
- * Color variant of the box
37
+ * Posten/Bring-spesific variant of the box. NB: warning variant is deprecated, use data-color="warning" instead.
25
38
  *
26
39
  * @default "light-grey"
27
40
  */
28
- variant?: "light-grey" | "lighter" | "white" | "warning";
41
+ variant?:
42
+ | "light-grey"
43
+ | "lighter"
44
+ | "white"
45
+ /** @deprecated use data-color="warning" instead */
46
+ | "warning";
47
+
48
+ /**
49
+ * Color variant of the box
50
+ *
51
+ */
52
+
53
+ "data-color"?: "neutral" | "info" | "success" | "warning" | "error";
29
54
 
30
55
  /**
31
56
  * If `true`, a close button will be shown.
@@ -66,9 +91,23 @@ export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
66
91
  asChild?: boolean;
67
92
  }
68
93
 
94
+ const convertVariantToColor = (variant: BoxProps["variant"] | "") => {
95
+ switch (variant) {
96
+ case "lighter":
97
+ return "";
98
+ case "white":
99
+ return "";
100
+ case "warning":
101
+ return "warning";
102
+ default:
103
+ return "neutral";
104
+ }
105
+ };
106
+
69
107
  export const Box = forwardRef<HTMLDivElement, BoxProps>(
70
108
  (
71
109
  {
110
+ "data-color": color = "",
72
111
  asChild,
73
112
  variant,
74
113
  closeable = false,
@@ -96,11 +135,15 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>(
96
135
  const closed = closedProp ?? closedState;
97
136
  const Component = asChild ? Slot : "div";
98
137
 
138
+ const resolvedColor = color && color !== "" ? color : convertVariantToColor(variant);
139
+
99
140
  return (
100
141
  <Component
142
+ data-color={resolvedColor}
101
143
  className={clsx(
102
144
  "hds-box",
103
- variant && `hds-box--${variant}`,
145
+ { "hds-box--lighter": variant === "lighter" },
146
+ { "hds-box--white": variant === "white" },
104
147
  { "hds-box--closed": closed },
105
148
  className as undefined,
106
149
  )}
package/src/card/card.tsx CHANGED
@@ -217,7 +217,11 @@ export interface CardBaseProps extends React.HTMLAttributes<HTMLDivElement> {
217
217
  asChild?: boolean;
218
218
  }
219
219
 
220
- export interface CardSlimAndMiniatureProps extends CardBaseProps {
220
+ /**
221
+ * @deprecated This interface is deprecated and will be removed in a future release.
222
+ * Use `CardSlimAndMiniatureProps` with props `data-color` and `theme` instead.
223
+ */
224
+ export interface CardSlimAndMiniaturePropsDeprecated extends CardBaseProps {
221
225
  /**
222
226
  * Change the default rendered element for Card.
223
227
  */
@@ -228,21 +232,61 @@ export interface CardSlimAndMiniatureProps extends CardBaseProps {
228
232
  * @default "slim"
229
233
  */
230
234
  variant?: "slim" | "miniature";
235
+ "data-color"?: never;
236
+ theme?: never;
231
237
  /**
232
- * The color of the card.
233
- *
234
- * @default "lighter-brand"
235
- * */
238
+ * @deprecated
239
+ * Use props `data-color` and `theme` instead.
240
+ * These colors will be removed in a future release.
241
+ */
236
242
  color?: "white" | "lighter-brand" | "light-grey-fill";
237
243
 
238
244
  /* Only fullwidth or focus cards can have images to the left or right of the text: */
239
245
  imagePosition?: never;
240
246
  }
241
247
 
248
+ export interface CardSlimAndMiniatureProps extends CardBaseProps {
249
+ /**
250
+ * Change the default rendered element for Card.
251
+ */
252
+ as?: "section" | "div" | "article" | "aside";
253
+ /**
254
+ * Allows for a horizontal variant for sizes above small.
255
+ *
256
+ * @default "slim"
257
+ */
258
+ variant?: "slim" | "miniature";
259
+ /**
260
+ * Set theme for card
261
+ * @default "default"
262
+ */
263
+ theme?: "default" | "tinted" | "base";
264
+ /**
265
+ * Set data-color for card.
266
+ */
267
+ "data-color"?: "neutral" | "posten" | "bring";
268
+ /* Only fullwidth or focus cards can have images to the left or right of the text: */
269
+ imagePosition?: never;
270
+ }
271
+
272
+ /**
273
+ * @deprecated Use Full-width card instead
274
+ */
242
275
  export interface CardFocusProps extends CardBaseProps {
276
+ /**
277
+ * Change the default rendered element for Card.
278
+ */
243
279
  as?: "section" | "div" | "article" | "aside";
280
+ /** @deprecated Use Full-width card instead */
244
281
  variant: "focus";
282
+ /**
283
+ * @deprecated
284
+ * Use props `data-color` and `theme` instead.
285
+ * The color prop will be removed in a future release.
286
+ */
245
287
  color?: "darker" | "dark";
288
+ "data-color"?: never;
289
+ theme?: never;
246
290
  /**
247
291
  * fullwidth or focus cards can have images to the left or right of the text.
248
292
  *
@@ -251,9 +295,23 @@ export interface CardFocusProps extends CardBaseProps {
251
295
  imagePosition?: "left" | "right";
252
296
  }
253
297
 
254
- export interface CardFullwidthProps extends CardBaseProps {
298
+ /**
299
+ * @deprecated This interface is deprecated and will be removed in a future release.
300
+ * Use `CardSlimAndMiniatureProps` with props `data-color` and `theme` instead.
301
+ */
302
+ export interface CardFullwidthPropsDeprecated extends CardBaseProps {
303
+ /**
304
+ * Change the default rendered element for Card.
305
+ */
255
306
  as?: "section" | "div" | "article" | "aside";
256
307
  variant: "full-width";
308
+ "data-color"?: never;
309
+ theme?: never;
310
+ /**
311
+ * @deprecated
312
+ * Use `data-color` and `theme` instead.
313
+ * The color prop will be removed in a future release.
314
+ */
257
315
  color: "white" | "lighter-brand" | "light-grey-fill";
258
316
  /**
259
317
  * fullwidth or focus cards can have images to the left or right of the text.
@@ -263,7 +321,63 @@ export interface CardFullwidthProps extends CardBaseProps {
263
321
  imagePosition?: "left" | "right";
264
322
  }
265
323
 
266
- export type CardProps = CardSlimAndMiniatureProps | CardFocusProps | CardFullwidthProps;
324
+ export interface CardFullwidthProps extends CardBaseProps {
325
+ /**
326
+ * Change the default rendered element for Card.
327
+ */
328
+ as?: "section" | "div" | "article" | "aside";
329
+ variant: "full-width";
330
+ /**
331
+ * Set theme for card
332
+ * @default "default"
333
+ */
334
+ theme?: "default" | "tinted" | "base";
335
+ /**
336
+ * Set data-color for card.
337
+ */
338
+ "data-color"?: "neutral" | "posten" | "bring";
339
+ /**
340
+ * fullwidth or focus cards can have images to the left or right of the text.
341
+ *
342
+ * @default "left"
343
+ * */
344
+ imagePosition?: "left" | "right";
345
+ }
346
+
347
+ export type CardProps =
348
+ | CardSlimAndMiniatureProps
349
+ | CardFocusProps
350
+ | CardFullwidthProps
351
+ | CardSlimAndMiniaturePropsDeprecated
352
+ | CardFullwidthPropsDeprecated;
353
+
354
+ /**
355
+ * Converts deprecated colors to current colors
356
+ * @param color
357
+ * @returns
358
+ */
359
+ const convertDeprecatedColor = (
360
+ color: string | undefined,
361
+ ): Partial<{
362
+ theme: NonNullable<CardSlimAndMiniatureProps["theme"]>;
363
+ dataColor: NonNullable<CardSlimAndMiniatureProps["data-color"]>;
364
+ dataColorScheme: "light" | "dark";
365
+ }> => {
366
+ switch (color) {
367
+ case "lighter-brand":
368
+ return { theme: "default" };
369
+ case "light-grey-fill":
370
+ return { theme: "base", dataColor: "neutral" };
371
+ case "white":
372
+ return { theme: "default", dataColor: "neutral" };
373
+ case "dark":
374
+ return { theme: "base" };
375
+ case "darker":
376
+ return { theme: "tinted", dataColorScheme: "dark" };
377
+ default:
378
+ return {};
379
+ }
380
+ };
267
381
 
268
382
  export const Card = forwardRef<HTMLDivElement, CardProps>(
269
383
  (
@@ -273,6 +387,8 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
273
387
  className,
274
388
  children,
275
389
  variant = "slim",
390
+ "data-color": dataColorAttr,
391
+ theme = "default",
276
392
  color,
277
393
  imagePosition,
278
394
  ...rest
@@ -280,20 +396,30 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
280
396
  ref,
281
397
  ) => {
282
398
  const Component = asChild ? Slot : Tag;
283
- const effectiveColor = variant === "focus" && !color ? "darker" : color;
399
+
400
+ const {
401
+ theme: themeFromDeprecated,
402
+ dataColor: dataColorFromDeprecated,
403
+ dataColorScheme: dataColorSchemeFromDeprecated,
404
+ } = convertDeprecatedColor(color ?? (variant === "focus" ? "darker" : undefined));
405
+
284
406
  return (
285
407
  <Component
286
408
  {...rest}
409
+ {...(dataColorAttr ? { "data-color": dataColorAttr } : {})}
410
+ {...(dataColorFromDeprecated ? { "data-color": dataColorFromDeprecated } : {})}
411
+ {...(dataColorSchemeFromDeprecated
412
+ ? { "data-color-scheme": dataColorSchemeFromDeprecated }
413
+ : {})}
287
414
  className={clsx(
288
415
  "hds-card",
289
416
  { "hds-card--full-width": variant === "full-width" },
290
417
  { "hds-card--miniature": variant === "miniature" },
291
- { "hds-card--focus": variant === "focus" },
418
+ { "hds-card--focus": variant === "focus" }, // @deprecated
292
419
  { "hds-card--slim": variant === "slim" },
293
- { "hds-card--color-white": effectiveColor === "white" },
294
- { "hds-card--color-light-grey-fill": effectiveColor === "light-grey-fill" },
295
- { "hds-card--color-dark": effectiveColor === "dark" },
296
- { "hds-card--color-darker": effectiveColor === "darker" },
420
+ { "hds-card--theme-default": (themeFromDeprecated ?? theme) === "default" },
421
+ { "hds-card--theme-tinted": (themeFromDeprecated ?? theme) === "tinted" },
422
+ { "hds-card--theme-base": (themeFromDeprecated ?? theme) === "base" },
297
423
  { "hds-card--image-position-right": imagePosition === "right" },
298
424
  className as undefined,
299
425
  )}
@@ -47,7 +47,7 @@ export const FooterButtonLink = forwardRef<HTMLAnchorElement, FooterButtonLinkPr
47
47
  ({ children, className, asChild, ...rest }, ref) => {
48
48
  const Component = asChild ? Slot : "a";
49
49
  return (
50
- <Button asChild variant="inverted" className={clsx(className as undefined)}>
50
+ <Button asChild variant="secondary" className={clsx(className as undefined)}>
51
51
  <Component ref={ref} {...rest}>
52
52
  {children}
53
53
  </Component>
@@ -141,6 +141,7 @@ export const Footer = forwardRef<HTMLDivElement, FooterProps>(
141
141
  const Component = asChild ? Slot : "footer";
142
142
  return (
143
143
  <Component
144
+ data-color-scheme="dark"
144
145
  className={clsx(
145
146
  `hds-footer`,
146
147
  variant === "slim" && "hds-footer--slim",
@@ -113,13 +113,7 @@ export const ErrorSummaryItem = forwardRef<HTMLLIElement, ErrorSummaryItemProps>
113
113
 
114
114
  return (
115
115
  <li className={clsx(`hds-error-summary__list-item`)} ref={ref} {...rest}>
116
- <Link
117
- size="small"
118
- href={href}
119
- variant="inverted-no-underline"
120
- {...linkProps}
121
- onClick={onClick}
122
- >
116
+ <Link size="small" href={href} variant="solid" {...linkProps} onClick={onClick}>
123
117
  {children}
124
118
  </Link>
125
119
  </li>
package/src/link/link.tsx CHANGED
@@ -7,7 +7,7 @@ export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>
7
7
  /**
8
8
  * The visual style of the link
9
9
  */
10
- variant?: "underline" | "solid" | "inverted" | "no-underline" | "inverted-no-underline";
10
+ variant?: "underline" | "solid" | "no-underline";
11
11
 
12
12
  /**
13
13
  * Font size of the link
@@ -61,10 +61,12 @@ export type MessageProps = (
61
61
  ) &
62
62
  Omit<BoxProps, "variant" | "asChild">;
63
63
 
64
+ /** @deprecated Use Alert component instead */
64
65
  export const Message = forwardRef<HTMLDivElement, MessageProps>(
65
66
  ({ children, className, variant = "success", icon, iconClassName, ...rest }, ref) => {
66
67
  return (
67
68
  <Box
69
+ {...(variant === "warning" ? { "data-color-scheme": "light" } : {})}
68
70
  className={clsx(`hds-message`, `hds-message--${variant}`, className as undefined)}
69
71
  ref={ref}
70
72
  {...rest}
@@ -13,13 +13,6 @@ const meta: Meta<typeof StyledHtml> = {
13
13
  control: {
14
14
  type: "radio",
15
15
  },
16
- darkmode: {
17
- defaultValue: false,
18
- options: [true, false],
19
- control: {
20
- type: "radio",
21
- },
22
- },
23
16
  },
24
17
  },
25
18
  };
@@ -12,11 +12,6 @@ export interface StyledHtmlProps extends React.HTMLAttributes<HTMLDivElement> {
12
12
  */
13
13
  size?: "default" | "small";
14
14
 
15
- /**
16
- * 🚧 Work in progress darkmode support
17
- */
18
- unstable_darkmode?: boolean;
19
-
20
15
  /**
21
16
  * Change the default rendered element for the one passed as a child, merging their props and behavior.
22
17
  *
@@ -48,14 +43,13 @@ export interface StyledHtmlProps extends React.HTMLAttributes<HTMLDivElement> {
48
43
  * ```
49
44
  */
50
45
  export const StyledHtml = forwardRef<HTMLDivElement, StyledHtmlProps>(
51
- ({ asChild, children, size, unstable_darkmode: darkmode = false, className, ...rest }, ref) => {
46
+ ({ asChild, children, size, className, ...rest }, ref) => {
52
47
  const Component = asChild ? Slot : "div";
53
48
  return (
54
49
  <Component
55
50
  className={clsx(
56
51
  `hds-styled-html`,
57
52
  size === "small" && "hds-styled-html--small",
58
- darkmode && "hds-styled-html--darkmode",
59
53
  className as undefined,
60
54
  )}
61
55
  ref={ref}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/box/box.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n ({ className, ...rest }, ref) => {\n return (\n <button\n className={clsx(\"hds-box__close-button\", className as undefined)}\n ref={ref}\n type=\"button\"\n {...rest}\n />\n );\n },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n children?: React.ReactNode;\n\n /**\n * Color variant of the box\n *\n * @default \"light-grey\"\n */\n variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n\n /**\n * If `true`, a close button will be shown.\n * Use when you want to control the close button using the BoxCloseButton component.\n *\n * @default false\n */\n closeable?: boolean;\n\n /**\n * Callback fired when the component requests to be closed.\n * If not set, the component will be closed without any user interaction.\n *\n * If set, and the handler returns non-true value, the component will not be closed.\n * Use this if you want to control the closing of the component, using the `closed` prop\n *\n * If set, and the handler returns the true, the component will be closed.\n * Use this with `window.confirm()` to ask the user to confirm closing the component.\n */\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n onClose?: () => boolean | unknown;\n\n /**\n * If `true`, the box will be closed and hidden from view\n */\n closed?: boolean;\n\n /**\n * Props applied to the close button element.\n */\n closeButtonProps?: BoxCloseButtonProps;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n (\n {\n asChild,\n variant,\n closeable = false,\n onClose: onCloseProp,\n closed: closedProp,\n closeButtonProps,\n children,\n className,\n ...rest\n },\n ref,\n ) => {\n const [closedState, setClosedState] = useState(false);\n const onClose = useCallback(() => {\n if (onCloseProp) {\n const result = onCloseProp();\n if (result === true) {\n setClosedState(true);\n }\n } else {\n setClosedState(true);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n }, []);\n const closed = closedProp ?? closedState;\n const Component = asChild ? Slot : \"div\";\n\n return (\n <Component\n className={clsx(\n \"hds-box\",\n variant && `hds-box--${variant}`,\n { \"hds-box--closed\": closed },\n className as undefined,\n )}\n ref={ref}\n {...rest}\n >\n {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n <Slottable>{children}</Slottable>\n </Component>\n );\n },\n) as BoxType;\nBox.displayName = \"Box\";\n\nBox.CloseButton = BoxCloseButton;\n\ntype BoxType = ReturnType<typeof forwardRef<HTMLDivElement, BoxProps>> & {\n CloseButton: typeof BoxCloseButton;\n};\n"],"mappings":";;;;;;;AAAA,SAAS,YAAY,aAAa,gBAAgB;AAClD,SAAS,YAAY;AACrB,SAAS,MAAM,iBAAiB;AAM1B,cA2FA,YA3FA;AAHC,IAAM,iBAAiB;AAAA,EAC5B,CAAC,IAAwB,QAAQ;AAAhC,iBAAE,YANL,IAMG,IAAgB,iBAAhB,IAAgB,CAAd;AACD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,yBAAyB,SAAsB;AAAA,QAC/D;AAAA,QACA,MAAK;AAAA,SACD;AAAA,IACN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAmDtB,IAAM,MAAM;AAAA,EACjB,CACE,IAWA,QACG;AAZH,iBACE;AAAA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,IA9EN,IAsEI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,UAAM,UAAU,YAAY,MAAM;AAChC,UAAI,aAAa;AACf,cAAM,SAAS,YAAY;AAC3B,YAAI,WAAW,MAAM;AACnB,yBAAe,IAAI;AAAA,QACrB;AAAA,MACF,OAAO;AACL,uBAAe,IAAI;AAAA,MACrB;AAAA,IAEF,GAAG,CAAC,CAAC;AACL,UAAM,SAAS,kCAAc;AAC7B,UAAM,YAAY,UAAU,OAAO;AAEnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,WAAW,YAAY,OAAO;AAAA,UAC9B,EAAE,mBAAmB,OAAO;AAAA,UAC5B;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA,sBAAY,oBAAC,iCAAe,SAAS,WAAa,iBAAkB,IAAK;AAAA,UAC1E,oBAAC,aAAW,UAAS;AAAA;AAAA;AAAA,IACvB;AAAA,EAEJ;AACF;AACA,IAAI,cAAc;AAElB,IAAI,cAAc;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/alert/alert.tsx"],"sourcesContent":["import React, { forwardRef, type HTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box, type BoxProps } from \"../box/box\";\n\nexport interface AlertTitleProps extends HTMLAttributes<HTMLParagraphElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const AlertTitle = forwardRef<HTMLParagraphElement, AlertTitleProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component className={clsx(\"hds-alert__title\", className as undefined)} ref={ref} {...rest} />\n );\n },\n);\nAlertTitle.displayName = \"Alert.Title\";\n\nexport interface AlertDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const AlertDescription = forwardRef<HTMLParagraphElement, AlertDescriptionProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n className={clsx(\"hds-alert__description\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nAlertDescription.displayName = \"Alert.Description\";\n\nexport type AlertProps = (\n | {\n variant?: \"info\" | \"success\" | \"warning\" | \"error\";\n icon?: never;\n iconClassName?: never;\n }\n | {\n variant: \"neutral\";\n icon?: React.ReactNode;\n iconClassName?: string;\n }\n) &\n Omit<BoxProps, \"variant\" | \"asChild\">;\n\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(\n ({ children, className, variant = \"success\", icon, iconClassName, ...rest }, ref) => {\n return (\n <Box\n className={clsx(`hds-alert`, `hds-alert--${variant}`, className as undefined)}\n ref={ref}\n {...rest}\n >\n {variant === \"neutral\" && (\n <div className={clsx(\"hds-alert--neutral__icon\", iconClassName as undefined)}>{icon}</div>\n )}\n {children}\n </Box>\n );\n },\n) as AlertType;\nAlert.displayName = \"Alert\";\n\ntype AlertType = ReturnType<typeof forwardRef<HTMLDivElement, AlertProps>> & {\n Title: typeof AlertTitle;\n Description: typeof AlertDescription;\n};\nAlert.Title = AlertTitle;\nAlert.Description = AlertDescription;\n"],"mappings":";;;;;;;;;;AAAA,SAAgB,kBAAuC;AACvD,SAAS,YAAY;AACrB,SAAS,YAAY;AAef,cA6CA,YA7CA;AAJC,IAAM,aAAa;AAAA,EACxB,CAAC,IAAiC,QAAQ;AAAzC,iBAAE,WAAS,UAdd,IAcG,IAAyB,iBAAzB,IAAyB,CAAvB,WAAS;AACV,UAAM,YAAY,UAAU,OAAO;AACnC,WACE,oBAAC,4BAAU,WAAW,KAAK,oBAAoB,SAAsB,GAAG,OAAc,KAAM;AAAA,EAEhG;AACF;AACA,WAAW,cAAc;AAUlB,IAAM,mBAAmB;AAAA,EAC9B,CAAC,IAAiC,QAAQ;AAAzC,iBAAE,WAAS,UAhCd,IAgCG,IAAyB,iBAAzB,IAAyB,CAAvB,WAAS;AACV,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,0BAA0B,SAAsB;AAAA,QAChE;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;AAgBxB,IAAM,QAAQ;AAAA,EACnB,CAAC,IAA4E,QAAQ;AAApF,iBAAE,YAAU,WAAW,UAAU,WAAW,MAAM,cA5DrD,IA4DG,IAAoE,iBAApE,IAAoE,CAAlE,YAAU,aAAW,WAAqB,QAAM;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,aAAa,cAAc,OAAO,IAAI,SAAsB;AAAA,QAC5E;AAAA,SACI,OAHL;AAAA,QAKE;AAAA,sBAAY,aACX,oBAAC,SAAI,WAAW,KAAK,4BAA4B,aAA0B,GAAI,gBAAK;AAAA,UAErF;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAMpB,MAAM,QAAQ;AACd,MAAM,cAAc;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/message/message.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box, type BoxProps } from \"../box/box\";\n\nexport interface MessageTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const MessageTitle = forwardRef<HTMLParagraphElement, MessageTitleProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n className={clsx(\"hds-message__title\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nMessageTitle.displayName = \"Message.Title\";\n\nexport interface MessageDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const MessageDescription = forwardRef<HTMLParagraphElement, MessageDescriptionProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n className={clsx(\"hds-message__description\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nMessageDescription.displayName = \"Message.Description\";\n\nexport type MessageProps = (\n | {\n variant?: \"success\" | \"attention\" | \"warning\" | \"info\";\n icon?: never;\n iconClassName?: never;\n }\n | {\n variant: \"neutral\";\n icon?: React.ReactNode;\n iconClassName?: string;\n }\n) &\n Omit<BoxProps, \"variant\" | \"asChild\">;\n\nexport const Message = forwardRef<HTMLDivElement, MessageProps>(\n ({ children, className, variant = \"success\", icon, iconClassName, ...rest }, ref) => {\n return (\n <Box\n className={clsx(`hds-message`, `hds-message--${variant}`, className as undefined)}\n ref={ref}\n {...rest}\n >\n {variant === \"neutral\" && (\n <div className={clsx(\"hds-message--neutral__icon\", iconClassName as undefined)}>\n {icon}\n </div>\n )}\n {children}\n </Box>\n );\n },\n) as MessageType;\nMessage.displayName = \"Message\";\n\ntype MessageType = ReturnType<typeof forwardRef<HTMLDivElement, MessageProps>> & {\n Title: typeof MessageTitle;\n Description: typeof MessageDescription;\n};\nMessage.Title = MessageTitle;\nMessage.Description = MessageDescription;\n"],"mappings":";;;;;;;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,YAAY;AAef,cAiDA,YAjDA;AAJC,IAAM,eAAe;AAAA,EAC1B,CAAC,IAAiC,QAAQ;AAAzC,iBAAE,WAAS,UAdd,IAcG,IAAyB,iBAAzB,IAAyB,CAAvB,WAAS;AACV,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,sBAAsB,SAAsB;AAAA,QAC5D;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;AAUpB,IAAM,qBAAqB;AAAA,EAChC,CAAC,IAAiC,QAAQ;AAAzC,iBAAE,WAAS,UApCd,IAoCG,IAAyB,iBAAzB,IAAyB,CAAvB,WAAS;AACV,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,4BAA4B,SAAsB;AAAA,QAClE;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAgB1B,IAAM,UAAU;AAAA,EACrB,CAAC,IAA4E,QAAQ;AAApF,iBAAE,YAAU,WAAW,UAAU,WAAW,MAAM,cAhErD,IAgEG,IAAoE,iBAApE,IAAoE,CAAlE,YAAU,aAAW,WAAqB,QAAM;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,eAAe,gBAAgB,OAAO,IAAI,SAAsB;AAAA,QAChF;AAAA,SACI,OAHL;AAAA,QAKE;AAAA,sBAAY,aACX,oBAAC,SAAI,WAAW,KAAK,8BAA8B,aAA0B,GAC1E,gBACH;AAAA,UAED;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,QAAQ,cAAc;AAMtB,QAAQ,QAAQ;AAChB,QAAQ,cAAc;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/styled-html/styled-html.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface StyledHtmlProps extends React.HTMLAttributes<HTMLDivElement> {\n children?: React.ReactNode;\n\n /**\n * Size of content inside. Setting this to `small` makes the font size be `body-small`.\n *\n * @default \"default\"\n */\n size?: \"default\" | \"small\";\n\n /**\n * 🚧 Work in progress darkmode support\n */\n unstable_darkmode?: boolean;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * A component for displaying dynamic content that you want to apply hedwig styling to.\n * the styling depends on the semantic html elements you use inside the component.\n *\n * Useful when you have dynamic content that you want styled with hedwig, like content from a CMS.\n *\n * Previously known as `hw-wysiwyg` in hedwig legacy. In tailwind this kind of component it is known as `prose`.\n *\n * @example\n * ```tsx\n * <StyledHtml>\n * <h1>Heading 1</h1>\n * <h2>Heading 2</h2>\n * <a href=\"https://www.postenbring.no\">Postenbring</a>\n * <ul>\n * <li>Hei</li>\n * <li>Hallo</li>\n * <li>Hello</li>\n * </ul>\n * </StyledHtml>\n * ```\n */\nexport const StyledHtml = forwardRef<HTMLDivElement, StyledHtmlProps>(\n ({ asChild, children, size, unstable_darkmode: darkmode = false, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n className={clsx(\n `hds-styled-html`,\n size === \"small\" && \"hds-styled-html--small\",\n darkmode && \"hds-styled-html--darkmode\",\n className as undefined,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nStyledHtml.displayName = \"StyledHtml\";\n"],"mappings":";;;;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,YAAY;AAmDf;AAJC,IAAM,aAAa;AAAA,EACxB,CAAC,IAAsF,QAAQ;AAA9F,iBAAE,WAAS,UAAU,MAAM,mBAAmB,WAAW,OAAO,UAlDnE,IAkDG,IAA8E,iBAA9E,IAA8E,CAA5E,WAAS,YAAU,QAAM,qBAAqC;AAC/D,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SAAS,WAAW;AAAA,UACpB,YAAY;AAAA,UACZ;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/footer/footer.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactElement } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Accordion } from \"../accordion\";\nimport { LinkList } from \"../list/link-list\";\nimport { Button } from \"../button\";\n\ninterface FooterLogoProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * A fixed Posten or Bring logo.\n *\n * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo\n */\nexport const FooterLogo = forwardRef<HTMLDivElement, FooterLogoProps>(\n ({ children, className, asChild, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component className={clsx(`hds-footer__logo`, className as undefined)} ref={ref} {...rest}>\n {children}\n </Component>\n );\n },\n);\nFooterLogo.displayName = \"Footer.Logo\";\n\nexport interface FooterButtonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n */\nexport const FooterButtonLink = forwardRef<HTMLAnchorElement, FooterButtonLinkProps>(\n ({ children, className, asChild, ...rest }, ref) => {\n const Component = asChild ? Slot : \"a\";\n return (\n <Button asChild variant=\"inverted\" className={clsx(className as undefined)}>\n <Component ref={ref} {...rest}>\n {children}\n </Component>\n </Button>\n );\n },\n);\nFooterButtonLink.displayName = \"FooterButton\";\n\ninterface FooterLinkSectionsProps extends HTMLAttributes<HTMLDivElement> {\n children: ReactElement<FooterLinkSectionProps> | ReactElement<FooterLinkSectionProps>[];\n}\n\n/**\n * Responsive sections of links. Will become an accordion on mobile.\n *\n * Use with {@link FooterLinkSection} for each section.\n */\nexport const FooterLinkSections = forwardRef<HTMLDivElement, FooterLinkSectionsProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <>\n {/* Mobile and Desktop. The accordion styling gets removed on desktop */}\n <Accordion\n className={clsx(\"hds-footer__link-sections\", className as undefined)}\n ref={ref}\n {...rest}\n >\n {/* @ts-expect-error -- It's ok */}\n {children}\n </Accordion>\n </>\n );\n },\n);\nFooterLinkSections.displayName = \"Footer.LinkSections\";\n\ninterface FooterLinkSectionProps extends HTMLAttributes<HTMLDivElement> {\n heading: React.ReactNode;\n children: React.ReactNode;\n}\n\nexport const FooterLinkSection = forwardRef<HTMLDivElement, FooterLinkSectionProps>(\n ({ heading, children, className, ...rest }, ref) => {\n // @ts-expect-error -- It's ok\n const linkListChildren = <LinkList>{children}</LinkList>;\n return (\n <>\n {/* Mobile */}\n <Accordion.Item\n className={clsx(`hds-footer__link-section`, className as undefined)}\n ref={ref}\n {...rest}\n >\n <Accordion.Header>{heading}</Accordion.Header>\n <Accordion.Content>{linkListChildren}</Accordion.Content>\n </Accordion.Item>\n\n {/* Desktop */}\n <div className={clsx(`hds-footer__link-section`, className as undefined)}>\n <h2>{heading}</h2>\n {linkListChildren}\n </div>\n </>\n );\n },\n);\nFooterLinkSection.displayName = \"Footer.LinkSection\";\n\nexport interface FooterProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Footer variant\n *\n * @default \"default\"\n */\n variant?: \"default\" | \"slim\";\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n */\nexport const Footer = forwardRef<HTMLDivElement, FooterProps>(\n ({ children, className, variant, asChild, ...rest }, ref) => {\n const Component = asChild ? Slot : \"footer\";\n return (\n <Component\n className={clsx(\n `hds-footer`,\n variant === \"slim\" && \"hds-footer--slim\",\n className as undefined,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n) as FooterType;\nFooter.displayName = \"Footer\";\n\ntype FooterType = ReturnType<typeof forwardRef<HTMLDivElement, FooterProps>> & {\n Logo: typeof FooterLogo;\n ButtonLink: typeof FooterButtonLink;\n LinkSections: typeof FooterLinkSections;\n LinkSection: typeof FooterLinkSection;\n};\n\nFooter.Logo = FooterLogo;\nFooter.ButtonLink = FooterButtonLink;\nFooter.LinkSections = FooterLinkSections;\nFooter.LinkSection = FooterLinkSection;\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAAS,kBAA0D;AACnE,SAAS,YAAY;AACrB,SAAS,YAAY;AAuBf,SA8CA,UA9CA,KA0EE,YA1EF;AAJC,IAAM,aAAa;AAAA,EACxB,CAAC,IAA2C,QAAQ;AAAnD,iBAAE,YAAU,WAAW,QAtB1B,IAsBG,IAAmC,iBAAnC,IAAmC,CAAjC,YAAU,aAAW;AACtB,UAAM,YAAY,UAAU,OAAO;AACnC,WACE,oBAAC,0CAAU,WAAW,KAAK,oBAAoB,SAAsB,GAAG,OAAc,OAArF,EACE,WACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAclB,IAAM,mBAAmB;AAAA,EAC9B,CAAC,IAA2C,QAAQ;AAAnD,iBAAE,YAAU,WAAW,QA9C1B,IA8CG,IAAmC,iBAAnC,IAAmC,CAAjC,YAAU,aAAW;AACtB,UAAM,YAAY,UAAU,OAAO;AACnC,WACE,oBAAC,UAAO,SAAO,MAAC,SAAQ,YAAW,WAAW,KAAK,SAAsB,GACvE,8BAAC,0CAAU,OAAc,OAAxB,EACE,WACH,GACF;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;AAWxB,IAAM,qBAAqB;AAAA,EAChC,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UArEf,IAqEG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,WACE,gCAEE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,6BAA6B,SAAsB;AAAA,QACnE;AAAA,SACI,OAHL;AAAA,QAME;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAO1B,IAAM,oBAAoB;AAAA,EAC/B,CAAC,IAA2C,QAAQ;AAAnD,iBAAE,WAAS,UAAU,UA7FxB,IA6FG,IAAmC,iBAAnC,IAAmC,CAAjC,WAAS,YAAU;AAEpB,UAAM,mBAAmB,oBAAC,YAAU,UAAS;AAC7C,WACE,iCAEE;AAAA;AAAA,QAAC,UAAU;AAAA,QAAV;AAAA,UACC,WAAW,KAAK,4BAA4B,SAAsB;AAAA,UAClE;AAAA,WACI,OAHL;AAAA,UAKC;AAAA,gCAAC,UAAU,QAAV,EAAkB,mBAAQ;AAAA,YAC3B,oBAAC,UAAU,SAAV,EAAmB,4BAAiB;AAAA;AAAA;AAAA,MACvC;AAAA,MAGA,qBAAC,SAAI,WAAW,KAAK,4BAA4B,SAAsB,GACrE;AAAA,4BAAC,QAAI,mBAAQ;AAAA,QACZ;AAAA,SACH;AAAA,OACF;AAAA,EAEJ;AACF;AACA,kBAAkB,cAAc;AAqBzB,IAAM,SAAS;AAAA,EACpB,CAAC,IAAoD,QAAQ;AAA5D,iBAAE,YAAU,WAAW,SAAS,QA3InC,IA2IG,IAA4C,iBAA5C,IAA4C,CAA1C,YAAU,aAAW,WAAS;AAC/B,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY,UAAU;AAAA,UACtB;AAAA,QACF;AAAA,QACA;AAAA,SACI,OAPL;AAAA,QASE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;AASrB,OAAO,OAAO;AACd,OAAO,aAAa;AACpB,OAAO,eAAe;AACtB,OAAO,cAAc;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/card/card.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport const CardMedia = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component {...rest} className={clsx(\"hds-card__media\", className as undefined)} ref={ref}>\n {children}\n </Component>\n );\n },\n);\nCardMedia.displayName = \"Card.Media\";\n\nexport interface CardImageMediaProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Define image scaling behavior when the image are varies in both width and height across different page breaks and sizes of the card.\n * \"crop\": Image always fills the available space.\n * If the aspect ratio doesn't match, then the top/bottom or left/right edges are cropped away.\n * \"scale\": No cropping, image scales to the maximum size available and centers.\n * If the aspect ratio doesn't match, then the background will show on the top/bottom or left/right sides of the image.\n *\n * @default \"crop\"\n */\n variant?: \"crop\" | \"scale\";\n}\nexport const CardMediaImg = forwardRef<HTMLImageElement, CardImageMediaProps>(\n ({ asChild, variant, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"img\";\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card__media__img\",\n { \"hds-card__img__scale\": variant === \"scale\" },\n className as undefined,\n )}\n ref={ref}\n />\n );\n },\n);\nCardMediaImg.displayName = \"Card.MediaImg\";\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component {...rest} className={clsx(\"hds-card__body\", className as undefined)} ref={ref}>\n <div className={clsx(\"hds-card__centerbody\", className as undefined)}>{children}</div>\n </Component>\n );\n },\n);\nCardBody.displayName = \"Card.Body\";\n\nexport const CardBodyHeader = forwardRef<\n HTMLHeadingElement,\n CardBaseProps &\n (\n | {\n /**\n * Heading level of the card heading\n */\n as: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n asChild?: never;\n }\n | {\n asChild: true;\n as?: never;\n }\n )\n>(({ as: Tag, asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : Tag;\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n});\nCardBodyHeader.displayName = \"Card.BodyHeader\";\n\nexport const CardBodyHeaderOverline = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header-overline\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyHeaderOverline.displayName = \"Card.BodyHeaderOverline\";\n\nexport const CardBodyHeaderTitle = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header-title\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyHeaderTitle.displayName = \"Card.BodyHeaderTitle\";\n\nexport const CardBodyDescription = forwardRef<HTMLParagraphElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"p\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-description\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyDescription.displayName = \"Card.BodyDescription\";\n\nexport const CardBodyAction = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-action\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyAction.displayName = \"Card.BodyAction\";\n\nexport const CardBodyActionRow = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-action-row\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyActionRow.displayName = \"Card.BodyActionRow\";\n\ninterface CardBodyActionArrowProps extends React.HTMLAttributes<HTMLSpanElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n\n /**\n * Set direction of the arrow\n *\n * @default \"right\"\n */\n direction?: \"right\" | \"up-right\";\n}\nexport const CardBodyActionArrow = forwardRef<HTMLSpanElement, CardBodyActionArrowProps>(\n ({ asChild, className, direction, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card__body-action-arrow\",\n { \"hds-card__body-action-arrow-up-right\": direction === \"up-right\" },\n className as undefined,\n )}\n ref={ref}\n />\n );\n },\n);\nCardBodyActionArrow.displayName = \"Card.BodyActionArrow\";\n\nexport interface CardBaseProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\nexport interface CardSlimAndMiniatureProps extends CardBaseProps {\n /**\n * Change the default rendered element for Card.\n */\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n /**\n * Allows for a horizontal variant for sizes above small.\n *\n * @default \"slim\"\n */\n variant?: \"slim\" | \"miniature\";\n /**\n * The color of the card.\n *\n * @default \"lighter-brand\"\n * */\n color?: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n\n /* Only fullwidth or focus cards can have images to the left or right of the text: */\n imagePosition?: never;\n}\n\nexport interface CardFocusProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"focus\";\n color?: \"darker\" | \"dark\";\n /**\n * fullwidth or focus cards can have images to the left or right of the text.\n *\n * @default \"left\"\n * */\n imagePosition?: \"left\" | \"right\";\n}\n\nexport interface CardFullwidthProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"full-width\";\n color: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n /**\n * fullwidth or focus cards can have images to the left or right of the text.\n *\n * @default \"left\"\n * */\n imagePosition?: \"left\" | \"right\";\n}\n\nexport type CardProps = CardSlimAndMiniatureProps | CardFocusProps | CardFullwidthProps;\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n (\n {\n as: Tag = \"section\",\n asChild,\n className,\n children,\n variant = \"slim\",\n color,\n imagePosition,\n ...rest\n },\n ref,\n ) => {\n const Component = asChild ? Slot : Tag;\n const effectiveColor = variant === \"focus\" && !color ? \"darker\" : color;\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card\",\n { \"hds-card--full-width\": variant === \"full-width\" },\n { \"hds-card--miniature\": variant === \"miniature\" },\n { \"hds-card--focus\": variant === \"focus\" },\n { \"hds-card--slim\": variant === \"slim\" },\n { \"hds-card--color-white\": effectiveColor === \"white\" },\n { \"hds-card--color-light-grey-fill\": effectiveColor === \"light-grey-fill\" },\n { \"hds-card--color-dark\": effectiveColor === \"dark\" },\n { \"hds-card--color-darker\": effectiveColor === \"darker\" },\n { \"hds-card--image-position-right\": imagePosition === \"right\" },\n className as undefined,\n )}\n ref={ref}\n >\n {variant === \"full-width\" || variant === \"focus\" ? (\n <div className={clsx(\"hds-card__layoutwrapper\", className as undefined)}>{children}</div>\n ) : (\n children\n )}\n </Component>\n );\n },\n) as CardType;\nCard.displayName = \"Card\";\n\nCard.Media = CardMedia;\nCard.MediaImg = CardMediaImg;\nCard.Body = CardBody;\nCard.BodyHeader = CardBodyHeader;\nCard.BodyHeaderOverline = CardBodyHeaderOverline;\nCard.BodyHeaderTitle = CardBodyHeaderTitle;\nCard.BodyDescription = CardBodyDescription;\nCard.BodyAction = CardBodyAction;\nCard.BodyActionRow = CardBodyActionRow;\nCard.BodyActionArrow = CardBodyActionArrow;\n\ntype CardType = ReturnType<typeof forwardRef<HTMLDivElement, CardProps>> & {\n Media: typeof CardMedia;\n MediaImg: typeof CardMediaImg;\n Body: typeof CardBody;\n BodyHeader: typeof CardBodyHeader;\n BodyHeaderOverline: typeof CardBodyHeaderOverline;\n BodyHeaderTitle: typeof CardBodyHeaderTitle;\n BodyDescription: typeof CardBodyDescription;\n BodyAction: typeof CardBodyAction;\n BodyActionRow: typeof CardBodyActionRow;\n BodyActionArrow: typeof CardBodyActionArrow;\n};\n"],"mappings":"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","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/link/link.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n /**\n * The visual style of the link\n */\n variant?: \"underline\" | \"solid\" | \"inverted\" | \"no-underline\" | \"inverted-no-underline\";\n\n /**\n * Font size of the link\n * @default \"default\"\n */\n size?: \"default\" | \"small\" | \"large\" | \"technical\";\n\n /**\n * Specify that there is an icon in the link.\n * `icon=\"leading\"`: There is an icon before the text.\n * `icon=\"trailing\"`: There is an icon after the text.\n *\n */\n icon?: \"leading\" | \"trailing\";\n\n children: React.ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n (\n { asChild, children, variant = \"underline\", size = \"default\", icon, className, ...rest },\n ref,\n ) => {\n const Component = asChild ? Slot : \"a\";\n\n return (\n <Component\n className={clsx(\n \"hds-link\",\n variant !== \"underline\" && `hds-link--${variant}`,\n size !== \"default\" && `hds-link--${size}`,\n { \"hds-link--trailing-icon\": icon === \"trailing\" },\n { \"hds-link--leading-icon\": icon === \"leading\" },\n className as undefined,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nLink.displayName = \"Link\";\n"],"mappings":";;;;;;;AAAA,OAAuB;AACvB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAwCf;AARC,IAAM,OAAO;AAAA,EAClB,CACE,IACA,QACG;AAFH,iBAAE,WAAS,UAAU,UAAU,aAAa,OAAO,WAAW,MAAM,UArCxE,IAqCI,IAAkF,iBAAlF,IAAkF,CAAhF,WAAS,YAAU,WAAuB,QAAkB,QAAM;AAGpE,UAAM,YAAY,UAAU,OAAO;AAEnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY,eAAe,aAAa,OAAO;AAAA,UAC/C,SAAS,aAAa,aAAa,IAAI;AAAA,UACvC,EAAE,2BAA2B,SAAS,WAAW;AAAA,UACjD,EAAE,0BAA0B,SAAS,UAAU;AAAA,UAC/C;AAAA,QACF;AAAA,QACA;AAAA,SACI,OAVL;AAAA,QAYE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;","names":[]}
@@ -1,37 +0,0 @@
1
- import {
2
- __objRest,
3
- __spreadProps,
4
- __spreadValues
5
- } from "./chunk-YOSPWY5K.mjs";
6
-
7
- // src/badge/badge.tsx
8
- import { clsx } from "@postenbring/hedwig-css/typed-classname";
9
- import { Slot } from "@radix-ui/react-slot";
10
- import { forwardRef } from "react";
11
- import { jsx } from "react/jsx-runtime";
12
- var Badge = forwardRef(
13
- (_a, ref) => {
14
- var _b = _a, { children, asChild, variant = "lighter", size = "small", className } = _b, rest = __objRest(_b, ["children", "asChild", "variant", "size", "className"]);
15
- const Component = asChild ? Slot : "span";
16
- return /* @__PURE__ */ jsx(
17
- Component,
18
- __spreadProps(__spreadValues({
19
- ref,
20
- className: clsx(
21
- "hds-badge",
22
- `hds-badge--${size}`,
23
- `hds-badge--${variant}`,
24
- className
25
- )
26
- }, rest), {
27
- children
28
- })
29
- );
30
- }
31
- );
32
- Badge.displayName = "Badge";
33
-
34
- export {
35
- Badge
36
- };
37
- //# sourceMappingURL=chunk-OXZOGFNV.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/badge/badge.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n children: React.ReactNode;\n\n /**\n * Color of the badge\n *\n * @default \"lighter\"\n */\n variant?: \"lighter\" | \"darker\" | \"white\" | \"warning\";\n\n /**\n * Font size of the badge\n *\n * @default \"small\"\n */\n size?: \"small\" | \"smaller\";\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * Badges are used to label, categorize or organize items using keywords to describe them.\n *\n * @example\n *\n * ```tsx\n * <Badge variant=\"darker\">Darker</Badge>\n * ```\n *\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n ({ children, asChild, variant = \"lighter\", size = \"small\", className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n ref={ref}\n className={clsx(\n \"hds-badge\",\n `hds-badge--${size}`,\n `hds-badge--${variant}`,\n className as undefined,\n )}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nBadge.displayName = \"Badge\";\n"],"mappings":";;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAyCrB;AAJC,IAAM,QAAQ;AAAA,EACnB,CAAC,IAAgF,QAAQ;AAAxF,iBAAE,YAAU,SAAS,UAAU,WAAW,OAAO,SAAS,UAxC7D,IAwCG,IAAwE,iBAAxE,IAAwE,CAAtE,YAAU,WAAS,WAAqB,QAAgB;AACzD,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,cAAc,IAAI;AAAA,UAClB,cAAc,OAAO;AAAA,UACrB;AAAA,QACF;AAAA,SACI,OARL;AAAA,QAUE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;","names":[]}