@postenbring/hedwig-react 0.0.87 → 0.0.89

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 (185) hide show
  1. package/dist/badge/badge.d.ts +7 -3
  2. package/dist/badge/badge.d.ts.map +1 -1
  3. package/dist/badge/badge.js.map +1 -1
  4. package/dist/badge/badge.mjs +1 -1
  5. package/dist/badge/index.js.map +1 -1
  6. package/dist/badge/index.mjs +1 -1
  7. package/dist/blockquote/blockquote.d.ts +29 -0
  8. package/dist/blockquote/blockquote.d.ts.map +1 -0
  9. package/dist/blockquote/blockquote.js +83 -0
  10. package/dist/blockquote/blockquote.js.map +1 -0
  11. package/dist/blockquote/blockquote.mjs +8 -0
  12. package/dist/blockquote/index.d.ts +3 -0
  13. package/dist/blockquote/index.d.ts.map +1 -0
  14. package/dist/blockquote/index.js +85 -0
  15. package/dist/blockquote/index.js.map +1 -0
  16. package/dist/blockquote/index.mjs +9 -0
  17. package/dist/chunk-3H7S7C3S.mjs +37 -0
  18. package/dist/chunk-3H7S7C3S.mjs.map +1 -0
  19. package/dist/{chunk-YIERXOCG.mjs → chunk-6ZO2TMOX.mjs} +2 -2
  20. package/dist/{chunk-F4EAUOJX.mjs → chunk-EAFQ3XQU.mjs} +2 -2
  21. package/dist/{chunk-OFY2FVXB.mjs → chunk-EGW3RCXD.mjs} +2 -2
  22. package/dist/chunk-EGW3RCXD.mjs.map +1 -0
  23. package/dist/{chunk-WEQIEPMT.mjs → chunk-JQGB77SS.mjs} +1 -1
  24. package/dist/chunk-JQGB77SS.mjs.map +1 -0
  25. package/dist/chunk-JYN2QSN2.mjs +36 -0
  26. package/dist/chunk-JYN2QSN2.mjs.map +1 -0
  27. package/dist/chunk-K2CB2NLY.mjs +1 -0
  28. package/dist/chunk-KFDS3IPB.mjs +1 -0
  29. package/dist/{chunk-YLBJMVIX.mjs → chunk-M7MG7ZQT.mjs} +2 -2
  30. package/dist/chunk-OE6RISJS.mjs +24 -0
  31. package/dist/chunk-OE6RISJS.mjs.map +1 -0
  32. package/dist/{chunk-TCO3ZAZW.mjs → chunk-OXZOGFNV.mjs} +1 -1
  33. package/dist/chunk-OXZOGFNV.mjs.map +1 -0
  34. package/dist/{chunk-GUNPGSAS.mjs → chunk-UL2V2Z5B.mjs} +12 -12
  35. package/dist/chunk-UL2V2Z5B.mjs.map +1 -0
  36. package/dist/chunk-XAFNJELJ.mjs +1 -0
  37. package/dist/chunk-XAFNJELJ.mjs.map +1 -0
  38. package/dist/{chunk-ZYTUK4B4.mjs → chunk-YS7HBWOI.mjs} +4 -3
  39. package/dist/chunk-YS7HBWOI.mjs.map +1 -0
  40. package/dist/figure/figure.d.ts +22 -0
  41. package/dist/figure/figure.d.ts.map +1 -0
  42. package/dist/figure/figure.js +71 -0
  43. package/dist/figure/figure.js.map +1 -0
  44. package/dist/figure/figure.mjs +8 -0
  45. package/dist/figure/figure.mjs.map +1 -0
  46. package/dist/figure/index.d.ts +3 -0
  47. package/dist/figure/index.d.ts.map +1 -0
  48. package/dist/figure/index.js +73 -0
  49. package/dist/figure/index.js.map +1 -0
  50. package/dist/figure/index.mjs +9 -0
  51. package/dist/figure/index.mjs.map +1 -0
  52. package/dist/form/checkbox/checkbox.js.map +1 -1
  53. package/dist/form/checkbox/checkbox.mjs +2 -2
  54. package/dist/form/checkbox/index.js.map +1 -1
  55. package/dist/form/checkbox/index.mjs +2 -2
  56. package/dist/form/fieldset/fieldset.d.ts +2 -2
  57. package/dist/form/fieldset/fieldset.js.map +1 -1
  58. package/dist/form/fieldset/fieldset.mjs +1 -1
  59. package/dist/form/fieldset/index.js.map +1 -1
  60. package/dist/form/fieldset/index.mjs +1 -1
  61. package/dist/form/index.d.ts +1 -1
  62. package/dist/form/index.d.ts.map +1 -1
  63. package/dist/form/index.js +13 -12
  64. package/dist/form/index.js.map +1 -1
  65. package/dist/form/index.mjs +17 -17
  66. package/dist/form/radio-button/index.d.ts +5 -0
  67. package/dist/form/radio-button/index.d.ts.map +1 -0
  68. package/dist/form/{radiobutton → radio-button}/index.js +17 -16
  69. package/dist/form/radio-button/index.js.map +1 -0
  70. package/dist/form/{radiobutton → radio-button}/index.mjs +6 -6
  71. package/dist/form/radio-button/index.mjs.map +1 -0
  72. package/dist/form/{radiobutton/radiobutton.d.ts → radio-button/radio-button.d.ts} +6 -6
  73. package/dist/form/radio-button/radio-button.d.ts.map +1 -0
  74. package/dist/form/{radiobutton/radiobutton.js → radio-button/radio-button.js} +17 -16
  75. package/dist/form/radio-button/radio-button.js.map +1 -0
  76. package/dist/form/radio-button/radio-button.mjs +13 -0
  77. package/dist/form/radio-button/radio-button.mjs.map +1 -0
  78. package/dist/form/{radiobutton/radiogroup.d.ts → radio-button/radio-group.d.ts} +7 -7
  79. package/dist/form/radio-button/radio-group.d.ts.map +1 -0
  80. package/dist/form/{radiobutton/radiogroup.js → radio-button/radio-group.js} +7 -6
  81. package/dist/form/radio-button/radio-group.js.map +1 -0
  82. package/dist/form/{radiobutton/radiogroup.mjs → radio-button/radio-group.mjs} +3 -3
  83. package/dist/form/radio-button/radio-group.mjs.map +1 -0
  84. package/dist/index.d.ts +2 -0
  85. package/dist/index.d.ts.map +1 -1
  86. package/dist/index.js +554 -498
  87. package/dist/index.js.map +1 -1
  88. package/dist/index.mjs +76 -66
  89. package/dist/layout/index.mjs +6 -6
  90. package/dist/navbar/icons.d.ts.map +1 -1
  91. package/dist/navbar/icons.js +16 -5
  92. package/dist/navbar/icons.js.map +1 -1
  93. package/dist/navbar/icons.mjs +1 -1
  94. package/dist/navbar/index.js +16 -5
  95. package/dist/navbar/index.js.map +1 -1
  96. package/dist/navbar/index.mjs +3 -3
  97. package/dist/navbar/navbar-expandable-menu.js +16 -5
  98. package/dist/navbar/navbar-expandable-menu.js.map +1 -1
  99. package/dist/navbar/navbar-expandable-menu.mjs +2 -2
  100. package/dist/navbar/navbar.js +16 -5
  101. package/dist/navbar/navbar.js.map +1 -1
  102. package/dist/navbar/navbar.mjs +3 -3
  103. package/dist/styled-html/index.js +1 -1
  104. package/dist/styled-html/index.js.map +1 -1
  105. package/dist/styled-html/index.mjs +1 -1
  106. package/dist/styled-html/styled-html.d.ts +9 -1
  107. package/dist/styled-html/styled-html.d.ts.map +1 -1
  108. package/dist/styled-html/styled-html.js +1 -1
  109. package/dist/styled-html/styled-html.js.map +1 -1
  110. package/dist/styled-html/styled-html.mjs +1 -1
  111. package/package.json +4 -4
  112. package/src/accordion/accordion.stories.tsx +8 -113
  113. package/src/badge/badge.stories.tsx +2 -30
  114. package/src/badge/badge.tsx +7 -3
  115. package/src/blockquote/blockquote.stories.tsx +22 -0
  116. package/src/blockquote/blockquote.tsx +52 -0
  117. package/src/blockquote/index.tsx +3 -0
  118. package/src/box/box.stories.tsx +14 -84
  119. package/src/breadcrumbs/breadcrumbs.stories.tsx +8 -22
  120. package/src/button/button.stories.tsx +2 -85
  121. package/src/card/card.stories.tsx +2 -42
  122. package/src/description-list/description-list.stories.tsx +6 -71
  123. package/src/figure/figure.stories.tsx +22 -0
  124. package/src/figure/figure.tsx +36 -0
  125. package/src/figure/index.tsx +3 -0
  126. package/src/form/checkbox/checkbox.stories.tsx +5 -80
  127. package/src/form/date-picker/date-picker.stories.tsx +8 -7
  128. package/src/form/error-message/error-message.stories.tsx +3 -2
  129. package/src/form/fieldset/fieldset.stories.tsx +2 -58
  130. package/src/form/fieldset/fieldset.tsx +2 -2
  131. package/src/form/index.tsx +1 -1
  132. package/src/form/input/input.stories.tsx +2 -142
  133. package/src/form/radio-button/index.tsx +4 -0
  134. package/src/form/radio-button/radio-button.stories.tsx +26 -0
  135. package/src/form/{radiobutton/radiobutton.tsx → radio-button/radio-button.tsx} +13 -13
  136. package/src/form/{radiobutton/radiogroup.stories.tsx → radio-button/radio-group.stories.tsx} +9 -9
  137. package/src/form/{radiobutton/radiogroup.tsx → radio-button/radio-group.tsx} +7 -6
  138. package/src/form/select/select.stories.tsx +2 -61
  139. package/src/form/textarea/textarea.stories.tsx +5 -85
  140. package/src/help-text/help-text.stories.tsx +20 -0
  141. package/src/index.ts +2 -0
  142. package/src/layout/container/container.stories.tsx +18 -14
  143. package/src/layout/grid/grid.stories.tsx +28 -0
  144. package/src/layout/stack/stack.stories.tsx +28 -0
  145. package/src/link/link.stories.tsx +8 -38
  146. package/src/list/link-list.stories.tsx +25 -27
  147. package/src/list/list.stories.tsx +11 -48
  148. package/src/message/message.stories.tsx +8 -65
  149. package/src/modal/modal.stories.tsx +2 -103
  150. package/src/navbar/icons.tsx +10 -3
  151. package/src/navbar/navbar.stories.tsx +23 -62
  152. package/src/show-more/show-more.stories.tsx +3 -98
  153. package/src/skeleton/skeleton.stories.tsx +3 -126
  154. package/src/step-indicator/step-indicator.stories.tsx +2 -31
  155. package/src/styled-html/styled-html.stories.tsx +22 -155
  156. package/src/styled-html/styled-html.tsx +12 -2
  157. package/src/table/table.stories.tsx +43 -0
  158. package/src/tabs/tabs.stories.tsx +8 -114
  159. package/src/text/text.stories.tsx +18 -83
  160. package/src/warning-banner/warning-banner.stories.tsx +2 -23
  161. package/dist/chunk-2KX7VFN2.mjs +0 -1
  162. package/dist/chunk-GUNPGSAS.mjs.map +0 -1
  163. package/dist/chunk-MOU6WBT2.mjs +0 -26
  164. package/dist/chunk-MOU6WBT2.mjs.map +0 -1
  165. package/dist/chunk-OFY2FVXB.mjs.map +0 -1
  166. package/dist/chunk-TCO3ZAZW.mjs.map +0 -1
  167. package/dist/chunk-WEQIEPMT.mjs.map +0 -1
  168. package/dist/chunk-ZYTUK4B4.mjs.map +0 -1
  169. package/dist/form/radiobutton/index.d.ts +0 -5
  170. package/dist/form/radiobutton/index.d.ts.map +0 -1
  171. package/dist/form/radiobutton/index.js.map +0 -1
  172. package/dist/form/radiobutton/radiobutton.d.ts.map +0 -1
  173. package/dist/form/radiobutton/radiobutton.js.map +0 -1
  174. package/dist/form/radiobutton/radiobutton.mjs +0 -13
  175. package/dist/form/radiobutton/radiogroup.d.ts.map +0 -1
  176. package/dist/form/radiobutton/radiogroup.js.map +0 -1
  177. package/src/form/radiobutton/index.tsx +0 -4
  178. package/src/form/radiobutton/radiobutton.stories.tsx +0 -93
  179. /package/dist/{chunk-2KX7VFN2.mjs.map → blockquote/blockquote.mjs.map} +0 -0
  180. /package/dist/{form/radiobutton → blockquote}/index.mjs.map +0 -0
  181. /package/dist/{chunk-YIERXOCG.mjs.map → chunk-6ZO2TMOX.mjs.map} +0 -0
  182. /package/dist/{chunk-F4EAUOJX.mjs.map → chunk-EAFQ3XQU.mjs.map} +0 -0
  183. /package/dist/{form/radiobutton/radiobutton.mjs.map → chunk-K2CB2NLY.mjs.map} +0 -0
  184. /package/dist/{form/radiobutton/radiogroup.mjs.map → chunk-KFDS3IPB.mjs.map} +0 -0
  185. /package/dist/{chunk-YLBJMVIX.mjs.map → chunk-M7MG7ZQT.mjs.map} +0 -0
@@ -1,6 +1,5 @@
1
1
  /* eslint-disable import/no-extraneous-dependencies -- storybook story */
2
2
  import type { Meta, StoryObj } from "@storybook/react";
3
- import { StyledHtml } from "../styled-html";
4
3
  import { Tabs } from ".";
5
4
 
6
5
  type Story = StoryObj<typeof Tabs>;
@@ -9,130 +8,25 @@ const meta: Meta<typeof Tabs> = {
9
8
  title: "Tabs",
10
9
  component: Tabs,
11
10
  };
11
+ export default meta;
12
12
 
13
- export const Horizontal: Story = {
13
+ export const Preview: Story = {
14
+ tags: ["!dev"],
14
15
  args: {
15
16
  defaultTab: "first",
16
17
  children: (
17
18
  <>
18
19
  <Tabs.List>
19
- <Tabs.Tab tabId="first">First</Tabs.Tab>
20
- <Tabs.Tab tabId="second">Second</Tabs.Tab>
21
- <Tabs.Tab tabId="third">Third</Tabs.Tab>
22
- <Tabs.Tab tabId="forth">Forth</Tabs.Tab>
23
- <Tabs.Tab tabId="fifth">Fifth</Tabs.Tab>
24
- <Tabs.Tab tabId="sixth">Sixth</Tabs.Tab>
25
- </Tabs.List>
26
- <Tabs.Contents>
27
- <Tabs.Content forTabId="first">First tab</Tabs.Content>
28
- <Tabs.Content forTabId="second">Second tab</Tabs.Content>
29
- <Tabs.Content forTabId="third">Third tab</Tabs.Content>
30
- <Tabs.Content forTabId="forth">Forth tab</Tabs.Content>
31
- <Tabs.Content forTabId="fifth">Fifth tab</Tabs.Content>
32
- <Tabs.Content forTabId="sixth">Sixth tab</Tabs.Content>
33
- </Tabs.Contents>
34
- </>
35
- ),
36
- },
37
- };
38
-
39
- export const Vertical: Story = {
40
- args: {
41
- defaultTab: "first",
42
- children: (
43
- <>
44
- <Tabs.List direction="vertical">
45
- <Tabs.Tab tabId="first">First</Tabs.Tab>
46
- <Tabs.Tab tabId="second">Second</Tabs.Tab>
47
- <Tabs.Tab tabId="third">Third</Tabs.Tab>
48
- <Tabs.Tab tabId="forth">Forth</Tabs.Tab>
49
- <Tabs.Tab tabId="fifth">Fifth</Tabs.Tab>
50
- <Tabs.Tab tabId="sixth">Sixth</Tabs.Tab>
20
+ <Tabs.Tab tabId="first">Send domestically</Tabs.Tab>
21
+ <Tabs.Tab tabId="second">Send abroad</Tabs.Tab>
22
+ <Tabs.Tab tabId="third">Other services</Tabs.Tab>
51
23
  </Tabs.List>
52
24
  <Tabs.Contents>
53
- <Tabs.Content forTabId="first">First tab</Tabs.Content>
54
- <Tabs.Content forTabId="second">Second tab</Tabs.Content>
25
+ <Tabs.Content forTabId="first">Single tab</Tabs.Content>
26
+ <Tabs.Content forTabId="second">Two tabs</Tabs.Content>
55
27
  <Tabs.Content forTabId="third">Third tab</Tabs.Content>
56
- <Tabs.Content forTabId="forth">Forth tab</Tabs.Content>
57
- <Tabs.Content forTabId="fifth">Fifth tab</Tabs.Content>
58
- <Tabs.Content forTabId="sixth">Sixth tab</Tabs.Content>
59
28
  </Tabs.Contents>
60
29
  </>
61
30
  ),
62
31
  },
63
32
  };
64
-
65
- export const HorizontalWithMiddleSelected: Story = {
66
- args: {
67
- defaultTab: "second",
68
- children: (
69
- <>
70
- <Tabs.List>
71
- <Tabs.Tab tabId="first">Pakker og gods for bedrift</Tabs.Tab>
72
- <Tabs.Tab tabId="second">Post og brevpost</Tabs.Tab>
73
- <Tabs.Tab tabId="third">Bud- og ekspress-pakker</Tabs.Tab>
74
- </Tabs.List>
75
- <Tabs.Contents>
76
- <Tabs.Content forTabId="first" asChild>
77
- <StyledHtml>
78
- <h2>Vilkår for transport til bedrifter nasjonalt</h2>
79
- <ul>
80
- <li>
81
- <a href="/tjenester/pakker-og-gods/Transportguiden_01122023.pdf">
82
- Transportguiden fra 01.12.2023 (pdf)
83
- </a>
84
- </li>
85
- <li>
86
- <a
87
- href="https://lovdata.no/dokument/NL/lov/1974-12-20-68?q=Lov+om+vegfraktavtaler"
88
- rel="noopener"
89
- target="_blank"
90
- >
91
- Link til Lov om Vegfraktavtaler fra Lovdata
92
- </a>
93
- </li>
94
- <li>
95
- <a href="/vilkar/nsab-2000.pdf">NSAB 2000 (pdf)</a>
96
- </li>
97
- <li>
98
- <a href="/vilkar/nsab-2015.pdf">NSAB 2015 (pdf)</a>
99
- </li>
100
- <li>
101
- <a href="/vilkar/pakker-til-bedrifter-i-utlandet-pakker-og-gods-sikkerhetsbestemmelser">
102
- Pakker og gods - sikkerhetsbestemmelser
103
- </a>
104
- </li>
105
- <li>
106
- <a href="/vilkar/vilkar-for-pakke-til-bedrift">Vilkår for Pakke til bedrift</a>
107
- </li>
108
- <li>
109
- <a href="/vilkar/vilkar-for-ekspress-neste-dag">Vilkår for Ekspress neste dag</a>
110
- </li>
111
- <li>
112
- <a href="/vilkar/Betingelser%20Oljeekspressen.pdf">
113
- Betingelser Oljeekspressen (pdf)
114
- </a>
115
- &nbsp;
116
- </li>
117
- <li>
118
- <a href="/tjenester/pakker-og-gods/Transportguiden_01122023.pdf">
119
- Vilkår for godstjenester fra 01.12.2023 (pdf)
120
- </a>
121
- &nbsp;
122
- </li>
123
- </ul>
124
- </StyledHtml>
125
- </Tabs.Content>
126
- <Tabs.Content forTabId="second">
127
- <h2>Vilkår for post med like formater</h2>
128
- </Tabs.Content>
129
- <Tabs.Content forTabId="third">
130
- <h2>Generelle vilkår</h2>
131
- </Tabs.Content>
132
- </Tabs.Contents>
133
- </>
134
- ),
135
- },
136
- };
137
-
138
- export default meta;
@@ -1,6 +1,6 @@
1
1
  /* eslint-disable import/no-extraneous-dependencies -- storybook story */
2
2
  import type { Meta, StoryObj } from "@storybook/react";
3
- import { HStack, VStack } from "../layout";
3
+ import { VStack } from "../layout";
4
4
  import { Text } from ".";
5
5
 
6
6
  const meta: Meta<typeof Text> = {
@@ -11,102 +11,37 @@ const meta: Meta<typeof Text> = {
11
11
  export default meta;
12
12
 
13
13
  type Story = StoryObj<typeof Text>;
14
- export const Default: Story = {
15
- render: FontGallery,
16
- };
17
-
18
- export const PostenBringSideBySide: Story = {
14
+ export const Preview: Story = {
15
+ tags: ["!dev"],
19
16
  render: () => (
20
- <HStack gap="16">
21
- <div className="hds-theme-posten">
22
- <FontGalleryHeader>Posten</FontGalleryHeader>
23
- <FontGallery />
24
- </div>
25
- <div className="hds-theme-bring">
26
- <FontGalleryHeader>Bring</FontGalleryHeader>
27
- <FontGallery />
28
- </div>
29
- </HStack>
30
- ),
31
- };
32
-
33
- export const MinAndMax: Story = {
34
- render: () => (
35
- <HStack gap="16">
36
- <div>
37
- <FontGalleryHeader>Min</FontGalleryHeader>
38
- <FontGallery size="min" />
39
- </div>
40
- <div>
41
- <FontGalleryHeader>Max</FontGalleryHeader>
42
- <FontGallery size="max" />
43
- </div>
44
- </HStack>
45
- ),
46
- };
47
-
48
- function FontGalleryHeader({ children }: { children: React.ReactNode }) {
49
- return (
50
- <h2
51
- style={{
52
- padding: "var(--hds-spacing-8)",
53
- background: "var(--hds-colors-signature)",
54
- color: "var(--hds-button-colors-text)",
55
- fontWeight: 500,
56
- margin: 0,
57
- }}
58
- >
59
- {children}
60
- </h2>
61
- );
62
- }
63
-
64
- function FontGallery({ size }: { size?: "min" | "max" | "fluid" }) {
65
- return (
66
17
  <VStack gap="16">
67
18
  <div>
68
- <Text size={size} variant="h1-display" as="p">
19
+ <Text variant="h1-display" as="p">
69
20
  Display
70
21
  </Text>
71
- <Text size={size} variant="h1" as="p">
22
+ <Text variant="h1" as="p">
72
23
  H1
73
24
  </Text>
74
- <Text size={size} variant="h2" as="p">
25
+ <Text variant="h2" as="p">
75
26
  H2
76
27
  </Text>
77
- <Text size={size} variant="h3" as="p">
28
+ <Text variant="h3" as="p">
78
29
  H3
79
30
  </Text>
80
- <Text size={size} variant="body">
81
- Body
82
- </Text>
83
- <Text size={size} variant="body-small">
84
- Body Small
85
- </Text>
86
- <Text size={size} variant="technical">
87
- Technical
88
- </Text>
89
- <Text size={size} variant="caption">
90
- Caption
91
- </Text>
31
+ <Text variant="body">Body</Text>
32
+ <Text variant="body-small">Body Small</Text>
33
+ <Text variant="technical">Technical</Text>
34
+ <Text variant="caption">Caption</Text>
92
35
  </div>
93
36
  <div>
94
- <Text size={size} variant="h3-title" as="p">
37
+ <Text variant="h3-title" as="p">
95
38
  H3 Title
96
39
  </Text>
97
- <Text size={size} variant="body-title">
98
- Body Title
99
- </Text>
100
- <Text size={size} variant="body-small-title">
101
- Body Small Title
102
- </Text>
103
- <Text size={size} variant="technical-title">
104
- Technical Title
105
- </Text>
106
- <Text size={size} variant="caption-title">
107
- Caption Title
108
- </Text>
40
+ <Text variant="body-title">Body Title</Text>
41
+ <Text variant="body-small-title">Body Small Title</Text>
42
+ <Text variant="technical-title">Technical Title</Text>
43
+ <Text variant="caption-title">Caption Title</Text>
109
44
  </div>
110
45
  </VStack>
111
- );
112
- }
46
+ ),
47
+ };
@@ -1,7 +1,6 @@
1
1
  /* eslint-disable import/no-extraneous-dependencies -- storybook story */
2
2
 
3
3
  import type { Meta, StoryObj } from "@storybook/react";
4
- import { Link } from "../link";
5
4
  import { WarningBanner } from ".";
6
5
 
7
6
  const meta: Meta<typeof WarningBanner> = {
@@ -13,31 +12,11 @@ export default meta;
13
12
 
14
13
  type Story = StoryObj<typeof WarningBanner>;
15
14
 
16
- export const Expandable: Story = {
15
+ export const Preview: Story = {
16
+ tags: ["!dev"],
17
17
  args: {
18
18
  title: "Warning banner title",
19
19
  description:
20
20
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
21
21
  },
22
22
  };
23
-
24
- export const LinkInDescription: Story = {
25
- args: {
26
- title: "Warning banner with link in description",
27
- description: (
28
- <>
29
- You can include links in the description of the warning banner. However, remember to use
30
- link with variant solid.{" "}
31
- <Link href="https://www.posten.no/" variant="solid">
32
- Link to Posten
33
- </Link>
34
- </>
35
- ),
36
- },
37
- };
38
-
39
- export const TitleOnly: Story = {
40
- args: {
41
- title: "Title only",
42
- },
43
- };
@@ -1 +0,0 @@
1
- //# sourceMappingURL=chunk-2KX7VFN2.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/form/radiobutton/radiobutton.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { useFieldsetContext } from \"../fieldset\";\nimport { type RadioGroupProps, useRadioGroupContext } from \"./radiogroup\";\n\nexport interface RadiobuttonProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, \"defaultValue\"> {\n children: ReactNode;\n variant?: \"plain\" | \"bounding-box\";\n /**\n * Set to `true` to add error styling. The component will take care of aria to indicate invalid state.\n *\n * Normally you don't need this, as you should wrap your Radiobuttons in the RadioGroup component.\n * When providing an errorMessage to RadioGroup, all contained Radiobuttons will get correct hasError state.\n *\n * You can use this when your Radiobutton is part of a non-HDS fieldset which shows an error message.\n */\n hasError?: boolean;\n title?: string;\n}\n\nconst isChecked = ({\n checked,\n selectedValue,\n value,\n}: Pick<RadiobuttonProps, \"checked\" | \"value\"> & {\n selectedValue: RadioGroupProps[\"value\"];\n}) => {\n if (typeof checked !== \"undefined\") return checked;\n if (typeof selectedValue !== \"undefined\") return value === selectedValue;\n return undefined;\n};\n\nexport const Radiobutton = forwardRef<HTMLInputElement, RadiobuttonProps>(\n (\n {\n checked,\n value,\n variant = \"plain\",\n hasError: hasErrorProp,\n title,\n children,\n className,\n ...rest\n },\n ref,\n ) => {\n const {\n value: selectedValue,\n hasError: hasRadioGroupError,\n ...context\n } = useRadioGroupContext();\n const { hasError: hasFieldsetError } = useFieldsetContext();\n const hasError = hasFieldsetError || hasRadioGroupError || hasErrorProp;\n\n return (\n <div\n className={clsx(\n \"hds-radiobutton\",\n {\n [`hds-radiobutton--${variant}`]: variant === \"bounding-box\",\n \"hds-radiobutton--error\": hasError,\n },\n className as undefined,\n )}\n >\n <label>\n <input\n {...context}\n {...rest}\n checked={isChecked({ checked, selectedValue, value })}\n value={value}\n ref={ref}\n type=\"radio\"\n />\n <span aria-hidden className=\"hds-radiobutton__checkmark\" />\n {title ? <p className=\"hds-radiobutton__title\">{title}</p> : children}\n </label>\n {title ? children : null}\n </div>\n );\n },\n);\n\nRadiobutton.displayName = \"Radiobutton\";\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,kBAA4D;AACrE,SAAS,YAAY;AAiEb,SACE,KADF;AA7CR,IAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AACF,MAEM;AACJ,MAAI,OAAO,YAAY,YAAa,QAAO;AAC3C,MAAI,OAAO,kBAAkB,YAAa,QAAO,UAAU;AAC3D,SAAO;AACT;AAEO,IAAM,cAAc;AAAA,EACzB,CACE,IAUA,QACG;AAXH,iBACE;AAAA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,IA1CN,IAmCI,IAQK,iBARL,IAQK;AAAA,MAPH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAIIA,MAAA,qBAAqB,GAHvB;AAAA,aAAO;AAAA,MACP,UAAU;AAAA,IAjDhB,IAmDQA,KADC,oBACDA,KADC;AAAA,MAFH;AAAA,MACA;AAAA;AAGF,UAAM,EAAE,UAAU,iBAAiB,IAAI,mBAAmB;AAC1D,UAAM,WAAW,oBAAoB,sBAAsB;AAE3D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,CAAC,oBAAoB,OAAO,EAAE,GAAG,YAAY;AAAA,YAC7C,0BAA0B;AAAA,UAC5B;AAAA,UACA;AAAA,QACF;AAAA,QAEA;AAAA,+BAAC,WACC;AAAA;AAAA,cAAC;AAAA,8DACK,UACA,OAFL;AAAA,gBAGC,SAAS,UAAU,EAAE,SAAS,eAAe,MAAM,CAAC;AAAA,gBACpD;AAAA,gBACA;AAAA,gBACA,MAAK;AAAA;AAAA,YACP;AAAA,YACA,oBAAC,UAAK,eAAW,MAAC,WAAU,8BAA6B;AAAA,YACxD,QAAQ,oBAAC,OAAE,WAAU,0BAA0B,iBAAM,IAAO;AAAA,aAC/D;AAAA,UACC,QAAQ,WAAW;AAAA;AAAA;AAAA,IACtB;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;","names":["_a"]}
@@ -1,26 +0,0 @@
1
- // src/navbar/icons.tsx
2
- import { jsx } from "react/jsx-runtime";
3
- function CloseIcon() {
4
- return /* @__PURE__ */ jsx("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, children: /* @__PURE__ */ jsx(
5
- "path",
6
- {
7
- fill: "currentColor",
8
- d: "m13.16 12.25 3.621-3.586.739-.738c.105-.106.105-.281 0-.422l-.774-.774c-.14-.105-.316-.105-.422 0L12 11.09 7.64 6.73c-.105-.105-.28-.105-.421 0l-.774.774c-.105.14-.105.316 0 .422l4.36 4.324-4.36 4.36c-.105.105-.105.28 0 .421l.774.774c.14.105.316.105.422 0L12 13.445l3.586 3.621.738.739c.106.105.281.105.422 0l.774-.774c.105-.14.105-.316 0-.422l-4.36-4.359Z"
9
- }
10
- ) });
11
- }
12
- function MenuIcon() {
13
- return /* @__PURE__ */ jsx("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, children: /* @__PURE__ */ jsx(
14
- "path",
15
- {
16
- fill: "currentColor",
17
- d: "M25.938 10.146a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.562-.563-.562H6.063a.57.57 0 0 0-.562.562v1.5c0 .328.234.563.563.563h19.875Zm0 7.5a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.563-.563-.563H6.063a.57.57 0 0 0-.562.563v1.5c0 .328.234.563.563.563h19.875Zm0 7.5a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.563-.563-.563H6.063a.57.57 0 0 0-.562.563v1.5c0 .328.234.563.563.563h19.875Z"
18
- }
19
- ) });
20
- }
21
-
22
- export {
23
- CloseIcon,
24
- MenuIcon
25
- };
26
- //# sourceMappingURL=chunk-MOU6WBT2.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/navbar/icons.tsx"],"sourcesContent":["export function CloseIcon() {\n return (\n <svg aria-hidden xmlns=\"http://www.w3.org/2000/svg\" width={24} height={24}>\n <path\n fill=\"currentColor\"\n d=\"m13.16 12.25 3.621-3.586.739-.738c.105-.106.105-.281 0-.422l-.774-.774c-.14-.105-.316-.105-.422 0L12 11.09 7.64 6.73c-.105-.105-.28-.105-.421 0l-.774.774c-.105.14-.105.316 0 .422l4.36 4.324-4.36 4.36c-.105.105-.105.28 0 .421l.774.774c.14.105.316.105.422 0L12 13.445l3.586 3.621.738.739c.106.105.281.105.422 0l.774-.774c.105-.14.105-.316 0-.422l-4.36-4.359Z\"\n />\n </svg>\n );\n}\n\nexport function MenuIcon() {\n return (\n <svg aria-hidden xmlns=\"http://www.w3.org/2000/svg\" width={32} height={32}>\n <path\n fill=\"currentColor\"\n d=\"M25.938 10.146a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.562-.563-.562H6.063a.57.57 0 0 0-.562.562v1.5c0 .328.234.563.563.563h19.875Zm0 7.5a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.563-.563-.563H6.063a.57.57 0 0 0-.562.563v1.5c0 .328.234.563.563.563h19.875Zm0 7.5a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.563-.563-.563H6.063a.57.57 0 0 0-.562.563v1.5c0 .328.234.563.563.563h19.875Z\"\n />\n </svg>\n );\n}\n"],"mappings":";AAGM;AAHC,SAAS,YAAY;AAC1B,SACE,oBAAC,SAAI,eAAW,MAAC,OAAM,8BAA6B,OAAO,IAAI,QAAQ,IACrE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAE;AAAA;AAAA,EACJ,GACF;AAEJ;AAEO,SAAS,WAAW;AACzB,SACE,oBAAC,SAAI,eAAW,MAAC,OAAM,8BAA6B,OAAO,IAAI,QAAQ,IACrE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAE;AAAA;AAAA,EACJ,GACF;AAEJ;","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 size?: \"default\" | \"small\";\n 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, 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;AAyCf;AAJC,IAAM,aAAa;AAAA,EACxB,CAAC,IAAmE,QAAQ;AAA3E,iBAAE,WAAS,UAAU,MAAM,WAAW,OAAO,UAxChD,IAwCG,IAA2D,iBAA3D,IAA2D,CAAzD,WAAS,YAAU,QAAM,YAAkB;AAC5C,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/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.AnchorHTMLAttributes<HTMLSpanElement> {\n children: React.ReactNode;\n\n /**\n * Color of the badge\n *\n * @default \"lighter\"\n */\n variant?: \"lighter\" | \"dark\" | \"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 * <Badge variant=\"dark\">Dark</Badge>\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;AAqCrB;AAJC,IAAM,QAAQ;AAAA,EACnB,CAAC,IAAgF,QAAQ;AAAxF,iBAAE,YAAU,SAAS,UAAU,WAAW,OAAO,SAAS,UApC7D,IAoCG,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":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/form/fieldset/fieldset.tsx"],"sourcesContent":["import { useId, forwardRef, createContext, useContext } from \"react\";\nimport type { FieldsetHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\nexport interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n className?: string;\n style?: CSSProperties;\n /**\n * Providing an errorMessage will also give contained Checkboxes or Radiobuttons\n * error styling and aria to indicate invalid state.\n *\n * For Radiobuttons you are even better off using RadioGroup.\n */\n errorMessage?: ReactNode;\n legendProps?: HTMLAttributes<HTMLElement> & { size: \"default\" | \"large\" };\n legend: ReactNode;\n children: ReactNode;\n}\n\nconst FieldsetContext = createContext<{ hasError: boolean }>({ hasError: false });\n\nexport const useFieldsetContext = () => useContext(FieldsetContext);\n\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(\n {\n className,\n style,\n errorMessage,\n legendProps: { size: legendSize = \"default\", className: legendClassName, ...legendProps } = {},\n legend,\n children,\n ...rest\n },\n ref,\n) {\n const errorMessageId = useId();\n\n return (\n <fieldset\n aria-describedby={errorMessage ? errorMessageId : undefined}\n aria-invalid={errorMessage ? true : undefined}\n className={clsx(\"hds-fieldset\", className as undefined)}\n ref={ref}\n style={style}\n {...rest}\n >\n <legend\n className={clsx(\n \"hds-fieldset__legend\",\n { [`hds-fieldset__legend--${legendSize}`]: legendSize },\n legendClassName as undefined,\n )}\n {...legendProps}\n >\n {legend}\n </legend>\n <FieldsetContext.Provider value={{ hasError: Boolean(errorMessage) }}>\n {children}\n </FieldsetContext.Provider>\n <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n </fieldset>\n );\n});\n"],"mappings":";;;;;;;;;;AAAA,SAAS,OAAO,YAAY,eAAe,kBAAkB;AAE7D,SAAS,YAAY;AAqCjB,SAQE,KARF;AAnBJ,IAAM,kBAAkB,cAAqC,EAAE,UAAU,MAAM,CAAC;AAEzE,IAAM,qBAAqB,MAAM,WAAW,eAAe;AAE3D,IAAM,WAAW,WAA+C,SAASA,UAC9E,IASA,KACA;AAVA,eAIe;AAAA,IAHb;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,KAA+E,CAAC;AAAA,EA7BjG,IAyBE,IAIe,SAAE,QAAM,aAAa,WAAW,WAAW,gBA7B5D,IA6BiB,IAA+D,wBAA/D,IAA+D,CAA7D,QAA8B,eAJ/C,SAKE;AAAA;AAAA,IACA;AAAA,EA/BJ,IAyBE,IAOK,iBAPL,IAOK;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,iBAAiB,MAAM;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,oBAAkB,eAAe,iBAAiB;AAAA,MAClD,gBAAc,eAAe,OAAO;AAAA,MACpC,WAAW,KAAK,gBAAgB,SAAsB;AAAA,MACtD;AAAA,MACA;AAAA,OACI,OANL;AAAA,MAQC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,EAAE,CAAC,yBAAyB,UAAU,EAAE,GAAG,WAAW;AAAA,cACtD;AAAA,YACF;AAAA,aACI,cANL;AAAA,YAQE;AAAA;AAAA,QACH;AAAA,QACA,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,UAAU,QAAQ,YAAY,EAAE,GAChE,UACH;AAAA,QACA,oBAAC,gBAAa,IAAI,gBAAiB,wBAAa;AAAA;AAAA;AAAA,EAClD;AAEJ,CAAC;","names":["Fieldset"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/form/radiobutton/radiogroup.tsx"],"sourcesContent":["import {\n type ChangeEventHandler,\n createContext,\n forwardRef,\n type ReactNode,\n useContext,\n} from \"react\";\nimport { Fieldset, type FieldsetProps } from \"../fieldset\";\nimport type { RadiobuttonProps } from \"./radiobutton\";\n\nexport interface RadioGroupProps extends Omit<FieldsetProps, \"onChange\"> {\n children: ReactNode;\n /** Will be passed to all Radiobuttons within the radio group */\n name?: RadiobuttonProps[\"name\"];\n /** If you want the group to be controlled, you can pass the selected value here */\n value?: RadiobuttonProps[\"value\"];\n /**\n * Error message is passed to the internal Fieldset, and will also give contained Radiobuttons\n * error styling and aria to indicate invalid state.\n */\n errorMessage?: ReactNode;\n /** Will be passed to all Radiobuttons within the radio group */\n onChange?: ChangeEventHandler<HTMLInputElement> | undefined;\n}\n\ntype RadioGroupContextProps = {\n hasError: boolean;\n} & Pick<RadioGroupProps, \"name\" | \"value\" | \"onChange\">;\n\nconst RadioGroupContext = createContext<RadioGroupContextProps>({\n hasError: false,\n onChange: () => {\n return undefined;\n },\n});\n\nexport const useRadioGroupContext = () => useContext(RadioGroupContext);\n\nexport const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(function RadioGroup(\n { name, value, errorMessage, onChange, children, ...rest },\n ref,\n) {\n return (\n <RadioGroupContext.Provider value={{ name, value, hasError: Boolean(errorMessage), onChange }}>\n <Fieldset errorMessage={errorMessage} {...rest} ref={ref}>\n {children}\n </Fieldset>\n </RadioGroupContext.Provider>\n );\n});\n\nRadioGroup.displayName = \"RadioGroup\";\n"],"mappings":";;;;;;;;;;AAAA;AAAA,EAEE;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AAsCD;AAfN,IAAM,oBAAoB,cAAsC;AAAA,EAC9D,UAAU;AAAA,EACV,UAAU,MAAM;AACd,WAAO;AAAA,EACT;AACF,CAAC;AAEM,IAAM,uBAAuB,MAAM,WAAW,iBAAiB;AAE/D,IAAM,aAAa,WAAiD,SAASA,YAClF,IACA,KACA;AAFA,eAAE,QAAM,OAAO,cAAc,UAAU,SAvCzC,IAuCE,IAAoD,iBAApD,IAAoD,CAAlD,QAAM,SAAO,gBAAc,YAAU;AAGvC,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,EAAE,MAAM,OAAO,UAAU,QAAQ,YAAY,GAAG,SAAS,GAC1F,8BAAC,yCAAS,gBAAgC,OAAzC,EAA+C,KAC7C,WACH,GACF;AAEJ,CAAC;AAED,WAAW,cAAc;","names":["RadioGroup"]}
@@ -1,5 +0,0 @@
1
- export { Radiobutton } from "./radiobutton";
2
- export type * from "./radiobutton";
3
- export { RadioGroup, useRadioGroupContext } from "./radiogroup";
4
- export type * from "./radiogroup";
5
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/form/radiobutton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,mBAAmB,eAAe,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAChE,mBAAmB,cAAc,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/form/radiobutton/index.tsx","../../../src/form/radiobutton/radiobutton.tsx","../../../src/form/fieldset/fieldset.tsx","../../../src/form/error-message/error-message.tsx","../../../src/form/radiobutton/radiogroup.tsx"],"sourcesContent":["export { Radiobutton } from \"./radiobutton\";\nexport type * from \"./radiobutton\";\nexport { RadioGroup, useRadioGroupContext } from \"./radiogroup\";\nexport type * from \"./radiogroup\";\n","import { forwardRef, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { useFieldsetContext } from \"../fieldset\";\nimport { type RadioGroupProps, useRadioGroupContext } from \"./radiogroup\";\n\nexport interface RadiobuttonProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, \"defaultValue\"> {\n children: ReactNode;\n variant?: \"plain\" | \"bounding-box\";\n /**\n * Set to `true` to add error styling. The component will take care of aria to indicate invalid state.\n *\n * Normally you don't need this, as you should wrap your Radiobuttons in the RadioGroup component.\n * When providing an errorMessage to RadioGroup, all contained Radiobuttons will get correct hasError state.\n *\n * You can use this when your Radiobutton is part of a non-HDS fieldset which shows an error message.\n */\n hasError?: boolean;\n title?: string;\n}\n\nconst isChecked = ({\n checked,\n selectedValue,\n value,\n}: Pick<RadiobuttonProps, \"checked\" | \"value\"> & {\n selectedValue: RadioGroupProps[\"value\"];\n}) => {\n if (typeof checked !== \"undefined\") return checked;\n if (typeof selectedValue !== \"undefined\") return value === selectedValue;\n return undefined;\n};\n\nexport const Radiobutton = forwardRef<HTMLInputElement, RadiobuttonProps>(\n (\n {\n checked,\n value,\n variant = \"plain\",\n hasError: hasErrorProp,\n title,\n children,\n className,\n ...rest\n },\n ref,\n ) => {\n const {\n value: selectedValue,\n hasError: hasRadioGroupError,\n ...context\n } = useRadioGroupContext();\n const { hasError: hasFieldsetError } = useFieldsetContext();\n const hasError = hasFieldsetError || hasRadioGroupError || hasErrorProp;\n\n return (\n <div\n className={clsx(\n \"hds-radiobutton\",\n {\n [`hds-radiobutton--${variant}`]: variant === \"bounding-box\",\n \"hds-radiobutton--error\": hasError,\n },\n className as undefined,\n )}\n >\n <label>\n <input\n {...context}\n {...rest}\n checked={isChecked({ checked, selectedValue, value })}\n value={value}\n ref={ref}\n type=\"radio\"\n />\n <span aria-hidden className=\"hds-radiobutton__checkmark\" />\n {title ? <p className=\"hds-radiobutton__title\">{title}</p> : children}\n </label>\n {title ? children : null}\n </div>\n );\n },\n);\n\nRadiobutton.displayName = \"Radiobutton\";\n","import { useId, forwardRef, createContext, useContext } from \"react\";\nimport type { FieldsetHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\nexport interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n className?: string;\n style?: CSSProperties;\n /**\n * Providing an errorMessage will also give contained Checkboxes or Radiobuttons\n * error styling and aria to indicate invalid state.\n *\n * For Radiobuttons you are even better off using RadioGroup.\n */\n errorMessage?: ReactNode;\n legendProps?: HTMLAttributes<HTMLElement> & { size: \"default\" | \"large\" };\n legend: ReactNode;\n children: ReactNode;\n}\n\nconst FieldsetContext = createContext<{ hasError: boolean }>({ hasError: false });\n\nexport const useFieldsetContext = () => useContext(FieldsetContext);\n\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(\n {\n className,\n style,\n errorMessage,\n legendProps: { size: legendSize = \"default\", className: legendClassName, ...legendProps } = {},\n legend,\n children,\n ...rest\n },\n ref,\n) {\n const errorMessageId = useId();\n\n return (\n <fieldset\n aria-describedby={errorMessage ? errorMessageId : undefined}\n aria-invalid={errorMessage ? true : undefined}\n className={clsx(\"hds-fieldset\", className as undefined)}\n ref={ref}\n style={style}\n {...rest}\n >\n <legend\n className={clsx(\n \"hds-fieldset__legend\",\n { [`hds-fieldset__legend--${legendSize}`]: legendSize },\n legendClassName as undefined,\n )}\n {...legendProps}\n >\n {legend}\n </legend>\n <FieldsetContext.Provider value={{ hasError: Boolean(errorMessage) }}>\n {children}\n </FieldsetContext.Provider>\n <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n </fieldset>\n );\n});\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nexport interface ErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n id: string;\n className?: string;\n}\n\nexport const ErrorMessage = forwardRef<HTMLDivElement, ErrorMessageProps>(\n ({ children, id, className, ...rest }, ref) => {\n return (\n <div\n aria-live=\"assertive\"\n className={clsx(\"hds-error-message\", className as undefined)}\n id={id}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\nErrorMessage.displayName = \"ErrorMessage\";\n","import {\n type ChangeEventHandler,\n createContext,\n forwardRef,\n type ReactNode,\n useContext,\n} from \"react\";\nimport { Fieldset, type FieldsetProps } from \"../fieldset\";\nimport type { RadiobuttonProps } from \"./radiobutton\";\n\nexport interface RadioGroupProps extends Omit<FieldsetProps, \"onChange\"> {\n children: ReactNode;\n /** Will be passed to all Radiobuttons within the radio group */\n name?: RadiobuttonProps[\"name\"];\n /** If you want the group to be controlled, you can pass the selected value here */\n value?: RadiobuttonProps[\"value\"];\n /**\n * Error message is passed to the internal Fieldset, and will also give contained Radiobuttons\n * error styling and aria to indicate invalid state.\n */\n errorMessage?: ReactNode;\n /** Will be passed to all Radiobuttons within the radio group */\n onChange?: ChangeEventHandler<HTMLInputElement> | undefined;\n}\n\ntype RadioGroupContextProps = {\n hasError: boolean;\n} & Pick<RadioGroupProps, \"name\" | \"value\" | \"onChange\">;\n\nconst RadioGroupContext = createContext<RadioGroupContextProps>({\n hasError: false,\n onChange: () => {\n return undefined;\n },\n});\n\nexport const useRadioGroupContext = () => useContext(RadioGroupContext);\n\nexport const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(function RadioGroup(\n { name, value, errorMessage, onChange, children, ...rest },\n ref,\n) {\n return (\n <RadioGroupContext.Provider value={{ name, value, hasError: Boolean(errorMessage), onChange }}>\n <Fieldset errorMessage={errorMessage} {...rest} ref={ref}>\n {children}\n </Fieldset>\n </RadioGroupContext.Provider>\n );\n});\n\nRadioGroup.displayName = \"RadioGroup\";\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react","import_typed_classname","import_jsx_runtime","Fieldset","import_react","import_jsx_runtime","RadioGroup","import_jsx_runtime","_a"]}
@@ -1 +0,0 @@
1
- {"version":3,"file":"radiobutton.d.ts","sourceRoot":"","sources":["../../../src/form/radiobutton/radiobutton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK7E,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,cAAc,CAAC;IACnE,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IACnC;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAcD,eAAO,MAAM,WAAW,+GAiDvB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/form/radiobutton/radiobutton.tsx","../../../src/form/fieldset/fieldset.tsx","../../../src/form/error-message/error-message.tsx","../../../src/form/radiobutton/radiogroup.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { useFieldsetContext } from \"../fieldset\";\nimport { type RadioGroupProps, useRadioGroupContext } from \"./radiogroup\";\n\nexport interface RadiobuttonProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, \"defaultValue\"> {\n children: ReactNode;\n variant?: \"plain\" | \"bounding-box\";\n /**\n * Set to `true` to add error styling. The component will take care of aria to indicate invalid state.\n *\n * Normally you don't need this, as you should wrap your Radiobuttons in the RadioGroup component.\n * When providing an errorMessage to RadioGroup, all contained Radiobuttons will get correct hasError state.\n *\n * You can use this when your Radiobutton is part of a non-HDS fieldset which shows an error message.\n */\n hasError?: boolean;\n title?: string;\n}\n\nconst isChecked = ({\n checked,\n selectedValue,\n value,\n}: Pick<RadiobuttonProps, \"checked\" | \"value\"> & {\n selectedValue: RadioGroupProps[\"value\"];\n}) => {\n if (typeof checked !== \"undefined\") return checked;\n if (typeof selectedValue !== \"undefined\") return value === selectedValue;\n return undefined;\n};\n\nexport const Radiobutton = forwardRef<HTMLInputElement, RadiobuttonProps>(\n (\n {\n checked,\n value,\n variant = \"plain\",\n hasError: hasErrorProp,\n title,\n children,\n className,\n ...rest\n },\n ref,\n ) => {\n const {\n value: selectedValue,\n hasError: hasRadioGroupError,\n ...context\n } = useRadioGroupContext();\n const { hasError: hasFieldsetError } = useFieldsetContext();\n const hasError = hasFieldsetError || hasRadioGroupError || hasErrorProp;\n\n return (\n <div\n className={clsx(\n \"hds-radiobutton\",\n {\n [`hds-radiobutton--${variant}`]: variant === \"bounding-box\",\n \"hds-radiobutton--error\": hasError,\n },\n className as undefined,\n )}\n >\n <label>\n <input\n {...context}\n {...rest}\n checked={isChecked({ checked, selectedValue, value })}\n value={value}\n ref={ref}\n type=\"radio\"\n />\n <span aria-hidden className=\"hds-radiobutton__checkmark\" />\n {title ? <p className=\"hds-radiobutton__title\">{title}</p> : children}\n </label>\n {title ? children : null}\n </div>\n );\n },\n);\n\nRadiobutton.displayName = \"Radiobutton\";\n","import { useId, forwardRef, createContext, useContext } from \"react\";\nimport type { FieldsetHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\nexport interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n className?: string;\n style?: CSSProperties;\n /**\n * Providing an errorMessage will also give contained Checkboxes or Radiobuttons\n * error styling and aria to indicate invalid state.\n *\n * For Radiobuttons you are even better off using RadioGroup.\n */\n errorMessage?: ReactNode;\n legendProps?: HTMLAttributes<HTMLElement> & { size: \"default\" | \"large\" };\n legend: ReactNode;\n children: ReactNode;\n}\n\nconst FieldsetContext = createContext<{ hasError: boolean }>({ hasError: false });\n\nexport const useFieldsetContext = () => useContext(FieldsetContext);\n\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(\n {\n className,\n style,\n errorMessage,\n legendProps: { size: legendSize = \"default\", className: legendClassName, ...legendProps } = {},\n legend,\n children,\n ...rest\n },\n ref,\n) {\n const errorMessageId = useId();\n\n return (\n <fieldset\n aria-describedby={errorMessage ? errorMessageId : undefined}\n aria-invalid={errorMessage ? true : undefined}\n className={clsx(\"hds-fieldset\", className as undefined)}\n ref={ref}\n style={style}\n {...rest}\n >\n <legend\n className={clsx(\n \"hds-fieldset__legend\",\n { [`hds-fieldset__legend--${legendSize}`]: legendSize },\n legendClassName as undefined,\n )}\n {...legendProps}\n >\n {legend}\n </legend>\n <FieldsetContext.Provider value={{ hasError: Boolean(errorMessage) }}>\n {children}\n </FieldsetContext.Provider>\n <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n </fieldset>\n );\n});\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nexport interface ErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n id: string;\n className?: string;\n}\n\nexport const ErrorMessage = forwardRef<HTMLDivElement, ErrorMessageProps>(\n ({ children, id, className, ...rest }, ref) => {\n return (\n <div\n aria-live=\"assertive\"\n className={clsx(\"hds-error-message\", className as undefined)}\n id={id}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\nErrorMessage.displayName = \"ErrorMessage\";\n","import {\n type ChangeEventHandler,\n createContext,\n forwardRef,\n type ReactNode,\n useContext,\n} from \"react\";\nimport { Fieldset, type FieldsetProps } from \"../fieldset\";\nimport type { RadiobuttonProps } from \"./radiobutton\";\n\nexport interface RadioGroupProps extends Omit<FieldsetProps, \"onChange\"> {\n children: ReactNode;\n /** Will be passed to all Radiobuttons within the radio group */\n name?: RadiobuttonProps[\"name\"];\n /** If you want the group to be controlled, you can pass the selected value here */\n value?: RadiobuttonProps[\"value\"];\n /**\n * Error message is passed to the internal Fieldset, and will also give contained Radiobuttons\n * error styling and aria to indicate invalid state.\n */\n errorMessage?: ReactNode;\n /** Will be passed to all Radiobuttons within the radio group */\n onChange?: ChangeEventHandler<HTMLInputElement> | undefined;\n}\n\ntype RadioGroupContextProps = {\n hasError: boolean;\n} & Pick<RadioGroupProps, \"name\" | \"value\" | \"onChange\">;\n\nconst RadioGroupContext = createContext<RadioGroupContextProps>({\n hasError: false,\n onChange: () => {\n return undefined;\n },\n});\n\nexport const useRadioGroupContext = () => useContext(RadioGroupContext);\n\nexport const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(function RadioGroup(\n { name, value, errorMessage, onChange, children, ...rest },\n ref,\n) {\n return (\n <RadioGroupContext.Provider value={{ name, value, hasError: Boolean(errorMessage), onChange }}>\n <Fieldset errorMessage={errorMessage} {...rest} ref={ref}>\n {children}\n </Fieldset>\n </RadioGroupContext.Provider>\n );\n});\n\nRadioGroup.displayName = \"RadioGroup\";\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react","import_typed_classname","import_jsx_runtime","Fieldset","import_react","import_jsx_runtime","RadioGroup","import_jsx_runtime","_a"]}
@@ -1,13 +0,0 @@
1
- import {
2
- Radiobutton
3
- } from "../../chunk-GUNPGSAS.mjs";
4
- import "../../chunk-ZYTUK4B4.mjs";
5
- import "../../chunk-LMF3QGSF.mjs";
6
- import "../../chunk-WEQIEPMT.mjs";
7
- import "../../chunk-NSLSA7F7.mjs";
8
- import "../../chunk-CC5QWW52.mjs";
9
- import "../../chunk-YOSPWY5K.mjs";
10
- export {
11
- Radiobutton
12
- };
13
- //# sourceMappingURL=radiobutton.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"radiogroup.d.ts","sourceRoot":"","sources":["../../../src/form/radiobutton/radiogroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAGvB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC;IACtE,QAAQ,EAAE,SAAS,CAAC;IACpB,gEAAgE;IAChE,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,mFAAmF;IACnF,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAAC;CAC7D;AAED,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EAAE,OAAO,CAAC;CACnB,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC;AASzD,eAAO,MAAM,oBAAoB,8BAAsC,CAAC;AAExE,eAAO,MAAM,UAAU,iHAWrB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/form/radiobutton/radiogroup.tsx","../../../src/form/fieldset/fieldset.tsx","../../../src/form/error-message/error-message.tsx"],"sourcesContent":["import {\n type ChangeEventHandler,\n createContext,\n forwardRef,\n type ReactNode,\n useContext,\n} from \"react\";\nimport { Fieldset, type FieldsetProps } from \"../fieldset\";\nimport type { RadiobuttonProps } from \"./radiobutton\";\n\nexport interface RadioGroupProps extends Omit<FieldsetProps, \"onChange\"> {\n children: ReactNode;\n /** Will be passed to all Radiobuttons within the radio group */\n name?: RadiobuttonProps[\"name\"];\n /** If you want the group to be controlled, you can pass the selected value here */\n value?: RadiobuttonProps[\"value\"];\n /**\n * Error message is passed to the internal Fieldset, and will also give contained Radiobuttons\n * error styling and aria to indicate invalid state.\n */\n errorMessage?: ReactNode;\n /** Will be passed to all Radiobuttons within the radio group */\n onChange?: ChangeEventHandler<HTMLInputElement> | undefined;\n}\n\ntype RadioGroupContextProps = {\n hasError: boolean;\n} & Pick<RadioGroupProps, \"name\" | \"value\" | \"onChange\">;\n\nconst RadioGroupContext = createContext<RadioGroupContextProps>({\n hasError: false,\n onChange: () => {\n return undefined;\n },\n});\n\nexport const useRadioGroupContext = () => useContext(RadioGroupContext);\n\nexport const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(function RadioGroup(\n { name, value, errorMessage, onChange, children, ...rest },\n ref,\n) {\n return (\n <RadioGroupContext.Provider value={{ name, value, hasError: Boolean(errorMessage), onChange }}>\n <Fieldset errorMessage={errorMessage} {...rest} ref={ref}>\n {children}\n </Fieldset>\n </RadioGroupContext.Provider>\n );\n});\n\nRadioGroup.displayName = \"RadioGroup\";\n","import { useId, forwardRef, createContext, useContext } from \"react\";\nimport type { FieldsetHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\nexport interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n className?: string;\n style?: CSSProperties;\n /**\n * Providing an errorMessage will also give contained Checkboxes or Radiobuttons\n * error styling and aria to indicate invalid state.\n *\n * For Radiobuttons you are even better off using RadioGroup.\n */\n errorMessage?: ReactNode;\n legendProps?: HTMLAttributes<HTMLElement> & { size: \"default\" | \"large\" };\n legend: ReactNode;\n children: ReactNode;\n}\n\nconst FieldsetContext = createContext<{ hasError: boolean }>({ hasError: false });\n\nexport const useFieldsetContext = () => useContext(FieldsetContext);\n\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(\n {\n className,\n style,\n errorMessage,\n legendProps: { size: legendSize = \"default\", className: legendClassName, ...legendProps } = {},\n legend,\n children,\n ...rest\n },\n ref,\n) {\n const errorMessageId = useId();\n\n return (\n <fieldset\n aria-describedby={errorMessage ? errorMessageId : undefined}\n aria-invalid={errorMessage ? true : undefined}\n className={clsx(\"hds-fieldset\", className as undefined)}\n ref={ref}\n style={style}\n {...rest}\n >\n <legend\n className={clsx(\n \"hds-fieldset__legend\",\n { [`hds-fieldset__legend--${legendSize}`]: legendSize },\n legendClassName as undefined,\n )}\n {...legendProps}\n >\n {legend}\n </legend>\n <FieldsetContext.Provider value={{ hasError: Boolean(errorMessage) }}>\n {children}\n </FieldsetContext.Provider>\n <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n </fieldset>\n );\n});\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nexport interface ErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n id: string;\n className?: string;\n}\n\nexport const ErrorMessage = forwardRef<HTMLDivElement, ErrorMessageProps>(\n ({ children, id, className, ...rest }, ref) => {\n return (\n <div\n aria-live=\"assertive\"\n className={clsx(\"hds-error-message\", className as undefined)}\n id={id}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\nErrorMessage.displayName = \"ErrorMessage\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,gBAMO;;;ACNP,IAAAC,gBAA6D;AAE7D,IAAAC,0BAAqB;;;ACFrB,6BAAqB;AACrB,mBAA2C;AAWrC;AAHC,IAAM,mBAAe;AAAA,EAC1B,CAAC,IAAsC,QAAQ;AAA9C,iBAAE,YAAU,IAAI,UAVnB,IAUG,IAA8B,iBAA9B,IAA8B,CAA5B,YAAU,MAAI;AACf,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,eAAW,6BAAK,qBAAqB,SAAsB;AAAA,QAC3D;AAAA,QACA;AAAA,SACI,OALL;AAAA,QAOE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;;;ADevB,IAAAC,sBAAA;AAnBJ,IAAM,sBAAkB,6BAAqC,EAAE,UAAU,MAAM,CAAC;AAIzE,IAAM,eAAW,0BAA+C,SAASC,UAC9E,IASA,KACA;AAVA,eAIe;AAAA,IAHb;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,KAA+E,CAAC;AAAA,EA7BjG,IAyBE,IAIe,SAAE,QAAM,aAAa,WAAW,WAAW,gBA7B5D,IA6BiB,IAA+D,wBAA/D,IAA+D,CAA7D,QAA8B,eAJ/C,SAKE;AAAA;AAAA,IACA;AAAA,EA/BJ,IAyBE,IAOK,iBAPL,IAOK;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,qBAAiB,qBAAM;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,oBAAkB,eAAe,iBAAiB;AAAA,MAClD,gBAAc,eAAe,OAAO;AAAA,MACpC,eAAW,8BAAK,gBAAgB,SAAsB;AAAA,MACtD;AAAA,MACA;AAAA,OACI,OANL;AAAA,MAQC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,cACT;AAAA,cACA,EAAE,CAAC,yBAAyB,UAAU,EAAE,GAAG,WAAW;AAAA,cACtD;AAAA,YACF;AAAA,aACI,cANL;AAAA,YAQE;AAAA;AAAA,QACH;AAAA,QACA,6CAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,UAAU,QAAQ,YAAY,EAAE,GAChE,UACH;AAAA,QACA,6CAAC,gBAAa,IAAI,gBAAiB,wBAAa;AAAA;AAAA;AAAA,EAClD;AAEJ,CAAC;;;ADnBK,IAAAC,sBAAA;AAfN,IAAM,wBAAoB,6BAAsC;AAAA,EAC9D,UAAU;AAAA,EACV,UAAU,MAAM;AACd,WAAO;AAAA,EACT;AACF,CAAC;AAEM,IAAM,uBAAuB,UAAM,0BAAW,iBAAiB;AAE/D,IAAM,iBAAa,0BAAiD,SAASC,YAClF,IACA,KACA;AAFA,eAAE,QAAM,OAAO,cAAc,UAAU,SAvCzC,IAuCE,IAAoD,iBAApD,IAAoD,CAAlD,QAAM,SAAO,gBAAc,YAAU;AAGvC,SACE,6CAAC,kBAAkB,UAAlB,EAA2B,OAAO,EAAE,MAAM,OAAO,UAAU,QAAQ,YAAY,GAAG,SAAS,GAC1F,uDAAC,yCAAS,gBAAgC,OAAzC,EAA+C,KAC7C,WACH,GACF;AAEJ,CAAC;AAED,WAAW,cAAc;","names":["import_react","import_react","import_typed_classname","import_jsx_runtime","Fieldset","import_jsx_runtime","RadioGroup"]}
@@ -1,4 +0,0 @@
1
- export { Radiobutton } from "./radiobutton";
2
- export type * from "./radiobutton";
3
- export { RadioGroup, useRadioGroupContext } from "./radiogroup";
4
- export type * from "./radiogroup";
@@ -1,93 +0,0 @@
1
- /* eslint-disable import/no-extraneous-dependencies -- storybook story */
2
- import type { Meta, StoryObj } from "@storybook/react";
3
- import { VStack } from "../../layout";
4
- import { Radiobutton, RadioGroup } from "./index";
5
-
6
- const meta: Meta<typeof Radiobutton> = {
7
- title: "Form/Radiobutton/Radiobutton",
8
- component: Radiobutton,
9
- };
10
-
11
- export default meta;
12
-
13
- type Story = StoryObj<typeof Radiobutton>;
14
-
15
- export const JustARadiobutton: Story = {
16
- name: "Just a radiobutton",
17
- args: {
18
- title: "",
19
- children: "Just a radiobutton",
20
- checked: true,
21
- hasError: false,
22
- variant: "plain",
23
- },
24
- argTypes: {
25
- variant: { control: "inline-radio", options: ["plain", "bounding-box"] },
26
- },
27
- };
28
-
29
- export const PlainRadiobuttons: Story = {
30
- name: "Radiobuttons",
31
- render: (_props) => (
32
- <RadioGroup legend="Radiobuttons should be grouped in a RadioGroup" name="group1">
33
- <Radiobutton>This is a radiobutton</Radiobutton>
34
- <Radiobutton>This is another radiobutton</Radiobutton>
35
- </RadioGroup>
36
- ),
37
- };
38
-
39
- export const PlainRadiobuttonsWithError: Story = {
40
- name: "Radiobuttons with error",
41
- render: (_props) => (
42
- <RadioGroup
43
- legend="RadioGroup will aid you with styling and aria when it is provided an error message"
44
- errorMessage="Something is wrong"
45
- name="group1error"
46
- >
47
- <Radiobutton>This is a radiobutton</Radiobutton>
48
- <Radiobutton>This is another radiobutton</Radiobutton>
49
- </RadioGroup>
50
- ),
51
- };
52
-
53
- export const BoundedRadiobutton: Story = {
54
- name: "Radiobuttons with bounding box",
55
- render: (_props) => (
56
- <VStack gap="8" role="radiogroup">
57
- <Radiobutton name="group2" variant="bounding-box">
58
- This is a radiobutton with bounding box
59
- </Radiobutton>
60
- <Radiobutton hasError name="group2" variant="bounding-box">
61
- This is a radiobutton with bounding box and error
62
- </Radiobutton>
63
- </VStack>
64
- ),
65
- };
66
-
67
- export const DetailedContentRadiobutton: Story = {
68
- name: "Radiobuttons with title",
69
- render: (_props) => (
70
- <VStack gap="8" role="radiogroup">
71
- <Radiobutton name="group4" title="Option 1">
72
- Detailed description if needed
73
- </Radiobutton>
74
- <Radiobutton hasError name="group4" title="Option 2">
75
- Detailed description if needed
76
- </Radiobutton>
77
- </VStack>
78
- ),
79
- };
80
-
81
- export const DetailedContentRadiobuttonWithBoundingBox: Story = {
82
- name: "Radiobuttons with bounding box and title",
83
- render: (_props) => (
84
- <VStack gap="8" role="radiogroup">
85
- <Radiobutton name="group5" title="Option 1" variant="bounding-box">
86
- Detailed description if needed
87
- </Radiobutton>
88
- <Radiobutton hasError name="group5" title="Option 2" variant="bounding-box">
89
- Detailed description if needed
90
- </Radiobutton>
91
- </VStack>
92
- ),
93
- };