@postenbring/hedwig-react 1.4.2 → 2.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.
- package/dist/button/button.d.ts +13 -7
- package/dist/button/button.d.ts.map +1 -1
- package/dist/button/button.js +5 -3
- package/dist/button/button.js.map +1 -1
- package/dist/button/button.mjs +1 -1
- package/dist/button/index.js +5 -3
- package/dist/button/index.js.map +1 -1
- package/dist/button/index.mjs +1 -1
- package/dist/card/card.d.ts +38 -2
- package/dist/card/card.d.ts.map +1 -1
- package/dist/card/card.js +28 -5
- package/dist/card/card.js.map +1 -1
- package/dist/card/card.mjs +3 -1
- package/dist/card/index.js +26 -5
- package/dist/card/index.js.map +1 -1
- package/dist/card/index.mjs +1 -1
- package/dist/{chunk-6DWIJEHQ.mjs → chunk-444SCBJD.mjs} +3 -3
- package/dist/chunk-444SCBJD.mjs.map +1 -0
- package/dist/{chunk-VU2GCAM4.mjs → chunk-7WHIRDTL.mjs} +2 -2
- package/dist/{chunk-6VKQ6IRG.mjs → chunk-GXIKHXWC.mjs} +1 -1
- package/dist/chunk-GXIKHXWC.mjs.map +1 -0
- package/dist/{chunk-IEDOH22E.mjs → chunk-LDZIJR2D.mjs} +28 -6
- package/dist/chunk-LDZIJR2D.mjs.map +1 -0
- package/dist/{chunk-VYS2QNTL.mjs → chunk-OHDHIRAW.mjs} +5 -3
- package/dist/chunk-OHDHIRAW.mjs.map +1 -0
- package/dist/{chunk-AYCHNAU7.mjs → chunk-TYCGAA35.mjs} +6 -4
- package/dist/chunk-TYCGAA35.mjs.map +1 -0
- package/dist/footer/footer.js +6 -4
- package/dist/footer/footer.js.map +1 -1
- package/dist/footer/footer.mjs +2 -2
- package/dist/footer/index.js +6 -4
- package/dist/footer/index.js.map +1 -1
- package/dist/footer/index.mjs +2 -2
- package/dist/form/error-summary/error-summary.js +4 -2
- package/dist/form/error-summary/error-summary.js.map +1 -1
- package/dist/form/error-summary/error-summary.mjs +2 -2
- package/dist/form/error-summary/index.js +4 -2
- package/dist/form/error-summary/index.js.map +1 -1
- package/dist/form/error-summary/index.mjs +2 -2
- package/dist/form/index.js +4 -2
- package/dist/form/index.js.map +1 -1
- package/dist/form/index.mjs +15 -15
- package/dist/index.js +39 -14
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +30 -30
- package/dist/link/index.js +4 -2
- package/dist/link/index.js.map +1 -1
- package/dist/link/index.mjs +1 -1
- package/dist/link/link.d.ts +10 -2
- package/dist/link/link.d.ts.map +1 -1
- package/dist/link/link.js +4 -2
- package/dist/link/link.js.map +1 -1
- package/dist/link/link.mjs +1 -1
- package/dist/modal/index.js.map +1 -1
- package/dist/modal/index.mjs +1 -1
- package/dist/modal/modal.d.ts +1 -1
- package/dist/modal/modal.js.map +1 -1
- package/dist/modal/modal.mjs +1 -1
- package/package.json +6 -6
- package/src/button/button.tsx +19 -10
- package/src/card/card.tsx +73 -10
- package/src/footer/footer.tsx +1 -1
- package/src/link/link.stories.tsx +1 -1
- package/src/link/link.tsx +19 -4
- package/src/modal/modal.stories.tsx +1 -1
- package/src/modal/modal.tsx +1 -1
- package/dist/chunk-6DWIJEHQ.mjs.map +0 -1
- package/dist/chunk-6VKQ6IRG.mjs.map +0 -1
- package/dist/chunk-AYCHNAU7.mjs.map +0 -1
- package/dist/chunk-IEDOH22E.mjs.map +0 -1
- package/dist/chunk-VYS2QNTL.mjs.map +0 -1
- /package/dist/{chunk-VU2GCAM4.mjs.map → chunk-7WHIRDTL.mjs.map} +0 -0
package/src/card/card.tsx
CHANGED
|
@@ -22,14 +22,28 @@ export interface CardImageMediaProps extends React.ImgHTMLAttributes<HTMLImageEl
|
|
|
22
22
|
* @default false
|
|
23
23
|
*/
|
|
24
24
|
asChild?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Define image scaling behavior when the image are varies in both width and height across different page breaks and sizes of the card.
|
|
27
|
+
* "crop": Image always fills the available space.
|
|
28
|
+
* If the aspect ratio doesn't match, then the top/bottom or left/right edges are cropped away.
|
|
29
|
+
* "scale": No cropping, image scales to the maximum size available and centers.
|
|
30
|
+
* If the aspect ratio doesn't match, then the background will show on the top/bottom or left/right sides of the image.
|
|
31
|
+
*
|
|
32
|
+
* @default "crop"
|
|
33
|
+
*/
|
|
34
|
+
variant?: "crop" | "scale";
|
|
25
35
|
}
|
|
26
36
|
export const CardMediaImg = forwardRef<HTMLImageElement, CardImageMediaProps>(
|
|
27
|
-
({ asChild, className, ...rest }, ref) => {
|
|
37
|
+
({ asChild, variant, className, ...rest }, ref) => {
|
|
28
38
|
const Component = asChild ? Slot : "img";
|
|
29
39
|
return (
|
|
30
40
|
<Component
|
|
31
41
|
{...rest}
|
|
32
|
-
className={clsx(
|
|
42
|
+
className={clsx(
|
|
43
|
+
"hds-card__media__img",
|
|
44
|
+
{ "hds-card__img__scale": variant === "scale" },
|
|
45
|
+
className as undefined,
|
|
46
|
+
)}
|
|
33
47
|
ref={ref}
|
|
34
48
|
/>
|
|
35
49
|
);
|
|
@@ -42,7 +56,7 @@ export const CardBody = forwardRef<HTMLDivElement, CardBaseProps>(
|
|
|
42
56
|
const Component = asChild ? Slot : "div";
|
|
43
57
|
return (
|
|
44
58
|
<Component {...rest} className={clsx("hds-card__body", className as undefined)} ref={ref}>
|
|
45
|
-
{children}
|
|
59
|
+
<div className={clsx("hds-card__centerbody", className as undefined)}>{children}</div>
|
|
46
60
|
</Component>
|
|
47
61
|
);
|
|
48
62
|
},
|
|
@@ -143,6 +157,22 @@ export const CardBodyAction = forwardRef<HTMLDivElement, CardBaseProps>(
|
|
|
143
157
|
);
|
|
144
158
|
CardBodyAction.displayName = "Card.BodyAction";
|
|
145
159
|
|
|
160
|
+
export const CardBodyActionRow = forwardRef<HTMLDivElement, CardBaseProps>(
|
|
161
|
+
({ asChild, className, children, ...rest }, ref) => {
|
|
162
|
+
const Component = asChild ? Slot : "div";
|
|
163
|
+
return (
|
|
164
|
+
<Component
|
|
165
|
+
{...rest}
|
|
166
|
+
className={clsx("hds-card__body-action-row", className as undefined)}
|
|
167
|
+
ref={ref}
|
|
168
|
+
>
|
|
169
|
+
{children}
|
|
170
|
+
</Component>
|
|
171
|
+
);
|
|
172
|
+
},
|
|
173
|
+
);
|
|
174
|
+
CardBodyActionRow.displayName = "Card.BodyActionRow";
|
|
175
|
+
|
|
146
176
|
interface CardBodyActionArrowProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
147
177
|
/**
|
|
148
178
|
* Change the default rendered element for the one passed as a child, merging their props and behavior.
|
|
@@ -187,7 +217,7 @@ export interface CardBaseProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
187
217
|
asChild?: boolean;
|
|
188
218
|
}
|
|
189
219
|
|
|
190
|
-
export interface
|
|
220
|
+
export interface CardSlimAndMiniatureProps extends CardBaseProps {
|
|
191
221
|
/**
|
|
192
222
|
* Change the default rendered element for Card.
|
|
193
223
|
*/
|
|
@@ -197,23 +227,49 @@ export interface CardProps extends CardBaseProps {
|
|
|
197
227
|
*
|
|
198
228
|
* @default "slim"
|
|
199
229
|
*/
|
|
200
|
-
variant?: "slim" | "
|
|
230
|
+
variant?: "slim" | "miniature";
|
|
201
231
|
/**
|
|
202
232
|
* The color of the card.
|
|
203
233
|
*
|
|
204
234
|
* @default "lighter-brand"
|
|
205
235
|
* */
|
|
206
236
|
color?: "white" | "lighter-brand" | "light-grey-fill";
|
|
237
|
+
|
|
238
|
+
/* Only fullwidth or focus cards can have images to the left or right of the text: */
|
|
239
|
+
imagePosition?: never;
|
|
207
240
|
}
|
|
208
241
|
|
|
209
|
-
interface CardFocusProps extends CardBaseProps {
|
|
242
|
+
export interface CardFocusProps extends CardBaseProps {
|
|
210
243
|
as?: "section" | "div" | "article" | "aside";
|
|
211
244
|
variant: "focus";
|
|
212
|
-
color
|
|
245
|
+
color?: "darker";
|
|
246
|
+
/**
|
|
247
|
+
* fullwidth or focus cards can have images to the left or right of the text.
|
|
248
|
+
*
|
|
249
|
+
* @default "left"
|
|
250
|
+
* */
|
|
251
|
+
imagePosition?: "left" | "right";
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
export interface CardFullwidthProps extends CardBaseProps {
|
|
255
|
+
as?: "section" | "div" | "article" | "aside";
|
|
256
|
+
variant: "full-width";
|
|
257
|
+
color: "white" | "lighter-brand" | "light-grey-fill";
|
|
258
|
+
/**
|
|
259
|
+
* fullwidth or focus cards can have images to the left or right of the text.
|
|
260
|
+
*
|
|
261
|
+
* @default "left"
|
|
262
|
+
* */
|
|
263
|
+
imagePosition?: "left" | "right";
|
|
213
264
|
}
|
|
214
265
|
|
|
215
|
-
export
|
|
216
|
-
|
|
266
|
+
export type CardProps = CardSlimAndMiniatureProps | CardFocusProps | CardFullwidthProps;
|
|
267
|
+
|
|
268
|
+
export const Card = forwardRef<HTMLDivElement, CardProps>(
|
|
269
|
+
(
|
|
270
|
+
{ as: Tag = "section", asChild, className, children, variant, color, imagePosition, ...rest },
|
|
271
|
+
ref,
|
|
272
|
+
) => {
|
|
217
273
|
const Component = asChild ? Slot : Tag;
|
|
218
274
|
const effectiveColor = variant === "focus" && !color ? "darker" : color;
|
|
219
275
|
return (
|
|
@@ -227,11 +283,16 @@ export const Card = forwardRef<HTMLDivElement, CardProps | CardFocusProps>(
|
|
|
227
283
|
{ "hds-card--color-white": effectiveColor === "white" },
|
|
228
284
|
{ "hds-card--color-light-grey-fill": effectiveColor === "light-grey-fill" },
|
|
229
285
|
{ "hds-card--color-darker": effectiveColor === "darker" },
|
|
286
|
+
{ "hds-card--image-position-right": imagePosition === "right" },
|
|
230
287
|
className as undefined,
|
|
231
288
|
)}
|
|
232
289
|
ref={ref}
|
|
233
290
|
>
|
|
234
|
-
{
|
|
291
|
+
{variant === "full-width" ? (
|
|
292
|
+
<div className={clsx("hds-card__layoutwrapper", className as undefined)}>{children}</div>
|
|
293
|
+
) : (
|
|
294
|
+
children
|
|
295
|
+
)}
|
|
235
296
|
</Component>
|
|
236
297
|
);
|
|
237
298
|
},
|
|
@@ -246,6 +307,7 @@ Card.BodyHeaderOverline = CardBodyHeaderOverline;
|
|
|
246
307
|
Card.BodyHeaderTitle = CardBodyHeaderTitle;
|
|
247
308
|
Card.BodyDescription = CardBodyDescription;
|
|
248
309
|
Card.BodyAction = CardBodyAction;
|
|
310
|
+
Card.BodyActionRow = CardBodyActionRow;
|
|
249
311
|
Card.BodyActionArrow = CardBodyActionArrow;
|
|
250
312
|
|
|
251
313
|
type CardType = ReturnType<typeof forwardRef<HTMLDivElement, CardProps>> & {
|
|
@@ -257,5 +319,6 @@ type CardType = ReturnType<typeof forwardRef<HTMLDivElement, CardProps>> & {
|
|
|
257
319
|
BodyHeaderTitle: typeof CardBodyHeaderTitle;
|
|
258
320
|
BodyDescription: typeof CardBodyDescription;
|
|
259
321
|
BodyAction: typeof CardBodyAction;
|
|
322
|
+
BodyActionRow: typeof CardBodyActionRow;
|
|
260
323
|
BodyActionArrow: typeof CardBodyActionArrow;
|
|
261
324
|
};
|
package/src/footer/footer.tsx
CHANGED
|
@@ -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="
|
|
50
|
+
<Button asChild variant="inverted" className={clsx(className as undefined)}>
|
|
51
51
|
<Component ref={ref} {...rest}>
|
|
52
52
|
{children}
|
|
53
53
|
</Component>
|
package/src/link/link.tsx
CHANGED
|
@@ -7,12 +7,21 @@ 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";
|
|
10
|
+
variant?: "underline" | "solid" | "inverted" | "no-underline" | "inverted-no-underline";
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
13
|
* Font size of the link
|
|
14
|
+
* @default "default"
|
|
14
15
|
*/
|
|
15
|
-
size?: "
|
|
16
|
+
size?: "default" | "small" | "large" | "technical";
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Specify that there is an icon in the link.
|
|
20
|
+
* `icon="leading"`: There is an icon before the text.
|
|
21
|
+
* `icon="trailing"`: There is an icon after the text.
|
|
22
|
+
*
|
|
23
|
+
*/
|
|
24
|
+
icon?: "leading" | "trailing";
|
|
16
25
|
|
|
17
26
|
children: React.ReactNode;
|
|
18
27
|
|
|
@@ -25,14 +34,20 @@ export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>
|
|
|
25
34
|
}
|
|
26
35
|
|
|
27
36
|
export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
|
|
28
|
-
(
|
|
37
|
+
(
|
|
38
|
+
{ asChild, children, variant = "underline", size = "default", icon, className, ...rest },
|
|
39
|
+
ref,
|
|
40
|
+
) => {
|
|
29
41
|
const Component = asChild ? Slot : "a";
|
|
42
|
+
|
|
30
43
|
return (
|
|
31
44
|
<Component
|
|
32
45
|
className={clsx(
|
|
33
46
|
"hds-link",
|
|
34
47
|
variant !== "underline" && `hds-link--${variant}`,
|
|
35
|
-
size !== "
|
|
48
|
+
size !== "default" && `hds-link--${size}`,
|
|
49
|
+
{ "hds-link--trailing-icon": icon === "trailing" },
|
|
50
|
+
{ "hds-link--leading-icon": icon === "leading" },
|
|
36
51
|
className as undefined,
|
|
37
52
|
)}
|
|
38
53
|
ref={ref}
|
|
@@ -34,7 +34,7 @@ export const Preview: Story = {
|
|
|
34
34
|
<Modal.Footer>
|
|
35
35
|
<HStack gap="16" wrap>
|
|
36
36
|
<Button onClick={onMainAction}>Main action</Button>
|
|
37
|
-
<Button variant="
|
|
37
|
+
<Button variant="secondary" onClick={onClose}>
|
|
38
38
|
Cancel
|
|
39
39
|
</Button>
|
|
40
40
|
</HStack>
|
package/src/modal/modal.tsx
CHANGED
|
@@ -108,7 +108,7 @@ export interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {
|
|
|
108
108
|
* <Modal.Footer>
|
|
109
109
|
* <HStack gap="16" wrap>
|
|
110
110
|
* <Button onClick={onMainAction}>Main action</Button>
|
|
111
|
-
* <Button variant="
|
|
111
|
+
* <Button variant="secondary" onClick={onClose}>
|
|
112
112
|
* Cancel
|
|
113
113
|
* </Button>
|
|
114
114
|
* </HStack>
|
|
@@ -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=\"primary-outline\" 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,mBAAkB,WAAW,KAAK,SAAsB,GAC9E,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/modal/modal.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box } from \"../box/box\";\nimport { useMergeRefs } from \"../utils/utils\";\n\ninterface ModalHeaderProps extends React.HTMLAttributes<HTMLHeadingElement> {\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 ModalHeader = forwardRef<HTMLHeadingElement, ModalHeaderProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"h1\";\n return (\n <Component\n className={clsx(\"hds-modal__header\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nModalHeader.displayName = \"Modal.Header\";\n\ninterface ModalContentProps extends React.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}\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n className={clsx(\"hds-modal__content\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nModalContent.displayName = \"Modal.Content\";\n\ninterface ModalFooterProps extends React.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}\nexport const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"footer\";\n return (\n <Component\n className={clsx(\"hds-modal__footer\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nModalFooter.displayName = \"Modal.Footer\";\n\nexport interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {\n children: React.ReactNode;\n\n /**\n * Controls the open state of the modal\n */\n open?: boolean;\n\n /**\n * Whether to close when clicking on the backdrop.\n */\n closeOnBackdropClick?: boolean;\n}\n\n/**\n * A modal dialog is a window that forces the user to interact with it before they can return to other parts of the application.\n *\n * Uses the native [`dialog`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element.\n *\n * @example\n * ```tsx\n * const modalRef = useRef<HTMLDialogElement>(null);\n * const onClose = () => modalRef.current?.close();\n *\n * return (\n * <>\n * <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>\n * <Modal ref={modalRef}>\n * <Modal.Header>Dialog header</Modal.Header>\n * <Modal.Content>\n * <p>\n * Dialog header Dialog description - a description of what is about to happen and maybe\n * something about the consequences.\n * </p>\n * </Modal.Content>\n * <Modal.Footer>\n * <HStack gap=\"16\" wrap>\n * <Button onClick={onMainAction}>Main action</Button>\n * <Button variant=\"primary-outline\" onClick={onClose}>\n * Cancel\n * </Button>\n * </HStack>\n * </Modal.Footer>\n * </Modal>\n * </>\n * );\n * ```\n */\nexport const Modal = forwardRef<HTMLDialogElement, ModalProps>(\n ({ children, className, open, closeOnBackdropClick, onClick, ...rest }, ref) => {\n const modalRef = useRef<HTMLDialogElement>(null);\n const mergedRef = useMergeRefs([modalRef, ref]);\n\n // The X close button that comes from the `Box` component\n function onCloseButtonClick() {\n modalRef.current?.close();\n return false;\n }\n\n // No scroll when modal is open\n useScrollLock(modalRef, \"hds-modal-scroll-lock\");\n\n // `open` prop\n useEffect(() => {\n if (modalRef.current && open !== undefined) {\n if (open && !modalRef.current.open) {\n modalRef.current.showModal();\n } else if (!open && modalRef.current.open) {\n modalRef.current.close();\n }\n }\n }, [modalRef, open]);\n\n function onDialogClick(e: React.MouseEvent<HTMLElement>) {\n if (closeOnBackdropClick && e.target === modalRef.current) {\n modalRef.current.close();\n }\n onClick?.(e as React.MouseEvent<HTMLDialogElement>);\n }\n\n return (\n <Box\n asChild\n className={clsx(\"hds-modal\", className as undefined)}\n closeable\n onClick={onDialogClick}\n onClose={onCloseButtonClick}\n variant=\"white\"\n >\n <dialog ref={mergedRef} {...rest}>\n {children}\n </dialog>\n </Box>\n );\n },\n) as ModalType;\nModal.displayName = \"Modal\";\n\ntype ModalType = ReturnType<typeof forwardRef<HTMLDialogElement, ModalProps>> & {\n Header: typeof ModalHeader;\n Content: typeof ModalContent;\n Footer: typeof ModalFooter;\n};\n\nModal.Header = ModalHeader;\nModal.Content = ModalContent;\nModal.Footer = ModalFooter;\n\nfunction useScrollLock(modalRef: React.RefObject<HTMLDialogElement>, bodyClass: string) {\n useEffect(() => {\n if (!modalRef.current) return;\n if (modalRef.current.open) document.body.classList.add(bodyClass);\n\n const observer = new MutationObserver(() => {\n if (modalRef.current?.open) document.body.classList.add(bodyClass);\n else document.body.classList.remove(bodyClass);\n });\n observer.observe(modalRef.current, {\n attributes: true,\n attributeFilter: [\"open\"],\n });\n return () => {\n observer.disconnect();\n document.body.classList.remove(bodyClass);\n };\n }, [bodyClass, modalRef]);\n}\n"],"mappings":"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","names":["_a"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/button/button.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /**\n * The height, font size and padding of the button\n */\n size?: \"small\" | \"medium\" | \"large\";\n\n /**\n * The background and fill of the button\n *\n * @default \"primary\"\n */\n variant?: \"primary\" | \"secondary\" | \"primary-outline\" | \"secondary-outline\";\n\n /**\n * Make the button use 100% width available.\n * Using the \"mobile\" it only stretch to full width on smaller screens\n */\n fullWidth?: boolean | \"mobile\";\n\n /**\n * Use the button as an icon button\n *\n * Render the icon in `children`\n */\n icon?: 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 * Button component\n *\n * @example\n * <Button variant=\"primary\">Primary</Button>\n * <Button variant=\"secondary\" size=\"large\">Secondary</Button>\n * <Button variant=\"primary-outline\">Primary Outline</Button>\n * <Button variant=\"secondary-outline\" fullWidth=\"mobile\">Secondary Outline</Button>\n *\n * @example\n * // If used for navigation use the `asChild` prop with a anchor element as a child.\n * <Button asChild><a href=\"/home\">Home</a></Button>\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n asChild,\n children,\n variant = \"primary\",\n size = \"medium\",\n fullWidth = false,\n icon,\n className,\n ...rest\n },\n ref,\n ) => {\n const Component = asChild ? Slot : \"button\";\n return (\n <Component\n className={clsx(\n \"hds-button\",\n `hds-button--${size}`,\n `hds-button--${variant}`,\n {\n \"hds-button--full\": fullWidth === true,\n \"hds-button--mobile-full\": fullWidth === \"mobile\",\n \"hds-button--icon-only\": icon,\n },\n className as undefined,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nButton.displayName = \"Button\";\n"],"mappings":";;;;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,YAAY;AAiEf;AAhBC,IAAM,SAAS;AAAA,EACpB,CACE,IAUA,QACG;AAXH,iBACE;AAAA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,IA5DN,IAqDI,IAQK,iBARL,IAQK;AAAA,MAPH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,eAAe,IAAI;AAAA,UACnB,eAAe,OAAO;AAAA,UACtB;AAAA,YACE,oBAAoB,cAAc;AAAA,YAClC,2BAA2B,cAAc;AAAA,YACzC,yBAAyB;AAAA,UAC3B;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,SACI,OAbL;AAAA,QAeE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,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}\nexport const CardMediaImg = forwardRef<HTMLImageElement, CardImageMediaProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"img\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__media__img\", className as undefined)}\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 {children}\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\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 CardProps 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\" | \"full-width\" | \"miniature\" | \"focus\";\n /**\n * The color of the card.\n *\n * @default \"lighter-brand\"\n * */\n color?: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n}\n\ninterface CardFocusProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"focus\";\n color: \"darker\";\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps | CardFocusProps>(\n ({ as: Tag = \"section\", asChild, className, children, variant, color, ...rest }, ref) => {\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--color-white\": effectiveColor === \"white\" },\n { \"hds-card--color-light-grey-fill\": effectiveColor === \"light-grey-fill\" },\n { \"hds-card--color-darker\": effectiveColor === \"darker\" },\n className as undefined,\n )}\n ref={ref}\n >\n {children}\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.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 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\";\n\n /**\n * Font size of the link\n */\n size?: \"small\" | \"medium\" | \"large\";\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 ({ asChild, children, variant = \"underline\", size = \"medium\", className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"a\";\n return (\n <Component\n className={clsx(\n \"hds-link\",\n variant !== \"underline\" && `hds-link--${variant}`,\n size !== \"medium\" && `hds-link--${size}`,\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;AA2Bf;AAJC,IAAM,OAAO;AAAA,EAClB,CAAC,IAAmF,QAAQ;AAA3F,iBAAE,WAAS,UAAU,UAAU,aAAa,OAAO,UAAU,UA3BhE,IA2BG,IAA2E,iBAA3E,IAA2E,CAAzE,WAAS,YAAU,WAAuB,QAAiB;AAC5D,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY,eAAe,aAAa,OAAO;AAAA,UAC/C,SAAS,YAAY,aAAa,IAAI;AAAA,UACtC;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;","names":[]}
|
|
File without changes
|